Jump to content

MediaWiki:Common.css: Difference between revisions

From Oreynia
← Older editNewer edit →
Maintenance script (talk | contribs)
177 edits
Live IDE sync
Live IDE sync
Tag: Manual revert
Line 361: Line 361:
}
}


.mw-parser-output a.external::after {
.mw-parser-output a.external {
     /* This filter targets the default blue and shifts it to cyan */
     /* This filter targets the default blue and shifts it to cyan */
     filter: hue-rotate(-45deg) brightness(1.5) saturate(1.2);
     filter: hue-rotate(-45deg) brightness(1.5) saturate(1.2);
}
}

Revision as of 17:35, 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 */

/* 2. Add our custom cyan icon */
.mw-parser-output a.external::after {
    content: "";
    display: inline-block;

    width: 0.857em;
    height: 0.857em;
    margin-left: 0.25em; /* Gives a little breathing room between the text and icon */
    vertical-align: baseline;
    
    /* Your desired color */
    background-color: cyan !important; 
    
    /* Use the Data URI of the icon as the mask */
    -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;
}

.mw-parser-output a.external {
    /* This filter targets the default blue and shifts it to cyan */
    filter: hue-rotate(-45deg) brightness(1.5) saturate(1.2);
}
Retrieved from "https://oreynia.com/index.php?title=MediaWiki:Common.css&oldid=290"