|
|
| Line 1: |
Line 1: |
| /* <pre><nowiki> */ | | /* CSS placed here will be applied to all skins */ |
|
| |
|
| /* Tolkien Gateway theme */ | | /* Vector 2022 background gradient */ |
| | | html, |
| /* Import fonts from Google Fonts: EB Garamond, Lora */
| | body, |
| @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
| | .vector-feature-page-tools-disabled .mw-page-container, |
| | | .vector-feature-page-tools-enabled .mw-page-container { |
| /*
| | background: linear-gradient(0deg, #001D3D 0%, #000814 40%) !important; |
| * Use customized system fonts as fallback for font stack
| | background-attachment: fixed !important; |
| * Needed to avoid layout shift
| |
| */
| |
| @font-face {
| |
| font-family: 'EB Garamond-fallback';
| |
| size-adjust: 94.29999999999998%;
| |
| ascent-override: 101%;
| |
| descent-override: 36.40000000000171%;
| |
| src: local('Times New Roman');
| |
| }
| |
| | |
| @font-face {
| |
| font-family: 'Lora-fallback';
| |
| size-adjust: 105.20000000000005%;
| |
| ascent-override: 92%;
| |
| descent-override: 32.60000000000166%;
| |
| src: local('Georgia');
| |
| }
| |
| | |
| /* CSS variables */
| |
| :root {
| |
| /* Border */
| |
| /* Border color */
| |
| --tg-border-color-base: rgba(0, 0, 0, 0.08);
| |
| --tg-border-color-subtle: rgba(0, 0, 0, 0.05);
| |
| --tg-border-color-interactive: rgba(0, 0, 0, 0.11);
| |
| /* Border radius */
| |
| --tg-border-radius-sharp: 0;
| |
| --tg-border-radius-small: 4px;
| |
| --tg-border-radius-medium: 8px;
| |
| --tg-border-radius-large: 12px;
| |
| --tg-border-radius-pill: 9999px;
| |
| --tg-border-radius-circle: 50%;
| |
| /* Shorthand */
| |
| --tg-border-base: 1px solid var(--tg-border-color-base);
| |
| | |
| /* Color */
| |
| /* Text color */
| |
| --tg-color-emphasized: #1a1f15;
| |
| --tg-color-base: #2a3025;
| |
| --tg-color-subtle: #4e5a42;
| |
| --tg-color-inverted-progressive: #fff;
| |
| --tg-color-link: #36c;
| |
| /* Background color */
| |
| --tg-color-surface-0: #f9f4ee;
| |
| --tg-color-surface-1: #fffbf6;
| |
| --tg-color-surface-2: #f6ede0;
| |
| --tg-color-surface-3: #f0e3cf;
| |
| --tg-color-surface-4: #e6d9c5;
| |
| --tg-color-surface-5: #e3d2b8;
| |
| /* Progressive color */
| |
| --tg-color-progressive: #507b07;
| |
| --tg-color-progressive--hover: #588418;
| |
| --tg-color-progressive--active: #4a710a;
| |
| | |
| /* Font */
| |
| /* Font family */
| |
| --tg-font-family-heading: 'EB Garamond', 'EB Garamond-fallback', serif;
| |
| --tg-font-family-body: 'Lora', 'Lora-fallback', serif;
| |
| /* Font size */
| |
| --tg-font-size-x-small: 0.8125rem;
| |
| --tg-font-size-small: 0.875rem;
| |
| --tg-font-size-medium: 1rem;
| |
| --tg-font-size-large: 1.125rem;
| |
| --tg-font-size-x-large: 1.25rem;
| |
| --tg-font-size-xx-large: 1.5rem;
| |
| --tg-font-size-xxx-large: 2rem;
| |
| /* Font weight */
| |
| --tg-font-weight-regular: 400;
| |
| --tg-font-weight-medium: 500;
| |
| --tg-font-weight-semibold: 600;
| |
| /* Line height */
| |
| --tg-line-height-xxx-small: 1.25;
| |
| --tg-line-height-xx-small: 1.375;
| |
| --tg-line-height: 1.6;
| |
| | |
| /* Opacity */
| |
| --tg-opacity-pattern: 0.08;
| |
| | |
| /* Codex token backport */
| |
| /* Quiet color */
| |
| --background-color-button-quiet--hover: rgba(0, 0, 0, 0.07);
| |
| --background-color-button-quiet--active: rgba(0, 0, 0, 0.09);
| |
| }
| |
| | |
| html {
| |
| /* Force serif fonts to format number on the same line */
| |
| font-variant-numeric: lining-nums;
| |
| } | | } |
|
| |
|
| /* Blockquote */ | | /* Make content areas transparent to show gradient */ |
| blockquote {
| | .mw-page-container, |
| padding-left: 1rem;
| | .mw-body, |
| border-left: 2px solid var(--tg-border-color-base);
| | #content, |
| font-style: italic;
| | .vector-body { |
| /* Fallback for non-Chromium browsers */
| | background: transparent !important; |
| text-wrap: balance;
| |
| /* Only works on Chromium browsers */
| |
| text-wrap: pretty;
| |
| } | | } |
|
| |
|
| blockquote cite {
| | /* Sidebar transparent */ |
| color: var(--tg-color-subtle);
| | #mw-panel, |
| font-size: var(--tg-font-size-x-small);
| | .vector-main-menu, |
| font-style: normal;
| | .vector-sidebar { |
| | background: transparent !important; |
| } | | } |
|
| |
|
| blockquote cite::before {
| | /* Default text color white */ |
| content: '―';
| | body, |
| margin-right: 0.5em;
| | .mw-body, |
| | .mw-body-content, |
| | #mw-content-text, |
| | .vector-body { |
| | color: #FFFFFF !important; |
| } | | } |
|
| |
|
| blockquote > p:first-child::before {
| | /* Header transparent */ |
| content: open-quote;
| | .vector-header-container { |
| | background: transparent !important; |
| } | | } |
|
| |
|
| /* <cite> is wrapped in the last <p> */ | | /* Headings and page titles gold color */ |
| blockquote:has(cite) > p:nth-last-child(2)::after,
| | h1, h2, h3, h4, h5, h6, |
| blockquote:not(:has(cite)) > p:last-child::after {
| | .mw-headline, |
| content: close-quote;
| | #firstHeading, |
| }
| |
|
| |
|
| /* LINKS */
| | .mw-page-title-main, |
| a {
| | .page-Main_Page h1 { |
| /*color: var(--tg-color-link);*/
| | color: #FFC300 !important; |
| } | | } |
|
| |
|
| .underlinelink a { | | /* Logo sizing (Vector 2022) */ |
| text-decoration: underline !important;
| | .mw-logo-icon, |
| }
| | .mw-logo-icon img, |
| .nounderlinelink a { | | .mw-logo img, |
| text-decoration: none !important;
| | .mw-logo a.mw-logo-container img { |
| }
| | height: 100px !important; |
| .nounderlinelink a:hover {
| | width: auto !important; |
| text-decoration: underline !important;
| | max-height: 100px !important; |
| } | | } |
|
| |
|
| /* SEQUENCE TEMPLATE */ | | /* If the logo is applied as a background image */ |
| | | .mw-logo-icon { |
| td.seqwhite a {
| | background-size: auto 56px !important; |
| color: #ffffff !important;
| |
| }
| |
| td.seqwhite div span a {
| |
| color: #ffffff !important;
| |
| }
| |
| td.seqcream a {
| |
| color: #fffdd0 !important;
| |
| }
| |
| td.seqcream div span a {
| |
| color: #fffdd0 !important;
| |
| }
| |
| td.seqgrey a {
| |
| color: #2a2a2a !important;
| |
| }
| |
| td.seqgrey div span a {
| |
| color: #2a2a2a !important;
| |
| } | | } |
|
| |
|
| /* REFERENCES TEMPLATE */
| | @media (max-width: 720px) { |
| ol.references {
| | .mw-logo-icon { |
| font-size: var(--tg-font-size-x-small);
| | height: 32px; |
| margin-top: 0px;
| | } |
| padding-top: 0px;
| |
| } | | } |
| .references-small {
| |
| font-size: 0.75rem;
| |
| }
| |
| ol.references > li:target {
| |
| background-color: #ddeeff;
| |
| }
| |
| sup.reference:target {
| |
| background-color: #ddeeff;
| |
| }
| |
|
| |
| /* Infobox customizations so they scale for desktop and mobile appropriately */
| |
| @media only screen and (max-width: 600px) {
| |
| .tginfobox {
| |
| min-width: 100%;
| |
| }
| |
| }
| |
|
| |
| @media only screen and (min-width: 601px) {
| |
| .tginfobox {
| |
| width: 275px;
| |
| }
| |
| }
| |
|
| |
| @media screen and (max-width: 600px) {
| |
| .spotify,
| |
| .template-month {
| |
| float: center;
| |
| margin-left: 10px;
| |
| }
| |
| }
| |
|
| |
| .pi-type-film .pi-secondary-background {
| |
| background: rgb(238, 249, 238);
| |
| background: linear-gradient(
| |
| 90deg,
| |
| rgba(238, 249, 238, 1) 0%,
| |
| rgba(171, 194, 171, 1) 35%,
| |
| rgba(114, 139, 114, 1) 100%
| |
| );
| |
| }
| |
|
| |
| .pi-data {
| |
| display: flex;
| |
| align-items: center;
| |
| }
| |
|
| |
| .spotify {
| |
| float: right;
| |
| width: 300px;
| |
| height: 100px;
| |
| }
| |
|
| |
| @media screen and (max-width: 850px) {
| |
| #p-logo-text {
| |
| /* Tighten the logo a bit more to the left on mobile devices to prevent overlapping */
| |
| left: 3em;
| |
| }
| |
| }
| |
|
| |
| /* Print styles */
| |
| @media print {
| |
| :root {
| |
| /* Border */
| |
| /* Border color */
| |
| --tg-border-color-base: #aaa !important;
| |
| --tg-border-color-subtle: #ddd !important;
| |
| --tg-border-color-interactive: #000 !important;
| |
| /* Color */
| |
| /* Text color */
| |
| --tg-color-emphasized: #000 !important;
| |
| --tg-color-base: #222 !important;
| |
| --tg-color-subtle: #444 !important;
| |
| /* Background color */
| |
| --tg-color-surface-0: #fff !important;
| |
| --tg-color-surface-1: #fff !important;
| |
| --tg-color-surface-2: #fff !important;
| |
| --tg-color-surface-3: #fff !important;
| |
| --tg-color-surface-4: #fff !important;
| |
| --tg-color-surface-5: #fff !important;
| |
| /* Progressive color */
| |
| --tg-color-progressive: #000 !important;
| |
| }
| |
| }
| |
|
| |
| /* Limit FloatingUI content width */
| |
| .ext-floatingui-floating-content {
| |
| max-width: 50ch;
| |
| padding: 12px;
| |
| }
| |
|
| |
| /* </nowiki></pre> */
| |
