|
1 | 1 | .media-library { |
2 | | - @apply rounded-md; |
3 | | - background-color: white; |
| 2 | + @apply rounded-md bg-white; |
4 | 3 | &:is(.dark *) { |
5 | 4 | background-color: rgba(var(--gray-900),1); |
6 | 5 | } |
7 | 6 | } |
8 | 7 |
|
9 | 8 | .media-library__header, .media-library__footer { |
10 | | - @apply top-16 sticky z-10 h-14 px-4 py-2 backdrop-blur-sm ring-1 ring-slate-900/10; |
| 9 | + @apply h-14 px-4 py-2 backdrop-blur-sm ring-1 ring-slate-900/10; |
11 | 10 | background-color: rgba(var(--gray-50),0.5); |
12 | 11 | &:is(.dark *) { |
13 | 12 | @apply ring-black/10; |
14 | 13 | background-color: rgba(var(--gray-700),0.5); |
15 | 14 | } |
16 | 15 | } |
17 | 16 | .media-library__header { |
18 | | - @apply flex items-center justify-between; |
| 17 | + @apply top-16 sticky z-10 flex items-center justify-between; |
19 | 18 | } |
20 | 19 |
|
21 | 20 | .media-library__content { |
|
90 | 89 | @apply flex-auto p-4; |
91 | 90 | max-width: 400px; |
92 | 91 | border-left: 1px solid rgba(var(--gray-300), 1); |
| 92 | + |
| 93 | + &:is(.dark *) { |
| 94 | + border-color: rgba(var(--gray-700), 1); |
| 95 | + } |
93 | 96 | } |
94 | 97 | } |
95 | 98 |
|
|
115 | 118 | } |
116 | 119 |
|
117 | 120 | .browser-item, .folder-item { |
118 | | - @apply hover:ring-1 hover:ring-gray-300 rounded-lg; |
| 121 | + @apply rounded-lg; |
| 122 | + &:hover { |
| 123 | + @apply ring-1; |
| 124 | + --tw-ring-color: rgb(var(--gray-300)); |
| 125 | + } |
119 | 126 | &:is(.dark *) { |
120 | | - @apply hover:ring-white/50; |
| 127 | + @apply hover:ring-white/20; |
121 | 128 | } |
122 | 129 | } |
123 | 130 | .browser-item .title-ctn, .browser-item img, .folder-item .main, .browser-items-grid-ctn { |
|
154 | 161 | } |
155 | 162 |
|
156 | 163 | input[type=checkbox] { |
157 | | - @apply appearance-none rounded border border-gray-300 bg-white disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto; |
| 164 | + |
| 165 | + @apply appearance-none rounded border-none bg-white shadow-sm ring-1 transition duration-75; |
| 166 | + |
| 167 | + --tw-ring-color: rgb(var(--gray-400)); |
| 168 | + |
158 | 169 | &:checked, &:indeterminate, &:focus-visible { |
159 | 170 | border-color: rgba(var(--primary-600), 1); |
160 | 171 | background-color: rgba(var(--primary-600), 1); |
161 | 172 | } |
| 173 | + |
| 174 | + &:checked, &:indeterminate { |
| 175 | + @apply ring-0; |
| 176 | + } |
162 | 177 | &:focus-visible, &:focus { |
163 | | - @apply outline outline-2 outline-offset-2; |
164 | | - outline-color: rgba(var(--primary-600), 1); |
| 178 | + @apply ring-2 ring-offset-0; |
| 179 | + } |
| 180 | + |
| 181 | + &:disabled { |
| 182 | + |
| 183 | + @apply pointer-events-none; |
| 184 | + |
| 185 | + color: rgb(var(--gray-50)); |
| 186 | + background-color: rgb(var(--gray-50)); |
| 187 | + |
| 188 | + &:checked, &:indeterminate { |
| 189 | + color: rgb(var(--gray-400)); |
| 190 | + background-color: rgb(var(--gray-400)); |
| 191 | + } |
| 192 | + } |
| 193 | + |
| 194 | + &:is(.dark *) { |
| 195 | + @apply bg-white/5; |
| 196 | + |
| 197 | + &:disabled { |
| 198 | + @apply bg-transparent; |
| 199 | + |
| 200 | + &:checked, &:indeterminate { |
| 201 | + background-color: rgb(var(--gray-600)); |
| 202 | + } |
| 203 | + } |
| 204 | + |
165 | 205 | } |
166 | 206 | } |
167 | 207 |
|
|
0 commit comments