aboutsummaryrefslogtreecommitdiffstats
path: root/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'index.html')
-rw-r--r--index.html240
1 files changed, 147 insertions, 93 deletions
diff --git a/index.html b/index.html
index 9aff29c..af41a41 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,9 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link rel="stylesheet" href="/css/cs16.min.css" />
- <link rel="stylesheet" href="/src/index.css" />
- <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+ <link rel="stylesheet" href="./css/cs16.min.css" />
+ <link rel="stylesheet" href="./src/index.css" />
+ <link rel="icon" type="image/x-icon" href="./favicon.ico" />
<meta name="title" content="cs16.css" />
<meta
name="description"
@@ -27,159 +27,206 @@
content="CSS library based on Counter Strike 1.6 UI."
/>
- <title>cs16.css</title>
+ <title>cs16-defaults.css</title>
</head>
- <body>
+ <body class="cs">
<header>
<div class="top">
- <h1>cs16.css</h1>
+ <h1>cs16-defaults.css</h1>
<div class="links">
<a
- href="https://github.com/ekmas/cs16.css"
+ href="https://git.estrogen.zone/css16-defaults.css.git/about"
target="_blank"
- class="cs-btn gh"
+ class="cs-btn tree"
></a>
- <a
+ <!-- <a
href="https://x.com/samuelbreznjak"
target="_blank"
class="cs-btn x"
- ></a>
+ ></a> -->
</div>
</div>
- <p>CSS library based on Counter Strike 1.6 UI.</p>
+ <p>
+ CSS library based on
+ <a
+ href="https://cs16.samke.me/"
+ target="_blank"
+ rel="noopener noreferrer"
+ class="link"
+ >cs16.css</a
+ >, adapted to modify default styles of elements. Attempts to "just work"
+ everywhere. Abuses
+ <a
+ href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"
+ target="_blank"
+ rel="noopener noreferrer"
+ class="link"
+ >:has()</a
+ >
+ and
+ <a
+ href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"
+ target="_blank"
+ rel="noopener noreferrer"
+ class="link"
+ >:not()</a
+ >.
+ </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:
+ You can install cs16.css simply by pasting this to your html `head` tag
+ and adding <code>class="cs"</code> to your body (or wherever else you
+ wish to enable "cs1.6 mode"):
</p>
<div class="code-block">
<div class="inner">
- <button class="cs-btn">Copy</button>
+ <button>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>
+ <pre><code id="code-block">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://git.estrogen.zone/css16-defaults.css.git/plain/css/cs16.min.css&quot;&gt;</code></pre>
</div>
</div>
</div>
- <main>
+ <main style="display: flex; flex-direction: column; gap: 1rem">
<div>
<h2>Button</h2>
- <button class="cs-btn">Button</button>
- <button disabled class="cs-btn">Disabled</button>
+ <button>Button</button>
+ <button disabled>Disabled</button>
<div class="code-block">
- <button class="cs-btn toggle-vision">Show code</button>
+ <button class="toggle-vision">Show code</button>
<div class="inner hidden">
- <button class="cs-btn">Copy</button>
+ <button>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>
+ <pre><code id="code-block">&lt;button&gt;Button&lt;/button&gt;
+&lt;button disabled&gt;Disabled&lt;/button&gt;</code></pre>
</div>
</div>
</div>
<div>
<h2>Hr</h2>
- <hr class="cs-hr" />
+ <hr />
<div class="code-block">
- <button class="cs-btn toggle-vision">Show code</button>
+ <button class="toggle-vision">Show code</button>
<div class="inner hidden">
- <button class="cs-btn">Copy</button>
+ <button>Copy</button>
- <pre><code id="code-block">&lt;hr class=&quot;cs-hr&quot; /&gt;</code></pre>
+ <pre><code id="code-block">&lt;hr /&gt;</code></pre>
</div>
</div>
</div>
<div>
<h2>Checkbox</h2>
- <div class="cs-checkbox">
+ <div style="position: relative">
<input id="checkbox" type="checkbox" />
- <label class="cs-checkbox__label" for="checkbox">Checkbox</label>
+ <label for="checkbox">Checkbox</label>
</div>
+ <label>
+ <input id="checkbox" type="checkbox" />
+ Checkbox 2
+ </label>
<div class="code-block">
- <button class="cs-btn toggle-vision">Show code</button>
+ <button class="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>
+ <button>Copy</button>
+
+ <pre><code id="code-block">&lt;div style&#x3D;&quot;position: relative&quot;&gt;
+ &lt;input id&#x3D;&quot;checkbox&quot; type&#x3D;&quot;checkbox&quot; &#x2F;&gt;
+ &lt;label for&#x3D;&quot;checkbox&quot;&gt;Checkbox&lt;&#x2F;label&gt;
+&lt;&#x2F;div&gt;
+&lt;label&gt;
+ &lt;input id&#x3D;&quot;checkbox&quot; type&#x3D;&quot;checkbox&quot; &#x2F;&gt;
+ Checkbox 2
+&lt;&#x2F;label&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">First name</label>
+ <label for="input">
+ <input id="input" type="input" />
+ First name
+ </label>
<br />
<br />
- <input type="text" value="John Doe" class="cs-input" />
- <input type="text" disabled value="disabled" class="cs-input" />
+ <input type="text" value="John Doe" />
+ <input type="text" disabled value="disabled" />
<div class="code-block">
- <button class="cs-btn toggle-vision">Show code</button>
+ <button class="toggle-vision">Show code</button>
<div class="inner hidden">
- <button class="cs-btn">Copy</button>
+ <button>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;
+ <pre><code id="code-block">&lt;label for&#x3D;&quot;input&quot;&gt;
+ &lt;input id&#x3D;&quot;input&quot; type&#x3D;&quot;input&quot; &#x2F;&gt;
+ First name
+&lt;&#x2F;label&gt;
-&lt;br /&gt;
-&lt;br /&gt;
+&lt;br &#x2F;&gt;
+&lt;br &#x2F;&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>
+&lt;input type&#x3D;&quot;text&quot; value&#x3D;&quot;John Doe&quot; &#x2F;&gt;
+&lt;input type&#x3D;&quot;text&quot; disabled value&#x3D;&quot;disabled&quot; &#x2F;&gt;</code></pre>
</div>
</div>
</div>
<div>
<h2>Select</h2>
- <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>
+ <label>
+ Choose a train:
+ <select name="trains">
+ <option value="smile">Stadler SMILE</option>
+ <option value="desiro">Siemens Desiro</option>
+ <option value="twindexx-swiss-express">
+ Bombadier TWINDEXX Swiss Express
+ </option>
+ <option value="etr-610">Alstom ETR 610</option>
+ </select>
+ </label>
<div class="code-block">
- <button class="cs-btn toggle-vision">Show code</button>
+ <button class="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>
+ <button>Copy</button>
+
+ <pre><code id="code-block">&lt;label&gt;
+ Choose a train:
+ &lt;select name&#x3D;&quot;trains&quot;&gt;
+ &lt;option value&#x3D;&quot;smile&quot;&gt;Stadler SMILE&lt;&#x2F;option&gt;
+ &lt;option value&#x3D;&quot;desiro&quot;&gt;Siemens Desiro&lt;&#x2F;option&gt;
+ &lt;option value&#x3D;&quot;twindexx-swiss-express&quot;&gt;
+ Bombadier TWINDEXX Swiss Express
+ &lt;&#x2F;option&gt;
+ &lt;option value&#x3D;&quot;etr-610&quot;&gt;Alstom ETR 610&lt;&#x2F;option&gt;
+ &lt;&#x2F;select&gt;
+&lt;&#x2F;label&gt;</code></pre>
</div>
</div>
</div>
<div>
<h2>Radio Group</h2>
- <fieldset class="cs-fieldset">
+ <fieldset>
<legend>What is your favorite wild animal?</legend>
<div class="radio-wrapper">
<input type="radio" name="animal" id="elephant" />
@@ -200,14 +247,14 @@
</fieldset>
<div class="code-block">
- <button class="cs-btn toggle-vision">Show code</button>
+ <button class="toggle-vision">Show code</button>
<div class="inner hidden">
- <button class="cs-btn">Copy</button>
+ <button>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;div&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;
@@ -220,6 +267,7 @@
&lt;label for=&quot;cheetah&quot;&gt;Cheetah&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio-wrapper&quot;&gt;
+ referrerpolicy="noreferrer noopener"
&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;
@@ -241,10 +289,10 @@
</div>
<div class="code-block">
- <button class="cs-btn toggle-vision">Show code</button>
+ <button class="toggle-vision">Show code</button>
<div class="inner hidden">
- <button class="cs-btn">Copy</button>
+ <button>Copy</button>
<pre><code id="code-block">&lt;div class=&quot;cs-slider&quot;&gt;
&lt;div class=&quot;value&quot;&gt;
@@ -264,19 +312,18 @@
<section>
<button
type="button"
- class="cs-btn"
- onclick="document.querySelector('.cs-dialog').showModal();"
+ onclick="document.querySelector('dialog').showModal();"
>
Open dialog
</button>
- <dialog class="cs-dialog">
+ <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>
+ <button class="close"></button>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
@@ -288,36 +335,35 @@
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>
+ <button>OK</button>
+ <button>Cancel</button>
+ <button>Apply</button>
</menu>
</form>
</dialog>
</section>
<div class="code-block">
- <button class="cs-btn toggle-vision">Show code</button>
+ <button class="toggle-vision">Show code</button>
<div class="inner hidden">
- <button class="cs-btn">Copy</button>
+ <button>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;
+ onclick=&quot;document.querySelector(&apos;dialog&apos;).showModal();&quot;
&gt;
Open dialog
&lt;/button&gt;
- &lt;dialog class=&quot;cs-dialog&quot;&gt;
+ &lt;dialog&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;button class=&quot;close&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;content&quot;&gt;
Lorem ipsum dolor sit amet consectetur adipisicing elit.
@@ -329,9 +375,9 @@
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;buttonOK&lt;/button&gt;
+ &lt;buttonCancel&lt;/button&gt;
+ &lt;buttonApply&lt;/button&gt;
&lt;/menu&gt;
&lt;/form&gt;
&lt;/dialog&gt;
@@ -373,10 +419,10 @@
</div>
<div class="code-block">
- <button class="cs-btn toggle-vision">Show code</button>
+ <button class="toggle-vision">Show code</button>
<div class="inner hidden">
- <button class="cs-btn">Copy</button>
+ <button>Copy</button>
<pre><code id="code-block">&lt;div class=&quot;cs-tooltip&quot;&gt;
Right
@@ -416,16 +462,18 @@
<div class="cs-progress-bar">
<div style="width: 50%" class="bars"></div>
</div>
+ <progress value="1" min="0" max="3"></progress>
<div class="code-block">
- <button class="cs-btn toggle-vision">Show code</button>
+ <button class="toggle-vision">Show code</button>
<div class="inner hidden">
- <button class="cs-btn">Copy</button>
+ <button>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>
+&lt;/div&gt;
+&#60;progress value="1" min="0" max="3"&#62;&#60;/progress&#62;</code></pre>
</div>
</div>
</div>
@@ -473,10 +521,10 @@
</div>
<div class="code-block">
- <button class="cs-btn toggle-vision">Show code</button>
+ <button class="toggle-vision">Show code</button>
<div class="inner hidden">
- <button class="cs-btn">Copy</button>
+ <button>Copy</button>
<pre><code id="code-block">&lt;div class=&quot;cs-tabs&quot;&gt;
&lt;input
@@ -524,7 +572,13 @@
<footer>
Released under MIT License. Made by
- <a target="_blank" href="http://samke.me">Samuel</a>.
+ <a target="_blank" href="https://samke.me">Samuel</a>. Modified by
+ <a
+ href="https://mem.estrogen.zone"
+ target="_blank"
+ rel="noopener noreferrer"
+ >memdmp</a
+ >.
</footer>
<script type="module" src="./src/main.js"></script>
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-04 21:01:10 +0000