Better scrapbook bg, radio buttons width

EternityForest · Apr 25, 2024 · 421aff7 · 421aff7
1 parent cd84b2c
commit 421aff7
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 5 deletions.
diff --git a/css/barrel.css b/css/barrel.css
@@ -2565,6 +2565,7 @@ input[type='radio'] {
     box-shadow: var(--concave-item-box-shadow);
     border: var(--control-border);
     width: var(--control-height);
+    flex-basis: var(--control-height);
     height: var(--control-height);
     flex-grow: 0 !important;
     --slider-position: 0px;
@@ -2604,13 +2605,40 @@ input[type='checkbox'].led {
     width: var(--line-height);
     height: var(--line-height);
 
-    background-color: rgb(6, 65, 3);
-    box-shadow: #0000 0 -1px 7px 1px, inset #d5d5d5 0 -1px 9px, rgb(94 94 94 / 0%) 0 2px 12px;
+    background: rgb(6, 65, 3);
+    box-shadow: #55555500 0 -1px 7px 1px, inset #6d6d6d 0 -1px 9px, rgba(44, 44, 44, 0) 0 2px 12px;
+
+
+
+    &.led-red:checked {
+        background: rgb(255, 0, 0);
+        box-shadow: inset #7d3e3e 0 -1px 9px, rgba(243, 0, 0, 0.74) 0 2px 12px;
+    }
+
+    &.led-yellow:checked {
+        background: rgb(251, 255, 0);
+        box-shadow: inset #7d7c3e 0 -1px 9px, rgba(243, 239, 0, 0.74) 0 2px 12px;
+    }
 
     &.led-green:checked {
-        background-color: rgb(0 255 0);
+        background: rgb(0 255 0);
         box-shadow: inset #3f7d3e 0 -1px 9px, rgb(0 243 46 / 74%) 0 2px 12px;
     }
+
+    &.led-cyan:checked {
+        background: rgb(0, 247, 255);
+        box-shadow: inset #3e7d78 0 -1px 9px, rgba(0, 227, 243, 0.74) 0 2px 12px;
+    }
+
+    &.led-blue:checked {
+        background: rgb(0, 4, 255);
+        box-shadow: inset #443e7d 0 -1px 9px, rgba(0, 16, 243, 0.74) 0 2px 12px;
+    }
+
+    &.led-purple:checked {
+        background: rgb(255, 0, 234);
+        box-shadow: inset #7d3e7a 0 -1px 9px, rgba(243, 0, 243, 0.74) 0 2px 12px;
+    }
 }
 
 input[type='checkbox']:not(.toggle, .led) {

diff --git a/css/scrapbook/grunge_green.webp b/css/scrapbook/grunge_green.webp
diff --git a/css/scrapbook/grunge_green_2.webp b/css/scrapbook/grunge_green_2.webp
diff --git a/css/scrapbook/scrapbook_green.css b/css/scrapbook/scrapbook_green.css
@@ -7,7 +7,7 @@
     --accent-color: #4b626b;
     --hightlight-color: #3ac340;
     --border-color: rgba(36, 30, 30, 0.219);
-    --bg: linear-gradient(177deg, rgb(245 247 255 / 34%) 0%, rgba(101, 143, 87, 0.493) 100%), url(scrapbook/grunge_green.webp);
+    --bg: linear-gradient(177deg, rgb(245 247 255 / 28%) 0%, rgba(101, 143, 87, 0.493) 100%), url(scrapbook/grunge_green_2.webp);
     --fg: #101a10;
     --box-bg: rgb(219 229 201 / 64%);
     --3d-highlight: rgb(219 229 201);
@@ -109,4 +109,6 @@ button:disabled {
 
 input:disabled {
     background-color: #D0D0D0;
-}
+}
+
+
diff --git a/index.html b/index.html
@@ -77,6 +77,17 @@ <h4>The .stacked-form class</h4>
           <label>Another group<input></label>
           <label>More groups<input size="15"></label>
         </p>
+
+        <p>LED indicators are checkboxes with class led led-color</p>
+        <p>
+          <input checked type="checkbox" class="led led-red">
+          <input checked type="checkbox" class="led led-yellow">
+          <input checked type="checkbox" class="led led-green">
+          <input checked type="checkbox" class="led led-cyan">
+          <input checked type="checkbox" class="led led-blue">
+          <input checked type="checkbox" class="led led-purple">
+          <input type="checkbox" class="led led-purple">
+        </p>
         <label><input type="checkbox">A checkbox</label>