~cytrogen/masto-fe

ref: dc35e2d7569a293bbda92ee3ecba8d2d4e6a7b64 masto-fe/app/javascript/styles/mastodon-light/variables.css -rw-r--r-- 12.3 KiB
dc35e2d7 — Cytrogen Rename .scss → .css and remove sass dependency (Phase 9-10) 13 days ago 
                                                                                
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248

:root {
  --black: #000000;
  --white: #ffffff;
  --red-600: #b7253d;
  --red-500: #df405a;
  --blurple-600: #563acc;
  --blurple-500: #6364ff;
  --blurple-400: #7477fd;
  --blurple-300: #858afa;
  --grey-600: #4e4c5a;
  --grey-100: #dadaf3;
  --success-green: #4a905f;
  --error-red: #df405a;
  --warning-red: #ff5050;
  --gold-star: #ca8f04;
  --red-bookmark: #ff5050;
  --classic-base-color: #282c37;
  --classic-primary-color: #9baec8;
  --classic-secondary-color: #d9e1e8;
  --classic-highlight-color: #6364ff;
  --base-shadow-color: #000000;
  --base-overlay-background: #ffffff;
  --base-border-color: #ffffff;
  --simple-background-color: #ffffff;
  --valid-value-color: #4a905f;
  --error-value-color: #df405a;
  --ui-base-color: #d9e1e8;
  --ui-base-lighter-color: #b0c0cf;
  --ui-primary-color: #9bcbed;
  --ui-secondary-color: #282c37;
  --ui-highlight-color: #858afa;
  --ui-button-color: #ffffff;
  --ui-button-background-color: #6364ff;
  --ui-button-focus-background-color: #563acc;
  --ui-button-focus-outline-color: #7477fd;
  --ui-button-secondary-color: #4e4c5a;
  --ui-button-secondary-border-color: #4e4c5a;
  --ui-button-secondary-focus-background-color: #4e4c5a;
  --ui-button-secondary-focus-color: #ffffff;
  --ui-button-tertiary-color: #6364ff;
  --ui-button-tertiary-border-color: #6364ff;
  --ui-button-tertiary-focus-background-color: #563acc;
  --ui-button-tertiary-focus-color: #ffffff;
  --ui-button-destructive-background-color: #df405a;
  --ui-button-destructive-focus-background-color: #b7253d;
  --primary-text-color: #000000;
  --darker-text-color: #282c37;
  --dark-text-color: #444b5d;
  --secondary-text-color: #282c37;
  --highlight-text-color: #5e64f8;
  --action-button-color: #606984;
  --action-button-focus-color: hsl(209.0322580645, 24.4094488189%, 71.0980392157%);
  --passive-text-color: #ca8f04;
  --active-passive-text-color: #4a905f;
  --inverted-text-color: #000000;
  --lighter-text-color: #282c37;
  --light-text-color: #444b5d;
  --action-button-color-lighten-7: hsl(225, 15.7894736842%, 37.7058823529%);
  --action-button-color-lighten-13: hsl(225, 15.7894736842%, 31.7058823529%);
  --darker-text-color-lighten-4: hsl(224, 15.7894736842%, 14.6274509804%);
  --darker-text-color-lighten-7: hsl(224, 15.7894736842%, 11.6274509804%);
  --darker-text-color-lighten-8: hsl(224, 15.7894736842%, 10.6274509804%);
  --darker-text-color-lighten-10: hsl(224, 15.7894736842%, 8.6274509804%);
  --dark-text-color-lighten-4: hsl(223.2, 15.5279503106%, 27.568627451%);
  --dark-text-color-lighten-7: hsl(223.2, 15.5279503106%, 24.568627451%);
  --error-red-lighten-4: hsl(350.1886792453, 71.3004484305%, 52.2745098039%);
  --error-red-lighten-12: hsl(350.1886792453, 71.3004484305%, 44.2745098039%);
  --error-value-color-lighten-12: hsl(350.1886792453, 71.3004484305%, 44.2745098039%);
  --gold-star-lighten-6: hsl(42.1212121212, 96.1165048544%, 34.3921568627%);
  --gold-star-lighten-16: hsl(42.1212121212, 96.1165048544%, 24.3921568627%);
  --highlight-text-color-lighten-4: hsl(237.4358974359, 92.125984252%, 63.0980392157%);
  --highlight-text-color-lighten-6: hsl(237.4358974359, 92.125984252%, 61.0980392157%);
  --highlight-text-color-lighten-8: hsl(237.4358974359, 92.125984252%, 59.0980392157%);
  --highlight-text-color-lighten-13: hsl(237.4358974359, 92.125984252%, 54.0980392157%);
  --inverted-text-color-lighten-4: hsl(0, 0%, -4%);
  --inverted-text-color-lighten-10: hsl(0, 0%, -10%);
  --inverted-text-color-lighten-15: hsl(0, 0%, -15%);
  --inverted-text-color-lighten-16: hsl(0, 0%, -16%);
  --lighter-text-color-lighten-7: hsl(224, 15.7894736842%, 11.6274509804%);
  --lighter-text-color-lighten-20: hsl(224, 15.7894736842%, -1.3725490196%);
  --secondary-text-color-lighten-4: hsl(224, 15.7894736842%, 14.6274509804%);
  --secondary-text-color-lighten-7: hsl(224, 15.7894736842%, 11.6274509804%);
  --secondary-text-color-lighten-8: hsl(224, 15.7894736842%, 10.6274509804%);
  --ui-base-color-lighten-2: hsl(208, 24.5901639344%, 86.0392156863%);
  --ui-base-color-lighten-3: hsl(208, 24.5901639344%, 85.0392156863%);
  --ui-base-color-lighten-4: hsl(208, 24.5901639344%, 84.0392156863%);
  --ui-base-color-lighten-5: hsl(208, 24.5901639344%, 83.0392156863%);
  --ui-base-color-lighten-6: hsl(208, 24.5901639344%, 82.0392156863%);
  --ui-base-color-lighten-8: hsl(208, 24.5901639344%, 80.0392156863%);
  --ui-base-color-lighten-11: hsl(208, 24.5901639344%, 77.0392156863%);
  --ui-base-color-lighten-12: hsl(208, 24.5901639344%, 76.0392156863%);
  --ui-base-color-lighten-13: hsl(208, 24.5901639344%, 75.0392156863%);
  --ui-base-color-lighten-14: hsl(208, 24.5901639344%, 74.0392156863%);
  --ui-base-color-lighten-16: hsl(208, 24.5901639344%, 72.0392156863%);
  --ui-base-color-lighten-18: hsl(208, 24.5901639344%, 70.0392156863%);
  --ui-base-color-lighten-20: hsl(208, 24.5901639344%, 68.0392156863%);
  --ui-base-color-lighten-26: hsl(208, 24.5901639344%, 62.0392156863%);
  --ui-base-color-lighten-27: hsl(208, 24.5901639344%, 61.0392156863%);
  --ui-base-color-lighten-29: hsl(208, 24.5901639344%, 59.0392156863%);
  --ui-base-color-lighten-30: hsl(208, 24.5901639344%, 58.0392156863%);
  --ui-base-color-lighten-33: hsl(208, 24.5901639344%, 55.0392156863%);
  --ui-base-color-lighten-34: hsl(208, 24.5901639344%, 54.0392156863%);
  --ui-base-color-lighten-50: hsl(208, 24.5901639344%, 38.0392156863%);
  --ui-base-lighter-color-lighten-4: hsl(209.0322580645, 24.4094488189%, 71.0980392157%);
  --ui-base-lighter-color-lighten-7: hsl(209.0322580645, 24.4094488189%, 68.0980392157%);
  --ui-highlight-color-lighten-4: hsl(237.4358974359, 92.125984252%, 71.0980392157%);
  --ui-highlight-color-lighten-8: hsl(237.4358974359, 92.125984252%, 67.0980392157%);
  --ui-highlight-color-lighten-10: hsl(237.4358974359, 92.125984252%, 65.0980392157%);
  --ui-highlight-color-lighten-12: hsl(237.4358974359, 92.125984252%, 63.0980392157%);
  --ui-primary-color-lighten-8: hsl(204.8780487805, 69.4915254237%, 68.862745098%);
  --ui-primary-color-lighten-12: hsl(204.8780487805, 69.4915254237%, 64.862745098%);
  --ui-primary-color-lighten-20: hsl(204.8780487805, 69.4915254237%, 56.862745098%);
  --ui-secondary-color-lighten-6: hsl(224, 15.7894736842%, 12.6274509804%);
  --ui-secondary-color-lighten-8: hsl(224, 15.7894736842%, 10.6274509804%);
  --valid-value-color-lighten-8: hsl(137.8947368421, 32.2033898305%, 34.7058823529%);
  --valid-value-color-lighten-15: hsl(137.8947368421, 32.2033898305%, 27.7058823529%);
  --warning-red-lighten-12: hsl(0, 100%, 53.6862745098%);
  --white-lighten-4: hsl(0, 0%, 96%);
  --white-lighten-7: hsl(0, 0%, 93%);
  --action-button-color-darken-13: hsl(225, 15.7894736842%, 57.7058823529%);
  --darker-text-color-darken-13: hsl(224, 15.7894736842%, 31.6274509804%);
  --highlight-text-color-darken-4: hsl(237.4358974359, 92.125984252%, 71.0980392157%);
  --lighter-text-color-darken-4: hsl(224, 15.7894736842%, 22.6274509804%);
  --lighter-text-color-darken-7: hsl(224, 15.7894736842%, 25.6274509804%);
  --simple-background-color-darken-2: hsl(0, 0%, 102%);
  --simple-background-color-darken-8: hsl(0, 0%, 108%);
  --simple-background-color-darken-14: hsl(0, 0%, 114%);
  --simple-background-color-darken-24: hsl(0, 0%, 124%);
  --ui-base-color-darken-2: hsl(208, 24.5901639344%, 90.0392156863%);
  --ui-base-color-darken-4: hsl(208, 24.5901639344%, 92.0392156863%);
  --ui-base-color-darken-5: hsl(208, 24.5901639344%, 93.0392156863%);
  --ui-base-color-darken-6: hsl(208, 24.5901639344%, 94.0392156863%);
  --ui-base-color-darken-7: hsl(208, 24.5901639344%, 95.0392156863%);
  --ui-base-color-darken-8: hsl(208, 24.5901639344%, 96.0392156863%);
  --ui-base-color-darken-10: hsl(208, 24.5901639344%, 98.0392156863%);
  --ui-base-color-darken-12: hsl(208, 24.5901639344%, 100.0392156863%);
  --ui-base-color-darken-13: hsl(208, 24.5901639344%, 101.0392156863%);
  --ui-base-color-darken-14: hsl(208, 24.5901639344%, 102.0392156863%);
  --ui-base-color-darken-20: hsl(208, 24.5901639344%, 108.0392156863%);
  --ui-highlight-color-darken-2: hsl(237.4358974359, 92.125984252%, 77.0980392157%);
  --ui-highlight-color-darken-3: hsl(237.4358974359, 92.125984252%, 78.0980392157%);
  --ui-highlight-color-darken-5: hsl(237.4358974359, 92.125984252%, 80.0980392157%);
  --ui-highlight-color-darken-8: hsl(237.4358974359, 92.125984252%, 83.0980392157%);
  --ui-primary-color-darken-5: hsl(204.8780487805, 69.4915254237%, 81.862745098%);
  --ui-primary-color-darken-14: hsl(204.8780487805, 69.4915254237%, 90.862745098%);
  --ui-primary-color-darken-40: hsl(204.8780487805, 69.4915254237%, 116.862745098%);
  --ui-secondary-color-darken-8: hsl(224, 15.7894736842%, 26.6274509804%);
  --ui-secondary-color-darken-10: hsl(224, 15.7894736842%, 28.6274509804%);
  --ui-secondary-color-darken-16: hsl(224, 15.7894736842%, 34.6274509804%);
  --ui-secondary-color-darken-18: hsl(224, 15.7894736842%, 36.6274509804%);
  --ui-secondary-color-darken-24: hsl(224, 15.7894736842%, 42.6274509804%);
  --action-button-color-a15: #60698426;
  --action-button-color-a30: #6069844d;
  --base-overlay-background-a0: #ffffff00;
  --base-overlay-background-a10: #ffffff1a;
  --base-overlay-background-a30: #ffffff4d;
  --base-overlay-background-a50: #ffffff80;
  --base-overlay-background-a60: #ffffff99;
  --base-overlay-background-a70: #ffffffb3;
  --base-overlay-background-a80: #ffffffcc;
  --base-overlay-background-a90: #ffffffe6;
  --base-shadow-color-a10: #0000001a;
  --base-shadow-color-a20: #00000033;
  --base-shadow-color-a25: #00000040;
  --base-shadow-color-a30: #0000004d;
  --base-shadow-color-a35: #00000059;
  --base-shadow-color-a40: #00000066;
  --base-shadow-color-a45: #00000073;
  --base-shadow-color-a60: #00000099;
  --base-shadow-color-a65: #000000a6;
  --base-shadow-color-a75: #000000bf;
  --base-shadow-color-a80: #000000cc;
  --base-shadow-color-a85: #000000d9;
  --black-a45: #00000073;
  --black-a65: #000000a6;
  --black-a85: #000000d9;
  --black-a90: #000000e6;
  --darker-text-color-a15: #282c3726;
  --darker-text-color-a30: #282c374d;
  --dark-text-color-a10: #444b5d1a;
  --error-red-a50: #df405a80;
  --error-value-color-a10: #df405a1a;
  --error-value-color-a50: #df405a80;
  --gold-star-a15: #ca8f0426;
  --gold-star-a25: #ca8f0440;
  --gold-star-a30: #ca8f044d;
  --gold-star-a50: #ca8f0480;
  --highlight-text-color-a15: #5e64f826;
  --highlight-text-color-a25: #5e64f840;
  --highlight-text-color-a30: #5e64f84d;
  --highlight-text-color-a40: #5e64f866;
  --lighter-text-color-a15: #282c3726;
  --lighter-text-color-a30: #282c374d;
  --primary-text-color-a70: #000000b3;
  --primary-text-color-a80: #000000cc;
  --success-green-a10: #4a905f1a;
  --success-green-a50: #4a905f80;
  --ui-base-color-a0: #d9e1e800;
  --ui-base-color-a15: #d9e1e826;
  --ui-base-color-a25: #d9e1e840;
  --ui-base-color-a30: #d9e1e84d;
  --ui-base-color-a85: #d9e1e8d9;
  --ui-base-color-a100: #d9e1e8;
  --ui-base-lighter-color-a60: #b0c0cf99;
  --ui-highlight-color-a0: #858afa00;
  --ui-highlight-color-a10: #858afa1a;
  --ui-highlight-color-a15: #858afa26;
  --ui-highlight-color-a23: #858afa3b;
  --ui-highlight-color-a40: #858afa66;
  --ui-highlight-color-a50: #858afa80;
  --ui-secondary-color-a10: #282c371a;
  --ui-secondary-color-a30: #282c374d;
  --ui-secondary-color-a40: #282c3766;
  --ui-secondary-color-a50: #282c3780;
  --ui-secondary-color-a70: #282c37b3;
  --valid-value-color-a25: #4a905f40;
  --valid-value-color-a50: #4a905f80;
  --warning-red-a15: #ff505026;
  --white-a15: #ffffff26;
  --white-a20: #ffffff33;
  --white-a30: #ffffff4d;
  --white-a35: #ffffff59;
  --white-a70: #ffffffb3;
  --white-a75: #ffffffbf;
  --white-a80: #ffffffcc;
  --mix-ui-base-highlight-95: #d5dde9;
  --mix-white-highlight-80: #e7e8fe;
  --mix-ui-base-lighten4-highlight-95: #c9d3e2;
  --mix-ui-base-lighten8-highlight-95: #bdcada;
  --mix-ui-base-lighten12-highlight-80: #aab8d9;
  --ui-button-focus-outline-color: #7477fd;
  --ui-button-focus-outline: solid 2px #7477fd;
  --ui-button-icon-focus-outline: solid 2px #7477fd;
  --ui-button-icon-hover-background-color: #8c8dff66;
  --font-sans-serif: 'mastodon-font-sans-serif';
  --font-display: 'mastodon-font-display';
  --font-monospace: 'mastodon-font-monospace';
  --no-gap-breakpoint: 1175px;
  --media-modal-media-max-width: 100%;
  --media-modal-media-max-height: 80%;
  --ui-avatar-border-size: 4px;
  --dismiss-overlay-width: 4rem;
  --dropdown-border-color: #b3c3d1;
  --dropdown-background-color: #ccd7e0;
  --dropdown-shadow: 0 20px 20px rgba(0, 0, 0, 0.25), 0 8px 4px rgba(0, 0, 0, 0.25);
  --modal-background-color: #e6ebf0;
  --modal-border-color: #ccd7e0;
}