mirror of
https://github.com/ekmas/cs16.css
synced 2026-04-10 21:53:24 +00:00
initial commit
This commit is contained in:
Samuel Breznjak
commit
f81c7bc9a1
7 changed files with 2071 additions and 0 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal 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
BIN
ArialPixel.ttf
Normal file
Binary file not shown.
190
index.html
Normal file
190
index.html
Normal 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
23
package.json
Normal 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
1225
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
608
src/cs16.css
Normal file
608
src/cs16.css
Normal 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
1
src/main.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
import "./cs16.css";
|
||||||
Loading…
Reference in a new issue