diff --git a/src/shim.css b/src/shim.css index 110d6cc..0c01ce0 100644 --- a/src/shim.css +++ b/src/shim.css @@ -21,4 +21,4 @@ label.addon { padding: .5rem; } -h1 {color: var(--primary)} \ No newline at end of file +h1 {color: var(--primary)} diff --git a/src/stylelite.css b/src/stylelite.css index fe25d7f..6423999 100644 --- a/src/stylelite.css +++ b/src/stylelite.css @@ -1,285 +1,285 @@ -/*! Stylelite v:1.0.1 | MIT LICENSE | https://github.com/n2geoff/stylelite */ -:root { - --size: 1rem; - --radius: .3rem; - - --foreground: #111; - --background: #FFF; - - --light: #F0F0F0; - --dark: #404040; - - --default: #DDD; - --primary: var(--theme, #5499C7); - --secondary: #404040; - - --success: #198754; - --warning: #fbc02d; - --danger: #C62828; -} - -[data-theme=dark] { - --foreground: #FFF; - --background: #222; - - --default: #444; -} - -html, body { - color: var(--foreground); - background: var(--background); - font-family: Verdana, Geneva, Tahoma, sans-serif; - font-size: 16px; - box-sizing: border-box; - margin: 0; - padding: 0; - letter-spacing: 0.0125em; - height: 100%; - line-height: 1.5rem; -} - -label { - display: inline-block; - font-weight: 700; - margin: .25rem; -} - -ol, ul, li {margin-left: 1rem} - -i {vertical-align: middle;} - -cite,strong { - display: inline-block; - font-weight: bold; - padding: .5rem 0rem; -} - -pre,code,kbd { - font-family: monospace; - font-size: smaller; - padding: .25rem .5rem; - background: var(--light); - color: var(--dark); -} - -abbr { - border-bottom: 1px dotted; - cursor: help; -} - -kbd { - font-style: normal; - color: var(--light); - background: var(--primary); - border-radius: var(--radius); - text-transform: uppercase; -} - -select,option,textarea,input,header,footer,button,main,blockquote {padding: calc(var(--size)/2) var(--size)} - -select,option,textarea,input { - display: inline-block; - box-sizing: border-box; - font-family: Verdana, Geneva, Tahoma, sans-serif; - font-size: 1rem; - width: 100%; - border: var(--default) 2px solid; - border-radius: var(--radius); - margin-bottom: .5rem; -} - -input:focus,textarea:focus,select:focus { - border-color: var(--primary); - outline: none; -} - -select:hover {cursor: pointer;} - -h1 {font-size: 2.2rem;margin: 3.4rem 0;} -h2 {font-size: 1.8rem;margin: 2.2rem 0;} -h3 {font-size: 1.4rem;margin: 1.8rem 0;} -h4 {font-size: 1.2rem} -h5 {font-size: 1.1rem} -h6 {font-size: 1rem} -h1,h2,h3,h4,h5,h6 {margin-bottom: .5rem;} -h4,h5,h6{margin-top: 1rem} - -hr {margin: 1rem 0; border-color: var(--primary)} - -blockquote { - margin: var(--size) 0; - color: var(--foreground); - font-style: italic; - padding: calc(var(--size) * 1.5); - border: var(--theme, var(--default)) 1px solid; - border-left: var(--theme, var(--default)) 1rem solid; - border-radius: var(--radius); -} - -/* Buttons */ - -button {font-family: Verdana, Geneva, Tahoma, sans-serif;border-radius: var(--radius);} - -button:hover, input[type="reset"]:hover,input[type="submit"]:hover { - filter:brightness(94%) !important; - cursor: pointer; -} - -button,input[type="submit"],input[type="reset"] { - border: unset; - box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); -} - -input[type="submit"] { - color: var(--light); - background: var(--primary); -} - -a.button {padding: calc(var(--size)/2) var(--size);text-align: center;} - -a {display: inline-block;vertical-align: middle; color: var(--primary)} -a:hover {color: var(--foreground)} -a[name] {display: none;} /* fix anchors */ - -input:user-invalid { - outline: 2px solid var(--danger); -} - -input[type="checkbox"], -input[type="radio"]{ - display: inline-block; - vertical-align: middle; - width: 1rem; - height: 1rem; -} - -*:disabled {background: #F0F0F0; } -*:disabled:hover {cursor: not-allowed} - -/* Tables */ - -table { - border-collapse: collapse; - border-spacing: 0; - width: 100%; -} - -thead,tfoot,tbody { - border-bottom: var(--theme, var(--default)) 2px solid; -} - -th {text-align: left; color: var(--theme, var(--foreground))} - -th,td { - padding: .25rem; - border-bottom: 1px solid var(--theme, var(--default)); -} - -table.striped tbody>:nth-child(2n-1) {background: var(--default)} - -/* Details */ - -details { - color: var(--dark); - background: var(--light); - margin: var(--size) 0; - cursor: pointer; - border: var(--default) 2px solid; -} - -details[open] { - margin-bottom: var(--size); -} - -details>* { - box-sizing: border-box; - padding: .5rem 1rem; -} - -summary:hover {cursor: pointer;} -details:not(summary):hover {cursor: default} - -/* Dialog */ - -dialog[open] { - margin: auto; -} - -dialog { - border: 1px solid var(--dark); - border-radius: var(--radius); - padding:0; - margin:0; - max-width: 85%; - min-width: 340px; -} - -dialog::backdrop { - background-color: rgba(0, 0, 0, 0.8); -} - -/* Navigation */ - -nav { - display: flex; - justify-content: space-between; - padding: 0rem .5rem; -} - -nav .brand { - margin:0; - font-size: x-large; -} - -nav a {text-decoration: none;} -nav > ul > li > a:hover, .active { - margin-top: -1px; /* fix page bounce */ - border-bottom: currentColor 1px solid; -} - -nav ul {display: flex;list-style-type: none;margin:0;padding:0; line-height: 2rem} -nav ul li {padding:0rem .5rem;margin:0} -nav ul li:first-child {margin-left:0;margin-left:0} -nav a {text-decoration: none;color: var(--primary)} - -/* Colors */ - -.primary {color: var(--light); background: var(--primary);} -.secondary {color: var(--light); background: var(--secondary);} -.default {color: var(--dark); background: var(--default);} -.dark {color: var(--light); background: var(--dark);} -.light {color: var(--dark); background: var(--light);} - -blockquote.primary {border-color: var(--primary);} -blockquote.secondary {border-color: var(--secondary);} - -.text-primary {color: var(--primary)} -.text-secondary {color: var(--secondary)} -.text-default, .weak {color: var(--default)} - -/* Layout Utilities */ - -.grid { - display: grid; - gap: .25rem; - grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); -} - -.group {display: flex} -.group > i { - line-height: 1.5rem; - margin-bottom: .5rem; - padding: .5rem 1rem; -} - -.container { - margin: 0 auto; - padding: var(--size); - max-width: 1140px; -} - -.underline {border-bottom: var(--theme, currentColor) 1px solid} -.border {border: var(--theme, var(--default)) 2px solid;border-radius: var(--radius);} -.indent {margin-left: .25rem;} -.pointer {cursor: pointer;} -.center {align-self: center; justify-self: center;} +/*! Stylelite v:1.0.1 | MIT LICENSE | https://github.com/n2geoff/stylelite */ +:root { + --size: 1rem; + --radius: .3rem; + + --foreground: #111; + --background: #FFF; + + --light: #F0F0F0; + --dark: #404040; + + --default: #DDD; + --primary: var(--theme, #5499C7); + --secondary: #404040; + + --success: #198754; + --warning: #fbc02d; + --danger: #C62828; +} + +[data-theme=dark] { + --foreground: #FFF; + --background: #222; + + --default: #444; +} + +html, body { + color: var(--foreground); + background: var(--background); + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 16px; + box-sizing: border-box; + margin: 0; + padding: 0; + letter-spacing: 0.0125em; + height: 100%; + line-height: 1.5rem; +} + +label { + display: inline-block; + font-weight: 700; + margin: .25rem; +} + +ol, ul, li {margin-left: 1rem} + +i {vertical-align: middle;} + +cite,strong { + display: inline-block; + font-weight: bold; + padding: .5rem 0rem; +} + +pre,code,kbd { + font-family: monospace; + font-size: smaller; + padding: .25rem .5rem; + background: var(--light); + color: var(--dark); +} + +abbr { + border-bottom: 1px dotted; + cursor: help; +} + +kbd { + font-style: normal; + color: var(--light); + background: var(--primary); + border-radius: var(--radius); + text-transform: uppercase; +} + +select,option,textarea,input,header,footer,button,main,blockquote {padding: calc(var(--size)/2) var(--size)} + +select,option,textarea,input { + display: inline-block; + box-sizing: border-box; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 1rem; + width: 100%; + border: var(--default) 2px solid; + border-radius: var(--radius); + margin-bottom: .5rem; +} + +input:focus,textarea:focus,select:focus { + border-color: var(--primary); + outline: none; +} + +select:hover {cursor: pointer;} + +h1 {font-size: 2.2rem;margin: 3.4rem 0;} +h2 {font-size: 1.8rem;margin: 2.2rem 0;} +h3 {font-size: 1.4rem;margin: 1.8rem 0;} +h4 {font-size: 1.2rem} +h5 {font-size: 1.1rem} +h6 {font-size: 1rem} +h1,h2,h3,h4,h5,h6 {margin-bottom: .5rem;} +h4,h5,h6{margin-top: 1rem} + +hr {margin: 1rem 0; border-color: var(--primary)} + +blockquote { + margin: var(--size) 0; + color: var(--foreground); + font-style: italic; + padding: calc(var(--size) * 1.5); + border: var(--theme, var(--default)) 1px solid; + border-left: var(--theme, var(--default)) 1rem solid; + border-radius: var(--radius); +} + +/* Buttons */ + +button {font-family: Verdana, Geneva, Tahoma, sans-serif;border-radius: var(--radius);} + +button:hover, input[type="reset"]:hover,input[type="submit"]:hover { + filter:brightness(94%) !important; + cursor: pointer; +} + +button,input[type="submit"],input[type="reset"] { + border: unset; + box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); +} + +input[type="submit"] { + color: var(--light); + background: var(--primary); +} + +a.button {padding: calc(var(--size)/2) var(--size);text-align: center;} + +a {display: inline-block;vertical-align: middle; color: var(--primary)} +a:hover {color: var(--foreground)} +a[name] {display: none;} /* fix anchors */ + +input:user-invalid { + outline: 2px solid var(--danger); +} + +input[type="checkbox"], +input[type="radio"]{ + display: inline-block; + vertical-align: middle; + width: 1rem; + height: 1rem; +} + +*:disabled {background: #F0F0F0; } +*:disabled:hover {cursor: not-allowed} + +/* Tables */ + +table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; +} + +thead,tfoot,tbody { + border-bottom: var(--theme, var(--default)) 2px solid; +} + +th {text-align: left; color: var(--theme, var(--foreground))} + +th,td { + padding: .25rem; + border-bottom: 1px solid var(--theme, var(--default)); +} + +table.striped tbody>:nth-child(2n-1) {background: var(--default)} + +/* Details */ + +details { + color: var(--dark); + background: var(--light); + margin: var(--size) 0; + cursor: pointer; + border: var(--default) 2px solid; +} + +details[open] { + margin-bottom: var(--size); +} + +details>* { + box-sizing: border-box; + padding: .5rem 1rem; +} + +summary:hover {cursor: pointer;} +details:not(summary):hover {cursor: default} + +/* Dialog */ + +dialog[open] { + margin: auto; +} + +dialog { + border: 1px solid var(--dark); + border-radius: var(--radius); + padding:0; + margin:0; + max-width: 85%; + min-width: 340px; +} + +dialog::backdrop { + background-color: rgba(0, 0, 0, 0.8); +} + +/* Navigation */ + +nav { + display: flex; + justify-content: space-between; + padding: 0rem .5rem; +} + +nav .brand { + margin:0; + font-size: x-large; +} + +nav a {text-decoration: none;} +nav > ul > li > a:hover, .active { + margin-top: -1px; /* fix page bounce */ + border-bottom: currentColor 1px solid; +} + +nav ul {display: flex;list-style-type: none;margin:0;padding:0; line-height: 2rem} +nav ul li {padding:0rem .5rem;margin:0} +nav ul li:first-child {margin-left:0;margin-left:0} +nav a {text-decoration: none;color: var(--primary)} + +/* Colors */ + +.primary {color: var(--light); background: var(--primary);} +.secondary {color: var(--light); background: var(--secondary);} +.default {color: var(--dark); background: var(--default);} +.dark {color: var(--light); background: var(--dark);} +.light {color: var(--dark); background: var(--light);} + +blockquote.primary {border-color: var(--primary);} +blockquote.secondary {border-color: var(--secondary);} + +.text-primary {color: var(--primary)} +.text-secondary {color: var(--secondary)} +.text-default, .weak {color: var(--default)} + +/* Layout Utilities */ + +.grid { + display: grid; + gap: .25rem; + grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); +} + +.group {display: flex} +.group > i { + line-height: 1.5rem; + margin-bottom: .5rem; + padding: .5rem 1rem; +} + +.container { + margin: 0 auto; + padding: var(--size); + max-width: 1140px; +} + +.underline {border-bottom: var(--theme, currentColor) 1px solid} +.border {border: var(--theme, var(--default)) 2px solid;border-radius: var(--radius);} +.indent {margin-left: .25rem;} +.pointer {cursor: pointer;} +.center {align-self: center; justify-self: center;}