aboutsummaryrefslogtreecommitdiffstats
path: root/static/cs16.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/cs16.css')
-rw-r--r--static/cs16.css684
1 files changed, 684 insertions, 0 deletions
diff --git a/static/cs16.css b/static/cs16.css
new file mode 100644
index 0000000..60a7ad9
--- /dev/null
+++ b/static/cs16.css
@@ -0,0 +1,684 @@
+: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) 0.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;
+ }
+ }
+}
+body {
+ padding: 40px;
+ max-width: 800px;
+ margin: auto;
+ margin: 0 max(0px, round(50vw - (800px/2), 1px));
+}
+
+@media (max-width: 400px) {
+ body {
+ padding: 20px;
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-03 14:19:07 +0000