|
|
| (42 intermediate revisions by 2 users not shown) |
| Line 10: |
Line 10: |
| @import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Text: [email protected]&display=swap'); | | @import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Text: [email protected]&display=swap'); |
|
| |
|
| /*=====================*
| |
| | CODEX DESIGN TOKENS |
| |
| *=====================*/
| |
| @media screen {
| |
| /* Day, Light */
| |
| :root,
| |
| .skin-invert,
| |
| .notheme {
| |
| /* Background image */
| |
| --background-image: url("https://petitplanet.wiki/images/c/c3/Background_Light.jpg");
| |
| /* Additional colors */
| |
| --color-accent: #eac863;
| |
| --color-accent--rgb: 234, 200, 99;
| |
| --color-accent-text: #5a4a3c;
| |
| --color-buzz: #0075EB;
| |
| --color-event: #cc8000;
| |
| --color-menu: #937C6E;
| |
| --color-new: #317e2a;
| |
| --color-old: #932015;
| |
| --color-help: #BB8010;
| |
| --color-catch: #17744b;
| |
| /* Additional background colors */
| |
| --background-color-0: #f6f9dd;
| |
| --background-color-0b: oklch(0.965 0.04 107.5);
| |
| --background-color-1: oklch(0.94 0.04 107.5);
| |
| --background-color-1b: oklch(0.92 0.04 107.5);
| |
| --background-color-2: oklch(0.90 0.04 107.5);
| |
| --background-color-2b: oklch(0.88 0.04 107.5);
| |
| --background-color-3: oklch(0.85 0.04 107.5);
| |
| --background-color-4: oklch(0.80 0.04 107.5);
| |
| --background-color-5: oklch(0.75 0.04 107.5);
| |
| --background-color-6: oklch(0.70 0.04 107.5);
| |
| --background-color-8: oklch(0.65 0.04 107.5);
| |
| --background-color-9: oklch(0.60 0.04 107.5);
| |
| --background-color-10: oklch(0.55 0.04 107.5);
| |
| /* Miscellaneous */
| |
| --unknown-img: url("https://petitplanet.wiki/images/d/dd/Unknown.png");
| |
| }
| |
|
| |
| /* Night, Dark */
| |
| :root.skin-theme-clientpref-night {
| |
| color-scheme: dark;
| |
| /* Background image */
| |
| --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
| |
| /* Additional colors */
| |
| --color-accent: #ddbc5b;
| |
| --color-accent--rgb: 221, 188, 91;
| |
| --color-accent-text: #0d0f1e;
| |
| --color-buzz: #2095EF;
| |
| --color-event: #cc8000;
| |
| --color-menu: #D3BC8E;
| |
| --color-new: #41be3a;
| |
| --color-old: #ed6d59;
| |
| --color-help: #e0bb00;
| |
| --color-catch: #85cdae;
| |
| /* Additional background colors */
| |
| --background-color-0: #0d0f1e;
| |
| --background-color-0b: oklch(0.21 0.0278 277.52);
| |
| --background-color-1: oklch(0.24 0.0278 277.52);
| |
| --background-color-1b: oklch(0.27 0.0278 277.52);
| |
| --background-color-2: oklch(0.30 0.0278 277.52);
| |
| --background-color-2b: oklch(0.325 0.0278 277.52);
| |
| --background-color-3: oklch(0.35 0.0278 277.52);
| |
| --background-color-4: oklch(0.40 0.0278 277.52);
| |
| --background-color-5: oklch(0.45 0.0278 277.52);
| |
| --background-color-6: oklch(0.50 0.0278 277.52);
| |
| --background-color-7: oklch(0.55 0.0278 277.52);
| |
| --background-color-8: oklch(0.60 0.0278 277.52);
| |
| --background-color-9: oklch(0.65 0.0278 277.52);
| |
| --background-color-10: oklch(0.70 0.0278 277.52);
| |
| }
| |
| }
| |
|
| |
| /* OS, Auto */
| |
| @media screen and (prefers-color-scheme: dark) {
| |
| :root.skin-theme-clientpref-os {
| |
| /* Background image */
| |
| --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
| |
| /* Additional colors */
| |
| --color-accent: #ddbc5b;
| |
| --color-accent--rgb: 221, 188, 91;
| |
| --color-accent-text: #0d0f1e;
| |
| --color-buzz: #2095EF;
| |
| --color-event: #cc8000;
| |
| --color-menu: #D3BC8E;
| |
| --color-new: #41be3a;
| |
| --color-old: #ed6d59;
| |
| --color-help: #e0bb00;
| |
| --color-catch: #85cdae;
| |
| /* Additional background colors */
| |
| --background-color-0: #0d0f1e;
| |
| --background-color-0b: oklch(0.21 0.0278 277.52);
| |
| --background-color-1: oklch(0.24 0.0278 277.52);
| |
| --background-color-1b: oklch(0.27 0.0278 277.52);
| |
| --background-color-2: oklch(0.30 0.0278 277.52);
| |
| --background-color-2b: oklch(0.325 0.0278 277.52);
| |
| --background-color-3: oklch(0.35 0.0278 277.52);
| |
| --background-color-4: oklch(0.40 0.0278 277.52);
| |
| --background-color-5: oklch(0.45 0.0278 277.52);
| |
| --background-color-6: oklch(0.50 0.0278 277.52);
| |
| --background-color-7: oklch(0.55 0.0278 277.52);
| |
| --background-color-8: oklch(0.60 0.0278 277.52);
| |
| --background-color-9: oklch(0.65 0.0278 277.52);
| |
| --background-color-10: oklch(0.70 0.0278 277.52);
| |
| }
| |
| }
| |
|
| |
| /* For [[Module:Mbox]] */
| |
| .mbox {
| |
| --type-important: 185, 102, 102;
| |
| --type-moderate: 228, 159, 109;
| |
| --type-minor: 231, 202, 95;
| |
|
| |
| --stub: 235, 220, 150; /* softer warm yellow */
| |
| --cbt: 122, 160, 145; /* muted green-teal */
| |
| --mild: 225, 155, 130; /* gentle coral */
| |
| --removed: 160, 85, 105; /* dusty rose-wine */
| |
| --cleanup: 185, 105, 115; /* muted raspberry */
| |
| --construct: 235, 190, 145; /* peachy tan */
| |
| --upcoming: 150, 135, 175; /* soft lavender purple */
| |
| --unofficialtl: 115, 210, 205; /* calm aqua */
| |
| --lua: 135, 150, 220; /* muted periwinkle */
| |
| --css: 125, 160, 230; /* softened sky blue */
| |
| --js: 245, 230, 140; /* pastel golden yellow */
| |
| --sandbox: 185, 215, 205; /* pale misty mint */
| |
| --names: 190, 225, 225; /* very light cyan tint */
| |
| --changehistory: 135, 155, 200; /* softened steel blue */
| |
| --opacity: 0.15;
| |
| }
| |
|
| |
| /*=======*
| |
| | FONTS |
| |
| *=======*/
| |
| /* Petit Planet font */
| |
| @font-face {
| |
| font-family: 'PetitPlanet';
| |
| font-style: normal;
| |
| font-weight: normal;
| |
| src: url('https://petitplanet.wiki/images/a/af/Petit_Planet_Font_Light.woff2') format('woff2');
| |
| font-display: swap;
| |
| }
| |
|
| |
| /* Body font */
| |
| body {
| |
| font-family: 'Inter', sans-serif;
| |
| font-optical-sizing: auto;
| |
| }
| |
|
| |
| /* Headings & page titles */
| |
| h1,
| |
| h2,
| |
| h3,
| |
| .mw-page-title-main,
| |
| .vector-sticky-header-context-bar-primary {
| |
| font-family: 'PetitPlanet', 'Montserrat', sans-serif !important;
| |
| font-weight: 500, 700;
| |
| }
| |
|
| |
| *[lang='ja'],
| |
| *[lang='ko'],
| |
| *[lang='ru'],
| |
| *[lang='th'],
| |
| *[lang="vi"],
| |
| *[lang='yue'],
| |
| *[lang='zh'],
| |
| *[lang='zh-Hans'],
| |
| *[lang='zh-Hant'] {
| |
| h1,
| |
| h2,
| |
| h3,
| |
| .mw-page-title-main,
| |
| .vector-sticky-header-context-bar-primary {
| |
| font-family: 'Montserrat', sans-serif !important;
| |
| font-weight: 900 !important;
| |
| }
| |
| }
| |
|
| |
| /* Language-specific fallbacks */
| |
| *[lang='ae'] {
| |
| font-family: 'Noto Sans Avestan', sans-serif !important;
| |
| }
| |
|
| |
| *[lang='ain'],
| |
| *[lang='ja'],
| |
| *[lang='ojp'] {
| |
| font-family: 'Noto Sans JP', sans-serif !important;
| |
| }
| |
|
| |
| *[lang='ar'],
| |
| *[lang='fa'] {
| |
| font-family: 'El Messiri', sans-serif !important;
| |
| }
| |
|
| |
| *[lang='he'] {
| |
| font-family: 'Noto Sans Hebrew', sans-serif !important;
| |
| }
| |
|
| |
| *[lang='ko'] {
| |
| font-family: 'Noto Sans KR', sans-serif !important;
| |
| }
| |
|
| |
| *[lang='th'] {
| |
| font-family: 'Noto Sans', 'Noto Sans Thai', sans-serif !important;
| |
| }
| |
|
| |
| *[lang='yue'],
| |
| *[lang='zh'],
| |
| *[lang='zh-Hans'] {
| |
| font-family: 'Noto Sans SC', sans-serif !important;
| |
| }
| |
|
| |
| *[lang='zh-Hant'] {
| |
| font-family: 'Noto Sans TC', sans-serif !important;
| |
| }
| |
|
| |
| /*============*
| |
| | FORMATTING |
| |
| *============*/
| |
| /* For [[Module:Formatting]] */
| |
| code,
| |
| .custom-formatting-code:not(.custom-formatting-plain) {
| |
| font-family: monospace;
| |
| line-height: 100%;
| |
| background-color: var(--background-color-neutral-subtle);
| |
| border: 1px solid var(--border-color-muted);
| |
| border-radius: 5px;
| |
| padding: 1px 4px;
| |
| }
| |
|
| |
| .custom-formatting-code:not(.custom-formatting-plain) {
| |
| margin: 0 3px;
| |
| }
| |
|
| |
| .custom-formatting-code { display: inline-block; }
| |
| .custom-formatting-code.code-block-table { display: table; }
| |
|
| |
| span.variable { opacity: 0.65; }
| |
|
| |
| span.variable::after {
| |
| opacity: 0.65;
| |
| content: ">";
| |
| }
| |
|
| |
| span.variable::before {
| |
| opacity: 0.65;
| |
| content: "<";
| |
| }
| |
|
| |
| .custom-formatting-nested { display: none; }
| |
| .custom-formatting-resulting { display: inline; }
| |
| .custom-formatting-code .custom-formatting-nested { display: inline-block; }
| |
| .custom-formatting-code .custom-formatting-resulting { display: none; }
| |
|
| |
| /* For [[MediaWiki:Edittools]] */
| |
| .edittools div.mw-collapsible {
| |
| padding: 0;
| |
| display: inline;
| |
| }
| |
|
| |
| .edittools .mw-collapsible-toggle-default::before,
| |
| .edittools .mw-collapsible-toggle-default::after {
| |
| content:'' !important;
| |
| }
| |
|
| |
| .edittools .mw-collapsible-toggle-default span {
| |
| background-color: var(--background-color-4);
| |
| padding: 0 7px;
| |
| border-radius: 10px;
| |
| margin-left: 5px;
| |
| color: var(--color-base);
| |
|
| |
| &:hover {
| |
| color: var(--color-base);
| |
| text-decoration: none;
| |
| background-color: var(--background-color-5);
| |
| }
| |
| }
| |
|
| |
| .edittools .custom-formatting-code {
| |
| line-height: 125% !important;
| |
| margin: 3px !important;
| |
| background-color: var(--background-color-2b) !important;
| |
| border-color: transparent !important;
| |
| min-width: 1.5em;
| |
| text-align: center;
| |
|
| |
| &:hover {
| |
| border-color: var(--color-progressive) !important;
| |
| }
| |
| }
| |
|
| |
| .wikitable.edittools > tr:nth-child(even) > td,
| |
| .wikitable.edittools > * > tr:nth-child(even) > td {
| |
| background: var(--background-color-1);
| |
| }
| |
|
| |
| .wikitable.edittools > tr > td a,
| |
| .wikitable.edittools > * > tr > td a {
| |
| min-width: 1.5em;
| |
| }
| |
|
| |
|
| .wikitable.edittools > tr > td a:hover, | | @import url("/index.php?title=MediaWiki:Description.css&action=raw&ctype=text/css"); |
| .wikitable.edittools > * > tr > td a:hover { | | @import url("/index.php?title=MediaWiki:Edittools.css&action=raw&ctype=text/css"); |
| color: var(--color-progressive);
| | @import url("/index.php?title=MediaWiki:Fonts.css&action=raw&ctype=text/css"); |
| text-decoration: none;
| | @import url("/index.php?title=MediaWiki:Formatting.css&action=raw&ctype=text/css"); |
| }
| | @import url("/index.php?title=MediaWiki:Hatnote.css&action=raw&ctype=text/css"); |
| | @import url("/index.php?title=MediaWiki:InputText.css&action=raw&ctype=text/css"); |
| | @import url("/index.php?title=MediaWiki:Life Guide.css&action=raw&ctype=text/css"); |
| | @import url("/index.php?title=MediaWiki:References.css&action=raw&ctype=text/css"); |
| | @import url("/index.php?title=MediaWiki:Tables.css&action=raw&ctype=text/css"); |
| | @import url("/index.php?title=MediaWiki:TemplateData.css&action=raw&ctype=text/css"); |
| | @import url("/index.php?title=MediaWiki:Variables.css&action=raw&ctype=text/css"); |
| | @import url("/index.php?title=MediaWiki:Keys.css&action=raw&ctype=text/css"); |
|
| |
|
| .wikitable.edittools > tr:nth-child(even) > th,
| |
| .wikitable.edittools > * > tr:nth-child(even) > th {
| |
| background: var(--background-color-2);
| |
| }
| |
|
| |
|
| /*==============* | | /*==============* |
| Line 327: |
Line 30: |
| /* Background */ | | /* Background */ |
| body { | | body { |
| background: var(--background-image) no-repeat fixed center center / cover !important; | | background-color: var(--background-color-0) !important; |
| } | | } |
|
| |
|
| /* Wordmark */ | | /* Wordmark */ |
| .mw-logo-wordmark {
| |
| width: initial !important;
| |
| }
| |
|
| |
| .skin-theme-clientpref-day .mp-header-wordmark img { | | .skin-theme-clientpref-day .mp-header-wordmark img { |
| filter: invert(1) hue-rotate(180deg); | | filter: invert(1) hue-rotate(180deg); |
| Line 346: |
Line 45: |
| } | | } |
|
| |
|
| /* Tables */ | | /* Links */ |
| .wikitable {
| | a:where(:not([role='button'])), |
| display: block;
| | a:where(:not([role='button'])):hover, |
| max-width: max-content;
| | a:where(:not([role='button'])):visited, |
| overflow-x: auto;
| | a:where(:not([role='button'])):visited:hover, |
| overflow-y: hidden;
| | a:where(:not([role='button'])):visited:active, |
| background: var(--background-color-0b);
| | a:where(:not([role='button'])):active { |
| border-collapse: separate;
| | color: var(--color-progressive); |
| border-spacing: 4px;
| |
| border-radius: 10px;
| |
| border-width: 0;
| |
| padding: 2px; | |
| } | | } |
|
| |
|
| .wikitable > tr > th, | | a:where(.new:not([role='button'])), |
| .wikitable > tr > td, | | a:where(.new:not([role='button'])):hover, |
| .wikitable > * > tr > th, | | a:where(.new:not([role='button'])):visited, |
| .wikitable > * > tr > td, | | a:where(.new:not([role='button'])):visited:hover, |
| .wikitable caption { | | a:where(.new:not([role='button'])):visited:active, |
| border-radius: 8px; | | a:where(.new:not([role='button'])):active { |
| border-color: transparent;
| | color: var(--color-destructive); |
| padding: 0.25em 0.5em;
| |
| } | | } |
|
| |
|
| .wikitable > tr > th,
| | /* Popups */ |
| .wikitable > * > tr > th { | | .mwe-popups { |
| text-align: left; | | border-radius: 10px; |
| background: var(--background-color-3); | | overflow: hidden; |
| | box-shadow: 0 30px 90px -20px var(--background-color-1b), 0 0 0 1px var(--background-color-1b); |
| } | | } |
|
| |
|
| .wikitable--stripe > tr:nth-child(even) > th, | | .mwe-popups-container { |
| .wikitable--stripe > * > tr:nth-child(even) > th {
| | background: var(--background-color-0b) !important; |
| background: var(--background-color-2b); | | border-radius: 10px; |
| | overflow: hidden; |
| } | | } |
|
| |
|
| .wikitable > tr > td, | | .mwe-popups .mwe-popups-extract[dir='ltr']::after { |
| .wikitable > * > tr > td, | | right: 0; |
| .wikitable.sortable > tr:nth-child(odd) > td,
| | background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--background-color-0b) 50%) !important; |
| .wikitable.sortable > * > tr:nth-child(odd) > td {
| |
| background-color: var(--background-color-1b); | |
| } | | } |
|
| |
|
| .wikitable--stripe > tr:nth-child(odd) > td,
| | /*===============* |
| .wikitable--stripe > * > tr:nth-child(odd) > td,
| | | MISCELLANEOUS | |
| .wikitable.sortable > tr > td,
| | *===============*/ |
| .wikitable.sortable > * > tr > td { | | /* Pipe delimiter */ |
| background-color: var(--background-color-2b); | | .mw-content-ltr ul.pipe_delimit { |
| | margin: 0px; |
| } | | } |
|
| |
|
| .wikitable caption { | | .mw-content-ltr ul.pipe_delimit li { |
| background: var(--background-color-3);
| | display:inline; |
| margin: 4px 4px 0 4px; | |
| } | | } |
|
| |
|
| .mw-collapsible-toggle-default::before, | | .mw-content-ltr ul.pipe_delimit li + li::before { |
| .mw-collapsible-toggle-default::after {
| | content: " | "; |
| display: none; | |
| } | | } |
|
| |
|
| .mw-collapsible-toggle-default .mw-collapsible-text { | | /* SyntaxHighlight copy button */ |
| background-color: var(--color-accent); | | .mw-highlight-copy--bound button { |
| | top: -0.5rem; |
| | right: 0; |
| | padding: 0.25rem 0.35rem; |
| | border-radius: 10px; |
| | background: var(--color-accent); |
| | border-color: var(--background-color-1); |
| color: var(--color-accent-text); | | color: var(--color-accent-text); |
| border-radius: 6px;
| |
| padding: 0.125em 0.375em;
| |
| margin-left: 0.5em;
| |
| } | | } |
|
| |
|
| .mw-collapsible-toggle-default .mw-collapsible-text:hover { | | .mw-highlight-copy--bound button:hover, |
| color: var(--color-accent-text); | | .mw-highlight-copy--bound button:active { |
| | background: var(--background-color-2); |
| | border-color: var(--color-progressive); |
| | color: var(--color-progressive); |
| } | | } |
|
| |
|
| /* Template data */ | | /* Additional inverts and filters */ |
| .mw-templatedata-doc-params caption { | | /* Default MediaWiki invert classes: .skin-invert and .skin-invert-image */ |
| background: var(--background-color-3); | | .skin-theme-clientpref-day .day-invert-image, |
| | .skin-theme-clientpref-day .light-invert-image { |
| | filter: invert(65%) hue-rotate(180deg); |
| } | | } |
|
| |
|
| .template-documentation-content > section > table > caption > p { | | .skin-theme-clientpref-night .night-invert-image, |
| margin: 12px; | | .skin-theme-clientpref-night .dark-invert-image { |
| | filter: invert(85%) hue-rotate(180deg); |
| } | | } |
|
| |
|
| .mw-templatedata-doc-params .mw-editsection-bracket { | | @media screen and (prefers-color-scheme: dark) { |
| display: none;
| | .skin-theme-clientpref-os .night-invert-image, |
| | .skin-theme-clientpref-os .dark-invert-image { |
| | filter: invert(85%) hue-rotate(180deg); |
| | } |
| } | | } |
|
| |
|
| .mw-templatedata-doc-params .mw-templatedata-caption .mw-editsection-like > a { | | .filter-opacity-60 { |
| background: var(--background-color-4); | | filter: opacity(60%); |
| color: var(--color-base);
| |
| padding: 5px 10px;
| |
| border-radius: 20px;
| |
|
| |
| &:hover {
| |
| text-decoration: none;
| |
| background: var(--background-color-5);
| |
| }
| |
| } | | } |
|
| |
|
| .mw-templatedata-doc-param-alias {
| |
| color: var(--color-base);
| |
| opacity: 0.65;
| |
| }
| |
|
| |
|
| /* Hatnote */ | | /* ========================================================== |
| .hatnote {
| | * Generic Pill |
| border-left: 3px solid var(--color-accent);
| | * ========================================================== */ |
| padding: 3px 10px;
| |
| border-radius: 3px;
| |
| background: linear-gradient(145deg, rgba(var(--color-accent--rgb),0.15) 0%, rgba(var(--color-accent--rgb),0) 100%);
| |
| margin: 5px 0;
| |
| }
| |
|
| |
|
| /*===========*
| | .pill, ul.pill-list > li { |
| | MAIN PAGE |
| | display: inline-flex; |
| *===========*/
| | align-items: center; |
| .mp-header-container { | | padding: 0.25em 0.75em; |
| background-color: var(--background-color-1); | | border-radius: 10px; |
| border-radius: 20px; | | background: var(--background-color-2); |
| padding: 1rem;
| | transition: |
| margin-bottom: 1rem;
| | background-color 0.15s ease, |
| | box-shadow 0.15s ease; |
| } | | } |
|
| |
|
| /*===============*
| | ul.pill-list li { |
| | MISCELLANEOUS |
| | margin-right: 4px; |
| *===============*/
| | margin-bottom: 4px; |
| /* Pipe delimiter */
| |
| .mw-content-ltr ul.pipe_delimit { | |
| margin: 0px; | |
| } | | } |
|
| |
|
| .mw-content-ltr ul.pipe_delimit li { | | .pill:hover, |
| display:inline; | | .pill:focus-visible, |
| | ul.pill-list > li:hover, |
| | ul.pill-list > li:focus-within { |
| | background: var(--background-color-2); |
| | box-shadow: 0 0 0 1px var(--background-color-4); |
| } | | } |
|
| |
|
| .mw-content-ltr ul.pipe_delimit li + li::before { | | /* remove after from pill in navbox */ |
| content: " | ";
| | .ranger-list .pill-list li::after { |
| | display: none; |
| } | | } |
|
| |
|
| /*========*
| |
| | STYLES |
| |
| *========*/
| |
| /* For [[Template:Quote/styles.css]] */
| |
| blockquote.pull-quote:has(.pull-quote__source) {
| |
| margin-top: 25px !important;
| |
| }
| |
|
| |
|
| .pull-quote__source { | | /* Cite and Verify */ |
| width: fit-content;
| | .cite-template, .verify { |
| | background-color: color-mix(var(--background-color-4) 50%, transparent 50%); |
| | padding: 0 3px; |
| | font-size: 10px; |
| | border-radius: 3px; |
| | color: var(--background-color-10); |
| } | | } |
