style.css

:root{--txtShad:0 0 .3125rem;--font-mono:Consolas, Noto Sans Mono, monospace;--font-sans:Noto Sans, Aptos, Arial, Microsoft Sans Serif, sans-serif;--inp:#aaa;--inp-h:#ccc;--inp-f:#ddd;--inp-s:#fff;--btn:#363636;--btn-h:#545454;--btn-a:#727272}::-webkit-scrollbar{width:.5rem;height:.5rem;transition:.4s}::-webkit-scrollbar-button{width:0;height:0;transition:.4s}::-webkit-scrollbar-thumb{background:#0000}::-webkit-scrollbar-thumb:hover{background:#444444}::-webkit-scrollbar-thumb:active{background:#ffffff}::-webkit-scrollbar-track{background:#0000}::-webkit-scrollbar-track:active{background:#333333}::-webkit-scrollbar-corner{background:transparent}body{background:#080808;width:100vw;height:100vh;overflow:hidden;margin:0;position:fixed;top:0;font-size:unset}#bg{position:absolute;width:100vw;height:100vh;transition:opacity .5s;top:0;z-index:-1}#href{display:flex;flex-wrap:wrap;flex-direction:column;align-content:flex-start;margin:.5rem;max-height:min(36rem, 60vh);width:fit-content}#href:has(>:nth-child(19)){width:38rem}#href,#clock,#weather,dialog{backdrop-filter:blur(.1875rem);border-radius:1rem;background-color:#0002;box-shadow:0 0 1rem black}.sub{counter-reset:a;overflow-x:hidden;overflow-y:overlay;transition:max-height .3s ease-out;max-height:0;background-color:black;position:absolute;transform:translate(19rem, -2rem);z-index:2}.a:hover>.sub,.sub:hover,.a[h]>.sub{transition:max-height .4s ease-in;max-height:32rem;background-color:black;animation:.4s over 0s 1 forwards}@keyframes over{100%{overflow:visible}}@counter-style circled-alpha{system:numeric;symbols:"0" "1" "2" "3" "4" "5" "6" "7" "8" "9" A B C D E F G H I J K L M N O P Q R S T U V W X Y Z}.a{counter-increment:a;color:white;font-family:var(--font-mono);font-size:1.5rem;line-height:2rem;overflow:hidden;position:relative;display:block;width:19rem;height:2rem}.a:hover,.a[h]{background-color:black;overflow:visible}.a_name{color:inherit;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;display:block}.a_name::before{content:counters(a, ".", circled-alpha);margin:0 .5rem}.a>.a_icon{width:1.75rem;height:1.75rem;float:left;margin:.125rem 0 0 .125rem}.a>.a_icon+.a_name{margin-left:2.5rem}.a>.a_icon+.a_name::before{content:none}.a:has(> .sub)::after{content:url(./svg/arrow-right.svg);position:absolute;right:0;top:0;transition:.3s;width:2rem;height:2rem}.a:has(> .sub):hover::after,.a:has(> .sub)[h]::after{transform:rotate(90deg)}.dir::after{content:url("./svg/dbl-arrow-right.svg") !important}u{animation:col 5s infinite}@keyframes col{0%{color:hsl(0,86%,67%);text-shadow:var(--txtShad) hsl(0,86%,67%)}10%{color:hsl(36,86%,67%);text-shadow:var(--txtShad) hsl(36,86%,67%)}20%{color:hsl(72,86%,67%);text-shadow:var(--txtShad) hsl(72,86%,67%)}30%{color:hsl(108,86%,67%);text-shadow:var(--txtShad) hsl(108,86%,67%)}40%{color:hsl(144,86%,67%);text-shadow:var(--txtShad) hsl(144,86%,67%)}50%{color:hsl(180,86%,67%);text-shadow:var(--txtShad) hsl(180,86%,67%)}60%{color:hsl(216,86%,67%);text-shadow:var(--txtShad) hsl(216,86%,67%)}70%{color:hsl(252,86%,67%);text-shadow:var(--txtShad) hsl(252,86%,67%)}80%{color:hsl(288,86%,67%);text-shadow:var(--txtShad) hsl(288,86%,67%)}90%{color:hsl(324,86%,67%);text-shadow:var(--txtShad) hsl(324,86%,67%)}100%{color:hsl(0,86%,67%);text-shadow:var(--txtShad) hsl(0,86%,67%)}}input:focus-visible{outline:none}aside{position:absolute;right:0;top:0;height:100vh;width:45vw;transform:translateX(100%);padding:1rem .5rem 1rem 1rem;box-sizing:border-box;border-radius:1rem 0 0 1rem;transition:transform .4s;background-color:#080808;overflow:auto;color:white;font-family:monospace;display:flex;flex-direction:column;gap:1rem}aside>div{overflow-y:scroll}#settingsCheck:checked~aside{transform:unset}aside input{background-color:#0000;border:0;padding:0;margin:0;height:1rem;color:var(--inp)}aside input:focus{color:var(--inp-f)}aside input:hover{color:var(--inp-h)}aside input[type="checkbox"]{appearance:none;height:.8rem}aside input[type="checkbox"]::after{display:inline-block;content:"";width:.8rem;height:.8rem;background-color:#363636;transition:background-color .3s;border-radius:.2rem}aside input[type="checkbox"]:hover::after{background-color:#545454}aside input[type="checkbox"]:checked::after{background-color:#969696}aside input[type="checkbox"]:checked:hover::after{background-color:#bababa}aside button{background-color:var(--btn);border:0;border-radius:.25rem;width:2rem;height:2rem;padding:0;display:inline-block;vertical-align:middle;align-self:flex-end}aside button:hover{background-color:var(--btn-h)}aside button:hover:active{background-color:var(--btn-a)}aside button>*{display:block;width:100%}aside textarea{background-color:#0000;border:solid .0625rem var(--btn);border-radius:.25rem;resize:vertical;color:var(--inp)}aside textarea:focus{color:var(--inp-f)}aside textarea:hover{color:var(--inp-h)}aside textarea:not([cols]){width:100%}aside select{background-color:#0000;border:0;color:var(--inp)}aside select:focus{color:var(--inp-f)}aside select:hover{color:var(--inp-h)}aside select>option{background-color:var(--btn) !important}aside select>option:hover{background-color:var(--btn-h) !important}aside select>option:checked{background-color:var(--btn-a) !important}#settingsButtonOpen{display:block;position:absolute;right:.5rem;bottom:.5rem;width:2rem;height:2rem;background:url(./svg/gear.svg)}#tabs{height:calc(60% - 1rem);display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;align-items:stretch;gap:1rem}#settings{height:calc(40% - 3rem);display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:1rem}#settings>div{padding:.5rem;background:#121212;border-radius:.25rem;display:flex;flex-direction:column;flex-grow:1}#settings>div>h1{margin-top:0}#settings>div>label,.tab>label{display:inline-flex;align-items:center}#settings>div>label:has(textarea){align-items:start}.tab{padding:.25rem;box-sizing:border-box;flex-grow:1;border-radius:.25rem;background-color:#121212;position:relative}.tab_name{font-size:1rem;display:block}.tab_key{width:2rem;text-align:center}.tab_sliceVal{width:2rem;-moz-appearance:textfield}.tab_sliceVal::-webkit-outer-spin-button,.tab_sliceVal::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tab_sliceVal.tab_sliceStart{text-align:right}.tab_sub{border-left:solid .125rem white;margin-left:.25rem}.tab_sub:has(> .newTab:first-child){border:0;margin-left:0;display:inline-block}.tab_sub>.newTab{margin-left:.25em;font-size:1rem;width:1.4rem;height:1.4rem}.tab_sub>.newTab:first-child{margin-left:0}.tab .upButtons{position:absolute;top:.25rem;right:.25rem;overflow:hidden;max-width:1.4rem;transition:.3s;padding:0;white-space:nowrap;border-radius:.25rem;background-color:#242424}.tab .upButtons>:first-child{margin:0;margin-right:-0.25rem;transition:.1s;transition-delay:.2s;background-image:url(./svg/ellipsis-vertical.svg);background-position:center;background-size:cover}.tab .upButtons button{margin-left:.25em;font-size:1rem;width:1.4rem;height:1.4rem}.tab .upButtons>.swapTabsUp{background-image:url(./svg/arrow-up.svg)}.tab .upButtons>.swapTabsDown{background-image:url(./svg/arrow-down.svg)}.tab .upButtons>.removeTab{background-image:url(./svg/xmark.svg)}.tab .upButtons>.removeTab:hover{background-color:#d11a2a}.tab .upButtons:hover{max-width:4.7rem;padding:.25rem}.tab .upButtons:hover>:first-child{transition-delay:0s;width:0}#settingsConfirm>*>label{width:100%;height:100%}#settingsConfirm>*:has(label[for="import"]){background-image:url(./svg/import.svg)}#export{background-image:url(./svg/export.svg)}#applySetting{background-image:url(./svg/check.svg)}#discardSetting{background-image:url(./svg/xmark.svg)}.newTab{background-image:url(./svg/plus.svg)}#clock{position:absolute;top:5vw;right:5vw;display:inline-block;font-family:var(--font-mono);color:white;font-size:8rem;margin:.5rem}#clock[type="num"]{padding:0 1.5rem}#clock[type="num"]>.num:nth-child(n + 3){font-size:4rem}#clock[type="num"]>.num+.num::before{content:":"}#clock[type="arr"]{width:24rem;height:24rem;border-radius:12rem;--num-deg:30deg}#clock[type="arr"].h24{--num-deg:15deg}#clock[type="arr"]>.arrow{--deg:6deg;--width:.5rem;background-color:white;position:absolute;width:var(--width);height:calc(11rem + var(--width) / 2);top:1rem;left:50%;transform-origin:center 11rem;transform:translateX(-50%) rotate(calc(var(--a) * var(--deg)));border-radius:var(--width);transition:.3s cubic-bezier(.75, 0, .25, 1.5)}#clock[type="arr"]>#arrowH{--deg:var(--num-deg)}#clock[type="arr"]>#arrowM{--width:.25rem}#clock[type="arr"]>#arrowS{--width:.125rem}#clock[type="arr"]>.num{transform:rotate(calc(var(--i) * var(--num-deg)));position:absolute;width:inherit;height:inherit;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:1.5rem;font-family:var(--font-sans)}#clock[type="arr"]>.num>*{transform:rotate(calc(var(--i) * var(--num-deg) * -1));font-size:calc(1.5rem - var(--j) * .25rem)}#clock[type="arr"]>.num>*{text-align:center}#clock:is([type="bcd"], [type="bin"]){display:grid;grid-auto-flow:column;gap:.5rem;width:fit-content;padding:1rem}#clock:is([type="bcd"], [type="bin"])>*{width:2.5rem;height:2.5rem;background-color:#0002;border-radius:.25rem;line-height:2.5rem;font-size:1.5rem;text-align:center;font-family:var(--font-mono);color:transparent}#clock:is([type="bcd"], [type="bin"])>*.a{background-color:white}#clock[type="bin"]{grid-template-rows:repeat(6, 1fr)}#clock[type="bin"]>*:nth-child(1){background-color:transparent;color:transparent}#clock[type="bin"]:not(.h24)>*:nth-child(1),#clock[type="bin"]:not(.h24)>*:nth-child(2),#clock[type="bin"]:not(.h24)>*:nth-last-child(2),#clock[type="bin"]:not(.h24)>*:nth-last-child(3),#clock[type="bin"]:not(.h24)>*:nth-last-child(4),#clock[type="bin"]:not(.h24)>*:nth-last-child(5),#clock[type="bin"]:not(.h24)>*:nth-last-child(6){background-color:transparent;color:transparent}#clock[type="bcd"]{grid-template-rows:repeat(4, 1fr)}#clock[type="bcd"]>*:nth-child(8n + 1),#clock[type="bcd"]>*:nth-child(2){background-color:transparent;color:transparent}#clock[type="bcd"]:not(.h24)>*:nth-child(3),#clock[type="bcd"]:not(.h24)>*:nth-last-child(2),#clock[type="bcd"]:not(.h24)>*:nth-last-child(3){background-color:transparent;color:transparent}@media screen and (max-width:75rem){#clock{position:static}}#weather{position:absolute;top:50%;right:5vw;transform:translateY(-50%);margin:.5rem;padding:1rem;color:white}#weather #temperature{font-family:var(--font-sans);font-size:3rem}#weather_icon{height:4rem;vertical-align:bottom}#weather_desc{font-family:var(--font-sans);text-transform:capitalize;text-align:center;display:inline-block;width:100%}dialog{position:absolute;left:50%;transform:translate(-50%, -50%);margin:0;border:0;padding:1rem;display:block;top:-50%;transition:top .3s;color:white}dialog>h1{margin-top:0;font-family:var(--font-mono);font-size:3rem}dialog>form{margin-bottom:0}dialog>form>*{padding:.5rem}dialog>form>input{font-size:1rem;background-color:#0000;border:0;border-bottom:solid .0625rem white;color:var(--inp)}dialog>form>input:focus{color:var(--inp-f)}dialog>form>input:hover{color:var(--inp-h)}dialog>form>button{border:0;background-color:#0004;border-radius:.25rem;color:var(--inp);font-size:1rem}dialog>form>button:hover{background-color:#0006}dialog>form>button:hover:active{background-color:#0008}dialog[open]{top:50%}