Split and re-ordered SCSS files for easier overrides of defaults (#4)

* Split SCSS for easier changes * Re-ordered SCSS files for easier overrides of defaults * Fixed padding classes with auto value * Added theme """stub"""
2026-05-11 13:32:00 +02:00
parent 95ffb881f9
commit 91098bc437
68 changed files with 926 additions and 786 deletions
@@ -0,0 +1,206 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+
+/* Defaults > Inputs */
+
+/* Defaults > Inputs > Commons */
+
+button, input, textarea, select {
+    border: 0;
+
+    // Removing ugly-ass white glow when editing text-related inputs.
+    // Shit looks straight out of winforms in 2023...
+    outline: none;
+
+    color: #{$color-text-inputs};
+    background-color: #{$color-background-input};
+
+    &:not(.no-focus) {
+        &:focus {
+            box-shadow: 0 0 3px 0 #{$color-glow-input};
+        }
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        background-color: #{$color-background-input-disabled} !important;
+    }
+}
+
+label {
+    cursor: pointer;
+    user-select: none;
+}
+
+
+/* Defaults > Inputs > Checkbox & Radio */
+
+input[type=checkbox], input[type=radio] {
+    width: 1.65em;
+    height: 1.65em;
+    background-color: #{$color-background-input-unchecked};
+
+    &:checked {
+        background-color: #{$color-background-input-checked};
+    }
+
+    position: relative;
+    vertical-align: middle;
+
+    &:not(:disabled) {
+        cursor: pointer;
+    }
+    &:disabled {
+        &:before {
+            opacity: 60%;
+        }
+    }
+}
+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%;
+}
+
+
+/* Defaults > Inputs > Checkbox */
+
+input[type=checkbox] {
+    &.cb-pretty, &.checkbox-pretty {
+        text-align: center;
+        padding: 0;
+
+        &:before {
+            content: "✘";
+        }
+
+        &:checked {
+            &:before {
+                content: "✔";
+            }
+        }
+    }
+}
+
+
+/* Defaults > 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%);
+            }
+        }
+    }
+}
+
+
+/* Defaults > Inputs > Buttons */
+
+button {
+    cursor: pointer;
+    background-color: #{$color-background-button};
+
+    &:hover {
+        background-color: #{$color-background-button-hover};
+    }
+
+    &.btn-primary {
+        background-color: #{$color-background-button-primary};
+
+        &:hover {
+            background-color: #{$color-background-button-primary-hover};
+        }
+    }
+
+    &.btn-success {
+        background-color: #{$color-background-button-success};
+
+        &:hover {
+            background-color: #{$color-background-button-success-hover};
+        }
+    }
+
+    &.btn-error {
+        background-color: #{$color-background-button-error};
+
+        &:hover {
+            background-color: #{$color-background-button-error-hover};
+        }
+    }
+
+    &.btn-warning {
+        background-color: #{$color-background-button-warning};
+
+        &:hover {
+            background-color: #{$color-background-button-warning-hover};
+        }
+    }
+}