MediaWiki:Common.css: Difference between revisions

Revision as of 22:34, 20 March 2026

/* ==========================================================================
   OREYNIA WIKI MASTER STYLESHEET
   
   TABLE OF CONTENTS:
   1. CSS Variables (The Control Panel)
   2. Global Typography (Fonts, Links, Paragraphs)
   3. Main Layout (Backgrounds, Headers, Sidebars)
   4. Wiki Components (Infoboxes, Tables, Quote Blocks)
   5. Utility Classes (Hidden elements, alignments)
   ========================================================================== */

/* #region 1. CSS VARIABLES */

:root {
    --oreynia-color-primary: white;
    --oreynia-color-secondary: black;

    --oreynia-background-color-primary: #59505f;
    --oreynia-background-color-secondary: #537895;
    --oreynia-background-color-tertiary: #BCC5CE;
    --oreynia-background-color-quaternary: #929EAD;

    --oreynia-color-link: magenta;
    --oreynia-color-link-visited: #ee00ee;

    --oreynia-color-option: magenta;
    --oreynia-color-option-selected: cyan;

    --oreynia-color-missing: red;
    --oreynia-color-highlight: cyan;
}

/* #endregion */

/* #region 2. GLOBAL TYPOGRAPHY */

p {
    color: var(--oreynia-color-primary);
}

a {
    color: var(--oreynia-color-link) !important;
    text-decoration: none;
}

a:focus{
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
    color: var(--oreynia-color-link) !important;
}

a:visited {
    color: var(--oreynia-color-link-visited) !important;
}

a.new {
    color: var(--oreynia-color-missing) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--oreynia-color-secondary);
}

li a {
    color: var(--oreynia-color-link) !important;
}

/* #endregion */

/* #region 3. MAIN LAYOUT */

html, body {
    min-height: 100vh !important;
    height: auto;
    margin: 0;
    background: linear-gradient(-180deg, var(--oreynia-background-color-tertiary) 0%, var(--oreynia-background-color-quaternary) 98%), radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%) !important;
    background-blend-mode: screen !important;
    background-attachment: fixed !important; 
    background-size: cover !important;
}

.mw-page-container
{
  min-height: 100vh;
  height: auto !important;
  background-image: linear-gradient(0deg, var(--oreynia-background-color-primary) 0%, var(--oreynia-background-color-secondary) 100%);
  padding-top: 4rem;
}

.mw-header {
  background-image: linear-gradient(30deg, var(--oreynia-background-color-primary) 0%, var(--oreynia-background-color-secondary) 100%);
  position: absolute;
}

/* #endregion */

/* #region 4. WIKI COMPONENTS */

.vector-sticky-pinned-container::after {
    display: none;
}

.vector-pinned-container{ 
    border-radius: 5px;
    background-color: var(--oreynia-background-color-primary);
    padding: 16px;
    border: 2px solid var(--oreynia-color-primary);
}

.vector-pinnable-header-label{
    font-size: medium !important;
}

.vector-menu-heading {
    color: var(--oreynia-color-primary) !important;
}

.vector-toc .vector-toc-list-item-active.vector-toc-level-1 > .vector-toc-link {
  color: var(--oreynia-color-option-selected) !important;
}

.vector-menu-tabs .mw-list-item.selected a {
    color: var(--oreynia-color-option-selected) !important;
}


/* #endregion */

/* #region 5. UTILITY CLASSES */



/* #endregion */

/* #REGION 6. SPECIAL */

.mw-parser-output a.external::after {
    content: "";
    display: inline-block;

    width: 0.857em;
    height: 0.857em;
    margin-left: 0.143em;
    
    vertical-align: baseline;
    
    background-color: var(--oreynia-color-highlight); 
    
    -webkit-mask-image: url(/1.45/skins/Vector/resources/skins.vector.styles/images/link-external-small-ltr-progressive.svg?fb64d);
    mask-image: url(/1.45/skins/Vector/resources/skins.vector.styles/images/link-external-small-ltr-progressive.svg?fb64d);
    
    -webkit-mask-size: contain;
    mask-size: contain;
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: -1px;
}

/* #endregion */