diff options
Diffstat (limited to 'lulua/data/report/style.css')
| -rw-r--r-- | lulua/data/report/style.css | 202 |
1 files changed, 202 insertions, 0 deletions
diff --git a/lulua/data/report/style.css b/lulua/data/report/style.css new file mode 100644 index 0000000..26b2e96 --- /dev/null +++ b/lulua/data/report/style.css @@ -0,0 +1,202 @@ +/* +colorscheme derived from #EAE0C8, see https://en.wikipedia.org/wiki/Pearl_(color) +using http://colormind.io/bootstrap/ +*/ +:root { + --light-shades: #EAE0C8; + --light-accent: #689CA9; + --main-brand: #A48A4E; + --dark-accent: #79796D; + --dark-shades: #1D251E; + + --finger-little: #dc322f; /* red */ + --finger-ring: #268bd2; /* blue */ + --finger-middle: #d33682; /* magenta */ + --finger-index: #6c71c4; /* violet */ + --finger-thumb: #2aa198; /* cyan */ +} + +@font-face { + font-family: 'IBM Plex Arabic'; + font-style: normal; + font-weight: 100; + src: local('IBM Plex Arabic Thin'), local('IBMPlexArabic-Thin'), url('fonts/IBMPlexArabic-Thin.woff2') format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Arabic'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Arabic Regular'), local('IBMPlexArabic-Regular'), url('fonts/IBMPlexArabic-Regular.woff2') format('woff2'); +} + +body { + font-size: 14pt; + background-color: var(--light-shades); + color: var(--dark-shades); +} +/* is there a better way to select _both_ fonts at the same time? */ +:lang(ar) { + direction: rtl; + font-family: "IBM Plex Arabic"; +} +/* inside ltr text */ +:lang(ar)[dir=ltr] { + direction: ltr; +} +:lang(en) { + direction: ltr; + font-family: "IBM Plex Sans"; +} +h1, h2, h3 { + font-weight: 100; +} +h1 { + font-size: 4em; +} +h2 { + font-size: 2.5em; +} +figure { + max-width: 70em; + margin: 1.3em auto; +} +img { + width: 100%; +} +code { + font-family: "IBM Plex Mono", monospace !important; /* override :lang(*) font setting */ +} +a:link, a:visited { + color: var(--light-accent); + text-decoration: none; +} +a:focus, a:hover { + background-color: var(--light-accent); + color: var(--light-shades); + border-radius: 0.1em; +} +div.title-card { + background-color: var(--dark-accent); + color: var(--light-shades); +} +div.title-card .lbox { + margin: 2vw; +} +div.title-card h1 { + margin: 0; + padding: 0.2em; +} +div.title-card img.logo { + max-height: 35vh; + display: block; + margin: 0 auto; +} +div.title-card .subtitle { + padding: 0 0.5em; + font-size: 1.5em; +} +div.title-card .layout img { + display: block; + margin: 0 auto; +} +div.indepth-card { + padding: 10vh 0; + margin: 1em 0; + background-color: var(--dark-accent); + color: var(--light-shades); +} +.flexreverse { + flex-direction: row-reverse; +} +.lbox { + margin: 0 5vw; +} +/* for hand/finger stats */ +div.fingerhandstats { + text-align: center; + display: flex; +} +div.fingerhandstats div.fingers { + display: flex; +} +div.fingerhandstats div.fingers div { + margin: 0.1em; + overflow: hidden; +} +div.fingerhandstats .left { + margin-right: 0.5em; +} +div.fingerhandstats .right { + margin-left: 0.5em; +} +/* keep in sync with render-svg.css */ +div.fingerhandstats .fingers .little { + border: 0.1em solid var(--finger-little); +} +div.fingerhandstats .fingers .ring { + border: 0.1em solid var(--finger-ring); +} +div.fingerhandstats .fingers .middle { + border: 0.1em solid var(--finger-middle); +} +div.fingerhandstats .fingers .index { + border: 0.1em solid var(--finger-index); +} +div.fingerhandstats .fingers .thumb { + border: 0.1em solid var(--finger-thumb); +} + +table { + font-variant-numeric: tabular-nums; +} +.pure-table td.numint { + text-align: right; + padding-right: 0; +} + +.pure-table td.numfrac { + border-left: none; + text-align: left; + padding-left: 0; +} + +dl.colorcodes dt, dl.colorcodes dd { + display: inline; + padding: 0; + margin: 0; +} + +dl.colorcodes dt:after { + content: ":"; +} + +dl.colorcodes .finger:before { + width: 0.7em; + height: 0.7em; + display: inline-block; + content: " "; + margin-right: 0.3em; + vertical-align: middle; +} + +dl.colorcodes .finger.little::before { + background-color: var(--finger-little); +} + +dl.colorcodes .finger.ring::before { + background-color: var(--finger-ring); +} + +dl.colorcodes .finger.middle::before { + background-color: var(--finger-middle); +} + +dl.colorcodes .finger.index::before { + background-color: var(--finger-index); +} + +dl.colorcodes .finger.thumb::before { + background-color: var(--finger-thumb); +} + |