@CHARSET "UTF-8"; * { box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } meta, body { font-family: sans-serif; font-size: 16px; width: 100vw; height: 100vh; padding: 0; margin: 0; overflow: hidden; } /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* PANEL */ .start-panel { position: fixed; top: 0px; left: 0px; z-index: 1; color: white; background: #303030; width: 100%; height: 30px; line-height: 30px; padding-left: 30px; text-align: center; } .start-text-wrapper { height: 30px; } /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* CONTENT */ .start-content { padding: 60px 40px 30px 40px; width: 100%; height: 100%; overflow: auto; } .start-row-links { padding: 4px 0px 4px 0px; width: 100%; min-height: 24px; display: block; border-bottom: dotted darkgray 2px; position: relative; } /* %%%%%%%%%% links %%%%%%%%%%*/ .start-link { transition: 0.4s; cursor: pointer; color: steelblue; text-decoration: underline; } .start-link:focus { color: orangered; outline: none; } .start-link:hover { color: gray; } .start-link:active { color: orangered; } /* %%%%%%%%%% settings %%%%%%%%%%*/ .start-settings { color: white; background: #303030; margin-top: 30px; padding: 10px 20px 10px 20px; border-radius: 6px; } .start-settings-label { border-bottom: solid darkgray 2px; } .start-settings-show-hide { float: right; color: lightgray; cursor: pointer; } .start-settings-show-hide:focus { color: orangered; outline: none; } .start-settings-show-hide:hover { color: gray; } .start-settings-show-hide:active { color: orangered; } .start-settings-checkboxes { display: none; } .start-row-checkboxes { border-bottom: dotted darkgray 2px; height: 28px; padding-left: 4px; padding-right: 2px; } .start-left { min-height: 24px; line-height: 24px; float: left; } .start-right { min-height: 24px; line-height: 24px; float: right; } /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* CHECKBOX */ .start-checkbox { opacity: 0; float: left; } .start-checkbox + .start-label { position: relative; cursor: pointer; float: left; } .start-checkbox:focus+.start-label { opacity: 0.8; } .start-checkbox+.start-label::before { content: ' '; position: absolute; left: -24px; top: 2px; width: 20px; height: 20px; display: block; background: lightgray; border: 2px solid dimgray; } .start-checkbox+.start-label::after { content: ' '; position: absolute; left: -19px; top: 7px; width: 14px; height: 14px; display: block; z-index: 1; background-color: dimgray; -ms-transition: all .2s ease; -webkit-transition: all .2s ease; transition: all .3s ease; -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; } .start-checkbox:checked+.start-label::after { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; }