|
|
| Line 1: |
Line 1: |
| /* All CSS here will be loaded for users of the Citizen skin */
| |
|
| |
|
| /**
| |
| * Background images
| |
| */
| |
|
| |
| @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);
| |
| }
| |
| }
| |
|
| |
| /* Middle Earth map */
| |
| @media screen and (min-width: 1120px) {
| |
| .mw-body::before {
| |
| background-image: url(/w/images/f/f1/Middle_Earth_Map_-_Mapome_-_No_label.svg);
| |
| }
| |
| }
| |
|
| |
| /**
| |
| * 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);
| |
|
| |
| --tg-inscription-size: 8px;
| |
| }
| |
|
| |
| /* Dark theme */
| |
| :root.skin-theme-clientpref-night {
| |
| --tg-border-color-base: rgba(255, 255, 255, 0.05);
| |
| --tg-border-color-subtle: rgba(255, 255, 255, 0.02);
| |
| --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%;
| |
| }
| |
|
| |
| /* Auto theme */
| |
| @media screen and (prefers-color-scheme: dark) {
| |
| :root.skin-theme-clientpref-os {
| |
| --tg-border-color-base: rgba(255, 255, 255, 0.05);
| |
| --tg-border-color-subtle: rgba(255, 255, 255, 0.02);
| |
| --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 */
| |
| :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;
| |
| }
| |
|
| |
| @media screen and (prefers-color-scheme: dark) {
| |
| :root.skin-theme-clientpref-os.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;
| |
| }
| |
| }
| |
|
| |
| /* Do not invert edit button icon in dark mode because of contrast */
| |
| .skin-theme-clientpref-night #ca-edit .citizen-ui-icon::before,
| |
| .skin-theme-clientpref-night #ca-ve-edit .citizen-ui-icon::before {
| |
| filter: none;
| |
| }
| |
|
| |
| @media screen and (prefers-color-scheme: dark) {
| |
| .skin-theme-clientpref-os #ca-edit .citizen-ui-icon::before,
| |
| .skin-theme-clientpref-os #ca-ve-edit .citizen-ui-icon::before {
| |
| filter: none;
| |
| }
| |
| }
| |
|
| |
| h1,
| |
| h2,
| |
| h3,
| |
| h4,
| |
| h5,
| |
| h6 {
| |
| font-family: var(--tg-font-family-heading);
| |
| }
| |
|
| |
| /* Add external link icon to interwiki links */
| |
| a.extiw::after {
| |
| display: inline-block;
| |
| 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;
| |
| }
| |
|
| |
| .plainlinks a {
| |
| &.external {
| |
| &::after {
| |
| display: none;
| |
| }
| |
| }
| |
| }
| |
|
| |
| /* Adjust wordmark size */
| |
| img.mw-logo-wordmark {
| |
| height: 2rem;
| |
| }
| |
|
| |
| /* Shift sticky header trigger point by 100px */
| |
| #citizen-page-header-sticky-sentinel {
| |
| transform: translateY(100px);
| |
| }
| |
|
| |
| /**
| |
| * 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%
| |
| );
| |
| }
| |
|
| |
| .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;
| |
| }
| |
| }
| |
