Citizen.css: Difference between revisions
MediaWiki interface page
More actions
Content deleted Content added
No edit summary |
Blanked the page Tags: Blanking Manual revert |
||
| (50 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Citizen skin */ |
|||
/* Font import */ |
|||
@font-face { |
|||
font-family: 'Afacad-Regular'; |
|||
src: url('/images/fonts/Afacad-Regular.ttf') format('truetype'); |
|||
} |
|||
:root { |
|||
--font-family-base: 'Afacad-Regular', sans-serif; |
|||
--font-size-base: 1rem; |
|||
} |
|||
/* Light/Dark Mode Support */ |
|||
/* Dark mode styles */ |
|||
:root.skin-theme-clientpref-night { |
|||
--color-surface-0: #02022b; |
|||
--color-base: #e0e0e0; |
|||
--color-base--emphasized:#66ccff ; |
|||
--color-base--subtle: #999999; |
|||
} |
|||
/* Light mode styles */ |
|||
:root.skin-theme-clientpref-light { |
|||
--color-surface-0: #ffffff; |
|||
--color-base: #333333; |
|||
--color-base--emphasized: #0077cc; |
|||
--color-base--subtle: #777777; |
|||
} |
|||
* { |
|||
transition: color 0.3s; |
|||
} |
|||
/* Normal links */ |
|||
a { |
|||
color: #f72a57; |
|||
transition: color 0.3s; |
|||
} |
|||
/* Visited links */ |
|||
a:visited { |
|||
color: #f72a57; |
|||
} |
|||
/* Links when hovered */ |
|||
a:hover { |
|||
color: #f72a57; |
|||
} |
|||
/* Active (clicked) links */ |
|||
a:active { |
|||
color: #f72a57; |
|||
} |
|||
/* New page links */ |
|||
a.new { |
|||
color: #6A38B3 !important; |
|||
} |
|||
.skin-theme-clientpref-night blockquote p { |
|||
color: #bbbbbb; |
|||
} |
|||
.skin-theme-clientpref-light blockquote p { |
|||
color: #555555; |
|||
} |
|||
.skin-theme-clientpref-night figure.mw-default-size figcaption { |
|||
color: #cccccc; |
|||
} |
|||
.skin-theme-clientpref-light figure.mw-default-size figcaption { |
|||
color: #aaaaaa; |
|||
} |
|||
@media screen { |
|||
.citizen-page-container { |
|||
background-image: |
|||
url("/images/97kkmoki2rx21.png"), |
|||
linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); |
|||
background-position: 70% center; |
|||
background-repeat: no-repeat; |
|||
} |
|||
} |
|||
/** |
|||
* Background image handling |
|||
*/ |
|||
.citizen-page-container, |
|||
.citizen-body-container { |
|||
position: relative; |
|||
} |
|||
.citizen-header:before, |
|||
.citizen-page-container::before, |
|||
.mw-body::before, |
|||
.citizen-body-container::after { |
|||
content: ""; |
|||
position: absolute; |
|||
inset: 0; |
|||
pointer-events: none; |
|||
} |
|||
.citizen-header:before, |
|||
.citizen-page-container::before { |
|||
background-repeat: no-repeat; |
|||
} |
|||
.mw-body::before, |
|||
.citizen-body-container::after { |
|||
background-repeat: repeat-y; |
|||
filter: var(--filter-invert); |
|||
} |
|||
.citizen-header::before { |
|||
background-position: center left; |
|||
background-size: contain; |
|||
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent 32px); |
|||
-webkit-mask-image: linear-gradient( |
|||
to right, |
|||
rgba(0, 0, 0, 0.2), |
|||
transparent 32px |
|||
); |
|||
} |
|||
.citizen-page-container::before { |
|||
height: 200px; |
|||
background-size: cover; |
|||
mask-image: linear-gradient( |
|||
rgba(0, 0, 0, 0.35), |
|||
rgba(0, 0, 0, 0.2) 3rem, |
|||
rgba(0, 0, 0, 0.05) 9rem, |
|||
transparent 100% |
|||
); |
|||
-webkit-mask-image: linear-gradient( |
|||
rgba(0, 0, 0, 0.35), |
|||
rgba(0, 0, 0, 0.2) 3rem, |
|||
rgba(0, 0, 0, 0.05) 9rem, |
|||
transparent 100% |
|||
); |
|||
} |
|||