aboutsummaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css260
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);
+}