From: Paul Hänsch Date: Tue, 9 Feb 2021 20:45:55 +0000 (+0100) Subject: experimental: basic set of css rules X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;ds=sidebyside;h=31fd9a726ec96dd58a9e69b941e18b93a3c01f26;p=cgilite experimental: basic set of css rules --- diff --git a/common.css b/common.css new file mode 100644 index 0000000..4b9501b --- /dev/null +++ b/common.css @@ -0,0 +1,128 @@ +/* ======= GENERIC HTML STYLES ======= */ + +* { + box-sizing: border-box; + position: relative; + font: inherit; + text-decoration: inherit; + color: inherit; background: transparent; + max-width: 100%; + margin: 0; padding: 0; + border: none; +} + +body { + font: normal normal normal medium/1.5em sans-serif; + color: #000; background: #FFF; +} + +ul, ol, dl, table, p { margin-bottom: .5em; } + +a { + font-style: italic; + text-decoration: underline; + color: #068; +} +a.button { + font-style: inherit; + text-decoration: inherit; + color: inherit; +} + +sup { vertical-align: super; } +sub { vertical-align: sub; } +small { font-size: .75em; } +big { font-size: 1.25em; } +strike, del, s { text-decoration: line-through; } +u {text-decoration: underline; } +i, em { font-style: italic; } +b, strong { font-weight: bolder; } +tt, code, var, samp, kbd { font-family: monospace; } +kbd { font-style: italic; } + +ul, ol { margin-left: 1.125em; } +dl dt { font-weight: bolder; } +table th { font-weight: bold; } + +h1, h2, h3 { + font-weight: bold; + margin-top: .75em; + margin-bottom: .5em; +} + +h4, h5, h6, form legend { + font-weight: bolder; + margin-bottom: .25em; +} + +h1 { font-size: 1.5em; } +h2 { font-size: 1.125em; } + +select, input, button, textarea, a.button { + display: inline-block; + background-color: #FFF; + border: .5pt solid; + padding: .25em .75em; + vertical-align: text-bottom; + border: 1pt solid #888; + border-radius: 2pt; +} +select { padding: .375em 0; } + +input[type=radio], input[type=checkbox] { + vertical-align: baseline; +} +input[type=number] { text-align: right; padding-right: 0; } + +button, input[type=button], a.button { + box-shadow: .125em .125em .25em; + cursor: pointer; +} +input[type=radio], input[type=checkbox], label[for] { + cursor: pointer; +} + +label { margin-right: .75em; } +input + label { + margin-left: .375em; +} + +/* ======= End Generic Styles ======= */ + +/* ======= Common Styles ======= */ + +*[tooltip]:hover:after { + display: block; + position: absolute; + bottom: -100%; left: 50%; transform: translate(-50%, 0); + content: attr(tooltip); + padding: .5em; + background-color: #FFC; + color: #000; + border: .5pt solid; + z-index: 1; +} + +input[type=radio].tab { display: none; } +input[type=radio].tab + label { + display: table-cell; + padding: .5em 1em; + background-color: #EEE; + border: .5pt solid; +} +input[type=radio].tab:checked + label { + background-color: #FFF; + border-bottom: none; + box-shadow: .125em -.125em .125em #888; + z-index: 1; +} +input[type=radio].tab ~ *.tab { + display: none; + width: 100%; + margin-top: 0; padding: .25em .75em; + border: .5pt solid; border-top: none; + border-radius: 0; + box-shadow: .125em .125em .125em #888; +} + +/* ======= End Common Styles ======= */