new-connect/src/index.css at 1d21e7b6cfc9db5bdf4a53f8f2a6e40b46a125fa · commaai/new-connect · GitHub

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
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* https://m3.material.io/styles/color/roles */
  :root {
    --color-primary: rgb(83 90 146);
    --color-surface-tint: rgb(83 90 146);
    --color-on-primary: rgb(255 255 255);
    --color-primary-container: rgb(223 224 255);
    --color-on-primary-container: rgb(13 21 75);
    --color-secondary: rgb(91 93 114);
    --color-on-secondary: rgb(255 255 255);
    --color-secondary-container: rgb(224 225 249);
    --color-on-secondary-container: rgb(24 26 44);
    --color-tertiary: rgb(66 104 51);
    --color-on-tertiary: rgb(255 255 255);
    --color-tertiary-container: rgb(195 239 173);
    --color-on-tertiary-container: rgb(4 33 0);
    --color-error: rgb(186 26 26);
    --color-on-error: rgb(255 255 255);
    --color-error-container: rgb(255 218 214);
    --color-on-error-container: rgb(65 0 2);
    --color-background: rgb(251 248 255);
    --color-on-background: rgb(27 27 33);
    --color-surface: rgb(251 248 255);
    --color-on-surface: rgb(27 27 33);
    --color-surface-variant: rgb(227 225 236);
    --color-on-surface-variant: rgb(70 70 79);
    --color-outline: rgb(119 118 128);
    --color-outline-variant: rgb(199 197 208);
    --color-shadow: rgb(0 0 0);
    --color-scrim: rgb(0 0 0);
    --color-inverse-surface: rgb(48 48 54);
    --color-inverse-on-surface: rgb(242 239 247);
    --color-inverse-primary: rgb(188 195 255);
    --color-primary-fixed: rgb(223 224 255);
    --color-on-primary-fixed: rgb(13 21 75);
    --color-primary-fixed-dim: rgb(188 195 255);
    --color-on-primary-fixed-variant: rgb(59 66 121);
    --color-secondary-fixed: rgb(224 225 249);
    --color-on-secondary-fixed: rgb(24 26 44);
    --color-secondary-fixed-dim: rgb(196 197 221);
    --color-on-secondary-fixed-variant: rgb(67 69 89);
    --color-tertiary-fixed: rgb(195 239 173);
    --color-on-tertiary-fixed: rgb(4 33 0);
    --color-tertiary-fixed-dim: rgb(168 210 147);
    --color-on-tertiary-fixed-variant: rgb(43 79 30);
    --color-surface-dim: rgb(219 217 224);
    --color-surface-bright: rgb(251 248 255);
    --color-surface-container-lowest: rgb(255 255 255);
    --color-surface-container-low: rgb(245 242 250);
    --color-surface-container: rgb(239 237 244);
    --color-surface-container-high: rgb(233 231 239);
    --color-surface-container-highest: rgb(228 225 233);
  }

  .dark,
  [data-theme="dark"] {
    --color-primary: rgb(188 195 255);
    --color-surface-tint: rgb(188 195 255);
    --color-on-primary: rgb(36 43 97);
    --color-primary-container: rgb(59 66 121);
    --color-on-primary-container: rgb(223 224 255);
    --color-secondary: rgb(196 197 221);
    --color-on-secondary: rgb(45 47 66);
    --color-secondary-container: rgb(67 69 89);
    --color-on-secondary-container: rgb(224 225 249);
    --color-tertiary: rgb(168 210 147);
    --color-on-tertiary: rgb(21 56 9);
    --color-tertiary-container: rgb(43 79 30);
    --color-on-tertiary-container: rgb(195 239 173);
    --color-error: rgb(255 180 171);
    --color-on-error: rgb(105 0 5);
    --color-error-container: rgb(147 0 10);
    --color-on-error-container: rgb(255 218 214);
    --color-background: rgb(19 19 24);
    --color-on-background: rgb(228 225 233);
    --color-surface: rgb(19 19 24);
    --color-on-surface: rgb(228 225 233);
    --color-surface-variant: rgb(70 70 79);
    --color-on-surface-variant: rgb(199 197 208);
    --color-outline: rgb(144 144 154);
    --color-outline-variant: rgb(70 70 79);
    --color-shadow: rgb(0 0 0);
    --color-scrim: rgb(0 0 0);
    --color-inverse-surface: rgb(228 225 233);
    --color-inverse-on-surface: rgb(48 48 54);
    --color-inverse-primary: rgb(83 90 146);
    --color-primary-fixed: rgb(223 224 255);
    --color-on-primary-fixed: rgb(13 21 75);
    --color-primary-fixed-dim: rgb(188 195 255);
    --color-on-primary-fixed-variant: rgb(59 66 121);
    --color-secondary-fixed: rgb(224 225 249);
    --color-on-secondary-fixed: rgb(24 26 44);
    --color-secondary-fixed-dim: rgb(196 197 221);
    --color-on-secondary-fixed-variant: rgb(67 69 89);
    --color-tertiary-fixed: rgb(195 239 173);
    --color-on-tertiary-fixed: rgb(4 33 0);
    --color-tertiary-fixed-dim: rgb(168 210 147);
    --color-on-tertiary-fixed-variant: rgb(43 79 30);
    --color-surface-dim: rgb(19 19 24);
    --color-surface-bright: rgb(57 57 63);
    --color-surface-container-lowest: rgb(13 14 19);
    --color-surface-container-low: rgb(27 27 33);
    --color-surface-container: rgb(33 33 39);
    --color-surface-container-high: rgb(41 41 47);
    --color-surface-container-highest: rgb(52 52 58);
  }

  html {
    /* prevent selecting text, transparent highlight */
    @apply select-none selection:bg-transparent;
  }

  html,
  body {
    /*
     * fill visible viewport
     * https://developers.google.com/web/updates/2016/12/url-bar-resizing
     */
    @apply h-full;

    /* prevent horizontal scrolling, e.g. when drawer is open */
    @apply overflow-x-hidden;
  }

  ::-webkit-scrollbar {
    width: 6px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklab, var(--color-surface), var(--color-surface-tint) 40%);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in oklab, var(--color-surface), var(--color-surface-tint) 60%);
  }

  button {
    /* revert user-agent style */
    text-align: unset;
  }
}

@layer components {
  .state-layer {
    @apply relative before:absolute before:inset-0 before:transition before:opacity-0 before:overflow-hidden sm:before:hover:opacity-[.08] sm:before:focus:opacity-[.12] before:active:opacity-[.12] disabled:before:opacity-0 disabled:before:hover:opacity-0;
  }

  .skeleton-loader {
    @apply relative isolate overflow-hidden;

    &::after {
      @apply absolute inset-0 bg-gradient-to-r from-transparent via-rose-100/10 to-transparent -translate-x-full animate-[shimmer_2s_infinite];
      content: "";
    }
  }

  .elevation-0 {
    box-shadow: none;
  }

  .elevation-1 {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  }

  .elevation-2 {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  }

  .elevation-3 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  }

  .elevation-4 {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
  }

  .elevation-5 {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
  }

  .material-symbols-outlined {
    transition: font-variation-settings 0.2s;
    font-variation-settings: "FILL" var(--font-filled, 0), "OPSZ" var(--font-opsz, 24);
    font-size: calc(var(--font-opsz, 24) * 1px);
    max-width: calc(var(--font-opsz, 24) * 1px);

    &.size-20 {
      --font-opsz: 20;
    }

    &.size-24 {
      --font-opsz: 24;
    }

    &.size-40 {
      --font-opsz: 40;
    }

    &.size-48 {
      --font-opsz: 48;
    }

    &.icon-outline {
      --font-filled: 0;
    }

    &.icon-filled {
      --font-filled: 1;
    }
  }
}

@layer utilities {
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .hide-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */

    &::-webkit-scrollbar {
      display: none; /* Safari and Chrome */
    }
  }
}