Round feathered, minor fixes

Author: Daniel Dunn

Diff for: README.md

@@ -51,6 +51,10 @@ Make a link look like it's a button.
 
 ## Utilities
 
+### .round-feathered
+
+Make an image smoothly fade out around the edges.
+
 ### .paper
 This object should have it's own background, it is like a popup you're going to put over something else.
 
@@ -93,6 +97,10 @@ display: flex.
 ### .padding
 The element will have a reasonable theme dependent amount of padding.
 
+### .padding-bottom
+Add padding just to bottom.  Useful for fixing scrollbar showing up
+when not needed.
+
 ### .margin
 The element will have a reasonable theme dependent amount of margin.
 

Diff for: css/barrel.css

@@ -269,6 +269,7 @@ header {
 header>*:only-child,
 header>*:only-child>:only-child {
     width: 100%;
+    flex-grow: 1;
     box-sizing: border-box;
     margin: 0px;
 }
@@ -515,6 +516,7 @@ table tr:first-child td {
 
 .decorative-image {
     display: none;
+    background-size: contain;
 }
 
 
@@ -527,8 +529,6 @@ table tr:first-child td {
     box-sizing: border-box;
     overflow-x: auto;
     flex-basis: fit-content;
-    flex-grow: 0.1;
-
     border-color: var(--border-color);
 }
 
@@ -539,7 +539,6 @@ table tr:first-child td {
     border-width: var(--border-width);
     margin-top: 0.8em;
     margin-bottom: 0.2em;
-    min-width: min-content;
     box-sizing: border-box;
     max-width: 100vw;
     overflow: auto;
@@ -548,7 +547,6 @@ table tr:first-child td {
     text-align: left;
     flex-grow: 1;
     flex-basis: min-content;
-    resize: both;
 }
 
 
@@ -579,18 +577,27 @@ table tr:first-child td {
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
-    gap: var(--gap);
 }
 
 .flex-col>* {
     box-sizing: border-box;
     flex: 1 1 auto;
     flex-basis: fit-content;
+    margin-block-end: var(--gap);
+}
+
+.flex-col>*:last-child {
+    margin-block-end: 0px;
+}
+
+.flex-col>*:nth-last-child(2) {
+    margin-block-end: 0px;
 }
 
 .flex-col footer,
 .flex-col header {
     flex-grow: 0;
+    margin-block-end: 0px;
 }
 
 .flex-row {
@@ -604,8 +611,6 @@ table tr:first-child td {
 
 .flex-row>* {
     box-sizing: border-box;
-    flex-grow: 1;
-    flex-shrink: 1;
     flex-basis: fit-content;
     margin: 0px;
 }
@@ -725,13 +730,15 @@ table tr:first-child td {
 
 .nogaps>.col-12 {
     width: 100%;
+    flex-grow: 1;
 }
 
-/*Sizes that are relative to approximately the width of a phone screem*/
+/*Sizes that are relative to approximately the width of a phone screen.
+A little smaller in flex to allow for expansion or fitting lots on a row*/
 .w-sm-full {
     width: 480px;
     max-width: calc(min(480px, 96vw));
-    flex-basis: 480px;
+    flex-basis: 320px;
     flex-shrink: 1;
 }
 
@@ -924,6 +931,11 @@ table tr:first-child td {
 
 /*Simple utilities */
 
+.round-feathered {
+    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.1) 67%, rgba(0, 0, 0, 0) 71%);
+    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.1) 67%, rgba(0, 0, 0, 0) 71%);
+}
+
 .paper {
     background: var(--box-bg);
 }
@@ -955,9 +967,10 @@ iframe.h-center {
     gap: 0px;
 }
 
-.nogaps>* {
+.nogaps>*:not(.specificity_hack) {
     margin: 0px;
     box-sizing: border-box;
+    margin-block-end: 0px;
 }
 
 .rounded {
@@ -1494,7 +1507,6 @@ header:not(.undecorated)>.tool-bar:only-child :is(a, a.button, select, p, h1, h2
     gap: var(--padding);
     border-top: var(--tool-bar-element-border);
     border-bottom: var(--tool-bar-element-border);
-    align-items: center;
 }
 
 .tool-bar select {
@@ -1555,9 +1567,8 @@ input[type=range] {
     --concave-item-box-shadow: none;
 }
 
-
-input[type=range]::-webkit-slider-runnable-track {
-    background: var(--control-bg);
+input[type="range"]::-webkit-slider-runnable-track {
+    background-color: color-mix(in srgb, var(--control-bg) 70%, var(--control-fg));
     border: var(--thin-border);
     border-radius: 250px;
     height: calc(var(--control-height) / 3);
@@ -1567,14 +1578,15 @@ input[type=range]::-webkit-slider-thumb {
     margin-top: -7.8px;
     width: calc(var(--control-height) / 1.6);
     height: calc(var(--control-height) / 1.2);
-    background: var(--control-fg);
+    background-color: var(--highlight-color);
     border: var(--thin-border);
+    border-width: 2px;
     border-radius: 100px;
     -webkit-appearance: none;
 }
 
 input[type=range]::-moz-range-track {
-    background: var(--control-bg);
+    background-color: color-mix(in srgvb, var(--control-bg) 70%, var(--control-fg));
     border: var(--thin-border);
     border-radius: 250px;
     height: calc(var(--control-height) / 3);
@@ -1583,8 +1595,9 @@ input[type=range]::-moz-range-track {
 input[type=range]::-moz-range-thumb {
     width: calc(var(--control-height) / 1.6);
     height: calc(var(--control-height) / 1.2);
-    background: var(--control-fg);
+    background-color: color-mix(in srgb, var(--accent-color) 50%, var(--control-bg));
     border: var(--thin-border);
+    border-width: 2px;
     border-radius: 100px;
 }
 

Diff for: index.html

@@ -187,14 +187,16 @@ <h4>Here's a form with no classes</h4>
 
 
         <h4>Meters</h4>
-        <p>Styled</p>
-        <p class="styled">
+        <p>
+          <input type="range" class="w-full">
+        </p>
+        <p>
           <meter class="w-full" min="0" max="100" low="25" high="75" optimum="100" value="10"></meter>
         </p>
-        <p class="styled">
+        <p>
           <meter class="w-full" min="0" max="100" low="25" high="75" optimum="100" value="50"></meter>
         </p>
-        <p class="styled">
+        <p>
           <meter class="w-full" min="0" max="100" low="25" high="75" optimum="100" value="80"></meter>
         </p>
       </section>