| 1 |
- :root{--main-color:#86608e;--bg-color:unset;--contrast-color:invert(100%) hue-rotate(-30deg);--accent-color:saturate(20%);--main-contrast-filter:grayscale(100%) invert(100%) contrast(500%);--font-size:.95em;--main-font-color:#555;--inverted-font-color:#ececec;--form-bg:rgba(243,243,243,0.5);--nav-height:60px;--nav-button-height:40px;--hover-filter:brightness(120%);--transition:.2s all ease-out;--border-size:1px;--border:var(--border-size) solid #c5c5c5;--radius:2px;--shadow:0 0 8px 4px rgba(0,0,0,0.1);--shadow-dark:0 3px 6px 2px rgba(0,0,0,0.4);--font:'Roboto','Helvetica','Arial',sans-serif;color:var(--main-font-color);font-family:var(--font)}body{font-size:var(--font-size);margin:0;padding:0;background-color:var(--bg-color)}h1,h2,h3{font-size:1.5em;font-weight:bold;padding:2em;padding-left:0;margin:0}h2{font-size:1em}h3{font-size:.8em}form label{font-weight:600}input[type=number]{-moz-appearance:textfield}textarea,input,select{font-size:var(--font-size);border:var(--border);background-color:var(--form-bg);width:100%;padding:.5em;border-radius:var(--radius);margin-bottom:calc(var(--border-size) * -1);box-sizing:border-box;font-family:var(--font)}textarea:hover,input:hover{filter:brightness(110%)}input[type=checkbox],input[type=radio]{width:unset}input[type=radio],input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:50%;border:var(--border);transform:translateY(15%);margin-left:0}input[type=checkbox]{border-radius:0}input[type=range]{-webkit-appearance:none;padding:0;margin:0;border:0;padding-top:1em;padding-bottom:1em;background-color:unset}input[type=range]::-webkit-slider-thumb{width:1.2em;height:1.2em;border-radius:50%;border:var(--border);background-color:var(--form-bg);cursor:pointer;-webkit-appearance:none;margin-top:-0.6em}input[type=range]::-webkit-slider-runnable-track{height:var(--border-size);cursor:pointer;border:var(--border)}input[type=range]::-moz-range-thumb{width:1.2em;cursor:pointer}input[type=radio]:checked,input[type=checkbox]:checked{background:var(--main-color);filter:var(--accent-color)}button{padding:.5em;border:var(--border);border-radius:var(--radius);background-color:var(--main-color);filter:var(--accent-color);color:var(--inverted-font-color);box-shadow:var(--shadow);font-size:var(--font-size)}button:hover{filter:var(--accent-color) var(--hover-filter)}textarea:focus,input:focus{outline:0}.form-group{margin-bottom:1em}.content{padding-top:var(--nav-height)}.panel,.dialog{margin:1.5em;margin-left:8%;margin-right:8%;border:var(--border);border-radius:var(--radius);padding:2em;box-shadow:var(--shadow);background-color:var(--bg-color);filter:brightness(97%)}.dialog{background-color:white;padding:4em;margin:5%;margin-top:10%;z-index:2}.darken-page{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.6);z-index:1}.badge{font-size:.6em;padding:.1em;padding-left:.4em;padding-right:.4em;font-weight:bold;display:inline-block;border:var(--border);border-radius:1em;background-color:var(--main-color);color:var(--inverted-font-color);box-shadow:var(--shadow);font-size:var(--font-size)}.rows{display:grid;grid-template-columns:100%;grid-template-rows:10%;grid-gap:.3em}.rows>div:nth-child(odd){background-color:var(--form-bg)}.logo{color:var(--main-color);font-size:2em;font-weight:100;vertical-align:middle;filter:var(--main-contrast-filter);position:absolute;top:50%;transform:translateY(-50%)}nav{position:fixed;z-index:3;background-color:var(--main-color);color:var(--inverted-font-color);height:var(--nav-height);top:0;width:100%;box-shadow:var(--shadow-dark);padding-left:1em;box-sizing:border-box}nav a{text-decoration:none;font-weight:600;letter-spacing:.1em;color:var(--main-color);margin-left:1em;margin-right:1em;filter:var(--main-contrast-filter)}nav a:hover{filter:var(--main-contrast-filter) invert()}#nav-items{position:absolute;transform:translateY(-50%);top:50%;padding-left:10%}#nav-toggle,#nav-icon{color:var(--main-color);filter:var(--main-contrast-filter);z-index:0;height:var(--nav-button-height);width:var(--nav-button-height);display:none;transform:unset;margin:unset;position:absolute;top:0;right:0;background-color:transparent;position:absolute;top:50%;transform:translateY(-50%);margin-right:2em}nav #nav-toggle{border:0}#nav-icon{z-index:-1;border:2px solid var(--main-color);box-sizing:border-box;text-align:center;line-height:var(--nav-button-height);cursor:pointer}#nav-toggle:checked+#nav-items{display:inline-block}.grid-auto{display:flex;flex-wrap:wrap}.grid-auto>div{margin:.5em;min-width:15em;flex:1 0.4 20%}.grid-two-one{display:grid;grid-template-columns:50% 50%}.spinner{display:block;position:relative;width:2em;height:2em;border-radius:50%;border:.2em solid transparent;border-top-color:var(--main-color);border-bottom-color:var(--main-color);-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@media screen and (max-width:600px){#nav-toggle,#nav-icon{display:inline-block}#nav-items{display:none;background-color:var(--main-color);width:30%;position:absolute;right:0;top:var(--nav-height);transform:unset;padding-left:unset}#nav-items a{display:block;padding:.5em}.panel{margin-left:2%;margin-right:2%}}@media only screen and (min-resolution:192dpi) and (max-width:800px){#nav-toggle,#nav-icon{display:inline-block}#nav-items{display:none;background-color:var(--main-color);width:30%;position:absolute;right:0;top:var(--nav-height);transform:unset;padding-left:unset}#nav-items a{display:block;padding:.5em}.panel{margin-left:0;margin-right:0;border-right:0;border-left:0}.grid-two-one{display:grid;grid-template-columns:100%}.grid-auto>div{margin-left:0;margin-right:0}input[type=range]::-webkit-slider-thumb{width:2em;height:2em;border:var(--border);-webkit-appearance:none;margin-top:-1em}input[type=range]::-moz-range-thumb{width:2em;cursor:pointer}}@media only screen and (min-resolution:192dpi) and (orientation:landscape){:root{--nav-height:60px}}
|
