From 5288e7078f6c34e93e67f4eb7b685f0107a81ad0 Mon Sep 17 00:00:00 2001
From: Geoff Doty <n2geoff@gmail.com>
Date: Wed, 24 Jan 2024 16:56:43 -0500
Subject: [PATCH] :read-only cannot be used this way

---
 src/stylelite.css | 820 +++++++++++++++++++++++-----------------------
 1 file changed, 410 insertions(+), 410 deletions(-)

diff --git a/src/stylelite.css b/src/stylelite.css
index 9980480..56ed6da 100644
--- a/src/stylelite.css
+++ b/src/stylelite.css
@@ -1,410 +1,410 @@
-/*! Stylelite v:0.6.5 | MIT LICENSE | https://github.com/n2geoff/stylelite */
-:root {
-    --size: 1rem;
-    --radius: 0rem;
-    --fg: #17202A;
-    --bg: #FDFEFE;
-    --mg: #99A3A4;
-
-    --white: #FFF;
-    --black: #000;
-    --gray: #777;
-
-    --light: #EEE;
-    --dark: #222;
-
-    --theme: steelblue;
-
-    --warning: #B7950B;
-    --danger: #C0392B;
-    --success: #1E8449;
-}
-
-[data-theme=dark] {
-    --mg: #99A3A4;;
-    --bg: #17202A;
-    --fg: #EAECEE;
-}
-
-* {padding:0;margin:0}
-
-*,*:before,*:after {
-    box-sizing: border-box;
-}
-
-html,body {
-    background: var(--bg);
-    color: var(--fg);
-    accent-color: var(--theme);
-    margin: 0;
-    padding: 0;
-    font-family: system-ui, sans-serif;
-    font-size: 16px;
-    letter-spacing: 0.0125em;
-    line-height: 1.5rem;
-    box-sizing: border-box;
-    padding: 0;
-}
-
-div, label, input, button, textarea, select {margin-bottom: .25rem;}
-
-p {margin: 1rem 0}
-
-img,embed,iframe,object,audio,video {
-    height: auto;
-    max-width: 100%;
-    border: none;
-}
-
-ol, ul {margin-left: 1rem}
-
-li {margin-left: 1rem}
-
-label {
-    display: inline-block;
-    font-weight: 600;
-    color: var(--dark);
-    white-space: nowrap;
-    vertical-align: top;
-}
-
-label.addon {
-    max-height: 2.5rem;
-    background: var(--light);
-    padding: .5rem 1rem;
-    text-align: center;
-    border: 1px solid var(--theme);
-}
-
-main {
-    margin: 0 auto;
-    padding: var(--size);
-    max-width: 1140px;
-}
-
-table {
-    background: var(--bg);
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%;
-}
-
-table>thead>tr>th {
-    border-bottom: 2px solid var(--theme);
-}
-
-table.striped tbody>:nth-child(2n-1) {
-    background: #f5f5f5;
-}
-
-th {
-    text-align: left;
-}
-
-th,td {
-    padding: .5rem;
-    border-bottom: 1px solid var(--theme);
-}
-
-table.condensed * {padding:0}
-
-fieldset {
-    background: var(--bg);
-    padding: 1rem;
-    border: 1px solid var(--theme);
-}
-
-legend {
-    font-size: larger;
-    font-weight: 600;
-    color: var(--theme);
-    background: var(--bg);
-    display: block;
-    width: fit-content;
-    padding: .25rem .5rem;
-    margin: 0;
-    line-height: inherit;
-    border: 1px solid var(--theme);
-}
-
-blockquote {
-    margin: var(--size) 0;
-    color: var(--black);
-    background: var(--light);
-    padding: var(--size);
-}
-
-blockquote.primary {background: #EBF5FB; color: var(--theme); border: 1px solid var(--theme)}
-blockquote.danger {background: #FDEDEC; color: var(--danger); border: 1px solid var(--danger)}
-blockquote.warn {background: #FEF9E7; color: var(--warning) ; border: 1px solid var(--warning)}
-blockquote.success {background: #EAFAF1; color: var(--success); border: 1px solid var(--success)}
-blockquote.default {background: #EEE; color: var(--dark); border: 1px solid var(--dark)}
-
-hr {
-    color: var(--theme);
-    border: 1px solid;
-}
-
-h1,h2,h3,h4,h5,h6 {
-    color: var(--theme);
-    margin: var(--size) 0;
-    padding-bottom: calc(var(--size) / 2);
-    text-transform: capitalize;
-}
-
-h1 {font-size: 2.2rem}
-h2 {font-size: 1.8rem}
-h3 {font-size: 1.4rem}
-h4 {font-size: 1.2rem}
-h5 {font-size: 1.1rem}
-h6 {font-size: 1rem}
-
-a {color: var(--theme)}
-a:hover {color: var(--dark);}
-
-section, article {
-    margin-bottom: 2rem;
-}
-
-article {
-    border: 1px solid rgba(0,0,0,.125);
-    background: var(--light);
-    padding: var(--size);
-}
-
-/* Forms */
-
-details {
-    margin: var(--size) 0;
-    color: var(--fg);
-    cursor: pointer;
-}
-
-details[open] {
-    background-color: var(--bg);
-    margin-bottom: var(--size);
-    border: 1px solid var(--theme);
-}
-
-details>* {
-    box-sizing: border-box;
-    padding: .5rem 1rem;
-}
-
-summary {
-    color: var(--theme);
-    height: 40px;
-    background-color: var(--bg);
-    border: 1px solid var(--theme);
-}
-
-a.button, button, input {
-    display: inline-block;
-    outline: none;
-    box-sizing: border-box;
-    font-size: 1rem;
-    background: var(--bg);
-    color: var(--fg);
-    min-width: fit-content;
-    width: 100%;
-    height: 2.5rem;
-    border: 1px solid var(--theme);
-    border-radius: var(--radius);
-    padding: .5rem 1rem;
-}
-
-input[type=color] {padding: .25rem}
-
-input[type="checkbox"],
-input[type="radio"]{
-    padding: 0;
-	width: 1.1rem;
-	height: 1.1rem;
-	margin-right: .5rem;
-    margin-top: .25rem;
-}
-
-button, input[type="reset"],input[type="submit"] {
-    display: inline-block;
-    border-radius: var(--radius);
-    width: initial;
-}
-
-button[disabled], button[disabled]:hover {
-    color: var(--gray);
-    background-color: var(--light);
-    border:  1px solid var(--gray);
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-button.link {
-    border: none;
-    background: none;
-    color: var(--theme)
-}
-
-button.link:hover {
-    background: none;
-    border: none;
-    color: var(--theme);
-    text-decoration: underline;
-}
-
-a.button, button {
-    background: var(--theme);
-    color: var(--white);
-}
-
-button.default {
-    background: var(--light);
-    color: var(--black);
-}
-
-button.primary {
-    background: var(--theme);
-    color: var(--white);
-}
-
-button.warning {
-    background: var(--warning);
-    color: var(--white);
-}
-
-button.danger {
-    background: var(--danger);
-    color: var(--white);
-}
-
-button.success {
-    background: var(--success);
-    color: var(--white);
-}
-
-a.button:hover, button:hover, input[type="reset"]:hover,input[type="submit"]:hover {
-    background: var(--dark);
-    border: 2px solid var(--theme);
-    color: var(--light);
-    cursor: pointer;
-}
-
-select:disabled, textarea:disabled,input:disabled, input:read-only {
-    cursor: not-allowed;
-    pointer-events: none;
-    border-color: var(--mg);
-}
-
-select:focus,textarea:focus,input:focus {
-    border: 2px solid var(--theme);
-}
-
-option { line-height: 1rem; vertical-align: center;}
-
-select,textarea {
-    display: inline-block;
-    outline: none;
-    font-size: var(--size);
-    height: 2.5rem;
-    width: 100%;
-    border: 1px solid var(--theme);
-    color: var(--fg);
-    background: var(--bg);
-    border-radius: var(--radius);
-    padding: 0 var(--size);
-    cursor: pointer;
-}
-
-select {
-    background: var(--bg) no-repeat 100%;
-    color: var(--fg);
-    padding: 0 clamp(.5rem, var(--size), 2rem);
-    appearance: none;
-    background-size: 1ex;
-    background-origin: content-box;
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>");
-}
-
-textarea {
-    overflow: auto;
-    resize: vertical;
-    border: 1px solid var(--theme);
-    height: calc(var(--size) * 6rem);;
-    padding: clamp(.5rem, var(--size), 2rem);
-    cursor: text;
-    color: var(--fg);
-}
-
-/* Navigation */
-
-nav {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: .25rem;
-    border-bottom: 1px solid var(--theme);
-}
-
-nav ul {display: flex;list-style-type: none;}
-nav li {padding-left: 1rem;}
-nav a {text-decoration: none;}
-
-nav.navbar {
-    padding: 1rem;
-    background: var(--theme);
-    color: var(--white);
-}
-
-nav.navbar a {color: var(--white)}
-
-/* Grid System */
-
-.grid {
-    display: grid;
-    gap: .25rem;
-    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
-    /* padding: 0; */
-}
-
-.row {
-    display: flex;
-    flex: 0 1 auto;
-    flex-direction: row;
-    flex-wrap: wrap;
-    column-gap: .5rem;
-    margin:0;
-    padding: .25rem 0;
-}
-
-.row>*, .col, .col-1, .col-2, .col-3, .col-4,.col-5 {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: stretch;
-    flex: 1;
-    padding: .5rem;
-    max-width: 100%;
-}
-
-.col-1 {flex: 1 !important;}
-.col-2 {flex: 2 !important;}
-.col-3 {flex: 3 !important;}
-.col-4 {flex: 4 !important;}
-.col-5 {flex: 5 !important;}
-
-/* Utilities */
-
-.group {display: flex;}
-.pointer {cursor: pointer;}
-.right {float:right}
-.left {float:left}
-.center {text-align: center;}
-.clear {content:'';display: table;clear:both}
-.outline {background: transparent; color: var(--theme); border: 1px solid var(--theme)}
-.underline {border-bottom: 1px solid var(--mg)}
-.rounded {border-radius: calc(var(--size) / 4);}
-.border {border: 1px solid var(--theme)}
-.no-space {margin: 0; padding:0;}
-.no-border {border: none}
-.no-padding {padding: 0}
-.no-margin {margin: 0}
-.no-theme {--theme: var(--fg)}
-*:disabled, .disable, .disable {pointer-events: none;}
+/*! Stylelite v:0.6.5 | MIT LICENSE | https://github.com/n2geoff/stylelite */
+:root {
+    --size: 1rem;
+    --radius: 0rem;
+    --fg: #17202A;
+    --bg: #FDFEFE;
+    --mg: #99A3A4;
+
+    --white: #FFF;
+    --black: #000;
+    --gray: #777;
+
+    --light: #EEE;
+    --dark: #222;
+
+    --theme: steelblue;
+
+    --warning: #B7950B;
+    --danger: #C0392B;
+    --success: #1E8449;
+}
+
+[data-theme=dark] {
+    --mg: #99A3A4;;
+    --bg: #17202A;
+    --fg: #EAECEE;
+}
+
+* {padding:0;margin:0}
+
+*,*:before,*:after {
+    box-sizing: border-box;
+}
+
+html,body {
+    background: var(--bg);
+    color: var(--fg);
+    accent-color: var(--theme);
+    margin: 0;
+    padding: 0;
+    font-family: system-ui, sans-serif;
+    font-size: 16px;
+    letter-spacing: 0.0125em;
+    line-height: 1.5rem;
+    box-sizing: border-box;
+    padding: 0;
+}
+
+div, label, input, button, textarea, select {margin-bottom: .25rem;}
+
+p {margin: 1rem 0}
+
+img,embed,iframe,object,audio,video {
+    height: auto;
+    max-width: 100%;
+    border: none;
+}
+
+ol, ul {margin-left: 1rem}
+
+li {margin-left: 1rem}
+
+label {
+    display: inline-block;
+    font-weight: 600;
+    color: var(--dark);
+    white-space: nowrap;
+    vertical-align: top;
+}
+
+label.addon {
+    max-height: 2.5rem;
+    background: var(--light);
+    padding: .5rem 1rem;
+    text-align: center;
+    border: 1px solid var(--theme);
+}
+
+main {
+    margin: 0 auto;
+    padding: var(--size);
+    max-width: 1140px;
+}
+
+table {
+    background: var(--bg);
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+}
+
+table>thead>tr>th {
+    border-bottom: 2px solid var(--theme);
+}
+
+table.striped tbody>:nth-child(2n-1) {
+    background: #f5f5f5;
+}
+
+th {
+    text-align: left;
+}
+
+th,td {
+    padding: .5rem;
+    border-bottom: 1px solid var(--theme);
+}
+
+table.condensed * {padding:0}
+
+fieldset {
+    background: var(--bg);
+    padding: 1rem;
+    border: 1px solid var(--theme);
+}
+
+legend {
+    font-size: larger;
+    font-weight: 600;
+    color: var(--theme);
+    background: var(--bg);
+    display: block;
+    width: fit-content;
+    padding: .25rem .5rem;
+    margin: 0;
+    line-height: inherit;
+    border: 1px solid var(--theme);
+}
+
+blockquote {
+    margin: var(--size) 0;
+    color: var(--black);
+    background: var(--light);
+    padding: var(--size);
+}
+
+blockquote.primary {background: #EBF5FB; color: var(--theme); border: 1px solid var(--theme)}
+blockquote.danger {background: #FDEDEC; color: var(--danger); border: 1px solid var(--danger)}
+blockquote.warn {background: #FEF9E7; color: var(--warning) ; border: 1px solid var(--warning)}
+blockquote.success {background: #EAFAF1; color: var(--success); border: 1px solid var(--success)}
+blockquote.default {background: #EEE; color: var(--dark); border: 1px solid var(--dark)}
+
+hr {
+    color: var(--theme);
+    border: 1px solid;
+}
+
+h1,h2,h3,h4,h5,h6 {
+    color: var(--theme);
+    margin: var(--size) 0;
+    padding-bottom: calc(var(--size) / 2);
+    text-transform: capitalize;
+}
+
+h1 {font-size: 2.2rem}
+h2 {font-size: 1.8rem}
+h3 {font-size: 1.4rem}
+h4 {font-size: 1.2rem}
+h5 {font-size: 1.1rem}
+h6 {font-size: 1rem}
+
+a {color: var(--theme)}
+a:hover {color: var(--dark);}
+
+section, article {
+    margin-bottom: 2rem;
+}
+
+article {
+    border: 1px solid rgba(0,0,0,.125);
+    background: var(--light);
+    padding: var(--size);
+}
+
+/* Forms */
+
+details {
+    margin: var(--size) 0;
+    color: var(--fg);
+    cursor: pointer;
+}
+
+details[open] {
+    background-color: var(--bg);
+    margin-bottom: var(--size);
+    border: 1px solid var(--theme);
+}
+
+details>* {
+    box-sizing: border-box;
+    padding: .5rem 1rem;
+}
+
+summary {
+    color: var(--theme);
+    height: 40px;
+    background-color: var(--bg);
+    border: 1px solid var(--theme);
+}
+
+a.button, button, input {
+    display: inline-block;
+    outline: none;
+    box-sizing: border-box;
+    font-size: 1rem;
+    background: var(--bg);
+    color: var(--fg);
+    min-width: fit-content;
+    width: 100%;
+    height: 2.5rem;
+    border: 1px solid var(--theme);
+    border-radius: var(--radius);
+    padding: .5rem 1rem;
+}
+
+input[type=color] {padding: .25rem}
+
+input[type="checkbox"],
+input[type="radio"]{
+    padding: 0;
+	width: 1.1rem;
+	height: 1.1rem;
+	margin-right: .5rem;
+    margin-top: .25rem;
+}
+
+button, input[type="reset"],input[type="submit"] {
+    display: inline-block;
+    border-radius: var(--radius);
+    width: initial;
+}
+
+button[disabled], button[disabled]:hover {
+    color: var(--gray);
+    background-color: var(--light);
+    border:  1px solid var(--gray);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+button.link {
+    border: none;
+    background: none;
+    color: var(--theme)
+}
+
+button.link:hover {
+    background: none;
+    border: none;
+    color: var(--theme);
+    text-decoration: underline;
+}
+
+a.button, button {
+    background: var(--theme);
+    color: var(--white);
+}
+
+button.default {
+    background: var(--light);
+    color: var(--black);
+}
+
+button.primary {
+    background: var(--theme);
+    color: var(--white);
+}
+
+button.warning {
+    background: var(--warning);
+    color: var(--white);
+}
+
+button.danger {
+    background: var(--danger);
+    color: var(--white);
+}
+
+button.success {
+    background: var(--success);
+    color: var(--white);
+}
+
+a.button:hover, button:hover, input[type="reset"]:hover,input[type="submit"]:hover {
+    background: var(--dark);
+    border: 2px solid var(--theme);
+    color: var(--light);
+    cursor: pointer;
+}
+
+select:disabled, textarea:disabled,input:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    border-color: var(--mg);
+}
+
+select:focus,textarea:focus,input:focus {
+    border: 2px solid var(--theme);
+}
+
+option { line-height: 1rem; vertical-align: center;}
+
+select,textarea {
+    display: inline-block;
+    outline: none;
+    font-size: var(--size);
+    height: 2.5rem;
+    width: 100%;
+    border: 1px solid var(--theme);
+    color: var(--fg);
+    background: var(--bg);
+    border-radius: var(--radius);
+    padding: 0 var(--size);
+    cursor: pointer;
+}
+
+select {
+    background: var(--bg) no-repeat 100%;
+    color: var(--fg);
+    padding: 0 clamp(.5rem, var(--size), 2rem);
+    appearance: none;
+    background-size: 1ex;
+    background-origin: content-box;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>");
+}
+
+textarea {
+    overflow: auto;
+    resize: vertical;
+    border: 1px solid var(--theme);
+    height: calc(var(--size) * 6rem);;
+    padding: clamp(.5rem, var(--size), 2rem);
+    cursor: text;
+    color: var(--fg);
+}
+
+/* Navigation */
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: .25rem;
+    border-bottom: 1px solid var(--theme);
+}
+
+nav ul {display: flex;list-style-type: none;}
+nav li {padding-left: 1rem;}
+nav a {text-decoration: none;}
+
+nav.navbar {
+    padding: 1rem;
+    background: var(--theme);
+    color: var(--white);
+}
+
+nav.navbar a {color: var(--white)}
+
+/* Grid System */
+
+.grid {
+    display: grid;
+    gap: .25rem;
+    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+    /* padding: 0; */
+}
+
+.row {
+    display: flex;
+    flex: 0 1 auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: .5rem;
+    margin:0;
+    padding: .25rem 0;
+}
+
+.row>*, .col, .col-1, .col-2, .col-3, .col-4,.col-5 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
+    flex: 1;
+    padding: .5rem;
+    max-width: 100%;
+}
+
+.col-1 {flex: 1 !important;}
+.col-2 {flex: 2 !important;}
+.col-3 {flex: 3 !important;}
+.col-4 {flex: 4 !important;}
+.col-5 {flex: 5 !important;}
+
+/* Utilities */
+
+.group {display: flex;}
+.pointer {cursor: pointer;}
+.right {float:right}
+.left {float:left}
+.center {text-align: center;}
+.clear {content:'';display: table;clear:both}
+.outline {background: transparent; color: var(--theme); border: 1px solid var(--theme)}
+.underline {border-bottom: 1px solid var(--mg)}
+.rounded {border-radius: calc(var(--size) / 4);}
+.border {border: 1px solid var(--theme)}
+.no-space {margin: 0; padding:0;}
+.no-border {border: none}
+.no-padding {padding: 0}
+.no-margin {margin: 0}
+.no-theme {--theme: var(--fg)}
+*:disabled, .disable, .disable {pointer-events: none;}