mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1/**
2 * IMPORTANT
3 *
4 * Some of these styles are duplicated in the `web/index.html` and
5 * `bskyweb/templates/base.html` files. Depending on what you're updating, you
6 * may need to touch all three. Ask Eric if you aren't sure.
7 */
8
9@font-face {
10 font-family: 'InterVariable';
11 src: url(/assets/fonts/inter/InterVariable.ttf) format('truetype');
12 font-weight: 300 1000;
13 font-style: normal;
14 font-display: swap;
15}
16@font-face {
17 font-family: 'InterVariableItalic';
18 src: url(/assets/fonts/inter/InterVariable-Italic.ttf) format('truetype');
19 font-weight: 300 1000;
20 font-style: italic;
21 font-display: swap;
22}
23
24/**
25 * BEGIN STYLES
26 *
27 * HTML & BODY STYLES IN `web/index.html` and `bskyweb/templates/base.html`
28 */
29:root {
30 --text: black;
31 --background: white;
32 --backgroundLight: hsl(211, 20%, 95%);
33}
34@media (prefers-color-scheme: dark) {
35 :root {
36 color-scheme: dark;
37 --text: white;
38 --background: black;
39 --backgroundLight: hsl(211, 20%, 20%);
40 }
41}
42
43html.theme--light {
44 --text: black;
45 --background: white;
46 --backgroundLight: hsl(211, 20%, 95%);
47 background-color: white;
48}
49html.theme--dark {
50 color-scheme: dark;
51 background-color: black;
52 --text: white;
53 --background: black;
54 --backgroundLight: hsl(211, 20%, 20%);
55}
56html.theme--dim {
57 color-scheme: dark;
58 background-color: hsl(211, 28%, 12%);
59 --text: white;
60 --background: hsl(211, 20%, 4%);
61 --backgroundLight: hsl(211, 20%, 10%);
62}
63
64/* Buttons and inputs have a font set by UA, so we'll have to reset that */
65button,
66input,
67textarea {
68 font: inherit;
69 line-height: inherit;
70}
71
72/* Remove autofill styles on Webkit */
73input:autofill,
74input:-webkit-autofill,
75input:-webkit-autofill:hover,
76input:-webkit-autofill:focus,
77input:-webkit-autofill:active {
78 -webkit-background-clip: text;
79 -webkit-text-fill-color: var(--text);
80 transition: background-color 5000s ease-in-out 0s;
81 box-shadow: inset 0 0 20px 20px var(--background);
82 background: var(--background);
83 color: var(--text);
84}
85/* Force left-align date/time inputs on iOS mobile */
86input::-webkit-date-and-time-value {
87 text-align: left;
88}
89
90/* Remove default link styling */
91a {
92 color: inherit;
93}
94a[role='link']:hover {
95 text-decoration: underline;
96}
97a[role='link'][data-no-underline='1']:hover {
98 text-decoration: none;
99}
100
101/* Styling hacks */
102*[data-word-wrap] {
103 word-break: break-word;
104}
105*[data-stable-gutters] {
106 scrollbar-gutter: stable both-edges;
107}
108
109/* ProseMirror */
110.ProseMirror {
111 font: 18px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
112 'Liberation Sans', Helvetica, Arial, sans-serif;
113 min-height: 140px;
114}
115.ProseMirror-dark {
116 color: white;
117}
118.ProseMirror p {
119 margin: 0;
120}
121.ProseMirror p.is-editor-empty:first-child::before {
122 color: #8d8e96;
123 content: attr(data-placeholder);
124 float: left;
125 height: 0;
126 pointer-events: none;
127}
128.ProseMirror .mention {
129 color: #0085ff;
130}
131.ProseMirror a,
132.ProseMirror .autolink {
133 color: #0085ff;
134}
135/* OLLIE: TODO -- this is not accessible */
136/* Remove focus state on inputs */
137.ProseMirror-focused {
138 outline: 0;
139}
140textarea:focus,
141input:focus {
142 outline: 0;
143}
144.tippy-content .items {
145 width: fit-content;
146}
147
148/* Tooltips */
149[data-tooltip] {
150 position: relative;
151 z-index: 10;
152}
153[data-tooltip]::after {
154 content: attr(data-tooltip);
155 display: none;
156 position: absolute;
157 bottom: 0;
158 left: 50%;
159 transform: translateY(100%) translateY(8px) translateX(-50%);
160 padding: 4px 10px;
161 border-radius: 10px;
162 background: var(--backgroundLight);
163 color: var(--text);
164 text-align: center;
165 white-space: nowrap;
166 font-size: 12px;
167 z-index: 10;
168}
169[data-tooltip]::before {
170 content: '';
171 display: none;
172 position: absolute;
173 border-bottom: 6px solid var(--backgroundLight);
174 border-left: 6px solid transparent;
175 border-right: 6px solid transparent;
176 bottom: 0;
177 left: 50%;
178 transform: translateY(100%) translateY(2px) translateX(-50%);
179 z-index: 10;
180}
181[data-tooltip]:hover::after,
182[data-tooltip]:hover::before {
183 display: block;
184}
185
186/* NativeDropdown component */
187.radix-dropdown-item:focus,
188.nativeDropdown-item:focus {
189 outline: none;
190}
191
192/* Spinner component */
193@keyframes rotate {
194 0% {
195 transform: rotate(0deg);
196 }
197 100% {
198 transform: rotate(360deg);
199 }
200}
201.rotate-500ms {
202 position: absolute;
203 inset: 0;
204 animation: rotate 500ms linear infinite;
205}
206
207@keyframes avatarHoverFadeIn {
208 from {
209 opacity: 0;
210 }
211 to {
212 opacity: 1;
213 }
214}
215
216@keyframes avatarHoverFadeOut {
217 from {
218 opacity: 1;
219 }
220 to {
221 opacity: 0;
222 }
223}
224
225.force-no-clicks > *,
226.force-no-clicks * {
227 pointer-events: none !important;
228}
229
230input[type='range'][orient='vertical'] {
231 writing-mode: vertical-lr;
232 direction: rtl;
233 appearance: slider-vertical;
234 width: 16px;
235 vertical-align: bottom;
236 -webkit-appearance: none;
237 appearance: none;
238 background: transparent;
239 cursor: pointer;
240}
241
242input[type='range'][orient='vertical']::-webkit-slider-runnable-track {
243 background: white;
244 height: 100%;
245 width: 4px;
246 border-radius: 4px;
247}
248
249input[type='range'][orient='vertical']::-moz-range-track {
250 background: white;
251 height: 100%;
252 width: 4px;
253 border-radius: 4px;
254}
255
256input[type='range']::-webkit-slider-thumb {
257 -webkit-appearance: none;
258 appearance: none;
259 border-radius: 50%;
260 background-color: white;
261 height: 16px;
262 width: 16px;
263 margin-left: -6px;
264}
265
266input[type='range'][orient='vertical']::-moz-range-thumb {
267 border: none;
268 border-radius: 50%;
269 background-color: white;
270 height: 16px;
271 width: 16px;
272 margin-left: -6px;
273}