clairity.css 0.1.0
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.
- checksums.yaml +7 -0
- data/.github/workflows/main.yml +27 -0
- data/.gitignore +66 -0
- data/CHANGELOG.md +423 -0
- data/Gemfile +5 -0
- data/LICENSE.txt +373 -0
- data/README.md +170 -0
- data/Rakefile +12 -0
- data/bin/console +11 -0
- data/bin/setup +8 -0
- data/clairity.css.gemspec +51 -0
- data/lib/assets/css/clairity/base.css +951 -0
- data/lib/assets/css/clairity/classes.css +264 -0
- data/lib/assets/css/clairity/components.css +946 -0
- data/lib/assets/css/clairity/cosmetic.css +157 -0
- data/lib/assets/css/clairity/functions.css +46 -0
- data/lib/assets/css/clairity/icons.css +44 -0
- data/lib/assets/css/clairity/normalize.css +239 -0
- data/lib/assets/css/clairity/palette.css +329 -0
- data/lib/assets/css/clairity/shims.css +20 -0
- data/lib/assets/css/clairity/states.css +756 -0
- data/lib/assets/css/clairity/utilities.css +68 -0
- data/lib/assets/css/clairity/variables.css +301 -0
- data/lib/assets/css/clairity.basic.css +28 -0
- data/lib/assets/css/clairity.classless.css +50 -0
- data/lib/assets/css/clairity.css +109 -0
- data/lib/assets/images/input-image.png +0 -0
- data/lib/assets/images/logo.png +0 -0
- data/lib/assets/images/profile-avatar.png +0 -0
- data/lib/assets/js/clairity.css.js +6 -0
- data/lib/assets/media/t-rex_roar.mp3 +0 -0
- data/lib/clairity.css/version.rb +5 -0
- data/lib/clairity.css.rb +10 -0
- data/sig/clairity.css.rbs +4 -0
- data/test/test_clairity_css.rb +17 -0
- data/test/test_helper.rb +5 -0
- metadata +128 -0
|
@@ -0,0 +1,951 @@
|
|
|
1
|
+
/******************************************************************************\
|
|
2
|
+
BASE - these are the base styles for *all* elements and certain core pseudo-
|
|
3
|
+
elments / -classes. for simple sites this stylesheet plus variables.css
|
|
4
|
+
(where :root vars & color-scheme: light dark; are set) should suffice.
|
|
5
|
+
|
|
6
|
+
Note that simple & full :is() support (without multiple declarations)
|
|
7
|
+
only landed broadly in ~Jan 2020. With it came :where() support, and
|
|
8
|
+
both now have forgiving selector lists. Since we're already implcitly
|
|
9
|
+
eschewing IE by using CSS variables, and support for :is/:where is
|
|
10
|
+
roughly at least ~90%, we'll use :where as needed but sparingly herein.
|
|
11
|
+
|
|
12
|
+
specificity is a 4-element designation:
|
|
13
|
+
[inline, #id, .class/[attr]/:pseudo-class, element/::pseudo-element]
|
|
14
|
+
|
|
15
|
+
we'll generally shoot for [0001] specificity in this base.css file,
|
|
16
|
+
with a few notable exceptions, like button-type input elements and
|
|
17
|
+
[multiple] selects, and relegate higher specificity niceties to the
|
|
18
|
+
states.css stylesheet. exceptions have [0010] or [0011] specificity.
|
|
19
|
+
|
|
20
|
+
Quickly search for elements using hashtag syntax, e.g., #a for anchors.
|
|
21
|
+
|
|
22
|
+
A few key styles from normalize.css are repeated here, and marked as
|
|
23
|
+
such via comments, in case normalize.css is not being used.
|
|
24
|
+
\******************************************************************************/
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
/* -----------------------------------------------------------------------------
|
|
28
|
+
// #root - root elements, wildcard contexts, and metadata
|
|
29
|
+
// -------------------------------------------------------------------------- */
|
|
30
|
+
|
|
31
|
+
/* #* #before #after - minimal css reset - * has 0 specificity */
|
|
32
|
+
/* uncomment 'outline' in browser dev tools to troubleshoot container overflow*/
|
|
33
|
+
*, *::before, *::after {
|
|
34
|
+
box-sizing: border-box; /* intuitive box-sizing; sanitize.css */
|
|
35
|
+
font: inherit; /* for replaced elements/form fields */
|
|
36
|
+
background-repeat: no-repeat; /* sanitize.css */
|
|
37
|
+
/*outline: var(--fat) var(--error, firebrick);*/
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* #html - the root <html> document context - should be minimally styled, esp.
|
|
41
|
+
not layout styles, as the cascade can have many undesired downstream effects.
|
|
42
|
+
use system defaults for text color & background-color if possible; otherwise,
|
|
43
|
+
a number of other elements' colors will need to be tweaked too. */
|
|
44
|
+
html {
|
|
45
|
+
font-family: var(--sans-serif); /* affirmatively set default */
|
|
46
|
+
font-weight: var(--regular); /* affirmatively set default */
|
|
47
|
+
line-height: var(--normal); /* affirmatively set default */
|
|
48
|
+
color: var(--text); /* make text slightly softer */
|
|
49
|
+
background-color: var(--background); /* affirmatively set default */
|
|
50
|
+
height: var(--view-height); /* fill viewport height */
|
|
51
|
+
-ms-text-size-adjust: 100%; /* guards against auto-zoom in landscape */
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* #head #title #base #meta #link #style #script - page/document metadata */
|
|
55
|
+
head, title, base, meta, link, style, script { display: none; }
|
|
56
|
+
|
|
57
|
+
/* #body - the <body> of the html document. th body should cover the full extend
|
|
58
|
+
of the viewport to support full-bleed layouts. style <main> instead to layout
|
|
59
|
+
content within the viewport. max-width with padding works best for primarily
|
|
60
|
+
text-oriented documents. For anything else, override with max-width: auto; */
|
|
61
|
+
body {
|
|
62
|
+
font-size: var(--medium); /* rem inherits from html/:root */
|
|
63
|
+
max-width: var(--line-length); /* for horizontal centering */
|
|
64
|
+
height: var(--view-height); /* fill view height by default */
|
|
65
|
+
margin: auto; /* center if width/height is set */
|
|
66
|
+
/*padding: var(--m);*/ /* for screens smaller than max-width */
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* #backdrop - under <dialog> but above other content. open dialog with js
|
|
70
|
+
showModal() to trigger ::backdrop. pseudo-elements have [0001] specificity */
|
|
71
|
+
::backdrop { background-color: var(--backdrop); }
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
/* -----------------------------------------------------------------------------
|
|
75
|
+
// #sectioning - block type elements meant to hold other content elements
|
|
76
|
+
// -------------------------------------------------------------------------- */
|
|
77
|
+
|
|
78
|
+
/* #main - the primary/central content of the page */
|
|
79
|
+
main { }
|
|
80
|
+
|
|
81
|
+
/* #aside - a container for content incidental to the main content */
|
|
82
|
+
aside { background-color: var(--background); }
|
|
83
|
+
|
|
84
|
+
/* #article - a container for one item of a set of similar items */
|
|
85
|
+
article { }
|
|
86
|
+
|
|
87
|
+
/* #nav - a container element for navigation - inline flex layout by default,
|
|
88
|
+
but can easily be adjusted to a block layout */
|
|
89
|
+
nav {
|
|
90
|
+
display: flex;
|
|
91
|
+
flex-wrap: wrap; /* don't squish stuff on smaller screens */
|
|
92
|
+
align-items: center; /* vertical alignment of items */
|
|
93
|
+
justify-content: space-between; /* push items apart on main axis */
|
|
94
|
+
height: fit-content; /* otherwise expands vertically in grid*/
|
|
95
|
+
/*gap: var(--s);*/
|
|
96
|
+
padding-block: var(--s);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* #section - a logical page section, typically with a header and/or footer */
|
|
100
|
+
section { }
|
|
101
|
+
|
|
102
|
+
/* #footer - footer elements of a section of content */
|
|
103
|
+
footer {
|
|
104
|
+
display: grid; /* to center items via justify-items */
|
|
105
|
+
justify-items: center;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* #div - a non-semantic block container, generally used for styling only */
|
|
109
|
+
div { border-radius: var(--radius); }
|
|
110
|
+
|
|
111
|
+
/* #noscript - shown when the script isn't supported or scripting is off */
|
|
112
|
+
noscript { }
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
/* container queries - default names/types for common container elements -
|
|
116
|
+
EXPERIMENTAL - only safari 16+ & chrome 93+ behind a flag for now
|
|
117
|
+
// .......................................................................... */
|
|
118
|
+
main, aside, article, nav, section, header, footer {
|
|
119
|
+
container-type: inline-size;
|
|
120
|
+
/*font-size: clamp(1rem, 1rem + 1cqi, 2rem);*/
|
|
121
|
+
}
|
|
122
|
+
main { container-name: main; }
|
|
123
|
+
aside { container-name: aside; }
|
|
124
|
+
article { container-name: article; }
|
|
125
|
+
nav { container-name: nav; }
|
|
126
|
+
section { container-name: section; }
|
|
127
|
+
header { container-name: header; }
|
|
128
|
+
footer { container-name: footer; }
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
/* -----------------------------------------------------------------------------
|
|
132
|
+
// #headers - heading-related elements
|
|
133
|
+
// -------------------------------------------------------------------------- */
|
|
134
|
+
|
|
135
|
+
/* #header - the <header> element provides a generic container for headers */
|
|
136
|
+
/* #hgroup - <hgroup> is obsolete, but many browsers still support it */
|
|
137
|
+
header, hgroup { margin: var(--margin); }
|
|
138
|
+
|
|
139
|
+
/* #hgroup - strong visual offset for hgroups; set hgroup:hover the same in case
|
|
140
|
+
a global :hover style is set - [0001] / [0011] specificity */
|
|
141
|
+
hgroup, hgroup:hover {
|
|
142
|
+
border-left: var(--thickest) solid var(--heading);
|
|
143
|
+
padding-left: var(--m);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* #headings - #h1 #h2 #h3 #h4 #h5 #h6 commonalities - headings use fluid type
|
|
147
|
+
(via --clamp fcn defined in functions.css) to scale with screen width; these
|
|
148
|
+
fall back to their bigger font size in case functions.css isn't imported. */
|
|
149
|
+
h1, h2, h3, h4, h5, h6 {
|
|
150
|
+
color: var(--heading);
|
|
151
|
+
font-weight: var(--lighter);
|
|
152
|
+
line-height: var(--compact);
|
|
153
|
+
margin: var(--margin);
|
|
154
|
+
font-size: var(--clamp, calc(var(--max-font) * 1rem));
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* individual declarations for uncommonalities between headings. --min-font
|
|
158
|
+
defines the font size (in rem) at --min-vw and below, while --max-font
|
|
159
|
+
defines the font size at --max-vw (or greater) via the --clamp function */
|
|
160
|
+
h1 { --min-font: 1.75; --max-font: 2.5; }
|
|
161
|
+
h2 { --min-font: 1.5; --max-font: 2; }
|
|
162
|
+
h3 { --min-font: 1.375; --max-font: 1.667; }
|
|
163
|
+
h4 { --min-font: 1.25; --max-font: 1.5; }
|
|
164
|
+
h5 { --min-font: 1.125; --max-font: 1.25; }
|
|
165
|
+
h6 { --min-font: 1; --max-font: 1.125; }
|
|
166
|
+
h5, h6 { font-weight: var(--bold); } /* lighter --heading colors
|
|
167
|
+
typically need bolder font-weight for the smallest headings */
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
/* -----------------------------------------------------------------------------
|
|
171
|
+
// #links - for linking to other documents/document fragments
|
|
172
|
+
// -------------------------------------------------------------------------- */
|
|
173
|
+
|
|
174
|
+
/* #a - the <a> anchor tag for linking documents and document fragments */
|
|
175
|
+
a {
|
|
176
|
+
color: var(--link); /* affirmatively sets link color */
|
|
177
|
+
font-weight: var(--bold); /* slighly more visual weight */
|
|
178
|
+
text-decoration: underline;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* #link #visited #hover #active - core anchor link states - LVHA-order used for
|
|
182
|
+
reliably styling links - [0010[ / [0011] specificity is the lowest we can
|
|
183
|
+
get here - link styles are foundational, so we violate our specificity limit
|
|
184
|
+
for them. :link & :visited only apply to <a> & <area> tags, so they're left
|
|
185
|
+
un-prefixed here for lower specificity */
|
|
186
|
+
:link { }
|
|
187
|
+
:visited { color: var(--visited); }
|
|
188
|
+
a:hover {
|
|
189
|
+
text-decoration: none;
|
|
190
|
+
color: var(--active);
|
|
191
|
+
}
|
|
192
|
+
a:active { background-color: transparent; } /* normalize.css */
|
|
193
|
+
|
|
194
|
+
/* #map #area - image maps and map areas */
|
|
195
|
+
map { }
|
|
196
|
+
area { }
|
|
197
|
+
|
|
198
|
+
/* #mailto #tel #sms #file #external #bookmark #download - specialty link types.
|
|
199
|
+
position background for ease of adding icons later - [0010] specificity -
|
|
200
|
+
these have limited use, so we don't mind violating our specificity limit */
|
|
201
|
+
[href^="mailto:"], [href^="tel:"], [href^="sms:"], [href^="file:"],
|
|
202
|
+
[rel~="external"], [rel~="bookmark"], [download] {
|
|
203
|
+
background-size: var(--text-icon);
|
|
204
|
+
background-position: var(--center-right);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
/* -----------------------------------------------------------------------------
|
|
209
|
+
// #lists - ordered and unordered lists of items
|
|
210
|
+
// -------------------------------------------------------------------------- */
|
|
211
|
+
/* #ol, #ul - <ol> ordered and <ul> unordered lists; lists should maintain
|
|
212
|
+
markers by default; remove them for special cases, as warranted */
|
|
213
|
+
ul, ol {
|
|
214
|
+
margin: var(--m) 0;
|
|
215
|
+
padding-left: var(--l);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/* #menu - an unordered list of primarily action elements (experimental) - as in
|
|
219
|
+
a list of links and buttons, horizontally or vertically laid out */
|
|
220
|
+
menu {
|
|
221
|
+
display: flex;
|
|
222
|
+
flex: 0.9 2 min-content;
|
|
223
|
+
flex-flow: row wrap; /* default layout is horizontal */
|
|
224
|
+
gap: var(--m);
|
|
225
|
+
align-items: center;
|
|
226
|
+
margin: 0 var(--m); /* no block margin; inline- == gap */
|
|
227
|
+
padding-left: 0; /* remove default left padding */
|
|
228
|
+
list-style: none; /* no marker by default */
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
/* #li - list items for ul, ol, and menu */
|
|
232
|
+
li { }
|
|
233
|
+
/* line-length minus ul/ol padding & margin - only works for first list level */
|
|
234
|
+
li, dl { max-width: calc(var(--line-length) - var(--l)); }
|
|
235
|
+
|
|
236
|
+
/* #dl - description list */
|
|
237
|
+
dl { margin: var(--m) 0; }
|
|
238
|
+
/* #dt - description term */
|
|
239
|
+
dt {
|
|
240
|
+
color: var(--loud);
|
|
241
|
+
font-weight: var(--bolder);
|
|
242
|
+
margin-top: var(--m);
|
|
243
|
+
}
|
|
244
|
+
/* #dd - description details */
|
|
245
|
+
dd { margin-left: var(--m); }
|
|
246
|
+
|
|
247
|
+
/* #marker - pseudo-element for the marker on lists, e.g., the bullet/number */
|
|
248
|
+
::marker { color: var(--text); } /* ensure marker gets text color */
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
/* -----------------------------------------------------------------------------
|
|
252
|
+
// #tables - for tabular data
|
|
253
|
+
// -------------------------------------------------------------------------- */
|
|
254
|
+
/* #table - the <table> container element */
|
|
255
|
+
/* background color is set by color-scheme declaration. constrain height for
|
|
256
|
+
vertical scrolling. */
|
|
257
|
+
/* <table>'s should have an id attribute and a <caption> for the best
|
|
258
|
+
semantics. it may also have a summary attribute for accessibility. */
|
|
259
|
+
table {
|
|
260
|
+
/*background-color: var(--background);*/
|
|
261
|
+
display: block; /* needed for sticky first column */
|
|
262
|
+
overflow-x: auto; /* have the container set the width */
|
|
263
|
+
border-collapse: collapse; /* reset.css */
|
|
264
|
+
border-spacing: 0; /* reset.css */
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
/* #caption - include a table caption for the best semantics. */
|
|
268
|
+
caption { }
|
|
269
|
+
|
|
270
|
+
/* #thead #tbody #tfoot - table header, body, and footer */
|
|
271
|
+
tbody { }
|
|
272
|
+
thead { }
|
|
273
|
+
tfoot { }
|
|
274
|
+
|
|
275
|
+
/* #tr - table row */
|
|
276
|
+
tr { }
|
|
277
|
+
|
|
278
|
+
/* #td #th - table data and table heading elements */
|
|
279
|
+
/* <th>'s should have scope and id attributes for the best semantics. */
|
|
280
|
+
th { font-weight: var(--bold); }
|
|
281
|
+
/* <td>'s should have a headers attribute that lists associated <th> id
|
|
282
|
+
attributes for the best semantics. */
|
|
283
|
+
td, th {
|
|
284
|
+
padding: var(--s);
|
|
285
|
+
vertical-align: top;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/* #colgroup #col - column groups contain table column definitions. */
|
|
289
|
+
colgroup { }
|
|
290
|
+
col { }
|
|
291
|
+
|
|
292
|
+
|
|
293
|
+
/* -----------------------------------------------------------------------------
|
|
294
|
+
// #forms - for submitting data to the server - we err on the side of being
|
|
295
|
+
// opinionated on the display of forms. they're gridded, with inline labels
|
|
296
|
+
// and inputs (elements), by default, providing a clean columnar structure.
|
|
297
|
+
// -------------------------------------------------------------------------- */
|
|
298
|
+
|
|
299
|
+
/* #form - the <form> container element */
|
|
300
|
+
form {
|
|
301
|
+
display: grid; /* for inline labels & fields */
|
|
302
|
+
grid-template-columns: [labels full-start] 3fr [elements] 7fr [full-end];
|
|
303
|
+
grid-row: auto;
|
|
304
|
+
gap: var(--m) var(--m);
|
|
305
|
+
max-width: calc(var(--line-length) - 2 * var(--m)); /*correct for
|
|
306
|
+
padding on <body> */
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
/* #fieldset - (named) groups of form fields, usually checkboxes and radios */
|
|
310
|
+
/* border and background are color-scheme-sensitive */
|
|
311
|
+
fieldset {
|
|
312
|
+
grid-column: elements; /* put on the [elements] grid-line */
|
|
313
|
+
border: var(--solid) var(--border);
|
|
314
|
+
border-radius: var(--radius);
|
|
315
|
+
background-color: var(--bg-field);
|
|
316
|
+
width: min(var(--line-length), 100%);
|
|
317
|
+
margin: var(--m) 0 0 0;
|
|
318
|
+
padding: 0 var(--m) var(--m) var(--m);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
/* #legend - descriptor for fieldsets - color-scheme-sensitive bg/border */
|
|
322
|
+
legend {
|
|
323
|
+
background-color: var(--bg-field);
|
|
324
|
+
border: var(--solid) var(--border);
|
|
325
|
+
border-radius: var(--radius);
|
|
326
|
+
/*margin-left: var(--s);*/
|
|
327
|
+
padding: 0.25rem 0.5rem; /* direct rem values to make
|
|
328
|
+
padding insensitive to var values but proportional to root font size */
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
/* #label - <label> for a form input */
|
|
332
|
+
label {
|
|
333
|
+
text-align: right; /* align text to the right */
|
|
334
|
+
grid-column: labels; /* put on the [labels] grid-line */
|
|
335
|
+
place-self: center end; /* align box next to the form field */
|
|
336
|
+
overflow-wrap: anywhere; /* not great, but better than nothing */
|
|
337
|
+
hyphens: auto; /* hyphenate in narrow parent containers */
|
|
338
|
+
/*word-break: break-all;*/ /* overflow-wrap with hyphens seems
|
|
339
|
+
slightly better at dealing with long labels on narrow screens */
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
|
|
343
|
+
/* -----------------------------------------------------------------------------
|
|
344
|
+
// #inputs - standard form inputs - #input #text #textarea
|
|
345
|
+
// -------------------------------------------------------------------------- */
|
|
346
|
+
|
|
347
|
+
/* #input - the typical form <input> element */
|
|
348
|
+
input {
|
|
349
|
+
height: var(--height); /* for vertical legibility */
|
|
350
|
+
padding: 0 var(--s); /* for horizontal legibility */
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
/* #text - the default, single-line text entry input - [0010] specificity */
|
|
354
|
+
[type="text"] { }
|
|
355
|
+
|
|
356
|
+
/* #textarea - <textarea> for multi-line text input */
|
|
357
|
+
textarea {
|
|
358
|
+
line-height: var(--relaxed); /* give it a little more room */
|
|
359
|
+
height: calc(var(--height) * 2); /* twice input fields */
|
|
360
|
+
padding: 0 var(--s); /* like textbox-esque inputs */
|
|
361
|
+
resize: vertical; /* only vertical to preserve layouts */
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
/* #input #textarea #select #optgroup #option #fieldset - set default width
|
|
365
|
+
parameters on form elements - [0001] / [0002] specificity */
|
|
366
|
+
input, textarea, select, optgroup, option, form fieldset {
|
|
367
|
+
min-width: var(--width); /* min to be legible on mobile */
|
|
368
|
+
max-width: var(--field-max); /* don't break out of container */
|
|
369
|
+
}
|
|
370
|
+
/* set a default border on textbox-esque form elements */
|
|
371
|
+
input, textarea, select {
|
|
372
|
+
border-radius: var(--radius); /* less blocky rounded square */
|
|
373
|
+
border: var(--solid) var(--border); /* needs to be set on
|
|
374
|
+
<select> to allow styling on macOS */
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
/* #placeholder - ::placeholder apparently needs font set explicitly */
|
|
378
|
+
::placeholder { font-size: var(--medium); }
|
|
379
|
+
|
|
380
|
+
|
|
381
|
+
/* -----------------------------------------------------------------------------
|
|
382
|
+
// #buttons - <button>s and <input>s of type=[button, submit, reset]
|
|
383
|
+
// -------------------------------------------------------------------------- */
|
|
384
|
+
|
|
385
|
+
/* #button #submit #reset - default button input types - [0010] specificity is
|
|
386
|
+
the least we can get for button-type inputs */
|
|
387
|
+
/* #file-selector-button - the button for opening the file picker dialog */
|
|
388
|
+
button, [type="button"],[type="submit"],[type="reset"], ::file-selector-button {
|
|
389
|
+
-webkit-appearance: button; /* normalize.css */
|
|
390
|
+
appearance: button;
|
|
391
|
+
display: inline-block;
|
|
392
|
+
color: var(--action);
|
|
393
|
+
background-color: var(--foreground); /* inverted style for primary
|
|
394
|
+
actions - will undo for reset */
|
|
395
|
+
font-size: var(--small);
|
|
396
|
+
font-weight: var(--bold);
|
|
397
|
+
line-height: 1.15;
|
|
398
|
+
text-transform: uppercase;
|
|
399
|
+
cursor: pointer; /* controversial for buttons but common */
|
|
400
|
+
white-space: normal; /* wrap button text in narrow confines */
|
|
401
|
+
width: fit-content;
|
|
402
|
+
min-height: var(--height); /* to match input fields */
|
|
403
|
+
min-width: auto; /* set width based on content */
|
|
404
|
+
padding: 0 var(--m);
|
|
405
|
+
border: var(--solid) var(--transparent);
|
|
406
|
+
border-radius: var(--radius);
|
|
407
|
+
/*vertical-align: bottom;*/
|
|
408
|
+
}
|
|
409
|
+
/* #reset */
|
|
410
|
+
[type="reset"] { /* [0010] specificity */
|
|
411
|
+
color: var(--foreground); /* invert foreground/background */
|
|
412
|
+
background-color: var(--background); /* invert foreground/background */
|
|
413
|
+
border-color: var(--foreground);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
|
|
417
|
+
/* -----------------------------------------------------------------------------
|
|
418
|
+
// #selections - dropdown/selection form controls
|
|
419
|
+
// -------------------------------------------------------------------------- */
|
|
420
|
+
/* #select - single-select drop-down <select> and multi-select element, see
|
|
421
|
+
https://moderncss.dev/custom-select-styles-with-pure-css/
|
|
422
|
+
the svg is retained here in case icons.css isn't imported; it's redefined in
|
|
423
|
+
cosmetic.css to use the clairity.css/your icon set. */
|
|
424
|
+
select {
|
|
425
|
+
-webkit-appearance: none; /* hide the default seleet, since we will */
|
|
426
|
+
appearance: none; /* be restyling it for better consistency */
|
|
427
|
+
background-image: url("data:image/svg+xml;utf8,<svg \
|
|
428
|
+
xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path \
|
|
429
|
+
d='M0,10 20,30 40,10' fill='none' stroke='%23999' stroke-width='2'/></svg>");
|
|
430
|
+
background-size: var(--text-icon); /* --text-icon is em-based */
|
|
431
|
+
background-position: right 0.5em center; /* em value to scale with
|
|
432
|
+
select field font size rather than root font size */
|
|
433
|
+
padding: 0 var(--l) 0 var(--s);
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
/* #size #multiple - multiple-element single-select & multiple-select list
|
|
437
|
+
element - [0011] / [0010] specificity */
|
|
438
|
+
select[size], [multiple] {
|
|
439
|
+
background-image: none; /* remove dropdown indicator */
|
|
440
|
+
min-height: calc(var(--height) * 4); /* 4 times input fields */
|
|
441
|
+
padding: 0;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
/* #datalist - list of <option>s for form controls; no display by default */
|
|
445
|
+
datalist { }
|
|
446
|
+
|
|
447
|
+
/* #option - <option>s for <select>s or <datalist>s */
|
|
448
|
+
option {
|
|
449
|
+
display: flex;
|
|
450
|
+
font-weight: var(--regular);
|
|
451
|
+
align-items: center;
|
|
452
|
+
justify-content: start;
|
|
453
|
+
padding: 0 var(--s); /* for horizontal legibility */
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
/* #optgroup - groupings of options in select elements */
|
|
457
|
+
optgroup { font-weight: var(--bolder); }
|
|
458
|
+
|
|
459
|
+
select, optgroup, option {
|
|
460
|
+
height: var(--height); /* to match textbox-esque inputs */
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
|
|
464
|
+
/* -----------------------------------------------------------------------------
|
|
465
|
+
// #radio #checkbox - radio buttons and checkboxes - included here, even though
|
|
466
|
+
// higher specificity is required, since these are core form elements
|
|
467
|
+
// -------------------------------------------------------------------------- */
|
|
468
|
+
|
|
469
|
+
[type="radio"], [type="checkbox"] { /*[0010] specificity - least possible here*/
|
|
470
|
+
-moz-appearance: none;
|
|
471
|
+
-webkit-appearance: none;
|
|
472
|
+
appearance: none; /* remove default control for replacement */
|
|
473
|
+
width: var(--medium); /* scales with base text size */
|
|
474
|
+
min-width: var(--medium); /* override prior min-width */
|
|
475
|
+
height: var(--medium); /* scales with base text size */
|
|
476
|
+
border-radius: var(--circle); /* circular border */
|
|
477
|
+
box-shadow: var(--inset) var(--unchecked); /* inset bg */
|
|
478
|
+
background-color: var(--unchecked); /* the "check" */
|
|
479
|
+
vertical-align: text-top;
|
|
480
|
+
padding: 0; /* remove padding set by general input styles*/
|
|
481
|
+
}
|
|
482
|
+
[type="checkbox"] { border-radius: var(--radius); } /* rounded square */
|
|
483
|
+
|
|
484
|
+
:where([type="radio"]):checked, :where([type="checkbox"]):checked { /* [0010] */
|
|
485
|
+
background-color: var(--checked, LinkText); /* SelectedItem system color
|
|
486
|
+
in --checked might be undefined so provide a more reliable alternative*/
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
|
|
490
|
+
/* -----------------------------------------------------------------------------
|
|
491
|
+
// specialized inputs - for completeness, limited use; - [0010] specificity
|
|
492
|
+
// -------------------------------------------------------------------------- */
|
|
493
|
+
|
|
494
|
+
/* #hidden - for data to be returned to the server but not shown to the user */
|
|
495
|
+
[type="hidden"] { }
|
|
496
|
+
|
|
497
|
+
/* #date #time #datetime #datetime-local #week #month #url #email #numbr #tel
|
|
498
|
+
#password #search - background image placement for specialized inputs */
|
|
499
|
+
[type="date"], [type="time"], [type="datetime"], [type="datetime-local"],
|
|
500
|
+
[type="week"], [type="month"], [type="url"], [type="email"],
|
|
501
|
+
[type="number"], [type="tel"], [type="password"], [type="search"] {
|
|
502
|
+
background-size: var(--field-icon);
|
|
503
|
+
background-position: var(--padded-center-left);
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
/* #color #range #number #search - pickers & search field */
|
|
507
|
+
[type="number"] { }
|
|
508
|
+
[type="color"] { padding: var(--xxs); }
|
|
509
|
+
[type="range"] { padding: 0; }
|
|
510
|
+
[type="search"] { appearance: textfield; } /* CHECK: needed? older versions of
|
|
511
|
+
chrome/safari had problems styling search fields but is this still true? */
|
|
512
|
+
|
|
513
|
+
/* #range #file - range/file inputs get too long in too long/small containers */
|
|
514
|
+
[type="range"], [type="file"] {
|
|
515
|
+
width: clamp(var(--width), var(--line-length), 100%);
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
/* #image #file - image maps & file selectors */
|
|
519
|
+
[type="image"], [type="file"] {
|
|
520
|
+
height: auto; /* CHECK: might break radios/checkboxes */
|
|
521
|
+
border: none;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
/* #::-webkit-calendar-picker-indicator -a webkit picker pseudo-element-[0001]*/
|
|
525
|
+
::-webkit-calendar-picker-indicator {
|
|
526
|
+
display: none;
|
|
527
|
+
background: none;
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
|
|
531
|
+
/* -----------------------------------------------------------------------------
|
|
532
|
+
// #outputs - informational output/display
|
|
533
|
+
// -------------------------------------------------------------------------- */
|
|
534
|
+
/* #output - the output of an operation or calculation */
|
|
535
|
+
output { font-weight: var(--bold); }
|
|
536
|
+
|
|
537
|
+
/* #meter - represents a value on a scale, like a gauge */
|
|
538
|
+
/* #progress - specifies <progress> toward a goal */
|
|
539
|
+
meter, progress {
|
|
540
|
+
background-color: var(--bg-inactive); /* use theme color for track */
|
|
541
|
+
background-image: none; /* remove beveled bg gradient on firefox */
|
|
542
|
+
box-shadow: var(--groove) rgba(0, 0, 0, 0.25); /* inset look */
|
|
543
|
+
border-radius: var(--radius); /* round the corners of the track */
|
|
544
|
+
min-width: var(--width); /* matches text fields */
|
|
545
|
+
max-width: var(--field-max); /* up to container width */
|
|
546
|
+
max-height: var(--ml); /* too fat on narrow screens otherwise */
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
/* meter/progress bar track - chrome/safari thinking they're special */
|
|
550
|
+
::-webkit-meter-bar, ::-webkit-progress-bar {
|
|
551
|
+
border: none; /* remove the border on chrome */
|
|
552
|
+
background-image: none; /* remove bg gradient on safari */
|
|
553
|
+
height: var(--m); /* chrome wants to be skinny otherwise */
|
|
554
|
+
background-color: var(--bg-inactive); /* color scheme aware bg color */
|
|
555
|
+
box-shadow: var(--groove) rgba(0, 0, 0, 0.25); /* inset shadow */
|
|
556
|
+
border-radius: var(--radius); /* match outer border radius */
|
|
557
|
+
}
|
|
558
|
+
/* round the corners on firefox */
|
|
559
|
+
::-moz-meter-bar, ::-moz-progress-bar {
|
|
560
|
+
border-radius: var(--radius);
|
|
561
|
+
}
|
|
562
|
+
/* round corners on safari/chrome - must be separately declared from the
|
|
563
|
+
firefox rule, otherwise both ignore this fill area border-radius value */
|
|
564
|
+
::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value,
|
|
565
|
+
::-webkit-meter-even-less-good-value, ::-webkit-progress-value {
|
|
566
|
+
border-radius: var(--radius);
|
|
567
|
+
}
|
|
568
|
+
/* specify theme colors for chrome */
|
|
569
|
+
::-webkit-progress-value { background-color: var(--info); }
|
|
570
|
+
::-webkit-meter-optimum-value { background-color: var(--success); }
|
|
571
|
+
::-webkit-meter-suboptimum-value { background-color: var(--warning); }
|
|
572
|
+
::-webkit-meter-even-less-good-value { background-color: var(--error); }
|
|
573
|
+
|
|
574
|
+
|
|
575
|
+
/* -----------------------------------------------------------------------------
|
|
576
|
+
// #blocks - elements that contain text blocks
|
|
577
|
+
// -------------------------------------------------------------------------- */
|
|
578
|
+
|
|
579
|
+
/* #p - the paragraph tag */
|
|
580
|
+
p {
|
|
581
|
+
/*font-size: var(--medium);*/ /* TODO: why needed? */
|
|
582
|
+
/*line-height: var(--normal);*/ /* TODO: why needed? */
|
|
583
|
+
margin: var(--m) 0; /* block margins should collapse? */
|
|
584
|
+
max-width: var(--line-length); /* avoid unreadably long lines */
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
/* #address - for contact information, not just addresses */
|
|
588
|
+
address {
|
|
589
|
+
display: block;
|
|
590
|
+
font-style: normal;
|
|
591
|
+
margin: var(--m) 0;
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
/* #blockquote - set-off quote blocks */
|
|
595
|
+
blockquote {
|
|
596
|
+
quotes: "“" "”" "‘" "’"; /* use smart quotes */
|
|
597
|
+
background-color: var(--translucent);
|
|
598
|
+
display: block;
|
|
599
|
+
margin: var(--m) var(--l);
|
|
600
|
+
max-width: calc(var(--line-length) - (var(--l)*2));
|
|
601
|
+
overflow: hidden;
|
|
602
|
+
padding: var(--m);
|
|
603
|
+
page-break-inside: avoid;
|
|
604
|
+
position: relative;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
/* #pre - the preformatted text element */
|
|
608
|
+
/* #xmp - pre-formatted x/html w/o escaping (deprecated but widely supported) */
|
|
609
|
+
pre, xmp {
|
|
610
|
+
font-family: monospace, monospace; /* normalize.css */
|
|
611
|
+
font-size: 1em; /* em-based, normalize.css */
|
|
612
|
+
line-height: var(--relaxed);
|
|
613
|
+
max-width: max-content; /* don't take up unneeded width */
|
|
614
|
+
min-width: var(--line-length);
|
|
615
|
+
overflow: auto; /* scroll if content is wider than container */
|
|
616
|
+
margin: var(--m) 0;
|
|
617
|
+
border-left: var(--fat) var(--highlighted);
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
/* to match <pre><code> styling */
|
|
621
|
+
xmp {
|
|
622
|
+
color: var(--distinct);
|
|
623
|
+
font-weight: var(--bolder);
|
|
624
|
+
background-color: var(--bg-distinct);
|
|
625
|
+
padding: 0 var(--m);
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
/* #bdi - isolates text from the bidirectional algorithm */
|
|
629
|
+
/* #bdo - overrides the natural bidirectional text direction */
|
|
630
|
+
bdi, bdo { }
|
|
631
|
+
|
|
632
|
+
/* #ruby - annotations for providing pronounciation hints for asian langs */
|
|
633
|
+
/* #rp - the fallback parenthesis element for browsers not supporting rubies */
|
|
634
|
+
/* #rt - the ruby text element that provides the actual pronounciation hints */
|
|
635
|
+
ruby, rp, rt { }
|
|
636
|
+
|
|
637
|
+
/* #first-letter - pseudo-element for the first letter in a block-level tag */
|
|
638
|
+
/*::first-letter { }*/
|
|
639
|
+
/* #first-line - pseudo-element for the first line in a block-level element */
|
|
640
|
+
/*::first-line { }*/
|
|
641
|
+
|
|
642
|
+
|
|
643
|
+
/* -----------------------------------------------------------------------------
|
|
644
|
+
// #inline elements - elements that occur principally within text blocks.
|
|
645
|
+
generally, use em-based font sizes for these to size relative to context.
|
|
646
|
+
// -------------------------------------------------------------------------- */
|
|
647
|
+
|
|
648
|
+
/* #b #strong - the bring attention (not bold) <b> & <strong> importance tags */
|
|
649
|
+
b, strong { font-weight: bolder; }
|
|
650
|
+
|
|
651
|
+
/* #em #i - the emphasis and idiomatic text (not italicized) tags */
|
|
652
|
+
em, i { font-style: italic; }
|
|
653
|
+
|
|
654
|
+
/* #u - the unarticulated annotation element (formerly underline) */
|
|
655
|
+
u {
|
|
656
|
+
text-decoration: underline;
|
|
657
|
+
text-decoration-style: wavy;
|
|
658
|
+
text-decoration-color: var(--error, firebrick);
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
/* #s - strikethroughs */
|
|
662
|
+
/* #strike - the strikethrough element; use <del> or <s> instead (deprecated) */
|
|
663
|
+
s, strike {
|
|
664
|
+
color: var(--error-low, firebrick);
|
|
665
|
+
text-decoration: line-through;
|
|
666
|
+
text-decoration-color: var(--error, firebrick);
|
|
667
|
+
}
|
|
668
|
+
|
|
669
|
+
/* #del - text deletions */
|
|
670
|
+
del {
|
|
671
|
+
color: var(--error-low, firebrick);
|
|
672
|
+
background-color: var(--bg-error, mistyrose);
|
|
673
|
+
text-decoration: line-through;
|
|
674
|
+
text-decoration-color: var(--error, red);
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
/* #ins - text insertions */
|
|
678
|
+
ins {
|
|
679
|
+
color: var(--success-low, green);
|
|
680
|
+
background-color: var(--bg-success, honeydew);
|
|
681
|
+
text-decoration: underline;
|
|
682
|
+
text-decoration-color: var(--success, forestgreen);
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
/* #mark - for marking relevant or interesting text, but not for importance,
|
|
686
|
+
usually having inverted foreground & background colors. System Colors
|
|
687
|
+
Mark & MarkedText are currently unsupported */
|
|
688
|
+
mark {
|
|
689
|
+
color: var(--mark);
|
|
690
|
+
background-color: var(--bg-mark);
|
|
691
|
+
border-left: var(--fat) var(--marked); /* provdes some padding */
|
|
692
|
+
border-right: var(--fat) var(--marked); /* provdes some padding */
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
/* #small - the side comment/small print element */
|
|
696
|
+
small { font-size: 0.75em; } /* em-based, to fit context */
|
|
697
|
+
|
|
698
|
+
/* #sub & #sup - subscripts and superscripts */
|
|
699
|
+
sub, sup {
|
|
700
|
+
font-size: 0.75em; /* em-based, to fit context like headings */
|
|
701
|
+
line-height: 0; /* normalize.css */
|
|
702
|
+
position: relative; /* normalize.css */
|
|
703
|
+
}
|
|
704
|
+
sup { top: -0.5em; } /* normalize.css */
|
|
705
|
+
sub { bottom: -0.25em; } /* normalize.css */
|
|
706
|
+
|
|
707
|
+
|
|
708
|
+
/* #span - a non-semantic, inline container, generally used for styling only */
|
|
709
|
+
span { }
|
|
710
|
+
|
|
711
|
+
/* #abbr #acronym - abbreviations with titles (acronym is deprecated, but widely
|
|
712
|
+
supported) - [0011] specificity is the least possible here*/
|
|
713
|
+
abbr[title], acronym[title] {
|
|
714
|
+
cursor: help;
|
|
715
|
+
border-bottom: none; /* normalize.css */
|
|
716
|
+
text-decoration: underline; /* normalize.css */
|
|
717
|
+
text-decoration: underline dotted; /* normalize.css */
|
|
718
|
+
text-decoration-style: dashed;
|
|
719
|
+
text-decoration-color: var(--info, dodgerblue);
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
/* #q - inline quotations */
|
|
723
|
+
q { font-style: italic; }
|
|
724
|
+
|
|
725
|
+
/* #cite - citations */
|
|
726
|
+
cite {
|
|
727
|
+
font-style: italic;
|
|
728
|
+
font-weight: var(--light);
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
/* #dfn - the <dfn> definition element */
|
|
732
|
+
dfn {
|
|
733
|
+
font-style: italic;
|
|
734
|
+
font-weight: var(--bolder);
|
|
735
|
+
}
|
|
736
|
+
|
|
737
|
+
/* #code #kbd #samp #var - normalize first */
|
|
738
|
+
code, kbd, samp, var {
|
|
739
|
+
white-space: pre-wrap; /* fixes code blocks breaking layout */
|
|
740
|
+
font-family: monospace, monospace; /* normalize.css */
|
|
741
|
+
font-size: 1em; /* em-based, normalize.css */
|
|
742
|
+
}
|
|
743
|
+
|
|
744
|
+
/* #code - inline code listings */
|
|
745
|
+
/* #var - a mathematical or programming variable name */
|
|
746
|
+
code, var {
|
|
747
|
+
color: var(--distinct);
|
|
748
|
+
background-color: var(--bg-distinct);
|
|
749
|
+
/*font-weight: var(--bold);*/
|
|
750
|
+
}
|
|
751
|
+
var { font-style: normal; }
|
|
752
|
+
|
|
753
|
+
code, var, ins, del, mark {
|
|
754
|
+
border-radius: var(--radius);
|
|
755
|
+
padding: 0 var(--xxs);
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
|
|
759
|
+
/* #kbd - the keyboard input element; provide backups for secondary colors */
|
|
760
|
+
kbd {
|
|
761
|
+
background-color: var(--secondary-100, mistyrose);
|
|
762
|
+
border: var(--solid) var(--distinguished);
|
|
763
|
+
border-radius: var(--radius);
|
|
764
|
+
color: var(--secondary-700, palevioletred);
|
|
765
|
+
font-size: 0.9em; /* em-based, to fit context */
|
|
766
|
+
padding: var(--xxs) var(--xs);
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
/* #samp - sample output from computing devices */
|
|
770
|
+
samp { font-weight: var(--bolder); }
|
|
771
|
+
|
|
772
|
+
/* #data #time - data and (date)time values for machine-readability */
|
|
773
|
+
data, time { }
|
|
774
|
+
|
|
775
|
+
/* #selection - pseudo-element for text selected via dragging with the cursor */
|
|
776
|
+
/*::selection { }*/
|
|
777
|
+
|
|
778
|
+
/* #grammar-error - text marked as having a grammatical error (experimental) */
|
|
779
|
+
/*::grammar-error { }*/
|
|
780
|
+
/* #spelling-error - text marked as having a spelling error (experimental) */
|
|
781
|
+
/*::spelling-error { }*/
|
|
782
|
+
/* #target-text - text fragment that's been scrolled to (experimental) */
|
|
783
|
+
/*::target-text { }*/
|
|
784
|
+
|
|
785
|
+
|
|
786
|
+
/* -----------------------------------------------------------------------------
|
|
787
|
+
// #media / #embedded - elements that add multimedia to a page
|
|
788
|
+
// -------------------------------------------------------------------------- */
|
|
789
|
+
|
|
790
|
+
/* #img - images */
|
|
791
|
+
/* #picture #svg #math #figure #canvas #embed #iframe #portal #audio #video */
|
|
792
|
+
img { object-fit: cover; }
|
|
793
|
+
/* be as wide as the normal line length, but not wider than the container */
|
|
794
|
+
img, picture, svg, math, figure, canvas, embed, iframe, portal, audio, video {
|
|
795
|
+
max-width: clamp(0%, var(--line-length), 100%);
|
|
796
|
+
}
|
|
797
|
+
|
|
798
|
+
/* #picture - <picture> contains an <img> and its alternatives as <source>'s */
|
|
799
|
+
/* #source - alternative options for a given <img> in a <picture> element */
|
|
800
|
+
picture { }
|
|
801
|
+
source { }
|
|
802
|
+
|
|
803
|
+
/* #figure - for graphs, charts, images, quotes & other info-oriented set-offs*/
|
|
804
|
+
figure {
|
|
805
|
+
background-color: var(--background);
|
|
806
|
+
border: var(--solid) var(--border);
|
|
807
|
+
border-radius: var(--radius);
|
|
808
|
+
display: block;
|
|
809
|
+
width: clamp(0%, fit-content, 100%); /* resist max-width */
|
|
810
|
+
margin: var(--m) 0;
|
|
811
|
+
padding: var(--m);
|
|
812
|
+
text-align: center;
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
/* #figcaption - the caption of a figure */
|
|
816
|
+
figcaption { font-style: italic; }
|
|
817
|
+
|
|
818
|
+
/* #svg - scalable vector graphics */
|
|
819
|
+
svg { }
|
|
820
|
+
|
|
821
|
+
/* #math - root element for MathML */
|
|
822
|
+
math { }
|
|
823
|
+
|
|
824
|
+
/* #canvas - for drawing embedded programmatic graphics */
|
|
825
|
+
canvas {
|
|
826
|
+
display: inline-block;
|
|
827
|
+
border-radius: var(--radius);
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
/* #embed - the embed external content element */
|
|
831
|
+
/* #iframe - inline frames for embedded content / other documents */
|
|
832
|
+
/* #portal - previews another document like an iframe but only as a preview */
|
|
833
|
+
embed { }
|
|
834
|
+
iframe { }
|
|
835
|
+
portal { }
|
|
836
|
+
|
|
837
|
+
/* #object #param - the external object element and its params */
|
|
838
|
+
object { }
|
|
839
|
+
param { }
|
|
840
|
+
|
|
841
|
+
/* #audio - <audio> provides sound and sound controls */
|
|
842
|
+
/* #video - the embedded video element */
|
|
843
|
+
audio, video { display: inline-block; }
|
|
844
|
+
|
|
845
|
+
/* #track - embeds text tracks for <audio> and <video> */
|
|
846
|
+
track { }
|
|
847
|
+
|
|
848
|
+
/* #cue #cue-region - pseudo-elements for WebVTT video text tracks */
|
|
849
|
+
/*::cue { }*/
|
|
850
|
+
/*::cue-region { }*/ /* experimental */
|
|
851
|
+
|
|
852
|
+
|
|
853
|
+
/* -----------------------------------------------------------------------------
|
|
854
|
+
// #interactive - built-in interactive components
|
|
855
|
+
// -------------------------------------------------------------------------- */
|
|
856
|
+
|
|
857
|
+
/* #dialog - built-in modal overlay - comes with 'Esc' support with no js! */
|
|
858
|
+
dialog {
|
|
859
|
+
margin: auto; /* overrides margin: 0 on * */
|
|
860
|
+
border: var(--solid) var(--border);
|
|
861
|
+
border-radius: var(--radius);
|
|
862
|
+
max-width: 80vw; /* should use 80 dvi eventually */
|
|
863
|
+
min-width: 20vw; /* should use 20 dvi eventually */
|
|
864
|
+
max-height: 80vh; /* should use 80 dvb eventually */
|
|
865
|
+
padding: var(--m);
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
/* #details - an accordion-like widget for question & answer style layouts */
|
|
869
|
+
details {
|
|
870
|
+
border: var(--solid) var(--border);
|
|
871
|
+
padding: 0 var(--m);
|
|
872
|
+
max-width: min(var(--line-length), 100%);
|
|
873
|
+
}
|
|
874
|
+
/* #summary - the 'question' sub-element of details */
|
|
875
|
+
summary {
|
|
876
|
+
margin: 0 calc(-1 * var(--m)); /* negatives need calc() */
|
|
877
|
+
padding: var(--m);
|
|
878
|
+
}
|
|
879
|
+
|
|
880
|
+
/* #template - content templates allow reuse of html structures using js */
|
|
881
|
+
template { display: none; }
|
|
882
|
+
|
|
883
|
+
/* #slot - the web component <slot> element for inserting markup into the DOM */
|
|
884
|
+
slot { }
|
|
885
|
+
/*::slotted(*) { }*/
|
|
886
|
+
|
|
887
|
+
|
|
888
|
+
/* -----------------------------------------------------------------------------
|
|
889
|
+
// #breaks - spacing elements
|
|
890
|
+
// -------------------------------------------------------------------------- */
|
|
891
|
+
|
|
892
|
+
/* #br - the line break */
|
|
893
|
+
/* #wbr - the line break opportunity indicator */
|
|
894
|
+
br, wbr { }
|
|
895
|
+
|
|
896
|
+
/* #hr - the horizontal rule - [0001] / [0011] specificity */
|
|
897
|
+
hr, hr:hover {
|
|
898
|
+
box-sizing: content-box; /* normalize.css */
|
|
899
|
+
height: 0; /* normalize.css */
|
|
900
|
+
border-top: var(--fat) var(--distinguished);
|
|
901
|
+
margin: var(--l) auto;
|
|
902
|
+
max-width: var(--width);
|
|
903
|
+
width: 50%;
|
|
904
|
+
grid-column: 1 / -1; /* span full width of a enclosing grid */
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
/* #disabled - needs to be last to "beat" the other [0010] specificity rules
|
|
908
|
+
here, like buttons & inputs; though this is a 'state' rule, it's here in case
|
|
909
|
+
only base.css is imported, so disabled elements will still look disabled. */
|
|
910
|
+
[disabled], :disabled { /* [0010] specificity */
|
|
911
|
+
color: var(--inactive);
|
|
912
|
+
background-color: var(--bg-inactive);
|
|
913
|
+
border: var(--solid) var(--border);
|
|
914
|
+
cursor: not-allowed;
|
|
915
|
+
}
|
|
916
|
+
|
|
917
|
+
|
|
918
|
+
/* -----------------------------------------------------------------------------
|
|
919
|
+
// #deprecated #obsolete - elements that may break, and that will likely break
|
|
920
|
+
// -------------------------------------------------------------------------- */
|
|
921
|
+
|
|
922
|
+
/* #basefont - sets the default fontface (deprecated) */
|
|
923
|
+
/* #big - the bigger text element (deprecated) */
|
|
924
|
+
/* #center - the centered text element (deprecated) */
|
|
925
|
+
/* #content - the shadow DOM content placeholder element (deprecated) */
|
|
926
|
+
/* #shadow - the shadow root, a DOM insertion point indicator (deprecated) */
|
|
927
|
+
/* #keygen - cryptographic key generation element (deprecated) */
|
|
928
|
+
/* #marquee - the marquee element (deprecated) */
|
|
929
|
+
/* #menuitem - popup commands (deprecated) */
|
|
930
|
+
/* #multicol - multiple column element (deprecated) */
|
|
931
|
+
/* #nobr - the non-breaking text element (deprecated) */
|
|
932
|
+
/* #noembed - alt content for <embed>; use <object> content (deprecated) */
|
|
933
|
+
/* #rtc #rb - ruby text container and base elements (deprecated) */
|
|
934
|
+
/* #spacer - provides spacing into the document (deprecated) */
|
|
935
|
+
/* #tt - inline teletype element for monospaced text (deprecated) */
|
|
936
|
+
|
|
937
|
+
/* #applet - embedded java applets (obsolete) */
|
|
938
|
+
/* #bgsound - the background sound element (obsolete) */
|
|
939
|
+
/* #blink - the blinking text element (obsolete) */
|
|
940
|
+
/* #c - span tag before the span tag (never implemented) */
|
|
941
|
+
/* #comment - for inserting comments into html (obsolete) */
|
|
942
|
+
/* #dir - the directory element (obsolete) */
|
|
943
|
+
/* #font - the font styling tag (obsolete) */
|
|
944
|
+
/* #frame - the embedded frame element (obsolete) */
|
|
945
|
+
/* #frameset - a set of <frame>'s (obsolete) */
|
|
946
|
+
/* #image - precursor image element to the <img> tag (obsolete) */
|
|
947
|
+
/* #isindex - used for querying a document through a text field (obsolete) */
|
|
948
|
+
/* #listing - a listing of code; use <pre> or <code> instead (obsolete) */
|
|
949
|
+
/* #nextid - for generating unique names for <a> during authoring (obsolete) */
|
|
950
|
+
/* #noframes - the frame fallback element (obsolete) */
|
|
951
|
+
/* #plaintext - render plain text, ignoring html tags (obsolete) */
|