Template:BrandEntryStyles.css: Difference between revisions
Brand entry button styles with hover effects (via create-page on MediaWiki MCP Server) |
Fix dark mode with broader selector coverage (via update-page on MediaWiki MCP Server) |
||
| Line 45: | Line 45: | ||
} | } | ||
/* Dark mode support */ | /* Dark mode support - multiple selectors for Citizen skin */ | ||
html[data-theme="dark"] .brand-entry, | |||
[data-color-scheme="dark"] .brand-entry, | |||
.skin-citizen-dark .brand-entry, | .skin-citizen-dark .brand-entry, | ||
.citizen-dark .brand-entry { | .citizen-dark .brand-entry { | ||
| Line 53: | Line 55: | ||
} | } | ||
html[data-theme="dark"] .brand-entry:hover, | |||
[data-color-scheme="dark"] .brand-entry:hover, | |||
.skin-citizen-dark .brand-entry:hover, | .skin-citizen-dark .brand-entry:hover, | ||
.citizen-dark .brand-entry:hover { | .citizen-dark .brand-entry:hover { | ||
| Line 60: | Line 64: | ||
} | } | ||
html[data-theme="dark"] .brand-entry-count, | |||
[data-color-scheme="dark"] .brand-entry-count, | |||
.skin-citizen-dark .brand-entry-count, | .skin-citizen-dark .brand-entry-count, | ||
.citizen-dark .brand-entry-count { | .citizen-dark .brand-entry-count { | ||
color: #94a3b8; | color: #94a3b8; | ||
} | |||
/* Also try prefers-color-scheme media query as fallback */ | |||
@media (prefers-color-scheme: dark) { | |||
.brand-entry { | |||
background: #1e293b; | |||
border-color: #3b82f6; | |||
color: #60a5fa; | |||
} | |||
.brand-entry:hover { | |||
background: #1e3a5f; | |||
border-color: #60a5fa; | |||
box-shadow: 0 10px 15px -3px rgba(96, 165, 250, 0.3), 0 4px 6px -4px rgba(96, 165, 250, 0.2); | |||
} | |||
.brand-entry-count { | |||
color: #94a3b8; | |||
} | |||
} | } | ||
