MediaWiki:Common.css: Difference between revisions

Revision as of 17:31, 11 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-color-missing: red;
    --oreynia-color-highlight: cyan;

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

    --oreynia-color-link: #74c7ff;
    --oreynia-color-link-visited: #74c7ff;

    --oreynia-color-option: lightcyan;
    --oreynia-color-option-selected: var(--oreynia-color-highlight);

    
}

/* #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: none;
}

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;
}

dl {
  color: var(--oreynia-color-primary) !important;
}

li {
  color: var(--oreynia-color-primary) !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;
}

/* #endregion */

/* #region 5. WIKI COMPONENTS */

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

.mw-logo-wordmark::after {
    content: "™";
    font-size: 0.6em;
    vertical-align: top;
    position: relative;
    top: -0.2em;
    font-weight: normal;
    margin-left: 1px;
}

#p-vector-user-menu-userpage a.new
{
  color: var(--oreynia-color-option) !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);
    min-width: 200px;
}

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

.cdx-search-input--has-end-button
{
  border: none !important;
  background: transparent !important;
}

.cdx-text-input__input {
  border-radius: 10px !important;
}

.cdx-button {
  border-radius: 10px !important;
}

.cdx-search-input__end-button{
  margin-left: 5px !important;
} 

.vector-pinnable-header-label{
    color: var(--oreynia-color-primary) !important;
    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;
}


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

.mw-page-container-inner {
    display: block !important;
}

.vector-column-start,
.vector-column-end {
    display: none !important;
}

.mw-content-container,
.mw-body,
.vector-body,
.mw-body-content {
    display: block !important;
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.vector-pinnable-header-pin-button {
    display: none !important;
}

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

.mw-htmlform-ooui-wrapper 
{
  border-radius: 5px !important;
  border: 3px solid var(--oreynia-background-color-quaternary) !important;
  background-color: var(--oreynia-background-color-tertiary) !important;
  box-shadow: 2px 4px var(--oreynia-background-color-quaternary) !important;
}

.oo-ui-inputWidget-input {
  border-radius: 5px !important;
}

.oo-ui-fieldsetLayout-header .oo-ui-labelElement-label {
  font-size: 1.5rem !important;
  margin-bottom: 30px !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 */

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

    width: 0.857em;
    height: 0.857em;
    margin-left: 0.143em;
    vertical-align: baseline;
    
    /* Your desired color */
    background-color: cyan !important; 
    
    /* Remove the default mediawiki icon */
    background-image: none !important;
    
    /* Use the Data URI of the icon as the mask (no file paths needed!) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v1.5h3.4L3.1 8.8l1.1 1.1 6.3-6.3V7H12V1zM2 3v7h7V6.5h1.5v4c0 .8-.7 1.5-1.5 1.5H2c-.8 0-1.5-.7-1.5-1.5V3c0-.8.7-1.5 1.5-1.5h4v1.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v1.5h3.4L3.1 8.8l1.1 1.1 6.3-6.3V7H12V1zM2 3v7h7V6.5h1.5v4c0 .8-.7 1.5-1.5 1.5H2c-.8 0-1.5-.7-1.5-1.5V3c0-.8.7-1.5 1.5-1.5h4v1.5z'/%3E%3C/svg%3E");
    
    -webkit-mask-size: contain;
    mask-size: contain;
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    -webkit-mask-position: center;
    mask-position: center;
}