diff options
feat: initial commit of fork
| -rw-r--r-- | LICENSE | 1 | ||||
| -rw-r--r-- | README.md | 18 | ||||
| -rw-r--r-- | css/cs16.css | 1147 | ||||
| -rw-r--r-- | css/cs16.min.css | 2 | ||||
| -rw-r--r-- | deno.lock | 1252 | ||||
| -rw-r--r-- | index.html | 240 | ||||
| -rw-r--r-- | package.json | 12 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 10 | ||||
| -rw-r--r-- | src/cs16.css | 1100 | ||||
| -rw-r--r-- | src/index.css | 25 | ||||
| -rw-r--r-- | svg/tree.svg | 132 | ||||
| -rw-r--r-- | svg/x.svg | 1 |
12 files changed, 2814 insertions, 1126 deletions
@@ -1,6 +1,7 @@ MIT License Copyright (c) 2025 Samuel Breznjak +Copyright (c) 2025 memdmp Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -2,14 +2,18 @@ ## Introduction -cs16.css is a css library based on Counter Strike 1.6 UI. +CSS library based on [cs16.css](https://cs16.samke.me/), adapted to modify default styles of elements. Attempts to "just work" everywhere. ## Installation -You can install cs16.css simply by pasting this to your html `head` tag: +You can install cs16.css simply by pasting this to your html `head` tag and adding `class="cs"` to your body (or wherever else you wish to enable "cs1.6 mode"): ```html -<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/css/cs16.min.css"> +<link + rel="stylesheet" + type="text/css" + href="https://git.estrogen.zone/css16-defaults.css.git/plain/css/cs16.min.css" +/> ``` or you can download css file and font from this repo. Inside css folder are prefixed and minified versions of cs16.css you can use. @@ -36,8 +40,8 @@ package.json - `ArialPixel.ttf` - Main font. - `package.json` - Here you can find all installed packages as well as scripts for creating prefixed and minified versions of cs16.css. - `index.html`, `index.css`, `main.js` - Files for documentation page. -- `src/cs16.css` - Main cs16.css file. Edit this file if you want to change styling. -- `css/cs16.css`, `css/cs16.min.css` - Do not touch these files. These files are generated by `build:css` script from package.json. +- `src/cs16.css` - Main cs16.css file. Edit this file if you want to change styling. +- `css/cs16.css`, `css/cs16.min.css` - Do not touch these files. These files are generated by `build:css` script from package.json. ### Development @@ -60,13 +64,13 @@ git checkout -b my-new-branch #### Install dependencies ```bash -pnpm install +deno install ``` #### Build css/cs16.css and css/cs16.min.css ```bash -pnpm run build:css +deno task build:css ``` ## License diff --git a/css/cs16.css b/css/cs16.css index d750f0b..39ea86b 100644 --- a/css/cs16.css +++ b/css/cs16.css @@ -22,177 +22,183 @@ --scrollbar-track: #5a6a50; } -*, -*::before, -*::after { - box-sizing: border-box; -} - -* { - margin: 0; - padding: 0; -} - -input, -button, -textarea, -select { - font: inherit; -} - -p, -h1, -h2, -h3, -h4, -h5, -h6 { - overflow-wrap: break-word; - font-weight: 400; -} - @font-face { font-family: ArialPixel; - src: url("https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/ArialPixel.ttf") - format("truetype"); + src: url('https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/ArialPixel.ttf') + format('truetype'); font-weight: 400; font-style: normal; } -body { - font-weight: 400; - line-height: 1.5; - background-color: var(--bg); - color: var(--text); - font-family: ArialPixel, system-ui, sans-serif; -} - -/* Scrollbars */ +.cs { + & { + font-weight: 400; + line-height: 1.5; + background-color: var(--bg); + color: var(--text); + font-family: ArialPixel, system-ui, sans-serif; + } -::-webkit-scrollbar { - width: 18px; -} + *, + *::before, + *::after { + box-sizing: border-box; + } -::-webkit-scrollbar-track { - background-color: var(--scrollbar-track); - width: 18px; - border: 1px solid var(--border-dark); - border-left: 0; -} + * { + margin: 0; + padding: 0; + } -::-webkit-scrollbar-thumb { - width: 17px; - background-color: var(--bg); - border: 1px solid; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); -} + input, + button, + textarea, + select { + font: inherit; + } -::-webkit-scrollbar-corner { - background-color: var(--scrollbar-track); -} + p, + h1, + h2, + h3, + h4, + h5, + h6 { + overflow-wrap: break-word; + font-weight: 400; + } -::-webkit-scrollbar-button:vertical:start:decrement, -::-webkit-scrollbar-button:vertical:end:increment { - display: block; -} + /* Scrollbars */ -::-webkit-scrollbar-button:vertical:start:increment, -::-webkit-scrollbar-button:vertical:start:decrement, -::-webkit-scrollbar-button:vertical:end:increment, -::-webkit-scrollbar-button:vertical:end:decrement { - background-repeat: no-repeat; - height: 17px; -} + ::-webkit-scrollbar { + width: 18px; + } -::-webkit-scrollbar-button:vertical:start { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M6,8 7,8 7,9 6,9 M7,9 8,9 8,10 7,10 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M8,6 9,6 9,7 8,7 M9,9 10,9 10,10 9,10 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,9 11,9 11,10 10,10 M10,8 11,8 11,9 10,9 M11,9 12,9 12,10 11,10 ' fill='%23a0aa95'/%3E%3C/svg%3E"); -} + ::-webkit-scrollbar-track { + background-color: var(--scrollbar-track); + width: 18px; + border: 1px solid var(--border-dark); + border-left: 0; + } -::-webkit-scrollbar-button:vertical:start, -::-webkit-scrollbar-button:vertical:end { - border: 1px solid; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); -} + ::-webkit-scrollbar-thumb { + width: 17px; + background-color: var(--bg); + border: 1px solid; + border-color: var(--border-light) var(--border-dark) var(--border-dark) + var(--border-light); + } -::-webkit-scrollbar-button:vertical:start:active, -::-webkit-scrollbar-button:vertical:end:active { - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); -} + ::-webkit-scrollbar-corner { + background-color: var(--scrollbar-track); + } -::-webkit-scrollbar-button:vertical:start:active, -::-webkit-scrollbar-button:vertical:start:hover { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M10,9 11,9 11,10 10,10 M11,9 12,9 12,10 11,10 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M9,8 10,8 10,9 9,9 M10,8 11,8 11,9 10,9 M7,7 8,7 8,8 7,8 M8,7 9,7 9,8 8,8 M9,7 10,7 10,8 9,8 M8,6 9,6 9,7 8,7 ' fill='%23ffffff'/%3E%3C/svg%3E"); -} -::-webkit-scrollbar-button:vertical:end { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,7 11,7 11,8 10,8 ' fill='%23a0aa95'/%3E%3C/svg%3E"); -} -::-webkit-scrollbar-button:vertical:end:active { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M8,6 9,6 9,7 8,7 M7,6 8,6 8,7 7,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M8,7 9,7 9,8 8,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M9,8 10,8 10,9 9,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 ' fill='%23ffffff'/%3E%3C/svg%3E"); -} + ::-webkit-scrollbar-button:vertical:start:decrement, + ::-webkit-scrollbar-button:vertical:end:increment { + display: block; + } -/* Buttons */ - -.cs-btn { - background-color: var(--bg); - color: #fff; - padding: 4px 5px 3px; - font-size: 1rem; - line-height: 0.9375rem; - border: 1px solid; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - - &.close { - padding: 0px; - width: 18px; - height: 18px; - background: no-repeat center center; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3,3 4,3 4,4 3,4 M4,3 5,3 5,4 4,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,4 6,4 6,5 5,5 M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,5 7,5 7,6 6,6 M6,7 7,7 7,8 6,8 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M8,5 9,5 9,6 8,6 M9,5 10,5 10,6 9,6 M9,6 10,6 10,7 9,7 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,3 11,3 11,4 10,4 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M10,9 11,9 11,10 10,10 M10,10 11,10 11,11 10,11 M9,10 10,10 10,11 9,11 M11,10 12,10 12,11 11,11 M11,11 12,11 12,12 11,12 M10,11 11,11 11,12 10,12 M5,8 6,8 6,9 5,9 M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M3,10 4,10 4,11 3,11 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 ' fill='%238c9284'/%3E%3C/svg%3E"); + ::-webkit-scrollbar-button:vertical:start:increment, + ::-webkit-scrollbar-button:vertical:start:decrement, + ::-webkit-scrollbar-button:vertical:end:increment, + ::-webkit-scrollbar-button:vertical:end:decrement { + background-repeat: no-repeat; + height: 17px; } - &:focus-visible { - padding: 3px 4px 2px; - outline: 1px solid var(--outline); + ::-webkit-scrollbar-button:vertical:start { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M6,8 7,8 7,9 6,9 M7,9 8,9 8,10 7,10 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M8,6 9,6 9,7 8,7 M9,9 10,9 10,10 9,10 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,9 11,9 11,10 10,10 M10,8 11,8 11,9 10,9 M11,9 12,9 12,10 11,10 ' fill='%23a0aa95'/%3E%3C/svg%3E"); + } - &.close { - padding: 0; - outline: 0; - } + ::-webkit-scrollbar-button:vertical:start, + ::-webkit-scrollbar-button:vertical:end { + border: 1px solid; + border-color: var(--border-light) var(--border-dark) var(--border-dark) + var(--border-light); } - &:active { + ::-webkit-scrollbar-button:vertical:start:active, + ::-webkit-scrollbar-button:vertical:end:active { border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark); } - &:disabled { - color: var(--disabled-text); - text-shadow: var(--disabled-text-shadow) 1px 1px; - pointer-events: none; + ::-webkit-scrollbar-button:vertical:start:active, + ::-webkit-scrollbar-button:vertical:start:hover { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M10,9 11,9 11,10 10,10 M11,9 12,9 12,10 11,10 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M9,8 10,8 10,9 9,9 M10,8 11,8 11,9 10,9 M7,7 8,7 8,8 7,8 M8,7 9,7 9,8 8,8 M9,7 10,7 10,8 9,8 M8,6 9,6 9,7 8,7 ' fill='%23ffffff'/%3E%3C/svg%3E"); + } + ::-webkit-scrollbar-button:vertical:end { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,7 11,7 11,8 10,8 ' fill='%23a0aa95'/%3E%3C/svg%3E"); + } + ::-webkit-scrollbar-button:vertical:end:active { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M8,6 9,6 9,7 8,7 M7,6 8,6 8,7 7,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M8,7 9,7 9,8 8,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M9,8 10,8 10,9 9,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 ' fill='%23ffffff'/%3E%3C/svg%3E"); } -} -/* Hr */ + /* Buttons */ -.cs-hr { - border-left: 0; - border-right: 0; - border-top-color: var(--border-dark); - border-bottom-color: var(--border-light); -} + .cs-btn, + button:not(.default-btn), + input[type='submit']:not(.default-btn) { + background-color: var(--bg); + color: #fff; + padding: 4px 5px 3px; + font-size: 1rem; + line-height: 0.9375rem; + border: 1px solid; + border-color: var(--border-light) var(--border-dark) var(--border-dark) + var(--border-light); + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; -/* Checkbox */ + &.close { + padding: 0px; + width: 18px; + height: 18px; + background: no-repeat center center; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3,3 4,3 4,4 3,4 M4,3 5,3 5,4 4,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,4 6,4 6,5 5,5 M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,5 7,5 7,6 6,6 M6,7 7,7 7,8 6,8 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M8,5 9,5 9,6 8,6 M9,5 10,5 10,6 9,6 M9,6 10,6 10,7 9,7 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,3 11,3 11,4 10,4 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M10,9 11,9 11,10 10,10 M10,10 11,10 11,11 10,11 M9,10 10,10 10,11 9,11 M11,10 12,10 12,11 11,11 M11,11 12,11 12,12 11,12 M10,11 11,11 11,12 10,12 M5,8 6,8 6,9 5,9 M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M3,10 4,10 4,11 3,11 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 ' fill='%238c9284'/%3E%3C/svg%3E"); + } + + &:focus-visible { + padding: 3px 4px 2px; + outline: 1px solid var(--outline); + + &.close { + padding: 0; + outline: 0; + } + } + + &:active { + border-color: var(--border-dark) var(--border-light) var(--border-light) + var(--border-dark); + } + + &:disabled { + color: var(--disabled-text); + text-shadow: var(--disabled-text-shadow) 1px 1px; + pointer-events: none; + } + } + + /* Hr */ -.cs-checkbox { - position: relative; + hr:not(.default-hr) { + border-left: 0; + border-right: 0; + border-top-color: var(--border-dark); + border-bottom-color: var(--border-light); + } + + /* Checkbox */ + + .cs-checkbox:not(input) { + position: relative; + } - input { + input[type='checkbox']:not(.default-checkbox), + input.cs-checkbox, + .cs-checkbox input { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; @@ -205,21 +211,30 @@ body { outline: none; } - &:focus-visible + .cs-checkbox__label { + &:focus-visible + .cs-checkbox__label, + &:focus-visible + label { outline: dotted 2px var(--outline); outline-offset: 3px; } - &:checked + .cs-checkbox__label:before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2,6 3,6 3,7 2,7 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M2,4 3,4 3,5 2,5 M3,6 4,6 4,7 3,7 M3,7 4,7 4,8 3,8 M4,6 5,6 5,7 4,7 M4,7 5,7 5,8 4,8 M4,8 5,8 5,9 4,9 M5,7 6,7 6,8 5,8 M5,6 6,6 6,7 5,7 M5,5 6,5 6,6 5,6 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M6,6 7,6 7,7 6,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M8,2 9,2 9,3 8,3 ' fill='%23c4b550'/%3E%3C/svg%3E"); - } - - &:checked + .cs-checkbox__label { + &:checked + .cs-checkbox__label, + &:checked + label { color: var(--accent); + &::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2,6 3,6 3,7 2,7 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M2,4 3,4 3,5 2,5 M3,6 4,6 4,7 3,7 M3,7 4,7 4,8 3,8 M4,6 5,6 5,7 4,7 M4,7 5,7 5,8 4,8 M4,8 5,8 5,9 4,9 M5,7 6,7 6,8 5,8 M5,6 6,6 6,7 5,7 M5,5 6,5 6,6 5,6 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M6,6 7,6 7,7 6,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M8,2 9,2 9,3 8,3 ' fill='%23c4b550'/%3E%3C/svg%3E"); + } } } - .cs-checkbox__label { + .cs-checkbox__label, + input[type='checkbox']:not(.default-checkbox) + label, + input.cs-checkbox + label, + .cs-checkbox input + label, + label:not(.default-checkbox):has( + input[type='checkbox']:not(.default-checkbox) + ), + label:has(.cs-checkbox), + label.cs-checkbox:has(input) { cursor: pointer; display: inline-block; -webkit-user-select: none; @@ -228,8 +243,8 @@ body { color: var(--secondary--text); line-height: 0.9375rem; - &:before { - content: ""; + &::before { + content: ''; display: inline-block; vertical-align: middle; width: 12px; @@ -245,443 +260,549 @@ body { color: white; } } -} + label:not(.default-checkbox):has( + input[type='checkbox']:not(.default-checkbox) + ), + label:has(.cs-checkbox), + label.cs-checkbox:has(input) { + position: relative; + &:has(input:not(.default-checkbox):focus-visible), + &:has(.cs-checkbox:focus-visible) { + outline: dotted 2px var(--outline); + outline-offset: 3px; + } + &::before { + margin-right: 3px; + } + &:has(input:not(.default-checkbox):checked), + &:has(.cs-checkbox:checked) { + color: var(--accent); + &::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2,6 3,6 3,7 2,7 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M2,4 3,4 3,5 2,5 M3,6 4,6 4,7 3,7 M3,7 4,7 4,8 3,8 M4,6 5,6 5,7 4,7 M4,7 5,7 5,8 4,8 M4,8 5,8 5,9 4,9 M5,7 6,7 6,8 5,8 M5,6 6,6 6,7 5,7 M5,5 6,5 6,6 5,6 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M6,6 7,6 7,7 6,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M8,2 9,2 9,3 8,3 ' fill='%23c4b550'/%3E%3C/svg%3E"); + } + } + } -/* Input */ + /* Input */ + + .cs-input, + input:is( + [type='text'], + [type='number'], + [type='email'], + [type='date'], + [type='datetime-local'], + [type='month'], + [type='password'], + [type='search'], + [type='tel'], + [type='text'], + [type='url'], + [type='week'], + [type='datetime'], + [type='input'] + ):not(.default-input) { + outline: 0; + border: 1px solid; + padding: 3px 2px 2px; + font-size: 1rem; + line-height: 1.0625rem; + background-color: var(--secondary-bg); + border-color: var(--border-dark) var(--border-light) var(--border-light) + var(--border-dark); + color: var(--secondary--text); -.cs-input { - outline: 0; - border: 1px solid; - padding: 3px 2px 2px; - font-size: 1rem; - line-height: 1.0625rem; - background-color: var(--secondary-bg); - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); - color: var(--secondary--text); + &:focus + .cs-input__label, + &:focus + label { + color: var(--accent); + } - &:focus + .cs-input__label { - color: var(--accent); - } + &::-moz-selection { + background-color: var(--secondary-accent); + color: white; + } - &::-moz-selection { - background-color: var(--secondary-accent); - color: white; - } + &::selection { + background-color: var(--secondary-accent); + color: white; + } - &::selection { - background-color: var(--secondary-accent); - color: white; - } + &:disabled { + background-color: var(--bg); + pointer-events: none; + color: var(--text-3); + } - &:disabled { - background-color: var(--bg); - pointer-events: none; - color: var(--text-3); + &:disabled + .cs-input__label, + &:disabled + label { + color: var(--disabled-text); + text-shadow: var(--disabled-text-shadow) 1px 1px; + pointer-events: none; + } } - &:disabled + .cs-input__label { - color: var(--disabled-text); - text-shadow: var(--disabled-text-shadow) 1px 1px; - pointer-events: none; + .cs-input__label, + label:has( + input:is( + [type='text'], + [type='number'], + [type='email'], + [type='date'], + [type='datetime-local'], + [type='month'], + [type='password'], + [type='search'], + [type='tel'], + [type='text'], + [type='url'], + [type='week'], + [type='datetime'], + [type='input'] + ):not(.default-input) + ):not(.default-input) { + color: var(--secondary--text); + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + &:has(input:not(.default-input):focus) { + color: var(--accent); + } + &:has(input:not(.default-input):disabled) { + color: var(--disabled-text); + text-shadow: var(--disabled-text-shadow) 1px 1px; + pointer-events: none; + } } -} -.cs-input__label { - color: var(--secondary--text); - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -/* Select */ - -.cs-select { - outline: 0; - background-color: var(--secondary-bg); - min-width: 150px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M3,3 4,3 4,4 3,4 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23a0aa95'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 6px top 50%; - background-size: 7px auto; - line-height: 0.9375rem; - padding: 5px 3px; - color: var(--secondary--text); - border: 1px solid; - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - - &:hover, - &:focus-within { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,3 4,3 4,4 3,4 M3,2 4,2 4,3 3,3 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23ffffff'/%3E%3C/svg%3E"); - } - - option { - background-color: var(--bg); - color: var(--text-3); - } -} + /* Select */ -.cs-select__label { - color: var(--secondary--text); - font-size: 1rem; - line-height: 0.9375rem; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} + .cs-select, + select:not(.default-select) { + outline: 0; + background-color: var(--secondary-bg); + min-width: 150px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M3,3 4,3 4,4 3,4 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23a0aa95'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 6px top 50%; + background-size: 7px auto; + line-height: 0.9375rem; + padding: 5px 15px 5px 3px; + color: var(--secondary--text); + border: 1px solid; + border-color: var(--border-dark) var(--border-light) var(--border-light) + var(--border-dark); + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; -/* Radio Group */ + &:hover, + &:focus-within { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,3 4,3 4,4 3,4 M3,2 4,2 4,3 3,3 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23ffffff'/%3E%3C/svg%3E"); + } -.cs-fieldset { - border: none; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; + option { + background-color: var(--bg); + color: var(--text-3); + } + } - legend { + .cs-select__label, + label:has(select:not(.default-select)):not(.default-select-label) { color: var(--secondary--text); - margin-bottom: 10px; + font-size: 1rem; + line-height: 0.9375rem; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } - > div { - padding-left: 10px; - } + /* Radio Group */ - &:disabled { - input[type="radio"] { - + label { - color: var(--disabled-text); - text-shadow: var(--disabled-text-shadow) 1px 1px; - pointer-events: none; - } - } + .cs-fieldset, + fieldset:not(.default-fieldset) { + border: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; legend { - color: var(--disabled-text); - text-shadow: var(--disabled-text-shadow) 1px 1px; - pointer-events: none; + color: var(--secondary--text); + margin-bottom: 10px; } - } - - input[type="radio"] { - opacity: 0; - + label { - position: relative; - cursor: pointer; - font-size: 1rem; - line-height: 0.9375rem; - color: var(--secondary--text); + > div { + padding-left: 10px; + } - &::before { - content: ""; - position: absolute; - left: -25px; - top: 1px; - width: 12px; - height: 12px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10,2 11,2 11,3 10,3 M10,3 11,3 11,4 10,4 M11,4 12,4 12,5 11,5 M11,5 12,5 12,6 11,6 M11,6 12,6 12,7 11,7 M11,7 12,7 12,8 11,8 M10,8 11,8 11,9 10,9 M10,9 11,9 11,10 10,10 M8,10 9,10 9,11 8,11 M9,10 10,10 10,11 9,11 M7,11 8,11 8,12 7,12 M6,11 7,11 7,12 6,12 M5,11 6,11 6,12 5,12 M2,10 3,10 3,11 2,11 M3,10 4,10 4,11 3,11 M4,11 5,11 5,12 4,12 ' fill='%23889180'/%3E%3Cpath d='M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M4,0 5,0 5,1 4,1 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 M7,0 8,0 8,1 7,1 M8,1 9,1 9,2 8,2 M9,1 10,1 10,2 9,2 M0,4 1,4 1,5 0,5 M0,5 1,5 1,6 0,6 M0,6 1,6 1,7 0,7 M0,7 1,7 1,8 0,8 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 ' fill='%23292c21'/%3E%3Cpath d='M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M6,1 7,1 7,2 6,2 M7,1 8,1 8,2 7,2 M8,2 9,2 9,3 8,3 M9,2 10,2 10,3 9,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,6 11,6 11,7 10,7 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M7,9 8,9 8,10 7,10 M7,10 8,10 8,11 7,11 M6,10 7,10 7,11 6,11 M5,10 6,10 6,11 5,11 M4,10 5,10 5,11 4,11 M6,9 7,9 7,10 6,10 M5,9 6,9 6,10 5,10 M4,9 5,9 5,10 4,10 M3,9 4,9 4,10 3,10 M2,9 3,9 3,10 2,10 M2,8 3,8 3,9 2,9 M1,7 2,7 2,8 1,8 M1,4 2,4 2,5 1,5 M2,3 3,3 3,4 2,4 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M4,2 5,2 5,3 4,3 M5,2 6,2 6,3 5,3 M6,2 7,2 7,3 6,3 M7,2 8,2 8,3 7,3 M3,3 4,3 4,4 3,4 M2,4 3,4 3,5 2,5 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M1,6 2,6 2,7 1,7 M2,6 3,6 3,7 2,7 M2,7 3,7 3,8 2,8 M3,8 4,8 4,9 3,9 M3,7 4,7 4,8 3,8 M3,6 4,6 4,7 3,7 M3,5 4,5 4,6 3,6 M3,4 4,4 4,5 3,5 M4,3 5,3 5,4 4,4 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,8 5,8 5,9 4,9 M4,7 5,7 5,8 4,8 M4,6 5,6 5,7 4,7 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,6 6,6 6,7 5,7 M5,7 6,7 6,8 5,8 M5,8 6,8 6,9 5,9 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M6,6 7,6 7,7 6,7 M6,3 7,3 7,4 6,4 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,3 9,3 9,4 8,4 M8,4 9,4 9,5 8,5 M8,5 9,5 9,6 8,6 M8,6 9,6 9,7 8,7 M9,6 10,6 10,7 9,7 M9,5 10,5 10,6 9,6 ' fill='%233e4637'/%3E%3C/svg%3E"); + &:disabled { + input[type='radio'] { + + label { + color: var(--disabled-text); + text-shadow: var(--disabled-text-shadow) 1px 1px; + pointer-events: none; + } } - &::after { - content: ""; - position: absolute; - left: -22px; - top: 4px; - width: 6px; - height: 6px; + legend { + color: var(--disabled-text); + text-shadow: var(--disabled-text-shadow) 1px 1px; + pointer-events: none; } } - &:checked { + input[type='radio'] { + opacity: 0; + + label { - color: var(--accent); + position: relative; + cursor: pointer; + font-size: 1rem; + line-height: 0.9375rem; + color: var(--secondary--text); + + &::before { + content: ''; + position: absolute; + left: -25px; + top: 1px; + width: 12px; + height: 12px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10,2 11,2 11,3 10,3 M10,3 11,3 11,4 10,4 M11,4 12,4 12,5 11,5 M11,5 12,5 12,6 11,6 M11,6 12,6 12,7 11,7 M11,7 12,7 12,8 11,8 M10,8 11,8 11,9 10,9 M10,9 11,9 11,10 10,10 M8,10 9,10 9,11 8,11 M9,10 10,10 10,11 9,11 M7,11 8,11 8,12 7,12 M6,11 7,11 7,12 6,12 M5,11 6,11 6,12 5,12 M2,10 3,10 3,11 2,11 M3,10 4,10 4,11 3,11 M4,11 5,11 5,12 4,12 ' fill='%23889180'/%3E%3Cpath d='M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M4,0 5,0 5,1 4,1 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 M7,0 8,0 8,1 7,1 M8,1 9,1 9,2 8,2 M9,1 10,1 10,2 9,2 M0,4 1,4 1,5 0,5 M0,5 1,5 1,6 0,6 M0,6 1,6 1,7 0,7 M0,7 1,7 1,8 0,8 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 ' fill='%23292c21'/%3E%3Cpath d='M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M6,1 7,1 7,2 6,2 M7,1 8,1 8,2 7,2 M8,2 9,2 9,3 8,3 M9,2 10,2 10,3 9,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,6 11,6 11,7 10,7 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M7,9 8,9 8,10 7,10 M7,10 8,10 8,11 7,11 M6,10 7,10 7,11 6,11 M5,10 6,10 6,11 5,11 M4,10 5,10 5,11 4,11 M6,9 7,9 7,10 6,10 M5,9 6,9 6,10 5,10 M4,9 5,9 5,10 4,10 M3,9 4,9 4,10 3,10 M2,9 3,9 3,10 2,10 M2,8 3,8 3,9 2,9 M1,7 2,7 2,8 1,8 M1,4 2,4 2,5 1,5 M2,3 3,3 3,4 2,4 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M4,2 5,2 5,3 4,3 M5,2 6,2 6,3 5,3 M6,2 7,2 7,3 6,3 M7,2 8,2 8,3 7,3 M3,3 4,3 4,4 3,4 M2,4 3,4 3,5 2,5 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M1,6 2,6 2,7 1,7 M2,6 3,6 3,7 2,7 M2,7 3,7 3,8 2,8 M3,8 4,8 4,9 3,9 M3,7 4,7 4,8 3,8 M3,6 4,6 4,7 3,7 M3,5 4,5 4,6 3,6 M3,4 4,4 4,5 3,5 M4,3 5,3 5,4 4,4 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,8 5,8 5,9 4,9 M4,7 5,7 5,8 4,8 M4,6 5,6 5,7 4,7 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,6 6,6 6,7 5,7 M5,7 6,7 6,8 5,8 M5,8 6,8 6,9 5,9 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M6,6 7,6 7,7 6,7 M6,3 7,3 7,4 6,4 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,3 9,3 9,4 8,4 M8,4 9,4 9,5 8,5 M8,5 9,5 9,6 8,6 M8,6 9,6 9,7 8,7 M9,6 10,6 10,7 9,7 M9,5 10,5 10,6 9,6 ' fill='%233e4637'/%3E%3C/svg%3E"); + } + + &::after { + content: ''; + position: absolute; + left: -22px; + top: 4px; + width: 6px; + height: 6px; + } } - + label::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath d='M1,0 2,0 2,1 1,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,2 6,2 6,3 5,3 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,5 5,5 5,6 4,6 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M0,4 1,4 1,5 0,5 M0,3 1,3 1,4 0,4 M0,2 1,2 1,3 0,3 M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M1,4 2,4 2,5 1,5 M2,4 3,4 3,5 2,5 M2,3 3,3 3,4 2,4 M2,0 3,0 3,1 2,1 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M3,3 4,3 4,4 3,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,3 5,3 5,4 4,4 M4,2 5,2 5,3 4,3 M3,2 4,2 4,3 3,3 M2,2 3,2 3,3 2,3 M1,1 2,1 2,2 1,2 M0,1 1,1 1,2 0,2 ' fill='%23c4b550'/%3E%3C/svg%3E"); + &:checked { + + label { + color: var(--accent); + } + + + label::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath d='M1,0 2,0 2,1 1,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,2 6,2 6,3 5,3 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,5 5,5 5,6 4,6 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M0,4 1,4 1,5 0,5 M0,3 1,3 1,4 0,4 M0,2 1,2 1,3 0,3 M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M1,4 2,4 2,5 1,5 M2,4 3,4 3,5 2,5 M2,3 3,3 3,4 2,4 M2,0 3,0 3,1 2,1 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M3,3 4,3 4,4 3,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,3 5,3 5,4 4,4 M4,2 5,2 5,3 4,3 M3,2 4,2 4,3 3,3 M2,2 3,2 3,3 2,3 M1,1 2,1 2,2 1,2 M0,1 1,1 1,2 0,2 ' fill='%23c4b550'/%3E%3C/svg%3E"); + } } } } -} -/* Slider */ + /* Slider */ -.cs-slider { - display: flex; - flex-direction: column-reverse; - width: 150px; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - - input { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + .cs-slider { + display: flex; + flex-direction: column-reverse; width: 150px; - height: 4px; - background: var(--slider-bg); - outline: none; - border: 1px solid; - box-sizing: border-box; - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); - } - - input::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 8px; - height: 16px; - background: var(--bg); - cursor: pointer; - border: 1px solid; - box-sizing: border-box; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); - border-radius: 0; - } + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; - input::-moz-range-thumb { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - width: 8px; - height: 16px; - background: var(--bg); - cursor: pointer; - border: 1px solid; - box-sizing: border-box; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); - border-radius: 0; - } + input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 150px; + height: 4px; + background: var(--slider-bg); + outline: none; + border: 1px solid; + box-sizing: border-box; + border-color: var(--border-dark) var(--border-light) var(--border-light) + var(--border-dark); + } - label { - color: var(--secondary--text); - font-size: 1rem; - line-height: 0.9375rem; - margin-bottom: 12px; - } + input::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 8px; + height: 16px; + background: var(--bg); + cursor: pointer; + border: 1px solid; + box-sizing: border-box; + border-color: var(--border-light) var(--border-dark) var(--border-dark) + var(--border-light); + border-radius: 0; + } - &:has(input:focus) label { - color: var(--accent); - } + input::-moz-range-thumb { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 8px; + height: 16px; + background: var(--bg); + cursor: pointer; + border: 1px solid; + box-sizing: border-box; + border-color: var(--border-light) var(--border-dark) var(--border-dark) + var(--border-light); + border-radius: 0; + } - .ruler { - margin-top: 4px; - margin-left: 4px; - height: 5px; - width: calc(100% + 5px); - background-image: linear-gradient( - to right, - var(--slider) 1px, - transparent 1px - ); - background-size: 15px 5px; - z-index: -1; - } + label { + color: var(--secondary--text); + font-size: 1rem; + line-height: 0.9375rem; + margin-bottom: 12px; + } - .value { - font-size: 0.8125rem; - line-height: 0.9375rem; - color: var(--slider); - display: flex; - align-items: center; - justify-content: space-between; - } -} + &:has(input:focus) label { + color: var(--accent); + } -/* Dialog */ - -.cs-dialog { - position: fixed; - right: 0; - top: 0; - margin: auto; - min-width: 350px; - max-width: 510px; - background-color: var(--bg); - color: var(--text); - border: 1px solid; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); - padding: 4px; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - - .heading { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 3px; - padding-left: 2px; + .ruler { + margin-top: 4px; + margin-left: 4px; + height: 5px; + width: calc(100% + 5px); + background-image: linear-gradient( + to right, + var(--slider) 1px, + transparent 1px + ); + background-size: 15px 5px; + z-index: -1; + } - .wrapper { + .value { + font-size: 0.8125rem; + line-height: 0.9375rem; + color: var(--slider); display: flex; align-items: center; - gap: 5px; + justify-content: space-between; + } + } - .icon { - width: 16px; - height: 15px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M1,12 2,12 2,13 1,13 M2,13 3,13 3,14 2,14 M3,12 4,12 4,13 3,13 M14,7 15,7 15,8 14,8 ' fill='%238c9284'/%3E%3Cpath d='M3,14 4,14 4,15 3,15 ' fill='%23a5aa9c'/%3E%3Cpath d='M0,11 1,11 1,12 0,12 M10,3 11,3 11,4 10,4 M10,5 11,5 11,6 10,6 M12,3 13,3 13,4 12,4 M12,5 13,5 13,6 12,6 M12,8 13,8 13,9 12,9 ' fill='%23bdbeb5'/%3E%3Cpath d='M0,10 1,10 1,11 0,11 M0,9 1,9 1,10 0,10 M0,8 1,8 1,9 0,9 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 M1,10 2,10 2,11 1,11 M2,10 3,10 3,11 2,11 M2,9 3,9 3,10 2,10 M3,9 4,9 4,10 3,10 M3,10 4,10 4,11 3,11 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M1,11 2,11 2,12 1,12 M2,11 3,11 3,12 2,12 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 M5,11 6,11 6,12 5,12 M3,13 4,13 4,14 3,14 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M10,7 11,7 11,8 10,8 M10,8 11,8 11,9 10,9 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,5 9,5 9,6 8,6 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M7,11 8,11 8,12 7,12 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M10,4 11,4 11,5 10,5 M11,5 12,5 12,6 11,6 M12,4 13,4 13,5 12,5 M9,2 10,2 10,3 9,3 M13,2 14,2 14,3 13,3 M13,7 14,7 14,8 13,8 M14,6 15,6 15,7 14,7 M14,5 15,5 15,6 14,6 M14,4 15,4 15,5 14,5 M14,3 15,3 15,4 14,4 M10,1 11,1 11,2 10,2 M11,1 12,1 12,2 11,2 M12,1 13,1 13,2 12,2 ' fill='%23ffffff'/%3E%3Cpath d='M0,7 1,7 1,8 0,8 M11,0 12,0 12,1 11,1 M7,4 8,4 8,5 7,5 M8,1 9,1 9,2 8,2 ' fill='%23848e84'/%3E%3Cpath d='M2,8 3,8 3,9 2,9 M3,8 4,8 4,9 3,9 M6,14 7,14 7,15 6,15 M7,13 8,13 8,14 7,14 M10,9 11,9 11,10 10,10 M15,4 16,4 16,5 15,5 M15,5 16,5 16,6 15,6 ' fill='%239ca29c'/%3E%3Cpath d='M4,8 5,8 5,9 4,9 M6,9 7,9 7,10 6,10 ' fill='%23d6d7ce'/%3E%3Cpath d='M4,14 5,14 5,15 4,15 M5,14 6,14 6,15 5,15 M8,10 9,10 9,11 8,11 ' fill='%23dedfde'/%3E%3Cpath d='M5,8 6,8 6,9 5,9 M11,7 12,7 12,8 11,8 M12,7 13,7 13,8 12,8 M11,8 12,8 12,9 11,9 ' fill='%23f7f7f7'/%3E%3Cpath d='M2,12 3,12 3,13 2,13 M6,13 7,13 7,14 6,14 M7,12 8,12 8,13 7,13 M7,10 8,10 8,11 7,11 M7,5 8,5 8,6 7,6 ' fill='%23efefef'/%3E%3Cpath d='M4,12 5,12 5,13 4,13 M5,12 6,12 6,13 5,13 M9,6 10,6 10,7 9,7 ' fill='%23cecfce'/%3E%3Cpath d='M8,2 9,2 9,3 8,3 M9,1 10,1 10,2 9,2 M13,1 14,1 14,2 13,2 M14,2 15,2 15,3 14,3 ' fill='%23d6dbd6'/%3E%3Cpath d='M13,6 14,6 14,7 13,7 ' fill='%23949e94'/%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,10 7,10 7,11 6,11 M6,11 7,11 7,12 6,12 M6,12 7,12 7,13 6,13 M4,13 5,13 5,14 4,14 M5,13 6,13 6,14 5,14 M13,5 14,5 14,6 13,6 M13,3 14,3 14,4 13,4 M13,8 14,8 14,9 13,9 M9,10 10,10 10,11 9,11 M7,14 8,14 8,15 7,15 ' fill='%235a6952'/%3E%3Cpath d='M10,6 11,6 11,7 10,7 M11,6 12,6 12,7 11,7 M12,6 13,6 13,7 12,7 M13,4 14,4 14,5 13,5 M12,2 13,2 13,3 12,3 M11,2 12,2 12,3 11,3 M10,2 11,2 11,3 10,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M9,5 10,5 10,6 9,6 M5,7 6,7 6,8 5,8 M7,2 8,2 8,3 7,3 M7,3 8,3 8,4 7,4 M9,0 10,0 10,1 9,1 M10,0 11,0 11,1 10,1 M12,0 13,0 13,1 12,1 M14,1 15,1 15,2 14,2 ' fill='%23525d4a'/%3E%3Cpath d='M6,6 7,6 7,7 6,7 ' fill='%23adb6ad'/%3E%3C/svg%3E"); - } + /* Dialog */ - .text { - font-size: 1rem; - line-height: 0.9375rem; - color: white; + .cs-dialog, + dialog:not(.default-dialog) { + position: fixed; + right: 0; + top: 0; + margin: auto; + min-width: 350px; + max-width: 510px; + background-color: var(--bg); + color: var(--text); + border: 1px solid; + border-color: var(--border-light) var(--border-dark) var(--border-dark) + var(--border-light); + padding: 4px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + + .heading { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 3px; + padding-left: 2px; + + .wrapper { + display: flex; + align-items: center; + gap: 5px; + + .icon { + width: 16px; + height: 15px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M1,12 2,12 2,13 1,13 M2,13 3,13 3,14 2,14 M3,12 4,12 4,13 3,13 M14,7 15,7 15,8 14,8 ' fill='%238c9284'/%3E%3Cpath d='M3,14 4,14 4,15 3,15 ' fill='%23a5aa9c'/%3E%3Cpath d='M0,11 1,11 1,12 0,12 M10,3 11,3 11,4 10,4 M10,5 11,5 11,6 10,6 M12,3 13,3 13,4 12,4 M12,5 13,5 13,6 12,6 M12,8 13,8 13,9 12,9 ' fill='%23bdbeb5'/%3E%3Cpath d='M0,10 1,10 1,11 0,11 M0,9 1,9 1,10 0,10 M0,8 1,8 1,9 0,9 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 M1,10 2,10 2,11 1,11 M2,10 3,10 3,11 2,11 M2,9 3,9 3,10 2,10 M3,9 4,9 4,10 3,10 M3,10 4,10 4,11 3,11 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M1,11 2,11 2,12 1,12 M2,11 3,11 3,12 2,12 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 M5,11 6,11 6,12 5,12 M3,13 4,13 4,14 3,14 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M10,7 11,7 11,8 10,8 M10,8 11,8 11,9 10,9 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,5 9,5 9,6 8,6 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M7,11 8,11 8,12 7,12 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M10,4 11,4 11,5 10,5 M11,5 12,5 12,6 11,6 M12,4 13,4 13,5 12,5 M9,2 10,2 10,3 9,3 M13,2 14,2 14,3 13,3 M13,7 14,7 14,8 13,8 M14,6 15,6 15,7 14,7 M14,5 15,5 15,6 14,6 M14,4 15,4 15,5 14,5 M14,3 15,3 15,4 14,4 M10,1 11,1 11,2 10,2 M11,1 12,1 12,2 11,2 M12,1 13,1 13,2 12,2 ' fill='%23ffffff'/%3E%3Cpath d='M0,7 1,7 1,8 0,8 M11,0 12,0 12,1 11,1 M7,4 8,4 8,5 7,5 M8,1 9,1 9,2 8,2 ' fill='%23848e84'/%3E%3Cpath d='M2,8 3,8 3,9 2,9 M3,8 4,8 4,9 3,9 M6,14 7,14 7,15 6,15 M7,13 8,13 8,14 7,14 M10,9 11,9 11,10 10,10 M15,4 16,4 16,5 15,5 M15,5 16,5 16,6 15,6 ' fill='%239ca29c'/%3E%3Cpath d='M4,8 5,8 5,9 4,9 M6,9 7,9 7,10 6,10 ' fill='%23d6d7ce'/%3E%3Cpath d='M4,14 5,14 5,15 4,15 M5,14 6,14 6,15 5,15 M8,10 9,10 9,11 8,11 ' fill='%23dedfde'/%3E%3Cpath d='M5,8 6,8 6,9 5,9 M11,7 12,7 12,8 11,8 M12,7 13,7 13,8 12,8 M11,8 12,8 12,9 11,9 ' fill='%23f7f7f7'/%3E%3Cpath d='M2,12 3,12 3,13 2,13 M6,13 7,13 7,14 6,14 M7,12 8,12 8,13 7,13 M7,10 8,10 8,11 7,11 M7,5 8,5 8,6 7,6 ' fill='%23efefef'/%3E%3Cpath d='M4,12 5,12 5,13 4,13 M5,12 6,12 6,13 5,13 M9,6 10,6 10,7 9,7 ' fill='%23cecfce'/%3E%3Cpath d='M8,2 9,2 9,3 8,3 M9,1 10,1 10,2 9,2 M13,1 14,1 14,2 13,2 M14,2 15,2 15,3 14,3 ' fill='%23d6dbd6'/%3E%3Cpath d='M13,6 14,6 14,7 13,7 ' fill='%23949e94'/%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,10 7,10 7,11 6,11 M6,11 7,11 7,12 6,12 M6,12 7,12 7,13 6,13 M4,13 5,13 5,14 4,14 M5,13 6,13 6,14 5,14 M13,5 14,5 14,6 13,6 M13,3 14,3 14,4 13,4 M13,8 14,8 14,9 13,9 M9,10 10,10 10,11 9,11 M7,14 8,14 8,15 7,15 ' fill='%235a6952'/%3E%3Cpath d='M10,6 11,6 11,7 10,7 M11,6 12,6 12,7 11,7 M12,6 13,6 13,7 12,7 M13,4 14,4 14,5 13,5 M12,2 13,2 13,3 12,3 M11,2 12,2 12,3 11,3 M10,2 11,2 11,3 10,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M9,5 10,5 10,6 9,6 M5,7 6,7 6,8 5,8 M7,2 8,2 8,3 7,3 M7,3 8,3 8,4 7,4 M9,0 10,0 10,1 9,1 M10,0 11,0 11,1 10,1 M12,0 13,0 13,1 12,1 M14,1 15,1 15,2 14,2 ' fill='%23525d4a'/%3E%3Cpath d='M6,6 7,6 7,7 6,7 ' fill='%23adb6ad'/%3E%3C/svg%3E"); + } + + .text { + font-size: 1rem; + line-height: 0.9375rem; + color: white; + } } } - } - .content { - padding: 10px; - } + .content { + padding: 10px; + } - .footer-btns { - float: right; - margin: 4px 8px 8px 0; + .footer-btns { + float: right; + margin: 4px 8px 8px 0; - .cs-btn { - width: 72px; - text-align: left; + .cs-btn { + width: 72px; + text-align: left; + } } } -} -/* Tooltip */ + /* Tooltip */ -.cs-tooltip { - position: relative; - display: inline-block; - color: white; - line-height: 1.25rem; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - - &:hover .text { - visibility: visible; - } + .cs-tooltip { + position: relative; + display: inline-block; + color: white; + line-height: 1.25rem; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; - .text { - visibility: hidden; - width: -moz-max-content; - width: max-content; - background-color: var(--secondary-accent); - color: black; - text-align: center; - font-size: 1rem; - line-height: 0.9375rem; - position: absolute; - z-index: 1; - border: 1px solid var(--border-dark); - padding: 2px 2px 1px; - } -} + &:hover .text { + visibility: visible; + } -/* Progress bar */ - -.cs-progress-bar { - width: 260px; - height: 24px; - padding: 3px; - background-color: var(--secondary-bg); - border: 1px solid; - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); - - .bars { - height: 100%; - background-image: linear-gradient( - to right, - var(--accent) 8px, - transparent 2px - ); - background-size: 12px 16px; + .text { + visibility: hidden; + width: -moz-max-content; + width: max-content; + background-color: var(--secondary-accent); + color: black; + text-align: center; + font-size: 1rem; + line-height: 0.9375rem; + position: absolute; + z-index: 1; + border: 1px solid var(--border-dark); + padding: 2px 2px 1px; + } } -} -/* Tabs */ + /* Progress bar */ -.cs-tabs { - display: flex; - flex-wrap: wrap; - align-items: center; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; + .cs-progress-bar { + width: 260px; + height: 24px; + padding: 3px; + background-color: var(--secondary-bg); + border: 1px solid; + border-color: var(--border-dark) var(--border-light) var(--border-light) + var(--border-dark); - .radiotab { - position: absolute; - opacity: 0; + .bars { + height: 100%; + background-image: linear-gradient( + to right, + var(--accent) 8px, + transparent 2px + ); + background-size: 12px 16px; + } } - - .label { - cursor: pointer; - font-size: 1rem; - color: white; - line-height: 0.9375rem; - height: 27px; - padding: 4px 5px; - text-align: left; - min-width: 64px; + progress:not(.default-progress) { + width: 260px; + height: 24px; + padding: 3px; + background-color: var(--secondary-bg); + border: 1px solid; + border-color: var(--border-dark) var(--border-light) var(--border-light) + var(--border-dark); position: relative; - background-color: var(--bg); - border-top: solid 1px var(--border-light); - border-left: solid 1px var(--border-light); - border-right: solid 1px var(--border-dark); - border-bottom: none; - margin-right: 1px; - z-index: 10; + &::-moz-progress-bar { + background-color: var(--secondary-bg); + height: 100%; + background-image: linear-gradient( + 90deg, + transparent 0px, + var(--accent) 0.01px, + var(--accent) 7.99px, + /* FIXME: despite this hack to try to fix it, firefox shows a gradient on the right when zoomed in via swiping (not via ctrl[+-]) */ + transparent 8px + ); + background-size: 12px 16px; + } + &::-webkit-progress-bar { + background-color: var(--secondary-bg); + } + &::-webkit-progress-value { + background-color: var(--secondary-bg); + height: 100%; + background-image: linear-gradient( + to right, + var(--accent) 8px, + transparent 2px + ); + background-size: 12px 16px; + } } - .radiotab:checked + .label { - background: var(--bg); - padding: 5px; - height: 29px; - color: var(--accent); + /* Tabs */ - &::before { - content: ""; + .cs-tabs { + display: flex; + flex-wrap: wrap; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + + .radiotab { position: absolute; - bottom: 0px; - left: 0px; - width: 100%; - height: 1px; + opacity: 0; + } + + .label { + cursor: pointer; + font-size: 1rem; + color: white; + line-height: 0.9375rem; + height: 27px; + padding: 4px 5px; + text-align: left; + min-width: 64px; + position: relative; background-color: var(--bg); + border-top: solid 1px var(--border-light); + border-left: solid 1px var(--border-light); + border-right: solid 1px var(--border-dark); + border-bottom: none; + margin-right: 1px; + z-index: 10; } - } - .panel { - display: none; - position: relative; - bottom: 1px; - padding: 32px 39px 27px; - background: var(--bg); - width: 100%; - border-left: solid 1px var(--border-light); - border-bottom: solid 1px var(--border-dark); - border-right: solid 1px var(--border-dark); - border-top: solid 1px var(--border-light); - order: 99; - color: var(--text); - } + .radiotab:checked + .label { + background: var(--bg); + padding: 5px; + height: 29px; + color: var(--accent); - .radiotab:checked + .label + .panel { - display: block; - position: relative; + &::before { + content: ''; + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + height: 1px; + background-color: var(--bg); + } + } + + .panel { + display: none; + position: relative; + bottom: 1px; + padding: 32px 39px 27px; + background: var(--bg); + width: 100%; + border-left: solid 1px var(--border-light); + border-bottom: solid 1px var(--border-dark); + border-right: solid 1px var(--border-dark); + border-top: solid 1px var(--border-light); + order: 99; + color: var(--text); + } + + .radiotab:checked + .label + .panel { + display: block; + position: relative; + } } } diff --git a/css/cs16.min.css b/css/cs16.min.css index e1e5b2a..5061c43 100644 --- a/css/cs16.min.css +++ b/css/cs16.min.css @@ -1 +1 @@ -:root{--bg:#4a5942;--secondary-bg:#3e4637;--accent:#c4b550;--secondary-accent:#958831;--text:#dedfd6;--secondary-text:#d8ded3;--text-3:#a0aa95;--border-light:#8c9284;--border-dark:#292c21;--disabled-text:#292c21;--disabled-text-shadow:#75806f;--outline:#000;--slider:#7f8c7f;--slider-bg:#1f1f1f;--scrollbar-track:#5a6a50}*,:after,:before{box-sizing:border-box}*{margin:0;padding:0}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{font-weight:400;overflow-wrap:break-word}@font-face{font-family:ArialPixel;font-style:normal;font-weight:400;src:url(https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/ArialPixel.ttf) format("truetype")}body{background-color:var(--bg);color:var(--text);font-family:ArialPixel,system-ui,sans-serif;font-weight:400;line-height:1.5}::-webkit-scrollbar{width:18px}::-webkit-scrollbar-track{background-color:var(--scrollbar-track);border:1px solid var(--border-dark);border-left:0;width:18px}::-webkit-scrollbar-thumb{background-color:var(--bg);border:1px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);width:17px}::-webkit-scrollbar-corner{background-color:var(--scrollbar-track)}::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement{display:block}::-webkit-scrollbar-button:vertical:end:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement,::-webkit-scrollbar-button:vertical:start:increment{background-repeat:no-repeat;height:17px}::-webkit-scrollbar-button:vertical:start{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath fill='%23a0aa95' d='M5 9h1v1H5m1-1h1v1H6m0-2h1v1H6m1 0h1v1H7m0-2h1v1H7m0-2h1v1H7m1 1h1v1H8m0-2h1v1H8m0-2h1v1H8m0-2h1v1H8m1 2h1v1H9m0-2h1v1H9m0-2h1v1H9m1 1h1v1h-1m0-2h1v1h-1m1 0h1v1h-1'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:vertical:end,::-webkit-scrollbar-button:vertical:start{border:1px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light)}::-webkit-scrollbar-button:vertical:end:active,::-webkit-scrollbar-button:vertical:start:active{border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark)}::-webkit-scrollbar-button:vertical:start:active,::-webkit-scrollbar-button:vertical:start:hover{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath fill='%23fff' d='M5 9h1v1H5m1-1h1v1H6m1-1h1v1H7m1-1h1v1H8m1-1h1v1H9m1-1h1v1h-1m1-1h1v1h-1M6 8h1v1H6m1-1h1v1H7m1-1h1v1H8m1-1h1v1H9m1-1h1v1h-1M7 7h1v1H7m1-1h1v1H8m1-1h1v1H9M8 6h1v1H8'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:vertical:end{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath fill='%23a0aa95' d='M5 6h1v1H5m1-1h1v1H6m0 0h1v1H6m1-1h1v1H7m0 0h1v1H7m1 0h1v1H8m0-2h1v1H8m0-2h1v1H8M7 6h1v1H7m1-1h1v1H8m3-1h1v1h-1m-1-1h1v1h-1M9 6h1v1H9m0 1h1v1H9m0-2h1v1H9m1-1h1v1h-1'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:vertical:end:active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath fill='%23fff' d='M5 6h1v1H5m6-1h1v1h-1m-1-1h1v1h-1M9 6h1v1H9M8 6h1v1H8M7 6h1v1H7M6 6h1v1H6m0 0h1v1H6m4-1h1v1h-1M9 7h1v1H9M8 7h1v1H8M7 7h1v1H7m0 0h1v1H7m2-1h1v1H9M8 9h1v1H8m0-2h1v1H8'/%3E%3C/svg%3E")}.cs-btn{background-color:var(--bg);border:1px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);color:#fff;font-size:16px;line-height:15px;padding:4px 5px 3px;user-select:none;&.close{background:no-repeat 50%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%238c9284' d='M3 3h1v1H3m1-1h1v1H4M3 4h1v1H3m1-1h1v1H4m0 0h1v1H4m1-1h1v1H5m0-2h1v1H5m0 1h1v1H5m1-1h1v1H6m0-2h1v1H6m0 1h1v1H6m0 0h1v1H6m1-1h1v1H7m0-2h1v1H7m0-2h1v1H7m1-1h1v1H8m0 0h1v1H8m0 0h1v1H8m0-4h1v1H8m1-1h1v1H9m0 0h1v1H9m0-3h1v1H9m1-1h1v1h-1m0 0h1v1h-1m0-3h1v1h-1m1-1h1v1h-1m0 0h1v1h-1M9 8h1v1H9m0 0h1v1H9M8 9h1v1H8m2-1h1v1h-1m0 0h1v1h-1m-1-1h1v1H9m2-1h1v1h-1m0 0h1v1h-1m-1-1h1v1h-1M5 8h1v1H5m0 0h1v1H5m1-1h1v1H6M4 9h1v1H4m0 0h1v1H4m1-1h1v1H5m-2-1h1v1H3m0 0h1v1H3m1-1h1v1H4'/%3E%3C/svg%3E");height:18px;padding:0;width:18px}&:focus-visible{outline:1px solid var(--outline);padding:3px 4px 2px;&.close{outline:0;padding:0}}&:active{border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark)}&:disabled{color:var(--disabled-text);pointer-events:none;text-shadow:var(--disabled-text-shadow) 1px 1px}}.cs-hr{border-bottom-color:var(--border-light);border-left:0;border-right:0;border-top-color:var(--border-dark)}.cs-checkbox{position:relative;input{position:absolute;clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;width:1px;&:focus:not(:focus-visible){outline:none}&:focus-visible+.cs-checkbox__label{outline:dotted 2px var(--outline);outline-offset:3px}&:checked+.cs-checkbox__label:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23c4b550' d='M2 6h1v1H2m1-2h1v1H3M2 5h1v1H2m0-2h1v1H2m1 1h1v1H3m0 0h1v1H3m1-2h1v1H4m0 0h1v1H4m0 0h1v1H4m1-2h1v1H5m0-2h1v1H5m0-2h1v1H5m1-2h1v1H6m0 0h1v1H6m0 0h1v1H6m1-2h1v1H7m0-2h1v1H7m0-2h1v1H7m1 0h1v1H8m0-2h1v1H8m0-2h1v1H8'/%3E%3C/svg%3E")}&:checked+.cs-checkbox__label{color:var(--accent)}}.cs-checkbox__label{color:var(--secondary--text);cursor:pointer;display:inline-block;line-height:15px;user-select:none;&:before{background-color:var(--secondary-bg);border:1px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);content:"";display:inline-block;height:12px;margin-right:7px;vertical-align:middle;width:12px}&:hover{color:#fff}}}.cs-input{background-color:var(--secondary-bg);border:1px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);color:var(--secondary--text);font-size:16px;line-height:17px;outline:0;padding:3px 2px 2px;&:focus+.cs-input__label{color:var(--accent)}&::selection{background-color:var(--secondary-accent);color:#fff}&:disabled{background-color:var(--bg);color:var(--text-3);pointer-events:none}&:disabled+.cs-input__label{color:var(--disabled-text);pointer-events:none;text-shadow:var(--disabled-text-shadow) 1px 1px}}.cs-input__label{color:var(--secondary--text);user-select:none}.cs-select{appearance:none;background-color:var(--secondary-bg);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath fill='%23a0aa95' d='M0 0h1v1H0m1-1h1v1H1m0 0h1v1H1m1-1h1v1H2m0 0h1v1H2m1-1h1v1H3m0 0h1v1H3m0-3h1v1H3M2 0h1v1H2m1-1h1v1H3m1-1h1v1H4m0 1h1v1H4m0-2h1v1H4m1-1h1v1H5m0-2h1v1H5m1-1h1v1H6'/%3E%3C/svg%3E");background-position:right 6px top 50%;background-repeat:no-repeat;background-size:7px auto;border:1px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);border-radius:0;color:var(--secondary--text);line-height:15px;min-width:150px;outline:0;padding:5px 3px;user-select:none;&:focus-within,&:hover{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath fill='%23fff' d='M0 0h1v1H0m1-1h1v1H1m0 0h1v1H1m1-1h1v1H2m0 0h1v1H2m1 0h1v1H3m0-2h1v1H3m0-2h1v1H3M2 0h1v1H2m1-1h1v1H3m1-1h1v1H4m0 1h1v1H4m0-2h1v1H4m1-1h1v1H5m0-2h1v1H5m1-1h1v1H6'/%3E%3C/svg%3E")}option{background-color:var(--bg);color:var(--text-3)}}.cs-select__label{color:var(--secondary--text);font-size:16px;line-height:15px;user-select:none}.cs-fieldset{border:none;user-select:none;legend{color:var(--secondary--text);margin-bottom:10px}>div{padding-left:10px}&:disabled{input[type=radio]{+label{color:var(--disabled-text);pointer-events:none;text-shadow:var(--disabled-text-shadow) 1px 1px}}legend{color:var(--disabled-text);pointer-events:none;text-shadow:var(--disabled-text-shadow) 1px 1px}}input[type=radio]{opacity:0;+label{color:var(--secondary--text);cursor:pointer;font-size:16px;line-height:15px;position:relative;&:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23889180' d='M10 2h1v1h-1m0 0h1v1h-1m1 0h1v1h-1m0 0h1v1h-1m0 0h1v1h-1m0 0h1v1h-1m-1 0h1v1h-1m0 0h1v1h-1m-2 0h1v1H8m1-1h1v1H9m-2 0h1v1H7m-1-1h1v1H6m-1-1h1v1H5m-3-2h1v1H2m1-1h1v1H3m1 0h1v1H4'/%3E%3Cpath fill='%23292c21' d='M1 2h1v1H1m0 0h1v1H1m1-3h1v1H2m1-1h1v1H3m1-2h1v1H4m1-1h1v1H5m1-1h1v1H6m1-1h1v1H7m1 0h1v1H8m1-1h1v1H9M0 4h1v1H0m0 0h1v1H0m0 0h1v1H0m0 0h1v1H0m1 0h1v1H1m0 0h1v1H1'/%3E%3Cpath fill='%233e4637' d='M4 1h1v1H4m1-1h1v1H5m1-1h1v1H6m1-1h1v1H7m1 0h1v1H8m1-1h1v1H9m0 0h1v1H9m0 0h1v1H9m1-1h1v1h-1m0 0h1v1h-1m0 0h1v1h-1m0 0h1v1h-1M9 7h1v1H9m0 0h1v1H9m0 0h1v1H9M8 9h1v1H8M7 9h1v1H7m0 0h1v1H7m-1-1h1v1H6m-1-1h1v1H5m-1-1h1v1H4m2-2h1v1H6M5 9h1v1H5M4 9h1v1H4M3 9h1v1H3M2 9h1v1H2m0-2h1v1H2M1 7h1v1H1m0-4h1v1H1m1-2h1v1H2m0-2h1v1H2m1-1h1v1H3m1-1h1v1H4m1-1h1v1H5m1-1h1v1H6m1-1h1v1H7M3 3h1v1H3M2 4h1v1H2m0 0h1v1H2M1 5h1v1H1m0 0h1v1H1m1-1h1v1H2m0 0h1v1H2m1 0h1v1H3m0-2h1v1H3m0-2h1v1H3m0-2h1v1H3m0-2h1v1H3m1-2h1v1H4m1-1h1v1H5m0 0h1v1H5M4 8h1v1H4m0-2h1v1H4m0-2h1v1H4m0-3h1v1H4m0 0h1v1H4m1-1h1v1H5m0 0h1v1H5m0 0h1v1H5m0 0h1v1H5m1-1h1v1H6m0-2h1v1H6m0-2h1v1H6m0-4h1v1H6m0 0h1v1H6m0 0h1v1H6m1 1h1v1H7m0 0h1v1H7m1-1h1v1H8m0-2h1v1H8M7 6h1v1H7m0-2h1v1H7m0-2h1v1H7m0-2h1v1H7m1-1h1v1H8m0 0h1v1H8m0 0h1v1H8m0 0h1v1H8m1-1h1v1H9m0-2h1v1H9'/%3E%3C/svg%3E");height:12px;left:-25px;top:1px;width:12px}&:after,&:before{content:"";position:absolute}&:after{height:6px;left:-22px;top:4px;width:6px}}&:checked{+label{color:var(--accent)}+label:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath fill='%23c4b550' d='M1 0h1v1H1m2-1h1v1H3m1-1h1v1H4m0 0h1v1H4m1-1h1v1H5m0 0h1v1H5m0 0h1v1H5m0 0h1v1H5M4 5h1v1H4M3 5h1v1H3M2 5h1v1H2M1 5h1v1H1M0 4h1v1H0m0-2h1v1H0m0-2h1v1H0m1-1h1v1H1m0 0h1v1H1m0 0h1v1H1m1-1h1v1H2m0-2h1v1H2m0-4h1v1H2m0 0h1v1H2m1-1h1v1H3m0 1h1v1H3m0 0h1v1H3m1-1h1v1H4m0-2h1v1H4m0-2h1v1H4M3 2h1v1H3M2 2h1v1H2M1 1h1v1H1M0 1h1v1H0'/%3E%3C/svg%3E")}}}}.cs-slider{display:flex;flex-direction:column-reverse;user-select:none;width:150px;input{-webkit-appearance:none;appearance:none;background:var(--slider-bg);border:1px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);box-sizing:border-box;height:4px;outline:none;width:150px}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--bg);border:1px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);border-radius:0;box-sizing:border-box;cursor:pointer;height:16px;width:8px}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;background:var(--bg);border:1px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);border-radius:0;box-sizing:border-box;cursor:pointer;height:16px;width:8px}label{color:var(--secondary--text);font-size:16px;line-height:15px;margin-bottom:12px}&:has(input:focus) label{color:var(--accent)}.ruler{background-image:linear-gradient(to right,var(--slider) 1px,transparent 1px);background-size:15px 5px;height:5px;margin-left:4px;margin-top:4px;width:calc(100% + 5px);z-index:-1}.value{align-items:center;color:var(--slider);display:flex;font-size:13px;justify-content:space-between;line-height:15px}}.cs-dialog{background-color:var(--bg);border:1px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);color:var(--text);margin:auto;max-width:510px;min-width:350px;padding:4px;position:fixed;right:0;top:0;user-select:none;.heading{align-items:center;display:flex;justify-content:space-between;margin-top:3px;padding-left:2px;.wrapper{align-items:center;display:flex;gap:5px;.icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath fill='%238c9284' d='M1 12h1v1H1m1 0h1v1H2m1-2h1v1H3m11-6h1v1h-1'/%3E%3Cpath fill='%23a5aa9c' d='M3 14h1v1H3'/%3E%3Cpath fill='%23bdbeb5' d='M0 11h1v1H0m10-9h1v1h-1m0 1h1v1h-1m2-3h1v1h-1m0 1h1v1h-1m0 2h1v1h-1'/%3E%3Cpath fill='%23fff' d='M0 10h1v1H0m0-2h1v1H0m0-2h1v1H0m1-1h1v1H1m0 0h1v1H1m0 0h1v1H1m1-1h1v1H2m0-2h1v1H2m1-1h1v1H3m0 0h1v1H3m1-2h1v1H4m0 0h1v1H4m1-1h1v1H5m-4 0h1v1H1m1-1h1v1H2m1-1h1v1H3m1-1h1v1H4m1-1h1v1H5m-2 1h1v1H3m3-6h1v1H6m0-2h1v1H6m1-1h1v1H7m0 0h1v1H7m1-2h1v1H8m0 0h1v1H8m1-2h1v1H9m0 0h1v1H9m1-2h1v1h-1m0 0h1v1h-1M7 9h1v1H7m1-1h1v1H8m1-1h1v1H9M7 6h1v1H7m1-1h1v1H8m0-2h1v1H8m0-2h1v1H8m0-2h1v1H8m-1 7h1v1H7m4-9h1v1h-1m0 0h1v1h-1m-1-1h1v1h-1m1 0h1v1h-1m1-2h1v1h-1M9 2h1v1H9m4-1h1v1h-1m0 4h1v1h-1m1-2h1v1h-1m0-2h1v1h-1m0-2h1v1h-1m0-2h1v1h-1m-4-3h1v1h-1m1-1h1v1h-1m1-1h1v1h-1'/%3E%3Cpath fill='%23848e84' d='M0 7h1v1H0m11-8h1v1h-1M7 4h1v1H7m1-4h1v1H8'/%3E%3Cpath fill='%239ca29c' d='M2 8h1v1H2m1-1h1v1H3m3 5h1v1H6m1-2h1v1H7m3-5h1v1h-1m5-6h1v1h-1m0 0h1v1h-1'/%3E%3Cpath fill='%23d6d7ce' d='M4 8h1v1H4m2 0h1v1H6'/%3E%3Cpath fill='%23dedfde' d='M4 14h1v1H4m1-1h1v1H5m3-5h1v1H8'/%3E%3Cpath fill='%23f7f7f7' d='M5 8h1v1H5m6-2h1v1h-1m1-1h1v1h-1m-1 0h1v1h-1'/%3E%3Cpath fill='%23efefef' d='M2 12h1v1H2m4 0h1v1H6m1-2h1v1H7m0-3h1v1H7m0-6h1v1H7'/%3E%3Cpath fill='%23cecfce' d='M4 12h1v1H4m1-1h1v1H5m4-7h1v1H9'/%3E%3Cpath fill='%23d6dbd6' d='M8 2h1v1H8m1-2h1v1H9m4-1h1v1h-1m1 0h1v1h-1'/%3E%3Cpath fill='%23949e94' d='M13 6h1v1h-1'/%3E%3Cpath fill='%235a6952' d='M5 9h1v1H5m1 0h1v1H6m0 0h1v1H6m0 0h1v1H6m-2 0h1v1H4m1-1h1v1H5m8-9h1v1h-1m0-3h1v1h-1m0 4h1v1h-1m-4 1h1v1H9m-2 3h1v1H7'/%3E%3Cpath fill='%23525d4a' d='M10 6h1v1h-1m1-1h1v1h-1m1-1h1v1h-1m1-3h1v1h-1m-1-3h1v1h-1m-1-1h1v1h-1m-1-1h1v1h-1M9 3h1v1H9m0 0h1v1H9m0 0h1v1H9M5 7h1v1H5m2-6h1v1H7m0 0h1v1H7m2-4h1v1H9m1-1h1v1h-1m2-1h1v1h-1m2 0h1v1h-1'/%3E%3Cpath fill='%23adb6ad' d='M6 6h1v1H6'/%3E%3C/svg%3E");height:15px;width:16px}.text{color:#fff;font-size:16px;line-height:15px}}}.content{padding:10px}.footer-btns{float:right;margin:4px 8px 8px 0;.cs-btn{text-align:left;width:72px}}}.cs-tooltip{color:#fff;display:inline-block;line-height:20px;position:relative;user-select:none;&:hover .text{visibility:visible}.text{background-color:var(--secondary-accent);border:1px solid var(--border-dark);color:#000;font-size:16px;line-height:15px;padding:2px 2px 1px;position:absolute;text-align:center;visibility:hidden;width:max-content;z-index:1}}.cs-progress-bar{background-color:var(--secondary-bg);border:1px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);height:24px;padding:3px;width:260px;.bars{background-image:linear-gradient(to right,var(--accent) 8px,transparent 2px);background-size:12px 16px;height:100%}}.cs-tabs{align-items:center;display:flex;flex-wrap:wrap;user-select:none;.radiotab{opacity:0;position:absolute}.label{background-color:var(--bg);border-bottom:none;border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-top:1px solid var(--border-light);color:#fff;cursor:pointer;font-size:16px;height:27px;line-height:15px;margin-right:1px;min-width:64px;padding:4px 5px;position:relative;text-align:left;z-index:10}.radiotab:checked+.label{background:var(--bg);color:var(--accent);height:29px;padding:5px;&:before{background-color:var(--bg);bottom:0;content:"";height:1px;left:0;position:absolute;width:100%}}.panel{background:var(--bg);border-bottom:1px solid var(--border-dark);border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-top:1px solid var(--border-light);bottom:1px;color:var(--text);display:none;order:99;padding:32px 39px 27px;position:relative;width:100%}.radiotab:checked+.label+.panel{display:block;position:relative}}
\ No newline at end of file +:root{--bg:#4a5942;--secondary-bg:#3e4637;--accent:#c4b550;--secondary-accent:#958831;--text:#dedfd6;--secondary-text:#d8ded3;--text-3:#a0aa95;--border-light:#8c9284;--border-dark:#292c21;--disabled-text:#292c21;--disabled-text-shadow:#75806f;--outline:#000;--slider:#7f8c7f;--slider-bg:#1f1f1f;--scrollbar-track:#5a6a50}@font-face{font-family:ArialPixel;font-style:normal;font-weight:400;src:url(https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/ArialPixel.ttf) format("truetype")}.cs{&{background-color:var(--bg);color:var(--text);font-family:ArialPixel,system-ui,sans-serif;font-weight:400;line-height:1.5}*,:after,:before{box-sizing:border-box}*{margin:0;padding:0}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{font-weight:400;overflow-wrap:break-word}::-webkit-scrollbar{width:18px}::-webkit-scrollbar-track{background-color:var(--scrollbar-track);border:1px solid var(--border-dark);border-left:0;width:18px}::-webkit-scrollbar-thumb{background-color:var(--bg);border:1px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);width:17px}::-webkit-scrollbar-corner{background-color:var(--scrollbar-track)}::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement{display:block}::-webkit-scrollbar-button:vertical:end:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement,::-webkit-scrollbar-button:vertical:start:increment{background-repeat:no-repeat;height:17px}::-webkit-scrollbar-button:vertical:start{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath fill='%23a0aa95' d='M5 9h1v1H5m1-1h1v1H6m0-2h1v1H6m1 0h1v1H7m0-2h1v1H7m0-2h1v1H7m1 1h1v1H8m0-2h1v1H8m0-2h1v1H8m0-2h1v1H8m1 2h1v1H9m0-2h1v1H9m0-2h1v1H9m1 1h1v1h-1m0-2h1v1h-1m1 0h1v1h-1'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:vertical:end,::-webkit-scrollbar-button:vertical:start{border:1px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light)}::-webkit-scrollbar-button:vertical:end:active,::-webkit-scrollbar-button:vertical:start:active{border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark)}::-webkit-scrollbar-button:vertical:start:active,::-webkit-scrollbar-button:vertical:start:hover{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath fill='%23fff' d='M5 9h1v1H5m1-1h1v1H6m1-1h1v1H7m1-1h1v1H8m1-1h1v1H9m1-1h1v1h-1m1-1h1v1h-1M6 8h1v1H6m1-1h1v1H7m1-1h1v1H8m1-1h1v1H9m1-1h1v1h-1M7 7h1v1H7m1-1h1v1H8m1-1h1v1H9M8 6h1v1H8'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:vertical:end{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath fill='%23a0aa95' d='M5 6h1v1H5m1-1h1v1H6m0 0h1v1H6m1-1h1v1H7m0 0h1v1H7m1 0h1v1H8m0-2h1v1H8m0-2h1v1H8M7 6h1v1H7m1-1h1v1H8m3-1h1v1h-1m-1-1h1v1h-1M9 6h1v1H9m0 1h1v1H9m0-2h1v1H9m1-1h1v1h-1'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:vertical:end:active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath fill='%23fff' d='M5 6h1v1H5m6-1h1v1h-1m-1-1h1v1h-1M9 6h1v1H9M8 6h1v1H8M7 6h1v1H7M6 6h1v1H6m0 0h1v1H6m4-1h1v1h-1M9 7h1v1H9M8 7h1v1H8M7 7h1v1H7m0 0h1v1H7m2-1h1v1H9M8 9h1v1H8m0-2h1v1H8'/%3E%3C/svg%3E")}.cs-btn,button:not(.default-btn),input[type=submit]:not(.default-btn){background-color:var(--bg);border:1px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);color:#fff;font-size:16px;line-height:15px;padding:4px 5px 3px;user-select:none;&.close{background:no-repeat 50%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%238c9284' d='M3 3h1v1H3m1-1h1v1H4M3 4h1v1H3m1-1h1v1H4m0 0h1v1H4m1-1h1v1H5m0-2h1v1H5m0 1h1v1H5m1-1h1v1H6m0-2h1v1H6m0 1h1v1H6m0 0h1v1H6m1-1h1v1H7m0-2h1v1H7m0-2h1v1H7m1-1h1v1H8m0 0h1v1H8m0 0h1v1H8m0-4h1v1H8m1-1h1v1H9m0 0h1v1H9m0-3h1v1H9m1-1h1v1h-1m0 0h1v1h-1m0-3h1v1h-1m1-1h1v1h-1m0 0h1v1h-1M9 8h1v1H9m0 0h1v1H9M8 9h1v1H8m2-1h1v1h-1m0 0h1v1h-1m-1-1h1v1H9m2-1h1v1h-1m0 0h1v1h-1m-1-1h1v1h-1M5 8h1v1H5m0 0h1v1H5m1-1h1v1H6M4 9h1v1H4m0 0h1v1H4m1-1h1v1H5m-2-1h1v1H3m0 0h1v1H3m1-1h1v1H4'/%3E%3C/svg%3E");height:18px;padding:0;width:18px}&:focus-visible{outline:1px solid var(--outline);padding:3px 4px 2px;&.close{outline:0;padding:0}}&:active{border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark)}&:disabled{color:var(--disabled-text);pointer-events:none;text-shadow:var(--disabled-text-shadow) 1px 1px}}hr:not(.default-hr){border-bottom-color:var(--border-light);border-left:0;border-right:0;border-top-color:var(--border-dark)}.cs-checkbox:not(input){position:relative}.cs-checkbox input,input.cs-checkbox,input[type=checkbox]:not(.default-checkbox){position:absolute;clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;width:1px;&:focus:not(:focus-visible){outline:none}&:focus-visible+.cs-checkbox__label,&:focus-visible+label{outline:dotted 2px var(--outline);outline-offset:3px}&:checked+.cs-checkbox__label,&:checked+label{color:var(--accent);&:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23c4b550' d='M2 6h1v1H2m1-2h1v1H3M2 5h1v1H2m0-2h1v1H2m1 1h1v1H3m0 0h1v1H3m1-2h1v1H4m0 0h1v1H4m0 0h1v1H4m1-2h1v1H5m0-2h1v1H5m0-2h1v1H5m1-2h1v1H6m0 0h1v1H6m0 0h1v1H6m1-2h1v1H7m0-2h1v1H7m0-2h1v1H7m1 0h1v1H8m0-2h1v1H8m0-2h1v1H8'/%3E%3C/svg%3E")}}}.cs-checkbox input+label,.cs-checkbox__label,input.cs-checkbox+label,input[type=checkbox]:not(.default-checkbox)+label,label.cs-checkbox:has(input),label:has(.cs-checkbox),label:not(.default-checkbox):has(input[type=checkbox]:not(.default-checkbox)){color:var(--secondary--text);cursor:pointer;display:inline-block;line-height:15px;user-select:none;&:before{background-color:var(--secondary-bg);border:1px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);content:"";display:inline-block;height:12px;margin-right:7px;vertical-align:middle;width:12px}&:hover{color:#fff}}label.cs-checkbox:has(input),label:has(.cs-checkbox),label:not(.default-checkbox):has(input[type=checkbox]:not(.default-checkbox)){position:relative;&:has(.cs-checkbox:focus-visible),&:has(input:not(.default-checkbox):focus-visible){outline:dotted 2px var(--outline);outline-offset:3px}&:before{margin-right:3px}&:has(.cs-checkbox:checked),&:has(input:not(.default-checkbox):checked){color:var(--accent);&:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23c4b550' d='M2 6h1v1H2m1-2h1v1H3M2 5h1v1H2m0-2h1v1H2m1 1h1v1H3m0 0h1v1H3m1-2h1v1H4m0 0h1v1H4m0 0h1v1H4m1-2h1v1H5m0-2h1v1H5m0-2h1v1H5m1-2h1v1H6m0 0h1v1H6m0 0h1v1H6m1-2h1v1H7m0-2h1v1H7m0-2h1v1H7m1 0h1v1H8m0-2h1v1H8m0-2h1v1H8'/%3E%3C/svg%3E")}}}.cs-input,input:is([type=text],[type=number],[type=email],[type=date],[type=datetime-local],[type=month],[type=password],[type=search],[type=tel],[type=url],[type=week],[type=datetime],[type=input]):not(.default-input){background-color:var(--secondary-bg);border:1px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);color:var(--secondary--text);font-size:1rem;line-height:1.0625rem;outline:0;padding:3px 2px 2px;&:focus+.cs-input__label,&:focus+label{color:var(--accent)}&::-moz-selection{background-color:var(--secondary-accent);color:#fff}&::selection{background-color:var(--secondary-accent);color:#fff}&:disabled{background-color:var(--bg);color:var(--text-3);pointer-events:none}&:disabled+.cs-input__label,&:disabled+label{color:var(--disabled-text);pointer-events:none;text-shadow:var(--disabled-text-shadow) 1px 1px}}.cs-input__label,label:has(input:is([type=text],[type=number],[type=email],[type=date],[type=datetime-local],[type=month],[type=password],[type=search],[type=tel],[type=url],[type=week],[type=datetime],[type=input]):not(.default-input)):not(.default-input){color:var(--secondary--text);-webkit-user-select:none;-moz-user-select:none;user-select:none;&:has(input:not(.default-input):focus){color:var(--accent)}&:has(input:not(.default-input):disabled){color:var(--disabled-text);pointer-events:none;text-shadow:var(--disabled-text-shadow) 1px 1px}}.cs-select,select:not(.default-select){appearance:none;background-color:var(--secondary-bg);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath fill='%23a0aa95' d='M0 0h1v1H0m1-1h1v1H1m0 0h1v1H1m1-1h1v1H2m0 0h1v1H2m1-1h1v1H3m0 0h1v1H3m0-3h1v1H3M2 0h1v1H2m1-1h1v1H3m1-1h1v1H4m0 1h1v1H4m0-2h1v1H4m1-1h1v1H5m0-2h1v1H5m1-1h1v1H6'/%3E%3C/svg%3E");background-position:right 6px top 50%;background-repeat:no-repeat;background-size:7px auto;border:1px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);border-radius:0;color:var(--secondary--text);line-height:15px;min-width:150px;outline:0;padding:5px 15px 5px 3px;user-select:none;&:focus-within,&:hover{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath fill='%23fff' d='M0 0h1v1H0m1-1h1v1H1m0 0h1v1H1m1-1h1v1H2m0 0h1v1H2m1 0h1v1H3m0-2h1v1H3m0-2h1v1H3M2 0h1v1H2m1-1h1v1H3m1-1h1v1H4m0 1h1v1H4m0-2h1v1H4m1-1h1v1H5m0-2h1v1H5m1-1h1v1H6'/%3E%3C/svg%3E")}option{background-color:var(--bg);color:var(--text-3)}}.cs-select__label,label:has(select:not(.default-select)):not(.default-select-label){color:var(--secondary--text);font-size:16px;line-height:15px;user-select:none}.cs-fieldset,fieldset:not(.default-fieldset){border:none;user-select:none;legend{color:var(--secondary--text);margin-bottom:10px}>div{padding-left:10px}&:disabled{input[type=radio]{+label{color:var(--disabled-text);pointer-events:none;text-shadow:var(--disabled-text-shadow) 1px 1px}}legend{color:var(--disabled-text);pointer-events:none;text-shadow:var(--disabled-text-shadow) 1px 1px}}input[type=radio]{opacity:0;+label{color:var(--secondary--text);cursor:pointer;font-size:16px;line-height:15px;position:relative;&:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23889180' d='M10 2h1v1h-1m0 0h1v1h-1m1 0h1v1h-1m0 0h1v1h-1m0 0h1v1h-1m0 0h1v1h-1m-1 0h1v1h-1m0 0h1v1h-1m-2 0h1v1H8m1-1h1v1H9m-2 0h1v1H7m-1-1h1v1H6m-1-1h1v1H5m-3-2h1v1H2m1-1h1v1H3m1 0h1v1H4'/%3E%3Cpath fill='%23292c21' d='M1 2h1v1H1m0 0h1v1H1m1-3h1v1H2m1-1h1v1H3m1-2h1v1H4m1-1h1v1H5m1-1h1v1H6m1-1h1v1H7m1 0h1v1H8m1-1h1v1H9M0 4h1v1H0m0 0h1v1H0m0 0h1v1H0m0 0h1v1H0m1 0h1v1H1m0 0h1v1H1'/%3E%3Cpath fill='%233e4637' d='M4 1h1v1H4m1-1h1v1H5m1-1h1v1H6m1-1h1v1H7m1 0h1v1H8m1-1h1v1H9m0 0h1v1H9m0 0h1v1H9m1-1h1v1h-1m0 0h1v1h-1m0 0h1v1h-1m0 0h1v1h-1M9 7h1v1H9m0 0h1v1H9m0 0h1v1H9M8 9h1v1H8M7 9h1v1H7m0 0h1v1H7m-1-1h1v1H6m-1-1h1v1H5m-1-1h1v1H4m2-2h1v1H6M5 9h1v1H5M4 9h1v1H4M3 9h1v1H3M2 9h1v1H2m0-2h1v1H2M1 7h1v1H1m0-4h1v1H1m1-2h1v1H2m0-2h1v1H2m1-1h1v1H3m1-1h1v1H4m1-1h1v1H5m1-1h1v1H6m1-1h1v1H7M3 3h1v1H3M2 4h1v1H2m0 0h1v1H2M1 5h1v1H1m0 0h1v1H1m1-1h1v1H2m0 0h1v1H2m1 0h1v1H3m0-2h1v1H3m0-2h1v1H3m0-2h1v1H3m0-2h1v1H3m1-2h1v1H4m1-1h1v1H5m0 0h1v1H5M4 8h1v1H4m0-2h1v1H4m0-2h1v1H4m0-3h1v1H4m0 0h1v1H4m1-1h1v1H5m0 0h1v1H5m0 0h1v1H5m0 0h1v1H5m1-1h1v1H6m0-2h1v1H6m0-2h1v1H6m0-4h1v1H6m0 0h1v1H6m0 0h1v1H6m1 1h1v1H7m0 0h1v1H7m1-1h1v1H8m0-2h1v1H8M7 6h1v1H7m0-2h1v1H7m0-2h1v1H7m0-2h1v1H7m1-1h1v1H8m0 0h1v1H8m0 0h1v1H8m0 0h1v1H8m1-1h1v1H9m0-2h1v1H9'/%3E%3C/svg%3E");height:12px;left:-25px;top:1px;width:12px}&:after,&:before{content:"";position:absolute}&:after{height:6px;left:-22px;top:4px;width:6px}}&:checked{+label{color:var(--accent)}+label:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath fill='%23c4b550' d='M1 0h1v1H1m2-1h1v1H3m1-1h1v1H4m0 0h1v1H4m1-1h1v1H5m0 0h1v1H5m0 0h1v1H5m0 0h1v1H5M4 5h1v1H4M3 5h1v1H3M2 5h1v1H2M1 5h1v1H1M0 4h1v1H0m0-2h1v1H0m0-2h1v1H0m1-1h1v1H1m0 0h1v1H1m0 0h1v1H1m1-1h1v1H2m0-2h1v1H2m0-4h1v1H2m0 0h1v1H2m1-1h1v1H3m0 1h1v1H3m0 0h1v1H3m1-1h1v1H4m0-2h1v1H4m0-2h1v1H4M3 2h1v1H3M2 2h1v1H2M1 1h1v1H1M0 1h1v1H0'/%3E%3C/svg%3E")}}}}.cs-slider{display:flex;flex-direction:column-reverse;user-select:none;width:150px;input{-webkit-appearance:none;appearance:none;background:var(--slider-bg);border:1px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);box-sizing:border-box;height:4px;outline:none;width:150px}input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--bg);border:1px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);border-radius:0;box-sizing:border-box;cursor:pointer;height:16px;width:8px}input::-moz-range-thumb{-webkit-appearance:none;appearance:none;background:var(--bg);border:1px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);border-radius:0;box-sizing:border-box;cursor:pointer;height:16px;width:8px}label{color:var(--secondary--text);font-size:16px;line-height:15px;margin-bottom:12px}&:has(input:focus) label{color:var(--accent)}.ruler{background-image:linear-gradient(to right,var(--slider) 1px,transparent 1px);background-size:15px 5px;height:5px;margin-left:4px;margin-top:4px;width:calc(100% + 5px);z-index:-1}.value{align-items:center;color:var(--slider);display:flex;font-size:13px;justify-content:space-between;line-height:15px}}.cs-dialog,dialog:not(.default-dialog){background-color:var(--bg);border:1px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);color:var(--text);margin:auto;max-width:510px;min-width:350px;padding:4px;position:fixed;right:0;top:0;user-select:none;.heading{align-items:center;display:flex;justify-content:space-between;margin-top:3px;padding-left:2px;.wrapper{align-items:center;display:flex;gap:5px;.icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath fill='%238c9284' d='M1 12h1v1H1m1 0h1v1H2m1-2h1v1H3m11-6h1v1h-1'/%3E%3Cpath fill='%23a5aa9c' d='M3 14h1v1H3'/%3E%3Cpath fill='%23bdbeb5' d='M0 11h1v1H0m10-9h1v1h-1m0 1h1v1h-1m2-3h1v1h-1m0 1h1v1h-1m0 2h1v1h-1'/%3E%3Cpath fill='%23fff' d='M0 10h1v1H0m0-2h1v1H0m0-2h1v1H0m1-1h1v1H1m0 0h1v1H1m0 0h1v1H1m1-1h1v1H2m0-2h1v1H2m1-1h1v1H3m0 0h1v1H3m1-2h1v1H4m0 0h1v1H4m1-1h1v1H5m-4 0h1v1H1m1-1h1v1H2m1-1h1v1H3m1-1h1v1H4m1-1h1v1H5m-2 1h1v1H3m3-6h1v1H6m0-2h1v1H6m1-1h1v1H7m0 0h1v1H7m1-2h1v1H8m0 0h1v1H8m1-2h1v1H9m0 0h1v1H9m1-2h1v1h-1m0 0h1v1h-1M7 9h1v1H7m1-1h1v1H8m1-1h1v1H9M7 6h1v1H7m1-1h1v1H8m0-2h1v1H8m0-2h1v1H8m0-2h1v1H8m-1 7h1v1H7m4-9h1v1h-1m0 0h1v1h-1m-1-1h1v1h-1m1 0h1v1h-1m1-2h1v1h-1M9 2h1v1H9m4-1h1v1h-1m0 4h1v1h-1m1-2h1v1h-1m0-2h1v1h-1m0-2h1v1h-1m0-2h1v1h-1m-4-3h1v1h-1m1-1h1v1h-1m1-1h1v1h-1'/%3E%3Cpath fill='%23848e84' d='M0 7h1v1H0m11-8h1v1h-1M7 4h1v1H7m1-4h1v1H8'/%3E%3Cpath fill='%239ca29c' d='M2 8h1v1H2m1-1h1v1H3m3 5h1v1H6m1-2h1v1H7m3-5h1v1h-1m5-6h1v1h-1m0 0h1v1h-1'/%3E%3Cpath fill='%23d6d7ce' d='M4 8h1v1H4m2 0h1v1H6'/%3E%3Cpath fill='%23dedfde' d='M4 14h1v1H4m1-1h1v1H5m3-5h1v1H8'/%3E%3Cpath fill='%23f7f7f7' d='M5 8h1v1H5m6-2h1v1h-1m1-1h1v1h-1m-1 0h1v1h-1'/%3E%3Cpath fill='%23efefef' d='M2 12h1v1H2m4 0h1v1H6m1-2h1v1H7m0-3h1v1H7m0-6h1v1H7'/%3E%3Cpath fill='%23cecfce' d='M4 12h1v1H4m1-1h1v1H5m4-7h1v1H9'/%3E%3Cpath fill='%23d6dbd6' d='M8 2h1v1H8m1-2h1v1H9m4-1h1v1h-1m1 0h1v1h-1'/%3E%3Cpath fill='%23949e94' d='M13 6h1v1h-1'/%3E%3Cpath fill='%235a6952' d='M5 9h1v1H5m1 0h1v1H6m0 0h1v1H6m0 0h1v1H6m-2 0h1v1H4m1-1h1v1H5m8-9h1v1h-1m0-3h1v1h-1m0 4h1v1h-1m-4 1h1v1H9m-2 3h1v1H7'/%3E%3Cpath fill='%23525d4a' d='M10 6h1v1h-1m1-1h1v1h-1m1-1h1v1h-1m1-3h1v1h-1m-1-3h1v1h-1m-1-1h1v1h-1m-1-1h1v1h-1M9 3h1v1H9m0 0h1v1H9m0 0h1v1H9M5 7h1v1H5m2-6h1v1H7m0 0h1v1H7m2-4h1v1H9m1-1h1v1h-1m2-1h1v1h-1m2 0h1v1h-1'/%3E%3Cpath fill='%23adb6ad' d='M6 6h1v1H6'/%3E%3C/svg%3E");height:15px;width:16px}.text{color:#fff;font-size:16px;line-height:15px}}}.content{padding:10px}.footer-btns{float:right;margin:4px 8px 8px 0;.cs-btn{text-align:left;width:72px}}}.cs-tooltip{color:#fff;display:inline-block;line-height:20px;position:relative;user-select:none;&:hover .text{visibility:visible}.text{background-color:var(--secondary-accent);border:1px solid var(--border-dark);color:#000;font-size:16px;line-height:15px;padding:2px 2px 1px;position:absolute;text-align:center;visibility:hidden;width:max-content;z-index:1}}.cs-progress-bar{background-color:var(--secondary-bg);border:1px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);height:24px;padding:3px;width:260px;.bars{background-image:linear-gradient(to right,var(--accent) 8px,transparent 2px);background-size:12px 16px;height:100%}}progress:not(.default-progress){background-color:var(--secondary-bg);border:1px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);height:24px;padding:3px;position:relative;width:260px;&::-moz-progress-bar{background-color:var(--secondary-bg);background-image:linear-gradient(90deg,transparent 0,var(--accent) .01px,var(--accent) 7.99px,transparent 8px);background-size:12px 16px;height:100%}&::-webkit-progress-bar,&::-webkit-progress-value{background-color:var(--secondary-bg)}&::-webkit-progress-value{background-image:linear-gradient(to right,var(--accent) 8px,transparent 2px);background-size:12px 16px;height:100%}}.cs-tabs{align-items:center;display:flex;flex-wrap:wrap;user-select:none;.radiotab{opacity:0;position:absolute}.label{background-color:var(--bg);border-bottom:none;border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-top:1px solid var(--border-light);color:#fff;cursor:pointer;font-size:16px;height:27px;line-height:15px;margin-right:1px;min-width:64px;padding:4px 5px;position:relative;text-align:left;z-index:10}.radiotab:checked+.label{background:var(--bg);color:var(--accent);height:29px;padding:5px;&:before{background-color:var(--bg);bottom:0;content:"";height:1px;left:0;position:absolute;width:100%}}.panel{background:var(--bg);border-bottom:1px solid var(--border-dark);border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-top:1px solid var(--border-light);bottom:1px;color:var(--text);display:none;order:99;padding:32px 39px 27px;position:relative;width:100%}.radiotab:checked+.label+.panel{display:block;position:relative}}}
\ No newline at end of file diff --git a/deno.lock b/deno.lock new file mode 100644 index 0000000..6eff3e7 --- /dev/null +++ b/deno.lock @@ -0,0 +1,1252 @@ +{ + "version": "5", + "specifiers": { + "npm:autoprefixer@10.4.20": "10.4.20_postcss@8.5.6", + "npm:cssnano@7.0.6": "7.0.6_postcss@8.5.6", + "npm:postcss-cli@11.0.0": "11.0.0_postcss@8.5.6", + "npm:postcss-pxtorem@6.1.0": "6.1.0_postcss@8.5.6", + "npm:vite@6.0.5": "6.0.5" + }, + "npm": { + "@esbuild/aix-ppc64@0.24.0": { + "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==", + "os": ["aix"], + "cpu": ["ppc64"] + }, + "@esbuild/aix-ppc64@0.25.6": { + "integrity": "sha512-ShbM/3XxwuxjFiuVBHA+d3j5dyac0aEVVq1oluIDf71hUw0aRF59dV/efUsIwFnR6m8JNM2FjZOzmaZ8yG61kw==", + "os": ["aix"], + "cpu": ["ppc64"] + }, + "@esbuild/android-arm64@0.24.0": { + "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==", + "os": ["android"], + "cpu": ["arm64"] + }, + "@esbuild/android-arm64@0.25.6": { + "integrity": "sha512-hd5zdUarsK6strW+3Wxi5qWws+rJhCCbMiC9QZyzoxfk5uHRIE8T287giQxzVpEvCwuJ9Qjg6bEjcRJcgfLqoA==", + "os": ["android"], + "cpu": ["arm64"] + }, + "@esbuild/android-arm@0.24.0": { + "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==", + "os": ["android"], + "cpu": ["arm"] + }, + "@esbuild/android-arm@0.25.6": { + "integrity": "sha512-S8ToEOVfg++AU/bHwdksHNnyLyVM+eMVAOf6yRKFitnwnbwwPNqKr3srzFRe7nzV69RQKb5DgchIX5pt3L53xg==", + "os": ["android"], + "cpu": ["arm"] + }, + "@esbuild/android-x64@0.24.0": { + "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==", + "os": ["android"], + "cpu": ["x64"] + }, + "@esbuild/android-x64@0.25.6": { + "integrity": "sha512-0Z7KpHSr3VBIO9A/1wcT3NTy7EB4oNC4upJ5ye3R7taCc2GUdeynSLArnon5G8scPwaU866d3H4BCrE5xLW25A==", + "os": ["android"], + "cpu": ["x64"] + }, + "@esbuild/darwin-arm64@0.24.0": { + "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==", + "os": ["darwin"], + "cpu": ["arm64"] + }, + "@esbuild/darwin-arm64@0.25.6": { + "integrity": "sha512-FFCssz3XBavjxcFxKsGy2DYK5VSvJqa6y5HXljKzhRZ87LvEi13brPrf/wdyl/BbpbMKJNOr1Sd0jtW4Ge1pAA==", + "os": ["darwin"], + "cpu": ["arm64"] + }, + "@esbuild/darwin-x64@0.24.0": { + "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==", + "os": ["darwin"], + "cpu": ["x64"] + }, + "@esbuild/darwin-x64@0.25.6": { + "integrity": "sha512-GfXs5kry/TkGM2vKqK2oyiLFygJRqKVhawu3+DOCk7OxLy/6jYkWXhlHwOoTb0WqGnWGAS7sooxbZowy+pK9Yg==", + "os": ["darwin"], + "cpu": ["x64"] + }, + "@esbuild/freebsd-arm64@0.24.0": { + "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==", + "os": ["freebsd"], + "cpu": ["arm64"] + }, + "@esbuild/freebsd-arm64@0.25.6": { + "integrity": "sha512-aoLF2c3OvDn2XDTRvn8hN6DRzVVpDlj2B/F66clWd/FHLiHaG3aVZjxQX2DYphA5y/evbdGvC6Us13tvyt4pWg==", + "os": ["freebsd"], + "cpu": ["arm64"] + }, + "@esbuild/freebsd-x64@0.24.0": { + "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==", + "os": ["freebsd"], + "cpu": ["x64"] + }, + "@esbuild/freebsd-x64@0.25.6": { + "integrity": "sha512-2SkqTjTSo2dYi/jzFbU9Plt1vk0+nNg8YC8rOXXea+iA3hfNJWebKYPs3xnOUf9+ZWhKAaxnQNUf2X9LOpeiMQ==", + "os": ["freebsd"], + "cpu": ["x64"] + }, + "@esbuild/linux-arm64@0.24.0": { + "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==", + "os": ["linux"], + "cpu": ["arm64"] + }, + "@esbuild/linux-arm64@0.25.6": { + "integrity": "sha512-b967hU0gqKd9Drsh/UuAm21Khpoh6mPBSgz8mKRq4P5mVK8bpA+hQzmm/ZwGVULSNBzKdZPQBRT3+WuVavcWsQ==", + "os": ["linux"], + "cpu": ["arm64"] + }, + "@esbuild/linux-arm@0.24.0": { + "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==", + "os": ["linux"], + "cpu": ["arm"] + }, + "@esbuild/linux-arm@0.25.6": { + "integrity": "sha512-SZHQlzvqv4Du5PrKE2faN0qlbsaW/3QQfUUc6yO2EjFcA83xnwm91UbEEVx4ApZ9Z5oG8Bxz4qPE+HFwtVcfyw==", + "os": ["linux"], + "cpu": ["arm"] + }, + "@esbuild/linux-ia32@0.24.0": { + "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==", + "os": ["linux"], + "cpu": ["ia32"] + }, + "@esbuild/linux-ia32@0.25.6": { + "integrity": "sha512-aHWdQ2AAltRkLPOsKdi3xv0mZ8fUGPdlKEjIEhxCPm5yKEThcUjHpWB1idN74lfXGnZ5SULQSgtr5Qos5B0bPw==", + "os": ["linux"], + "cpu": ["ia32"] + }, + "@esbuild/linux-loong64@0.24.0": { + "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==", + "os": ["linux"], + "cpu": ["loong64"] + }, + "@esbuild/linux-loong64@0.25.6": { + "integrity": "sha512-VgKCsHdXRSQ7E1+QXGdRPlQ/e08bN6WMQb27/TMfV+vPjjTImuT9PmLXupRlC90S1JeNNW5lzkAEO/McKeJ2yg==", + "os": ["linux"], + "cpu": ["loong64"] + }, + "@esbuild/linux-mips64el@0.24.0": { + "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==", + "os": ["linux"], + "cpu": ["mips64el"] + }, + "@esbuild/linux-mips64el@0.25.6": { + "integrity": "sha512-WViNlpivRKT9/py3kCmkHnn44GkGXVdXfdc4drNmRl15zVQ2+D2uFwdlGh6IuK5AAnGTo2qPB1Djppj+t78rzw==", + "os": ["linux"], + "cpu": ["mips64el"] + }, + "@esbuild/linux-ppc64@0.24.0": { + "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==", + "os": ["linux"], + "cpu": ["ppc64"] + }, + "@esbuild/linux-ppc64@0.25.6": { + "integrity": "sha512-wyYKZ9NTdmAMb5730I38lBqVu6cKl4ZfYXIs31Baf8aoOtB4xSGi3THmDYt4BTFHk7/EcVixkOV2uZfwU3Q2Jw==", + "os": ["linux"], + "cpu": ["ppc64"] + }, + "@esbuild/linux-riscv64@0.24.0": { + "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==", + "os": ["linux"], + "cpu": ["riscv64"] + }, + "@esbuild/linux-riscv64@0.25.6": { + "integrity": "sha512-KZh7bAGGcrinEj4qzilJ4hqTY3Dg2U82c8bv+e1xqNqZCrCyc+TL9AUEn5WGKDzm3CfC5RODE/qc96OcbIe33w==", + "os": ["linux"], + "cpu": ["riscv64"] + }, + "@esbuild/linux-s390x@0.24.0": { + "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==", + "os": ["linux"], + "cpu": ["s390x"] + }, + "@esbuild/linux-s390x@0.25.6": { + "integrity": "sha512-9N1LsTwAuE9oj6lHMyyAM+ucxGiVnEqUdp4v7IaMmrwb06ZTEVCIs3oPPplVsnjPfyjmxwHxHMF8b6vzUVAUGw==", + "os": ["linux"], + "cpu": ["s390x"] + }, + "@esbuild/linux-x64@0.24.0": { + "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==", + "os": ["linux"], + "cpu": ["x64"] + }, + "@esbuild/linux-x64@0.25.6": { + "integrity": "sha512-A6bJB41b4lKFWRKNrWoP2LHsjVzNiaurf7wyj/XtFNTsnPuxwEBWHLty+ZE0dWBKuSK1fvKgrKaNjBS7qbFKig==", + "os": ["linux"], + "cpu": ["x64"] + }, + "@esbuild/netbsd-arm64@0.25.6": { + "integrity": "sha512-IjA+DcwoVpjEvyxZddDqBY+uJ2Snc6duLpjmkXm/v4xuS3H+3FkLZlDm9ZsAbF9rsfP3zeA0/ArNDORZgrxR/Q==", + "os": ["netbsd"], + "cpu": ["arm64"] + }, + "@esbuild/netbsd-x64@0.24.0": { + "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==", + "os": ["netbsd"], + "cpu": ["x64"] + }, + "@esbuild/netbsd-x64@0.25.6": { + "integrity": "sha512-dUXuZr5WenIDlMHdMkvDc1FAu4xdWixTCRgP7RQLBOkkGgwuuzaGSYcOpW4jFxzpzL1ejb8yF620UxAqnBrR9g==", + "os": ["netbsd"], + "cpu": ["x64"] + }, + "@esbuild/openbsd-arm64@0.24.0": { + "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==", + "os": ["openbsd"], + "cpu": ["arm64"] + }, + "@esbuild/openbsd-arm64@0.25.6": { + "integrity": "sha512-l8ZCvXP0tbTJ3iaqdNf3pjaOSd5ex/e6/omLIQCVBLmHTlfXW3zAxQ4fnDmPLOB1x9xrcSi/xtCWFwCZRIaEwg==", + "os": ["openbsd"], + "cpu": ["arm64"] + }, + "@esbuild/openbsd-x64@0.24.0": { + "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==", + "os": ["openbsd"], + "cpu": ["x64"] + }, + "@esbuild/openbsd-x64@0.25.6": { + "integrity": "sha512-hKrmDa0aOFOr71KQ/19JC7az1P0GWtCN1t2ahYAf4O007DHZt/dW8ym5+CUdJhQ/qkZmI1HAF8KkJbEFtCL7gw==", + "os": ["openbsd"], + "cpu": ["x64"] + }, + "@esbuild/openharmony-arm64@0.25.6": { + "integrity": "sha512-+SqBcAWoB1fYKmpWoQP4pGtx+pUUC//RNYhFdbcSA16617cchuryuhOCRpPsjCblKukAckWsV+aQ3UKT/RMPcA==", + "os": ["openharmony"], + "cpu": ["arm64"] + }, + "@esbuild/sunos-x64@0.24.0": { + "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==", + "os": ["sunos"], + "cpu": ["x64"] + }, + "@esbuild/sunos-x64@0.25.6": { + "integrity": "sha512-dyCGxv1/Br7MiSC42qinGL8KkG4kX0pEsdb0+TKhmJZgCUDBGmyo1/ArCjNGiOLiIAgdbWgmWgib4HoCi5t7kA==", + "os": ["sunos"], + "cpu": ["x64"] + }, + "@esbuild/win32-arm64@0.24.0": { + "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==", + "os": ["win32"], + "cpu": ["arm64"] + }, + "@esbuild/win32-arm64@0.25.6": { + "integrity": "sha512-42QOgcZeZOvXfsCBJF5Afw73t4veOId//XD3i+/9gSkhSV6Gk3VPlWncctI+JcOyERv85FUo7RxuxGy+z8A43Q==", + "os": ["win32"], + "cpu": ["arm64"] + }, + "@esbuild/win32-ia32@0.24.0": { + "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==", + "os": ["win32"], + "cpu": ["ia32"] + }, + "@esbuild/win32-ia32@0.25.6": { + "integrity": "sha512-4AWhgXmDuYN7rJI6ORB+uU9DHLq/erBbuMoAuB4VWJTu5KtCgcKYPynF0YI1VkBNuEfjNlLrFr9KZPJzrtLkrQ==", + "os": ["win32"], + "cpu": ["ia32"] + }, + "@esbuild/win32-x64@0.24.0": { + "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==", + "os": ["win32"], + "cpu": ["x64"] + }, + "@esbuild/win32-x64@0.25.6": { + "integrity": "sha512-NgJPHHbEpLQgDH2MjQu90pzW/5vvXIZ7KOnPyNBm92A6WgZ/7b6fJyUBjoumLqeOQQGqY2QjQxRo97ah4Sj0cA==", + "os": ["win32"], + "cpu": ["x64"] + }, + "@nodelib/fs.scandir@2.1.5": { + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dependencies": [ + "@nodelib/fs.stat", + "run-parallel" + ] + }, + "@nodelib/fs.stat@2.0.5": { + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==" + }, + "@nodelib/fs.walk@1.2.8": { + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dependencies": [ + "@nodelib/fs.scandir", + "fastq" + ] + }, + "@rollup/rollup-android-arm-eabi@4.45.1": { + "integrity": "sha512-NEySIFvMY0ZQO+utJkgoMiCAjMrGvnbDLHvcmlA33UXJpYBCvlBEbMMtV837uCkS+plG2umfhn0T5mMAxGrlRA==", + "os": ["android"], + "cpu": ["arm"] + }, + "@rollup/rollup-android-arm64@4.45.1": { + "integrity": "sha512-ujQ+sMXJkg4LRJaYreaVx7Z/VMgBBd89wGS4qMrdtfUFZ+TSY5Rs9asgjitLwzeIbhwdEhyj29zhst3L1lKsRQ==", + "os": ["android"], + "cpu": ["arm64"] + }, + "@rollup/rollup-darwin-arm64@4.45.1": { + "integrity": "sha512-FSncqHvqTm3lC6Y13xncsdOYfxGSLnP+73k815EfNmpewPs+EyM49haPS105Rh4aF5mJKywk9X0ogzLXZzN9lA==", + "os": ["darwin"], + "cpu": ["arm64"] + }, + "@rollup/rollup-darwin-x64@4.45.1": { + "integrity": "sha512-2/vVn/husP5XI7Fsf/RlhDaQJ7x9zjvC81anIVbr4b/f0xtSmXQTFcGIQ/B1cXIYM6h2nAhJkdMHTnD7OtQ9Og==", + "os": ["darwin"], + "cpu": ["x64"] + }, + "@rollup/rollup-freebsd-arm64@4.45.1": { + "integrity": "sha512-4g1kaDxQItZsrkVTdYQ0bxu4ZIQ32cotoQbmsAnW1jAE4XCMbcBPDirX5fyUzdhVCKgPcrwWuucI8yrVRBw2+g==", + "os": ["freebsd"], + "cpu": ["arm64"] + }, + "@rollup/rollup-freebsd-x64@4.45.1": { + "integrity": "sha512-L/6JsfiL74i3uK1Ti2ZFSNsp5NMiM4/kbbGEcOCps99aZx3g8SJMO1/9Y0n/qKlWZfn6sScf98lEOUe2mBvW9A==", + "os": ["freebsd"], + "cpu": ["x64"] + }, + "@rollup/rollup-linux-arm-gnueabihf@4.45.1": { + "integrity": "sha512-RkdOTu2jK7brlu+ZwjMIZfdV2sSYHK2qR08FUWcIoqJC2eywHbXr0L8T/pONFwkGukQqERDheaGTeedG+rra6Q==", + "os": ["linux"], + "cpu": ["arm"] + }, + "@rollup/rollup-linux-arm-musleabihf@4.45.1": { + "integrity": "sha512-3kJ8pgfBt6CIIr1o+HQA7OZ9mp/zDk3ctekGl9qn/pRBgrRgfwiffaUmqioUGN9hv0OHv2gxmvdKOkARCtRb8Q==", + "os": ["linux"], + "cpu": ["arm"] + }, + "@rollup/rollup-linux-arm64-gnu@4.45.1": { + "integrity": "sha512-k3dOKCfIVixWjG7OXTCOmDfJj3vbdhN0QYEqB+OuGArOChek22hn7Uy5A/gTDNAcCy5v2YcXRJ/Qcnm4/ma1xw==", + "os": ["linux"], + "cpu": ["arm64"] + }, + "@rollup/rollup-linux-arm64-musl@4.45.1": { + "integrity": "sha512-PmI1vxQetnM58ZmDFl9/Uk2lpBBby6B6rF4muJc65uZbxCs0EA7hhKCk2PKlmZKuyVSHAyIw3+/SiuMLxKxWog==", + "os": ["linux"], + "cpu": ["arm64"] + }, + "@rollup/rollup-linux-loongarch64-gnu@4.45.1": { + "integrity": "sha512-9UmI0VzGmNJ28ibHW2GpE2nF0PBQqsyiS4kcJ5vK+wuwGnV5RlqdczVocDSUfGX/Na7/XINRVoUgJyFIgipoRg==", + "os": ["linux"], + "cpu": ["loong64"] + }, + "@rollup/rollup-linux-powerpc64le-gnu@4.45.1": { + "integrity": "sha512-7nR2KY8oEOUTD3pBAxIBBbZr0U7U+R9HDTPNy+5nVVHDXI4ikYniH1oxQz9VoB5PbBU1CZuDGHkLJkd3zLMWsg==", + "os": ["linux"], + "cpu": ["ppc64"] + }, + "@rollup/rollup-linux-riscv64-gnu@4.45.1": { + "integrity": "sha512-nlcl3jgUultKROfZijKjRQLUu9Ma0PeNv/VFHkZiKbXTBQXhpytS8CIj5/NfBeECZtY2FJQubm6ltIxm/ftxpw==", + "os": ["linux"], + "cpu": ["riscv64"] + }, + "@rollup/rollup-linux-riscv64-musl@4.45.1": { + "integrity": "sha512-HJV65KLS51rW0VY6rvZkiieiBnurSzpzore1bMKAhunQiECPuxsROvyeaot/tcK3A3aGnI+qTHqisrpSgQrpgA==", + "os": ["linux"], + "cpu": ["riscv64"] + }, + "@rollup/rollup-linux-s390x-gnu@4.45.1": { + "integrity": "sha512-NITBOCv3Qqc6hhwFt7jLV78VEO/il4YcBzoMGGNxznLgRQf43VQDae0aAzKiBeEPIxnDrACiMgbqjuihx08OOw==", + "os": ["linux"], + "cpu": ["s390x"] + }, + "@rollup/rollup-linux-x64-gnu@4.45.1": { + "integrity": "sha512-+E/lYl6qu1zqgPEnTrs4WysQtvc/Sh4fC2nByfFExqgYrqkKWp1tWIbe+ELhixnenSpBbLXNi6vbEEJ8M7fiHw==", + "os": ["linux"], + "cpu": ["x64"] + }, + "@rollup/rollup-linux-x64-musl@4.45.1": { + "integrity": "sha512-a6WIAp89p3kpNoYStITT9RbTbTnqarU7D8N8F2CV+4Cl9fwCOZraLVuVFvlpsW0SbIiYtEnhCZBPLoNdRkjQFw==", + "os": ["linux"], + "cpu": ["x64"] + }, + "@rollup/rollup-win32-arm64-msvc@4.45.1": { + "integrity": "sha512-T5Bi/NS3fQiJeYdGvRpTAP5P02kqSOpqiopwhj0uaXB6nzs5JVi2XMJb18JUSKhCOX8+UE1UKQufyD6Or48dJg==", + "os": ["win32"], + "cpu": ["arm64"] + }, + "@rollup/rollup-win32-ia32-msvc@4.45.1": { + "integrity": "sha512-lxV2Pako3ujjuUe9jiU3/s7KSrDfH6IgTSQOnDWr9aJ92YsFd7EurmClK0ly/t8dzMkDtd04g60WX6yl0sGfdw==", + "os": ["win32"], + "cpu": ["ia32"] + }, + "@rollup/rollup-win32-x64-msvc@4.45.1": { + "integrity": "sha512-M/fKi4sasCdM8i0aWJjCSFm2qEnYRR8AMLG2kxp6wD13+tMGA4Z1tVAuHkNRjud5SW2EM3naLuK35w9twvf6aA==", + "os": ["win32"], + "cpu": ["x64"] + }, + "@sindresorhus/merge-streams@2.3.0": { + "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==" + }, + "@types/estree@1.0.8": { + "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==" + }, + "ansi-regex@5.0.1": { + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" + }, + "ansi-styles@4.3.0": { + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": [ + "color-convert" + ] + }, + "anymatch@3.1.3": { + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dependencies": [ + "normalize-path", + "picomatch" + ] + }, + "autoprefixer@10.4.20_postcss@8.5.6": { + "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==", + "dependencies": [ + "browserslist", + "caniuse-lite", + "fraction.js", + "normalize-range", + "picocolors", + "postcss", + "postcss-value-parser" + ], + "bin": true + }, + "binary-extensions@2.3.0": { + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==" + }, + "boolbase@1.0.0": { + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" + }, + "braces@3.0.3": { + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dependencies": [ + "fill-range" + ] + }, + "browserslist@4.25.2": { + "integrity": "sha512-0si2SJK3ooGzIawRu61ZdPCO1IncZwS8IzuX73sPZsXW6EQ/w/DAfPyKI8l1ETTCr2MnvqWitmlCUxgdul45jA==", + "dependencies": [ + "caniuse-lite", + "electron-to-chromium", + "node-releases", + "update-browserslist-db" + ], + "bin": true + }, + "caniuse-api@3.0.0": { + "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==", + "dependencies": [ + "browserslist", + "caniuse-lite", + "lodash.memoize", + "lodash.uniq" + ] + }, + "caniuse-lite@1.0.30001735": { + "integrity": "sha512-EV/laoX7Wq2J9TQlyIXRxTJqIw4sxfXS4OYgudGxBYRuTv0q7AM6yMEpU/Vo1I94thg9U6EZ2NfZx9GJq83u7w==" + }, + "chokidar@3.6.0": { + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dependencies": [ + "anymatch", + "braces", + "glob-parent", + "is-binary-path", + "is-glob", + "normalize-path", + "readdirp" + ], + "optionalDependencies": [ + "fsevents" + ] + }, + "cliui@8.0.1": { + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dependencies": [ + "string-width", + "strip-ansi", + "wrap-ansi" + ] + }, + "color-convert@2.0.1": { + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": [ + "color-name" + ] + }, + "color-name@1.1.4": { + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "colord@2.9.3": { + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==" + }, + "commander@11.1.0": { + "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==" + }, + "css-declaration-sorter@7.2.0_postcss@8.5.6": { + "integrity": "sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==", + "dependencies": [ + "postcss" + ] + }, + "css-select@5.2.2": { + "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==", + "dependencies": [ + "boolbase", + "css-what", + "domhandler", + "domutils", + "nth-check" + ] + }, + "css-tree@2.2.1": { + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "dependencies": [ + "mdn-data@2.0.28", + "source-map-js" + ] + }, + "css-tree@3.1.0": { + "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==", + "dependencies": [ + "mdn-data@2.12.2", + "source-map-js" + ] + }, + "css-what@6.2.2": { + "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==" + }, + "cssesc@3.0.0": { + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "bin": true + }, + "cssnano-preset-default@7.0.8_postcss@8.5.6": { + "integrity": "sha512-d+3R2qwrUV3g4LEMOjnndognKirBZISylDZAF/TPeCWVjEwlXS2e4eN4ICkoobRe7pD3H6lltinKVyS1AJhdjQ==", + "dependencies": [ + "browserslist", + "css-declaration-sorter", + "cssnano-utils", + "postcss", + "postcss-calc", + "postcss-colormin", + "postcss-convert-values", + "postcss-discard-comments", + "postcss-discard-duplicates", + "postcss-discard-empty", + "postcss-discard-overridden", + "postcss-merge-longhand", + "postcss-merge-rules", + "postcss-minify-font-values", + "postcss-minify-gradients", + "postcss-minify-params", + "postcss-minify-selectors", + "postcss-normalize-charset", + "postcss-normalize-display-values", + "postcss-normalize-positions", + "postcss-normalize-repeat-style", + "postcss-normalize-string", + "postcss-normalize-timing-functions", + "postcss-normalize-unicode", + "postcss-normalize-url", + "postcss-normalize-whitespace", + "postcss-ordered-values", + "postcss-reduce-initial", + "postcss-reduce-transforms", + "postcss-svgo", + "postcss-unique-selectors" + ] + }, + "cssnano-utils@5.0.1_postcss@8.5.6": { + "integrity": "sha512-ZIP71eQgG9JwjVZsTPSqhc6GHgEr53uJ7tK5///VfyWj6Xp2DBmixWHqJgPno+PqATzn48pL42ww9x5SSGmhZg==", + "dependencies": [ + "postcss" + ] + }, + "cssnano@7.0.6_postcss@8.5.6": { + "integrity": "sha512-54woqx8SCbp8HwvNZYn68ZFAepuouZW4lTwiMVnBErM3VkO7/Sd4oTOt3Zz3bPx3kxQ36aISppyXj2Md4lg8bw==", + "dependencies": [ + "cssnano-preset-default", + "lilconfig", + "postcss" + ] + }, + "csso@5.0.5": { + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "dependencies": [ + "css-tree@2.2.1" + ] + }, + "dependency-graph@0.11.0": { + "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==" + }, + "dom-serializer@2.0.0": { + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dependencies": [ + "domelementtype", + "domhandler", + "entities" + ] + }, + "domelementtype@2.3.0": { + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==" + }, + "domhandler@5.0.3": { + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dependencies": [ + "domelementtype" + ] + }, + "domutils@3.2.2": { + "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", + "dependencies": [ + "dom-serializer", + "domelementtype", + "domhandler" + ] + }, + "electron-to-chromium@1.5.203": { + "integrity": "sha512-uz4i0vLhfm6dLZWbz/iH88KNDV+ivj5+2SA+utpgjKaj9Q0iDLuwk6Idhe9BTxciHudyx6IvTvijhkPvFGUQ0g==" + }, + "emoji-regex@8.0.0": { + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + }, + "entities@4.5.0": { + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==" + }, + "esbuild@0.24.0": { + "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==", + "optionalDependencies": [ + "@esbuild/aix-ppc64@0.24.0", + "@esbuild/android-arm@0.24.0", + "@esbuild/android-arm64@0.24.0", + "@esbuild/android-x64@0.24.0", + "@esbuild/darwin-arm64@0.24.0", + "@esbuild/darwin-x64@0.24.0", + "@esbuild/freebsd-arm64@0.24.0", + "@esbuild/freebsd-x64@0.24.0", + "@esbuild/linux-arm@0.24.0", + "@esbuild/linux-arm64@0.24.0", + "@esbuild/linux-ia32@0.24.0", + "@esbuild/linux-loong64@0.24.0", + "@esbuild/linux-mips64el@0.24.0", + "@esbuild/linux-ppc64@0.24.0", + "@esbuild/linux-riscv64@0.24.0", + "@esbuild/linux-s390x@0.24.0", + "@esbuild/linux-x64@0.24.0", + "@esbuild/netbsd-x64@0.24.0", + "@esbuild/openbsd-arm64@0.24.0", + "@esbuild/openbsd-x64@0.24.0", + "@esbuild/sunos-x64@0.24.0", + "@esbuild/win32-arm64@0.24.0", + "@esbuild/win32-ia32@0.24.0", + "@esbuild/win32-x64@0.24.0" + ], + "scripts": true, + "bin": true + }, + "escalade@3.2.0": { + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==" + }, + "fast-glob@3.3.3": { + "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", + "dependencies": [ + "@nodelib/fs.stat", + "@nodelib/fs.walk", + "glob-parent", + "merge2", + "micromatch" + ] + }, + "fastq@1.19.1": { + "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==", + "dependencies": [ + "reusify" + ] + }, + "fill-range@7.1.1": { + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dependencies": [ + "to-regex-range" + ] + }, + "fraction.js@4.3.7": { + "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==" + }, + "fs-extra@11.3.1": { + "integrity": "sha512-eXvGGwZ5CL17ZSwHWd3bbgk7UUpF6IFHtP57NYYakPvHOs8GDgDe5KJI36jIJzDkJ6eJjuzRA8eBQb6SkKue0g==", + "dependencies": [ + "graceful-fs", + "jsonfile", + "universalify" + ] + }, + "fsevents@2.3.3": { + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "os": ["darwin"], + "scripts": true + }, + "get-caller-file@2.0.5": { + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==" + }, + "get-stdin@9.0.0": { + "integrity": "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==" + }, + "glob-parent@5.1.2": { + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": [ + "is-glob" + ] + }, + "globby@14.1.0": { + "integrity": "sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==", + "dependencies": [ + "@sindresorhus/merge-streams", + "fast-glob", + "ignore", + "path-type", + "slash", + "unicorn-magic" + ] + }, + "graceful-fs@4.2.11": { + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" + }, + "ignore@7.0.5": { + "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==" + }, + "is-binary-path@2.1.0": { + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": [ + "binary-extensions" + ] + }, + "is-extglob@2.1.1": { + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==" + }, + "is-fullwidth-code-point@3.0.0": { + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==" + }, + "is-glob@4.0.3": { + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dependencies": [ + "is-extglob" + ] + }, + "is-number@7.0.0": { + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" + }, + "jsonfile@6.2.0": { + "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==", + "dependencies": [ + "universalify" + ], + "optionalDependencies": [ + "graceful-fs" + ] + }, + "lilconfig@3.1.3": { + "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==" + }, + "lodash.memoize@4.1.2": { + "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==" + }, + "lodash.uniq@4.5.0": { + "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==" + }, + "mdn-data@2.0.28": { + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" + }, + "mdn-data@2.12.2": { + "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==" + }, + "merge2@1.4.1": { + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==" + }, + "micromatch@4.0.8": { + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "dependencies": [ + "braces", + "picomatch" + ] + }, + "nanoid@3.3.11": { + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "bin": true + }, + "node-releases@2.0.19": { + "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==" + }, + "normalize-path@3.0.0": { + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" + }, + "normalize-range@0.1.2": { + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==" + }, + "nth-check@2.1.1": { + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "dependencies": [ + "boolbase" + ] + }, + "path-type@6.0.0": { + "integrity": "sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==" + }, + "picocolors@1.1.1": { + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==" + }, + "picomatch@2.3.1": { + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" + }, + "pify@2.3.0": { + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==" + }, + "postcss-calc@10.1.1_postcss@8.5.6": { + "integrity": "sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==", + "dependencies": [ + "postcss", + "postcss-selector-parser", + "postcss-value-parser" + ] + }, + "postcss-cli@11.0.0_postcss@8.5.6": { + "integrity": "sha512-xMITAI7M0u1yolVcXJ9XTZiO9aO49mcoKQy6pCDFdMh9kGqhzLVpWxeD/32M/QBmkhcGypZFFOLNLmIW4Pg4RA==", + "dependencies": [ + "chokidar", + "dependency-graph", + "fs-extra", + "get-stdin", + "globby", + "picocolors", + "postcss", + "postcss-load-config", + "postcss-reporter", + "pretty-hrtime", + "read-cache", + "slash", + "yargs" + ], + "bin": true + }, + "postcss-colormin@7.0.4_postcss@8.5.6": { + "integrity": "sha512-ziQuVzQZBROpKpfeDwmrG+Vvlr0YWmY/ZAk99XD+mGEBuEojoFekL41NCsdhyNUtZI7DPOoIWIR7vQQK9xwluw==", + "dependencies": [ + "browserslist", + "caniuse-api", + "colord", + "postcss", + "postcss-value-parser" + ] + }, + "postcss-convert-values@7.0.6_postcss@8.5.6": { + "integrity": "sha512-MD/eb39Mr60hvgrqpXsgbiqluawYg/8K4nKsqRsuDX9f+xN1j6awZCUv/5tLH8ak3vYp/EMXwdcnXvfZYiejCQ==", + "dependencies": [ + "browserslist", + "postcss", + "postcss-value-parser" + ] + }, + "postcss-discard-comments@7.0.4_postcss@8.5.6": { + "integrity": "sha512-6tCUoql/ipWwKtVP/xYiFf1U9QgJ0PUvxN7pTcsQ8Ns3Fnwq1pU5D5s1MhT/XySeLq6GXNvn37U46Ded0TckWg==", + "dependencies": [ + "postcss", + "postcss-selector-parser" + ] + }, + "postcss-discard-duplicates@7.0.2_postcss@8.5.6": { + "integrity": "sha512-eTonaQvPZ/3i1ASDHOKkYwAybiM45zFIc7KXils4mQmHLqIswXD9XNOKEVxtTFnsmwYzF66u4LMgSr0abDlh5w==", + "dependencies": [ + "postcss" + ] + }, + "postcss-discard-empty@7.0.1_postcss@8.5.6": { + "integrity": "sha512-cFrJKZvcg/uxB6Ijr4l6qmn3pXQBna9zyrPC+sK0zjbkDUZew+6xDltSF7OeB7rAtzaaMVYSdbod+sZOCWnMOg==", + "dependencies": [ + "postcss" + ] + }, + "postcss-discard-overridden@7.0.1_postcss@8.5.6": { + "integrity": "sha512-7c3MMjjSZ/qYrx3uc1940GSOzN1Iqjtlqe8uoSg+qdVPYyRb0TILSqqmtlSFuE4mTDECwsm397Ya7iXGzfF7lg==", + "dependencies": [ + "postcss" + ] + }, + "postcss-load-config@5.1.0_postcss@8.5.6": { + "integrity": "sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==", + "dependencies": [ + "lilconfig", + "postcss", + "yaml" + ], + "optionalPeers": [ + "postcss" + ] + }, + "postcss-merge-longhand@7.0.5_postcss@8.5.6": { + "integrity": "sha512-Kpu5v4Ys6QI59FxmxtNB/iHUVDn9Y9sYw66D6+SZoIk4QTz1prC4aYkhIESu+ieG1iylod1f8MILMs1Em3mmIw==", + "dependencies": [ + "postcss", + "postcss-value-parser", + "stylehacks" + ] + }, + "postcss-merge-rules@7.0.6_postcss@8.5.6": { + "integrity": "sha512-2jIPT4Tzs8K87tvgCpSukRQ2jjd+hH6Bb8rEEOUDmmhOeTcqDg5fEFK8uKIu+Pvc3//sm3Uu6FRqfyv7YF7+BQ==", + "dependencies": [ + "browserslist", + "caniuse-api", + "cssnano-utils", + "postcss", + "postcss-selector-parser" + ] + }, + "postcss-minify-font-values@7.0.1_postcss@8.5.6": { + "integrity": "sha512-2m1uiuJeTplll+tq4ENOQSzB8LRnSUChBv7oSyFLsJRtUgAAJGP6LLz0/8lkinTgxrmJSPOEhgY1bMXOQ4ZXhQ==", + "dependencies": [ + "postcss", + "postcss-value-parser" + ] + }, + "postcss-minify-gradients@7.0.1_postcss@8.5.6": { + "integrity": "sha512-X9JjaysZJwlqNkJbUDgOclyG3jZEpAMOfof6PUZjPnPrePnPG62pS17CjdM32uT1Uq1jFvNSff9l7kNbmMSL2A==", + "dependencies": [ + "colord", + "cssnano-utils", + "postcss", + "postcss-value-parser" + ] + }, + "postcss-minify-params@7.0.4_postcss@8.5.6": { + "integrity": "sha512-3OqqUddfH8c2e7M35W6zIwv7jssM/3miF9cbCSb1iJiWvtguQjlxZGIHK9JRmc8XAKmE2PFGtHSM7g/VcW97sw==", + "dependencies": [ + "browserslist", + "cssnano-utils", + "postcss", + "postcss-value-parser" + ] + }, + "postcss-minify-selectors@7.0.5_postcss@8.5.6": { + "integrity": "sha512-x2/IvofHcdIrAm9Q+p06ZD1h6FPcQ32WtCRVodJLDR+WMn8EVHI1kvLxZuGKz/9EY5nAmI6lIQIrpo4tBy5+ug==", + "dependencies": [ + "cssesc", + "postcss", + "postcss-selector-parser" + ] + }, + "postcss-normalize-charset@7.0.1_postcss@8.5.6": { + "integrity": "sha512-sn413ofhSQHlZFae//m9FTOfkmiZ+YQXsbosqOWRiVQncU2BA3daX3n0VF3cG6rGLSFVc5Di/yns0dFfh8NFgQ==", + "dependencies": [ + "postcss" + ] + }, + "postcss-normalize-display-values@7.0.1_postcss@8.5.6": { + "integrity": "sha512-E5nnB26XjSYz/mGITm6JgiDpAbVuAkzXwLzRZtts19jHDUBFxZ0BkXAehy0uimrOjYJbocby4FVswA/5noOxrQ==", + "dependencies": [ + "postcss", + "postcss-value-parser" + ] + }, + "postcss-normalize-positions@7.0.1_postcss@8.5.6": { + "integrity": "sha512-pB/SzrIP2l50ZIYu+yQZyMNmnAcwyYb9R1fVWPRxm4zcUFCY2ign7rcntGFuMXDdd9L2pPNUgoODDk91PzRZuQ==", + "dependencies": [ + "postcss", + "postcss-value-parser" + ] + }, + "postcss-normalize-repeat-style@7.0.1_postcss@8.5.6": { + "integrity": "sha512-NsSQJ8zj8TIDiF0ig44Byo3Jk9e4gNt9x2VIlJudnQQ5DhWAHJPF4Tr1ITwyHio2BUi/I6Iv0HRO7beHYOloYQ==", + "dependencies": [ + "postcss", + "postcss-value-parser" + ] + }, + "postcss-normalize-string@7.0.1_postcss@8.5.6": { + "integrity": "sha512-QByrI7hAhsoze992kpbMlJSbZ8FuCEc1OT9EFbZ6HldXNpsdpZr+YXC5di3UEv0+jeZlHbZcoCADgb7a+lPmmQ==", + "dependencies": [ + "postcss", + "postcss-value-parser" + ] + }, + "postcss-normalize-timing-functions@7.0.1_postcss@8.5.6": { + "integrity": "sha512-bHifyuuSNdKKsnNJ0s8fmfLMlvsQwYVxIoUBnowIVl2ZAdrkYQNGVB4RxjfpvkMjipqvbz0u7feBZybkl/6NJg==", + "dependencies": [ + "postcss", + "postcss-value-parser" + ] + }, + "postcss-normalize-unicode@7.0.4_postcss@8.5.6": { + "integrity": "sha512-LvIURTi1sQoZqj8mEIE8R15yvM+OhbR1avynMtI9bUzj5gGKR/gfZFd8O7VMj0QgJaIFzxDwxGl/ASMYAkqO8g==", + "dependencies": [ + "browserslist", + "postcss", + "postcss-value-parser" + ] + }, + "postcss-normalize-url@7.0.1_postcss@8.5.6": { + "integrity": "sha512-sUcD2cWtyK1AOL/82Fwy1aIVm/wwj5SdZkgZ3QiUzSzQQofrbq15jWJ3BA7Z+yVRwamCjJgZJN0I9IS7c6tgeQ==", + "dependencies": [ + "postcss", + "postcss-value-parser" + ] + }, + "postcss-normalize-whitespace@7.0.1_postcss@8.5.6": { + "integrity": "sha512-vsbgFHMFQrJBJKrUFJNZ2pgBeBkC2IvvoHjz1to0/0Xk7sII24T0qFOiJzG6Fu3zJoq/0yI4rKWi7WhApW+EFA==", + "dependencies": [ + "postcss", + "postcss-value-parser" + ] + }, + "postcss-ordered-values@7.0.2_postcss@8.5.6": { + "integrity": "sha512-AMJjt1ECBffF7CEON/Y0rekRLS6KsePU6PRP08UqYW4UGFRnTXNrByUzYK1h8AC7UWTZdQ9O3Oq9kFIhm0SFEw==", + "dependencies": [ + "cssnano-utils", + "postcss", + "postcss-value-parser" + ] + }, + "postcss-pxtorem@6.1.0_postcss@8.5.6": { + "integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==", + "dependencies": [ + "postcss" + ] + }, + "postcss-reduce-initial@7.0.4_postcss@8.5.6": { + "integrity": "sha512-rdIC9IlMBn7zJo6puim58Xd++0HdbvHeHaPgXsimMfG1ijC5A9ULvNLSE0rUKVJOvNMcwewW4Ga21ngyJjY/+Q==", + "dependencies": [ + "browserslist", + "caniuse-api", + "postcss" + ] + }, + "postcss-reduce-transforms@7.0.1_postcss@8.5.6": { + "integrity": "sha512-MhyEbfrm+Mlp/36hvZ9mT9DaO7dbncU0CvWI8V93LRkY6IYlu38OPg3FObnuKTUxJ4qA8HpurdQOo5CyqqO76g==", + "dependencies": [ + "postcss", + "postcss-value-parser" + ] + }, + "postcss-reporter@7.1.0_postcss@8.5.6": { + "integrity": "sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==", + "dependencies": [ + "picocolors", + "postcss", + "thenby" + ] + }, + "postcss-selector-parser@7.1.0": { + "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "dependencies": [ + "cssesc", + "util-deprecate" + ] + }, + "postcss-svgo@7.1.0_postcss@8.5.6": { + "integrity": "sha512-KnAlfmhtoLz6IuU3Sij2ycusNs4jPW+QoFE5kuuUOK8awR6tMxZQrs5Ey3BUz7nFCzT3eqyFgqkyrHiaU2xx3w==", + "dependencies": [ + "postcss", + "postcss-value-parser", + "svgo" + ] + }, + "postcss-unique-selectors@7.0.4_postcss@8.5.6": { + "integrity": "sha512-pmlZjsmEAG7cHd7uK3ZiNSW6otSZ13RHuZ/4cDN/bVglS5EpF2r2oxY99SuOHa8m7AWoBCelTS3JPpzsIs8skQ==", + "dependencies": [ + "postcss", + "postcss-selector-parser" + ] + }, + "postcss-value-parser@4.2.0": { + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, + "postcss@8.5.6": { + "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "dependencies": [ + "nanoid", + "picocolors", + "source-map-js" + ] + }, + "pretty-hrtime@1.0.3": { + "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==" + }, + "queue-microtask@1.2.3": { + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==" + }, + "read-cache@1.0.0": { + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dependencies": [ + "pify" + ] + }, + "readdirp@3.6.0": { + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": [ + "picomatch" + ] + }, + "require-directory@2.1.1": { + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==" + }, + "reusify@1.1.0": { + "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==" + }, + "rollup@4.45.1": { + "integrity": "sha512-4iya7Jb76fVpQyLoiVpzUrsjQ12r3dM7fIVz+4NwoYvZOShknRmiv+iu9CClZml5ZLGb0XMcYLutK6w9tgxHDw==", + "dependencies": [ + "@types/estree" + ], + "optionalDependencies": [ + "@rollup/rollup-android-arm-eabi", + "@rollup/rollup-android-arm64", + "@rollup/rollup-darwin-arm64", + "@rollup/rollup-darwin-x64", + "@rollup/rollup-freebsd-arm64", + "@rollup/rollup-freebsd-x64", + "@rollup/rollup-linux-arm-gnueabihf", + "@rollup/rollup-linux-arm-musleabihf", + "@rollup/rollup-linux-arm64-gnu", + "@rollup/rollup-linux-arm64-musl", + "@rollup/rollup-linux-loongarch64-gnu", + "@rollup/rollup-linux-powerpc64le-gnu", + "@rollup/rollup-linux-riscv64-gnu", + "@rollup/rollup-linux-riscv64-musl", + "@rollup/rollup-linux-s390x-gnu", + "@rollup/rollup-linux-x64-gnu", + "@rollup/rollup-linux-x64-musl", + "@rollup/rollup-win32-arm64-msvc", + "@rollup/rollup-win32-ia32-msvc", + "@rollup/rollup-win32-x64-msvc", + "fsevents" + ], + "bin": true + }, + "run-parallel@1.2.0": { + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dependencies": [ + "queue-microtask" + ] + }, + "sax@1.4.1": { + "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==" + }, + "slash@5.1.0": { + "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==" + }, + "source-map-js@1.2.1": { + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==" + }, + "string-width@4.2.3": { + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dependencies": [ + "emoji-regex", + "is-fullwidth-code-point", + "strip-ansi" + ] + }, + "strip-ansi@6.0.1": { + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dependencies": [ + "ansi-regex" + ] + }, + "stylehacks@7.0.6_postcss@8.5.6": { + "integrity": "sha512-iitguKivmsueOmTO0wmxURXBP8uqOO+zikLGZ7Mm9e/94R4w5T999Js2taS/KBOnQ/wdC3jN3vNSrkGDrlnqQg==", + "dependencies": [ + "browserslist", + "postcss", + "postcss-selector-parser" + ] + }, + "svgo@4.0.0": { + "integrity": "sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==", + "dependencies": [ + "commander", + "css-select", + "css-tree@3.1.0", + "css-what", + "csso", + "picocolors", + "sax" + ], + "bin": true + }, + "thenby@1.3.4": { + "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==" + }, + "to-regex-range@5.0.1": { + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dependencies": [ + "is-number" + ] + }, + "unicorn-magic@0.3.0": { + "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==" + }, + "universalify@2.0.1": { + "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==" + }, + "update-browserslist-db@1.1.3_browserslist@4.25.2": { + "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==", + "dependencies": [ + "browserslist", + "escalade", + "picocolors" + ], + "bin": true + }, + "util-deprecate@1.0.2": { + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" + }, + "vite@6.0.5": { + "integrity": "sha512-akD5IAH/ID5imgue2DYhzsEwCi0/4VKY31uhMLEYJwPP4TiUp8pL5PIK+Wo7H8qT8JY9i+pVfPydcFPYD1EL7g==", + "dependencies": [ + "esbuild", + "postcss", + "rollup" + ], + "optionalDependencies": [ + "fsevents" + ], + "bin": true + }, + "wrap-ansi@7.0.0": { + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dependencies": [ + "ansi-styles", + "string-width", + "strip-ansi" + ] + }, + "y18n@5.0.8": { + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==" + }, + "yaml@2.8.0": { + "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==", + "bin": true + }, + "yargs-parser@21.1.1": { + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==" + }, + "yargs@17.7.2": { + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dependencies": [ + "cliui", + "escalade", + "get-caller-file", + "require-directory", + "string-width", + "y18n", + "yargs-parser" + ] + } + }, + "workspace": { + "packageJson": { + "dependencies": [ + "npm:autoprefixer@10.4.20", + "npm:cssnano@7.0.6", + "npm:postcss-cli@11.0.0", + "npm:postcss-pxtorem@6.1.0", + "npm:vite@6.0.5" + ] + } + } +} @@ -3,9 +3,9 @@ <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <link rel="stylesheet" href="/css/cs16.min.css" /> - <link rel="stylesheet" href="/src/index.css" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <link rel="stylesheet" href="./css/cs16.min.css" /> + <link rel="stylesheet" href="./src/index.css" /> + <link rel="icon" type="image/x-icon" href="./favicon.ico" /> <meta name="title" content="cs16.css" /> <meta name="description" @@ -27,159 +27,206 @@ content="CSS library based on Counter Strike 1.6 UI." /> - <title>cs16.css</title> + <title>cs16-defaults.css</title> </head> - <body> + <body class="cs"> <header> <div class="top"> - <h1>cs16.css</h1> + <h1>cs16-defaults.css</h1> <div class="links"> <a - href="https://github.com/ekmas/cs16.css" + href="https://git.estrogen.zone/css16-defaults.css.git/about" target="_blank" - class="cs-btn gh" + class="cs-btn tree" ></a> - <a + <!-- <a href="https://x.com/samuelbreznjak" target="_blank" class="cs-btn x" - ></a> + ></a> --> </div> </div> - <p>CSS library based on Counter Strike 1.6 UI.</p> + <p> + CSS library based on + <a + href="https://cs16.samke.me/" + target="_blank" + rel="noopener noreferrer" + class="link" + >cs16.css</a + >, adapted to modify default styles of elements. Attempts to "just work" + everywhere. Abuses + <a + href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has" + target="_blank" + rel="noopener noreferrer" + class="link" + >:has()</a + > + and + <a + href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not" + target="_blank" + rel="noopener noreferrer" + class="link" + >:not()</a + >. + </p> </header> <div style="margin-bottom: 10px" class="installation"> <h2>Installation</h2> <p> - You can install cs16.css simply by pasting this to your html `head` tag: + You can install cs16.css simply by pasting this to your html `head` tag + and adding <code>class="cs"</code> to your body (or wherever else you + wish to enable "cs1.6 mode"): </p> <div class="code-block"> <div class="inner"> - <button class="cs-btn">Copy</button> + <button>Copy</button> - <pre><code id="code-block"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/css/cs16.min.css"></code></pre> + <pre><code id="code-block"><link rel="stylesheet" type="text/css" href="https://git.estrogen.zone/css16-defaults.css.git/plain/css/cs16.min.css"></code></pre> </div> </div> </div> - <main> + <main style="display: flex; flex-direction: column; gap: 1rem"> <div> <h2>Button</h2> - <button class="cs-btn">Button</button> - <button disabled class="cs-btn">Disabled</button> + <button>Button</button> + <button disabled>Disabled</button> <div class="code-block"> - <button class="cs-btn toggle-vision">Show code</button> + <button class="toggle-vision">Show code</button> <div class="inner hidden"> - <button class="cs-btn">Copy</button> + <button>Copy</button> - <pre><code id="code-block"><button class="cs-btn">Button</button> -<button disabled class="cs-btn">Disabled</button></code></pre> + <pre><code id="code-block"><button>Button</button> +<button disabled>Disabled</button></code></pre> </div> </div> </div> <div> <h2>Hr</h2> - <hr class="cs-hr" /> + <hr /> <div class="code-block"> - <button class="cs-btn toggle-vision">Show code</button> + <button class="toggle-vision">Show code</button> <div class="inner hidden"> - <button class="cs-btn">Copy</button> + <button>Copy</button> - <pre><code id="code-block"><hr class="cs-hr" /></code></pre> + <pre><code id="code-block"><hr /></code></pre> </div> </div> </div> <div> <h2>Checkbox</h2> - <div class="cs-checkbox"> + <div style="position: relative"> <input id="checkbox" type="checkbox" /> - <label class="cs-checkbox__label" for="checkbox">Checkbox</label> + <label for="checkbox">Checkbox</label> </div> + <label> + <input id="checkbox" type="checkbox" /> + Checkbox 2 + </label> <div class="code-block"> - <button class="cs-btn toggle-vision">Show code</button> + <button class="toggle-vision">Show code</button> <div class="inner hidden"> - <button class="cs-btn">Copy</button> - - <pre><code id="code-block"><div class="cs-checkbox"> - <input id="checkbox" type="checkbox" /> - <label class="cs-checkbox__label" for="checkbox">Checkbox</label> -</div></code></pre> + <button>Copy</button> + + <pre><code id="code-block"><div style="position: relative"> + <input id="checkbox" type="checkbox" /> + <label for="checkbox">Checkbox</label> +</div> +<label> + <input id="checkbox" type="checkbox" /> + Checkbox 2 +</label></code></pre> </div> </div> </div> <div> <h2>Input</h2> - <input class="cs-input" id="input" type="input" /> - <label class="cs-input__label" for="input">First name</label> + <label for="input"> + <input id="input" type="input" /> + First name + </label> <br /> <br /> - <input type="text" value="John Doe" class="cs-input" /> - <input type="text" disabled value="disabled" class="cs-input" /> + <input type="text" value="John Doe" /> + <input type="text" disabled value="disabled" /> <div class="code-block"> - <button class="cs-btn toggle-vision">Show code</button> + <button class="toggle-vision">Show code</button> <div class="inner hidden"> - <button class="cs-btn">Copy</button> + <button>Copy</button> - <pre><code id="code-block"><input class="cs-input" id="input" type="input" /> -<label class="cs-input__label" for="input">First name</label> + <pre><code id="code-block"><label for="input"> + <input id="input" type="input" /> + First name +</label> -<br /> -<br /> +<br /> +<br /> -<input type="text" value="John Doe" class="cs-input" /> -<input type="text" disabled value="disabled" class="cs-input" /></code></pre> +<input type="text" value="John Doe" /> +<input type="text" disabled value="disabled" /></code></pre> </div> </div> </div> <div> <h2>Select</h2> - <label class="cs-select__label" for="cars">Choose a car:</label> - <select class="cs-select" name="cars" id="cars"> - <option value="volvo">Volvo</option> - <option value="saab">Saab</option> - <option value="opel">Opel</option> - <option value="audi">Audi</option> - </select> + <label> + Choose a train: + <select name="trains"> + <option value="smile">Stadler SMILE</option> + <option value="desiro">Siemens Desiro</option> + <option value="twindexx-swiss-express"> + Bombadier TWINDEXX Swiss Express + </option> + <option value="etr-610">Alstom ETR 610</option> + </select> + </label> <div class="code-block"> - <button class="cs-btn toggle-vision">Show code</button> + <button class="toggle-vision">Show code</button> <div class="inner hidden"> - <button class="cs-btn">Copy</button> - - <pre><code id="code-block"><label class="cs-select__label" for="cars">Choose a car:</label> -<select class="cs-select" name="cars" id="cars"> - <option value="volvo">Volvo</option> - <option value="saab">Saab</option> - <option value="opel">Opel</option> - <option value="audi">Audi</option> -</select></code></pre> + <button>Copy</button> + + <pre><code id="code-block"><label> + Choose a train: + <select name="trains"> + <option value="smile">Stadler SMILE</option> + <option value="desiro">Siemens Desiro</option> + <option value="twindexx-swiss-express"> + Bombadier TWINDEXX Swiss Express + </option> + <option value="etr-610">Alstom ETR 610</option> + </select> +</label></code></pre> </div> </div> </div> <div> <h2>Radio Group</h2> - <fieldset class="cs-fieldset"> + <fieldset> <legend>What is your favorite wild animal?</legend> <div class="radio-wrapper"> <input type="radio" name="animal" id="elephant" /> @@ -200,14 +247,14 @@ </fieldset> <div class="code-block"> - <button class="cs-btn toggle-vision">Show code</button> + <button class="toggle-vision">Show code</button> <div class="inner hidden"> - <button class="cs-btn">Copy</button> + <button>Copy</button> <pre><code id="code-block"><fieldset class="cs-fieldset"> <legend>What is your favorite wild animal?</legend> - <div class="radio-wrapper"> + <div> <input type="radio" name="animal" id="elephant" /> <label for="elephant">Elephant</label> </div> @@ -220,6 +267,7 @@ <label for="cheetah">Cheetah</label> </div> <div class="radio-wrapper"> + referrerpolicy="noreferrer noopener" <input type="radio" name="animal" id="giraffe" /> <label for="giraffe">Giraffe</label> </div> @@ -241,10 +289,10 @@ </div> <div class="code-block"> - <button class="cs-btn toggle-vision">Show code</button> + <button class="toggle-vision">Show code</button> <div class="inner hidden"> - <button class="cs-btn">Copy</button> + <button>Copy</button> <pre><code id="code-block"><div class="cs-slider"> <div class="value"> @@ -264,19 +312,18 @@ <section> <button type="button" - class="cs-btn" - onclick="document.querySelector('.cs-dialog').showModal();" + onclick="document.querySelector('dialog').showModal();" > Open dialog </button> - <dialog class="cs-dialog"> + <dialog> <form method="dialog"> <div class="heading"> <div class="wrapper"> <div class="icon"></div> <p class="text">Options</p> </div> - <button class="cs-btn close"></button> + <button class="close"></button> </div> <div class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. @@ -288,36 +335,35 @@ saepe, sed repudiandae! </div> <menu class="footer-btns"> - <button class="cs-btn">OK</button> - <button class="cs-btn">Cancel</button> - <button class="cs-btn">Apply</button> + <button>OK</button> + <button>Cancel</button> + <button>Apply</button> </menu> </form> </dialog> </section> <div class="code-block"> - <button class="cs-btn toggle-vision">Show code</button> + <button class="toggle-vision">Show code</button> <div class="inner hidden"> - <button class="cs-btn">Copy</button> + <button>Copy</button> <pre><code id="code-block"><section> <button type="button" - class="cs-btn" - onclick="document.querySelector('.cs-dialog').showModal();" + onclick="document.querySelector('dialog').showModal();" > Open dialog </button> - <dialog class="cs-dialog"> + <dialog> <form method="dialog"> <div class="heading"> <div class="wrapper"> <div class="icon"></div> <p class="text">Options</p> </div> - <button class="cs-btn close"></button> + <button class="close"></button> </div> <div class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. @@ -329,9 +375,9 @@ saepe, sed repudiandae! </div> <menu class="footer-btns"> - <button class="cs-btn">OK</button> - <button class="cs-btn">Cancel</button> - <button class="cs-btn">Apply</button> + <buttonOK</button> + <buttonCancel</button> + <buttonApply</button> </menu> </form> </dialog> @@ -373,10 +419,10 @@ </div> <div class="code-block"> - <button class="cs-btn toggle-vision">Show code</button> + <button class="toggle-vision">Show code</button> <div class="inner hidden"> - <button class="cs-btn">Copy</button> + <button>Copy</button> <pre><code id="code-block"><div class="cs-tooltip"> Right @@ -416,16 +462,18 @@ <div class="cs-progress-bar"> <div style="width: 50%" class="bars"></div> </div> + <progress value="1" min="0" max="3"></progress> <div class="code-block"> - <button class="cs-btn toggle-vision">Show code</button> + <button class="toggle-vision">Show code</button> <div class="inner hidden"> - <button class="cs-btn">Copy</button> + <button>Copy</button> <pre><code id="code-block"><div class="cs-progress-bar"> <div style="width: 50%" class="bars"></div> -</div></code></pre> +</div> +<progress value="1" min="0" max="3"></progress></code></pre> </div> </div> </div> @@ -473,10 +521,10 @@ </div> <div class="code-block"> - <button class="cs-btn toggle-vision">Show code</button> + <button class="toggle-vision">Show code</button> <div class="inner hidden"> - <button class="cs-btn">Copy</button> + <button>Copy</button> <pre><code id="code-block"><div class="cs-tabs"> <input @@ -524,7 +572,13 @@ <footer> Released under MIT License. Made by - <a target="_blank" href="http://samke.me">Samuel</a>. + <a target="_blank" href="https://samke.me">Samuel</a>. Modified by + <a + href="https://mem.estrogen.zone" + target="_blank" + rel="noopener noreferrer" + >memdmp</a + >. </footer> <script type="module" src="./src/main.js"></script> diff --git a/package.json b/package.json index aeaa55c..0ec263b 100644 --- a/package.json +++ b/package.json @@ -7,18 +7,18 @@ "dev": "vite", "build": "vite build", "preview": "vite preview", - "build:css": "pnpm run build:autoprefix && pnpm run build:cleancss", + "build:css": "deno task build:autoprefix && deno task build:cleancss", "build:autoprefix": "postcss --use autoprefixer postcss-pxtorem --no-map --output css/cs16.css src/cs16.css", "build:cleancss": "postcss --use cssnano --no-map -o css/cs16.min.css src/cs16.css" }, "devDependencies": { - "vite": "^6.0.5" + "vite": "6.0.5" }, "packageManager": "pnpm@9.15.3+sha512.1f79bc245a66eb0b07c5d4d83131240774642caaa86ef7d0434ab47c0d16f66b04e21e0c086eb61e62c77efc4d7f7ec071afad3796af64892fae66509173893a", "dependencies": { - "autoprefixer": "^10.4.20", - "cssnano": "^7.0.6", - "postcss-cli": "^11.0.0", - "postcss-pxtorem": "^6.1.0" + "autoprefixer": "10.4.20", + "cssnano": "7.0.6", + "postcss-cli": "11.0.0", + "postcss-pxtorem": "6.1.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1308779..739a355 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,20 +9,20 @@ importers: .: dependencies: autoprefixer: - specifier: ^10.4.20 + specifier: 10.4.20 version: 10.4.20(postcss@8.5.1) cssnano: - specifier: ^7.0.6 + specifier: 7.0.6 version: 7.0.6(postcss@8.5.1) postcss-cli: - specifier: ^11.0.0 + specifier: 11.0.0 version: 11.0.0(postcss@8.5.1) postcss-pxtorem: - specifier: ^6.1.0 + specifier: 6.1.0 version: 6.1.0(postcss@8.5.1) devDependencies: vite: - specifier: ^6.0.5 + specifier: 6.0.5 version: 6.0.11(yaml@2.7.0) packages: diff --git a/src/cs16.css b/src/cs16.css index a290027..8b3800b 100644 --- a/src/cs16.css +++ b/src/cs16.css @@ -22,175 +22,181 @@ --scrollbar-track: #5a6a50; } -*, -*::before, -*::after { - box-sizing: border-box; -} - -* { - margin: 0; - padding: 0; -} - -input, -button, -textarea, -select { - font: inherit; -} - -p, -h1, -h2, -h3, -h4, -h5, -h6 { - overflow-wrap: break-word; - font-weight: 400; -} - @font-face { font-family: ArialPixel; - src: url("https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/ArialPixel.ttf") - format("truetype"); + src: url('https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/ArialPixel.ttf') + format('truetype'); font-weight: 400; font-style: normal; } -body { - font-weight: 400; - line-height: 1.5; - background-color: var(--bg); - color: var(--text); - font-family: ArialPixel, system-ui, sans-serif; -} - -/* Scrollbars */ +.cs { + & { + font-weight: 400; + line-height: 1.5; + background-color: var(--bg); + color: var(--text); + font-family: ArialPixel, system-ui, sans-serif; + } -::-webkit-scrollbar { - width: 18px; -} + *, + *::before, + *::after { + box-sizing: border-box; + } -::-webkit-scrollbar-track { - background-color: var(--scrollbar-track); - width: 18px; - border: 1px solid var(--border-dark); - border-left: 0; -} + * { + margin: 0; + padding: 0; + } -::-webkit-scrollbar-thumb { - width: 17px; - background-color: var(--bg); - border: 1px solid; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); -} + input, + button, + textarea, + select { + font: inherit; + } -::-webkit-scrollbar-corner { - background-color: var(--scrollbar-track); -} + p, + h1, + h2, + h3, + h4, + h5, + h6 { + overflow-wrap: break-word; + font-weight: 400; + } -::-webkit-scrollbar-button:vertical:start:decrement, -::-webkit-scrollbar-button:vertical:end:increment { - display: block; -} + /* Scrollbars */ -::-webkit-scrollbar-button:vertical:start:increment, -::-webkit-scrollbar-button:vertical:start:decrement, -::-webkit-scrollbar-button:vertical:end:increment, -::-webkit-scrollbar-button:vertical:end:decrement { - background-repeat: no-repeat; - height: 17px; -} + ::-webkit-scrollbar { + width: 18px; + } -::-webkit-scrollbar-button:vertical:start { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M6,8 7,8 7,9 6,9 M7,9 8,9 8,10 7,10 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M8,6 9,6 9,7 8,7 M9,9 10,9 10,10 9,10 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,9 11,9 11,10 10,10 M10,8 11,8 11,9 10,9 M11,9 12,9 12,10 11,10 ' fill='%23a0aa95'/%3E%3C/svg%3E"); -} + ::-webkit-scrollbar-track { + background-color: var(--scrollbar-track); + width: 18px; + border: 1px solid var(--border-dark); + border-left: 0; + } -::-webkit-scrollbar-button:vertical:start, -::-webkit-scrollbar-button:vertical:end { - border: 1px solid; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); -} + ::-webkit-scrollbar-thumb { + width: 17px; + background-color: var(--bg); + border: 1px solid; + border-color: var(--border-light) var(--border-dark) var(--border-dark) + var(--border-light); + } -::-webkit-scrollbar-button:vertical:start:active, -::-webkit-scrollbar-button:vertical:end:active { - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); -} + ::-webkit-scrollbar-corner { + background-color: var(--scrollbar-track); + } -::-webkit-scrollbar-button:vertical:start:active, -::-webkit-scrollbar-button:vertical:start:hover { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M10,9 11,9 11,10 10,10 M11,9 12,9 12,10 11,10 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M9,8 10,8 10,9 9,9 M10,8 11,8 11,9 10,9 M7,7 8,7 8,8 7,8 M8,7 9,7 9,8 8,8 M9,7 10,7 10,8 9,8 M8,6 9,6 9,7 8,7 ' fill='%23ffffff'/%3E%3C/svg%3E"); -} -::-webkit-scrollbar-button:vertical:end { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,7 11,7 11,8 10,8 ' fill='%23a0aa95'/%3E%3C/svg%3E"); -} -::-webkit-scrollbar-button:vertical:end:active { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M8,6 9,6 9,7 8,7 M7,6 8,6 8,7 7,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M8,7 9,7 9,8 8,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M9,8 10,8 10,9 9,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 ' fill='%23ffffff'/%3E%3C/svg%3E"); -} + ::-webkit-scrollbar-button:vertical:start:decrement, + ::-webkit-scrollbar-button:vertical:end:increment { + display: block; + } -/* Buttons */ - -.cs-btn { - background-color: var(--bg); - color: #fff; - padding: 4px 5px 3px; - font-size: 16px; - line-height: 15px; - border: 1px solid; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); - user-select: none; - - &.close { - padding: 0px; - width: 18px; - height: 18px; - background: no-repeat center center; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3,3 4,3 4,4 3,4 M4,3 5,3 5,4 4,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,4 6,4 6,5 5,5 M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,5 7,5 7,6 6,6 M6,7 7,7 7,8 6,8 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M8,5 9,5 9,6 8,6 M9,5 10,5 10,6 9,6 M9,6 10,6 10,7 9,7 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,3 11,3 11,4 10,4 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M10,9 11,9 11,10 10,10 M10,10 11,10 11,11 10,11 M9,10 10,10 10,11 9,11 M11,10 12,10 12,11 11,11 M11,11 12,11 12,12 11,12 M10,11 11,11 11,12 10,12 M5,8 6,8 6,9 5,9 M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M3,10 4,10 4,11 3,11 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 ' fill='%238c9284'/%3E%3C/svg%3E"); + ::-webkit-scrollbar-button:vertical:start:increment, + ::-webkit-scrollbar-button:vertical:start:decrement, + ::-webkit-scrollbar-button:vertical:end:increment, + ::-webkit-scrollbar-button:vertical:end:decrement { + background-repeat: no-repeat; + height: 17px; } - &:focus-visible { - padding: 3px 4px 2px; - outline: 1px solid var(--outline); + ::-webkit-scrollbar-button:vertical:start { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M6,8 7,8 7,9 6,9 M7,9 8,9 8,10 7,10 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M8,6 9,6 9,7 8,7 M9,9 10,9 10,10 9,10 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,9 11,9 11,10 10,10 M10,8 11,8 11,9 10,9 M11,9 12,9 12,10 11,10 ' fill='%23a0aa95'/%3E%3C/svg%3E"); + } - &.close { - padding: 0; - outline: 0; - } + ::-webkit-scrollbar-button:vertical:start, + ::-webkit-scrollbar-button:vertical:end { + border: 1px solid; + border-color: var(--border-light) var(--border-dark) var(--border-dark) + var(--border-light); } - &:active { + ::-webkit-scrollbar-button:vertical:start:active, + ::-webkit-scrollbar-button:vertical:end:active { border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark); } - &:disabled { - color: var(--disabled-text); - text-shadow: var(--disabled-text-shadow) 1px 1px; - pointer-events: none; + ::-webkit-scrollbar-button:vertical:start:active, + ::-webkit-scrollbar-button:vertical:start:hover { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M10,9 11,9 11,10 10,10 M11,9 12,9 12,10 11,10 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M9,8 10,8 10,9 9,9 M10,8 11,8 11,9 10,9 M7,7 8,7 8,8 7,8 M8,7 9,7 9,8 8,8 M9,7 10,7 10,8 9,8 M8,6 9,6 9,7 8,7 ' fill='%23ffffff'/%3E%3C/svg%3E"); + } + ::-webkit-scrollbar-button:vertical:end { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,7 11,7 11,8 10,8 ' fill='%23a0aa95'/%3E%3C/svg%3E"); + } + ::-webkit-scrollbar-button:vertical:end:active { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M8,6 9,6 9,7 8,7 M7,6 8,6 8,7 7,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M8,7 9,7 9,8 8,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M9,8 10,8 10,9 9,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 ' fill='%23ffffff'/%3E%3C/svg%3E"); } -} -/* Hr */ + /* Buttons */ -.cs-hr { - border-left: 0; - border-right: 0; - border-top-color: var(--border-dark); - border-bottom-color: var(--border-light); -} + .cs-btn, + button:not(.default-btn), + input[type='submit']:not(.default-btn) { + background-color: var(--bg); + color: #fff; + padding: 4px 5px 3px; + font-size: 16px; + line-height: 15px; + border: 1px solid; + border-color: var(--border-light) var(--border-dark) var(--border-dark) + var(--border-light); + user-select: none; + + &.close { + padding: 0px; + width: 18px; + height: 18px; + background: no-repeat center center; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3,3 4,3 4,4 3,4 M4,3 5,3 5,4 4,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,4 6,4 6,5 5,5 M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,5 7,5 7,6 6,6 M6,7 7,7 7,8 6,8 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M8,5 9,5 9,6 8,6 M9,5 10,5 10,6 9,6 M9,6 10,6 10,7 9,7 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,3 11,3 11,4 10,4 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M10,9 11,9 11,10 10,10 M10,10 11,10 11,11 10,11 M9,10 10,10 10,11 9,11 M11,10 12,10 12,11 11,11 M11,11 12,11 12,12 11,12 M10,11 11,11 11,12 10,12 M5,8 6,8 6,9 5,9 M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M3,10 4,10 4,11 3,11 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 ' fill='%238c9284'/%3E%3C/svg%3E"); + } -/* Checkbox */ + &:focus-visible { + padding: 3px 4px 2px; + outline: 1px solid var(--outline); -.cs-checkbox { - position: relative; + &.close { + padding: 0; + outline: 0; + } + } - input { + &:active { + border-color: var(--border-dark) var(--border-light) var(--border-light) + var(--border-dark); + } + + &:disabled { + color: var(--disabled-text); + text-shadow: var(--disabled-text-shadow) 1px 1px; + pointer-events: none; + } + } + + /* Hr */ + + hr:not(.default-hr) { + border-left: 0; + border-right: 0; + border-top-color: var(--border-dark); + border-bottom-color: var(--border-light); + } + + /* Checkbox */ + + .cs-checkbox:not(input) { + position: relative; + } + + input[type='checkbox']:not(.default-checkbox), + input.cs-checkbox, + .cs-checkbox input { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; @@ -203,29 +209,38 @@ body { outline: none; } - &:focus-visible + .cs-checkbox__label { + &:focus-visible + .cs-checkbox__label, + &:focus-visible + label { outline: dotted 2px var(--outline); outline-offset: 3px; } - &:checked + .cs-checkbox__label:before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2,6 3,6 3,7 2,7 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M2,4 3,4 3,5 2,5 M3,6 4,6 4,7 3,7 M3,7 4,7 4,8 3,8 M4,6 5,6 5,7 4,7 M4,7 5,7 5,8 4,8 M4,8 5,8 5,9 4,9 M5,7 6,7 6,8 5,8 M5,6 6,6 6,7 5,7 M5,5 6,5 6,6 5,6 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M6,6 7,6 7,7 6,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M8,2 9,2 9,3 8,3 ' fill='%23c4b550'/%3E%3C/svg%3E"); - } - - &:checked + .cs-checkbox__label { + &:checked + .cs-checkbox__label, + &:checked + label { color: var(--accent); + &::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2,6 3,6 3,7 2,7 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M2,4 3,4 3,5 2,5 M3,6 4,6 4,7 3,7 M3,7 4,7 4,8 3,8 M4,6 5,6 5,7 4,7 M4,7 5,7 5,8 4,8 M4,8 5,8 5,9 4,9 M5,7 6,7 6,8 5,8 M5,6 6,6 6,7 5,7 M5,5 6,5 6,6 5,6 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M6,6 7,6 7,7 6,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M8,2 9,2 9,3 8,3 ' fill='%23c4b550'/%3E%3C/svg%3E"); + } } } - .cs-checkbox__label { + .cs-checkbox__label, + input[type='checkbox']:not(.default-checkbox) + label, + input.cs-checkbox + label, + .cs-checkbox input + label, + label:not(.default-checkbox):has( + input[type='checkbox']:not(.default-checkbox) + ), + label:has(.cs-checkbox), + label.cs-checkbox:has(input) { cursor: pointer; display: inline-block; user-select: none; color: var(--secondary--text); line-height: 15px; - &:before { - content: ""; + &::before { + content: ''; display: inline-block; vertical-align: middle; width: 12px; @@ -241,417 +256,530 @@ body { color: white; } } -} + label:not(.default-checkbox):has( + input[type='checkbox']:not(.default-checkbox) + ), + label:has(.cs-checkbox), + label.cs-checkbox:has(input) { + position: relative; + &:has(input:not(.default-checkbox):focus-visible), + &:has(.cs-checkbox:focus-visible) { + outline: dotted 2px var(--outline); + outline-offset: 3px; + } + &::before { + margin-right: 3px; + } + &:has(input:not(.default-checkbox):checked), + &:has(.cs-checkbox:checked) { + color: var(--accent); + &::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2,6 3,6 3,7 2,7 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M2,4 3,4 3,5 2,5 M3,6 4,6 4,7 3,7 M3,7 4,7 4,8 3,8 M4,6 5,6 5,7 4,7 M4,7 5,7 5,8 4,8 M4,8 5,8 5,9 4,9 M5,7 6,7 6,8 5,8 M5,6 6,6 6,7 5,7 M5,5 6,5 6,6 5,6 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M6,6 7,6 7,7 6,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M8,2 9,2 9,3 8,3 ' fill='%23c4b550'/%3E%3C/svg%3E"); + } + } + } -/* Input */ + /* Input */ + + .cs-input, + input:is( + [type='text'], + [type='number'], + [type='email'], + [type='date'], + [type='datetime-local'], + [type='month'], + [type='password'], + [type='search'], + [type='tel'], + [type='text'], + [type='url'], + [type='week'], + [type='datetime'], + [type='input'] + ):not(.default-input) { + outline: 0; + border: 1px solid; + padding: 3px 2px 2px; + font-size: 1rem; + line-height: 1.0625rem; + background-color: var(--secondary-bg); + border-color: var(--border-dark) var(--border-light) var(--border-light) + var(--border-dark); + color: var(--secondary--text); -.cs-input { - outline: 0; - border: 1px solid; - padding: 3px 2px 2px; - font-size: 16px; - line-height: 17px; - background-color: var(--secondary-bg); - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); - color: var(--secondary--text); + &:focus + .cs-input__label, + &:focus + label { + color: var(--accent); + } - &:focus + .cs-input__label { - color: var(--accent); - } + &::-moz-selection { + background-color: var(--secondary-accent); + color: white; + } - &::selection { - background-color: var(--secondary-accent); - color: white; - } + &::selection { + background-color: var(--secondary-accent); + color: white; + } - &:disabled { - background-color: var(--bg); - pointer-events: none; - color: var(--text-3); - } + &:disabled { + background-color: var(--bg); + pointer-events: none; + color: var(--text-3); + } - &:disabled + .cs-input__label { - color: var(--disabled-text); - text-shadow: var(--disabled-text-shadow) 1px 1px; - pointer-events: none; + &:disabled + .cs-input__label, + &:disabled + label { + color: var(--disabled-text); + text-shadow: var(--disabled-text-shadow) 1px 1px; + pointer-events: none; + } } -} -.cs-input__label { - color: var(--secondary--text); - user-select: none; -} - -/* Select */ - -.cs-select { - outline: 0; - background-color: var(--secondary-bg); - min-width: 150px; - appearance: none; - border-radius: 0; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M3,3 4,3 4,4 3,4 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23a0aa95'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 6px top 50%; - background-size: 7px auto; - line-height: 15px; - padding: 5px 3px; - color: var(--secondary--text); - border: 1px solid; - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); - user-select: none; - - &:hover, - &:focus-within { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,3 4,3 4,4 3,4 M3,2 4,2 4,3 3,3 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23ffffff'/%3E%3C/svg%3E"); - } - - option { - background-color: var(--bg); - color: var(--text-3); + .cs-input__label, + label:has( + input:is( + [type='text'], + [type='number'], + [type='email'], + [type='date'], + [type='datetime-local'], + [type='month'], + [type='password'], + [type='search'], + [type='tel'], + [type='text'], + [type='url'], + [type='week'], + [type='datetime'], + [type='input'] + ):not(.default-input) + ):not(.default-input) { + color: var(--secondary--text); + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + &:has(input:not(.default-input):focus) { + color: var(--accent); + } + &:has(input:not(.default-input):disabled) { + color: var(--disabled-text); + text-shadow: var(--disabled-text-shadow) 1px 1px; + pointer-events: none; + } } -} -.cs-select__label { - color: var(--secondary--text); - font-size: 16px; - line-height: 15px; - user-select: none; -} + /* Select */ -/* Radio Group */ + .cs-select, + select:not(.default-select) { + outline: 0; + background-color: var(--secondary-bg); + min-width: 150px; + appearance: none; + border-radius: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M3,3 4,3 4,4 3,4 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23a0aa95'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 6px top 50%; + background-size: 7px auto; + line-height: 15px; + padding: 5px 15px 5px 3px; + color: var(--secondary--text); + border: 1px solid; + border-color: var(--border-dark) var(--border-light) var(--border-light) + var(--border-dark); + user-select: none; -.cs-fieldset { - border: none; - user-select: none; + &:hover, + &:focus-within { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,3 4,3 4,4 3,4 M3,2 4,2 4,3 3,3 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23ffffff'/%3E%3C/svg%3E"); + } - legend { - color: var(--secondary--text); - margin-bottom: 10px; + option { + background-color: var(--bg); + color: var(--text-3); + } } - > div { - padding-left: 10px; + .cs-select__label, + label:has(select:not(.default-select)):not(.default-select-label) { + color: var(--secondary--text); + font-size: 16px; + line-height: 15px; + user-select: none; } - &:disabled { - input[type="radio"] { - + label { - color: var(--disabled-text); - text-shadow: var(--disabled-text-shadow) 1px 1px; - pointer-events: none; - } - } + /* Radio Group */ + + .cs-fieldset, + fieldset:not(.default-fieldset) { + border: none; + user-select: none; legend { - color: var(--disabled-text); - text-shadow: var(--disabled-text-shadow) 1px 1px; - pointer-events: none; + color: var(--secondary--text); + margin-bottom: 10px; } - } - - input[type="radio"] { - opacity: 0; - + label { - position: relative; - cursor: pointer; - font-size: 16px; - line-height: 15px; - color: var(--secondary--text); + > div { + padding-left: 10px; + } - &::before { - content: ""; - position: absolute; - left: -25px; - top: 1px; - width: 12px; - height: 12px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10,2 11,2 11,3 10,3 M10,3 11,3 11,4 10,4 M11,4 12,4 12,5 11,5 M11,5 12,5 12,6 11,6 M11,6 12,6 12,7 11,7 M11,7 12,7 12,8 11,8 M10,8 11,8 11,9 10,9 M10,9 11,9 11,10 10,10 M8,10 9,10 9,11 8,11 M9,10 10,10 10,11 9,11 M7,11 8,11 8,12 7,12 M6,11 7,11 7,12 6,12 M5,11 6,11 6,12 5,12 M2,10 3,10 3,11 2,11 M3,10 4,10 4,11 3,11 M4,11 5,11 5,12 4,12 ' fill='%23889180'/%3E%3Cpath d='M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M4,0 5,0 5,1 4,1 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 M7,0 8,0 8,1 7,1 M8,1 9,1 9,2 8,2 M9,1 10,1 10,2 9,2 M0,4 1,4 1,5 0,5 M0,5 1,5 1,6 0,6 M0,6 1,6 1,7 0,7 M0,7 1,7 1,8 0,8 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 ' fill='%23292c21'/%3E%3Cpath d='M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M6,1 7,1 7,2 6,2 M7,1 8,1 8,2 7,2 M8,2 9,2 9,3 8,3 M9,2 10,2 10,3 9,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,6 11,6 11,7 10,7 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M7,9 8,9 8,10 7,10 M7,10 8,10 8,11 7,11 M6,10 7,10 7,11 6,11 M5,10 6,10 6,11 5,11 M4,10 5,10 5,11 4,11 M6,9 7,9 7,10 6,10 M5,9 6,9 6,10 5,10 M4,9 5,9 5,10 4,10 M3,9 4,9 4,10 3,10 M2,9 3,9 3,10 2,10 M2,8 3,8 3,9 2,9 M1,7 2,7 2,8 1,8 M1,4 2,4 2,5 1,5 M2,3 3,3 3,4 2,4 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M4,2 5,2 5,3 4,3 M5,2 6,2 6,3 5,3 M6,2 7,2 7,3 6,3 M7,2 8,2 8,3 7,3 M3,3 4,3 4,4 3,4 M2,4 3,4 3,5 2,5 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M1,6 2,6 2,7 1,7 M2,6 3,6 3,7 2,7 M2,7 3,7 3,8 2,8 M3,8 4,8 4,9 3,9 M3,7 4,7 4,8 3,8 M3,6 4,6 4,7 3,7 M3,5 4,5 4,6 3,6 M3,4 4,4 4,5 3,5 M4,3 5,3 5,4 4,4 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,8 5,8 5,9 4,9 M4,7 5,7 5,8 4,8 M4,6 5,6 5,7 4,7 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,6 6,6 6,7 5,7 M5,7 6,7 6,8 5,8 M5,8 6,8 6,9 5,9 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M6,6 7,6 7,7 6,7 M6,3 7,3 7,4 6,4 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,3 9,3 9,4 8,4 M8,4 9,4 9,5 8,5 M8,5 9,5 9,6 8,6 M8,6 9,6 9,7 8,7 M9,6 10,6 10,7 9,7 M9,5 10,5 10,6 9,6 ' fill='%233e4637'/%3E%3C/svg%3E"); + &:disabled { + input[type='radio'] { + + label { + color: var(--disabled-text); + text-shadow: var(--disabled-text-shadow) 1px 1px; + pointer-events: none; + } } - &::after { - content: ""; - position: absolute; - left: -22px; - top: 4px; - width: 6px; - height: 6px; + legend { + color: var(--disabled-text); + text-shadow: var(--disabled-text-shadow) 1px 1px; + pointer-events: none; } } - &:checked { + input[type='radio'] { + opacity: 0; + + label { - color: var(--accent); + position: relative; + cursor: pointer; + font-size: 16px; + line-height: 15px; + color: var(--secondary--text); + + &::before { + content: ''; + position: absolute; + left: -25px; + top: 1px; + width: 12px; + height: 12px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10,2 11,2 11,3 10,3 M10,3 11,3 11,4 10,4 M11,4 12,4 12,5 11,5 M11,5 12,5 12,6 11,6 M11,6 12,6 12,7 11,7 M11,7 12,7 12,8 11,8 M10,8 11,8 11,9 10,9 M10,9 11,9 11,10 10,10 M8,10 9,10 9,11 8,11 M9,10 10,10 10,11 9,11 M7,11 8,11 8,12 7,12 M6,11 7,11 7,12 6,12 M5,11 6,11 6,12 5,12 M2,10 3,10 3,11 2,11 M3,10 4,10 4,11 3,11 M4,11 5,11 5,12 4,12 ' fill='%23889180'/%3E%3Cpath d='M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M4,0 5,0 5,1 4,1 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 M7,0 8,0 8,1 7,1 M8,1 9,1 9,2 8,2 M9,1 10,1 10,2 9,2 M0,4 1,4 1,5 0,5 M0,5 1,5 1,6 0,6 M0,6 1,6 1,7 0,7 M0,7 1,7 1,8 0,8 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 ' fill='%23292c21'/%3E%3Cpath d='M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M6,1 7,1 7,2 6,2 M7,1 8,1 8,2 7,2 M8,2 9,2 9,3 8,3 M9,2 10,2 10,3 9,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,6 11,6 11,7 10,7 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M7,9 8,9 8,10 7,10 M7,10 8,10 8,11 7,11 M6,10 7,10 7,11 6,11 M5,10 6,10 6,11 5,11 M4,10 5,10 5,11 4,11 M6,9 7,9 7,10 6,10 M5,9 6,9 6,10 5,10 M4,9 5,9 5,10 4,10 M3,9 4,9 4,10 3,10 M2,9 3,9 3,10 2,10 M2,8 3,8 3,9 2,9 M1,7 2,7 2,8 1,8 M1,4 2,4 2,5 1,5 M2,3 3,3 3,4 2,4 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M4,2 5,2 5,3 4,3 M5,2 6,2 6,3 5,3 M6,2 7,2 7,3 6,3 M7,2 8,2 8,3 7,3 M3,3 4,3 4,4 3,4 M2,4 3,4 3,5 2,5 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M1,6 2,6 2,7 1,7 M2,6 3,6 3,7 2,7 M2,7 3,7 3,8 2,8 M3,8 4,8 4,9 3,9 M3,7 4,7 4,8 3,8 M3,6 4,6 4,7 3,7 M3,5 4,5 4,6 3,6 M3,4 4,4 4,5 3,5 M4,3 5,3 5,4 4,4 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,8 5,8 5,9 4,9 M4,7 5,7 5,8 4,8 M4,6 5,6 5,7 4,7 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,6 6,6 6,7 5,7 M5,7 6,7 6,8 5,8 M5,8 6,8 6,9 5,9 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M6,6 7,6 7,7 6,7 M6,3 7,3 7,4 6,4 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,3 9,3 9,4 8,4 M8,4 9,4 9,5 8,5 M8,5 9,5 9,6 8,6 M8,6 9,6 9,7 8,7 M9,6 10,6 10,7 9,7 M9,5 10,5 10,6 9,6 ' fill='%233e4637'/%3E%3C/svg%3E"); + } + + &::after { + content: ''; + position: absolute; + left: -22px; + top: 4px; + width: 6px; + height: 6px; + } } - + label::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath d='M1,0 2,0 2,1 1,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,2 6,2 6,3 5,3 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,5 5,5 5,6 4,6 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M0,4 1,4 1,5 0,5 M0,3 1,3 1,4 0,4 M0,2 1,2 1,3 0,3 M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M1,4 2,4 2,5 1,5 M2,4 3,4 3,5 2,5 M2,3 3,3 3,4 2,4 M2,0 3,0 3,1 2,1 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M3,3 4,3 4,4 3,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,3 5,3 5,4 4,4 M4,2 5,2 5,3 4,3 M3,2 4,2 4,3 3,3 M2,2 3,2 3,3 2,3 M1,1 2,1 2,2 1,2 M0,1 1,1 1,2 0,2 ' fill='%23c4b550'/%3E%3C/svg%3E"); + &:checked { + + label { + color: var(--accent); + } + + + label::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath d='M1,0 2,0 2,1 1,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,2 6,2 6,3 5,3 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,5 5,5 5,6 4,6 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M0,4 1,4 1,5 0,5 M0,3 1,3 1,4 0,4 M0,2 1,2 1,3 0,3 M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M1,4 2,4 2,5 1,5 M2,4 3,4 3,5 2,5 M2,3 3,3 3,4 2,4 M2,0 3,0 3,1 2,1 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M3,3 4,3 4,4 3,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,3 5,3 5,4 4,4 M4,2 5,2 5,3 4,3 M3,2 4,2 4,3 3,3 M2,2 3,2 3,3 2,3 M1,1 2,1 2,2 1,2 M0,1 1,1 1,2 0,2 ' fill='%23c4b550'/%3E%3C/svg%3E"); + } } } } -} -/* Slider */ + /* Slider */ -.cs-slider { - display: flex; - flex-direction: column-reverse; - width: 150px; - user-select: none; - - input { - -webkit-appearance: none; - appearance: none; + .cs-slider { + display: flex; + flex-direction: column-reverse; width: 150px; - height: 4px; - background: var(--slider-bg); - outline: none; - border: 1px solid; - box-sizing: border-box; - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); - } - - input::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 8px; - height: 16px; - background: var(--bg); - cursor: pointer; - border: 1px solid; - box-sizing: border-box; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); - border-radius: 0; - } + user-select: none; - input::-moz-range-thumb { - -webkit-appearance: none; - appearance: none; - width: 8px; - height: 16px; - background: var(--bg); - cursor: pointer; - border: 1px solid; - box-sizing: border-box; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); - border-radius: 0; - } + input { + -webkit-appearance: none; + appearance: none; + width: 150px; + height: 4px; + background: var(--slider-bg); + outline: none; + border: 1px solid; + box-sizing: border-box; + border-color: var(--border-dark) var(--border-light) var(--border-light) + var(--border-dark); + } - label { - color: var(--secondary--text); - font-size: 16px; - line-height: 15px; - margin-bottom: 12px; - } + input::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 8px; + height: 16px; + background: var(--bg); + cursor: pointer; + border: 1px solid; + box-sizing: border-box; + border-color: var(--border-light) var(--border-dark) var(--border-dark) + var(--border-light); + border-radius: 0; + } - &:has(input:focus) label { - color: var(--accent); - } + input::-moz-range-thumb { + -webkit-appearance: none; + appearance: none; + width: 8px; + height: 16px; + background: var(--bg); + cursor: pointer; + border: 1px solid; + box-sizing: border-box; + border-color: var(--border-light) var(--border-dark) var(--border-dark) + var(--border-light); + border-radius: 0; + } - .ruler { - margin-top: 4px; - margin-left: 4px; - height: 5px; - width: calc(100% + 5px); - background-image: linear-gradient( - to right, - var(--slider) 1px, - transparent 1px - ); - background-size: 15px 5px; - z-index: -1; - } + label { + color: var(--secondary--text); + font-size: 16px; + line-height: 15px; + margin-bottom: 12px; + } - .value { - font-size: 13px; - line-height: 15px; - color: var(--slider); - display: flex; - align-items: center; - justify-content: space-between; - } -} + &:has(input:focus) label { + color: var(--accent); + } -/* Dialog */ - -.cs-dialog { - position: fixed; - right: 0; - top: 0; - margin: auto; - min-width: 350px; - max-width: 510px; - background-color: var(--bg); - color: var(--text); - border: 1px solid; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); - padding: 4px; - user-select: none; - - .heading { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 3px; - padding-left: 2px; + .ruler { + margin-top: 4px; + margin-left: 4px; + height: 5px; + width: calc(100% + 5px); + background-image: linear-gradient( + to right, + var(--slider) 1px, + transparent 1px + ); + background-size: 15px 5px; + z-index: -1; + } - .wrapper { + .value { + font-size: 13px; + line-height: 15px; + color: var(--slider); display: flex; align-items: center; - gap: 5px; + justify-content: space-between; + } + } - .icon { - width: 16px; - height: 15px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M1,12 2,12 2,13 1,13 M2,13 3,13 3,14 2,14 M3,12 4,12 4,13 3,13 M14,7 15,7 15,8 14,8 ' fill='%238c9284'/%3E%3Cpath d='M3,14 4,14 4,15 3,15 ' fill='%23a5aa9c'/%3E%3Cpath d='M0,11 1,11 1,12 0,12 M10,3 11,3 11,4 10,4 M10,5 11,5 11,6 10,6 M12,3 13,3 13,4 12,4 M12,5 13,5 13,6 12,6 M12,8 13,8 13,9 12,9 ' fill='%23bdbeb5'/%3E%3Cpath d='M0,10 1,10 1,11 0,11 M0,9 1,9 1,10 0,10 M0,8 1,8 1,9 0,9 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 M1,10 2,10 2,11 1,11 M2,10 3,10 3,11 2,11 M2,9 3,9 3,10 2,10 M3,9 4,9 4,10 3,10 M3,10 4,10 4,11 3,11 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M1,11 2,11 2,12 1,12 M2,11 3,11 3,12 2,12 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 M5,11 6,11 6,12 5,12 M3,13 4,13 4,14 3,14 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M10,7 11,7 11,8 10,8 M10,8 11,8 11,9 10,9 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,5 9,5 9,6 8,6 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M7,11 8,11 8,12 7,12 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M10,4 11,4 11,5 10,5 M11,5 12,5 12,6 11,6 M12,4 13,4 13,5 12,5 M9,2 10,2 10,3 9,3 M13,2 14,2 14,3 13,3 M13,7 14,7 14,8 13,8 M14,6 15,6 15,7 14,7 M14,5 15,5 15,6 14,6 M14,4 15,4 15,5 14,5 M14,3 15,3 15,4 14,4 M10,1 11,1 11,2 10,2 M11,1 12,1 12,2 11,2 M12,1 13,1 13,2 12,2 ' fill='%23ffffff'/%3E%3Cpath d='M0,7 1,7 1,8 0,8 M11,0 12,0 12,1 11,1 M7,4 8,4 8,5 7,5 M8,1 9,1 9,2 8,2 ' fill='%23848e84'/%3E%3Cpath d='M2,8 3,8 3,9 2,9 M3,8 4,8 4,9 3,9 M6,14 7,14 7,15 6,15 M7,13 8,13 8,14 7,14 M10,9 11,9 11,10 10,10 M15,4 16,4 16,5 15,5 M15,5 16,5 16,6 15,6 ' fill='%239ca29c'/%3E%3Cpath d='M4,8 5,8 5,9 4,9 M6,9 7,9 7,10 6,10 ' fill='%23d6d7ce'/%3E%3Cpath d='M4,14 5,14 5,15 4,15 M5,14 6,14 6,15 5,15 M8,10 9,10 9,11 8,11 ' fill='%23dedfde'/%3E%3Cpath d='M5,8 6,8 6,9 5,9 M11,7 12,7 12,8 11,8 M12,7 13,7 13,8 12,8 M11,8 12,8 12,9 11,9 ' fill='%23f7f7f7'/%3E%3Cpath d='M2,12 3,12 3,13 2,13 M6,13 7,13 7,14 6,14 M7,12 8,12 8,13 7,13 M7,10 8,10 8,11 7,11 M7,5 8,5 8,6 7,6 ' fill='%23efefef'/%3E%3Cpath d='M4,12 5,12 5,13 4,13 M5,12 6,12 6,13 5,13 M9,6 10,6 10,7 9,7 ' fill='%23cecfce'/%3E%3Cpath d='M8,2 9,2 9,3 8,3 M9,1 10,1 10,2 9,2 M13,1 14,1 14,2 13,2 M14,2 15,2 15,3 14,3 ' fill='%23d6dbd6'/%3E%3Cpath d='M13,6 14,6 14,7 13,7 ' fill='%23949e94'/%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,10 7,10 7,11 6,11 M6,11 7,11 7,12 6,12 M6,12 7,12 7,13 6,13 M4,13 5,13 5,14 4,14 M5,13 6,13 6,14 5,14 M13,5 14,5 14,6 13,6 M13,3 14,3 14,4 13,4 M13,8 14,8 14,9 13,9 M9,10 10,10 10,11 9,11 M7,14 8,14 8,15 7,15 ' fill='%235a6952'/%3E%3Cpath d='M10,6 11,6 11,7 10,7 M11,6 12,6 12,7 11,7 M12,6 13,6 13,7 12,7 M13,4 14,4 14,5 13,5 M12,2 13,2 13,3 12,3 M11,2 12,2 12,3 11,3 M10,2 11,2 11,3 10,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M9,5 10,5 10,6 9,6 M5,7 6,7 6,8 5,8 M7,2 8,2 8,3 7,3 M7,3 8,3 8,4 7,4 M9,0 10,0 10,1 9,1 M10,0 11,0 11,1 10,1 M12,0 13,0 13,1 12,1 M14,1 15,1 15,2 14,2 ' fill='%23525d4a'/%3E%3Cpath d='M6,6 7,6 7,7 6,7 ' fill='%23adb6ad'/%3E%3C/svg%3E"); - } + /* Dialog */ - .text { - font-size: 16px; - line-height: 15px; - color: white; + .cs-dialog, + dialog:not(.default-dialog) { + position: fixed; + right: 0; + top: 0; + margin: auto; + min-width: 350px; + max-width: 510px; + background-color: var(--bg); + color: var(--text); + border: 1px solid; + border-color: var(--border-light) var(--border-dark) var(--border-dark) + var(--border-light); + padding: 4px; + user-select: none; + + .heading { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 3px; + padding-left: 2px; + + .wrapper { + display: flex; + align-items: center; + gap: 5px; + + .icon { + width: 16px; + height: 15px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M1,12 2,12 2,13 1,13 M2,13 3,13 3,14 2,14 M3,12 4,12 4,13 3,13 M14,7 15,7 15,8 14,8 ' fill='%238c9284'/%3E%3Cpath d='M3,14 4,14 4,15 3,15 ' fill='%23a5aa9c'/%3E%3Cpath d='M0,11 1,11 1,12 0,12 M10,3 11,3 11,4 10,4 M10,5 11,5 11,6 10,6 M12,3 13,3 13,4 12,4 M12,5 13,5 13,6 12,6 M12,8 13,8 13,9 12,9 ' fill='%23bdbeb5'/%3E%3Cpath d='M0,10 1,10 1,11 0,11 M0,9 1,9 1,10 0,10 M0,8 1,8 1,9 0,9 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 M1,10 2,10 2,11 1,11 M2,10 3,10 3,11 2,11 M2,9 3,9 3,10 2,10 M3,9 4,9 4,10 3,10 M3,10 4,10 4,11 3,11 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M1,11 2,11 2,12 1,12 M2,11 3,11 3,12 2,12 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 M5,11 6,11 6,12 5,12 M3,13 4,13 4,14 3,14 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M10,7 11,7 11,8 10,8 M10,8 11,8 11,9 10,9 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,5 9,5 9,6 8,6 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M7,11 8,11 8,12 7,12 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M10,4 11,4 11,5 10,5 M11,5 12,5 12,6 11,6 M12,4 13,4 13,5 12,5 M9,2 10,2 10,3 9,3 M13,2 14,2 14,3 13,3 M13,7 14,7 14,8 13,8 M14,6 15,6 15,7 14,7 M14,5 15,5 15,6 14,6 M14,4 15,4 15,5 14,5 M14,3 15,3 15,4 14,4 M10,1 11,1 11,2 10,2 M11,1 12,1 12,2 11,2 M12,1 13,1 13,2 12,2 ' fill='%23ffffff'/%3E%3Cpath d='M0,7 1,7 1,8 0,8 M11,0 12,0 12,1 11,1 M7,4 8,4 8,5 7,5 M8,1 9,1 9,2 8,2 ' fill='%23848e84'/%3E%3Cpath d='M2,8 3,8 3,9 2,9 M3,8 4,8 4,9 3,9 M6,14 7,14 7,15 6,15 M7,13 8,13 8,14 7,14 M10,9 11,9 11,10 10,10 M15,4 16,4 16,5 15,5 M15,5 16,5 16,6 15,6 ' fill='%239ca29c'/%3E%3Cpath d='M4,8 5,8 5,9 4,9 M6,9 7,9 7,10 6,10 ' fill='%23d6d7ce'/%3E%3Cpath d='M4,14 5,14 5,15 4,15 M5,14 6,14 6,15 5,15 M8,10 9,10 9,11 8,11 ' fill='%23dedfde'/%3E%3Cpath d='M5,8 6,8 6,9 5,9 M11,7 12,7 12,8 11,8 M12,7 13,7 13,8 12,8 M11,8 12,8 12,9 11,9 ' fill='%23f7f7f7'/%3E%3Cpath d='M2,12 3,12 3,13 2,13 M6,13 7,13 7,14 6,14 M7,12 8,12 8,13 7,13 M7,10 8,10 8,11 7,11 M7,5 8,5 8,6 7,6 ' fill='%23efefef'/%3E%3Cpath d='M4,12 5,12 5,13 4,13 M5,12 6,12 6,13 5,13 M9,6 10,6 10,7 9,7 ' fill='%23cecfce'/%3E%3Cpath d='M8,2 9,2 9,3 8,3 M9,1 10,1 10,2 9,2 M13,1 14,1 14,2 13,2 M14,2 15,2 15,3 14,3 ' fill='%23d6dbd6'/%3E%3Cpath d='M13,6 14,6 14,7 13,7 ' fill='%23949e94'/%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,10 7,10 7,11 6,11 M6,11 7,11 7,12 6,12 M6,12 7,12 7,13 6,13 M4,13 5,13 5,14 4,14 M5,13 6,13 6,14 5,14 M13,5 14,5 14,6 13,6 M13,3 14,3 14,4 13,4 M13,8 14,8 14,9 13,9 M9,10 10,10 10,11 9,11 M7,14 8,14 8,15 7,15 ' fill='%235a6952'/%3E%3Cpath d='M10,6 11,6 11,7 10,7 M11,6 12,6 12,7 11,7 M12,6 13,6 13,7 12,7 M13,4 14,4 14,5 13,5 M12,2 13,2 13,3 12,3 M11,2 12,2 12,3 11,3 M10,2 11,2 11,3 10,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M9,5 10,5 10,6 9,6 M5,7 6,7 6,8 5,8 M7,2 8,2 8,3 7,3 M7,3 8,3 8,4 7,4 M9,0 10,0 10,1 9,1 M10,0 11,0 11,1 10,1 M12,0 13,0 13,1 12,1 M14,1 15,1 15,2 14,2 ' fill='%23525d4a'/%3E%3Cpath d='M6,6 7,6 7,7 6,7 ' fill='%23adb6ad'/%3E%3C/svg%3E"); + } + + .text { + font-size: 16px; + line-height: 15px; + color: white; + } } } - } - .content { - padding: 10px; - } + .content { + padding: 10px; + } - .footer-btns { - float: right; - margin: 4px 8px 8px 0; + .footer-btns { + float: right; + margin: 4px 8px 8px 0; - .cs-btn { - width: 72px; - text-align: left; + .cs-btn { + width: 72px; + text-align: left; + } } } -} - -/* Tooltip */ -.cs-tooltip { - position: relative; - display: inline-block; - color: white; - line-height: 20px; - user-select: none; + /* Tooltip */ - &:hover .text { - visibility: visible; - } + .cs-tooltip { + position: relative; + display: inline-block; + color: white; + line-height: 20px; + user-select: none; - .text { - visibility: hidden; - width: max-content; - background-color: var(--secondary-accent); - color: black; - text-align: center; - font-size: 16px; - line-height: 15px; - position: absolute; - z-index: 1; - border: 1px solid var(--border-dark); - padding: 2px 2px 1px; - } -} + &:hover .text { + visibility: visible; + } -/* Progress bar */ - -.cs-progress-bar { - width: 260px; - height: 24px; - padding: 3px; - background-color: var(--secondary-bg); - border: 1px solid; - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); - - .bars { - height: 100%; - background-image: linear-gradient( - to right, - var(--accent) 8px, - transparent 2px - ); - background-size: 12px 16px; + .text { + visibility: hidden; + width: max-content; + background-color: var(--secondary-accent); + color: black; + text-align: center; + font-size: 16px; + line-height: 15px; + position: absolute; + z-index: 1; + border: 1px solid var(--border-dark); + padding: 2px 2px 1px; + } } -} -/* Tabs */ + /* Progress bar */ -.cs-tabs { - display: flex; - flex-wrap: wrap; - align-items: center; - user-select: none; + .cs-progress-bar { + width: 260px; + height: 24px; + padding: 3px; + background-color: var(--secondary-bg); + border: 1px solid; + border-color: var(--border-dark) var(--border-light) var(--border-light) + var(--border-dark); - .radiotab { - position: absolute; - opacity: 0; + .bars { + height: 100%; + background-image: linear-gradient( + to right, + var(--accent) 8px, + transparent 2px + ); + background-size: 12px 16px; + } } - - .label { - cursor: pointer; - font-size: 16px; - color: white; - line-height: 15px; - height: 27px; - padding: 4px 5px; - text-align: left; - min-width: 64px; + progress:not(.default-progress) { + width: 260px; + height: 24px; + padding: 3px; + background-color: var(--secondary-bg); + border: 1px solid; + border-color: var(--border-dark) var(--border-light) var(--border-light) + var(--border-dark); position: relative; - background-color: var(--bg); - border-top: solid 1px var(--border-light); - border-left: solid 1px var(--border-light); - border-right: solid 1px var(--border-dark); - border-bottom: none; - margin-right: 1px; - z-index: 10; + &::-moz-progress-bar { + background-color: var(--secondary-bg); + height: 100%; + background-image: linear-gradient( + 90deg, + transparent 0px, + var(--accent) 0.01px, + var(--accent) 7.99px, + /* FIXME: despite this hack to try to fix it, firefox shows a gradient on the right when zoomed in via swiping (not via ctrl[+-]) */ + transparent 8px + ); + background-size: 12px 16px; + } + &::-webkit-progress-bar { + background-color: var(--secondary-bg); + } + &::-webkit-progress-value { + background-color: var(--secondary-bg); + height: 100%; + background-image: linear-gradient( + to right, + var(--accent) 8px, + transparent 2px + ); + background-size: 12px 16px; + } } - .radiotab:checked + .label { - background: var(--bg); - padding: 5px; - height: 29px; - color: var(--accent); + /* Tabs */ - &::before { - content: ""; + .cs-tabs { + display: flex; + flex-wrap: wrap; + align-items: center; + user-select: none; + + .radiotab { position: absolute; - bottom: 0px; - left: 0px; - width: 100%; - height: 1px; + opacity: 0; + } + + .label { + cursor: pointer; + font-size: 16px; + color: white; + line-height: 15px; + height: 27px; + padding: 4px 5px; + text-align: left; + min-width: 64px; + position: relative; background-color: var(--bg); + border-top: solid 1px var(--border-light); + border-left: solid 1px var(--border-light); + border-right: solid 1px var(--border-dark); + border-bottom: none; + margin-right: 1px; + z-index: 10; } - } - .panel { - display: none; - position: relative; - bottom: 1px; - padding: 32px 39px 27px; - background: var(--bg); - width: 100%; - border-left: solid 1px var(--border-light); - border-bottom: solid 1px var(--border-dark); - border-right: solid 1px var(--border-dark); - border-top: solid 1px var(--border-light); - order: 99; - color: var(--text); - } + .radiotab:checked + .label { + background: var(--bg); + padding: 5px; + height: 29px; + color: var(--accent); - .radiotab:checked + .label + .panel { - display: block; - position: relative; + &::before { + content: ''; + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + height: 1px; + background-color: var(--bg); + } + } + + .panel { + display: none; + position: relative; + bottom: 1px; + padding: 32px 39px 27px; + background: var(--bg); + width: 100%; + border-left: solid 1px var(--border-light); + border-bottom: solid 1px var(--border-dark); + border-right: solid 1px var(--border-dark); + border-top: solid 1px var(--border-light); + order: 99; + color: var(--text); + } + + .radiotab:checked + .label + .panel { + display: block; + position: relative; + } } } diff --git a/src/index.css b/src/index.css index fbe1ef7..57699c2 100644 --- a/src/index.css +++ b/src/index.css @@ -32,19 +32,15 @@ header { gap: 10px; a { display: inline-block; - width: 40px; - height: 40px; - background-size: 25px; + width: 42px; + height: 42px; + background-size: 24px 24px; background-repeat: no-repeat; background-position: center; } - .gh { - background-image: url(/svg/github.svg); - } - - .x { - background-image: url(/svg/x.svg); + .tree { + background-image: url(/svg/tree.svg); } } } @@ -73,7 +69,7 @@ main { .inner { position: relative; - .cs-btn { + button { position: absolute; right: 1px; top: 1px; @@ -86,7 +82,7 @@ main { border-color: #292c21 #8c9284 #8c9284 #292c21; margin-top: 5px; position: relative; - font-family: "Courier New", Courier, monospace; + font-family: 'Courier New', Courier, monospace; padding: 5px; code { @@ -103,10 +99,11 @@ main { footer { text-align: center; +} - a { - color: #dedfd6; - } +footer a, +a.link { + color: #dedfd6; } @media (max-width: 400px) { diff --git a/svg/tree.svg b/svg/tree.svg new file mode 100644 index 0000000..81d83c2 --- /dev/null +++ b/svg/tree.svg @@ -0,0 +1,132 @@ +<!-- Anti-Aliasing: Replace #ffffff00 with #ffffff59 --> +<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" viewBox="0 0 24 24" width="24" + height="24"> + <rect fill="#ffffff00" x="7" y="1" width="1" height="1" /> + <rect fill="#ffffff" x="8" y="1" width="1" height="1" /> + <rect fill="#ffffff" x="9" y="1" width="1" height="1" /> + <rect fill="#ffffff00" x="10" y="1" width="1" height="1" /> + <rect fill="#ffffff00" x="6" y="2" width="1" height="1" /> + <rect fill="#ffffff" x="7" y="2" width="1" height="1" /> + <rect fill="#ffffff" x="8" y="2" width="1" height="1" /> + <rect fill="#ffffff" x="9" y="2" width="1" height="1" /> + <rect fill="#ffffff" x="10" y="2" width="1" height="1" /> + <rect fill="#ffffff00" x="11" y="2" width="1" height="1" /> + <rect fill="#ffffff" x="6" y="3" width="1" height="1" /> + <rect fill="#ffffff" x="7" y="3" width="1" height="1" /> + <rect fill="#ffffff" x="8" y="3" width="1" height="1" /> + <rect fill="#ffffff" x="9" y="3" width="1" height="1" /> + <rect fill="#ffffff" x="10" y="3" width="1" height="1" /> + <rect fill="#ffffff" x="11" y="3" width="1" height="1" /> + <rect fill="#ffffff" x="6" y="4" width="1" height="1" /> + <rect fill="#ffffff" x="7" y="4" width="1" height="1" /> + <rect fill="#ffffff" x="8" y="4" width="1" height="1" /> + <rect fill="#ffffff" x="9" y="4" width="1" height="1" /> + <rect fill="#ffffff" x="10" y="4" width="1" height="1" /> + <rect fill="#ffffff" x="11" y="4" width="1" height="1" /> + <rect fill="#ffffff00" x="6" y="5" width="1" height="1" /> + <rect fill="#ffffff" x="7" y="5" width="1" height="1" /> + <rect fill="#ffffff" x="8" y="5" width="1" height="1" /> + <rect fill="#ffffff" x="9" y="5" width="1" height="1" /> + <rect fill="#ffffff" x="10" y="5" width="1" height="1" /> + <rect fill="#ffffff00" x="11" y="5" width="1" height="1" /> + <rect fill="#ffffff00" x="7" y="6" width="1" height="1" /> + <rect fill="#ffffff" x="8" y="6" width="1" height="1" /> + <rect fill="#ffffff" x="9" y="6" width="1" height="1" /> + <rect fill="#ffffff00" x="10" y="6" width="1" height="1" /> + <rect fill="#fefefea8" x="8" y="7" width="1" height="1" /> + <rect fill="#fefefea8" x="9" y="7" width="1" height="1" /> + <rect fill="#fefefea8" x="8" y="8" width="1" height="1" /> + <rect fill="#fefefea8" x="9" y="8" width="1" height="1" /> + <rect fill="#ffffff00" x="15" y="8" width="1" height="1" /> + <rect fill="#ffffff" x="16" y="8" width="1" height="1" /> + <rect fill="#ffffff" x="17" y="8" width="1" height="1" /> + <rect fill="#ffffff00" x="18" y="8" width="1" height="1" /> + <rect fill="#fefefea8" x="8" y="9" width="1" height="1" /> + <rect fill="#fefefea8" x="9" y="9" width="1" height="1" /> + <rect fill="#ffffff00" x="14" y="9" width="1" height="1" /> + <rect fill="#ffffff" x="15" y="9" width="1" height="1" /> + <rect fill="#ffffff" x="16" y="9" width="1" height="1" /> + <rect fill="#ffffff" x="17" y="9" width="1" height="1" /> + <rect fill="#ffffff" x="18" y="9" width="1" height="1" /> + <rect fill="#ffffff00" x="19" y="9" width="1" height="1" /> + <rect fill="#fefefea8" x="8" y="10" width="1" height="1" /> + <rect fill="#fefefea8" x="9" y="10" width="1" height="1" /> + <rect fill="#fefefea8" x="12" y="10" width="1" height="1" /> + <rect fill="#fefefea8" x="13" y="10" width="1" height="1" /> + <rect fill="#ffffff" x="14" y="10" width="1" height="1" /> + <rect fill="#ffffff" x="15" y="10" width="1" height="1" /> + <rect fill="#ffffff" x="16" y="10" width="1" height="1" /> + <rect fill="#ffffff" x="17" y="10" width="1" height="1" /> + <rect fill="#ffffff" x="18" y="10" width="1" height="1" /> + <rect fill="#ffffff" x="19" y="10" width="1" height="1" /> + <rect fill="#fefefea8" x="8" y="11" width="1" height="1" /> + <rect fill="#fefefea8" x="9" y="11" width="1" height="1" /> + <rect fill="#fefefea8" x="11" y="11" width="1" height="1" /> + <rect fill="#fefefea8" x="12" y="11" width="1" height="1" /> + <rect fill="#fefefea8" x="13" y="11" width="1" height="1" /> + <rect fill="#ffffff" x="14" y="11" width="1" height="1" /> + <rect fill="#ffffff" x="15" y="11" width="1" height="1" /> + <rect fill="#ffffff" x="16" y="11" width="1" height="1" /> + <rect fill="#ffffff" x="17" y="11" width="1" height="1" /> + <rect fill="#ffffff" x="18" y="11" width="1" height="1" /> + <rect fill="#ffffff" x="19" y="11" width="1" height="1" /> + <rect fill="#fefefea8" x="8" y="12" width="1" height="1" /> + <rect fill="#fefefea8" x="9" y="12" width="1" height="1" /> + <rect fill="#fefefea8" x="10" y="12" width="1" height="1" /> + <rect fill="#fefefea8" x="11" y="12" width="1" height="1" /> + <rect fill="#fefefea8" x="12" y="12" width="1" height="1" /> + <rect fill="#ffffff00" x="13" y="12" width="1" height="1" /> + <rect fill="#ffffff00" x="14" y="12" width="1" height="1" /> + <rect fill="#ffffff" x="15" y="12" width="1" height="1" /> + <rect fill="#ffffff" x="16" y="12" width="1" height="1" /> + <rect fill="#ffffff" x="17" y="12" width="1" height="1" /> + <rect fill="#ffffff" x="18" y="12" width="1" height="1" /> + <rect fill="#ffffff00" x="19" y="12" width="1" height="1" /> + <rect fill="#fefefea8" x="8" y="13" width="1" height="1" /> + <rect fill="#fefefea8" x="9" y="13" width="1" height="1" /> + <rect fill="#fefefea8" x="10" y="13" width="1" height="1" /> + <rect fill="#fefefea8" x="11" y="13" width="1" height="1" /> + <rect fill="#ffffff00" x="15" y="13" width="1" height="1" /> + <rect fill="#ffffff" x="16" y="13" width="1" height="1" /> + <rect fill="#ffffff" x="17" y="13" width="1" height="1" /> + <rect fill="#ffffff00" x="18" y="13" width="1" height="1" /> + <rect fill="#fefefea8" x="8" y="14" width="1" height="1" /> + <rect fill="#fefefea8" x="9" y="14" width="1" height="1" /> + <rect fill="#fefefea8" x="10" y="14" width="1" height="1" /> + <rect fill="#fefefea8" x="8" y="15" width="1" height="1" /> + <rect fill="#fefefea8" x="9" y="15" width="1" height="1" /> + <rect fill="#fefefea8" x="8" y="16" width="1" height="1" /> + <rect fill="#fefefea8" x="9" y="16" width="1" height="1" /> + <rect fill="#ffffff00" x="7" y="17" width="1" height="1" /> + <rect fill="#ffffff" x="8" y="17" width="1" height="1" /> + <rect fill="#ffffff" x="9" y="17" width="1" height="1" /> + <rect fill="#ffffff00" x="10" y="17" width="1" height="1" /> + <rect fill="#ffffff00" x="6" y="18" width="1" height="1" /> + <rect fill="#ffffff" x="7" y="18" width="1" height="1" /> + <rect fill="#ffffff" x="8" y="18" width="1" height="1" /> + <rect fill="#ffffff" x="9" y="18" width="1" height="1" /> + <rect fill="#ffffff" x="10" y="18" width="1" height="1" /> + <rect fill="#ffffff00" x="11" y="18" width="1" height="1" /> + <rect fill="#ffffff" x="6" y="19" width="1" height="1" /> + <rect fill="#ffffff" x="7" y="19" width="1" height="1" /> + <rect fill="#ffffff" x="8" y="19" width="1" height="1" /> + <rect fill="#ffffff" x="9" y="19" width="1" height="1" /> + <rect fill="#ffffff" x="10" y="19" width="1" height="1" /> + <rect fill="#ffffff" x="11" y="19" width="1" height="1" /> + <rect fill="#ffffff" x="6" y="20" width="1" height="1" /> + <rect fill="#ffffff" x="7" y="20" width="1" height="1" /> + <rect fill="#ffffff" x="8" y="20" width="1" height="1" /> + <rect fill="#ffffff" x="9" y="20" width="1" height="1" /> + <rect fill="#ffffff" x="10" y="20" width="1" height="1" /> + <rect fill="#ffffff" x="11" y="20" width="1" height="1" /> + <rect fill="#ffffff00" x="6" y="21" width="1" height="1" /> + <rect fill="#ffffff" x="7" y="21" width="1" height="1" /> + <rect fill="#ffffff" x="8" y="21" width="1" height="1" /> + <rect fill="#ffffff" x="9" y="21" width="1" height="1" /> + <rect fill="#ffffff" x="10" y="21" width="1" height="1" /> + <rect fill="#ffffff00" x="11" y="21" width="1" height="1" /> + <rect fill="#ffffff00" x="7" y="22" width="1" height="1" /> + <rect fill="#ffffff" x="8" y="22" width="1" height="1" /> + <rect fill="#ffffff" x="9" y="22" width="1" height="1" /> + <rect fill="#ffffff00" x="10" y="22" width="1" height="1" /> +</svg>
\ No newline at end of file diff --git a/svg/x.svg b/svg/x.svg deleted file mode 100644 index 38f9acc..0000000 --- a/svg/x.svg +++ /dev/null @@ -1 +0,0 @@ -<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="m15.5 10v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h-3v1h-1v1h-1v1h-1v1h-1v1h-1v1h-2v-1h-1v-1h-1v-2h-1v-1h-1v-1h-7v1h1v1h1v1h1v2h1v1h1v2h1v1h1v2h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h3v-1h1v-1h1v-1h1v-1h1v-1h1v-1h2v1h1v1h1v2h1v1h1v1h7v-1h-1v-1h-1v-1h-1v-2h-1v-1h-1v-2h-1v-1h-1v-2h-1v-1zm0 4v1h1v2h1v1h1v2h-3v-2h-1v-1h-1v-1h-1v-2h-1v-1h-1v-1h-1v-2h-1v-1h-1v-2h-1v-1h-1v-2h3v1h1v2h1v1h1v2h1v1h1v1h1v2z"/></svg>
\ No newline at end of file |
