|
194 | 194 | margin-left: 0.4rem; |
195 | 195 | } |
196 | 196 |
|
197 | | -/* Theme Toggle Button - Single toggle icon that switches between dark/light */ |
198 | | -/* Material creates one button that changes icon based on current theme */ |
199 | | -.md-header__button[for="__palette"], |
200 | | -.md-header__button[for="__palette_1"], |
201 | | -.md-header__button[for="__palette_2"] { |
| 197 | +/* Theme Toggle Button - Visible and styled */ |
| 198 | +.md-header__button[for^="__palette"] { |
202 | 199 | display: flex !important; |
203 | 200 | align-items: center !important; |
204 | 201 | justify-content: center !important; |
|
208 | 205 | margin: 0 0.2rem !important; |
209 | 206 | border-radius: 0.25rem !important; |
210 | 207 | transition: all 0.2s ease !important; |
| 208 | + visibility: visible !important; |
| 209 | + opacity: 1 !important; |
211 | 210 | } |
212 | 211 |
|
213 | | -/* Hide ALL duplicate theme toggle buttons - only show the FIRST one */ |
214 | | -.md-header__button[for="__palette"]:not(:first-of-type), |
215 | | -.md-header__button[for="__palette_1"]:not(:first-of-type), |
216 | | -.md-header__button[for="__palette_2"], |
217 | | -.md-header__inner > .md-header__button[for="__palette"]:not(:first-of-type), |
218 | | -.md-header__inner > .md-header__button[for="__palette_1"]:not(:first-of-type), |
219 | | -.md-header__button[for="__palette"] ~ .md-header__button[for="__palette"], |
220 | | -.md-header__button[for="__palette"] ~ .md-header__button[for="__palette_1"], |
221 | | -.md-header__button[for="__palette"] ~ .md-header__button[for="__palette_2"] { |
222 | | - display: none !important; |
223 | | - visibility: hidden !important; |
224 | | - opacity: 0 !important; |
225 | | - width: 0 !important; |
226 | | - height: 0 !important; |
227 | | - padding: 0 !important; |
228 | | - margin: 0 !important; |
229 | | -} |
230 | | - |
231 | | -/* Ensure only ONE theme toggle is visible in the header */ |
232 | | -.md-header__inner .md-header__button[for^="__palette"]:nth-of-type(n+2) { |
233 | | - display: none !important; |
| 212 | +/* Show ONLY the first theme toggle button - hide all others */ |
| 213 | +.md-header__button[for^="__palette"] { |
| 214 | + display: flex !important; |
| 215 | + visibility: visible !important; |
| 216 | + opacity: 1 !important; |
234 | 217 | } |
235 | 218 |
|
236 | | -/* Count all palette buttons and hide all but first */ |
237 | | -.md-header__inner .md-header__button[for^="__palette"]:nth-child(n+2) { |
| 219 | +/* Hide the second palette toggle (Material creates one per palette) */ |
| 220 | +.md-header__button[for="__palette_1"] { |
238 | 221 | display: none !important; |
239 | 222 | } |
240 | 223 |
|
241 | | -/* Hide theme toggle in any other location (drawer, sidebar, etc.) */ |
| 224 | +/* Hide theme toggle in drawer/sidebar only (not in header) */ |
242 | 225 | .md-drawer .md-header__button[for^="__palette"], |
243 | 226 | .md-sidebar .md-header__button[for^="__palette"], |
244 | 227 | .md-nav .md-header__button[for^="__palette"] { |
|
0 commit comments