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-dark {
96 color: white;
97}
98.ProseMirror p {
99 margin: 0;
100}
101.ProseMirror p.is-editor-empty:first-child::before {
102 color: #8d8e96;
103 content: attr(data-placeholder);
104 float: left;
105 height: 0;
106 pointer-events: none;
107}
108.ProseMirror .mention {
109 color: #0085ff;
110}
111.ProseMirror a,
112.ProseMirror .autolink {
113 color: #0085ff;
114}
115/* OLLIE: TODO -- this is not accessible */
116/* Remove focus state on inputs */
117.ProseMirror-focused {
118 outline: 0;
119}
120textarea:focus,
121input:focus {
122 outline: 0;
123}
124.tippy-content .items {
125 width: fit-content;
126}
127
128/* Tooltips */
129[data-tooltip] {
130 position: relative;
131 z-index: 10;
132}
133[data-tooltip]::after {
134 content: attr(data-tooltip);
135 display: none;
136 position: absolute;
137 bottom: 0;
138 left: 50%;
139 transform: translateY(100%) translateY(8px) translateX(-50%);
140 padding: 4px 10px;
141 border-radius: 10px;
142 background: var(--backgroundLight);
143 color: var(--text);
144 text-align: center;
145 white-space: nowrap;
146 font-size: 12px;
147 z-index: 10;
148}
149[data-tooltip]::before {
150 content: '';
151 display: none;
152 position: absolute;
153 border-bottom: 6px solid var(--backgroundLight);
154 border-left: 6px solid transparent;
155 border-right: 6px solid transparent;
156 bottom: 0;
157 left: 50%;
158 transform: translateY(100%) translateY(2px) translateX(-50%);
159 z-index: 10;
160}
161[data-tooltip]:hover::after,
162[data-tooltip]:hover::before {
163 display: block;
164}
165
166/* NativeDropdown component */
167.radix-dropdown-item:focus,
168.nativeDropdown-item:focus {
169 outline: none;
170}
171
172/* Spinner component */
173@keyframes rotate {
174 0% {
175 transform: rotate(0deg);
176 }
177 100% {
178 transform: rotate(360deg);
179 }
180}
181.rotate-500ms {
182 position: absolute;
183 inset: 0;
184 animation: rotate 500ms linear infinite;
185}
186
187@keyframes fadeIn {
188 from {
189 opacity: 0;
190 }
191 to {
192 opacity: 1;
193 }
194}
195
196@keyframes fadeOut {
197 from {
198 opacity: 1;
199 }
200 to {
201 opacity: 0;
202 }
203}
204
205.force-no-clicks > *,
206.force-no-clicks * {
207 pointer-events: none !important;
208}
209
210input[type='range'][orient='vertical'] {
211 writing-mode: vertical-lr;
212 direction: rtl;
213 appearance: slider-vertical;
214 width: 16px;
215 vertical-align: bottom;
216 -webkit-appearance: none;
217 appearance: none;
218 background: transparent;
219 cursor: pointer;
220}
221
222input[type='range'][orient='vertical']::-webkit-slider-runnable-track {
223 background: white;
224 height: 100%;
225 width: 4px;
226 border-radius: 4px;
227}
228
229input[type='range'][orient='vertical']::-moz-range-track {
230 background: white;
231 height: 100%;
232 width: 4px;
233 border-radius: 4px;
234}
235
236input[type='range']::-webkit-slider-thumb {
237 -webkit-appearance: none;
238 appearance: none;
239 border-radius: 50%;
240 background-color: white;
241 height: 16px;
242 width: 16px;
243 margin-left: -6px;
244}
245
246input[type='range'][orient='vertical']::-moz-range-thumb {
247 border: none;
248 border-radius: 50%;
249 background-color: white;
250 height: 16px;
251 width: 16px;
252 margin-left: -6px;
253}