moth

basic.css

  1/* Color palette: http://paletton.com/#uid=33x0u0klrl-4ON9dhtKtAdqMQ4T */
  2
  3:root {
  4  --bg: #010e19;
  5  --fg: #edd488;
  6  --bg-main: #000d;
  7  --heading: #cb2408cc;
  8  --bg-heading1: #cb240844;
  9  --fg-link: #b9cbd8;
 10  --bg-input: #ccc4;
 11  --bg-input-hover: #8884;
 12  --bg-notification: #ac8f3944;
 13  --bg-error: #f00;
 14  --fg-error: white;
 15  --bg-category: #ccc4;
 16  --bg-input-invalid: #800;
 17  --fg-input-invalid: white;
 18  --bg-mothball:  #ccc;
 19  --bg-debug: #cccc;
 20  --fg-debug: black;
 21  --bg-toast: #333;
 22  --fg-toast: #eee;
 23  --box-toast: #0b0;
 24}
 25
 26@media (prefers-color-scheme: light) {
 27  /* We uses the alpha channel to apply hue tinting to elements, to get a
 28   * similar effect in light or dark mode. That means there aren't a whole lot of
 29   * things to change between light and dark mode.
 30   */
 31   :root {
 32    --bg: #b9cbd8;
 33    --fg: black;
 34    --bg-main: #fffd;
 35    --fg-link: #092b45;
 36  }
 37}
 38
 39body {
 40  font-family: sans-serif;
 41  background: var(--bg) url("bg.png") center fixed;
 42  background-size: cover;
 43  background-blend-mode: soft-light;
 44  background-color: var(--bg);
 45  color: var(--fg);
 46}
 47canvas.wallpaper {
 48  position: fixed;
 49  display: block;
 50  z-index: -1000;
 51  top: 0;
 52  left: 0;
 53  height: 100vh;
 54  width: 100vw;
 55  opacity: 0.2;
 56  image-rendering: pixelated;
 57}
 58@media (prefers-reduced-motion) {
 59  canvas.wallpaper {
 60    display: none;
 61  }
 62}
 63main {
 64  max-width: 40em;
 65  margin: 1em auto;
 66  padding: 1px 3px;
 67  border-radius: 5px;
 68  background: var(--bg-main);
 69}
 70h1, h2, h3, h4, h5, h6 {
 71  color: var(--heading);
 72}
 73h1 {
 74  background: var(--bg-heading1);
 75  padding: 3px;
 76}
 77p {
 78	margin: 1em 0em;
 79}
 80a:any-link {
 81	color: var(--fg-link);
 82}
 83form, pre {
 84	margin: 1em;
 85  overflow-x: auto;
 86}
 87input, select {
 88	padding: 0.6em;
 89	margin: 0.2em;
 90	max-width: 30em;
 91}
 92input {
 93  background-color: var(--bg-input);
 94  color: inherit;
 95}
 96input:hover {
 97  background-color: var(--bg-input-hover);
 98}
 99input:active {
100  background-color: inherit;
101}
102.notification, .error {
103  padding: 0 1em;
104  border-radius: 8px;
105}
106.notification {
107	background: var(--bg-notification);
108}
109.error {
110  background: var(--bg-error);
111  color: var(--fg-error);
112}
113.hidden {
114  display: none;
115}
116
117/** Puzzles list */
118.category {
119  margin: 5px 0;
120  background: var(--bg-category);
121}
122.category h2 {
123  margin: 0 0.2em;
124}
125.category .solved {
126  text-decoration: line-through;
127}
128nav ul, .category ul {
129  margin: 0;
130  padding: 0.2em 1em;
131  display: flex;
132  flex-wrap: wrap;
133  gap: 8px 16px;
134}
135nav li, .category li {
136	display: inline;
137}
138.category li.entitled {
139  flex-basis: 100%;
140}
141.mothball {
142  float: right;
143  text-decoration: none;
144  border-radius: 5px;
145  background: var(--bg-mothball);
146  padding: 4px 8px;
147  margin: 5px;
148}
149
150/** Puzzle content */
151#puzzle {
152  border-bottom: solid;
153  padding: 0 0.5em;
154}
155#puzzle img {
156  max-width: 100%;
157}
158input:invalid {
159  background-color: var(--bg-input-invalid);
160  color: var(--fg-input-invalid);
161}
162.answer_ok {
163  cursor: help;
164}
165
166/** Development mode information */
167.debug {
168  overflow: auto;
169  padding: 1em;
170  border-radius: 10px;
171  margin: 2em auto;
172  background: var(--bg-debug);
173  color: var(--fg-debug);
174}
175.debug dt {
176  font-weight: bold;
177}
178
179/** Draggable items, from the draggable plugin */
180li[draggable]::before {
181  content: "↕";
182  padding: 0.5em;
183  cursor: move;
184}
185li[draggable] {
186  list-style: none;
187}
188
189[draggable].moving {
190  opacity: 0.4;
191}
192
193[draggable].over {
194  border: 1px white dashed;
195}
196
197
198
199
200
201/** Toasts are little pop-up informational messages. */
202 .toasts {
203  position: fixed;
204  z-index: 100;
205  bottom: 10px;
206  left: 10px;
207  text-align: center;
208  width: calc(100% - 20px);
209  display: flex;
210  flex-direction: column;
211}
212.toast {
213  border-radius: 0.5em;
214  padding:  0.2em 2em;
215  animation: fadeIn ease 1s;
216  margin: 2px auto;
217  background: var(--bg-toast);
218  color: var(--fg-toast);
219  box-shadow: 0px 0px 8px 0px var(--box-toast);
220}
221@keyframes fadeIn {
222  0% { opacity: 0; }
223  100% { opacity: 1; }
224}