MediaWiki:Common.css: Difference between revisions
Apply Alpha Orange Design System: #0D0D0D bg, #FF6A21 accents, #1A1A1A surfaces, full site skin |
Replace orange #FF6A21 with Orange SA brand color #FF6600 throughout |
||
| Line 33: | Line 33: | ||
.mw-parser-output h3, | .mw-parser-output h3, | ||
.mw-parser-output h4 { | .mw-parser-output h4 { | ||
color: # | color: #FF6600 !important; | ||
border-bottom: 1px solid #2E2E2E !important; | border-bottom: 1px solid #2E2E2E !important; | ||
} | } | ||
| Line 39: | Line 39: | ||
/* Links */ | /* Links */ | ||
a, a:visited { | a, a:visited { | ||
color: # | color: #FF6600 !important; | ||
} | } | ||
a:hover { | a:hover { | ||
color: # | color: #FF8533 !important; | ||
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
| Line 60: | Line 60: | ||
} | } | ||
#mw-panel a:hover, .vector-menu a:hover { | #mw-panel a:hover, .vector-menu a:hover { | ||
color: # | color: #FF6600 !important; | ||
} | } | ||
| Line 73: | Line 73: | ||
} | } | ||
.mw-portlet-personal a:hover { | .mw-portlet-personal a:hover { | ||
color: # | color: #FF6600 !important; | ||
} | } | ||
| Line 79: | Line 79: | ||
#p-cactions .selected a, | #p-cactions .selected a, | ||
.mw-portlet-views .selected a { | .mw-portlet-views .selected a { | ||
color: # | color: #FF6600 !important; | ||
border-bottom: 2px solid # | border-bottom: 2px solid #FF6600 !important; | ||
background: transparent !important; | background: transparent !important; | ||
} | } | ||
| Line 91: | Line 91: | ||
} | } | ||
#p-views li a:hover { | #p-views li a:hover { | ||
color: # | color: #FF6600 !important; | ||
} | } | ||
| Line 102: | Line 102: | ||
} | } | ||
#searchInput:focus, .oo-ui-textInputWidget input:focus { | #searchInput:focus, .oo-ui-textInputWidget input:focus { | ||
border-color: rgba(255, | border-color: rgba(255,102,0,0.5) !important; | ||
outline: none !important; | outline: none !important; | ||
} | } | ||
| Line 124: | Line 124: | ||
} | } | ||
.toc a { | .toc a { | ||
color: # | color: #FF6600 !important; | ||
} | } | ||
| Line 151: | Line 151: | ||
} | } | ||
#footer a:hover { | #footer a:hover { | ||
color: # | color: #FF6600 !important; | ||
} | } | ||
| Line 158: | Line 158: | ||
::-webkit-scrollbar-track { background: #0D0D0D; } | ::-webkit-scrollbar-track { background: #0D0D0D; } | ||
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.05); border-radius: 2px; } | ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.05); border-radius: 2px; } | ||
::-webkit-scrollbar-thumb:hover { background: rgba(255, | ::-webkit-scrollbar-thumb:hover { background: rgba(255,102,0,0.2); } | ||
/* ============================================ */ | /* ============================================ */ | ||
| Line 219: | Line 219: | ||
} | } | ||
.ax-card:hover { | .ax-card:hover { | ||
border-color: rgba(255, | border-color: rgba(255,102,0,0.5); | ||
box-shadow: 0 0 20px rgba(255, | box-shadow: 0 0 20px rgba(255,102,0,0.08); | ||
} | } | ||
.ax-card-title { | .ax-card-title { | ||
| Line 233: | Line 233: | ||
margin: 4px 0; | margin: 4px 0; | ||
text-decoration: none; | text-decoration: none; | ||
color: # | color: #FF6600 !important; | ||
} | } | ||
.ax-card a:hover { | .ax-card a:hover { | ||
text-decoration: underline; | text-decoration: underline; | ||
color: # | color: #FF8533 !important; | ||
} | } | ||
.ax-card-title a { | .ax-card-title a { | ||
| Line 244: | Line 244: | ||
} | } | ||
.ax-card-title a:hover { | .ax-card-title a:hover { | ||
color: # | color: #FF6600 !important; | ||
} | } | ||
| Line 308: | Line 308: | ||
align-items: center; | align-items: center; | ||
gap: 6px; | gap: 6px; | ||
background: rgba(255, | background: rgba(255,102,0,0.08); | ||
border: 1px solid rgba(255, | border: 1px solid rgba(255,102,0,0.25); | ||
padding: 8px 16px; | padding: 8px 16px; | ||
border-radius: 999px; | border-radius: 999px; | ||
| Line 317: | Line 317: | ||
} | } | ||
.ax-pill:hover { | .ax-pill:hover { | ||
background: rgba(255, | background: rgba(255,102,0,0.15); | ||
border-color: rgba(255, | border-color: rgba(255,102,0,0.5); | ||
} | } | ||
.ax-pill a { | .ax-pill a { | ||
| Line 340: | Line 340: | ||
} | } | ||
.ax-link-row:hover { | .ax-link-row:hover { | ||
background: rgba(255, | background: rgba(255,102,0,0.08); | ||
border-color: rgba(255, | border-color: rgba(255,102,0,0.35); | ||
color: # | color: #FF8533 !important; | ||
} | } | ||
.ax-link-row a { | .ax-link-row a { | ||
| Line 348: | Line 348: | ||
} | } | ||
.ax-link-row:hover a { | .ax-link-row:hover a { | ||
color: # | color: #FF8533 !important; | ||
} | } | ||
| Line 366: | Line 366: | ||
.ax-accent-bar { | .ax-accent-bar { | ||
height: 2px; | height: 2px; | ||
background: linear-gradient(to right, # | background: linear-gradient(to right, #FF6600, #FF8533); | ||
border-radius: 2px; | border-radius: 2px; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||