lkarch.org/tools/mathisfun/www.mathsisfun.com/games/a/quantum/css/interface.css

html,body{width:100%;height:100%;padding:0;margin:0;font-size:0;overflow:hidden;box-sizing:border-box;font-family:roboto}body{background:#4f569f;background:-moz-radial-gradient(center,ellipse cover,#4f569f 0%,#1a2f55 100%);background:-webkit-radial-gradient(center,ellipse cover,#4f569f 0%,#1a2f55 100%);background:radial-gradient(ellipse at center,#4f569f 0%,#1a2f55 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f569f',endColorstr='#1a2f55',GradientType=1 );background-image:url(../bg.jpg);background-size:cover}.svg-defs{display:block;position:absolute;top:0;left:0;width:0;height:0}.top-bar{height:10vh;color:#fff;position:relative;border-bottom:2px solid #fff;background:rgba(255,255,255,.2)}.top-bar__title{position:absolute;top:0;left:15vw;width:70vw;text-align:center;font-size:7.5vh;vertical-align:middle;color:#fff;overflow:hidden}.message-success{color:lime!important;fill:lime!important}.message-failure{color:orange!important;fill:orange!important}.message-progress{color:#ff0!important;fill:#ff0!important}.top-bar__menu-button{position:absolute;top:0;left:0;width:10vh;height:10vh}.top-bar__menu-button>svg{width:100%;height:100%}.bottom-bar{height:8vh;color:#fff;position:relative;border-top:2px solid #fff;text-align:center;background:rgba(255,255,255,.2)}.interface-button,.interface-button-nohover{background:0 0;border:none;padding:2vh;margin:0}.interface-button:hover{background-color:rgba(255,255,255,.1)}.interface-button>svg text{font-size:14px;line-height:16px;font-weight:700;text-anchor:middle;fill:#fff}.svg-interface-button{fill:#fff;stroke:none;cursor:pointer}.svg-interface-button-stroke{fill:rgba(255,255,255,.2);stroke:none;cursor:pointer}.svg-interface-button-stroke:hover{fill:rgba(152,230,152,.3)}.speed:hover>rect.svg-interface-button{fill:#98e698!important}.svg-interface-text{fill:#fff;cursor:default}.svg-interface-box-stroke{stroke:none;fill:rgba(255,255,255,.2)}.detection-bar-box-stroke{stroke:#fff;stroke-width:2px;fill:rgba(255,255,255,.2)}.view--hidden{display:none!important}.view--block{display:block;width:100%;height:100%}.view--level-selector{font-size:12px}.level-selector{padding:10px;height:82vh;box-sizing:border-box;overflow-y:auto}.level-selector>ul{list-style:none;margin-top:0;margin-left:0;padding-left:0;color:#ddd}.level-selector>ul>li{padding-left:1em;text-indent:-1em;list-style:none;font-size:3vh;padding-top:10px;cursor:pointer}.level-selector>ul>li:before{content:"\269B";padding-right:5px}.level-selector>ul>li:hover{color:#fff}.encyclopedia-selector{height:82%;overflow-y:auto}.encyclopedia-selector>ul{list-style:none;margin:0;padding:0;color:#ddd}.encyclopedia-selector>ul>li{box-sizing:border-box;display:inline-block;width:50%;padding:1vh;overflow:hidden}.encyclopedia-selector>ul>li button{width:100%;margin:0;padding:0;background:0 0;border:none}.encyclopedia-selector>ul>li svg{width:6vh;height:6vh;background:#fff;border:2px solid #ddd;margin-right:2vw;float:left}.encyclopedia-selector>ul>li h4{display:table-cell;text-align:left;vertical-align:middle;font-size:2.5vh;line-height:2.5vh;overflow:hidden;height:8vh;margin:0;font-weight:700}.encyclopedia-item{height:82%}.encyclopedia-item__container{width:100vh;max-width:100vw;height:100%;box-sizing:border-box;font-size:2.5vh;margin:0 auto;position:relative}.encyclopedia-item__container>article{height:100%;overflow-y:auto;padding:3vh;margin-left:30%;box-sizing:border-box;text-align:center;background:#fff}.encyclopedia-item__container>ul{position:absolute;display:block;top:0;left:0;width:30%;height:100%;box-sizing:border-box;margin:0;padding:0;background:rgba(0,0,0,.3);color:#fff}.encyclopedia-item__container>ul li{list-style:none}.encyclopedia-item__container>ul li button{background:0 0;border:none;padding:2vh 1vh;width:100%}.encyclopedia-item__container>article svg.big-tile{width:30vh}.encyclopedia-item__hint{font-size:.8em;color:#333}.encyclopedia-item__container svg.transition-heatmap{width:70%;height:70%}#game{width:100%;height:100%;font-size:0}#game>svg.blink-svg{width:100%;height:100%;position:absolute;top:0;left:0;z-index:2;transform:translateZ(0)}#game>svg.blink-svg.hidden{display:none}#game>svg.game-svg{width:100%;height:100%;position:relative;z-index:3}#game>canvas{position:fixed;z-index:4;cursor:pointer}#game>canvas.canvas--helper,#game>canvas.canvas--hidden{z-index:-1;visibility:hidden}.board-controls{fill:#111;stroke:none}.title-bar .hidden{display:none}@-webkit-keyframes glowing{0%{fill-opacity:0}50%{fill-opacity:.5}100%{fill-opacity:0}}@-moz-keyframes glowing{0%{fill-opacity:0}50%{fill-opacity:.5}100%{fill-opacity:0}}@-o-keyframes glowing{0%{fill-opacity:0}50%{fill-opacity:.5}100%{fill-opacity:0}}@keyframes glowing{0%{fill-opacity:0}50%{fill-opacity:.5}100%{fill-opacity:0}}.title-bar .next-level>circle.glowing{fill:#0f0;fill-opacity:.2;-webkit-animation:glowing 1500ms infinite;-moz-animation:glowing 1500ms infinite;-o-animation:glowing 1500ms infinite;animation:glowing 1500ms infinite}#level-header{position:fixed;top:5px;width:100%;margin:0 auto;height:25px;text-align:center;z-index:5}#level-footer{position:fixed;bottom:16px;width:100%;margin:0 auto;height:25px;text-align:center;z-index:5}#element-name{font-size:16px}#element-summary{font-size:12px}#element-flavour{font-size:12px;font-style:italic}.label-in,.label-out{font-size:8px}.matrix-element{stroke:gray;stroke-width:.1px}.matrix-element:hover{stroke:#000;stroke-width:2px}div.tooltip{position:fixed;text-align:left;padding:8px;font:12px sans-serif;background:#000;color:#ddd;border:solid 1px #aaa;border-radius:4px;pointer-events:none;z-index:30}.shadow-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:rgba(0,0,0,.4);cursor:pointer}.stock .tile text{font-family:monospace;font-size:24px;font-weight:700;fill:#333;-moz-user-select:-moz-none;-webkit-user-select:none}.stock .tile.stock--available{opacity:1}.stock .tile.stock--depleted{opacity:.5}.pearl{cursor:pointer}.pearl>circle{fill:rgba(255,255,255,.2);stroke:none}.pearl:not(.pearl--passed):hover>circle{fill:rgba(152,230,152,.3)}.pearl--passed>circle{fill:rgba(255,255,255,.6)}.pearl--passed:hover>circle{fill:rgba(152,230,152,.8)}.pearl>text{font-size:20px;text-anchor:middle;dominant-baseline:central}.pearl:not(.pearl--current)>text{opacity:.4}.pearl.pearl-current>text{opacity:.9}.pearl:not(.pearl--passed)>text{fill:#fff}.pearl.pearl-passed>text{fill:#4f569f}.helper-hitbox{fill:#90ee90;cursor:pointer;opacity:0}.helper-hitbox:hover{opacity:.2}text.helper-name{text-anchor:middle;text-transform:uppercase;font-size:24px;font-family:roboto condensed;fill:#fff}text.helper-summary{font-size:24px;font-family:roboto condensed;fill:#fff}.board-hint{cursor:pointer}.board-hint>rect{fill:#4f569f;fill-opacity:.8;stroke:#fff;stroke-width:2px}.board-hint>path{fill:#4f569f;fill-opacity:.8;stroke:none}.board-hint>text{font-size:24px;fill:#fff;text-anchor:middle;dominant-baseline:middle}.detection-bar-text{font-size:30px;fill:#fff;dominant-baseline:middle;cursor:default}.popup{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:100;display:none}.popup-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:rgba(0,0,0,.5)}.popup--shown{display:table!important}.popup-container{display:table-cell;vertical-align:middle}.popup-window{position:relative;z-index:10;width:50%;margin:0 auto;background:#fff;box-shadow:0 0 10px #000;padding:2vh;font-size:3vh;font-family:roboto condensed}.popup-buttons{text-align:right}.popup-buttons>button{background-color:#4f569f;border:none;padding:1vh 3vh;font-size:2vh;color:#fff}.popup-buttons .hidden{display:none}.interface-hint-overlay.hidden{display:none}.interface-hint-overlay rect{fill:#000;fill-opacity:.7}.interface-hint-overlay path{fill:#fff;fill-opacity:.4}.interface-hint-overlay text{fill:#fff;font-size:25px;text-anchor:middle;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.unselectable{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}