User:Fen/Portals/Incidents/styles.css: Difference between revisions
for dark theme users |
No edit summary |
||
| Line 112: | Line 112: | ||
/* Dark theme */ | /* Dark theme */ | ||
/* Auto dark mode: OS preference */ | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .incidents-portal-wrapper { | |||
background: #1e1e1e; | |||
color: #e5e5e5; | |||
} | |||
html.skin-theme-clientpref-os .incidents-header { | |||
background: linear-gradient(to right, #7f1d1d, #5a1010); | |||
color: #fff; | |||
border-left-color: #ff4d4d; | |||
box-shadow: 0 0 15px rgba(255, 77, 77, 0.3); | |||
} | |||
html.skin-theme-clientpref-os .incidents-title { | |||
color: #ffbdbd; | |||
} | |||
html.skin-theme-clientpref-os .incidents-subtitle { | |||
color: #ffcccc; | |||
} | |||
html.skin-theme-clientpref-os .incidents-card { | |||
background: #2b2b2b; | |||
border: 2px solid #4d2c2c; | |||
border-left-color: #aa0000; | |||
box-shadow: 0 2px 6px rgba(200, 0, 0, 0.1); | |||
} | |||
html.skin-theme-clientpref-os .incidents-card:hover { | |||
box-shadow: 0 5px 10px rgba(255, 0, 0, 0.2); | |||
} | |||
html.skin-theme-clientpref-os .incidents-card-title { | |||
color: #ff9999; | |||
border-bottom-color: #666; | |||
} | |||
html.skin-theme-clientpref-os .incidents-card-body { | |||
color: #f0f0f0; | |||
} | |||
html.skin-theme-clientpref-os .incidents-card-body a[href*="Category:"] { | |||
background: #3a1a1a; | |||
border: 1px solid #aa4444; | |||
color: #ff9999; | |||
} | |||
html.skin-theme-clientpref-os .incidents-card-body a[href*="Category:"]:hover { | |||
background: #502020; | |||
color: #ffdddd; | |||
border-color: #ff6666; | |||
} | |||
html.skin-theme-clientpref-os a:link, | |||
html.skin-theme-clientpref-os a:visited { | |||
color: #ff5e5e; | |||
} | |||
html.skin-theme-clientpref-os a:hover { | |||
color: #ff9999; | |||
} | |||
html.skin-theme-clientpref-os .content-header { | |||
color: #aabbee; | |||
border-bottom-color: #7881c7; | |||
} | |||
} | |||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .incidents-portal-wrapper { | html.skin-theme-clientpref-os .incidents-portal-wrapper { | ||