aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--css/cs16.css182
-rw-r--r--css/cs16.min.css2
-rw-r--r--package.json9
-rw-r--r--postcss.ts22
4 files changed, 175 insertions, 40 deletions
diff --git a/css/cs16.css b/css/cs16.css
index 39ea86b..2660ece 100644
--- a/css/cs16.css
+++ b/css/cs16.css
@@ -72,17 +72,20 @@
::-webkit-scrollbar {
width: 18px;
+ width: 1.125rem;
}
::-webkit-scrollbar-track {
background-color: var(--scrollbar-track);
width: 18px;
+ width: 1.125rem;
border: 1px solid var(--border-dark);
border-left: 0;
}
::-webkit-scrollbar-thumb {
width: 17px;
+ width: 1.0625rem;
background-color: var(--bg);
border: 1px solid;
border-color: var(--border-light) var(--border-dark) var(--border-dark)
@@ -104,6 +107,7 @@
::-webkit-scrollbar-button:vertical:end:decrement {
background-repeat: no-repeat;
height: 17px;
+ height: 1.0625rem;
}
::-webkit-scrollbar-button:vertical:start {
@@ -142,26 +146,32 @@
background-color: var(--bg);
color: #fff;
padding: 4px 5px 3px;
+ padding: 0.25rem 0.3125rem 0.1875rem;
+ font-size: 16px;
font-size: 1rem;
+ line-height: 15px;
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;
+ user-select: none;
&.close {
padding: 0px;
+ padding: 0;
width: 18px;
+ width: 1.125rem;
height: 18px;
+ height: 1.125rem;
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;
+ padding: 0.1875rem 0.25rem 0.125rem;
outline: 1px solid var(--outline);
+ outline: 0.0625rem solid var(--outline);
&.close {
padding: 0;
@@ -177,6 +187,7 @@
&:disabled {
color: var(--disabled-text);
text-shadow: var(--disabled-text-shadow) 1px 1px;
+ text-shadow: var(--disabled-text-shadow) 0.0625rem 0.0625rem;
pointer-events: none;
}
}
@@ -201,10 +212,13 @@
.cs-checkbox input {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
+ clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
padding: 0;
border: 0;
height: 1px;
+ height: 0.0625rem;
width: 1px;
+ width: 0.0625rem;
overflow: hidden;
&:focus:not(:focus-visible) {
@@ -214,7 +228,9 @@
&:focus-visible + .cs-checkbox__label,
&:focus-visible + label {
outline: dotted 2px var(--outline);
+ outline: dotted 0.125rem var(--outline);
outline-offset: 3px;
+ outline-offset: 0.1875rem;
}
&:checked + .cs-checkbox__label,
@@ -237,10 +253,9 @@
label.cs-checkbox:has(input) {
cursor: pointer;
display: inline-block;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
+ user-select: none;
color: var(--secondary--text);
+ line-height: 15px;
line-height: 0.9375rem;
&::before {
@@ -248,12 +263,15 @@
display: inline-block;
vertical-align: middle;
width: 12px;
+ width: 0.75rem;
height: 12px;
+ height: 0.75rem;
background-color: var(--secondary-bg);
border: 1px solid;
border-color: var(--border-dark) var(--border-light) var(--border-light)
var(--border-dark);
margin-right: 7px;
+ margin-right: 0.4375rem;
}
&:hover {
@@ -269,10 +287,13 @@
&:has(input:not(.default-checkbox):focus-visible),
&:has(.cs-checkbox:focus-visible) {
outline: dotted 2px var(--outline);
+ outline: dotted 0.125rem var(--outline);
outline-offset: 3px;
+ outline-offset: 0.1875rem;
}
&::before {
margin-right: 3px;
+ margin-right: 0.1875rem;
}
&:has(input:not(.default-checkbox):checked),
&:has(.cs-checkbox:checked) {
@@ -305,6 +326,7 @@
outline: 0;
border: 1px solid;
padding: 3px 2px 2px;
+ padding: 0.1875rem 0.125rem 0.125rem;
font-size: 1rem;
line-height: 1.0625rem;
background-color: var(--secondary-bg);
@@ -337,6 +359,7 @@
&:disabled + label {
color: var(--disabled-text);
text-shadow: var(--disabled-text-shadow) 1px 1px;
+ text-shadow: var(--disabled-text-shadow) 0.0625rem 0.0625rem;
pointer-events: none;
}
}
@@ -370,6 +393,7 @@
&:has(input:not(.default-input):disabled) {
color: var(--disabled-text);
text-shadow: var(--disabled-text-shadow) 1px 1px;
+ text-shadow: var(--disabled-text-shadow) 0.0625rem 0.0625rem;
pointer-events: none;
}
}
@@ -381,23 +405,24 @@
outline: 0;
background-color: var(--secondary-bg);
min-width: 150px;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ min-width: 9.375rem;
+ 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-position: right 0.375rem top 50%;
background-size: 7px auto;
+ background-size: 0.4375rem auto;
+ line-height: 15px;
line-height: 0.9375rem;
padding: 5px 15px 5px 3px;
+ padding: 0.3125rem 0.9375rem 0.3125rem 0.1875rem;
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;
+ user-select: none;
&:hover,
&:focus-within {
@@ -413,11 +438,11 @@
.cs-select__label,
label:has(select:not(.default-select)):not(.default-select-label) {
color: var(--secondary--text);
+ font-size: 16px;
font-size: 1rem;
+ line-height: 15px;
line-height: 0.9375rem;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
+ user-select: none;
}
/* Radio Group */
@@ -425,17 +450,17 @@
.cs-fieldset,
fieldset:not(.default-fieldset) {
border: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
+ user-select: none;
legend {
color: var(--secondary--text);
margin-bottom: 10px;
+ margin-bottom: 0.625rem;
}
> div {
padding-left: 10px;
+ padding-left: 0.625rem;
}
&:disabled {
@@ -443,6 +468,7 @@
+ label {
color: var(--disabled-text);
text-shadow: var(--disabled-text-shadow) 1px 1px;
+ text-shadow: var(--disabled-text-shadow) 0.0625rem 0.0625rem;
pointer-events: none;
}
}
@@ -450,6 +476,7 @@
legend {
color: var(--disabled-text);
text-shadow: var(--disabled-text-shadow) 1px 1px;
+ text-shadow: var(--disabled-text-shadow) 0.0625rem 0.0625rem;
pointer-events: none;
}
}
@@ -460,7 +487,9 @@
+ label {
position: relative;
cursor: pointer;
+ font-size: 16px;
font-size: 1rem;
+ line-height: 15px;
line-height: 0.9375rem;
color: var(--secondary--text);
@@ -468,9 +497,13 @@
content: '';
position: absolute;
left: -25px;
+ left: -1.5625rem;
top: 1px;
+ top: 0.0625rem;
width: 12px;
+ width: 0.75rem;
height: 12px;
+ height: 0.75rem;
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");
}
@@ -478,9 +511,13 @@
content: '';
position: absolute;
left: -22px;
+ left: -1.375rem;
top: 4px;
+ top: 0.25rem;
width: 6px;
+ width: 0.375rem;
height: 6px;
+ height: 0.375rem;
}
}
@@ -502,16 +539,16 @@
display: flex;
flex-direction: column-reverse;
width: 150px;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
+ width: 9.375rem;
+ user-select: none;
input {
-webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ appearance: none;
width: 150px;
+ width: 9.375rem;
height: 4px;
+ height: 0.25rem;
background: var(--slider-bg);
outline: none;
border: 1px solid;
@@ -524,7 +561,9 @@
-webkit-appearance: none;
appearance: none;
width: 8px;
+ width: 0.5rem;
height: 16px;
+ height: 1rem;
background: var(--bg);
cursor: pointer;
border: 1px solid;
@@ -536,10 +575,11 @@
input::-moz-range-thumb {
-webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ appearance: none;
width: 8px;
+ width: 0.5rem;
height: 16px;
+ height: 1rem;
background: var(--bg);
cursor: pointer;
border: 1px solid;
@@ -551,9 +591,12 @@
label {
color: var(--secondary--text);
+ font-size: 16px;
font-size: 1rem;
+ line-height: 15px;
line-height: 0.9375rem;
margin-bottom: 12px;
+ margin-bottom: 0.75rem;
}
&:has(input:focus) label {
@@ -562,20 +605,32 @@
.ruler {
margin-top: 4px;
+ margin-top: 0.25rem;
margin-left: 4px;
+ margin-left: 0.25rem;
height: 5px;
+ height: 0.3125rem;
width: calc(100% + 5px);
+ width: calc(100% + 0.3125rem);
background-image: linear-gradient(
to right,
var(--slider) 1px,
transparent 1px
);
+ background-image: linear-gradient(
+ to right,
+ var(--slider) 0.0625rem,
+ transparent 0.0625rem
+ );
background-size: 15px 5px;
+ background-size: 0.9375rem 0.3125rem;
z-index: -1;
}
.value {
+ font-size: 13px;
font-size: 0.8125rem;
+ line-height: 15px;
line-height: 0.9375rem;
color: var(--slider);
display: flex;
@@ -593,37 +648,45 @@
top: 0;
margin: auto;
min-width: 350px;
+ min-width: 21.875rem;
max-width: 510px;
+ max-width: 31.875rem;
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;
+ padding: 0.25rem;
+ user-select: none;
.heading {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 3px;
+ margin-top: 0.1875rem;
padding-left: 2px;
+ padding-left: 0.125rem;
.wrapper {
display: flex;
align-items: center;
gap: 5px;
+ gap: 0.3125rem;
.icon {
width: 16px;
+ width: 1rem;
height: 15px;
+ height: 0.9375rem;
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;
font-size: 1rem;
+ line-height: 15px;
line-height: 0.9375rem;
color: white;
}
@@ -632,14 +695,17 @@
.content {
padding: 10px;
+ padding: 0.625rem;
}
.footer-btns {
float: right;
margin: 4px 8px 8px 0;
+ margin: 0.25rem 0.5rem 0.5rem 0;
.cs-btn {
width: 72px;
+ width: 4.5rem;
text-align: left;
}
}
@@ -651,10 +717,9 @@
position: relative;
display: inline-block;
color: white;
+ line-height: 20px;
line-height: 1.25rem;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
+ user-select: none;
&:hover .text {
visibility: visible;
@@ -662,17 +727,19 @@
.text {
visibility: hidden;
- width: -moz-max-content;
width: max-content;
background-color: var(--secondary-accent);
color: black;
text-align: center;
+ font-size: 16px;
font-size: 1rem;
+ line-height: 15px;
line-height: 0.9375rem;
position: absolute;
z-index: 1;
border: 1px solid var(--border-dark);
padding: 2px 2px 1px;
+ padding: 0.125rem 0.125rem 0.0625rem;
}
}
@@ -680,8 +747,11 @@
.cs-progress-bar {
width: 260px;
+ width: 16.25rem;
height: 24px;
+ height: 1.5rem;
padding: 3px;
+ padding: 0.1875rem;
background-color: var(--secondary-bg);
border: 1px solid;
border-color: var(--border-dark) var(--border-light) var(--border-light)
@@ -694,13 +764,22 @@
var(--accent) 8px,
transparent 2px
);
+ background-image: linear-gradient(
+ to right,
+ var(--accent) 0.5rem,
+ transparent 0.125rem
+ );
background-size: 12px 16px;
+ background-size: 0.75rem 1rem;
}
}
progress:not(.default-progress) {
width: 260px;
+ width: 16.25rem;
height: 24px;
+ height: 1.5rem;
padding: 3px;
+ padding: 0.1875rem;
background-color: var(--secondary-bg);
border: 1px solid;
border-color: var(--border-dark) var(--border-light) var(--border-light)
@@ -717,7 +796,16 @@
/* 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-image: linear-gradient(
+ 90deg,
+ transparent 0,
+ var(--accent) 0.00063rem,
+ var(--accent) 0.49938rem,
+
+ transparent 0.5rem
+ );
background-size: 12px 16px;
+ background-size: 0.75rem 1rem;
}
&::-webkit-progress-bar {
background-color: var(--secondary-bg);
@@ -730,7 +818,13 @@
var(--accent) 8px,
transparent 2px
);
+ background-image: linear-gradient(
+ to right,
+ var(--accent) 0.5rem,
+ transparent 0.125rem
+ );
background-size: 12px 16px;
+ background-size: 0.75rem 1rem;
}
}
@@ -740,9 +834,7 @@
display: flex;
flex-wrap: wrap;
align-items: center;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
+ user-select: none;
.radiotab {
position: absolute;
@@ -751,36 +843,50 @@
.label {
cursor: pointer;
+ font-size: 16px;
font-size: 1rem;
color: white;
+ line-height: 15px;
line-height: 0.9375rem;
height: 27px;
+ height: 1.6875rem;
padding: 4px 5px;
+ padding: 0.25rem 0.3125rem;
text-align: left;
min-width: 64px;
+ min-width: 4rem;
position: relative;
background-color: var(--bg);
border-top: solid 1px var(--border-light);
+ border-top: solid 0.0625rem var(--border-light);
border-left: solid 1px var(--border-light);
+ border-left: solid 0.0625rem var(--border-light);
border-right: solid 1px var(--border-dark);
+ border-right: solid 0.0625rem var(--border-dark);
border-bottom: none;
margin-right: 1px;
+ margin-right: 0.0625rem;
z-index: 10;
}
.radiotab:checked + .label {
background: var(--bg);
padding: 5px;
+ padding: 0.3125rem;
height: 29px;
+ height: 1.8125rem;
color: var(--accent);
&::before {
content: '';
position: absolute;
bottom: 0px;
+ bottom: 0;
left: 0px;
+ left: 0;
width: 100%;
height: 1px;
+ height: 0.0625rem;
background-color: var(--bg);
}
}
@@ -789,13 +895,19 @@
display: none;
position: relative;
bottom: 1px;
+ bottom: 0.0625rem;
padding: 32px 39px 27px;
+ padding: 2rem 2.4375rem 1.6875rem;
background: var(--bg);
width: 100%;
border-left: solid 1px var(--border-light);
+ border-left: solid 0.0625rem var(--border-light);
border-bottom: solid 1px var(--border-dark);
+ border-bottom: solid 0.0625rem var(--border-dark);
border-right: solid 1px var(--border-dark);
+ border-right: solid 0.0625rem var(--border-dark);
border-top: solid 1px var(--border-light);
+ border-top: solid 0.0625rem var(--border-light);
order: 99;
color: var(--text);
}
diff --git a/css/cs16.min.css b/css/cs16.min.css
index 5061c43..96f8b83 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}@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
+: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;width:1.125rem}::-webkit-scrollbar-track{background-color:var(--scrollbar-track);border:1px solid var(--border-dark);border-left:0;width:18px;width:1.125rem}::-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;width:1.0625rem}::-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;height:1.0625rem}::-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;font-size:1rem;line-height:15px;line-height:.9375rem;padding:.25rem .3125rem .1875rem;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;height:1.125rem;padding:0;width:18px;width:1.125rem}&:focus-visible{outline:1px solid var(--outline);outline:.0625rem solid var(--outline);padding:.1875rem .25rem .125rem;&.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;text-shadow:var(--disabled-text-shadow) .0625rem .0625rem}}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);clip:rect(.0625rem,.0625rem,.0625rem,.0625rem);border:0;height:1px;height:.0625rem;overflow:hidden;padding:0;width:1px;width:.0625rem;&:focus:not(:focus-visible){outline:none}&:focus-visible+.cs-checkbox__label,&:focus-visible+label{outline:dotted 2px var(--outline);outline:dotted .125rem var(--outline);outline-offset:3px;outline-offset:.1875rem}&: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;line-height:.9375rem;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;height:.75rem;margin-right:.4375rem;vertical-align:middle;width:12px;width:.75rem}&: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:dotted .125rem var(--outline);outline-offset:3px;outline-offset:.1875rem}&:before{margin-right:.1875rem}&: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:.1875rem .125rem .125rem;&: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;text-shadow:var(--disabled-text-shadow) .0625rem .0625rem}}.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;text-shadow:var(--disabled-text-shadow) .0625rem .0625rem}}.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-position:right .375rem top 50%;background-repeat:no-repeat;background-size:7px auto;background-size:.4375rem 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;line-height:.9375rem;min-width:150px;min-width:9.375rem;outline:0;padding:.3125rem .9375rem .3125rem .1875rem;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;font-size:1rem;line-height:15px;line-height:.9375rem;user-select:none}.cs-fieldset,fieldset:not(.default-fieldset){border:none;user-select:none;legend{color:var(--secondary--text);margin-bottom:.625rem}>div{padding-left:.625rem}&:disabled{input[type=radio]{+label{color:var(--disabled-text);pointer-events:none;text-shadow:var(--disabled-text-shadow) 1px 1px;text-shadow:var(--disabled-text-shadow) .0625rem .0625rem}}legend{color:var(--disabled-text);pointer-events:none;text-shadow:var(--disabled-text-shadow) 1px 1px;text-shadow:var(--disabled-text-shadow) .0625rem .0625rem}}input[type=radio]{opacity:0;+label{color:var(--secondary--text);cursor:pointer;font-size:16px;font-size:1rem;line-height:15px;line-height:.9375rem;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;height:.75rem;left:-25px;left:-1.5625rem;top:1px;top:.0625rem;width:12px;width:.75rem}&:after,&:before{content:"";position:absolute}&:after{height:6px;height:.375rem;left:-22px;left:-1.375rem;top:4px;top:.25rem;width:6px;width:.375rem}}&: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;width:9.375rem;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;height:.25rem;outline:none;width:150px;width:9.375rem}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;height:1rem;width:8px;width:.5rem}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;height:1rem;width:8px;width:.5rem}label{color:var(--secondary--text);font-size:16px;font-size:1rem;line-height:15px;line-height:.9375rem;margin-bottom:.75rem}&:has(input:focus) label{color:var(--accent)}.ruler{background-image:linear-gradient(to right,var(--slider) 1px,#0000 1px);background-image:linear-gradient(to right,var(--slider) .0625rem,#0000 .0625rem);background-size:15px 5px;background-size:.9375rem .3125rem;height:5px;height:.3125rem;margin-left:.25rem;margin-top:.25rem;width:calc(100% + 5px);width:calc(100% + .3125rem);z-index:-1}.value{align-items:center;color:var(--slider);display:flex;font-size:13px;font-size:.8125rem;justify-content:space-between;line-height:15px;line-height:.9375rem}}.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;max-width:31.875rem;min-width:350px;min-width:21.875rem;padding:.25rem;position:fixed;right:0;top:0;user-select:none;.heading{align-items:center;display:flex;justify-content:space-between;margin-top:.1875rem;padding-left:.125rem;.wrapper{align-items:center;display:flex;gap:5px;gap:.3125rem;.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;height:.9375rem;width:16px;width:1rem}.text{color:#fff;font-size:16px;font-size:1rem;line-height:15px;line-height:.9375rem}}}.content{padding:.625rem}.footer-btns{float:right;margin:.25rem .5rem .5rem 0;.cs-btn{text-align:left;width:72px;width:4.5rem}}}.cs-tooltip{color:#fff;display:inline-block;line-height:20px;line-height:1.25rem;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;font-size:1rem;line-height:15px;line-height:.9375rem;padding:.125rem .125rem .0625rem;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;height:1.5rem;padding:.1875rem;width:260px;width:16.25rem;.bars{background-image:linear-gradient(to right,var(--accent) 8px,#0000 2px);background-image:linear-gradient(to right,var(--accent) .5rem,#0000 .125rem);background-size:12px 16px;background-size:.75rem 1rem;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;height:1.5rem;padding:.1875rem;position:relative;width:260px;width:16.25rem;&::-moz-progress-bar{background-color:var(--secondary-bg);background-image:linear-gradient(90deg,#0000 0,var(--accent) .01px,var(--accent) 7.99px,#0000 8px);background-image:linear-gradient(90deg,#0000 0,var(--accent) .00063rem,var(--accent) .49938rem,#0000 .5rem);background-size:12px 16px;background-size:.75rem 1rem;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,#0000 2px);background-image:linear-gradient(to right,var(--accent) .5rem,#0000 .125rem);background-size:12px 16px;background-size:.75rem 1rem;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:.0625rem solid var(--border-light);border-right:.0625rem solid var(--border-dark);border-top:.0625rem solid var(--border-light);color:#fff;cursor:pointer;font-size:16px;font-size:1rem;height:27px;height:1.6875rem;line-height:15px;line-height:.9375rem;margin-right:.0625rem;min-width:64px;min-width:4rem;padding:.25rem .3125rem;position:relative;text-align:left;z-index:10}.radiotab:checked+.label{background:var(--bg);color:var(--accent);height:29px;height:1.8125rem;padding:.3125rem;&:before{background-color:var(--bg);bottom:0;content:"";height:1px;height:.0625rem;left:0;position:absolute;width:100%}}.panel{background:var(--bg);border-bottom:.0625rem solid var(--border-dark);border-left:.0625rem solid var(--border-light);border-right:.0625rem solid var(--border-dark);border-top:.0625rem solid var(--border-light);bottom:1px;bottom:.0625rem;color:var(--text);display:none;order:99;padding:2rem 2.4375rem 1.6875rem;position:relative;width:100%}.radiotab:checked+.label+.panel{display:block;position:relative}}} \ No newline at end of file
diff --git a/package.json b/package.json
index 0ec263b..0915967 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,7 @@
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
- "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"
+ "build:css": "deno --allow-env --allow-read --allow-write=css/ postcss.ts"
},
"devDependencies": {
"vite": "6.0.5"
@@ -20,5 +18,8 @@
"cssnano": "7.0.6",
"postcss-cli": "11.0.0",
"postcss-pxtorem": "6.1.0"
- }
+ },
+ "browserslist": [
+ ">0.3%, >1% in DE, >1% in US, >1% in CH, not dead"
+ ]
}
diff --git a/postcss.ts b/postcss.ts
new file mode 100644
index 0000000..c0e3120
--- /dev/null
+++ b/postcss.ts
@@ -0,0 +1,22 @@
+import fs from 'node:fs';
+import postcss from 'npm:postcss';
+import pxtorem from 'npm:postcss-pxtorem';
+import cssnano from 'npm:cssnano';
+
+const css = fs.readFileSync('src/cs16.css');
+const options = {
+ replace: false,
+ propList: ['*', '!border'],
+};
+const processedCss = postcss(pxtorem(options)).process(css).css;
+
+fs.writeFileSync('css/cs16.css', processedCss);
+
+const minifiedCss = await postcss([
+ pxtorem(options),
+ cssnano({ preset: 'default' }),
+]).process(css, {
+ from: 'src/cs16.css',
+ to: 'css/cs16.min.css',
+});
+fs.writeFileSync('css/cs16.min.css', minifiedCss.css);
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-03 11:48:23 +0000