html, body { height: 100%; } body { background-color: #333; font-family: sans-serif; margin: 0; overflow: hidden; } .farSide { text-align: right; } html[dir="RTL"] .farSide { text-align: left; } #mainTable{ margin-left:42px; width:calc(100% - 42px); } #blockFilter{ width:42px; background:#333; position:fixed; top:110px; left:0; } #blockFilter a{ display:block; box-sizing:border-box; width:100%; height:36px; line-height:36px; text-align:center; color:#999; border-right-width:0px; border-right-style:solid; border-right-color:#f43; cursor:pointer; transition:.2s; } #blockFilter a.selected{ color:#fff; border-right-width:4px; background:#494949; } #blockFilter a:hover{ color:#fff; background:#494949; } /* Buttons */ button { margin: 5px 3px; padding: 10px; border-radius: 4px; border: none; font-size: large; background-color: #fff; color: #000; } button.primary { border: 1px solid #dd4b39; background-color: #dd4b39; color: #fff; } button.primary>img { opacity: 1; } button>img { opacity: 0.6; vertical-align: text-bottom; } button:hover>img { opacity: 1; } button:hover { box-shadow: 2px 2px 5px #888; } button.disabled:hover>img { opacity: 0.6; } button.disabled { display: none; } h1 { font-weight: normal; font-size: 140%; margin-left: 5px; margin-right: 5px; } /* Tabs */ #tabRow>td { border: 1px solid #ccc; border-bottom: none; } td.tabon { border-bottom-color: #ddd !important; background-color: #ddd; padding: 5px 19px; } td.taboff { cursor: pointer; padding: 5px 19px; } td.taboff:hover { background-color: #fff; } td.tabmin { border-top-style: none !important; border-left-style: none !important; border-right-style: none !important; } td.tabmax { border:none!important; width: 99%; padding-left: 10px; padding-right: 10px; text-align: right; } html[dir=rtl] td.tabmax { text-align: left; } table { border-collapse: collapse; margin: 0; padding: 0; border: none; } td { padding: 0; vertical-align: middle; } .content { visibility: hidden; margin: 0; padding: 1ex; position: absolute; direction: ltr; } pre.content { border: 1px solid #ccc; overflow: scroll; padding: 20px; font-size: 15px; } #content_blocks { padding: 0; } .blocklySvg { border-top: none !important; } #content_xml { resize: none; outline: none; border: 1px solid #ccc; font-family: monospace; overflow: scroll; } #trashButton{ margin-right:-1px; } #check-device-online { display: inline-block; background: #ddd; box-sizing: border-box; padding: 0 0 0 3px; margin: -7px -1px 4px 1px; border-radius: 5px; vertical-align: bottom; cursor: pointer; transition: .2s; } #input-device { display: inline-block; width: 0; height:22px; border: none; outline: none; padding: 0 2px; transition: .3s; box-shadow: inset #999 0 0 3px; border-radius: 3px; background: #333; color: #fff; margin: -13px -4px -4px 0; vertical-align: middle; opacity: 0; } #input-device.open { width: 45px; opacity: 1; } #check-btn{ display:inline-block; padding:6px 12px 5px 5px; } .check-btn { display: inline-block; } #check-device-online:hover { background:#fff; } /* Buttons */ button { padding: 1px 5px; margin: 1px 5px; } button:hover{ opacity:1!important; } /* Sprited icons. */ .icon21 { height: 21px; width: 21px; background-image: url(../media/icons.png); } .trash { background-position: 0px 0px; } .link { background-position: -21px 0px; } .run { background-position: -42px 0px; } .demo { background-position: -61px 0px; } .check { color:#000; opacity: .8; } .check.board-online { color:#090; } .check.board-error { color:#f00; } header { position: relative; width: 100%; height: 75px; min-width: 200px; background-image: linear-gradient(top, #000 0%, #333 100%); background-image: -moz-linear-gradient(top, #000 0%, #333 100%); background-image: -webkit-linear-gradient(top, #000 0%, #333 100%); } header::before{ content:''; position:absolute; top:0; left:0; width:60px; height:60px; z-index: 99; background-image: url(../media/trail.png); } header .logo { position: relative; margin: 20px 5px 0 20px; } header h1 { vertical-align: top; display: inline-block; margin: 0; padding: 24px 0 0; margin-right: 5px; color: #ccc; font-weight: normal; font-size: 21px; position: relative; } header h1 a{ position: absolute; font-size:24px; top:25px; right:-32px; text-decoration: none; color:#666; transition:.3s; } header h1 a b{ position:absolute; color:#fc0; font-size:13px; width:200px; line-height: 13px; left:20px; top:8px; opacity:0; font-weight: normal; transition:.3s; pointer-events: none; } header h1 a:hover{ color:#fc0; } header h1 a:hover b{ left:30px; opacity:1; } header span { vertical-align: top; display: inline-block; padding: 36px 5px 0; color: #999; font-size: 16px; } header span a { transition: .3s; color: #999; } header span a:hover { color: #fa0; } /* tool menu */ .toolMenu{ font-size:15px; padding:5px 12px 4px; position:relative; } .toolMenu div{ transition: .3s; position:absolute; white-space:nowrap; display:table; padding:0; top:-10px; left:-10px; color:#fff; opacity:0; font-size:13px; text-align:right; pointer-events: none; z-index:1; } .toolMenu:hover div{ top:-21px; opacity:.7; } a.toolMenu:hover div,div.toolMenu:hover div{ top:-20px; } /* user menu */ #userMenu{ position:absolute; z-index:100; top:8px; right:16px; font-weight: normal; } #userMenu,#userMenu span{ font-size:15px; } #userMenu a{ transition:.3s; color:#777; text-decoration: none; position:relative; } #userMenu b{ pointer-events: none; transition:.3s; white-space:nowrap; position:absolute; bottom:-14px; left:0; opacity:0; font-weight:normal; font-size:14px; color:#fff; } #userMenu a:hover b{ bottom:-24px; opacity:1; } #userMenu a:hover{ color:#fff; } #userMenu i{ margin-left:6px; } #userMenu span{ cursor:pointer; padding:0; transition:.3s; display:inline; color: #777; } #userMenu span:hover{ color:#fff; } #userMenu span:hover #languageMenu{ color:#fff; } #languageMenu { -webkit-appearance: none; cursor:pointer; font-size:14px; background: none; outline: none; border: none; color: #777; padding-left:14px; margin-left:-16px; transition: .3s; vertical-align: top; } #update { position: absolute; color: #555; font-size: 12px; right: 15px; top: 5px; } table.nav { width: calc(100% - 30px); min-width: 600px!important; height: calc(100vh - 90px); margin: 0 auto; } table.nav td { background: #fff; } table.nav>tr:first-child>td { background: none; } table.nav td.tabmax, table td.tabmin { background-color: #333; } table.nav td.tabmax { padding-right: 5px; } table.nav td.tabmax a, table.nav td.tabmax div, table.nav td.tabmax button{ display:inline-block; height:28px; } table.nav td.tabmax button { margin: -3px 0 4px; /*padding: 3px 12px;*/ outline: none; cursor: pointer; transition: .2s; background:#ddd; vertical-align: bottom; } table.nav td.tabmax button img { opacity: .8; } table.nav td.tabmax button:hover { box-shadow: none; background:#fff; } table.nav table { height: auto; width: 100%; } table.nav td.tabon { background: #ddd; } button#runButton{ background:#dd4b39; border-color:#dd4b39; } table.nav td.tabmax button.opened{ background:#fff; } table.nav td.tabmax button.running{ background:#999; } td#copyCode { background-image: linear-gradient(top, #ddd 0%, #fff 100%); background-image: -moz-linear-gradient(top, #ddd 0%, #fff 100%); background-image: -webkit-linear-gradient(top, #ddd 0%, #fff 100%); cursor: pointer; } td#copyCode:hover { position: relative; background: #fff; cursor: pointer; } td#copyCode:active { background: #eee; cursor: pointer; } td#copyCode:hover:before { content: ''; position: absolute; display: block; z-index: 10; width: 0; height: 0; border-width: 3px 7px; border-color: transparent rgba(255, 255, 255, .3) transparent transparent; border-style: solid; top: 3px; left: 36px; } td#copyCode:after { transition:.3s; content: attr(data-tooltip); position: absolute; display: block; z-index: 10; background: rgba(255, 255, 255, .3); top: -3px; left: 45px; border-radius: 3px; color: #ddd; font-size: 12px; padding: 5px; white-space: nowrap; font-family: 'verdana'; opacity:0; pointer-events: none; } td#copyCode:before { transition:.3s; content: ''; position: absolute; display: block; z-index: 10; width: 0; height: 0; border-width: 3px 7px; border-color: transparent rgba(255, 255, 255, .3) transparent transparent; border-style: solid; top: 3px; left: 31px; opacity:0; pointer-events: none; } td#copyCode:hover:after { opacity:1; left: 50px; } td#copyCode:hover:before { opacity:1; left: 36px; } td#copyCode div { padding: 0; text-align: center; height: 100%; font-size: 16px; pointer-events: none; } .blocklyToolboxDiv { box-shadow: rgba(0, 0, 0, .3) 2px 5px 5px; } .blocklyToolboxDiv::-webkit-scrollbar { width: 8px; } .blocklyToolboxDiv::-webkit-scrollbar-track { background: #ddd; border-radius: 5px; } .blocklyToolboxDiv::-webkit-scrollbar-thumb { background: #bbb; border-radius: 5px; } .linkButton { display: inline-block; font-size: 16px; color: #000; background: #ddd; transition: .3s; border-radius: 5px; margin: -7px -1px 4px 1px; box-sizing: border-box; padding: 4px 10px 5px; vertical-align: bottom; } .linkButton img { height: 17px; margin-bottom: -2px; margin-right: 3px; } .linkButton:link { color: #000; text-decoration: none; } .linkButton:hover { background: #fff; } .linkButton:active { opacity: .8; } /* demo area */ #demo-area { display: none; z-index: 99; position: absolute; right: 20px; top: 125px; width: 400px; min-width: 225px; max-width: 70%; background: rgba(255, 255, 255, .8); border-radius: 20px; border: 10px solid #ccc; transition: opacity .3s; } #demo-area.show { display: block; } #demo-resize-bar { height: calc(100% - 40px); width: 10px; background: #ccc; position: absolute; left: -10px; top: 20px; cursor: col-resize; } #demo-area.resize { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #demo-area .demo-area-content { position: relative; overflow: auto; width: 100%; height: 100%; padding: 0 20px 10px; box-sizing: border-box; } #demo-area .demo-area-content .close-btn { position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; background: #fff; background-image: url(../media/icons.png); background-position: -82px 0px; opacity: 0.4; transition: .3s; cursor: pointer; } #demo-area .demo-area-content .close-btn:hover { opacity: 1; } #demo-area .demo-area-content>h4 { font-size: 20px; margin: 25px 0 10px; } #demo-area .demo-area-content>span { display: inline-block; font-size: 16px; line-height: 24px; margin: 0; } #demo-area .demo-area-content select { outline: none; border: 1px solid #ccc; margin: 0 ; font-size: 16px; } #demo-area .demo-area-content .da { display: none; line-height: 20px; } #demo-area .demo-area-content .da.show { display: block; } #demo-area .demo-area-content h5 { font-size: 16px; margin: 0; } #demo-area .demo-area-content .demo-pre { background: #fff; padding: 15px; overflow: auto; word-wrap: break-word; white-space: pre-wrap; margin-bottom: 25px; } #demo-area-01-show { font-size: 60px; } #demo-area-02-light img { height: 200px; display: none; } #demo-area-02-light.on #demo-area-02-on { display: inline-block; } #demo-area-02-light.off #demo-area-02-off { display: inline-block; } #demo-area-03-container { position: relative; width: 150px; height: 150px; } #demo-area-03-image { position: absolute; top: 0; left: 0; width: 150px; height: 150px; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; transform-origin: 75px 75px; -webkit-transform-origin: 75px 75px; -moz-transform-origin: 75px 75px; } #demo-area-04-area { width: 90%; height: 150px; background: #ccc; } #demo-area-05 .db5 { font-size: 24px; outline: none; margin: 0 10px 10px 0; } #demo-area-08-content { position: relative; width: 100%; max-width: 300px; height: 200px; } #demo-area-08-video { top: 0; left: 0; position: absolute; width: 100%; height: 100%; } #demo-area-08-canvas { top: 0; left: 0; position: absolute; width: 100%; height: 100%; } #demo-area-09-controller{ position:relative; box-sizing:border-box; width:280px; padding:20px; margin:0 auto; background:#333; border:4px solid #222; border-radius:20px; box-shadow:#555 0 5px 10px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; } .demo-area-09-btn{ position:relative; display:inline-block; width:65px; height:32px; background:#555; margin:5px 4px; text-align:center; line-height:32px; border-radius:5px; color:#fff; font-size:16px; vertical-align: middle; cursor:pointer; } .demo-area-09-btn:active{ background:#777; } .demo-area-09-btn.btn-power{ background:#d00; width:32px; border-radius:50%; margin-bottom:10px; } .demo-area-09-btn.btn-power:active{ background:#f22; } .demo-area-09-btn.btn-show{ background:#357; width:177px; color:#acf; margin-bottom:10px; cursor:default; overflow:hidden; } .demo-area-09-btn-group{ width:100%; text-align:center; } .demo-area-09-btn.btn-range{ position:relative; width:calc(100% - 8px); max-width:294px; height:20px; display:block; margin:25px auto; background:#222; cursor:default; } .demo-area-09-btn.btn-range-bar{ position:absolute; width:32px; height:50px; top:-20px; left:0; background:#555; line-height:50px; } .demo-area-09-btn.btn-range-bar:active{ background:#777; } .demo-area-09-btn-group.btn-direction-group{ margin-bottom:10px; } .demo-area-09-btn-group.btn-direction-group .demo-area-09-btn{ height:45px; line-height:45px; } .demo-area-09-btn-group.btn-player-group{ margin-bottom:5px; } .demo-area-09-btn-group.btn-player-group .demo-area-09-btn{ width:38px; margin:5px 2px; } .demo-area-09-btn-group.btn-player-group .btn-pre{ font-size:14px; } .demo-area-09-btn-group.btn-player-group .btn-next{ font-size:14px; } .demo-area-09-btn-group.btn-menu-group .demo-area-09-btn{ width:50px; margin:5px 2px; } .demo-area-09-btn-group.btn-menu-group .btn-color1{ background:#d00; } .demo-area-09-btn-group.btn-menu-group .btn-color1:active{ background:#f22; } .demo-area-09-btn-group.btn-menu-group .btn-color2{ background:#0a0; } .demo-area-09-btn-group.btn-menu-group .btn-color2:active{ background:#2d2; } .demo-area-09-btn-group.btn-menu-group .btn-color3{ background:#09c; } .demo-area-09-btn-group.btn-menu-group .btn-color3:active{ background:#3bf; } .demo-area-09-btn-group.btn-menu-group .btn-color4{ background:#fb0; } .demo-area-09-btn-group.btn-menu-group .btn-color4:active{ background:#ff8; } .demo-area-09-input{ margin:25px auto; -webkit-appearance: none; border-radius:2px; width:calc(100% - 8px); height:20px; background:none; background-image:-webkit-linear-gradient(left ,#246 0%,#246 0%,#222 0%, #222 100%); outline : none; transition:.1s; cursor:pointer; } .demo-area-09-input::-webkit-slider-thumb{ -webkit-appearance: none; width:32px; height:50px; background:#555; border-radius:5px; transition:.1s; } .demo-area-09-input::-webkit-slider-thumb:hover, .demo-area-09-input::-webkit-slider-thumb:active{ background:#777; } #smaple-menu{ display:none; position:absolute; z-index:999; top:115px; right:80px; box-shadow:0 6px 20px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5); width:240px; height:calc(100% - 160px); overflow: hidden; border-radius: 6px; font-size:15px; opacity:0.95; outline:none; } #smaple-menu-content{ width:100%; height:100%; background:#fff; overflow: auto; } #smaple-menu-content h3{ font-size:15px; margin:15px 15px 10px; } #smaple-menu-content div{ transition:.3s; box-sizing: border-box; padding:4px 15px 4px 30px; color:#333; width:100%; position:relative; } #smaple-menu-content div i{ position:absolute; top:0; right:0; font-size:12px; width:40px; height:25px; text-align:center; line-height:25px; opacity:0; transition:.3s; } #smaple-menu-content div:last-child{ margin-bottom:10px; } #smaple-menu-content div:hover{ background:#eee; cursor:pointer; color:#000; } #smaple-menu-content div:hover i{ opacity:1; } #smaple-menu-content div:hover i:hover{ color:#f80; } #demo-frame { width: 100%; margin-top:15px; height: calc(100% - 110px); border: none; z-index: 2; } .remind{ position: fixed; z-index:9999; width:100%; height:100%; } .remind-top{ width:100%; height:500px; } .remind-top div{ height:100%; float:left; } .remind-top-1{ width:550px; background:url(../media/remind-1.png); } .remind-top-2{ background:#000; opacity:.6; width:calc(100% - 800px); } .remind-top-3{ width:250px; background:url(../media/remind-3.png); } .remind-bottom{ width:100%; height:calc(100% - 500px); background:#000; opacity:.6; } .remind .owl{ position:absolute; display:inline-block; bottom:30px; right:20px; z-index:2; width:800px; } .remind .owl .owl-img{ position:absolute; z-index:2; bottom:0; right:0; width:100%; pointer-events: none; } .remind .owl .owl-button{ position:absolute; display:inline-block; z-index:1; bottom:50px; left:11%; width:350px; height:130px; cursor:pointer; background-image:url(../media/owl-button.png); background-repeat: no-repeat; background-size: 100% auto; cursor:pointer; } .remind .owl .owl-button:hover{ background-image:url(../media/owl-button-push.png); } @media (max-width: 1500px){ .remind .owl{ width:700px; } .remind .owl .owl-button{ width:310px; height:120px; bottom:40px; } } @media (max-width: 1200px){ .remind .owl{ width:600px; } .remind .owl .owl-button{ width:260px; height:110px; bottom:30px; } } @media (max-width: 800px){ .remind{ display:none; } }