@cube-drone/marquee-css 0.9.0 → 0.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/marquee.css +432 -7
- package/package.json +1 -1
package/marquee.css
CHANGED
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
* translucent neutrals, so they ride either canvas; page shells that own
|
|
12
12
|
* the whole page (the omnibus, buildSite, the preview tool) declare
|
|
13
13
|
* `color-scheme: light dark` themselves. Scheme palettes (noir, parchment,
|
|
14
|
-
* hotdog-stand, terminal) are authorial and fixed: a noir
|
|
15
|
-
* noon.
|
|
14
|
+
* hotdog-stand, terminal, the game windows) are authorial and fixed: a noir
|
|
15
|
+
* page is noir at noon.
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
/* ---- document ---- */
|
|
@@ -123,6 +123,117 @@
|
|
|
123
123
|
background: rgba(127, 127, 127, 0.12);
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
+
/* ---- stacks: layered content (SPEC.md, "Stacks"). Every layer sits in the
|
|
127
|
+
* one grid cell, so the box is as big as its biggest layer needs (nothing
|
|
128
|
+
* overflows, nothing clips) and paint order is DOM order - no z-index, no
|
|
129
|
+
* absolute positioning. aspect-ratio is a minimum, not a cage: the automatic
|
|
130
|
+
* minimum size lets content make the box taller. ---- */
|
|
131
|
+
|
|
132
|
+
.mq-stack {
|
|
133
|
+
display: grid;
|
|
134
|
+
grid-template-columns: minmax(0, 1fr);
|
|
135
|
+
grid-template-rows: 1fr;
|
|
136
|
+
width: var(--mq-stack-w, 100%);
|
|
137
|
+
max-width: 100%;
|
|
138
|
+
aspect-ratio: var(--mq-stack-aspect, auto);
|
|
139
|
+
margin: 1em 0;
|
|
140
|
+
isolation: isolate;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.mq-stack > .mq-layer {
|
|
144
|
+
grid-area: 1 / 1;
|
|
145
|
+
min-width: 0;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/* A layer's look is its own: custom properties inherit, and a layer that
|
|
149
|
+
picked up its page's --mq-bg would paint the page over the picture. Reset
|
|
150
|
+
at zero specificity so the layer's own scheme class or inline knobs win;
|
|
151
|
+
the text color still inherits through `inherit`. */
|
|
152
|
+
:where(.mq-stack > .mq-layer) {
|
|
153
|
+
--mq-bg: initial;
|
|
154
|
+
--mq-bg-tile: initial;
|
|
155
|
+
--mq-color: initial;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.mq-layer {
|
|
159
|
+
background-color: var(--mq-bg, transparent);
|
|
160
|
+
background-image: var(--mq-bg-tile, none);
|
|
161
|
+
color: var(--mq-color, inherit);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.mq-stack > .mq-layer > :first-child {
|
|
165
|
+
margin-top: 0;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.mq-stack > .mq-layer > :last-child {
|
|
169
|
+
margin-bottom: 0;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* place: fill covers the box; the nine anchors shrink to their content,
|
|
173
|
+
held off the edge, and align their text the way they lean */
|
|
174
|
+
.mq-place-fill {
|
|
175
|
+
align-self: stretch;
|
|
176
|
+
justify-self: stretch;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.mq-stack > .mq-place-fill:not(.mq-layer-cover) {
|
|
180
|
+
padding: 1rem;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.mq-stack > .mq-layer:not(.mq-place-fill) {
|
|
184
|
+
margin: 0.75rem;
|
|
185
|
+
max-width: calc(100% - 1.5rem);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.mq-place-top-left { align-self: start; justify-self: start; text-align: left; }
|
|
189
|
+
.mq-place-top { align-self: start; justify-self: center; text-align: center; }
|
|
190
|
+
.mq-place-top-right { align-self: start; justify-self: end; text-align: right; }
|
|
191
|
+
.mq-place-left { align-self: center; justify-self: start; text-align: left; }
|
|
192
|
+
.mq-place-center { align-self: center; justify-self: center; text-align: center; }
|
|
193
|
+
.mq-place-right { align-self: center; justify-self: end; text-align: right; }
|
|
194
|
+
.mq-place-bottom-left { align-self: end; justify-self: start; text-align: left; }
|
|
195
|
+
.mq-place-bottom { align-self: end; justify-self: center; text-align: center; }
|
|
196
|
+
.mq-place-bottom-right { align-self: end; justify-self: end; text-align: right; }
|
|
197
|
+
|
|
198
|
+
/* A fill layer that is one embed is that media covering the box: the one
|
|
199
|
+
permitted crop, of pictures, never of words. Without aspect it sizes the
|
|
200
|
+
box by its own shape; with aspect, contain: size takes it out of the
|
|
201
|
+
sizing, so the box is the aspect (or the words) and the picture crops. */
|
|
202
|
+
.mq-layer-cover > p {
|
|
203
|
+
height: 100%;
|
|
204
|
+
margin: 0;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.mq-layer-cover :is(img, video).mq-embed {
|
|
208
|
+
display: block;
|
|
209
|
+
width: 100%;
|
|
210
|
+
height: 100%;
|
|
211
|
+
object-fit: cover;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.mq-stack-aspect > .mq-layer-cover {
|
|
215
|
+
contain: size;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/* backing: legibility over whatever is beneath */
|
|
219
|
+
.mq-backing-box {
|
|
220
|
+
background-color: var(--mq-bg, rgb(16 16 20 / 0.72));
|
|
221
|
+
color: var(--mq-color, #fff);
|
|
222
|
+
padding: 0.5em 0.75em;
|
|
223
|
+
border-radius: 0.25em;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.mq-backing-outline {
|
|
227
|
+
color: var(--mq-color, #fff);
|
|
228
|
+
font-weight: 800;
|
|
229
|
+
text-shadow:
|
|
230
|
+
-0.06em -0.06em 0 #000,
|
|
231
|
+
0.06em -0.06em 0 #000,
|
|
232
|
+
-0.06em 0.06em 0 #000,
|
|
233
|
+
0.06em 0.06em 0 #000,
|
|
234
|
+
0 0 0.2em #000;
|
|
235
|
+
}
|
|
236
|
+
|
|
126
237
|
/* ---- spoilers: content present, visually withheld. Zero-JS: blurred,
|
|
127
238
|
revealed on hover or focus. The element is focusable (tabindex=0), so a
|
|
128
239
|
tap focuses and reveals it on phones too, where there is no hover - :focus
|
|
@@ -431,6 +542,14 @@ big {
|
|
|
431
542
|
display: inline-block;
|
|
432
543
|
}
|
|
433
544
|
|
|
545
|
+
/* ...and a line may break on either side of any inline-block, so a word's
|
|
546
|
+
units ride in a group that wraps as one: the break opportunities go back
|
|
547
|
+
to the spaces. (Renderers don't group spaceless scripts - Han, kana,
|
|
548
|
+
Thai - which wrap between characters anyway.) */
|
|
549
|
+
.mq-split .mq-w {
|
|
550
|
+
white-space: nowrap;
|
|
551
|
+
}
|
|
552
|
+
|
|
434
553
|
@media (prefers-reduced-motion: no-preference) {
|
|
435
554
|
.mq-rainbow.mq-split,
|
|
436
555
|
.mq-bounce.mq-split,
|
|
@@ -705,11 +824,17 @@ big {
|
|
|
705
824
|
}
|
|
706
825
|
}
|
|
707
826
|
|
|
708
|
-
/* ---- schemes: named knob bundles (grown from the corpus) ----
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
*
|
|
712
|
-
|
|
827
|
+
/* ---- schemes: named knob bundles (grown from the corpus) ----
|
|
828
|
+
*
|
|
829
|
+
* A scheme sets knobs; a knob written alongside it wins. Colors ride the
|
|
830
|
+
* --mq-* slots (an inline knob beats the class's value), and a scheme's
|
|
831
|
+
* typeface sits at zero specificity in :where(), so a font= knob - or an
|
|
832
|
+
* mq-font-* class anywhere - overrides it. --mq-accent is a scheme's
|
|
833
|
+
* signature color: whatever its game let you customize. */
|
|
834
|
+
|
|
835
|
+
/* a schemed section (or stack layer) paints its own background: give the
|
|
836
|
+
* text room inside (scoped so a schemed page keeps its own padding rule) */
|
|
837
|
+
:is(section, .mq-layer)[class*="mq-scheme-"] {
|
|
713
838
|
padding: 0.75rem 1rem;
|
|
714
839
|
}
|
|
715
840
|
|
|
@@ -729,6 +854,9 @@ section[class*="mq-scheme-"] {
|
|
|
729
854
|
--mq-color: #33ff66;
|
|
730
855
|
background: var(--mq-bg);
|
|
731
856
|
color: var(--mq-color);
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
:where(.mq-scheme-terminal) {
|
|
732
860
|
font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", monospace;
|
|
733
861
|
}
|
|
734
862
|
|
|
@@ -741,6 +869,9 @@ section[class*="mq-scheme-"] {
|
|
|
741
869
|
--mq-color: #3a2f1b;
|
|
742
870
|
background: var(--mq-bg);
|
|
743
871
|
color: var(--mq-color);
|
|
872
|
+
}
|
|
873
|
+
|
|
874
|
+
:where(.mq-scheme-parchment) {
|
|
744
875
|
font-family: Georgia, "Iowan Old Style", serif;
|
|
745
876
|
}
|
|
746
877
|
|
|
@@ -758,3 +889,297 @@ section[class*="mq-scheme-"] {
|
|
|
758
889
|
.mq-scheme-hotdog-stand a {
|
|
759
890
|
color: #ffffff;
|
|
760
891
|
}
|
|
892
|
+
|
|
893
|
+
/* ---- game windows. Pure CSS frames - no images, so every color is a knob.
|
|
894
|
+
* Frames are inset shadows: they take no layout room and can't collide with
|
|
895
|
+
* a neighbor; the padding clears them. */
|
|
896
|
+
|
|
897
|
+
/* EarthBound: rings of one game pixel (--mq-eb-px) around a dark window,
|
|
898
|
+
* measured from the game's own window art: plain is gray-white-gray, the
|
|
899
|
+
* four flavors are the game's own, accent is the flavor ring - so any color
|
|
900
|
+
* makes a flavor of your own. The corners are pixel-rounded, exactly:
|
|
901
|
+
* clip-path steps the silhouette (row insets 4, 2, 1, 1 game pixels), the
|
|
902
|
+
* inset shadows draw the rings square, and a ::before overlay repaints the
|
|
903
|
+
* few corner pixels where a rounded ring differs from a square one (inset
|
|
904
|
+
* shadows paint over an element's own background, hence the overlay). The
|
|
905
|
+
* rectangles are generated from a diff of the two; every color stays a
|
|
906
|
+
* knob. Press Start 2P, because the game's own face is not ours to ship. */
|
|
907
|
+
.mq-scheme-earthbound,
|
|
908
|
+
[class*="mq-scheme-earthbound-"] {
|
|
909
|
+
--mq-eb-px: 2px;
|
|
910
|
+
--mq-bg: #290829;
|
|
911
|
+
--mq-color: #ffefad;
|
|
912
|
+
--mq-eb-edge: #393052;
|
|
913
|
+
--mq-eb-light: #ffefad;
|
|
914
|
+
position: relative;
|
|
915
|
+
background: var(--mq-bg);
|
|
916
|
+
color: var(--mq-color);
|
|
917
|
+
box-shadow:
|
|
918
|
+
inset 0 0 0 calc(1 * var(--mq-eb-px)) var(--mq-eb-edge),
|
|
919
|
+
inset 0 0 0 calc(2 * var(--mq-eb-px)) var(--mq-eb-light),
|
|
920
|
+
inset 0 0 0 calc(5 * var(--mq-eb-px)) var(--mq-accent),
|
|
921
|
+
inset 0 0 0 calc(8 * var(--mq-eb-px)) var(--mq-eb-edge);
|
|
922
|
+
clip-path: polygon(
|
|
923
|
+
0 calc(4 * var(--mq-eb-px)),
|
|
924
|
+
calc(1 * var(--mq-eb-px)) calc(4 * var(--mq-eb-px)),
|
|
925
|
+
calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)),
|
|
926
|
+
calc(2 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)),
|
|
927
|
+
calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)),
|
|
928
|
+
calc(4 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)),
|
|
929
|
+
calc(4 * var(--mq-eb-px)) 0,
|
|
930
|
+
calc(100% - 4 * var(--mq-eb-px)) 0,
|
|
931
|
+
calc(100% - 4 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)),
|
|
932
|
+
calc(100% - 2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)),
|
|
933
|
+
calc(100% - 2 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)),
|
|
934
|
+
calc(100% - 1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)),
|
|
935
|
+
calc(100% - 1 * var(--mq-eb-px)) calc(4 * var(--mq-eb-px)),
|
|
936
|
+
100% calc(4 * var(--mq-eb-px)),
|
|
937
|
+
100% calc(100% - 4 * var(--mq-eb-px)),
|
|
938
|
+
calc(100% - 1 * var(--mq-eb-px)) calc(100% - 4 * var(--mq-eb-px)),
|
|
939
|
+
calc(100% - 1 * var(--mq-eb-px)) calc(100% - 2 * var(--mq-eb-px)),
|
|
940
|
+
calc(100% - 2 * var(--mq-eb-px)) calc(100% - 2 * var(--mq-eb-px)),
|
|
941
|
+
calc(100% - 2 * var(--mq-eb-px)) calc(100% - 1 * var(--mq-eb-px)),
|
|
942
|
+
calc(100% - 4 * var(--mq-eb-px)) calc(100% - 1 * var(--mq-eb-px)),
|
|
943
|
+
calc(100% - 4 * var(--mq-eb-px)) 100%,
|
|
944
|
+
calc(4 * var(--mq-eb-px)) 100%,
|
|
945
|
+
calc(4 * var(--mq-eb-px)) calc(100% - 1 * var(--mq-eb-px)),
|
|
946
|
+
calc(2 * var(--mq-eb-px)) calc(100% - 1 * var(--mq-eb-px)),
|
|
947
|
+
calc(2 * var(--mq-eb-px)) calc(100% - 2 * var(--mq-eb-px)),
|
|
948
|
+
calc(1 * var(--mq-eb-px)) calc(100% - 2 * var(--mq-eb-px)),
|
|
949
|
+
calc(1 * var(--mq-eb-px)) calc(100% - 4 * var(--mq-eb-px)),
|
|
950
|
+
0 calc(100% - 4 * var(--mq-eb-px))
|
|
951
|
+
);
|
|
952
|
+
}
|
|
953
|
+
|
|
954
|
+
.mq-scheme-earthbound {
|
|
955
|
+
--mq-bg: #101010;
|
|
956
|
+
--mq-color: #ffffff;
|
|
957
|
+
--mq-accent: #f7f7f7;
|
|
958
|
+
--mq-eb-edge: #101010;
|
|
959
|
+
--mq-eb-light: #8c9494;
|
|
960
|
+
box-shadow:
|
|
961
|
+
inset 0 0 0 calc(1 * var(--mq-eb-px)) var(--mq-eb-edge),
|
|
962
|
+
inset 0 0 0 calc(2 * var(--mq-eb-px)) var(--mq-eb-light),
|
|
963
|
+
inset 0 0 0 calc(3 * var(--mq-eb-px)) var(--mq-accent),
|
|
964
|
+
inset 0 0 0 calc(4 * var(--mq-eb-px)) var(--mq-eb-light);
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
.mq-scheme-earthbound-mint { --mq-accent: #6bd3bd; --mq-eb-edge: #393052; --mq-eb-light: #ffefad; }
|
|
968
|
+
.mq-scheme-earthbound-strawberry { --mq-accent: #ff94ad; --mq-eb-edge: #42214a; --mq-eb-light: #ffefce; }
|
|
969
|
+
.mq-scheme-earthbound-banana { --mq-accent: #efff5a; --mq-eb-edge: #4a3152; --mq-eb-light: #ffffd6; }
|
|
970
|
+
.mq-scheme-earthbound-peanut { --mq-accent: #e7a552; --mq-eb-edge: #421829; --mq-eb-light: #ffefad; }
|
|
971
|
+
|
|
972
|
+
:is(.mq-scheme-earthbound, [class*="mq-scheme-earthbound-"])::before {
|
|
973
|
+
content: "";
|
|
974
|
+
position: absolute;
|
|
975
|
+
inset: 0;
|
|
976
|
+
pointer-events: none;
|
|
977
|
+
background:
|
|
978
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(2 * var(--mq-eb-px)) top calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
979
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(2 * var(--mq-eb-px)) top calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
980
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(2 * var(--mq-eb-px)) bottom calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
981
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(2 * var(--mq-eb-px)) bottom calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
982
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(1 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
|
|
983
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(1 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
|
|
984
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(1 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
|
|
985
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(1 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
|
|
986
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
987
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
988
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
989
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
990
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) top calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
991
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) top calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
992
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) bottom calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
993
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) bottom calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
994
|
+
linear-gradient(var(--mq-accent), var(--mq-accent)) left calc(5 * var(--mq-eb-px)) top calc(5 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
995
|
+
linear-gradient(var(--mq-accent), var(--mq-accent)) right calc(5 * var(--mq-eb-px)) top calc(5 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
996
|
+
linear-gradient(var(--mq-accent), var(--mq-accent)) left calc(5 * var(--mq-eb-px)) bottom calc(5 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
997
|
+
linear-gradient(var(--mq-accent), var(--mq-accent)) right calc(5 * var(--mq-eb-px)) bottom calc(5 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat;
|
|
998
|
+
}
|
|
999
|
+
|
|
1000
|
+
.mq-scheme-earthbound::before {
|
|
1001
|
+
background:
|
|
1002
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(2 * var(--mq-eb-px)) top calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1003
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(2 * var(--mq-eb-px)) top calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1004
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(2 * var(--mq-eb-px)) bottom calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1005
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(2 * var(--mq-eb-px)) bottom calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1006
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(1 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
|
|
1007
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(1 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
|
|
1008
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(1 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
|
|
1009
|
+
linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(1 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
|
|
1010
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1011
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1012
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1013
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1014
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) top calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1015
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) top calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1016
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) bottom calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1017
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) bottom calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1018
|
+
linear-gradient(var(--mq-accent), var(--mq-accent)) left calc(3 * var(--mq-eb-px)) top calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1019
|
+
linear-gradient(var(--mq-accent), var(--mq-accent)) right calc(3 * var(--mq-eb-px)) top calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1020
|
+
linear-gradient(var(--mq-accent), var(--mq-accent)) left calc(3 * var(--mq-eb-px)) bottom calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1021
|
+
linear-gradient(var(--mq-accent), var(--mq-accent)) right calc(3 * var(--mq-eb-px)) bottom calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1022
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(4 * var(--mq-eb-px)) top calc(4 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1023
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(4 * var(--mq-eb-px)) top calc(4 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1024
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(4 * var(--mq-eb-px)) bottom calc(4 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
|
|
1025
|
+
linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(4 * var(--mq-eb-px)) bottom calc(4 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat;
|
|
1026
|
+
}
|
|
1027
|
+
|
|
1028
|
+
:where(.mq-scheme-earthbound, [class*="mq-scheme-earthbound-"]) {
|
|
1029
|
+
font-family: "Press Start 2P", ui-monospace, monospace;
|
|
1030
|
+
line-height: 1.9;
|
|
1031
|
+
}
|
|
1032
|
+
|
|
1033
|
+
/* Press Start's glyphs run wide; shrink them - but only while the scheme's
|
|
1034
|
+
* own face is the one being worn (a font= knob brings its own size). */
|
|
1035
|
+
:where(.mq-scheme-earthbound, [class*="mq-scheme-earthbound-"]):not([class*="mq-font-"]) {
|
|
1036
|
+
font-size: 0.8em;
|
|
1037
|
+
}
|
|
1038
|
+
|
|
1039
|
+
:is(section, .mq-layer):is(.mq-scheme-earthbound, [class*="mq-scheme-earthbound-"]) {
|
|
1040
|
+
padding: 1.5rem 1.75rem;
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
:is(.mq-scheme-earthbound, [class*="mq-scheme-earthbound-"]) a {
|
|
1044
|
+
color: var(--mq-accent);
|
|
1045
|
+
}
|
|
1046
|
+
|
|
1047
|
+
/* CrossCode: a slightly see-through black panel, a gray line inside a black
|
|
1048
|
+
* one, and the top-right and bottom-left corners sliced off. clip-path does
|
|
1049
|
+
* the slicing; a gradient in each cut corner carries both lines along the
|
|
1050
|
+
* diagonal, so the border runs unbroken round the cut. Accent is the gray
|
|
1051
|
+
* line. */
|
|
1052
|
+
.mq-scheme-crosscode {
|
|
1053
|
+
--mq-bg: rgb(5 5 5 / 0.85);
|
|
1054
|
+
--mq-color: #f2f2f2;
|
|
1055
|
+
--mq-accent: #9a9a9a;
|
|
1056
|
+
--mq-cc-cut: 14px;
|
|
1057
|
+
--mq-cc-diag: calc(var(--mq-cc-cut) * 0.7071);
|
|
1058
|
+
--mq-cc-lines:
|
|
1059
|
+
transparent var(--mq-cc-diag),
|
|
1060
|
+
#000 var(--mq-cc-diag),
|
|
1061
|
+
#000 calc(var(--mq-cc-diag) + 2px),
|
|
1062
|
+
var(--mq-accent) calc(var(--mq-cc-diag) + 2px),
|
|
1063
|
+
var(--mq-accent) calc(var(--mq-cc-diag) + 4px),
|
|
1064
|
+
transparent calc(var(--mq-cc-diag) + 4px);
|
|
1065
|
+
color: var(--mq-color);
|
|
1066
|
+
background-color: var(--mq-bg);
|
|
1067
|
+
background-image:
|
|
1068
|
+
linear-gradient(to bottom left, var(--mq-cc-lines)),
|
|
1069
|
+
linear-gradient(to top right, var(--mq-cc-lines)),
|
|
1070
|
+
var(--mq-bg-tile, none);
|
|
1071
|
+
background-position: top right, bottom left, 0 0;
|
|
1072
|
+
background-size: calc(var(--mq-cc-cut) + 8px) calc(var(--mq-cc-cut) + 8px), calc(var(--mq-cc-cut) + 8px) calc(var(--mq-cc-cut) + 8px), auto;
|
|
1073
|
+
background-repeat: no-repeat, no-repeat, repeat;
|
|
1074
|
+
box-shadow:
|
|
1075
|
+
inset 0 0 0 2px #000,
|
|
1076
|
+
inset 0 0 0 4px var(--mq-accent);
|
|
1077
|
+
clip-path: polygon(
|
|
1078
|
+
0 0,
|
|
1079
|
+
calc(100% - var(--mq-cc-cut)) 0,
|
|
1080
|
+
100% var(--mq-cc-cut),
|
|
1081
|
+
100% 100%,
|
|
1082
|
+
var(--mq-cc-cut) 100%,
|
|
1083
|
+
0 calc(100% - var(--mq-cc-cut))
|
|
1084
|
+
);
|
|
1085
|
+
}
|
|
1086
|
+
|
|
1087
|
+
:is(section, .mq-layer).mq-scheme-crosscode {
|
|
1088
|
+
padding: 1rem 1.25rem;
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
.mq-scheme-crosscode a {
|
|
1092
|
+
color: #8fd3ff;
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
/* Final Fantasy VI: the vertical blue gradient - accent is the window color,
|
|
1096
|
+
* which is exactly what the game's config screen let you change - in a
|
|
1097
|
+
* silver frame with soft corners, white text dropping a shadow. The gradient
|
|
1098
|
+
* comes in bands, as the SNES drew it (it had colors to spare, not to
|
|
1099
|
+
* blend): hard stops, each band the accent mixed a step further to black. */
|
|
1100
|
+
.mq-scheme-ff6 {
|
|
1101
|
+
--mq-accent: #4f63d2;
|
|
1102
|
+
--mq-color: #ffffff;
|
|
1103
|
+
color: var(--mq-color);
|
|
1104
|
+
background-color: var(--mq-accent);
|
|
1105
|
+
background-image:
|
|
1106
|
+
linear-gradient(
|
|
1107
|
+
to bottom,
|
|
1108
|
+
var(--mq-accent) 0.0% 8.33%,
|
|
1109
|
+
color-mix(in srgb, var(--mq-accent) 94%, #000) 8.33% 16.67%,
|
|
1110
|
+
color-mix(in srgb, var(--mq-accent) 88%, #000) 16.67% 25.0%,
|
|
1111
|
+
color-mix(in srgb, var(--mq-accent) 82%, #000) 25.0% 33.33%,
|
|
1112
|
+
color-mix(in srgb, var(--mq-accent) 76%, #000) 33.33% 41.67%,
|
|
1113
|
+
color-mix(in srgb, var(--mq-accent) 70%, #000) 41.67% 50.0%,
|
|
1114
|
+
color-mix(in srgb, var(--mq-accent) 64%, #000) 50.0% 58.33%,
|
|
1115
|
+
color-mix(in srgb, var(--mq-accent) 58%, #000) 58.33% 66.67%,
|
|
1116
|
+
color-mix(in srgb, var(--mq-accent) 52%, #000) 66.67% 75.0%,
|
|
1117
|
+
color-mix(in srgb, var(--mq-accent) 46%, #000) 75.0% 83.33%,
|
|
1118
|
+
color-mix(in srgb, var(--mq-accent) 40%, #000) 83.33% 91.67%,
|
|
1119
|
+
color-mix(in srgb, var(--mq-accent) 34%, #000) 91.67% 100.0%
|
|
1120
|
+
),
|
|
1121
|
+
var(--mq-bg-tile, none);
|
|
1122
|
+
border: 3px solid #e7e7ef;
|
|
1123
|
+
border-radius: 8px;
|
|
1124
|
+
box-shadow:
|
|
1125
|
+
0 0 0 1px #3a3a48,
|
|
1126
|
+
inset 0 0 0 1px #6c7088;
|
|
1127
|
+
text-shadow: 1px 1px 0 #10102a;
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
:is(section, .mq-layer).mq-scheme-ff6 {
|
|
1131
|
+
padding: 0.85rem 1.1rem;
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
.mq-scheme-ff6 a {
|
|
1135
|
+
color: #ffe98a;
|
|
1136
|
+
}
|
|
1137
|
+
|
|
1138
|
+
/* Chrono Trigger: a dithered blue window in a beveled pewter frame - light
|
|
1139
|
+
* on the top-left edges, dark on the bottom-right - with tight corners.
|
|
1140
|
+
* Accent is the window color (the game shipped eight; any will do). Banded
|
|
1141
|
+
* like FF6's, for the same SNES reason. */
|
|
1142
|
+
.mq-scheme-chronotrigger {
|
|
1143
|
+
--mq-accent: #2a3a9c;
|
|
1144
|
+
--mq-color: #ffffff;
|
|
1145
|
+
color: var(--mq-color);
|
|
1146
|
+
background-color: var(--mq-accent);
|
|
1147
|
+
background-image:
|
|
1148
|
+
repeating-linear-gradient(45deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 4px),
|
|
1149
|
+
linear-gradient(
|
|
1150
|
+
160deg,
|
|
1151
|
+
var(--mq-accent) 0.0% 12.5%,
|
|
1152
|
+
color-mix(in srgb, var(--mq-accent) 93%, #000) 12.5% 25.0%,
|
|
1153
|
+
color-mix(in srgb, var(--mq-accent) 86%, #000) 25.0% 37.5%,
|
|
1154
|
+
color-mix(in srgb, var(--mq-accent) 79%, #000) 37.5% 50.0%,
|
|
1155
|
+
color-mix(in srgb, var(--mq-accent) 71%, #000) 50.0% 62.5%,
|
|
1156
|
+
color-mix(in srgb, var(--mq-accent) 64%, #000) 62.5% 75.0%,
|
|
1157
|
+
color-mix(in srgb, var(--mq-accent) 57%, #000) 75.0% 87.5%,
|
|
1158
|
+
color-mix(in srgb, var(--mq-accent) 50%, #000) 87.5% 100.0%
|
|
1159
|
+
),
|
|
1160
|
+
var(--mq-bg-tile, none);
|
|
1161
|
+
border: 3px solid;
|
|
1162
|
+
border-color: #dfe3ee #6d7385 #555b6c #c9cfdc;
|
|
1163
|
+
border-radius: 4px;
|
|
1164
|
+
box-shadow: 0 0 0 1px #000;
|
|
1165
|
+
text-shadow: 1px 1px 0 #000;
|
|
1166
|
+
}
|
|
1167
|
+
|
|
1168
|
+
:is(section, .mq-layer).mq-scheme-chronotrigger {
|
|
1169
|
+
padding: 0.85rem 1.1rem;
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
.mq-scheme-chronotrigger a {
|
|
1173
|
+
color: #9ff0ff;
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
/* The other windows speak VT323 - a terminal-ish pixel face that reads like
|
|
1177
|
+
* their in-game text - at a size that matches body text (it runs small). */
|
|
1178
|
+
:where(.mq-scheme-crosscode, .mq-scheme-ff6, .mq-scheme-chronotrigger) {
|
|
1179
|
+
font-family: VT323, ui-monospace, monospace;
|
|
1180
|
+
}
|
|
1181
|
+
|
|
1182
|
+
:where(.mq-scheme-crosscode, .mq-scheme-ff6, .mq-scheme-chronotrigger):not([class*="mq-font-"]) {
|
|
1183
|
+
font-size: 1.3em;
|
|
1184
|
+
line-height: 1.25;
|
|
1185
|
+
}
|