FIX: hover on details content

This commit is contained in:
Geoff Doty 2024-05-10 20:44:27 -04:00
parent e19fc21b87
commit c9d2ccd6a7
1 changed files with 411 additions and 404 deletions

View File

@ -1,404 +1,411 @@
/*! Stylelite v:0.6.7 | MIT LICENSE | https://github.com/n2geoff/stylelite */ /*! Stylelite v:0.7.0 | 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);
} }
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.striped tbody>:nth-child(2n-1) {
background: #f5f5f5;
fieldset { }
background: var(--bg);
padding: 1rem; table.condensed * {padding:0}
border: 1px solid var(--theme);
} fieldset {
background: var(--bg);
legend { padding: 1rem;
font-size: larger; border: 1px solid var(--theme);
font-weight: 600; }
color: var(--theme);
background: var(--bg); legend {
display: block; font-size: larger;
width: fit-content; font-weight: 600;
padding: .25rem .5rem; color: var(--theme);
margin: 0; background: var(--bg);
line-height: inherit; display: block;
border: 1px solid var(--theme); width: fit-content;
} padding: .25rem .5rem;
margin: 0;
blockquote { line-height: inherit;
margin: var(--size) 0; border: 1px solid var(--theme);
color: var(--black); }
background: var(--light);
padding: var(--size); blockquote {
} margin: var(--size) 0;
color: var(--black);
blockquote.primary {background: #EBF5FB; color: var(--theme); border: 1px solid var(--theme)} background: var(--light);
blockquote.danger {background: #FDEDEC; color: var(--danger); border: 1px solid var(--danger)} padding: var(--size);
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)} blockquote.primary {background: #EBF5FB; color: var(--theme); border: 1px solid var(--theme)}
blockquote.danger {background: #FDEDEC; color: var(--danger); border: 1px solid var(--danger)}
hr { blockquote.warn {background: #FEF9E7; color: var(--warning) ; border: 1px solid var(--warning)}
color: var(--theme); blockquote.success {background: #EAFAF1; color: var(--success); border: 1px solid var(--success)}
border: 1px solid; blockquote.default {background: #EEE; color: var(--dark); border: 1px solid var(--dark)}
}
hr {
h1,h2,h3,h4,h5,h6 { color: var(--theme);
color: var(--theme); border: 1px solid;
margin: var(--size) 0; }
padding-bottom: calc(var(--size) / 2);
text-transform: capitalize; h1,h2,h3,h4,h5,h6 {
} color: var(--theme);
margin: var(--size) 0;
h1 {font-size: 2.2rem} padding-bottom: calc(var(--size) / 2);
h2 {font-size: 1.8rem} text-transform: capitalize;
h3 {font-size: 1.4rem} }
h4 {font-size: 1.2rem}
h5 {font-size: 1.1rem} h1 {font-size: 2.2rem}
h6 {font-size: 1rem} h2 {font-size: 1.8rem}
h3 {font-size: 1.4rem}
a {color: var(--theme)} h4 {font-size: 1.2rem}
a:hover {color: var(--dark);} h5 {font-size: 1.1rem}
h6 {font-size: 1rem}
section, article {
margin-bottom: 2rem; a {color: var(--theme)}
} a:hover {color: var(--dark);}
article { section, article {
border: 1px solid rgba(0,0,0,.125); margin-bottom: 2rem;
background: var(--light); }
padding: var(--size);
} article {
border: 1px solid rgba(0,0,0,.125);
/* Forms */ background: var(--light);
padding: var(--size);
details { }
margin: var(--size) 0;
color: var(--fg); /* Forms */
cursor: pointer;
} details {
margin: var(--size) 0;
details[open] { color: var(--fg);
background-color: var(--bg); cursor: pointer;
margin-bottom: var(--size); }
border: 1px solid var(--theme);
} details[open] {
background-color: var(--bg);
details>* { margin-bottom: var(--size);
box-sizing: border-box; border: 1px solid var(--theme);
padding: .5rem 1rem; }
}
details>* {
summary { box-sizing: border-box;
color: var(--theme); padding: .5rem 1rem;
height: 40px; }
background-color: var(--bg);
border: 1px solid var(--theme); summary {
} color: var(--theme);
height: 40px;
a.button, button, input { background-color: var(--bg);
display: inline-block; border: 1px solid var(--theme);
outline: none; }
box-sizing: border-box;
font-size: 1rem; summary:hover {cursor: pointer;}
background: var(--bg); details:not(summary):hover {cursor: default}
color: var(--fg);
min-width: fit-content; a.button, button, input {
width: 100%; display: inline-block;
height: 2.5rem; outline: none;
border: 1px solid var(--theme); box-sizing: border-box;
border-radius: var(--radius); font-size: 1rem;
padding: .5rem 1rem; background: var(--bg);
} color: var(--fg);
min-width: fit-content;
input[type=color] {padding: .25rem} width: 100%;
height: 2.5rem;
input[type="checkbox"], border: 1px solid var(--theme);
input[type="radio"]{ border-radius: var(--radius);
padding: 0; padding: .5rem 1rem;
width: 1.1rem; }
height: 1.1rem;
margin-right: .5rem; input[type=color] {padding: .25rem}
margin-top: .25rem;
} input[type="checkbox"],
input[type="radio"]{
button, input[type="reset"],input[type="submit"] { padding: 0;
display: inline-block; width: 1.1rem;
border-radius: var(--radius); height: 1.1rem;
width: initial; margin-right: .5rem;
} margin-top: .25rem;
}
button[disabled], button[disabled]:hover {
color: var(--gray); button, input[type="reset"],input[type="submit"] {
background-color: var(--light); display: inline-block;
border: 1px solid var(--gray); border-radius: var(--radius);
cursor: not-allowed; width: initial;
pointer-events: none; }
}
button[disabled], button[disabled]:hover {
button.link { color: var(--gray);
border: none; background-color: var(--light);
background: none; border: 1px solid var(--gray);
color: var(--theme) cursor: not-allowed;
} pointer-events: none;
}
button.link:hover {
background: none; button.link {
border: none; border: none;
color: var(--theme); background: none;
text-decoration: underline; color: var(--theme)
} }
a.button, button { button.link:hover {
background: var(--theme); background: none;
color: var(--white); border: none;
} color: var(--theme);
text-decoration: underline;
button.default { }
background: var(--light);
color: var(--black); a.button, button {
} background: var(--theme);
color: var(--white);
button.primary { }
background: var(--theme);
color: var(--white); button.default {
} background: var(--light);
color: var(--black);
button.warning { }
background: var(--warning);
color: var(--white); button.primary {
} background: var(--theme);
color: var(--white);
button.danger { }
background: var(--danger);
color: var(--white); button.warning {
} background: var(--warning);
color: var(--white);
button.success { }
background: var(--success);
color: var(--white); button.danger {
} background: var(--danger);
color: var(--white);
a.button:hover, button:hover, input[type="reset"]:hover,input[type="submit"]:hover { }
background: var(--dark);
border: 2px solid var(--theme); button.success {
color: var(--light); background: var(--success);
cursor: pointer; color: var(--white);
} }
select:disabled, textarea:disabled,input:disabled { a.button:hover, button:hover, input[type="reset"]:hover,input[type="submit"]:hover {
cursor: not-allowed; background: var(--dark);
pointer-events: none; border: 2px solid var(--theme);
border-color: var(--mg); color: var(--light);
} cursor: pointer;
}
select:focus,textarea:focus,input:focus {
border: 2px solid var(--theme); select:disabled, textarea:disabled,input:disabled {
} cursor: not-allowed;
pointer-events: none;
option { line-height: 1rem; vertical-align: center;} border-color: var(--mg);
}
select,textarea {
display: inline-block; select:focus,textarea:focus,input:focus {
outline: none; border: 2px solid var(--theme);
font-size: var(--size); }
height: 2.5rem;
width: 100%; option { line-height: 1rem; vertical-align: center;}
border: 1px solid var(--theme);
color: var(--fg); select,textarea {
background: var(--bg); display: inline-block;
border-radius: var(--radius); outline: none;
padding: 0 var(--size); font-size: var(--size);
cursor: pointer; height: 2.5rem;
} width: 100%;
border: 1px solid var(--theme);
select { color: var(--fg);
background: var(--bg) no-repeat 100%; background: var(--bg);
color: var(--fg); border-radius: var(--radius);
padding: 0 clamp(.5rem, var(--size), 2rem); padding: 0 var(--size);
appearance: none; cursor: pointer;
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>"); select {
} background: var(--bg) no-repeat 100%;
color: var(--fg);
textarea { padding: 0 clamp(.5rem, var(--size), 2rem);
overflow: auto; appearance: none;
resize: vertical; background-size: 1ex;
border: 1px solid var(--theme); background-origin: content-box;
height: calc(var(--size) * 6rem);; 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>");
padding: clamp(.5rem, var(--size), 2rem); }
cursor: text;
color: var(--fg); textarea {
} overflow: auto;
resize: vertical;
/* Navigation */ border: 1px solid var(--theme);
height: calc(var(--size) * 6rem);;
nav { padding: clamp(.5rem, var(--size), 2rem);
display: flex; cursor: text;
justify-content: space-between; color: var(--fg);
padding-bottom: .25rem; }
border-bottom: 1px solid var(--theme);
} /* Navigation */
nav ul {display: flex;list-style-type: none;} nav {
nav li {padding-left: 1rem;} display: flex;
nav a {text-decoration: none;} justify-content: space-between;
padding-bottom: .25rem;
nav.navbar { border-bottom: 1px solid var(--theme);
padding: 1rem; }
background: var(--theme);
color: var(--white); nav ul {display: flex;list-style-type: none;}
} nav li {padding-left: 1rem;}
nav a {text-decoration: none;}
nav.navbar a {color: var(--white)}
nav.navbar {
/* Grid System */ padding: 1rem;
background: var(--theme);
.grid { color: var(--white);
display: grid; }
gap: .25rem;
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); nav.navbar a {color: var(--white)}
}
/* Grid System */
.row {
display: flex; .grid {
flex: 0 1 auto; display: grid;
flex-direction: row; gap: .25rem;
flex-wrap: wrap; grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
column-gap: .5rem; }
margin:0;
padding: .25rem 0; .row {
} display: flex;
flex: 0 1 auto;
.row>*, .col, .col-1, .col-2, .col-3, .col-4,.col-5 { flex-direction: row;
display: flex; flex-wrap: wrap;
flex-direction: column; column-gap: .5rem;
justify-content: space-between; margin:0;
align-items: stretch; padding: .25rem 0;
flex: 1; }
max-width: 100%;
} .row>*, .col, .col-1, .col-2, .col-3, .col-4,.col-5 {
display: flex;
.col-1 {flex: 1 !important;} flex-direction: column;
.col-2 {flex: 2 !important;} justify-content: space-between;
.col-3 {flex: 3 !important;} align-items: stretch;
.col-4 {flex: 4 !important;} flex: 1;
.col-5 {flex: 5 !important;} max-width: 100%;
}
/* Utilities */
.col-1 {flex: 1 !important;}
.group {display: flex;} .col-2 {flex: 2 !important;}
.pointer {cursor: pointer;} .col-3 {flex: 3 !important;}
.right {float:right} .col-4 {flex: 4 !important;}
.left {float:left} .col-5 {flex: 5 !important;}
.center {text-align: center;}
.clear {content:'';display: table;clear:both} /* Utilities */
.outline {background: transparent; color: var(--theme); border: 1px solid var(--theme)}
.underline {border-bottom: 1px solid var(--mg)} .group {display: flex;}
.rounded {border-radius: calc(var(--size) / 4);} .pointer {cursor: pointer;}
.border {border: 1px solid var(--theme)} .right {float:right}
.no-space {margin: 0; padding:0;} .left {float:left}
.no-border {border: none} .center {text-align: center;}
.no-padding {padding: 0} .clear {content:'';display: table;clear:both}
.no-margin {margin: 0} .outline {background: transparent; color: var(--theme); border: 1px solid var(--theme)}
.no-theme {--theme: var(--fg)} .underline {border-bottom: 1px solid var(--mg)}
*:disabled, .disable, .disable {pointer-events: none;} .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;}