Added monospace text and nowrap for tables

Update index.php, tables.php, and 7 more files...
Improved radio inputs with more styles and examples, Added disabled checkboxes and radios
2025-08-25 23:36:25 +02:00 · 2025-08-24 23:55:56 +02:00 · 2025-08-24 18:15:22 +02:00 · 2025-08-24 17:11:40 +02:00 · 2025-03-05 21:34:22 +01:00
24 changed files with 418 additions and 100 deletions
--- a/htdocs/index.php
+++ b/htdocs/index.php
@@ -9,7 +9,8 @@
    <meta name="robots" content="index, follow">
    <link rel="icon" type="image/svg+xml" href="./favicon.svg">
    <link rel="alternate icon" href="./favicon.ico">
-    <link rel="stylesheet" href="./css/nibblepoker.min.css">
+    <link rel="stylesheet" href="./css/nibblepoker.css">
+    <!--<link rel="stylesheet" href="./css/nibblepoker.min.css">-->
    <link rel="stylesheet" href="./css/debugger.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
          crossorigin="anonymous"
@@ -93,7 +94,7 @@
    <?php include("./parts/grids.php"); ?>

    <!-- Core > Tables -->
-    <?php include("./parts/tables_core.php"); ?>
+    <?php include("./parts/core/tables.php"); ?>

    <!-- Core > Inputs -->
    <?php include("./parts/core/inputs.php"); ?>
@@ -109,7 +110,7 @@
    <?php include("./parts/buttons.php"); ?>

    <!-- Site > Tables -->
-    <?php include("./parts/tables_site.php"); ?>
+    <?php include("./parts/examples/tables.php"); ?>


    <!-- Examples > Inputs -->
--- a/htdocs/parts/core/inputs.php
+++ b/htdocs/parts/core/inputs.php
@@ -43,23 +43,23 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
    </div>

    <div class="px-s mb-m">
-        <input type="radio" id="demo-core-radio-1">
+        <input type="radio" id="demo-core-radio-1" name="demo-core-radio" checked>
        <label for="demo-core-radio-1">Radio 1</label><br>
-        <input type="radio" id="demo-core-radio-2">
+        <input type="radio" id="demo-core-radio-2" name="demo-core-radio">
        <label for="demo-core-radio-2">Radio 2</label><br>
-        <input type="radio" id="demo-core-radio-3">
+        <input type="radio" id="demo-core-radio-3" name="demo-core-radio" disabled>
        <label for="demo-core-radio-3">Radio 3</label>
        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
-            (input[type=radio]+label+br)*3
+            (input[type=radio][name=myRadioInput]+label+br)*3
        </code>
    </div>

    <div class="px-s mb-m">
-        <input type="checkbox" id="demo-core-combo-1">
+        <input type="checkbox" id="demo-core-combo-1" checked>
        <label for="demo-core-combo-1">Checkbox 1</label><br>
        <input type="checkbox" id="demo-core-combo-2">
        <label for="demo-core-combo-2">Checkbox 2</label><br>
-        <input type="checkbox" id="demo-core-combo-3">
+        <input type="checkbox" id="demo-core-combo-3" disabled>
        <label for="demo-core-combo-3">Checkbox 3</label>
        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
            (input[type=checkbox]+label+br)*3
--- a/htdocs/parts/core/tables.php
+++ b/htdocs/parts/core/tables.php
@@ -13,8 +13,8 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 </div>
 <section class="p-s">

-    <div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
-        ⚠️ These styles may slightly change again before the 1.0.0 release ⚠️
+    <div class="bkgd-blue t-w-400 t-center w-full r-l border p-xs mt-xxs mb-m">
+        ℹ️ Check the <a href="#tables-site">Examples &gt; Tables</a> section for styled examples.
    </div>

    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Default table</h3>
--- a/htdocs/parts/examples/inputs.php
+++ b/htdocs/parts/examples/inputs.php
@@ -14,7 +14,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 </div>
 <section class="p-s">

-    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Basic inputs</h3>
+    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Text inputs</h3>

    <div class="px-s mb-m">
        <label for="demo-core-text">Text Input: </label>
@@ -33,5 +33,65 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

    </div>

-    <p class="mt-m t-bold">TODO: Add other types</p>
+
+    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Checkboxes</h3>
+
+    <div class="px-s mb-m">
+        <input type="checkbox" id="demo-site-combo-1" class="cb-pretty r-m border" checked>
+        <label for="demo-site-combo-1">Checkbox 1</label><br>
+        <input type="checkbox" id="demo-site-combo-2" class="cb-pretty r-m border">
+        <label for="demo-site-combo-2">Checkbox 2</label><br>
+        <input type="checkbox" id="demo-site-combo-3" class="cb-pretty r-m border" disabled>
+        <label for="demo-site-combo-3">Checkbox 3</label>
+
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            (input[type=checkbox]<b>.cb-pretty.r-m.border</b>+label+br)*3
+        </code>
+    </div>
+
+
+    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Radio inputs</h3>
+
+    <div class="px-s mb-m">
+        <input type="radio" id="demo-site-radio-1-solid" name="demo-site-radio-solid" class="radio-solid border" checked>
+        <label for="demo-site-radio-1-solid">Radio 1</label>
+        <br>
+        <input type="radio" id="demo-site-radio-2-solid" name="demo-site-radio-solid" class="radio-solid border">
+        <label for="demo-site-radio-2-solid">Radio 2</label>
+        <br>
+        <input type="radio" id="demo-site-radio-3-solid" name="demo-site-radio-solid" class="radio-solid border radio-unchecked-subtle">
+        <label for="demo-site-radio-3-solid">Radio 3</label><kbd class="ml-s">.radio-unchecked-subtle</kbd>
+        <br>
+        <input type="radio" id="demo-site-radio-4-solid" name="demo-site-radio-solid" class="radio-solid border radio-unchecked-dashed">
+        <label for="demo-site-radio-4-solid">Radio 4</label><kbd class="ml-s">.radio-unchecked-dashed</kbd>
+        <br>
+        <input type="radio" id="demo-site-radio-5-solid" name="demo-site-radio-solid" class="radio-solid border" disabled>
+        <label for="demo-site-radio-5-solid">Radio 5</label>
+
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            (input[type=radio][name=myRadioInput]<b>.radio-solid.border</b>+label+br)*3
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <input type="radio" id="demo-site-radio-1-3d" name="demo-site-radio-3d" class="radio-3d border" checked>
+        <label for="demo-site-radio-1-3d">Radio 1</label>
+        <br>
+        <input type="radio" id="demo-site-radio-2-3d" name="demo-site-radio-3d" class="radio-3d border">
+        <label for="demo-site-radio-2-3d">Radio 2</label>
+        <br>
+        <input type="radio" id="demo-site-radio-3-3d" name="demo-site-radio-3d" class="radio-3d border radio-unchecked-subtle">
+        <label for="demo-site-radio-3-3d">Radio 3</label><kbd class="ml-s">.radio-unchecked-subtle</kbd>
+        <br>
+        <input type="radio" id="demo-site-radio-4-3d" name="demo-site-radio-3d" class="radio-3d border radio-unchecked-dashed">
+        <label for="demo-site-radio-4-3d">Radio 4</label><kbd class="ml-s">.radio-unchecked-dashed</kbd>
+        <br>
+        <input type="radio" id="demo-site-radio-5-3d" name="demo-site-radio-3d" class="radio-3d border" disabled>
+        <label for="demo-site-radio-5-3d">Radio 5</label>
+
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            (input[type=radio][name=myRadioInput]<b>.radio-3d.border</b>+label+br)*3
+        </code>
+    </div>
+
 </section>
--- a/htdocs/parts/examples/tables.php
+++ b/htdocs/parts/examples/tables.php
@@ -0,0 +1,126 @@
+<?php
+// Making sure the file is included and not accessed directly.
+if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
+    header('HTTP/1.1 403 Forbidden'); die();
+}
+?>
+
+<a id="tables-site"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Tables
+        <i class="fa-solid fa-table f-right"></i>
+    </h2>
+</div>
+<section class="p-s">
+
+    <div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
+        ⚠️ These styles have specific limitations you should be aware of ⚠️
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
+    <div class="px-s mb-m">
+        <p class="mb-xxs">
+            Tables can quickly be styled by simply using the <span class="code">.table-stylish</span> class.
+        </p>
+        <p class="mb-xs">
+            However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.<br>
+            Therefore, the <span class="code">.o-hidden</span> is automatically applied to the table itself.<br>
+            A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size.
+        </p>
+        <table class="table-stylish table-p-s border r-l">
+            <thead>
+            <tr>
+                <th>Head 1</th>
+                <th>Head 2</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td>Cell 1.1</td>
+                <td>Cell 1.2</td>
+            </tr>
+            <tr>
+                <td>Cell 2.1</td>
+                <td>Cell 2.2</td>
+            </tr>
+            </tbody>
+        </table>
+        <code class="d-block p-xxs border r-s mt-s">
+            table<b>.table-stylish.table-p-s.border.r-l</b><br>
+            &nbsp;&nbsp;thead>tr>th*2<br>
+            &nbsp;&nbsp;tbody>tr*2>td*2
+        </code>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-xxs">Scrollable table</h3>
+    <div class="px-s">
+        <p class="mb-xxs mb-m">
+            Scrollable tables can be obtained by combining the overflow utility classes and the
+            <span class="code">.table-no-wrap</span> class to prevent cell from collapsing before scrolling.
+        </p>
+        <p class="mb-xxs mb-m">
+            This special class can be applied to the following elements: <br>
+            <span class="ml-s">
+                <span class="code">table</span>,
+                <span class="code">thead</span>,
+                <span class="code">tbody</span>,
+                <span class="code">tr</span>,
+                <span class="code">th</span>,
+                <span class="code">td</span>
+            </span>
+        </p>
+        <p class="mb-xxs mb-m">
+            In turn, every <span class="code">td</span> element under one of these elements will no longer wrap text.
+        </p>
+
+        <div class="w-full ox-scroll">
+            <table class="table-stylish table-p-s border r-l">
+                <thead>
+                <tr>
+                    <th>Table without the <span class="code">.table-no-wrap</span> class</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque.
+                        In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula.
+                        Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl.
+                        In hac habitasse platea dictumst.
+                        Integer non libero tempor, sollicitudin lorem vitae, auctor arcu.
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div class="w-full ox-scroll">
+            <table class="table-stylish table-p-s border r-l table-no-wrap">
+                <thead>
+                <tr>
+                    <th>Table with the <span class="code">.table-no-wrap</span> class</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque.
+                        In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula.
+                        Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl.
+                        In hac habitasse platea dictumst.
+                        Integer non libero tempor, sollicitudin lorem vitae, auctor arcu.
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <code class="d-block p-xxs border r-s mt-s">
+            <b>div.w-full.ox-scroll</b><br>
+            &nbsp;&nbsp;table.table-stylish.table-p-s.border.r-l<b>.table-no-wrap</b><br>
+            &nbsp;&nbsp;&nbsp;&nbsp;thead>tr>th*2<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;tbody>tr*2>td*2
+        </code>
+    </div>
+
+</section>
--- a/htdocs/parts/tables_site.php
+++ b/htdocs/parts/tables_site.php
@@ -1,53 +0,0 @@
-<?php
-// Making sure the file is included and not accessed directly.
-if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
-    header('HTTP/1.1 403 Forbidden'); die();
-}
-?>
-
-<a id="tables-site"></a>
-<div class="p-xs b r-s bkgd-grid mt-m">
-    <h2 class="t-w-500 t-size-14">Tables
-        <i class="fa-solid fa-table f-right"></i>
-    </h2>
-</div>
-<section class="p-s">
-
-    <div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
-        ⚠️ These styles require a special workaround to work properly ⚠️
-    </div>
-
-    <h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
-    <div class="px-s">
-        <p class="mb-xxs">
-            Tables can quickly be styled by simply using the <span class="code">.table-stylish</span> class.
-        </p>
-        <p class="mb-xs">
-            However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.<br>
-            Therefore, the <span class="code">.o-hidden</span> is automatically applied to the table itself.<br>
-            A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size.
-        </p>
-        <table class="table-stylish table-p-s border r-l">
-            <thead>
-                <th>Head 1</th>
-                <th>Head 2</th>
-            </thead>
-            <tbody>
-            <tr>
-                <td>Cell 1.1</td>
-                <td>Cell 1.2</td>
-            </tr>
-            <tr>
-                <td>Cell 2.1</td>
-                <td>Cell 2.2</td>
-            </tr>
-            </tbody>
-        </table>
-        <code class="d-block p-xxs border r-s mt-s">
-            table<b>.table-stylish.table-p-s.border.r-l</b><br>
-            &nbsp;&nbsp;thead>th>td*2<br>
-            &nbsp;&nbsp;tbody>tr*2>td*2
-        </code>
-    </div>
-
-</section>
--- a/htdocs/parts/text_styles.php
+++ b/htdocs/parts/text_styles.php
@@ -49,6 +49,12 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
            <td><span class="code">.t-overline</span></td>
            <td><span class="t-muted">N/A</span></td>
        </tr>
+        <tr>
+            <td><p class="t-bold">Monospace</p></td>
+            <td><p class="t-monospace">monospace text</p></td>
+            <td><span class="code">.t-monospace</span></td>
+            <td><span class="t-muted">N/A</span></td>
+        </tr>
        </tbody>
    </table>
 </section>
--- a/scss/core/containers.scss
+++ b/scss/core/containers.scss
@@ -1,4 +1,4 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

 /* Core > Containers */

--- a/scss/core/cursor.scss
+++ b/scss/core/cursor.scss
@@ -0,0 +1,44 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Cursors */
+
+@mixin cursor-maker($cursor-type) {
+  .c-#{$cursor-type}, .cursor-#{$cursor-type} {
+    cursor: #{$cursor-type} !important;
+  }
+}
+
+@include cursor-maker("auto");
+@include cursor-maker("default");
+@include cursor-maker("pointer");
+@include cursor-maker("context-menu");
+@include cursor-maker("help");
+@include cursor-maker("progress");
+@include cursor-maker("wait");
+@include cursor-maker("crosshair");
+@include cursor-maker("not-allowed");
+@include cursor-maker("zoom-in");
+@include cursor-maker("zoom-out");
+@include cursor-maker("grab");
+@include cursor-maker("cell");
+@include cursor-maker("text");
+@include cursor-maker("vertical-text");
+@include cursor-maker("alias");
+@include cursor-maker("copy");
+@include cursor-maker("move");
+@include cursor-maker("no-drop");
+@include cursor-maker("all-scroll");
+@include cursor-maker("col-resize");
+@include cursor-maker("row-resize");
+@include cursor-maker("n-resize");
+@include cursor-maker("e-resize");
+@include cursor-maker("s-resize");
+@include cursor-maker("w-resize");
+@include cursor-maker("ne-resize");
+@include cursor-maker("nw-resize");
+@include cursor-maker("se-resize");
+@include cursor-maker("sw-resize");
+@include cursor-maker("ew-resize");
+@include cursor-maker("ns-resize");
+@include cursor-maker("nesw-resize");
+@include cursor-maker("nwse-resize");
--- a/scss/core/table.scss
+++ b/scss/core/table.scss
@@ -18,6 +18,15 @@ tr, td {
  }
 }

+.table-no-wrap,
+.table-no-wrap > td, .table-no-wrap > th,
+.table-no-wrap > tr > td, .table-no-wrap > tr > th,
+.table-no-wrap > thead > tr > td, .table-no-wrap > thead > tr > th,
+.table-no-wrap > tbody > tr > td, .table-no-wrap > tbody > tr > th {
+  white-space: nowrap;
+  text-wrap: nowrap;
+}
+

 /* Core > Tables > Cell Padding */

--- a/scss/core/text.scss
+++ b/scss/core/text.scss
@@ -95,6 +95,11 @@ s, .t-strikethrough {
 	text-decoration: overline;
 }

+// Defined in core/code.scss !
+//.t-monospace {
+//	font-family: monospace, monospace;
+//}
+

 /* Core > Text > Alignment */

--- a/scss/nibblepoker.scss
+++ b/scss/nibblepoker.scss
@@ -63,6 +63,7 @@
@import 'core/overflow';   // Defines generic overflow rules (.o-hidden, .ox-scroll, ...)
@import 'core/lists';
@import 'core/table';
+@import 'core/cursor';

 /* Core > Rounding */
@import 'core/rounding/global';
--- a/scss/site/backgrounds.scss
+++ b/scss/site/backgrounds.scss
@@ -1,4 +1,4 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

 /* Site > Misc > Backgrounds */

@@ -17,30 +17,35 @@
@if($include-grid-backgrounds) {
 	// The element rules override rules in `base.scss ~94`
 	.bkgd-grid10, .bkgd-surround, header, nav, footer {
-		//background: #{$color-background-surround};
-		background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center;
-
-		//background:
-		//	#{$color-background-surround}
-		//	url("data:image/png;base64,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")
-		//	repeat scroll center center;
+		@if($use-b64-backgrounds) {
+			background: #{$color-background-surround} url("data:image/png;base64,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") repeat scroll center center;
+		} @else {
+			background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center;
+		}
 	}

 	.bkgd-grid20 {
-		//background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/old-mathematics-v2-0.25.png") repeat scroll center center;
-		// FIXME: Fix the code using this class !!!
-		background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center;
+		@if($use-b64-backgrounds) {
+			background: #{$color-background-main-headings} url("data:image/png;base64,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") repeat scroll center center;
+		} @else {
+			background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center;
+		}
 	}

 	.bkgd-grid30 {
-		background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.3.png") repeat scroll center center;
+		@if($use-b64-backgrounds) {
+			background: #{$color-background-main-headings} url("data:image/png;base64,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") repeat scroll center center;
+		} @else {
+			background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.3.png") repeat scroll center center;
+		}
 	}

 	.bkgd-grid40, .bkgd-grid {
-		background: #{$color-background-surround}
-		url("data:image/png;base64,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") repeat scroll center center;
-
-		//background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
+		@if($use-b64-backgrounds) {
+			background: #{$color-background-surround} url("data:image/png;base64,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") repeat scroll center center;
+		} @else {
+			background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
+		}
 	}
 }

--- a/scss/site/borders.scss
+++ b/scss/site/borders.scss
@@ -1,3 +1,4 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

 .border, code, .code, kbd {
 	border-color: #{$color-border-surround};
--- a/scss/site/code.scss
+++ b/scss/site/code.scss
@@ -1,6 +1,8 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

-code, .code, kbd {
+/* Core > Code */
+
+code, .code, kbd, .t-monospace {
 	font-family: Consolas, "Courier New", monospace;
 }

--- a/scss/site/content.scss
+++ b/scss/site/content.scss
@@ -1,4 +1,4 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

 .content-search-entry {
 	min-height: #{$content-search-image-size};
--- a/scss/site/image.scss
+++ b/scss/site/image.scss
@@ -1,4 +1,4 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

 .img-text {
 	height: 1em;
--- a/scss/site/input.scss
+++ b/scss/site/input.scss
@@ -1,4 +1,4 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

 /* Site > Elements > Inputs */

@@ -22,6 +22,7 @@ button, input, textarea, select {
 	
 	&:disabled {
 		cursor: not-allowed;
+		background-color: #{$color-background-code} !important;
 	}
 }

@@ -30,27 +31,131 @@ label {
 	user-select: none;
 }

-/* Site > Elements > Inputs > Checkbox */
+/* Site > Elements > Inputs > Checkbox & Radio */

-input[type=checkbox] {
+input[type=checkbox], input[type=radio] {
 	width: 1.65em;
 	height: 1.65em;
 	background-color: #{$color-background-checkbox-unchecked};
 	
-	cursor: pointer;
-	
 	&:checked {
 		background-color: #{$color-background-checkbox-checked};
 	}
 	
 	position: relative;
 	vertical-align: middle;
+
+	&:not(:disabled) {
+		cursor: pointer;
+	}
+	&:disabled {
+		&:before {
+			opacity: 60%;
+		}
+	}
 }
-input[type="checkbox"] + label {
+input[type="checkbox"] + label, input[type="radio"] + label {
 	position: relative;
 	display: inline-block;
 	vertical-align: middle;
 }
+input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label {
+	cursor: not-allowed;
+	opacity: 60%;
+}
+
+/* Site > Elements > Inputs > Checkbox */
+
+input[type=checkbox] {
+	&.cb-pretty, &.checkbox-pretty {
+		text-align: center;
+		padding: 0;
+
+		&:before {
+			content: "✘";
+		}
+
+		&:checked {
+			&:before {
+				content: "✔";
+			}
+		}
+	}
+}
+
+/* Site > Elements > Inputs > Radio */
+
+input[type=radio] {
+	border-radius: 50%;
+
+	// Special fix required for standalone pages.
+	// This rule somehow gets ignored if the stylesheet is placed in the DOM.
+	// Even tho it is present in reset.css and if it get marked as important...
+	&:before {
+		box-sizing: border-box;
+	}
+
+	&.radio-solid, &.radio-3d {
+		text-align: center;
+		padding: 0;
+
+		&:before {
+			content: "";
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			width: 60%;
+			height: 60%;
+			border-radius: 50%;
+			background-color: transparent;
+			border-color: white;
+		}
+
+		&:checked {
+			&:before {
+				background-color: white;
+			}
+		}
+	}
+
+	&.radio-solid {
+		&:before {
+			border-style: double;
+			border-width: 2px;
+		}
+	}
+
+	&.radio-3d {
+		&:before {
+			border-style: inset;
+			border-width: 2px;
+		}
+
+		&:checked {
+			&:before {
+				border-style: outset;
+			}
+		}
+	}
+
+	&.radio-unchecked-subtle {
+		&:not(:checked) {
+			&:before {
+				opacity: 50%;
+			}
+		}
+	}
+
+	&.radio-unchecked-dashed {
+		&:not(:checked) {
+			&:before {
+				opacity: 75%;
+				clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
+			}
+		}
+	}
+}

 /* Site > Elements > Inputs > Buttons */

--- a/scss/site/mobile.scss
+++ b/scss/site/mobile.scss
@@ -1,4 +1,4 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

 /* Site > Fixes > Mobile */

--- a/scss/site/modal.scss
+++ b/scss/site/modal.scss
@@ -1,4 +1,4 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

 .modal {
 	position: absolute;
--- a/scss/site/scrollbar.scss
+++ b/scss/site/scrollbar.scss
@@ -1,4 +1,4 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

 /* Site > Elements > Scrollbars */

--- a/scss/site/text.scss
+++ b/scss/site/text.scss
@@ -1,4 +1,4 @@
-// NibblePoker.lu CSS - MIT (C) 2023-2024 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

 /* Site > Text */

--- a/scss/site/wedge.scss
+++ b/scss/site/wedge.scss
@@ -1,4 +1,4 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

 /* Custom Elements > Wedge */

--- a/scss/variables.scss
+++ b/scss/variables.scss
@@ -220,8 +220,6 @@ $color-background-inputs: map-get((
 ), $theme);

 // TODO: Implement better ones !
-$color-background-checkbox-checked: $color-apollo-08;
-$color-background-checkbox-unchecked: $color-apollo-27;

 $color-background-button: map-get((
 		teal: $color-apollo-40,
@@ -237,6 +235,14 @@ $color-background-button-hover: map-get((
 		nibblepoker: #373841,
 ), $theme);

+$color-background-checkbox-checked: $color-apollo-08;
+$color-background-checkbox-unchecked: $color-apollo-27;
+//$color-background-checkbox-disabled: $color-background-button;
+
+$color-background-radio-checked: $color-apollo-08;
+$color-background-radio-unchecked: $color-apollo-27;
+//$color-background-radio-disabled: $color-background-button-hover;
+
 $color-background-button-primary: #{$color-apollo-custom-30};
 $color-background-button-primary-hover: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%);
Author	SHA1	Message	Date
Herwin Bozet	44678bd9f4	Added monospace text and nowrap for tables Update index.php, tables.php, and 7 more files...	2025-08-25 23:36:25 +02:00
Herwin Bozet	17cb37d5cf	Improved radio inputs with more styles and examples, Added disabled checkboxes and radios Update index.php, inputs.php, and 3 more files...	2025-08-24 23:55:56 +02:00
Herwin Bozet	0739af9259	Added radio input styles, improved SASS for checkboxes and radios Update inputs.php, inputs.php, and 2 more files...	2025-08-24 18:15:22 +02:00
Herwin Bozet	38b3f988b7	Added Base64 encoded backgrounds for self-contained situations Update backgrounds.scss	2025-08-24 17:11:40 +02:00
Herwin Bozet	9c9b1e17bd	Added cursors, Fixed public domain header text in SCSS files Update containers.scss, cursor.scss, and 12 more files...	2025-03-05 21:34:22 +01:00