:read-only cannot be used this way

This commit is contained in:
Geoff Doty 2024-01-24 16:56:43 -05:00
parent ec34a90393
commit 5288e7078f
1 changed files with 410 additions and 410 deletions

View File

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