-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathraw.css
121 lines (118 loc) · 16 KB
/
raw.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
.row, .column { display: flex;flex-wrap: wrap; }
.column { flex-direction: column; }
.row.center, .column.center { place-content: center;place-items: center; }
.row.around, .column.around { place-content: space-around; }
.row.between, .column.between { place-content: space-between; }
.row.evenly, .column.evenly { place-content: space-evenly; }
.row.top, .column.left { align-items: flex-start; }
.row.bottom, .column.right { align-items: flex-end; }
.row.right, .column.bottom { justify-content: flex-end; }
.row.left, .column.top { justify-content: flex-start; }
.row .center, .column .center { align-self: center; }
.row .top, .column .left { align-self: flex-start; }
.row .bottom, .column .right { align-self: flex-end; }
.row.reverse { flex-direction: row-reverse; }
.column.reverse { flex-direction: column-reverse; }
.space, .space > * { margin: 8px; }
.space .space { margin: 0; }
.stretch > * { flex: 1; }
.thick { flex: 1; }
.thin { flex: 0; }
.inline { display: inline-flex; }
.nowrap { flex-wrap: nowrap; }
.noshrink { flex-shrink: 0; }
::selection { color: var(--background);background: var(--primary); }
:root, .dark .dark { --background: white;--gray02: rgb(250, 251, 252);--gray05: rgb(242, 243, 244);--gray1: rgb(230, 231, 232);--gray2: rgb(204, 205, 206);--gray3: rgb(179, 180, 181);--primary: #06e;--text: rgb(40, 44, 52); }
.dark { --background: rgb(40, 44, 52);--gray02: rgb(46, 50, 58);--gray05: rgb(56, 60, 67);--gray1: rgb(72, 76, 82);--gray2: rgb(105, 107, 113);--gray3: rgb(137, 139, 143);--primary: #5cf;--text: white;color: var(--text);background: var(--background); }
* { margin: 0;padding: 0;color: unset;border: 0;outline: none;font: inherit;-webkit-appearance: none;-webkit-tap-highlight-color: transparent;box-sizing: border-box;caret-color: var(--primary);overscroll-behavior: none; }
html { min-height: 100vh;color: var(--text);background: var(--background);font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%; }
pre, code, kbd, samp { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif; }
b, strong { font-weight: bold; }
i, em { font-style: italic; }
small { font-size: 80%; }
sub, sup { position: relative;vertical-align: baseline;font-size: 75%;line-height: 0; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
mark, del, ins { padding: 2px 4px;color: #222;border-radius: 2px;text-decoration: none; }
del { background: #fbc; }
ins { background: #aeb; }
hr { margin: 24px 0;border-top: 1px solid var(--gray2); }
h1, h2, h3, h4, h5, h6 { font-weight: 800; }
h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.25em; }
img, video, iframe { max-width: 100%;height: auto; }
iframe { width: 100%;height: 60vh; }
a { cursor: pointer;color: var(--primary);font-weight: bold;text-decoration: none; }
a:hover, a:focus { color: var(--text);text-decoration: underline; }
a[external][href*="//"]::after { display: inline-block;width: 0.8em;height: 0.8em;margin-left: 2px;line-height: 0;content: var(--external-link); }
a[id][href^="#"]::before { display: none;width: 0.8em;height: 0.8em;margin-left: -1.2em;padding: 0.2em;line-height: 0;content: var(--link);place-self: center; }
a[id][href^="#"]:hover::before { display: inline-block; }
blockquote { padding: 8px;border-left: 4px solid var(--primary); }
kbd { position: relative;top: -2px;margin: 0 4px;padding: 4px 8px;border: 0;box-shadow: 0 1px 2px 1px var(--gray2);font-size: 12px;font-weight: 800;text-transform: uppercase; }
pre { overflow: auto;padding: 12px;background: var(--gray05); }
:not(pre) > code { padding: 4px 6px;background: var(--gray05);font-size: 85%; }
ol, ul { padding-left: 24px; }
table { width: 100%;border-collapse: collapse;box-shadow: 0 0 0 1px var(--gray2); }
th, tr, td { padding: 12px;box-shadow: inset 0 -1px 0 var(--gray2);text-align: left; }
th { font-size: 80%;font-weight: bold; }
th:empty { padding: 0; }
tbody tr:nth-child(odd) { background: var(--gray02); }
[title] { position: relative;overflow: visible; }
[title]:hover::after { z-index: 1;position: absolute;top: 0;left: 50%;pointer-events: none;overflow: hidden;display: -webkit-box;max-width: max-content;width: 384px;padding: 4px 8px;color: var(--background);background: var(--text);border-radius: 3px;font-size: 80%;font-weight: bold;-webkit-box-orient: vertical;-webkit-line-clamp: 3;content: attr(title);transform: translate(-50%, calc(-100% - 8px)); }
details > summary { cursor: pointer;display: flex;align-items: center;height: 40px; }
details:not(.popup) > summary { font-weight: bold; }
details:not(.popup) > summary::before { width: 1em;height: 1em;margin-right: 10px;transition: transform 0.2s ease;content: var(--chevron-down);transform: rotate(-90deg); }
details:not(.popup) > div { margin: 8px;padding-left: 24px;border-left: 1px solid var(--gray1); }
details[open]:not(.popup) > summary::before { transform: rotate(0); }
:not(details).popup[open], details.popup[open] > summary::before { z-index: 10;position: fixed;top: 0;right: 0;bottom: 0;left: 0;cursor: default;display: block;background: rgba(12, 12, 13, 0.6);content: " "; }
.popup > div { z-index: 11;position: fixed;top: 0;left: 50%;display: flex;flex-direction: column;min-height: 25vh;min-width: 50vw;max-height: 80vh;max-width: 90vw;margin: 10vh auto;padding: 20px;background: var(--background);animation: 300ms fade-in ease-in-out;transform: translateX(-50%); }
:root, .dark .dark { --calendar: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23222" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/></svg>');--chevron-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23222" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><path d="M6 9l6 6 6-6"/></svg>');--external-link: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%2305f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><path d="M15 3h6v6"/><path d="M10 14L21 3"/></svg>');--link: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23222" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>');--lock: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23222" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>');--mail: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23222" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg>');--phone: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23222" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>');--search: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23222" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><path d="M11 17.25a6.25 6.25 0 110-12.5 6.25 6.25 0 010 12.5z"/><path d="M16 16l4.5 4.5"/></svg>'); }
.dark { --calendar: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/></svg>');--chevron-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><path d="M6 9l6 6 6-6"/></svg>');--external-link: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%235cf" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><path d="M15 3h6v6"/><path d="M10 14L21 3"/></svg>');--link: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>');--lock: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>');--mail: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg>');--phone: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>');--search: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><path d="M11 17.25a6.25 6.25 0 110-12.5 6.25 6.25 0 010 12.5z"/><path d="M16 16l4.5 4.5"/></svg>'); }
input.noicon { padding: 0 16px;background: var(--input); }
pre, code, table, button, .button, input, select, textarea { border-radius: 4px; }
button, .button { --active: var(--gray3);--hover: var(--gray2);--input: var(--gray1);cursor: pointer;height: 40px;padding: 0 16px;background: var(--input);box-shadow: var(--shadow);transition: 200ms;user-select: none; }
label { max-width: 400px;width: 100%; }
label > span { font-size: 80%;font-weight: bold; }
label:focus-within > span { color: var(--primary); }
input, select, textarea { --active: var(--gray1);--hover: var(--gray1);--input: var(--gray05);max-width: 400px;width: 100%;height: 40px;padding: 0 16px;background: var(--input);box-shadow: var(--shadow);transition: 200ms; }
select:not([multiple]) { padding-right: 32px;background: var(--input) no-repeat right 8px center / 20px var(--chevron-down); }
textarea { min-height: 80px;padding: 8px;resize: vertical; }
* { --active: var(--gray2);--hover: var(--gray1);--input: var(--gray05);--shadow: none; }
.ghost { --active: var(--gray2);--hover: var(--gray1);--input: transparent; }
.primary { --active: #027;--hover: #03a;--input: #06e;color: white; }
:hover, [hover] { --input: var(--hover)!important;--shadow: 0 1px 2px rgba(0, 0, 0, 0.24); }
:focus, [focus] { --input: var(--hover)!important;--shadow: 0 1px 2px rgba(0, 0, 0, 0.24); }
:active, [active] { --input: var(--active)!important; }
:invalid { --shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 1px #f44 inset; }
[disabled] { pointer-events: none;opacity: 0.4; }
[type="checkbox"], [type="radio"] { cursor: pointer;width: 40px;height: 40px;padding: 0;background: unset;box-shadow: unset; }
[type="checkbox"]:active, [type="radio"]:active { opacity: 0.9; }
[type="checkbox"] { background: no-repeat center / 16px url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="rgb(230, 231, 232)"/></svg>'); }
[type="checkbox"]:indeterminate { background: no-repeat center / 16px url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="%2306e"/><path d="M6 12h12" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
[type="checkbox"]:checked { background: no-repeat center / 16px url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="%2306e"/><path d="M18 6L10 17l-4-4" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>'); }
[type="radio"] { background: no-repeat center / 16px url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="rgb(230, 231, 232)"/></svg>'); }
[type="radio"]:checked { background: no-repeat center / 16px url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="%2306e"/><circle cx="12" cy="12" r="4" fill="white"/></svg>'); }
[type="color"] { display: inline-flex;vertical-align: middle;width: 40px;padding: 5px 7px; }
[type="date"], [type="time"], [type="month"], [type="week"], [type="datetime-local"] { position: relative;padding: 0 16px 0 40px;background: var(--input) no-repeat left 10px center / 20px var(--calendar); }
[type="email"] { padding: 0 16px 0 40px;background: var(--input) no-repeat left 10px center / 20px var(--mail); }
[type="password"] { padding: 0 16px 0 40px;background: var(--input) no-repeat left 10px center / 20px var(--lock); }
[type="search"] { padding: 0 16px 0 40px;background: var(--input) no-repeat left 10px center / 20px var(--search); }
[type="tel"] { padding: 0 16px 0 40px;background: var(--input) no-repeat left 10px center / 20px var(--phone); }
[type="url"] { padding: 0 16px 0 40px;background: var(--input) no-repeat left 10px center / 20px var(--link); }
[type="range"] { cursor: pointer;padding: 0 1px; }
[type="range"]::-webkit-slider-thumb { width: 20px;height: 40px;background: var(--gray3);border-radius: 2px;-webkit-appearance: none; }
[type="range"]::-moz-range-thumb { width: 20px;height: 40px;background: var(--gray3);border: none;border-radius: 2px; }
[type="range"]::-moz-focus-outer { border: 0; }
::-webkit-details-marker { display: none; }
::-webkit-inner-spin-button, ::-webkit-clear-button { z-index: 2; }
::-webkit-calendar-picker-indicator { z-index: 1;position: absolute;top: 0;right: 0;bottom: 0;left: 0;opacity: 0;width: auto;height: auto; }
::-webkit-file-upload-button { cursor: pointer;display: inline-flex;align-items: center;justify-content: center;height: 40px;margin: 0 16px 0 -16px;padding: 0 16px;color: var(--text);background: var(--gray1);border: 0;transition: background 150ms;user-select: none; }
::-webkit-file-upload-button:hover { background: var(--gray2); }
::-webkit-file-upload-button:active { background: var(--gray3); }
/* Firefox */
@-moz-document url-prefix() {
[type="color"] { padding: 9px; }
[type="file"] { padding: 8px; }
}