Citizen.css: Difference between revisions
MediaWiki interface page
More actions
Content deleted Content added
No edit summary Tag: Reverted |
Tag: Undo |
||
| Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Citizen skin */ |
/* All CSS here will be loaded for users of the Citizen skin */ |
||
/* Font import */ |
|||
/** |
|||
@font-face { |
|||
* Background images |
|||
font-family: 'Afacad-Regular'; |
|||
*/ |
|||
src: url('https://wiki.arcitex.net/images/fonts/Afacad-Regular.ttf') format('truetype'); |
|||
@media screen { |
|||
/* Hero image */ |
|||
.citizen-page-container:before { |
|||
/* FIXME: Optimization needed (WebP, proper sized) */ |
|||
background-image: url(/w/images/9/9b/John_Howe_-_Panorama.jpg); |
|||
background-position: 70% center; |
|||
} |
|||
/* Site header image */ |
|||
.citizen-header:before { |
|||
background-image: url(/w/images/2/28/Citizen_header_image.webp); |
|||
} |
|||
/* One Ring Inscription */ |
|||
.citizen-body-container::after { |
|||
background-image: url(/w/images/b/bf/One_Ring_Inscription_single_line_vertical.svg); |
|||
} |
|||
} |
} |
||
:root { |
|||
/* Middle Earth map */ |
|||
--font-family-base: 'Afacad-Regular', sans-serif; |
|||
@media screen and (min-width: 1120px) { |
|||
--font-size-base: 1rem; |
|||
.mw-body::before { |
|||
background-image: url(/w/images/f/f1/Middle_Earth_Map_-_Mapome_-_No_label.svg); |
|||
} |
|||
} |
} |
||
/* Light/Dark Mode Support */ |
|||
/** |
|||
* Tolkien Gateway theme |
|||
*/ |
|||
:root { |
|||
--color-surface-0: var(--tg-color-surface-0) !important; |
|||
--color-surface-1: var(--tg-color-surface-1) !important; |
|||
--color-surface-2: var(--tg-color-surface-2) !important; |
|||
--color-surface-3: var(--tg-color-surface-3) !important; |
|||
--color-surface-4: var(--tg-color-surface-4) !important; |
|||
--color-base: var(--tg-color-base) !important; |
|||
--color-base--emphasized: var(--tg-color-emphasized) !important; |
|||
--color-base--subtle: var(--tg-color-subtle) !important; |
|||
--font-family-base: var(--tg-font-family-body); |
|||
--color-primary__h: 84.55; |
|||
--color-primary__s: 69%; |
|||
--color-primary__l: 28%; |
|||
--color-primary: var(--tg-color-progressive) !important; |
|||
--color-primary--hover: var(--tg-color-progressive--hover) !important; |
|||
--color-primary--active: var(--tg-color-progressive--active) !important; |
|||
--color-inverted-primary: var(--tg-color-inverted-progressive); |
|||
/* Dark mode styles */ |
|||
--tg-inscription-size: 8px; |
|||
} |
|||
/* Dark theme */ |
|||
:root.skin-theme-clientpref-night { |
:root.skin-theme-clientpref-night { |
||
--color-surface-0: #02022b; |
|||
--tg-border-color-base: rgba(255, 255, 255, 0.05); |
|||
- |
--color-base: #e0e0e0; |
||
--color-base--emphasized:#66ccff ; |
|||
--tg-border-color-interactive: rgba(255, 255, 255, 0.08); |
|||
- |
--color-base--subtle: #999999; |
||
--tg-color-emphasized: #fbf8f1; |
|||
--tg-color-subtle: #e3d2b0; |
|||
--tg-color-inverted-progressive: #000; |
|||
--tg-color-surface-0: #1a1a1f; |
|||
--tg-color-surface-1: #1f1f24; |
|||
--tg-color-surface-2: #23232e; |
|||
--tg-color-surface-3: #282833; |
|||
--tg-color-surface-4: #2c2c3c; |
|||
--tg-color-surface-5: #313142; |
|||
--tg-color-progressive: #f1c45e; |
|||
--tg-color-progressive--hover: #ffd16b; |
|||
--tg-color-progressive--active: #e4b750; |
|||
--tg-opacity-pattern: 0.05; |
|||
--color-primary__h: 41.6; |
|||
--color-primary__s: 84%; |
|||
--color-primary__l: 65.7%; |
|||
} |
} |
||
/* Light mode styles */ |
|||
:root.skin-theme-clientpref-light { |
|||
/* Auto theme */ |
|||
--color-surface-0: #ffffff; |
|||
--color-base: #333333; |
|||
:root.skin-theme-clientpref-os { |
|||
--color-base--emphasized: #0077cc; |
|||
--tg-border-color-base: rgba(255, 255, 255, 0.05); |
|||
--color-base--subtle: #777777; |
|||
--tg-border-color-interactive: rgba(255, 255, 255, 0.08); |
|||
--tg-color-base: #e4ddcf; |
|||
--tg-color-emphasized: #fbf8f1; |
|||
--tg-color-subtle: #e3d2b0; |
|||
--tg-color-inverted-progressive: #000; |
|||
--tg-color-surface-0: #1a1a1f; |
|||
--tg-color-surface-1: #1f1f24; |
|||
--tg-color-surface-2: #23232e; |
|||
--tg-color-surface-3: #282833; |
|||
--tg-color-surface-4: #2c2c3c; |
|||
--tg-color-surface-5: #313142; |
|||
--tg-color-progressive: #f1c45e; |
|||
--tg-color-progressive--hover: #ffd16b; |
|||
--tg-color-progressive--active: #e4b750; |
|||
--tg-opacity-pattern: 0.05; |
|||
--color-primary__h: 41.6; |
|||
--color-primary__s: 84%; |
|||
--color-primary__l: 65.7%; |
|||
} |
|||
} |
} |
||
* { |
|||
/* Black theme */ |
|||
transition: color 0.3s; |
|||
:root.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 { |
|||
--tg-color-surface-0: #000; |
|||
--tg-color-surface-1: #111; |
|||
--tg-color-surface-2: #222; |
|||
--tg-color-surface-3: #333; |
|||
--tg-color-surface-4: #444; |
|||
--tg-color-surface-5: #555; |
|||
--delta-hover-state: 6%; |
|||
--shadow-strength: 0.04; |
|||
} |
} |
||
/* Normal links */ |
|||
@media screen and (prefers-color-scheme: dark) { |
|||
a { |
|||
:root.skin-theme-clientpref-os.citizen-feature-pure-black-clientpref-1 { |
|||
color: #f72a57; |
|||
transition: color 0.3s; |
|||
--tg-color-surface-2: #222; |
|||
--tg-color-surface-3: #333; |
|||
--tg-color-surface-4: #444; |
|||
--tg-color-surface-5: #555; |
|||
--delta-hover-state: 6%; |
|||
--shadow-strength: 0.04; |
|||
} |
|||
} |
} |
||
/* Visited links */ |
|||
/* Do not invert edit button icon in dark mode because of contrast */ |
|||
a:visited { |
|||
.skin-theme-clientpref-night #ca-edit .citizen-ui-icon::before, |
|||
color: #f72a57; |
|||
.skin-theme-clientpref-night #ca-ve-edit .citizen-ui-icon::before { |
|||
filter: none; |
|||
} |
} |
||
/* Links when hovered */ |
|||
@media screen and (prefers-color-scheme: dark) { |
|||
a:hover { |
|||
.skin-theme-clientpref-os #ca-edit .citizen-ui-icon::before, |
|||
color: #f72a57; |
|||
.skin-theme-clientpref-os #ca-ve-edit .citizen-ui-icon::before { |
|||
filter: none; |
|||
} |
|||
} |
} |
||
/* Active (clicked) links */ |
|||
h1, |
|||
a:active { |
|||
h2, |
|||
color: #f72a57; |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6 { |
|||
font-family: var(--tg-font-family-heading); |
|||
} |
} |
||
/* |
/* New page links */ |
||
a. |
a.new { |
||
color: #6A38B3 !important; |
|||
width: 0.75em; |
|||
height: 0.75em; |
|||
margin-left: 0.125em; |
|||
content: ""; |
|||
background-color: currentcolor; |
|||
-webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgYXJpYS1oaWRkZW49InRydWUiIHZpZXdCb3g9IjAgMCAyMCAyMCI+IDxnIGZpbGw9ImN1cnJlbnRDb2xvciI+IDxwYXRoIGQ9Ik0xNyAxN0gzVjNoNVYxSDNhMiAyIDAgMCAwLTIgMnYxNGEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJ2LTVoLTJ6Ii8+IDxwYXRoIGQ9Im0xMSAxIDMuMjkgMy4yOS01LjczIDUuNzMgMS40MiAxLjQyIDUuNzMtNS43M0wxOSA5VjF6Ii8+IDwvZz4gPC9zdmc+) |
|||
no-repeat 50% 50%; |
|||
mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgYXJpYS1oaWRkZW49InRydWUiIHZpZXdCb3g9IjAgMCAyMCAyMCI+IDxnIGZpbGw9ImN1cnJlbnRDb2xvciI+IDxwYXRoIGQ9Ik0xNyAxN0gzVjNoNVYxSDNhMiAyIDAgMCAwLTIgMnYxNGEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJ2LTVoLTJ6Ii8+IDxwYXRoIGQ9Im0xMSAxIDMuMjkgMy4yOS01LjczIDUuNzMgMS40MiAxLjQyIDUuNzMtNS43M0wxOSA5VjF6Ii8+IDwvZz4gPC9zdmc+) |
|||
no-repeat 50% 50%; |
|||
-webkit-mask-size: contain; |
|||
mask-size: contain; |
|||
} |
} |
||
.skin-theme-clientpref-night blockquote p { |
|||
.plainlinks a { |
|||
color: #bbbbbb; |
|||
&::after { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
} |
||
.skin-theme-clientpref-light blockquote p { |
|||
/* Adjust wordmark size */ |
|||
color: #555555; |
|||
img.mw-logo-wordmark { |
|||
height: 2rem; |
|||
} |
} |
||
.skin-theme-clientpref-night figure.mw-default-size figcaption { |
|||
/* Shift sticky header trigger point by 100px */ |
|||
color: #cccccc; |
|||
#citizen-page-header-sticky-sentinel { |
|||
transform: translateY(100px); |
|||
} |
} |
||
.skin-theme-clientpref-light figure.mw-default-size figcaption { |
|||
/** |
|||
color: #aaaaaa; |
|||
* Background image handling |
|||
*/ |
|||
.citizen-page-container, |
|||
.citizen-body-container { |
|||
position: relative; |
|||
} |
} |
||
@media screen { |
|||
.citizen-header:before, |
|||
.citizen-page-container |
.citizen-page-container:before { |
||
background-image: url("/images/97kkmoki2rx21.png") !important; |
|||
.mw-body::before, |
|||
background-position: 70% center; |
|||
.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% |
|||
); |
|||
} |
|||
.mw-body::before { |
|||
position: fixed; /* Avoid layout shift */ |
|||
margin-left: calc(var(--tg-inscription-size) + var(--padding-page)); |
|||
opacity: calc( |
|||
var(--tg-opacity-pattern) * 0.5 |
|||
); /* Since this is behind content, it should be more subtle */ |
|||
background-repeat: repeat; |
|||
mask-image: linear-gradient( |
|||
transparent, |
|||
#000 480px, |
|||
#000 calc(100% - 480px), |
|||
transparent |
|||
); |
|||
-webkit-mask-image: linear-gradient( |
|||
transparent, |
|||
#000 480px, |
|||
#000 calc(100% - 480px), |
|||
transparent |
|||
); |
|||
} |
|||
.citizen-body-container::after { |
|||
background-size: var(--tg-inscription-size); |
|||
opacity: var(--tg-opacity-pattern); |
|||
mask-image: linear-gradient( |
|||
transparent, |
|||
#000 160px, |
|||
#000 calc(100% - 160px), |
|||
transparent |
|||
); |
|||
-webkit-mask-image: linear-gradient( |
|||
transparent, |
|||
#000 160px, |
|||
#000 calc(100% - 160px), |
|||
transparent |
|||
); |
|||
} |
|||
@media screen and (min-width: 640px) { |
|||
img.mw-logo-wordmark { |
|||
height: 2.5rem; |
|||
} |
} |
||
} |
|||
@media screen and (min-width: 1120px) { |
|||
:root { |
|||
--tg-inscription-size: 32px; |
|||
} |
|||
/* Make space for header background image */ |
|||
.citizen-header { |
|||
padding-top: 36px; |
|||
} |
|||
.citizen-header::before { |
|||
background-position: top center; |
|||
mask-image: linear-gradient(rgba(0, 0, 0, 0.2), transparent 64px); |
|||
-webkit-mask-image: linear-gradient( |
|||
rgba(0, 0, 0, 0.2), |
|||
transparent 64px |
|||
); |
|||
} |
|||
/* Make space for inscription */ |
|||
.citizen-page-header, |
|||
.citizen-body-container { |
|||
padding-left: calc(var(--tg-inscription-size) + var(--padding-page)); |
|||
} |
|||
} |
|||
@media screen and (min-width: 1680px) { |
|||
:root { |
|||
--tg-inscription-size: 3vw; |
|||
} |
|||
} |
|||
/* Move page header to the bottom for main page */ |
|||
.page-Main_Page .citizen-body-container { |
|||
grid-template-areas: |
|||
"content" |
|||
"header" |
|||
"afterHeader" |
|||
"footer"; |
|||
} |
|||
@media (hover: hover) { |
|||
/* |
|||
* Search button tooltip |
|||
* This is temporary until tooltip is fully implemented upstream at Citizen |
|||
*/ |
|||
.citizen-search |
|||
.citizen-dropdown-details:not([open]) |
|||
> .citizen-dropdown-summary:hover::after { |
|||
content: "/"; |
|||
position: absolute; |
|||
border: 1px solid var(--border-color-interactive); |
|||
border-radius: var(--border-radius--small); |
|||
min-width: var(--size-icon); |
|||
min-height: var(--size-icon); |
|||
padding: 0 var(--space-xxs); |
|||
background: var(--color-surface-1); |
|||
font-size: 0.65rem; |
|||
font-weight: var(--font-weight-medium); |
|||
line-height: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
/* |
|||
* Menu |
|||
* Rich format menu to have more hierarchy |
|||
*/ |
|||
/* Remove bottom spacing as it is handled in footer portlet */ |
|||
.citizen-drawer__menu { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
} |
|||
.mw-portlet-External { |
|||
position: sticky; |
|||
bottom: 0; |
|||
margin-top: var( --space-md ); |
|||
padding: var( --space-xs ) 0; |
|||
border-top: 1px solid var( --border-color-base ); |
|||
background: var( --color-surface-1 ); |
|||
font-size: var( --font-size-x-small ); |
|||
grid-column-start: 1; |
|||
white-space: nowrap; |
|||
} |
|||
@media screen and ( min-width: 32.875rem ) { |
|||
.mw-portlet-External { |
|||
grid-column-end: span 2; |
|||
} |
|||
} |
|||
.mw-portlet-External .citizen-menu__heading { |
|||
display: none; |
|||
} |
|||
.mw-portlet-External ul { |
|||
display: flex; |
|||
overflow: auto; |
|||
} |
|||
.mw-portlet-External .mw-list-item a { |
|||
gap: 0; |
|||
} |
|||
/* Label */ |
|||
.citizen-drawer__menu [id^="n-sidebar-label-"] a { |
|||
pointer-events: none; |
|||
margin-left: var( --space-xs ); |
|||
padding-left: var( --space-md ); |
|||
padding-right: var( --space-xs ); |
|||
border-left: 1px solid var( --border-color-base ); |
|||
border-radius: 0; |
|||
letter-spacing: 0.05em; |
|||
font-weight: var( --font-weight-normal ); |
|||
color: var( --color-base--subtle ) !important; |
|||
} |
|||
/* Icons */ |
|||
.citizen-drawer__menu [id^="n-sidebar-icon-"] a { |
|||
font-size: 0; |
|||
content-visibility: auto; |
|||
} |
|||
.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before { |
|||
display: block; |
|||
content: ""; |
|||
width: var( --size-icon ); |
|||
height: var( --size-icon ); |
|||
background: transparent center/contain no-repeat; |
|||
opacity: var( --opacity-icon-base ); |
|||
filter: var( --filter-invert ); |
|||
} |
|||
#n-sidebar-icon-discord a:before { |
|||
background-image: url( https://tolkiengateway.net/w/images/7/77/Discord_-_Simple_Icons.svg ) |
|||
} |
|||
#n-sidebar-icon-bluesky a:before { |
|||
background-image: url( https://tolkiengateway.net/w/images/8/8b/Bluesky_-_Simple_Icons.svg ) |
|||
} |
|||
#n-sidebar-icon-x a:before { |
|||
background-image: url( https://tolkiengateway.net/w/images/2/27/X_-_Simple_Icons.svg ) |
|||
} |
|||
#n-sidebar-icon-facebook a:before { |
|||
background-image: url( https://tolkiengateway.net/w/images/c/c8/Facebook_-_Simple_Icons.svg ) |
|||
} |
|||
#n-sidebar-icon-reddit a:before { |
|||
background-image: url( https://tolkiengateway.net/w/images/e/e8/Reddit_-_Simple_Icons.svg ) |
|||
} |
|||
#n-sidebar-icon-instagram a:before { |
|||
background-image: url( https://tolkiengateway.net/w/images/b/b9/Instagram_-_Simple_Icons.svg ) |
|||
} |
|||
#n-sidebar-icon-youtube a:before { |
|||
background-image: url( https://tolkiengateway.net/w/images/1/1f/YouTube_-_Simple_Icons.svg ) |
|||
} |
} |
||
Revision as of 07:53, 7 March 2025
/* All CSS here will be loaded for users of the Citizen skin */
/* Font import */
@font-face {
font-family: 'Afacad-Regular';
src: url('https://wiki.arcitex.net/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:before {
background-image: url("/images/97kkmoki2rx21.png") !important;
background-position: 70% center;
}
}