@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(MaterialIcons-Regular.eot); /* For IE6-8 */ /*src: local('Material Icons'), local('MaterialIcons-Regular'), url(./font/material-design-icons/MaterialIcons-Regular.woff2) format('woff2'), url(./font/material-design-icons/MaterialIcons-Regular.woff) format('woff'), url(./font/material-design-icons/MaterialIcons-Regular.ttf) format('truetype'); */ } /* labs二层弹框 */ .setting_left_all { width: 48%; background: #fff; padding: 15px; box-shadow: 1px 2px 3px #eeeeee; border-radius: 5px; } .setting_right_all { width: 48%; position: relative; padding: 0 15px 15px 15px; } .setting_border { background: #fff; border: 1px solid rgb(249, 249, 249); padding: 5px; box-shadow: 1px 2px 3px #eeeeee } .setting_border p { margin: 0; padding: 0; } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } /* toolbox indicator */ #:l { border-left: 10px solid #4c97ff; display: inline-block; } /* -------- styles of shadowbox -------- */ .shadowbox { background-color: rgba(0, 0, 0, 0.6); position: fixed; width: 100%; height: 100%; } .nav-fixed>.shadowbox { z-index: 2; } body>.shadowbox { top: 0px; z-index: 1000; } .collapsible-body>.shadowbox { position: absolute; z-index: 2; } .collapsible-body>.blue-dark { background-color: rgba(14, 6, 65, 0.8); } /* -------- tour card --------- */ .tourCards { position: fixed; z-index: 1002; transition: all 0.5s ease-in-out; overflow: hidden; } .tourCards>* { width: 390px; } .item_highlight { position: relative; z-index: 1001; } /* -------- styles of card display or hide-------- */ .step_hide { visibility: hidden; opacity: 0; width: 200px; } .step_show { visibility: visible; opacity: 1; width: 390px; } /* -------- styles of uploader --------- */ .code-header { height: 45px; padding: 0px 6px; border-bottom: 1px solid #ddd; } .code-header>span.card-title { line-height: 3rem; font-size: 18px; font-weight: 200; } .select-wrapper input.select-dropdown { margin-bottom: 8px; border-bottom: 1.5px solid rgba(158, 158, 158, 0); } .select-wrapper:hover input.select-dropdown:hover { border-bottom: 1.5px solid rgba(158, 158, 158, 0.8); } .header-link { float: right; line-height: 3rem; margin: 0 10px; } .header-link>img { width: 22px; height: 22px; transform: translateY(5px); } /* -------- styles of footer --------- */ footer.page-footer { padding: 0; transition: background-color 0.5s; } /* -------- color change --------- */ #nav_ { transition: background-color 0.5s; } .card-icon-area { transition: border-color 0.5s; } #icon-tool>li.active { transition: background-color 0.5s, border-color 0.5s; } /* -------- styles of error button --------- */ #error-btn { width: 20px; height: 20px; float: right; cursor: pointer; margin-right: 8px; display: none; } #err-msg:focus { outline: none; background-color: rgba(86, 86, 86, 0.8); } /* -------- styles of tooltip & tooltip's icon --------- */ .plugin_options { position: absolute; bottom: 200px; right: 24px; overflow: hidden; transition: all 0.5s ease-in-out; z-index: 2; } .options_hide { visibility: hidden; opacity: 0; height: 0; } .options_active { visibility: visible; opacity: 1; height: 49px; } .plugin_options a { color: rgb(150, 150, 150); font-size: 18px; font-weight: bold; margin-right: 10px; } .plugin_options .card-content { padding: 8px 12px; } .plugin_options .card-content>div { transform: translateY(-3px); } .plugin_options img { width: 25px; height: 25px; margin-right: 5px; transform: translateY(5px); } #Ardunio-main, #Serial-monitor { overflow: hidden; } #main_content>div>div:nth-child(2) { overflow: hidden; height: -moz-calc(100vh - 175px); /* Firefox */ height: -webkit-calc(100vh - 175px); /* WebKit */ height: -o-calc(100vh - 175px); /* Opera */ height: calc(100vh - 175px); /* Standard */ } /* -------- styles of uploader's buttons --------- */ #uploader-btns a { padding: 0 0.5rem; } #uploader .row { margin-bottom: 2px; max-height: 43px; } #uploader input { margin-bottom: 2px; } /* -------- styles of Serial Monitor --------- */ #Serial-monitor .card-content>div.row { padding: 0; margin-bottom: 2px; } #Serial-monitor a.btn { min-width: 60px; } .card-serialMonitor .select-wrapper input.select-dropdown { margin-bottom: 2px; border-bottom: 1.5px solid rgba(158, 158, 158, 0); height: 2rem; line-height: 2rem; } #commsBox { height: -moz-calc(100vh - 400px); height: -webkit-calc(100vh - 400px); height: -o-calc(100vh - 400px); height: calc(100vh - 400px); background-color: rgba(248, 248, 250, 0.966); font-family: Consolas; padding: 6px; margin: 0px 0 10px 0; border: none; overflow-y: auto; resize: none; width: 100%; } #commsBox:focus { outline: none; } #commsBoxs { height: -moz-calc(100vh - 710px); height: -webkit-calc(100vh - 710px); height: -o-calc(100vh - 710px); height: calc(100vh - 710px); background-color: rgba(248, 248, 250, 0.966); font-family: Consolas; padding: 6px; margin: 8px 0 6px 0; border: none; overflow-y: auto; resize: none; width: 100%; } #commsBoxs:focus { outline: none; } /* -------- styles of Serial Monitor --------- */ #icon-tool { margin-top: 6px; position: fixed; right: -5px; transform: translate(80%); transition: all 0.3s linear; } #icon-tool.hover { transform: translate(0); } #icon-tool>li { cursor: pointer; } #icon-tool>li:hover { background-color: rgba(0, 0, 0, 0.1); } #icon-tool>li.active { background-color: #3258cd; border-color: #3258cd; color: #fff; } #icon-tool>li:nth-child(4).active { background-color: rgba(0, 0, 0, 0.1); border-color: inherit; border-bottom-color: rgb(221, 221, 221); color: inherit; } #icon-tool>li:nth-child(6).active { background-color: rgba(0, 0, 0, 0.1); border-color: inherit; border-bottom-color: rgb(221, 221, 221); color: inherit; } #icon-tool>li:nth-child(7).active { background-color: rgba(0, 0, 0, 0.1); border-color: inherit; border-bottom-color: rgb(221, 221, 221); color: inherit; } #icon-tool>li.active.color-red { background-color: #e03021; border-color: #e03021; } #icon-tool>li:nth-child(4).active.color-red { background-color: rgba(0, 0, 0, 0.1); border-color: inherit; border-bottom-color: rgb(221, 221, 221); color: inherit; } #icon-tool>li:nth-child(6).active.color-red { background-color: rgba(0, 0, 0, 0.1); border-color: inherit; border-bottom-color: rgb(221, 221, 221); color: inherit; } #icon-tool>li:nth-child(7).active.color-red { background-color: rgba(0, 0, 0, 0.1); border-color: inherit; border-bottom-color: rgb(221, 221, 221); color: inherit; } #icon-tool>li>i { position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); } #side-lang-trigger { visibility: hidden; opacity: 0; position: fixed; top: 226px; right: 192px; } #side-storage-trigger { visibility: hidden; opacity: 0; position: fixed; top: 256px; right: 192px; } @media only screen and (min-width: 993px) { .row .col.l0 { width: 0%; margin-left: auto; left: auto; right: auto; display: none; } } @media only screen and (max-width: 993px) { #commsBox { height: -moz-calc(100vh - 260px); height: -webkit-calc(100vh - 260px); height: -o-calc(100vh - 260px); height: calc(100vh - 260px); } #commsBox { height: -moz-calc(100vh - 575px); height: -webkit-calc(100vh - 575px); height: -o-calc(100vh - 575px); height: calc(100vh - 575px); } } /* -------- styles of login modal --------- */ #login_modal.modal { width: 350px; position: fixed; right: 50px; top: 62px; left: auto; background-color: #fafafa; padding: 0; max-height: 70%; margin: auto; overflow-y: auto; border-radius: 2px; will-change: top, opacity; } #login_modal .row { margin-left: auto; margin-right: auto; margin-bottom: 2px; } /* -------- styles of cloud file panel --------- */ #cloud_storage_modal { width: 820px; height: 80%; max-height: 560px; overflow-y: hidden; } #cloud_fileListArea { min-height: 450px; height: 70%; max-height: 400px; overflow-y: auto; border: 1px solid #e8e8e9; background-color: rgba(255, 255, 255, 0); } #cloud_askLogin { padding-top: 15px; width: 350px; margin: auto; } .cloud-file { background-color: rgba(255, 255, 255, 0); } .cloud-file-selected { background-color: rgba(66, 165, 245, 0.3); border-color: #0e0e0f; border: 3px; height: 110px !important; padding: 10px; margin: 1px; } #new_create .card-content>div:nth-child(1) { height: 115px; } #new_create .cloud-new { left: 12%; top: -20px; font-size: 135px !important; color: #757575; cursor: pointer; position: relative; } #new_create span.cloud-new { position: absolute; top: 120px; left: 35%; font-size: 14px !important; } #new_create .cloud-new.disabled { pointer-events: none; -webkit-box-shadow: none; box-shadow: none; color: #CCC !important; cursor: default; } #new_create.active>div>div:nth-child(1) { display: none; } #new_create.active>div>div:nth-child(2) { display: block; } #new_create>div>div:nth-child(1) { display: block; } #new_create>div>div:nth-child(2) { display: none; } .cloud-btnPanel { position: relative; height: 30px; } .cloud-btn { font-size: 1.2rem; outline: 0; text-decoration: none; color: #fff; background-color: #64B5F6; text-align: center; letter-spacing: .5px; height: 30px; line-height: 30px; padding: 0 0.3rem; text-transform: uppercase; float: right; margin-right: 7px; border-radius: 5px; } #cloud_fileListArea .card { border-radius: 5px; } #cloud_fileListArea .card-image { border-radius: 5px; height: 50px; background: #454fb5; } #cloud_fileListArea .card-content { min-height: 100px } /* #cloud_fileListArea .card ul { display: none; } #cloud_fileListArea.cloud-file .card:hover ul { display: block; } */ #cloud_fileListArea.locked .card ul { display: none; } #cloud_fileListArea .card:hover li { animation: btnmove 0.4s } #cloud_fileListArea ul { text-align: right; right: 10px; top: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 50px; width: 200px; position: absolute; z-index: 999; } #cloud_fileListArea li { display: inline-block; margin: 5px 5px 0 0; } #cloud_fileListArea li i { color: #fff; cursor: pointer; } #cloud_fileListArea .unblock { display: none } #cloud_fileListArea .cloud_file_state { position: absolute; bottom: -8px; right: -4px; z-index: 999; } #cloud_fileListArea .cloud_file_state>i { display: none; } #cloud_fileListArea .selected .card { /* border: 2px solid #ff8711; */ border: 1px solid #ffc107; } #cloud_fileListArea .selected .cloud_file_state>i:nth-child(1) { display: block; color: #ffc107; font-size: 42px; } #cloud_fileListArea .selected .cloud-btnPanel>li:nth-child(2) { display: inline-block; } #cloud_fileListArea.locked .cloud_file_state>i:nth-child(1) { display: none } #cloud_fileListArea.locked .card { border: 0; } #cloud_fileListArea .cloudInfoPanel>span { margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px; } #cloud_fileListArea .cloudInfoPanel>p { font-size: 14px; font-weight: 300; margin-bottom: 8px; } /* -------- styles of cloud storage sketch_name --------- */ #cloud_fileListArea .cloud_sketch_name { max-width: 400px; line-height: 64px; height: 3rem !important; font-size: 1.2rem !important; border-bottom: 1px solid #9e9e9e; font-style: italic; } .translatable_rename { font-size: 20px; position: absolute; top: 28%; } #cloud_fileListArea .cloud_sketch_name { margin: 8px 0 12px 0 !important; } /* -------- styles of nav tootip --------- */ .nav_tooltip span { display: none; } .nav_tooltip:hover span, .nav_tooltip:focus span { display: block; position: absolute; top: 68px; left: 2px; border: 1px solid #2b2b2a; background-color: rgba(41, 41, 41, 0.87); color: rgb(255, 248, 248); width: 8em !important; line-height: 36px; height: 36px; padding: 0; margin: 0; } /* ------- Vertical Separator Line -------- */ .vertical-separator { padding: 8px 6px 8px 6px; margin-left: 6px; border-left: 1px solid rgba(228, 228, 228, 0.87); font-size: 16px; } /* ------- iframe for login -------*/ .iframe-login { position: fixed; width: 499px; height: 600px; left: 500px; top: 100px; z-index: 999; } /* ----preloader for login modal---- */ #login_modal_preload.progress, #cloud_modal_preload.progress { position: relative; height: 4px; display: block; width: 100%; background-color: #acece6; border-radius: 2px; margin: 0.2rem 0 0.1rem 0; overflow: hidden; } #cloud_modal_preload { position: fixed; top: 0; left: 0; z-index: 1003; width: 100%; height: 100%; background-color: rgba(238, 238, 238, 0.8); } #cloud_modal_preload .preloader-wrapper { position: absolute; top: 30%; left: 45%; z-index: 1001; width: 100px; height: 100px; } /* ----nav help dropdown---- */ .dropdown-content.active { background-color: #fff; margin: 0; display: none; min-width: 120px; max-height: 650px; overflow-y: auto; opacity: 0; position: absolute; z-index: 9999; /* will-change: width, height; */ } /*-----gif tour section ----*/ .slide-section { display: block; background: #eee; width: 850px; top: 15%; height: 540px; overflow: unset; max-height: 81%; /* border: 0.12rem solid #0f6eb1; */ } .slide-content { width: 790px; height: 320px; position: relative; } .slide-element { max-width: 100%; max-height: 100%; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slide-text { text-align: center; font-size: 20px; width: 770px; } .slick-prev:before, .slick-next:before { color: #8f8f92; font-size: 40px; } .slick-dots { bottom: 2px; } .slick-list { height: 100%; overflow-y: auto; } /* uploader reminder modal*/ .modale { position: fixed; left: 0; right: 0; background-color: #fafafa; padding: 0; max-height: 70%; width: 510px !important; margin: auto; overflow-y: auto; border-radius: 5px; will-change: top, opacity; border-radius: 5px; } .modale .modal-content { padding: 24px; } .modale .modal-footer { border-radius: 0 0 2px 2px; background-color: #fafafa; padding: 4px 6px; width: 100%; text-align: right; margin-bottom: 10px; } .modale .h1, .modale .h2, .modale .h3, .modale .h4 { margin-top: 0; } nav ul a { font-size: 0.9rem; padding: 0 10px; } .nav-icon { height: 30px; margin-top: 17px; margin-right: 5px; } .nav-icon2 { height: 27px; margin-top: 17px; margin-right: 5px; } .bar-icon { height: 20px; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* user modal */ #account_alias { display: none; } #userProfile_alias { width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #userProfile_apikey .select-wrapper { display: inline-block; max-width: 150px; height: 30px; } #userProfile_apikey .caret { top: 10px; } #update_Coevent, #update_Coevent_web, #update_Coevent_voice { color: #2c4fcd; cursor: pointer; font-size: 18px; position: relative; top: 5px; } #before_login { overflow: hidden; } #after_login { padding: 24px 24px 6px 24px; /* overflow: hidden; */ display: none; } #after_login>div { padding-bottom: 5px } #after_login>#userProfile_alias { font-size: 20px; font-weight: bold; padding-bottom: 10px; } #userProfile_apikey>div:nth-child(2)>a { color: #2c4fcd; cursor: pointer; float: right; } #userProfile_apikey>div:nth-child(2)>textarea { overflow: visible; resize: none; border-color: rgb(169, 169, 169); border-radius: 5px; height: auto; } #login_modal>.modal-footer { display: none; } #modal_cococloud_btn { float: left; margin-left: 15px; } #modal_logout_btn { float: right; margin-right: 15px; } #login_modal>.modal-footer>a>span { font-size: 15px; color: #fff; } /* Warning Modal */ #gen_warn_image { display: block; height: 128px; position: relative; left: 50%; transform: translateX(-50%); } #gen_warn_title, #gen_warn_body { text-align: center; } #gen_warn_title { margin-bottom: 2rem; } #browserLink { display: inline-block; position: relative; left: 50%; transform: translateX(-50%); } #browserLink>a>img { height: 64px; } #gen_warn>.modal-footer { text-align: center; padding: 0 24px 24px 24px; } /* import-div */ .shadow_container { position: relative; top: 10%; height: -moz-calc(100vh - 145px); /* Firefox */ height: -webkit-calc(100vh - 145px); /* WebKit */ height: -o-calc(100vh - 145px); /* Opera */ height: calc(100vh - 145px); /* Standard */ } .shadow_top { position: relative; transform: translate(-50%, -50%); width: 40%; max-width: 490px; border: dashed #fff; top: 50%; left: 50%; pointer-events: none; } .shadow_top>img { position: relative; width: 150px; transform: translateX(-50%); left: 50%; } .shadow_top>p { position: relative; margin: auto; font-size: 2rem; text-align: center; color: ghostwhite; padding-bottom: 20px; } /** * change toast color */ /* .toast { background: #ec521c; color: #ffffff; font-size: 1.3rem; } */ /* App Center */ #app_center_modal { border-radius: 5px; width: 820px; height: 100%; max-height: 500px; overflow: hidden } #center_categories { border: 1px solid #dddddd; } #center_categories>a { font-weight: bold; } #center_categories>a.active { background-color: #2196F3 !important; color: white !important; border-radius: 2px; } #app_center_modal .card { border-radius: 10px; /* box-shadow: 4px 1px 10px #888888 */ } #app_center_modal .card-image { border-radius: 10px 10px 4px 4px; } #app_center_modal .card .card-content { padding: 20px; } /* Env Detect Modal */ #env_detect { border-radius: 0.8rem; max-height: 80%; max-width: 960px; } #detect_result>div { display: grid; grid-template-columns: 15% 30% 15% 40%; } #detect_before>div:first-child { position: relative; width: 270px; left: 53%; transform: translateX(-50%); } #detect_result>div>h5 { font-size: 1.45rem; color: #818181; place-self: center; margin: 0.82rem 0; text-align: center; } #detect_result>div>div { font-size: 1.2rem; place-self: center; margin: 0.656rem 0; padding: 0 0.3rem; text-align: center; } #detect_result .detect-icons { line-height: 0; } #env_detect .modal-footer { display: grid; grid-template-columns: repeat(3, calc(100%/3)); grid-template-areas: '. detect .'; margin: 12px 0; } #detect-btn { grid-area: detect; height: 88%; margin: 0; display: grid; } #detect-btn>span { font-size: 1.1rem; font-weight: 500; place-self: center; } #detect_preload { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background-color: rgba(238, 238, 238, 0.8); } .preloader-wrapper.big { width: 128px; height: 128px; } .spinner-blue, .spinner-blue-only { border-color: #0080e6; } .circle-clipper .circle { border-width: 8px; } /** * Teachable Machine modal */ .TM_class { width: 95%; height: 80%; max-height: 100%; overflow: hidden; /* background:rgb(237, 237, 238); */ background: #fff; } .TM_class1 { width: 95%; height: 75%; max-height: 100%; overflow: hidden; /* background:rgb(237, 237, 238); */ background: #fff; } .modal_custom.open { top: 40% !important } .modal_custom { top: -30% !important; display: none } .AI_card_content { border: 1.5px solid #4994ec; border-radius: 5px; color: #4994ec; font-weight: 600; font-size: 8px; padding: 3px 7px; margin-bottom: 10px; } .ac-card-title { /* margin-top:10px */ } .Img-filter { filter: invert(100%); } #app_center_modal .tabs { background-color: #fafafa } #app_center_modal .tabs-content { width: 300px; } .tabs { height: 30px; margin-bottom: 20px } .tabs .tab { line-height: 24px; height: 24px; } .tabs .tab a, .tabs .tab a:hover, .tabs .tab a.active { padding: 0 8px; font-size: 13px; background-color: transparent; color: black; } .tabs .indicator { background-color: #039be5; height: 4px } #webcam_capture_modal { width: 820px; height: 100%; max-height: 650px; z-index: 9999; } #webCamPlaceholder { border: 1px solid rgba(0, 0, 0, .075); font-weight: regular; color: rgba(0, 0, 0, .3); height: 240px; width: 320px; text-align: center; padding-top: 100px; background-color: rgba(0, 0, 0, .02); } #SnapshotPlaceholder { border: 1px solid rgba(0, 0, 0, .075); font-weight: regular; color: rgba(0, 0, 0, .3); height: 240px; width: 100%; text-align: center; padding-top: 100px; background-color: rgba(0, 0, 0, .02); } #emotionResultsAll { margin-left: 1.5%; width: 97%; margin-right: 1.5%; text-align: left; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .075); padding: 15px; background-color: rgba(0, 0, 0, .02); margin-bottom: 15px; margin-top: 10px; } #emotionResultsAll_property { margin: 0; padding: 1px 0; } .emotionResultsAll_single { padding-left: 2px; font-weight: 200; color: rgba(0, 0, 0, .4); } #emotionOutput { margin-top: -30px; } /* gesture modal css */ #webCameraGestureFrame {} #webCameraGesture {} .webCameraGestureStyling { border: 1px solid #dddddd; border-radius: 10px; } .webCameraGestureCapturedStyling { border: 10px solid rgba(51, 95, 196, 1); border-radius: 10px; background-position: center; text-align: center; } .webCameraGestureCapturedRestoreStyling { border: 1px solid #dddddd; border-radius: 10px; } #gestureAnalyzeButton { margin-top: 15px; } #gestureResultAreaFrame { margin-top: 25px; } .gestureResultAreaTitle { font-size: 21px; } #gestureResultAreaContent { border: 1px solid rgba(0, 0, 0, .1); background-color: rgba(0, 0, 0, .025); border-radius: 4px; padding: 10px 14px; font-size: 15px; font-weight: 200; font-style: italic; color: rgba(0, 0, 0, 1); } #gesture_recog_modal { width: 820px; height: 100%; max-height: 595px; } #gesture_webCamPlaceholder { border: 1px solid rgba(0, 0, 0, .075); font-weight: regular; color: rgba(0, 0, 0, .3); height: 240px; width: 280px; text-align: center; padding-top: 100px; background-color: rgba(0, 0, 0, .02); border-radius: 10px; } /* end of gesture modal css */ #learn_board.dropdown-content.active { width: 160px !important } #voice_input_modal { width: 820px; height: 100%; max-height: 595px; } #voice_input_modal textarea.disabled { color: gray } #voice_input_modal .speech_language .select-wrapper { border: 0.2px solid #ccc; height: 42px; } #voice_input_modal .speech_language .caret { padding-right: 5px; } #voice_input_modal .speech_language input.select-dropdown { padding-left: 10px; } #speech_textarea { margin-left: 1.5%; max-width: 97%; margin-right: 1.5%; border: 1px solid rgba(0, 0, 0, .2); cursor: default; -webkit-user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; } #speech_textarea:focus { outline: none; } .object_modal { position: absolute; width: 100%; height: 100%; top: 0; color: #fff; background-color: rgba(0, 0, 0, .5); text-align: center; } /* echarts 图表 */ .echartsMain { width: 100%; height: 100%; margin: 0 auto; } #echartsMains { position: absolute; width: 100%; height: 100%; background: #ccc; font-size: 20px; top: 0; } #echartsMainSpan { position: absolute; top: 48%; left: calc(50% - 80px); } /* 切换编辑按钮 */ .edit { position: absolute; width: 100%; height: 99%; background-color: rgba(0, 0, 0, 0); top: 1px; z-index: 2; } .editDiv { /* margin: -5px 10px; */ /* padding: 5px 0 0 5px; */ background-color: #f1f1f1; } .editDiv span { padding: 5px 10px; line-height: 30px; border-top-left-radius: 8px; border-top-right-radius: 8px; cursor: pointer; } /* 打印 可视化 */ .serial-active { background-color: #fff; } #toggle-button { display: none; } .button-label { position: relative; display: inline-block; width: 40px; height: 20px !important; background-color: #ccc; border: 1px solid #ccc; border-radius: 30px; cursor: pointer; } .circle { position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%; background-color: #fff; } .button-label .text { line-height: 20px; font-size: 12px; /* 用来阻止页面文字被选中,出现蓝色 可以将下面两行代码注释掉来查看区别 */ -webkit-user-select: none; user-select: none; } .on { color: #fff; display: none; text-indent: 5px; } .off { color: #fff; display: inline-block; text-indent: 23px; } .button-label .circle { left: 0; transition: all 0.3s; /*transition过度,时间为0.3秒*/ } /* 以下是checked被选中后,紧跟checked标签后面label的样式。 例如:div+p 选择所有紧接着
元素 */ #toggle-button:checked+label.button-label .circle { left: 19px; } #toggle-button:checked+label.button-label .on { display: inline-block; } #toggle-button:checked+label.button-label .off { display: none; } #toggle-button:checked+label.button-label { background-color: #2c4fcd; } #toggle-button1:checked+label.button-label .circle { left: 19px; } #toggle-button1:checked+label.button-label .on { display: inline-block; } #toggle-button1:checked+label.button-label .off { display: none; } #toggle-button1:checked+label.button-label { background-color: #2c4fcd; } .button-label::after { display: none; } .button-label::before { display: none; } /* labs 选择发送方式 */ .select_send_way span { padding: 3px 6px; border-radius: 10px; cursor: pointer; } .select_send_way span.select_send_way_color { background-color: #0080e6; color: #fff } /* label */ .blocklyFlyoutLabelText { font-size: 20px !important; fill: rgb(0, 0, 0) !important; } .modal_close{ position: absolute; top: 0; right: 0; cursor: pointer; z-index: 10; } .loginbtn { background-color: #2136f3; border-radius: 10px; color: white; border: none; height: 30px; width: 102px; } .wetechUsername, .wetechPassword { width: 30% !important; line-height: 25px !important; outline: none !important; border: none !important; border-bottom: 2px solid #000 !important; padding-left: 8px !important; } .wetechUsername:active, .wetechPassword:active { border: none !important; border-bottom: 2px solid #000 !important; padding-left: 8px !important; } .loginbtnDisabled { background-color: #c8cbcf; border-radius: 10px; color: white; border: none; height: 30px; width: 85px; } .WeTech_Modal { width: 75%; } .border{ border: 1px solid #aaa; border-radius: 10px; padding: 0 10px; }