MediaWiki:Common.css: Difference between revisions

Revision as of 17:53, 9 April 2026

/* ==========================================================================
   OREYNIA WIKI MASTER STYLESHEET
   
   TABLE OF CONTENTS:
   1. Custom Fonts (Font-Faces)
   2. CSS Variables (The Control Panel)
   3. Global Typography (Fonts, Links, Paragraphs)
   4. Main Layout (Backgrounds, Headers, Sidebars)
   5. Wiki Components (Infoboxes, Tables, Quote Blocks)
   6. Utility Classes (Hidden elements, alignments)
   7. Special (External link icons, etc.)
   8. Media Queries (Responsive adjustments)
   ========================================================================== */

/* #region 1. CUSTOM FONTS */

@font-face {
    font-family: OreyniaTitleScript;
    src: url('/assets/fonts/oreynia-titlefont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* #endregion */

/* #region 2. 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: lightcyan;
    --oreynia-color-option-selected: cyan;

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

/* #endregion */

/* #region 3. GLOBAL TYPOGRAPHY */

p {
    color: var(--oreynia-color-primary);
    font-family: OreyniaTitleScript, sans-serif !important;
}

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);
    font-family: OreyniaTitleScript, sans-serif !important;
}

/* #endregion */

/* #region 4. 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;
}

.mw-page-container-inner {
    /* Column 1 (Left TOC): Takes only as much space as it needs
       Column 2 (Center): Takes up all remaining free space (1fr)
       Column 3 (Right Tools): Takes only as much space as it needs 
    */
    grid-template-columns: min-content minmax(0, 1fr) min-content !important;
}

/* #endregion */

/* #region 5. WIKI COMPONENTS */

.mw-logo-wordmark{
  color: white !important;
  font-size:x-large !important;
}

.vector-dropdown .vector-dropdown-content
{
    top: 150% !important;
}

.vector-main-menu-container {
  margin: 0 !important;
}

.vector-dropdown-content {
    border-radius: 5px;
    background-color: var(--oreynia-background-color-primary) !important;
    padding: 16px;
    border: 2px solid var(--oreynia-color-primary);
}

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

.vector-pinned-container{ 
    border-radius: 5px;
    background-color: var(--oreynia-background-color-primary) !important;
    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;
}

.vector-page-toolbar li a {
    color: var(--oreynia-color-option) !important;
}

.vector-page-toolbar li a:visited {
    color: var(--oreynia-color-option) !important;
}

.vector-page-toolbar li a:hover {
    color: var(--oreynia-color-option) !important;
}

.vector-page-toolbar li a:focus{
    text-decoration: none;
    font-weight: bold;
}

.vector-page-toolbar li a.new{
    color: var(--oreynia-color-option) !important;
}

.cdx-label {
    color: var(--oreynia-color-primary) !important;
}

/* Visual Editor */
.ve-ce-branchNode p {
  color: black;
}

/* #endregion */

/* #region 6. UTILITY CLASSES */



/* #endregion */

/* #REGION 7. 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;
}

.oo-ui-labelWidget .oo-ui-inline-help
{
  color: var(--oreynia-color-primary) !important;
}

.oo-ui-popupWidget-popup p{
  color: var(--oreynia-color-secondary) !important;
}

/* #endregion */

/* #REGION 8. Media */

@media screen and (min-width: 1080px) {
    .mw-header .search-toggle {
        display: none !important;
    }

    .mw-header .vector-typeahead-search-container {
        display: block;
    }
}

/* #endregion */