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

updated docs page

Browse source
This commit is contained in:
Samuel Breznjak 2025-01-24 12:48:31 +01:00
parent 7c518ea3fb
commit 558bc6950e
1 changed files with 347 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

379
index.html
View file

@ -3,46 +3,132 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<link rel="stylesheet" href="/src/cs16.css" />
<link rel="stylesheet" href="/src/index.css" />
<title>cs16.css</title>
</head>
<body>
<div style="padding: 50px">
<header>
<div class="top">
<h1>cs16.css</h1>
<div class="links">
<a
href="https://github.com/ekmas/cs16.css"
target="_blank"
class="cs-btn gh"
></a>
<a
href="https://x.com/samuelbreznjak"
target="_blank"
class="cs-btn x"
></a>
</div>
</div>
<p>CSS library based on Counter Strike 1.6 UI.</p>
</header>
<div style="margin-bottom: 10px" class="installation">
<h2>Installation</h2>
<p>
You can install cs16.css simply by pasting this to your html `head` tag:
</p>
<div class="code-block">
<div class="inner">
<button class="cs-btn">Copy</button>
<pre><code id="code-block">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/css/cs16.min.css&quot;&gt;</code></pre>
</div>
</div>
</div>
<main>
<div>
<h3>Button</h3>
<h2>Button</h2>
<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="code-block">
<button class="cs-btn toggle-vision">Show code</button>
<div class="cs-checkbox">
<input id="checkbox" type="checkbox" />
<label class="cs-checkbox__label" for="checkbox"
>Custom Checkbox</label
>
<div class="inner hidden">
<button class="cs-btn">Copy</button>
<pre><code id="code-block">&lt;button class="cs-btn"&gt;Button&lt;/button&gt;
&lt;button disabled class="cs-btn"&gt;Disabled&lt;/button&gt;</code></pre>
</div>
</div>
</div>
<div>
<h3>Input</h3>
<h2>Hr</h2>
<hr class="cs-hr" />
<div class="code-block">
<button class="cs-btn toggle-vision">Show code</button>
<div class="inner hidden">
<button class="cs-btn">Copy</button>
<pre><code id="code-block">&lt;hr class=&quot;cs-hr&quot; /&gt;</code></pre>
</div>
</div>
</div>
<div>
<h2>Checkbox</h2>
<div class="cs-checkbox">
<input id="checkbox" type="checkbox" />
<label class="cs-checkbox__label" for="checkbox">Checkbox</label>
</div>
<div class="code-block">
<button class="cs-btn toggle-vision">Show code</button>
<div class="inner hidden">
<button class="cs-btn">Copy</button>
<pre><code id="code-block">&lt;div class=&quot;cs-checkbox&quot;&gt;
&lt;input id=&quot;checkbox&quot; type=&quot;checkbox&quot; /&gt;
&lt;label class=&quot;cs-checkbox__label&quot; for=&quot;checkbox&quot;&gt;Checkbox&lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</div>
<div>
<h2>Input</h2>
<input class="cs-input" id="input" type="input" />
<label class="cs-input__label" for="input">Custom Checkbox</label>
<label class="cs-input__label" for="input">First name</label>
<br />
<br />
<input type="text" value="John Doe" class="cs-input" />
<input type="text" disabled value="disabled" class="cs-input" />
<div class="code-block">
<button class="cs-btn toggle-vision">Show code</button>
<div class="inner hidden">
<button class="cs-btn">Copy</button>
<pre><code id="code-block">&lt;input class=&quot;cs-input&quot; id=&quot;input&quot; type=&quot;input&quot; /&gt;
&lt;label class=&quot;cs-input__label&quot; for=&quot;input&quot;&gt;First name&lt;/label&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;input type=&quot;text&quot; value=&quot;John Doe&quot; class=&quot;cs-input&quot; /&gt;
&lt;input type=&quot;text&quot; disabled value=&quot;disabled&quot; class=&quot;cs-input&quot; /&gt;</code></pre>
</div>
</div>
</div>
<div>
<h3>Select</h3>
<h2>Select</h2>
<label class="cs-select__label" for="cars">Choose a car:</label>
<select class="cs-select" name="cars" id="cars">
@ -51,9 +137,25 @@
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<div class="code-block">
<button class="cs-btn toggle-vision">Show code</button>
<div class="inner hidden">
<button class="cs-btn">Copy</button>
<pre><code id="code-block">&lt;label class=&quot;cs-select__label&quot; for=&quot;cars&quot;&gt;Choose a car:&lt;/label&gt;
&lt;select class=&quot;cs-select&quot; name=&quot;cars&quot; id=&quot;cars&quot;&gt;
&lt;option value=&quot;volvo&quot;&gt;Volvo&lt;/option&gt;
&lt;option value=&quot;saab&quot;&gt;Saab&lt;/option&gt;
&lt;option value=&quot;opel&quot;&gt;Opel&lt;/option&gt;
&lt;option value=&quot;audi&quot;&gt;Audi&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</div>
<div>
<h3>Radio Group</h3>
<h2>Radio Group</h2>
<fieldset class="cs-fieldset">
<legend>What is your favorite wild animal?</legend>
@ -74,9 +176,37 @@
<label for="giraffe">Giraffe</label>
</div>
</fieldset>
<div class="code-block">
<button class="cs-btn toggle-vision">Show code</button>
<div class="inner hidden">
<button class="cs-btn">Copy</button>
<pre><code id="code-block">&lt;fieldset class=&quot;cs-fieldset&quot;&gt;
&lt;legend&gt;What is your favorite wild animal?&lt;/legend&gt;
&lt;div class=&quot;radio-wrapper&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;animal&quot; id=&quot;elephant&quot; /&gt;
&lt;label for=&quot;elephant&quot;&gt;Elephant&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio-wrapper&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;animal&quot; id=&quot;monkey&quot; /&gt;
&lt;label for=&quot;monkey&quot;&gt;Monkey&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio-wrapper&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;animal&quot; id=&quot;cheetah&quot; /&gt;
&lt;label for=&quot;cheetah&quot;&gt;Cheetah&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio-wrapper&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;animal&quot; id=&quot;giraffe&quot; /&gt;
&lt;label for=&quot;giraffe&quot;&gt;Giraffe&lt;/label&gt;
&lt;/div&gt;
&lt;/fieldset&gt;</code></pre>
</div>
</div>
</div>
<div>
<h3>Slider</h3>
<h2>Slider</h2>
<div class="cs-slider">
<div class="value">
@ -85,11 +215,29 @@
</div>
<div class="ruler"></div>
<input id="range" type="range" min="1" max="100" value="50" />
<label for="range">Elephant</label>
<label for="range">Brightness</label>
</div>
<div class="code-block">
<button class="cs-btn toggle-vision">Show code</button>
<div class="inner hidden">
<button class="cs-btn">Copy</button>
<pre><code id="code-block">&lt;div class=&quot;cs-slider&quot;&gt;
&lt;div class=&quot;value&quot;&gt;
&lt;p&gt;Dark&lt;/p&gt;
&lt;p&gt;Light&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;ruler&quot;&gt;&lt;/div&gt;
&lt;input id=&quot;range&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;100&quot; value=&quot;50&quot; /&gt;
&lt;label for=&quot;range&quot;&gt;Brightness&lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</div>
<div>
<h3>Dialog</h3>
<h2>Dialog</h2>
<section>
<button
@ -125,24 +273,142 @@
</form>
</dialog>
</section>
</div>
<div>
<h3>Tooltip</h3>
<div class="cs-tooltip">
Hover over me
<span class="text">Tooltip text</span>
<div class="code-block">
<button class="cs-btn toggle-vision">Show code</button>
<div class="inner hidden">
<button class="cs-btn">Copy</button>
<pre><code id="code-block">&lt;section&gt;
&lt;button
type=&quot;button&quot;
class=&quot;cs-btn&quot;
onclick=&quot;document.querySelector(&apos;.cs-dialog&apos;).showModal();&quot;
&gt;
Open dialog
&lt;/button&gt;
&lt;dialog class=&quot;cs-dialog&quot;&gt;
&lt;form method=&quot;dialog&quot;&gt;
&lt;div class=&quot;heading&quot;&gt;
&lt;div class=&quot;wrapper&quot;&gt;
&lt;div class=&quot;icon&quot;&gt;&lt;/div&gt;
&lt;p class=&quot;text&quot;&gt;Options&lt;/p&gt;
&lt;/div&gt;
&lt;button class=&quot;cs-btn close&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;content&quot;&gt;
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!
&lt;/div&gt;
&lt;menu class=&quot;footer-btns&quot;&gt;
&lt;button class=&quot;cs-btn&quot;&gt;OK&lt;/button&gt;
&lt;button class=&quot;cs-btn&quot;&gt;Cancel&lt;/button&gt;
&lt;button class=&quot;cs-btn&quot;&gt;Apply&lt;/button&gt;
&lt;/menu&gt;
&lt;/form&gt;
&lt;/dialog&gt;
&lt;/section&gt;</code></pre>
</div>
</div>
</div>
<div>
<h3>Progress Bar</h3>
<h2>Tooltip</h2>
<div class="cs-tooltip">
Right
<span style="left: 125%" class="text">Tooltip text</span>
</div>
<br />
<div class="cs-tooltip">
Left
<span style="right: 125%" class="text">Tooltip text</span>
</div>
<br />
<div class="cs-tooltip">
Top
<span
style="bottom: 100%; width: 100px; left: 50%; margin-left: -50px"
class="text"
>Tooltip text</span
>
<!-- set some width, and then set margin-left to be half of the width -->
</div>
<br />
<div class="cs-tooltip">
Bottom
<span
style="top: 100%; width: 100px; left: 50%; margin-left: -50px"
class="text"
>Tooltip text</span
>
<!-- set some width, and then set margin-left to be half of the width -->
</div>
<div class="code-block">
<button class="cs-btn toggle-vision">Show code</button>
<div class="inner hidden">
<button class="cs-btn">Copy</button>
<pre><code id="code-block">&lt;div class=&quot;cs-tooltip&quot;&gt;
Right
&lt;span style=&quot;left: 125%&quot; class=&quot;text&quot;&gt;Tooltip text&lt;/span&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;cs-tooltip&quot;&gt;
Left
&lt;span style=&quot;right: 125%&quot; class=&quot;text&quot;&gt;Tooltip text&lt;/span&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;cs-tooltip&quot;&gt;
Top
&lt;span
style=&quot;bottom: 100%; width: 100px; left: 50%; margin-left: -50px&quot;
class=&quot;text&quot;
&gt;Tooltip text&lt;/span
&gt;
&lt;!-- set some width, and then set margin-left to be half of the width --&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;cs-tooltip&quot;&gt;
Bottom
&lt;span
style=&quot;top: 100%; width: 100px; left: 50%; margin-left: -50px&quot;
class=&quot;text&quot;
&gt;Tooltip text&lt;/span
&gt;
&lt;!-- set some width, and then set margin-left to be half of the width --&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</div>
<div>
<h2>Progress Bar</h2>
<div class="cs-progress-bar">
<div style="width: 50%" class="bars"></div>
</div>
<div class="code-block">
<button class="cs-btn toggle-vision">Show code</button>
<div class="inner hidden">
<button class="cs-btn">Copy</button>
<pre><code id="code-block">&lt;div class=&quot;cs-progress-bar&quot;&gt;
&lt;div style=&quot;width: 50%&quot; class=&quot;bars&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</div>
<div>
<h3>Tabs</h3>
<h2>Tabs</h2>
<div class="cs-tabs">
<input
@ -183,8 +449,57 @@
<p>Tab content...</p>
</div>
</div>
<div class="code-block">
<button class="cs-btn toggle-vision">Show code</button>
<div class="inner hidden">
<button class="cs-btn">Copy</button>
<pre><code id="code-block">&lt;div class=&quot;cs-tabs&quot;&gt;
&lt;input
class=&quot;radiotab&quot;
name=&quot;tabs&quot;
tabindex=&quot;1&quot;
type=&quot;radio&quot;
id=&quot;tabone&quot;
checked=&quot;checked&quot;
/&gt;
&lt;label class=&quot;label&quot; for=&quot;tabone&quot;&gt;Tab One&lt;/label&gt;
&lt;div class=&quot;panel&quot; tabindex=&quot;1&quot;&gt;
&lt;h2&gt;Tab One Content&lt;/h2&gt;
&lt;p&gt;Tab content...&lt;/p&gt;
&lt;/div&gt;
&lt;input
class=&quot;radiotab&quot;
tabindex=&quot;1&quot;
name=&quot;tabs&quot;
type=&quot;radio&quot;
id=&quot;tabtwo&quot;
/&gt;
&lt;label class=&quot;label&quot; for=&quot;tabtwo&quot;&gt;Tab Two&lt;/label&gt;
&lt;div class=&quot;panel&quot; tabindex=&quot;1&quot;&gt;
&lt;h2&gt;Tab Two Content&lt;/h2&gt;
&lt;p&gt;Tab content...&lt;/p&gt;
&lt;/div&gt;
&lt;input
class=&quot;radiotab&quot;
tabindex=&quot;1&quot;
name=&quot;tabs&quot;
type=&quot;radio&quot;
id=&quot;tabthree&quot;
/&gt;
&lt;label class=&quot;label&quot; for=&quot;tabthree&quot;&gt;Tab Three&lt;/label&gt;
&lt;div class=&quot;panel&quot; tabindex=&quot;1&quot;&gt;
&lt;h2&gt;Tab Three Content&lt;/h2&gt;
&lt;p&gt;Tab content...&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</div>
</div>
</main>
<script type="module" src="./src/main.js"></script>
</body>
</html>