Jump to content

MediaWiki:Common.css

From Oreynia
Revision as of 17:31, 11 April 2026 by Maintenance script (talk | contribs) (Live IDE sync)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ==========================================================================
   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;
}
Retrieved from "https://oreynia.com/index.php?title=MediaWiki:Common.css&oldid=286"