|
53 | 53 | .thumbnail-section { |
54 | 54 | border-radius: 12px; |
55 | 55 | overflow: hidden; |
| 56 | + } |
56 | 57 |
|
57 | | - a.tag-card-header { |
58 | | - img { |
59 | | - border-radius: 12px; |
60 | | - overflow: hidden; |
61 | | - width: unset; |
62 | | - } |
| 58 | + a.tag-card-header { |
| 59 | + img { |
| 60 | + border-radius: 12px; |
| 61 | + overflow: hidden; |
| 62 | + width: unset; |
63 | 63 | } |
| 64 | + } |
64 | 65 |
|
65 | | - .scene-card-preview { |
66 | | - margin-bottom: 0; |
67 | | - } |
| 66 | + .scene-card-preview { |
| 67 | + margin-bottom: 0; |
| 68 | + } |
68 | 69 |
|
69 | | - .studio-overlay, |
70 | | - .rating-banner, |
71 | | - .overlay-resolution, |
72 | | - .overlay-duration { |
73 | | - height: auto; |
| 70 | + .studio-overlay, |
| 71 | + .rating-banner, |
| 72 | + .overlay-resolution, |
| 73 | + .overlay-duration { |
| 74 | + height: auto; |
| 75 | + |
| 76 | + background-color: var(--black-a7); |
| 77 | + backdrop-filter: blur(10px); |
| 78 | + color: var(--primary-12); |
| 79 | + opacity: unset; |
| 80 | + |
| 81 | + border-radius: 8px; |
| 82 | + margin: 6px; |
| 83 | + padding: 6px 8px; |
| 84 | + |
| 85 | + line-height: 1; |
| 86 | + font-size: var(--text-2xs); |
| 87 | + font-weight: normal; |
| 88 | + letter-spacing: 0.05ch; |
| 89 | + } |
74 | 90 |
|
75 | | - background-color: var(--black-a7); |
76 | | - backdrop-filter: blur(10px); |
77 | | - color: var(--primary-12); |
78 | | - opacity: unset; |
| 91 | + .studio-overlay { |
| 92 | + --image-size: 4rem; |
| 93 | + right: 0; |
| 94 | + top: 0; |
79 | 95 |
|
80 | | - border-radius: 8px; |
81 | | - margin: 6px; |
82 | | - padding: 6px 8px; |
| 96 | + height: unset; |
| 97 | + transition: opacity 0.5s; |
83 | 98 |
|
84 | | - line-height: 1; |
85 | | - font-size: var(--text-2xs); |
86 | | - font-weight: normal; |
87 | | - letter-spacing: 0.05ch; |
88 | | - } |
| 99 | + a { |
| 100 | + display: block; |
| 101 | + text-transform: uppercase; |
| 102 | + color: inherit; |
| 103 | + text-shadow: none; |
| 104 | + text-decoration: none; |
| 105 | + letter-spacing: inherit; |
89 | 106 |
|
90 | | - .studio-overlay { |
91 | | - --image-size: 4rem; |
92 | | - right: 0; |
93 | | - top: 0; |
| 107 | + white-space: nowrap; |
| 108 | + text-overflow: ellipsis; |
| 109 | + width: 100%; |
| 110 | + overflow: hidden; |
| 111 | + } |
94 | 112 |
|
95 | | - height: unset; |
96 | | - transition: opacity 0.5s; |
| 113 | + a:has(> img) { |
| 114 | + display: block; |
| 115 | + line-height: 0; |
| 116 | + padding: 0; |
97 | 117 |
|
98 | | - a { |
99 | | - display: block; |
100 | | - text-transform: uppercase; |
101 | | - color: inherit; |
102 | | - text-shadow: none; |
103 | | - text-decoration: none; |
104 | | - letter-spacing: inherit; |
| 118 | + img { |
| 119 | + margin: 0.1rem; |
| 120 | + height: auto; |
| 121 | + max-height: var(--image-size); |
| 122 | + min-height: unset; |
105 | 123 |
|
106 | | - white-space: nowrap; |
107 | | - text-overflow: ellipsis; |
108 | 124 | width: 100%; |
109 | | - overflow: hidden; |
110 | | - } |
| 125 | + max-width: var(--image-size); |
| 126 | + min-width: unset; |
111 | 127 |
|
112 | | - a:has(> img) { |
113 | | - display: block; |
114 | | - line-height: 0; |
115 | | - padding: 0; |
116 | | - |
117 | | - img { |
118 | | - margin: 0.1rem; |
119 | | - height: auto; |
120 | | - max-height: var(--image-size); |
121 | | - min-height: unset; |
122 | | - |
123 | | - width: 100%; |
124 | | - max-width: var(--image-size); |
125 | | - min-width: unset; |
126 | | - |
127 | | - object-fit: contain; |
128 | | - object-position: center; |
129 | | - } |
| 128 | + object-fit: contain; |
| 129 | + object-position: center; |
130 | 130 | } |
131 | 131 | } |
| 132 | + } |
132 | 133 |
|
133 | | - .rating-banner { |
134 | | - transform: none; |
135 | | - left: 0; |
136 | | - top: 0; |
137 | | - border-style: solid; |
138 | | - border-width: 0.5px; |
139 | | - background-color: unset; |
140 | | - |
141 | | - &.rating-5 { |
142 | | - background-color: transparent; |
143 | | - background-image: linear-gradient( |
144 | | - to right, |
145 | | - var(--rating-5-background), |
146 | | - rgba(102, 136, 70, 0.75) |
147 | | - ); |
148 | | - border-color: rgba(153, 204, 105, 0.25); |
149 | | - } |
| 134 | + .rating-banner { |
| 135 | + transform: none; |
| 136 | + left: 0; |
| 137 | + top: 0; |
| 138 | + border-style: solid; |
| 139 | + border-width: 0.5px; |
| 140 | + background-color: unset; |
| 141 | + |
| 142 | + &.rating-5 { |
| 143 | + background-color: transparent; |
| 144 | + background-image: linear-gradient( |
| 145 | + to right, |
| 146 | + var(--rating-5-background), |
| 147 | + rgba(102, 136, 70, 0.75) |
| 148 | + ); |
| 149 | + border-color: rgba(153, 204, 105, 0.25); |
| 150 | + } |
150 | 151 |
|
151 | | - &.rating-4 { |
152 | | - background-color: transparent; |
153 | | - background-image: linear-gradient( |
154 | | - to right, |
155 | | - var(--rating-4-background), |
156 | | - rgba(134, 106, 0, 0.75) |
157 | | - ); |
158 | | - border-color: rgba(201, 159, 0, 0.25); |
159 | | - } |
| 152 | + &.rating-4 { |
| 153 | + background-color: transparent; |
| 154 | + background-image: linear-gradient( |
| 155 | + to right, |
| 156 | + var(--rating-4-background), |
| 157 | + rgba(134, 106, 0, 0.75) |
| 158 | + ); |
| 159 | + border-color: rgba(201, 159, 0, 0.25); |
| 160 | + } |
160 | 161 |
|
161 | | - &.rating-3 { |
162 | | - background-color: transparent; |
163 | | - background-image: linear-gradient( |
164 | | - to right, |
165 | | - var(--rating-3-background), |
166 | | - rgba(154, 96, 0, 0.75) |
167 | | - ); |
168 | | - border-color: rgba(231, 144, 0, 0.25); |
169 | | - } |
| 162 | + &.rating-3 { |
| 163 | + background-color: transparent; |
| 164 | + background-image: linear-gradient( |
| 165 | + to right, |
| 166 | + var(--rating-3-background), |
| 167 | + rgba(154, 96, 0, 0.75) |
| 168 | + ); |
| 169 | + border-color: rgba(231, 144, 0, 0.25); |
| 170 | + } |
170 | 171 |
|
171 | | - &.rating-2 { |
172 | | - background-color: transparent; |
173 | | - background-image: linear-gradient( |
174 | | - to right, |
175 | | - var(--rating-2-background), |
176 | | - rgba(172, 80, 0, 0.75) |
177 | | - ); |
178 | | - border-color: rgba(255, 120, 0, 0.25); |
179 | | - } |
| 172 | + &.rating-2 { |
| 173 | + background-color: transparent; |
| 174 | + background-image: linear-gradient( |
| 175 | + to right, |
| 176 | + var(--rating-2-background), |
| 177 | + rgba(172, 80, 0, 0.75) |
| 178 | + ); |
| 179 | + border-color: rgba(255, 120, 0, 0.25); |
| 180 | + } |
180 | 181 |
|
181 | | - &.rating-1 { |
182 | | - background-color: transparent; |
183 | | - background-image: linear-gradient( |
184 | | - to right, |
185 | | - var(--rating-1-background), |
186 | | - rgba(188, 56, 44, 0.75) |
187 | | - ); |
188 | | - border-color: rgba(255, 84, 66, 0.25); |
189 | | - } |
| 182 | + &.rating-1 { |
| 183 | + background-color: transparent; |
| 184 | + background-image: linear-gradient( |
| 185 | + to right, |
| 186 | + var(--rating-1-background), |
| 187 | + rgba(188, 56, 44, 0.75) |
| 188 | + ); |
| 189 | + border-color: rgba(255, 84, 66, 0.25); |
190 | 190 | } |
| 191 | + } |
191 | 192 |
|
192 | | - .scene-specs-overlay { |
193 | | - left: 0; |
194 | | - right: 0; |
195 | | - bottom: 0; |
| 193 | + .scene-specs-overlay { |
| 194 | + left: 0; |
| 195 | + right: 0; |
| 196 | + bottom: 0; |
196 | 197 |
|
197 | | - display: flex !important; |
198 | | - justify-content: space-between; |
199 | | - align-items: center; |
200 | | - } |
| 198 | + display: flex !important; |
| 199 | + justify-content: space-between; |
| 200 | + align-items: center; |
| 201 | + } |
201 | 202 |
|
202 | | - .preview-scrubber { |
203 | | - .hover-scrubber { |
204 | | - .hover-scrubber-indicator { |
205 | | - background-color: unset; |
206 | | - .hover-scrubber-indicator-marker { |
207 | | - background-color: var(--primary-a10); |
208 | | - } |
| 203 | + .preview-scrubber { |
| 204 | + .hover-scrubber { |
| 205 | + .hover-scrubber-indicator { |
| 206 | + background-color: unset; |
| 207 | + .hover-scrubber-indicator-marker { |
| 208 | + background-color: var(--primary-a10); |
209 | 209 | } |
210 | 210 | } |
211 | 211 | } |
| 212 | + } |
212 | 213 |
|
213 | | - .progress-bar { |
214 | | - bottom: 0; |
215 | | - height: 4px; |
216 | | - width: 100%; |
217 | | - background-color: unset; |
| 214 | + .progress-bar { |
| 215 | + bottom: 0; |
| 216 | + height: 4px; |
| 217 | + width: 100%; |
| 218 | + background-color: unset; |
218 | 219 |
|
219 | | - .progress-indicator { |
220 | | - height: 100%; |
221 | | - background-color: var(--primary-a10); |
222 | | - backdrop-filter: blur(10px); |
223 | | - border-radius: 0 4px 0 0; |
224 | | - } |
| 220 | + .progress-indicator { |
| 221 | + height: 100%; |
| 222 | + background-color: var(--primary-a10); |
| 223 | + backdrop-filter: blur(10px); |
| 224 | + border-radius: 0 4px 0 0; |
225 | 225 | } |
226 | 226 | } |
227 | 227 |
|
|
0 commit comments