Toggle search
Toggle menu
1K
1.1K
35
7.2K
The Petit Planet Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Vector-2022.css: Difference between revisions

MediaWiki interface page
More actions
Browse history interactively
← Older edit
Format link to Wiki Discord
Moved background image to only appear in the header. Fixed (hopefully all) menu and icon overflow issues on smaller window widths
 
(6 intermediate revisions by the same user not shown)
Line 11: Line 11:
     .skin-invert,
     .skin-invert,
     .notheme {
     .notheme {
         /* Colors */s
         /* Colors */
         --color-base: #5a4a3c;
         --color-base: #5a4a3c;
         --color-base-fixed: #5a4a3c;
         --color-base-fixed: #5a4a3c;
Line 88: Line 88:
         --background-color-tab-list-item-framed--hover: rgba(255,255,255,0.3);
         --background-color-tab-list-item-framed--hover: rgba(255,255,255,0.3);
         --background-color-tab-list-item-framed--active: rgba(255,255,255,0.65);
         --background-color-tab-list-item-framed--active: rgba(255,255,255,0.65);
        --background-color-header: linear-gradient(90deg,rgba(222, 185, 78, 1) 0%, rgba(222, 185, 78, 1) 100%);
         /* Opacity */
         /* Opacity */
         --opacity-icon-base: 0.87;
         --opacity-icon-base: 0.87;
Line 191: Line 192:
         --background-color-backdrop-light: rgba(0,0,0,0.65);
         --background-color-backdrop-light: rgba(0,0,0,0.65);
         --background-color-backdrop-dark: rgba(255,255,255,0.65);
         --background-color-backdrop-dark: rgba(255,255,255,0.65);
        --background-color-header: linear-gradient(90deg,rgba(18, 47, 65, 1) 0%, rgba(18, 47, 65, 1) 50%, rgba(18, 23, 53, 1) 51%, rgba(18, 23, 53, 1) 100%);
         /* Border colors */
         /* Border colors */
         --border-color-base: #424663;
         --border-color-base: #424663;
Line 268: Line 270:
         --background-color-backdrop-light: rgba(0,0,0,0.65);
         --background-color-backdrop-light: rgba(0,0,0,0.65);
         --background-color-backdrop-dark: rgba(255,255,255,0.65);
         --background-color-backdrop-dark: rgba(255,255,255,0.65);
        --background-color-header: linear-gradient(90deg,rgba(18, 47, 65, 1) 0%, rgba(18, 47, 65, 1) 50%, rgba(18, 23, 53, 1) 51%, rgba(18, 23, 53, 1) 100%);
         /* Border colors */
         /* Border colors */
         --border-color-base: #424663;
         --border-color-base: #424663;
Line 292: Line 295:
  | PAGE CONTAINER |
  | PAGE CONTAINER |
  *================*/
  *================*/
.mw-header {
    margin-top: 0.5rem;
    background-color: transparent !important;
}
.mw-page-container {
.mw-page-container {
     border-radius: 40px;
     border-radius: 40px;
     margin-top: 0.5rem;
     margin-top: 0.5rem;
}
@media screen and (min-width: 1680px) {
    .vector-feature-limited-width-clientpref-0,
    .vector-sticky-header  {
        margin-left: 2rem;
        margin-right: 2rem;
    }
}
@media screen and (max-width: 1680px) {
    .mw-page-container,
    .vector-sticky-header {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}
}


Line 327: Line 309:
/* Headings */
/* Headings */
.mw-body h1 {
.mw-body h1 {
     font-size: 48px;
     font-size: 2rem;
}
}


Line 365: Line 347:
  | HEADER |
  | HEADER |
  *========*/
  *========*/
.mw-header {
    margin-top: 0 !important;
    grid-template: auto / 17rem minmax(0,1fr);
    grid-template-areas: 'headerStart headerEnd';
}
.mw-header,
.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
    background: var(--background-image);
    background-origin: border-box;
    background-position: 100% 2%;
    background-size: cover;
}
.vector-header-container {
    background: var(--background-color-header);
}
.vector-header-container .vector-sticky-header {
    border: 0;
}
.vector-sticky-header-context-bar {
    border-color: var(--color-base);
}
@media screen and (max-width: 750px) {
    .vector-header-start,
    .vector-header-end {
        width: 100%;
    }
    .vector-header {
        flex-flow: column;
    }
}
/*=================*
| HEADER CONTENTS |
*=================*/
/* Search bar */
/* Search bar */
#p-search {
@media screen and (min-width: 1120px) {
    display: flex;
    #p-search {
    justify-content: center;
        display: flex;
    align-items: center;
        justify-content: center;
        align-items: center
    }
}
}


Line 425: Line 449:
             border-color: var(--color-progressive);
             border-color: var(--color-progressive);
         }
         }
    }
}
@media screen and (max-width: 850px) {
    #ca-uls {
        display: none;
     }
     }
}
}
Line 462: Line 492:
         border-color: var(--color-progressive);
         border-color: var(--color-progressive);
     }
     }
}
/*===============*
| STICKY HEADER |
*===============*/
.vector-header-container .vector-sticky-header {
    background-color: var(--background-color-3);
    border: 0;
}
.vector-sticky-header-context-bar {
    border-color: var(--color-base);
}
}


Line 488: Line 506:
/* Adapted from Runescape Wiki */
/* Adapted from Runescape Wiki */
#n-Wiki-Discord a {
#n-Wiki-Discord a {
     color: white !important;
     color: white;
     font-size: 12px;
     font-size: 12px;
     font-weight: bold;
     width: fit-content;
     border-radius: 5px;
     border-radius: 6px;
     border: 1px solid #4b56d0;
     background: linear-gradient(to right, oklch(0.55 0.21 274) 0%, oklch(0.55 0.21 274) 27%, oklch(0.62 0.21 274) 27%, oklch(0.62 0.21 274) 100%);
    background-color: #5865F2;
     display: block;
     display: block;
     position: relative;
     position: relative;
     padding: 4px 0 5px calc(17px + 5.5px * 2);
     padding: 4px 7px 5px calc(17px + 10px * 2);
     box-shadow: 0 2px 3px rgba(0,0,0,0.1);
     box-shadow: 0 2px 3px rgba(0,0,0,0.1);
     transition: 0.2s ease;
     transition: 0.2s ease;
Line 503: Line 520:
#n-Wiki-Discord a::before {
#n-Wiki-Discord a::before {
     content: '';
     content: '';
    font-weight: normal;
     margin-left: 1px;
    opacity: 0.85;
     margin-right: 5px;
}
}


Line 522: Line 537:
#n-Wiki-Discord a:hover {
#n-Wiki-Discord a:hover {
     text-decoration: none;
     text-decoration: none;
     background-color: #525ee0;
     background: linear-gradient(to right, oklch(0.51 0.21 274) 0%, oklch(0.51 0.21 274) 27%, oklch(0.58 0.21 274) 27%, oklch(0.58 0.21 274) 100%);
}
}


Line 630: Line 645:
         background-color: var(--color-accent) !important;
         background-color: var(--color-accent) !important;
         color: var(--color-accent-text) !important;
         color: var(--color-accent-text) !important;
    }
}
#left-navigation {
    min-width: 186px;
}
@media screen and (max-width: 685px) {
    #ca-history {
        display: none;
     }
     }
}
}
Line 647: Line 672:
  | CONTENT BODY |
  | CONTENT BODY |
  *==============*/
  *==============*/
/* Tables */
/* Ensure tables overflow while also retaining border-radius styling */
body:not(.ns-special) .wikitable {
    display: block;
    max-width: max-content;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    border: none !important;
    border-collapse: collapse;
    border-spacing: 0 !important;
    border-radius: 10px;
       
    th {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 0.75em;
    }
    td {
        padding: 0.25em 0.75em;
    }
}
.noarticletext.mw-content-ltr .wikitable,
.mw-newarticletext.plainlinks .wikitable {
    .mw-collapsible-toggle::before {
        margin-left: 0.5em;
    }
   
    .mw-collapsible-toggle::after {
        margin-right: 0.25em;
    }
}
/* Edit section buttons */
/* Edit section buttons */
.mw-editsection {
.mw-editsection {
Retrieved from "https://petitplanet.wiki/MediaWiki:Vector-2022.css"