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