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
Line 334: Line 334:
/* #endregion */
/* #endregion */


/* 1. Remove the default blue icon from the link itself */
.mw-parser-output a.external {
    background-image: none !important;
    padding-right: 0 !important; /* Removes the invisible space left by the old icon */
}
/* 2. Add our custom cyan icon */
.mw-parser-output a.external::after {
.mw-parser-output a.external::after {
     content: "";
     content: "";
Line 340: Line 347:
     width: 0.857em;
     width: 0.857em;
     height: 0.857em;
     height: 0.857em;
     margin-left: 0.143em;
     margin-left: 0.25em; /* Gives a little breathing room between the text and icon */
     vertical-align: baseline;
     vertical-align: baseline;
      
      
Line 346: Line 353:
     background-color: cyan !important;  
     background-color: cyan !important;  
      
      
    /* Remove the default mediawiki icon */
     /* Use the Data URI of the icon as the mask */
    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");
     -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");
     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");

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

/* 1. Remove the default blue icon from the link itself */
.mw-parser-output a.external {
    background-image: none !important;
    padding-right: 0 !important; /* Removes the invisible space left by the old icon */
}

/* 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;
}
Retrieved from "https://oreynia.com/index.php?title=MediaWiki:Common.css&oldid=287"