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
Additional fix for noarticletext preload table
Moved background image to only appear in the header. Fixed (hopefully all) menu and icon overflow issues on smaller window widths
 
(8 intermediate revisions by the same user not shown)
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 464: Line 494:
}
}


/*===============*
/*=========*
  | STICKY HEADER |
  | SIDEBAR |
  *===============*/
  *=========*/
.vector-header-container .vector-sticky-header {
/* Hide print and permalink links */
     background-color: var(--background-color-3);
#t-print,
     border: 0;
#t-permalink {
    display: none;
}
 
/* Format Wiki Discord link */
/* Adapted from Runescape Wiki */
#n-Wiki-Discord a {
    color: white;
    font-size: 12px;
    width: fit-content;
    border-radius: 6px;
     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%);
    display: block;
    position: relative;
    padding: 4px 7px 5px calc(17px + 10px * 2);
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    transition: 0.2s ease;
}
 
#n-Wiki-Discord a::before {
    content: '';
    margin-left: 1px;
}
 
#n-Wiki-Discord a::after {
    content: '';
    background: url(https://runescape.wiki/images/Discord_logo_icon.svg?62c64) no-repeat;
    background-size: 17px 13px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
     position: absolute;
    top: 5px;
    left: 7px;
    width: 17px;
    height: 13px;
}
}


.vector-sticky-header-context-bar {
#n-Wiki-Discord a:hover {
     border-color: var(--color-base);
     text-decoration: none;
    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%);
}
}


/*=========*
| SIDEBAR |
*=========*/
/* Hide the Vector-2022 "switch back" link in sidebar */
/* Hide the Vector-2022 "switch back" link in sidebar */
.vector-main-menu-action-opt-out {
.vector-main-menu-action-opt-out {
Line 584: 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 601: Line 672:
  | CONTENT BODY |
  | CONTENT BODY |
  *==============*/
  *==============*/
/* Tables */
/* Ensure tables overflow while also retaining border-radius styling */
body:not(.ns-special) .wikitable {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 10px;
    clip-path: inset(0 round 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 {
    display: revert;
    max-width: fit-content;
   
    .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"