mirror of
https://github.com/arabine/open-story-teller.git
synced 2025-12-06 17:09:06 +01:00
346 lines
6.7 KiB
CSS
346 lines
6.7 KiB
CSS
/* Basic CSS reset */
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
font-family: system-ui, sans-serif;
|
|
color: #222;
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
font-size: 1em;
|
|
box-sizing: border-box;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
button,
|
|
code,
|
|
kbd,
|
|
pre {
|
|
font-size: 1em;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
pre {
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
border-radius: 3px;
|
|
box-sizing: border-box;
|
|
padding: 2px 4px 1px 4px;
|
|
background: rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
pre {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
a {
|
|
color: #222;
|
|
}
|
|
|
|
a:hover {
|
|
color: #666;
|
|
}
|
|
|
|
|
|
/* util.css
|
|
* custom utility CSS library for projects by @thesephist */
|
|
|
|
/* margins */
|
|
|
|
.m0 {margin: 0}
|
|
|
|
.mt0, .my0 {margin-top: 0}
|
|
.mt1, .my1 {margin-top: .25rem}
|
|
.mt2, .my2 {margin-top: .5rem}
|
|
.mt3, .my3 {margin-top: .75rem}
|
|
.mt4, .my4 {margin-top: 1.5rem}
|
|
.mt5, .my5 {margin-top: 2.25rem}
|
|
.mt6, .my6 {margin-top: 3.25rem}
|
|
|
|
.mb0, .my0 {margin-bottom: 0}
|
|
.mb1, .my1 {margin-bottom: .25rem}
|
|
.mb2, .my2 {margin-bottom: .5rem}
|
|
.mb3, .my3 {margin-bottom: .75rem}
|
|
.mb4, .my4 {margin-bottom: 1.5rem}
|
|
.mb5, .my5 {margin-bottom: 2.25rem}
|
|
.mb6, .my6 {margin-bottom: 3.25rem}
|
|
|
|
.ml0, .mx0 {margin-left: 0}
|
|
.ml1, .mx1 {margin-left: .25rem}
|
|
.ml2, .mx2 {margin-left: .5rem}
|
|
.ml3, .mx3 {margin-left: .75rem}
|
|
.ml4, .mx4 {margin-left: 1.5rem}
|
|
.ml5, .mx5 {margin-left: 2.25rem}
|
|
.ml6, .mx6 {margin-left: 3.25rem}
|
|
|
|
.mr0, .mx0 {margin-right: 0}
|
|
.mr1, .mx1 {margin-right: .25rem}
|
|
.mr2, .mx2 {margin-right: .5rem}
|
|
.mr3, .mx3 {margin-right: .75rem}
|
|
.mr4, .mx4 {margin-right: 1.5rem}
|
|
.mr5, .mx5 {margin-right: 2.25rem}
|
|
.mr6, .mx6 {margin-right: 3.25rem}
|
|
|
|
/* paddings */
|
|
|
|
.p0 {padding: 0}
|
|
|
|
.pt0, .py0 {padding-top: 0}
|
|
.pt1, .py1 {padding-top: .25rem}
|
|
.pt2, .py2 {padding-top: .5rem}
|
|
.pt3, .py3 {padding-top: .75rem}
|
|
.pt4, .py4 {padding-top: 1rem}
|
|
|
|
.pb0, .py0 {padding-bottom: 0}
|
|
.pb1, .py1 {padding-bottom: .25rem}
|
|
.pb2, .py2 {padding-bottom: .5rem}
|
|
.pb3, .py3 {padding-bottom: .75rem}
|
|
.pb4, .py4 {padding-bottom: 1rem}
|
|
|
|
.pl0, .px0 {padding-left: 0}
|
|
.pl1, .px1 {padding-left: .25rem}
|
|
.pl2, .px2 {padding-left: .5rem}
|
|
.pl3, .px3 {padding-left: .75rem}
|
|
.pl4, .px4 {padding-left: 1rem}
|
|
|
|
.pr0, .px0 {padding-right: 0}
|
|
.pr1, .px1 {padding-right: .25rem}
|
|
.pr2, .px2 {padding-right: .5rem}
|
|
.pr3, .px3 {padding-right: .75rem}
|
|
.pr4, .px4 {padding-right: 1rem}
|
|
|
|
/* typography */
|
|
|
|
h1, h2, h3, h4, h5, h6 {font-weight: 400}
|
|
.bold {font-weight: bold}
|
|
.clean {text-decoration: none}
|
|
.underline {text-decoration: underline}
|
|
.f0 {font-size: .75rem}
|
|
.f1 {font-size: 1rem}
|
|
.f2 {font-size: 1.25rem}
|
|
.f3 {font-size: 1.6rem}
|
|
.f4 {font-size: 2rem}
|
|
.f5 {font-size: 3rem}
|
|
.text-start {text-align: start}
|
|
.text-end {text-align: end}
|
|
.text-center {text-align: center}
|
|
|
|
/* flex & layout */
|
|
|
|
.flex {display: flex}
|
|
.flex-row {flex-direction: row}
|
|
.flex-column {flex-direction: column}
|
|
.flex-wrap {flex-wrap: wrap}
|
|
.align-center {align-items: center}
|
|
.align-start {align-items: flex-start}
|
|
.align-end {align-items: flex-end}
|
|
.justify-center {justify-content: center}
|
|
.justify-start {justify-content: flex-start}
|
|
.justify-end {justify-content: flex-end}
|
|
.fill, .fill-width {width: 100%}
|
|
.fill, .fill-height {height: 100%}
|
|
|
|
/* page widths */
|
|
|
|
.page-xs {max-width: 480px}
|
|
.page-s {max-width: 600px}
|
|
.page-m {max-width: 800px}
|
|
.page-l {max-width: 1200px}
|
|
.page-xl {max-width: 1600px}
|
|
|
|
/* shadows */
|
|
|
|
.shadow1 {box-shadow: 0 2px 3px rgba(0, 0, 0, .36)}
|
|
.shadow2 {box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .34)}
|
|
.shadow3 {box-shadow: 0 4px 7px -1px rgba(0, 0, 0, .32)}
|
|
.shadow4 {box-shadow: 0 5px 9px -2px rgba(0, 0, 0, .3)}
|
|
.shadow5 {box-shadow: 0 7px 12px -3px rgba(0, 0, 0, .28)}
|
|
|
|
/* list */
|
|
|
|
ul.list-reset,
|
|
ol.list-reset {
|
|
padding-left: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
/* other utility */
|
|
|
|
.borderless {border: 0 solid transparent}
|
|
.rounded {border-radius: 4px}
|
|
.block {display: block}
|
|
.inline-block {display: inline-block}
|
|
.inline {display: inline}
|
|
.hidden {display: none}
|
|
.pointer {cursor: pointer}
|
|
.auto-center {margin-left: auto; margin-right: auto}
|
|
|
|
|
|
/* DEFAULT VARIABLES */
|
|
body {
|
|
--block-text-color: #222;
|
|
--block-background-color: #fff;
|
|
--block-accent-color: #00ae86;
|
|
--block-shadow-color: #444;
|
|
}
|
|
|
|
/* BASIC BLOCK STYLES */
|
|
.block {
|
|
display: block;
|
|
color: var(--block-text-color);
|
|
border: 3px solid var(--block-text-color);
|
|
border-radius: 3px;
|
|
padding: 4px 8px;
|
|
background: var(--block-background-color);
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
|
|
position: relative;
|
|
top: -2px;
|
|
left: -2px;
|
|
transition: transform 0.2s;
|
|
margin: 8px 6px 10px 6px;
|
|
z-index: 1;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
.block.wrapper,
|
|
.block.wrapper.inline {
|
|
display: inline-block;
|
|
padding: 0;
|
|
}
|
|
|
|
.block.wrapper > * {
|
|
margin: 0;
|
|
}
|
|
|
|
/* INTERACTIVE BLOCK STYLES */
|
|
.block::before {
|
|
content: "";
|
|
background: var(--block-background-color);
|
|
border: 3px solid var(--block-text-color);
|
|
border-radius: 3px;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
top: -3px;
|
|
left: -3px;
|
|
height: calc(100% + 6px);
|
|
width: calc(100% + 6px);
|
|
z-index: -1;
|
|
}
|
|
|
|
.block:hover,
|
|
.block:focus {
|
|
transform: translate(2px, 2px);
|
|
}
|
|
|
|
.block::after {
|
|
content: "";
|
|
display: block;
|
|
box-sizing: border-box;
|
|
background: var(--block-shadow-color);
|
|
border: 3px solid var(--block-text-color);
|
|
border-radius: 3px;
|
|
height: calc(100% + 6px);
|
|
width: calc(100% + 6px);
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
right: 0;
|
|
z-index: -2;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.block:hover::after,
|
|
.block:focus::after {
|
|
transform: translate(-2px, -3px);
|
|
}
|
|
|
|
.block:active {
|
|
color: var(--block-text-color);
|
|
transform: translate(3px, 3px);
|
|
}
|
|
|
|
.block:active::after {
|
|
transform: translate(-4px, -4px);
|
|
}
|
|
|
|
.block:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.block.fixed {
|
|
cursor: initial !important;
|
|
}
|
|
|
|
.block.btn {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* FIXED STYLES */
|
|
.block.fixed:hover,
|
|
.block.fixed:hover::before,
|
|
.block.fixed:hover::after,
|
|
.block.fixed:active,
|
|
.block.fixed:active::before,
|
|
.block.fixed:active::after,
|
|
.block.fixed:focus,
|
|
.block.fixed:focus::before,
|
|
.block.fixed:focus::after {
|
|
transform: none !important;
|
|
}
|
|
|
|
/* ACCENT STYLES */
|
|
.block.accent {
|
|
color: var(--block-background-color);
|
|
background: var(--block-accent-color);
|
|
}
|
|
|
|
.block.accent::before {
|
|
background: var(--block-accent-color);
|
|
}
|
|
|
|
/* INLINE STYLES */
|
|
.block.inline {
|
|
display: inline-block;
|
|
font-size: 0.75em;
|
|
padding: 0 6px;
|
|
margin: 3px 2px 1px 4px;
|
|
}
|
|
.block.inline::after {
|
|
top: -1px;
|
|
left: -1px;
|
|
}
|
|
.block.inline:hover,
|
|
.block.inline:focus {
|
|
transform: translate(1px, 1px);
|
|
}
|
|
.block.inline:hover::after,
|
|
.block.inline:focus::after {
|
|
transform: translate(-1px, -1px);
|
|
}
|
|
.block.inline:active {
|
|
transform: translate(2px, 2px);
|
|
}
|
|
|
|
/* ROUND STYLES */
|
|
.block.round,
|
|
.block.round::before,
|
|
.block.round::after {
|
|
border-radius: 30px;
|
|
}
|
|
|
|
.block.round::after {
|
|
left: 1px;
|
|
}
|
|
|