src/App.css at main · desertthunder.dev/lazurite-desktop

desertthunder.dev / lazurite-desktop
fork atom
BlueSky & more on desktop lazurite.stormlightlabs.org/
tauri rust typescript bluesky appview atproto solid
fork atom
lazurite-desktop / src / App.css
at main 231 lines 6.7 kB view raw
wrap content
desertthunder.dev refactor: proper light theme support 3hrs ago
5f623fe8
  1/* NOTE: This prevents vite from processing src-tauri */
  2@import "tailwindcss" source(none);
  3@source "./";
  4@plugin "@egoist/tailwindcss-icons";
  5@plugin "@tailwindcss/forms";
  6
  7@theme inline {
  8  --font-sans: var(--font-stack);
  9  --color-surface-container-lowest: var(--surface-container-lowest);
 10  --color-surface: var(--surface);
 11  --color-surface-container: var(--surface-container);
 12  --color-surface-container-high: var(--surface-container-high);
 13  --color-surface-container-highest: var(--surface-container-highest);
 14  --color-surface-bright: var(--surface-bright);
 15  --color-primary: var(--primary);
 16  --color-on-primary-fixed: var(--on-primary-fixed);
 17  --color-on-surface: var(--on-surface);
 18  --color-on-surface-variant: var(--on-surface-variant);
 19  --color-on-secondary-container: var(--on-secondary-container);
 20  --color-error: var(--error);
 21  --color-error-surface: var(--error-surface);
 22}
 23
 24[data-theme="dark"] {
 25  color-scheme: dark;
 26  --surface-container-lowest: #000000;
 27  --surface: #0e0e0e;
 28  --surface-container: #191919;
 29  --surface-container-high: #1f1f1f;
 30  --surface-container-highest: rgb(36 36 36 / 96%);
 31  --surface-bright: rgba(255, 255, 255, 0.05);
 32  --primary: #7dafff;
 33  --primary-dim: #0073de;
 34  --on-primary-fixed: #05080f;
 35  --on-surface: #f4f6fb;
 36  --on-surface-variant: #ababab;
 37  --on-secondary-container: #c9d1dd;
 38  --error: #ff8080;
 39  --error-surface: rgba(138, 31, 31, 0.72);
 40  --outline-subtle: rgba(255, 255, 255, 0.1);
 41  --outline-strong: rgba(255, 255, 255, 0.2);
 42  --control-bg: rgba(255, 255, 255, 0.04);
 43  --control-bg-hover: rgba(255, 255, 255, 0.08);
 44  --panel-muted: rgba(255, 255, 255, 0.03);
 45  --panel-muted-hover: rgba(255, 255, 255, 0.05);
 46  --input-bg: rgba(0, 0, 0, 0.4);
 47  --input-bg-strong: rgba(0, 0, 0, 0.5);
 48  --inset-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
 49  --overlay-shadow: 0 24px 40px rgba(0, 0, 0, 0.28);
 50  --overlay-scrim: rgba(4, 7, 12, 0.62);
 51  --focus-ring: rgba(125, 175, 255, 0.45);
 52  --font-stack: "Google Sans Variable", "Segoe UI", "Avenir Next", sans-serif;
 53}
 54
 55[data-theme="light"] {
 56  color-scheme: light;
 57  --surface-container-lowest: #eef1f5;
 58  --surface: #ffffff;
 59  --surface-container: #f4f6f9;
 60  --surface-container-high: #eceff4;
 61  --surface-container-highest: rgb(246 248 252 / 96%);
 62  --surface-bright: rgba(17, 24, 39, 0.06);
 63  --primary: #0b63d1;
 64  --primary-dim: #0953af;
 65  --on-primary-fixed: #ffffff;
 66  --on-surface: #101418;
 67  --on-surface-variant: #45505e;
 68  --on-secondary-container: #263140;
 69  --error: #b42318;
 70  --error-surface: rgba(254, 226, 226, 0.95);
 71  --outline-subtle: rgba(17, 24, 39, 0.14);
 72  --outline-strong: rgba(17, 24, 39, 0.24);
 73  --control-bg: rgba(17, 24, 39, 0.06);
 74  --control-bg-hover: rgba(17, 24, 39, 0.11);
 75  --panel-muted: rgba(17, 24, 39, 0.04);
 76  --panel-muted-hover: rgba(17, 24, 39, 0.07);
 77  --input-bg: rgba(255, 255, 255, 0.95);
 78  --input-bg-strong: rgba(244, 246, 250, 0.96);
 79  --inset-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.1);
 80  --overlay-shadow: 0 24px 40px rgba(15, 23, 42, 0.18);
 81  --overlay-scrim: rgba(9, 16, 28, 0.34);
 82  --focus-ring: rgba(11, 99, 209, 0.45);
 83}
 84
 85:root {
 86  color-scheme: dark;
 87}
 88
 89html:not([data-theme]) {
 90  color-scheme: dark;
 91  --surface-container-lowest: #000000;
 92  --surface: #0e0e0e;
 93  --surface-container: #191919;
 94  --surface-container-high: #1f1f1f;
 95  --surface-container-highest: rgb(36 36 36 / 96%);
 96  --surface-bright: rgba(255, 255, 255, 0.05);
 97  --primary: #7dafff;
 98  --primary-dim: #0073de;
 99  --on-primary-fixed: #05080f;
100  --on-surface: #f4f6fb;
101  --on-surface-variant: #ababab;
102  --on-secondary-container: #c9d1dd;
103  --error: #ff8080;
104  --error-surface: rgba(138, 31, 31, 0.72);
105  --outline-subtle: rgba(255, 255, 255, 0.1);
106  --outline-strong: rgba(255, 255, 255, 0.2);
107  --control-bg: rgba(255, 255, 255, 0.04);
108  --control-bg-hover: rgba(255, 255, 255, 0.08);
109  --panel-muted: rgba(255, 255, 255, 0.03);
110  --panel-muted-hover: rgba(255, 255, 255, 0.05);
111  --input-bg: rgba(0, 0, 0, 0.4);
112  --input-bg-strong: rgba(0, 0, 0, 0.5);
113  --inset-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
114  --overlay-shadow: 0 24px 40px rgba(0, 0, 0, 0.28);
115  --overlay-scrim: rgba(4, 7, 12, 0.62);
116  --focus-ring: rgba(125, 175, 255, 0.45);
117  --font-stack: "Google Sans Variable", "Segoe UI", "Avenir Next", sans-serif;
118}
119
120* {
121  @apply box-border;
122}
123
124body {
125  @apply m-0 min-h-screen font-sans text-on-surface;
126  background: var(--surface-container-lowest);
127}
128
129#root {
130  @apply min-h-screen;
131}
132
133@utility overline-copy {
134  @apply m-0 uppercase tracking-[0.12em];
135}
136
137@utility panel-surface {
138  @apply rounded-2xl bg-surface-container;
139  box-shadow: var(--inset-shadow);
140}
141
142@utility pill-action {
143  @apply inline-flex min-h-12 items-center justify-center gap-2 rounded-full px-4 transition-transform duration-150 ease-out hover:-translate-y-px disabled:translate-y-0 disabled:cursor-wait disabled:opacity-70;
144}
145
146@utility tone-muted {
147  background: var(--panel-muted);
148}
149
150@utility tone-muted-hover {
151  background: var(--panel-muted-hover);
152}
153
154@utility ui-control {
155  @apply border-0 text-on-surface-variant transition duration-150 ease-out;
156  background: var(--control-bg);
157  box-shadow: var(--inset-shadow);
158}
159
160@utility ui-control-hoverable {
161  @apply hover:-translate-y-px hover:text-on-surface;
162}
163
164.ui-control-hoverable:hover {
165  background: var(--control-bg-hover);
166}
167
168@utility ui-outline-subtle {
169  border-color: var(--outline-subtle);
170}
171
172@utility ui-outline-strong {
173  border-color: var(--outline-strong);
174}
175
176@utility ui-input {
177  @apply rounded-lg border px-3 py-2 text-sm text-on-surface outline-none transition;
178  background: var(--input-bg);
179  border-color: var(--outline-subtle);
180}
181
182.ui-input:focus {
183  border-color: var(--focus-ring);
184}
185
186@utility ui-input-strong {
187  background: var(--input-bg-strong);
188}
189
190@utility ui-button-secondary {
191  @apply rounded-lg border px-4 py-2 text-sm font-medium text-on-surface transition;
192  border-color: var(--outline-strong);
193}
194
195.ui-button-secondary:hover {
196  background: var(--control-bg-hover);
197}
198
199@utility ui-overlay-card {
200  background: var(--surface-container-highest);
201  box-shadow: var(--overlay-shadow);
202}
203
204@utility ui-scrim {
205  background: var(--overlay-scrim);
206}
207
208.skeleton-block {
209  position: relative;
210  overflow: hidden;
211  background: var(--surface-bright);
212}
213
214.skeleton-block::after {
215  content: "";
216  position: absolute;
217  inset: 0;
218  transform: translateX(-100%);
219  background: linear-gradient(90deg, transparent, var(--control-bg-hover), transparent);
220  animation: shimmer 1.5s linear infinite;
221}
222
223@keyframes shimmer {
224  to {
225    transform: translateX(100%);
226  }
227}
228
229button {
230  @apply cursor-pointer disabled:cursor-auto;
231}