diff options
Diffstat (limited to 'style.css')
-rw-r--r-- | style.css | 260 |
1 files changed, 260 insertions, 0 deletions
diff --git a/style.css b/style.css new file mode 100644 index 0000000..7ad513f --- /dev/null +++ b/style.css @@ -0,0 +1,260 @@ +* { + box-sizing: border-box; + margin: 0; padding: 0; + font-family: "Merriweather", serif; + transition-timing-function: ease-in-out; +} + +:root { + --bg: #fff; + --selbg: #F2F2F2; + --border: rgba(0,0,0,.2); + --text: rgba(0,0,0,.87); + --off: rgba(0,0,0,.35); + --red: #EA6462; + --green: #58C478; + --blue: #1D7BA3; +} + +html { + background-color: #fff; +} + +html.invert { + background-color: #000; + --bg: #000; + --selbg: #0D0D0D; + --border: rgba(255,255,255,.2); + --text: rgba(255,255,255,.87); + --off: rgba(255,255,255,.35); + --red: #EA6462; + --green: #58C478; + --blue: #1D7BA3; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg: #000; + --selbg: #0D0D0D; + --border: rgba(255,255,255,.2); + --text: rgba(255,255,255,.87); + --off: rgba(255,255,255,.35); + --red: #EA6462; + --green: #58C478; + --blue: #1D7BA3; + } + + html { + background-color: #000; + } + + html.invert { + background-color: #fff; + --bg: #fff; + --selbg: #F2F2F2; + --border: rgba(0,0,0,.2); + --text: rgba(0,0,0,.87); + --off: rgba(0,0,0,.35); + --red: #EA6462; + --green: #58C478; + --blue: #1D7BA3; + } +} + +body { + max-width: 620px; + margin: 0 auto; + padding: 48px; + color: var(--text); +} + +div.material-icons { + display: block; +} + +#toolbar { + position: fixed; + top: 0; right: 0; +} + +#open-file { + display: none; +} + +#toolbar div, #toolbar a, #toolbar label { + display: block; + height: 48px; + width: 48px; + text-align: center; + line-height: 48px; + text-decoration: none; + color: var(--off); + cursor: pointer; +} + +#toolbar div:hover, #toolbar a:hover, #toolbar label:hover { + color: var(--text); +} + +h1 { + margin-bottom: 12px; + font-size: 42px; + /*font-size: 26px;*/ + font-weight: normal; +} + +section { + position: relative; + padding: 20px 0 16px; + border-top: 1px solid var(--border); +} + +.edit-btn, .done-btn { + position: absolute; + top: 12px; right: 0; + text-decoration: none; + color: var(--off); + cursor: pointer; +} + +.edit-btn:hover { + color: var(--text); +} + +.done-btn:hover { + color: var(--bg); + background-color: var(--green); +} + +h2 { + font-size: 10px; + font-weight: normal; + color: var(--off); +} + +h2 a { + color: var(--off); + text-decoration: none; +} + +h2 a.active, h2 a:hover { + color: var(--text); +} + +section:not(.editing) p { + margin: 22px 0; + font-size: 16px; + line-height: 1.4em; +} + +strong { + font-weight: 900; +} + +section:not(.editing) .choice { + display: block; + margin: 1em 0; + color: var(--blue); + text-decoration: none; +} + +section:not(.editing) .choice:hover { + text-decoration: underline; +} + +.choice-made { + position: relative; + display: block; + margin: 1em 0; + color: var(--text); + text-decoration: none; +} + +.choice-made:hover { + color: var(--blue); + text-decoration: underline; +} + +.choice-made::before { + content: "undo"; + font-family: 'Material Icons'; + font-size: 24px; + line-height: 1; + display: block; + white-space: nowrap; + color: var(--border); + position: absolute; + left: -32px; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} + +.choice-made:hover::before { + color: var(--blue); +} + +section textarea { + display: block; + width: 100%; + margin: 22px 0; + padding: 0px 0; + resize: none; + border: 0; + outline: none; + font-size: 16px; + line-height: 1.4em; + color: var(--text); + background-color: transparent; +} + +section textarea:focus { + box-shadow: -9px 0 0 var(--bg), -12px 0 0 var(--border); +} + +.editing .choice textarea { + padding-right: 24px; + color: var(--blue); +} + +.choice-delete { + position: absolute; + right: 0; + margin-top: 3px; + color: var(--off); + cursor: pointer; +} + +.choice-delete:hover { + color: var(--bg); + background-color: var(--red); +} + +.choice-delete:hover ~ textarea { + background: var(--selbg); + box-shadow: -2px 0 0 5px var(--selbg), 2px 0 0 5px var(--selbg); +} + +.add-choice { + padding: 4px 0; + text-align: center; + cursor: pointer; +} + +.add-choice:hover { + background-color: var(--selbg); +} + +#the-end { + color: var(--red); + font-size: 24px; +} + +#the-end::before { + content: "◈"; /* ◆ ◇ ◈ */ +} + +#unreachable { + font-size: 12px; + font-style: oblique; + color: var(--red); +} |