zhanshi/cs16.css
1
0
Fork 0
mirror of https://github.com/ekmas/cs16.css synced 2026-04-10 21:53:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
Samuel Breznjak 2025-01-22 21:17:11 +01:00
commit f81c7bc9a1
7 changed files with 2071 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

BIN
ArialPixel.ttf Normal file
View file

Binary file not shown.

190
index.html Normal file
View file

@ -0,0 +1,190 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div style="padding: 50px">
<div>
<h3>Button</h3>
<button class="cs-btn">Button</button>
<button disabled class="cs-btn">Disabled</button>
<button class="cs-btn close"></button>
</div>
<div>
<h3>Hr</h3>
<hr class="cs-hr" />
</div>
<div>
<h3>Checkbox</h3>
<div class="cs-checkbox">
<input id="checkbox" type="checkbox" />
<label class="cs-checkbox__label" for="checkbox"
>Custom Checkbox</label
>
</div>
</div>
<div>
<h3>Input</h3>
<input class="cs-input" id="input" type="input" />
<label class="cs-input__label" for="input">Custom Checkbox</label>
<br />
<br />
<input type="text" value="John Doe" class="cs-input" />
<input type="text" disabled value="disabled" class="cs-input" />
</div>
<div>
<h3>Select</h3>
<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>
</div>
<div>
<h3>Radio Group</h3>
<fieldset class="cs-fieldset">
<legend>What is your favorite wild animal?</legend>
<div class="radio-wrapper">
<input type="radio" name="animal" id="elephant" />
<label for="elephant">Elephant</label>
</div>
<div class="radio-wrapper">
<input type="radio" name="animal" id="monkey" />
<label for="monkey">Monkey</label>
</div>
<div class="radio-wrapper">
<input type="radio" name="animal" id="cheetah" />
<label for="cheetah">Cheetah</label>
</div>
<div class="radio-wrapper">
<input type="radio" name="animal" id="giraffe" />
<label for="giraffe">Giraffe</label>
</div>
</fieldset>
</div>
<div>
<h3>Slider</h3>
<div class="cs-slider">
<div class="value">
<p>Dark</p>
<p>Light</p>
</div>
<div class="ruler"></div>
<input id="range" type="range" min="1" max="100" value="50" />
<label for="range">Elephant</label>
</div>
</div>
<div>
<h3>Dialog</h3>
<section>
<button
type="button"
class="cs-btn"
onclick="document.querySelector('.cs-dialog').showModal();"
>
Open dialog
</button>
<dialog class="cs-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>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Distinctio ad suscipit aut asperiores laudantium error amet
sapiente et tempora numquam voluptates, velit sint quos
exercitationem unde obcaecati deleniti maiores officia natus
ipsa rem fuga commodi esse. Sunt repellendus ipsa illo a
accusantium consequuntur nihil dicta necessitatibus porro,
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>
</menu>
</form>
</dialog>
</section>
</div>
<div>
<h3>Tooltip</h3>
<div class="cs-tooltip">
Hover over me
<span class="text">Tooltip text</span>
</div>
</div>
<div>
<h3>Progress Bar</h3>
<div class="cs-progress-bar">
<div style="width: 50%" class="bars"></div>
</div>
</div>
<div>
<h3>Tabs</h3>
<div class="cs-tabs">
<input
class="radiotab"
name="tabs"
tabindex="1"
type="radio"
id="tabone"
checked="checked"
/>
<label class="label" for="tabone">Tab One</label>
<div class="panel" tabindex="1">
<h2>Tab One Content</h2>
<p>Tab content...</p>
</div>
<input
class="radiotab"
tabindex="1"
name="tabs"
type="radio"
id="tabtwo"
/>
<label class="label" for="tabtwo">Tab Two</label>
<div class="panel" tabindex="1">
<h2>Tab Two Content</h2>
<p>Tab content...</p>
</div>
<input
class="radiotab"
tabindex="1"
name="tabs"
type="radio"
id="tabthree"
/>
<label class="label" for="tabthree">Tab Three</label>
<div class="panel" tabindex="1">
<h2>Tab Three Content</h2>
<p>Tab content...</p>
</div>
</div>
</div>
</div>
<script type="module" src="./src/main.js"></script>
</body>
</html>

23
package.json Normal file
View file

@ -0,0 +1,23 @@
{
"name": "cs16.css",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"build:css": "pnpm run build:autoprefix && pnpm run build:cleancss",
"build:autoprefix": "postcss --use autoprefixer --no-map --output css/cs16.css src/cs16.css",
"build:cleancss": "cleancss -o css/cs16.min.css src/cs16.css"
},
"devDependencies": {
"vite": "^6.0.5"
},
"packageManager": "pnpm@9.15.3+sha512.1f79bc245a66eb0b07c5d4d83131240774642caaa86ef7d0434ab47c0d16f66b04e21e0c086eb61e62c77efc4d7f7ec071afad3796af64892fae66509173893a",
"dependencies": {
"autoprefixer": "^10.4.20",
"clean-css-cli": "^5.6.3",
"postcss-cli": "^11.0.0"
}
}

1225
pnpm-lock.yaml Normal file
View file

File diff suppressed because it is too large Load diff

608
src/cs16.css Normal file
View file

@ -0,0 +1,608 @@
:root {
--main: #4a5942;
--secondary: #c4b550;
--text: #fff;
--border-tl: #8c9284;
--border-br: #292c21;
}
*,
*::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");
font-weight: 400;
font-style: normal;
}
body {
font-weight: 400;
line-height: 1.5;
background-color: #4a5942;
color: #dedfd6;
font-family: ArialPixel;
}
/* Scrollbars */
::-webkit-scrollbar {
width: 18px;
}
::-webkit-scrollbar-track {
background-color: #5a6a50;
width: 18px;
border: 1px solid #282e22;
border-left: 0;
}
::-webkit-scrollbar-thumb {
width: 17px;
background-color: var(--main);
border: 1px solid;
border-color: var(--border-tl) var(--border-br) var(--border-br)
var(--border-tl);
}
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
display: block;
}
::-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-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-button:vertical:start,
::-webkit-scrollbar-button:vertical:end {
border: 1px solid;
border-color: var(--border-tl) var(--border-br) var(--border-br)
var(--border-tl);
}
::-webkit-scrollbar-button:vertical:start:active,
::-webkit-scrollbar-button:vertical:end:active {
border-color: var(--border-br) var(--border-tl) var(--border-tl)
var(--border-br);
}
::-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");
}
/* Buttons */
.cs-btn {
background-color: var(--main);
color: var(--text);
padding: 4px 5px 3px;
font-size: 16px;
line-height: 15px;
border: 1px solid;
border-color: var(--border-tl) var(--border-br) var(--border-br)
var(--border-tl);
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");
}
&:focus-visible {
padding: 3px 4px 2px;
outline: 1px solid black;
&.close {
padding: 0;
outline: 0;
}
}
&:active {
border-color: var(--border-br) var(--border-tl) var(--border-tl)
var(--border-br);
}
&:disabled {
color: #282e22;
text-shadow: #75806f 1px 1px;
pointer-events: none;
}
}
/* Hr */
.cs-hr {
border-left: 0;
border-right: 0;
border-top-color: #282e22;
border-bottom-color: #889180;
}
/* Checkbox */
.cs-checkbox {
position: relative;
input {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
&:focus:not(:focus-visible) {
outline: none;
}
&:focus-visible + .cs-checkbox__label {
outline: dotted 2px black;
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 {
color: var(--secondary);
}
}
.cs-checkbox__label {
cursor: pointer;
display: inline-block;
user-select: none;
color: #d8ded3;
line-height: 15px;
&:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
background-color: #3e4637;
border: 1px solid;
border-color: var(--border-br) var(--border-tl) var(--border-tl)
var(--border-br);
margin-right: 7px;
}
&:hover {
color: white;
}
}
}
/* Input */
.cs-input {
outline: 0;
border: 1px solid;
padding: 3px 2px 2px;
font-size: 16px;
line-height: 17px;
background-color: #3e4637;
border-color: var(--border-br) var(--border-tl) var(--border-tl)
var(--border-br);
color: #d8ded3;
&:focus + .cs-input__label {
color: #c4b550;
}
&::selection {
background-color: #958831;
color: white;
}
&:disabled {
background-color: var(--main);
pointer-events: none;
color: #a0aa95;
}
&:disabled + .cs-input__label {
color: #282e22;
text-shadow: #75806f 1px 1px;
pointer-events: none;
}
}
.cs-input__label {
color: #d8ded3;
user-select: none;
}
/* Select */
.cs-select {
outline: 0;
background-color: #3e4637;
min-width: 150px;
appearance: none;
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: #d8ded3;
border: 1px solid;
border-color: var(--border-br) var(--border-tl) var(--border-tl)
var(--border-br);
accent-color: red;
&: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(--main);
color: #a0aa95;
}
}
.cs-select__label {
color: #d8ded3;
font-size: 16px;
line-height: 15px;
}
/* Radio Group */
.cs-fieldset {
border: none;
legend {
color: #d8ded3;
margin-bottom: 10px;
}
> div {
padding-left: 10px;
}
&:disabled {
input[type="radio"] {
+ label {
color: #282e22;
text-shadow: #75806f 1px 1px;
pointer-events: none;
}
}
legend {
color: #282e22;
text-shadow: #75806f 1px 1px;
pointer-events: none;
}
}
input[type="radio"] {
opacity: 0;
+ label {
position: relative;
cursor: pointer;
font-size: 16px;
line-height: 15px;
color: #d8ded3;
&::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='%23282e22'/%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;
}
}
&:checked {
+ label {
color: #c4b550;
}
+ 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 */
.cs-slider {
display: flex;
flex-direction: column-reverse;
width: 150px;
input {
-webkit-appearance: none;
appearance: none;
width: 150px;
height: 4px;
background: #1f1f1f;
outline: none;
border: 1px solid;
box-sizing: border-box;
border-color: #282e22 #889180 #889180 #282e22;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 8px;
height: 16px;
background: #4c5844;
cursor: pointer;
border: 1px solid;
box-sizing: border-box;
border-color: var(--border-tl) var(--border-br) var(--border-br)
var(--border-tl);
}
label {
color: #d8ded3;
font-size: 16px;
line-height: 15px;
margin-bottom: 12px;
}
&:has(input:focus) label {
color: #c4b550;
}
.ruler {
margin-top: 4px;
margin-left: 4px;
height: 5px;
width: calc(100% + 5px);
background-image: linear-gradient(to right, #7f8c7f 1px, transparent 1px);
background-size: 15px 5px;
z-index: -1;
}
.value {
font-size: 13px;
line-height: 15px;
color: #7f8c7f;
display: flex;
align-items: center;
justify-content: space-between;
}
}
/* Dialog */
.cs-dialog {
position: fixed;
right: 0;
top: 0;
margin: auto;
min-width: 350px;
max-width: 510px;
background-color: var(--main);
color: #dedfd6;
border: 1px solid;
border-color: var(--border-tl) var(--border-br) var(--border-br)
var(--border-tl);
padding: 4px;
.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;
}
.footer-btns {
float: right;
margin: 4px 8px 8px 0;
.cs-btn {
width: 72px;
text-align: left;
}
}
}
/* Tooltip */
.cs-tooltip {
position: relative;
display: inline-block;
color: white;
line-height: 20px;
&:hover .text {
visibility: visible;
}
.text {
visibility: hidden;
width: max-content;
background-color: #958831;
color: black;
text-align: center;
font-size: 16px;
line-height: 15px;
position: absolute;
z-index: 1;
left: 105%;
border: 1px solid #282e22;
padding: 2px 2px 1px;
}
}
/* Progress bar */
.cs-progress-bar {
width: 260px;
height: 24px;
padding: 3px;
background-color: #3e4637;
border: 1px solid;
border-color: var(--border-br) var(--border-tl) var(--border-tl)
var(--border-br);
.bars {
height: 100%;
background-image: linear-gradient(to right, #c4b550 8px, transparent 2px);
background-size: 12px 16px;
}
}
/* Tabs */
.cs-tabs {
display: flex;
flex-wrap: wrap;
align-items: center;
.radiotab {
position: absolute;
opacity: 0;
}
.label {
cursor: pointer;
font-size: 16px;
color: white;
line-height: 15px;
height: 27px;
padding: 4px 5px;
text-align: center;
min-width: 64px;
position: relative;
background-color: var(--main);
border-top: solid 1px var(--border-tl);
border-left: solid 1px var(--border-tl);
border-right: solid 1px var(--border-br);
border-bottom: none;
margin-right: 1px;
z-index: 10;
}
.radiotab:checked + .label {
background: var(--main);
padding: 5px;
height: 29px;
color: #c6b652;
&::before {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 1px;
background-color: var(--main);
}
}
.panel {
display: none;
position: relative;
bottom: 1px;
padding: 32px 39px 27px;
background: var(--main);
width: 100%;
border-left: solid 1px var(--border-tl);
border-bottom: solid 1px var(--border-br);
border-right: solid 1px var(--border-br);
border-top: solid 1px var(--border-tl);
order: 99;
color: #dedfd6;
}
.radiotab:checked + .label + .panel {
display: block;
position: relative;
}
}

1
src/main.js Normal file
View file

@ -0,0 +1 @@
import "./cs16.css";