Jump to content
Toggle search
Toggle menu
  • 4K articles
  • 2.9K files
  • 559 users
  • 36.8K edits
The Petit Planet Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
If you make an edit, a temporary account will be created for you.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
Browse history interactively
← Older edit

ReisuDesign (talk | contribs)

3 user groups
4,145 edits
mNo edit summary
ReisuDesign (talk | contribs)
confirmed, Interface administrators, moderator
4,145 edits
No edit summary
 
(58 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be loaded for all skins.
* See [[MediaWiki:Vector-2022.css]] for CSS loaded for the desktop skin.
* See [[MediaWiki:Citizen.css]] for CSS loaded for the mobile skin.
*/
/*=========*
| IMPORTS |
*=========*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Avestan:wght@400;700&family=El+Messiri:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Avestan:wght@400;700&family=El+Messiri:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Text:[email protected]&display=swap');


/* Imports caching */
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Documentation.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:MessageBox.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Tables.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Quote.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Navbox.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Font.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Colors.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Change History.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Hatnote.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Infobox.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Card.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Recipe.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:CustomTabs.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Item.css&action=raw&ctype=text/css");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Tooltip.css&action=raw&ctype=text/css");


:root {
@import url("/index.php?title=MediaWiki:Description.css&action=raw&ctype=text/css");
--unknown-img: url("https://petitplanet.wiki/images/d/dd/Unknown.png");
@import url("/index.php?title=MediaWiki:Edittools.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:Fonts.css&action=raw&ctype=text/css");
@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");
 
 
/*==============*
| CONTENT BODY |
*==============*/
/* Background */
body {
    background-color: var(--background-color-0) !important;
}
 
/* Wordmark */
.skin-theme-clientpref-day .mp-header-wordmark img {
  filter: invert(1) hue-rotate(180deg);
}
 
/* Hide mobile-only things on desktop (overridden in [[MediaWiki:Citizen.css]]) */
.mobileHide,
.mobile-only,
.no-desktop {
    display: none;
}
 
/* Links */
a:where(:not([role='button'])),
a:where(:not([role='button'])):hover,
a:where(:not([role='button'])):visited,
a:where(:not([role='button'])):visited:hover,
a:where(:not([role='button'])):visited:active,
a:where(:not([role='button'])):active {
    color: var(--color-progressive);
}
 
a:where(.new:not([role='button'])),
a:where(.new:not([role='button'])):hover,
a:where(.new:not([role='button'])):visited,
a:where(.new:not([role='button'])):visited:hover,
a:where(.new:not([role='button'])):visited:active,
a:where(.new:not([role='button'])):active {
    color: var(--color-destructive);
}
 
/* Popups */
.mwe-popups {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 30px 90px -20px var(--background-color-1b), 0 0 0 1px var(--background-color-1b);
}
 
.mwe-popups-container {
    background: var(--background-color-0b) !important;
    border-radius: 10px;
    overflow: hidden;
}
 
.mwe-popups .mwe-popups-extract[dir='ltr']::after {
    right: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--background-color-0b) 50%) !important;
}
 
/*===============*
| MISCELLANEOUS |
*===============*/
/* Pipe delimiter */
.mw-content-ltr ul.pipe_delimit {
    margin: 0px;
}
}


body {
.mw-content-ltr ul.pipe_delimit li {
     background: var(--background-image) no-repeat fixed center center / cover !important;
    display:inline;
}
 
.mw-content-ltr ul.pipe_delimit li + li::before {
    content: " | ";
}
 
/* SyntaxHighlight copy button */
.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);
}
 
.mw-highlight-copy--bound button:hover,
.mw-highlight-copy--bound button:active {
     background: var(--background-color-2);
    border-color: var(--color-progressive);
    color: var(--color-progressive);
}
}


body, h1, h2, h3, h4 {
/* Additional inverts and filters */
     color: var(--page-text-color);
/* Default MediaWiki invert classes: .skin-invert and .skin-invert-image */
.skin-theme-clientpref-day .day-invert-image,
.skin-theme-clientpref-day .light-invert-image {
     filter: invert(65%) hue-rotate(180deg);
}
}


.mobileHide, .mobile-only, .no-desktop { display: none; }
.skin-theme-clientpref-night .night-invert-image,
.skin-theme-clientpref-night .dark-invert-image {
    filter: invert(85%) hue-rotate(180deg);
}


/* Main page header */
@media screen and (prefers-color-scheme: dark) {
.mp-header-container {
     .skin-theme-clientpref-os .night-invert-image,
     background-color: var(--theme-color-1);
     .skin-theme-clientpref-os .dark-invert-image {
    border-radius: 20px;
         filter: invert(85%) hue-rotate(180deg);
    padding: 1rem;
    margin: 2rem;
     .skin-theme-clientpref-night & {
         background-color: var(--theme-color-2);
     }
     }
}
}


.skin-theme-clientpref-day .mp-header-wordmark img {
.filter-opacity-60 {
     filter: invert(1);
     filter: opacity(60%);
}
}


/* Main page cards */
 
.mp-card-container {
/* ==========================================================
     display: flex;
* Generic Pill
    flex-wrap: wrap;
* ========================================================== */
 
.pill, ul.pill-list > li {
     display: inline-flex;
     align-items: center;
     align-items: center;
     justify-content: center;
     padding: 0.25em 0.75em;
     gap: 0.5rem
    border-radius: 10px;
     background: var(--background-color-2);
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}
}


.mp-card {
ul.pill-list li {
     display: flex;
     margin-right: 4px;
    flex-direction: column;
     margin-bottom: 4px;
    align-items: center;
    background-color: var(--theme-color-1);
    border-radius: 8px;
    width: 7rem;
     height: 8.5rem;
    .skin-theme-clientpref-night & {
        background-color: var(--theme-color-2);
    }
}
}


.mp-card-text {
.pill:hover,
    text-align: center;
.pill:focus-visible,
     background: var(--theme-accent-color);
ul.pill-list > li:hover,
     border-radius: 6px;
ul.pill-list > li:focus-within {
    padding: 0 0.25rem;
     background: var(--background-color-2);
    width: 5.5rem
     box-shadow: 0 0 0 1px var(--background-color-4);
}
}


.mp-card:hover {
/* remove after from pill in navbox */
    background: var(--theme-color-3);
.ranger-list .pill-list li::after {
    .mp-card-text {
display: none;
        background: var(--theme-accent-color)
    }
}
}


.mp-card-text a {
    color: var(--page-text-color);
    .skin-theme-clientpref-night & {
        color: var(--page-background-color)
    }
    &:hover {
        text-decoration: none
    }
}


.mp-card-icon img {
/* Cite and Verify */
    justify-self: center;
.cite-template, .verify {
    width: 6rem;
background-color: color-mix(var(--background-color-4) 50%, transparent 50%);
    height: 6rem
padding: 0 3px;
font-size: 10px;
border-radius: 3px;
color: var(--background-color-10);
}
}
Retrieved from "https://petitplanet.wiki/MediaWiki:Common.css"