aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLibravatarLarge Libravatar Samuel Breznjak <samuelbreznjak35gmailcom>2025-01-24 12:48:31 +0100
committerLibravatarLarge Libravatar Samuel Breznjak <samuelbreznjak35gmailcom>2025-01-24 12:48:31 +0100
commit558bc6950e2b02cd38772771d49d8a5219a9168e (patch)
tree3d0e6442cb308866df2e1c36d02c39e5643f950a
parent7c518ea3fbf3c549ebed252c529e59b0478c59dd (diff)
downloadcs16-defaults.css-558bc6950e2b02cd38772771d49d8a5219a9168e.tar.gz
cs16-defaults.css-558bc6950e2b02cd38772771d49d8a5219a9168e.tar.bz2
cs16-defaults.css-558bc6950e2b02cd38772771d49d8a5219a9168e.tar.lz
cs16-defaults.css-558bc6950e2b02cd38772771d49d8a5219a9168e.zip

updated docs page

Diffstat
-rw-r--r--index.html359
1 files changed, 337 insertions, 22 deletions
diff --git a/index.html b/index.html
index e412cfb..7b8726b 100644
--- a/index.html
+++ b/index.html
@@ -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 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;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>Hr</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>
- <h3>Checkbox</h3>
+ <h2>Checkbox</h2>
<div class="cs-checkbox">
<input id="checkbox" type="checkbox" />
- <label class="cs-checkbox__label" for="checkbox"
- >Custom Checkbox</label
- >
+ <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>
- <h3>Input</h3>
+ <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 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>Tooltip</h3>
+ <h2>Tooltip</h2>
<div class="cs-tooltip">
- Hover over me
- <span class="text">Tooltip text</span>
+ 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>
- <h3>Progress Bar</h3>
+ <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>
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-03 10:03:33 +0000