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
ReisuDesign (talk | contribs)
confirmed, Interface administrators, moderator
4,145 edits
No edit summary
ReisuDesign (talk | contribs)
confirmed, Interface administrators, moderator
4,145 edits
No edit summary
 
(78 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=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:wght@200..700&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:Vector-2022.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:Description.css&action=raw&ctype=text/css");
@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");


/* General Styling */


code {
/*==============*
    border: none;
| CONTENT BODY |
     background-color: var(--theme-color-3);
*==============*/
    border-radius: 5px;
/* Background */
    padding: 2px 5px;
body {
     background-color: var(--background-color-0) !important;
}
 
/* Wordmark */
.skin-theme-clientpref-day .mp-header-wordmark img {
  filter: invert(1) hue-rotate(180deg);
}
}


/* Cursor */
/* Hide mobile-only things on desktop (overridden in [[MediaWiki:Citizen.css]]) */
* {
.mobileHide,
     cursor: url("https://petitplanet.wiki/images/4/4c/Cursor.png") 0 0, default !important;
.mobile-only,
.no-desktop {
     display: none;
}
}


*::selection {
/* Links */
    background-color: var(--theme-accent-color);
a:where(:not([role='button'])),
    border-radius: 5px;
a:where(:not([role='button'])):hover,
     color: var(--page-background-color)
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);
}
}


body {
a:where(.new:not([role='button'])),
     background: var(--background-image) no-repeat fixed center center / cover !important;
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);
}
}


body , h1, h2, h3, h4 {
/* Popups */
     color: var(--page-text-color);
.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);
}
}


.mw-page-container {
.mwe-popups-container {
     background-color: var(--page-background-color) !important;
     background: var(--background-color-0b) !important;
     border-radius: 40px;
     border-radius: 10px;
     margin-top:20px;
     overflow: hidden;
}
}


.mw-header {
.mwe-popups .mwe-popups-extract[dir='ltr']::after {
     background-color: transparent !important;
    right: 0;
     background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--background-color-0b) 50%) !important;
}
}


a, a:visited , .vector-menu-tabs .mw-list-item a:visited , .vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited, .vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited {
/*===============*
     color: var(--theme-link-color);
| MISCELLANEOUS |
*===============*/
/* Pipe delimiter */
.mw-content-ltr ul.pipe_delimit {
     margin: 0px;
}
}


.cdx-radio__input:enabled:checked+.cdx-radio__icon {
.mw-content-ltr ul.pipe_delimit li {
     border-color: var(--theme-link-color);
     display:inline;
}
}


.cdx-radio__icon {
.mw-content-ltr ul.pipe_delimit li + li::before {
     background-color: var(--theme-color-2);
     content: " | ";
}
}


pre {
/* SyntaxHighlight copy button */
.mw-highlight-copy--bound button {
    top: -0.5rem;
    right: 0;
    padding: 0.25rem 0.35rem;
     border-radius: 10px;
     border-radius: 10px;
     border: none;
     background: var(--color-accent);
     background-color: var(--theme-color-1);
     border-color: var(--background-color-1);
     color: var(--theme-color-10)
     color: var(--color-accent-text);
}
}


#p-search {
.mw-highlight-copy--bound button:hover,
  display: flex;
.mw-highlight-copy--bound button:active {
  justify-content: center;
    background: var(--background-color-2);
  align-items: center;
    border-color: var(--color-progressive);
    color: var(--color-progressive);
}
}


.cdx-search-input--has-end-button {
/* Additional inverts and filters */
    background-color: transparent !important;
/* Default MediaWiki invert classes: .skin-invert and .skin-invert-image */
     border: none !important;
.skin-theme-clientpref-day .day-invert-image,
.skin-theme-clientpref-day .light-invert-image {
     filter: invert(65%) hue-rotate(180deg);
}
}


.cdx-text-input__input {
.skin-theme-clientpref-night .night-invert-image,
    background-color: var(--page-background-color) !important;
.skin-theme-clientpref-night .dark-invert-image {
    border-radius: 20px !important;
     filter: invert(85%) hue-rotate(180deg);
     border: none;
    margin-right: 20px !important;
}
}


.cdx-search-input__input-wrapper {
@media screen and (prefers-color-scheme: dark) {
     margin-right: 10px !important;  
    .skin-theme-clientpref-os .night-invert-image,
     .skin-theme-clientpref-os .dark-invert-image {
        filter: invert(85%) hue-rotate(180deg);
    }
}
}


.filter-opacity-60 {
    filter: opacity(60%);
}


.cdx-typeahead-search .cdx-button:enabled, .cdx-typeahead-search .cdx-button.cdx-button--fake-button--enabled {
 
     background-color: #FFED76 !important;
/* ==========================================================
     color: var(--page-background-color);
* Generic Pill
     font-family: 'Quicksand' !important;
* ========================================================== */
    border: none;
 
    border-radius: 20px;
.pill, ul.pill-list > li {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.75em;
     border-radius: 10px;
     background: var(--background-color-2);
     transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}
}


.skin-theme-clientpref-day .cdx-typeahead-search .cdx-button:enabled, .skin-theme-clientpref-day .cdx-typeahead-search .cdx-button.cdx-button--fake-button--enabled {
ul.pill-list li {
     color: var(--page-text-color);
    margin-right: 4px;
     margin-bottom: 4px;
}
}


#ca-uls span {
.pill:hover,
     color: #fefdde !important;
.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);
}
}


#pt-userpage-2 a:not(.mw-selflink) {
/* remove after from pill in navbox */
    color: var(--theme-accent-color) !important;
.ranger-list .pill-list li::after {
    font-weight: 700;
display: none;
    margin-right: 5px;
}
}


.catlinks {
    border-radius: 10px;
    border: none;
    background-color: var(--theme-color-1);
    padding: 10px 20px;
}


.mw-header {
/* Cite and Verify */
    top: 10px;
.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);
}
}
Retrieved from "https://petitplanet.wiki/MediaWiki:Common.css"