Jump to content

MediaWiki:Common.css: Difference between revisions

From Continuum Universes Wiki
No edit summary
Tag: Reverted
No edit summary
 
(80 intermediate revisions by the same user not shown)
Line 1: Line 1:
:root, .skin-continuum, .notheme {
@import url('https://fonts.googleapis.com/css2?family=Bona+Nova:ital,wght@0,400;0,700;1,400&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Goudy+Bookletter+1911&family=Metamorphous&family=Modern+Antiqua&family=Uncial+Antiqua&display=swap');
    /* Base Colors */
.bona-nova-regular {
    --color-base: #001F3F; /* Navy */
  font-family: "Bona Nova", serif;
    --color-base-fixed: #001F3F;
  font-weight: 400;
    --color-base--hover: #002B5C; /* Slightly lighter navy */
  font-style: normal;
    --color-emphasized: #001933;
}
    --color-subtle: #54595d;
    --color-placeholder: #72777d;
    --color-disabled: #72777d;
    --color-inverted: #FFFFFF; /* White */
    --color-inverted-fixed: #FFFFFF;


    /* Progressive Colors */
.bona-nova-bold {
    --color-progressive: #FF851B; /* Bright Orange */
  font-family: "Bona Nova", serif;
    --color-progressive--hover: #FFB84D; /* Soft Peach */
  font-weight: 700;
    --color-progressive--active: #FF6300; /* Deep Orange */
  font-style: normal;
    --color-progressive--focus: #FF851B;
}


    /* Destructive/Warning/Success */
.bona-nova-regular-italic {
    --color-destructive: #FF4500; /* Burnt Orange */
  font-family: "Bona Nova", serif;
    --color-destructive--hover: #FF6347; /* Tomato */
  font-weight: 400;
    --color-destructive--active: #9F3526; /* Deep Burnt Orange */
  font-style: italic;
    --color-destructive--focus: #FF851B;
}
    --color-visited: #B86BFF; /* Lavender for visited links */
.goudy-bookletter-1911-regular {
    --color-destructive--visited: #FF6347;
  font-family: "Goudy Bookletter 1911", serif;
    --color-error: #FF4500;
  font-weight: 400;
    --color-warning: #FFB84D; /* Soft Peach */
  font-style: normal;
     --color-success: #177860;
}
    --color-notice: #001933;
.eb-garamond {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.uncial-antiqua-regular {
  font-family: "Uncial Antiqua", system-ui;
  font-weight: 400;
  font-style: normal;
}
.modern-antiqua-regular {
  font-family: "Modern Antiqua", serif;
  font-weight: 400;
  font-style: normal;
}
.metamorphous-regular {
  font-family: "Metamorphous", serif;
  font-weight: 400;
  font-style: normal;
}
/* ===== Global Styles ===== */
body {
     font-family: 'Bona Nova', serif !important;
}
pre, code {                            /* Internal spacing */
font-family: 'Courier New', 'Consolas', monospace !important; /* Monospace font */                          /* Horizontal scroll if needed */
}


     /* Content Changes */
#toc h2 {
    --color-content-added: #006400; /* Dark Green */
     font-family: 'Modern Antiqua', cursive !important;
     --color-content-removed: #8B0000; /* Dark Red */
}
.mw-changeslist-legend h2 {
    font-family: 'Modern Antiqua', cursive !important;
}
/* ===== UI Elements Still Use Custom Font ===== */
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group .tool a,
.wikiEditor-ui-dialog {
    font-family: 'Bona Nova', serif !important; /* Keep custom font for UI */
}
/* ===== Ace Editor Base Styling ===== */
.ace_editor {
     font-family: 'Courier New', 'Consolas', monospace !important; /* Monospace for cursor alignment */
}


    /* Shadows & Filters */
/* ===== CodeEditor - General Editor Styling ===== */
    --filter-invert-icon: 0;
.ace_editor {
    --filter-invert-primary-button-icon: 1;
     font-family: 'Courier New', 'Consolas', monospace !important;
    --box-shadow-color-base: #000;
}
    --box-shadow-color-progressive--active: #FF6300;
     --box-shadow-color-progressive--focus: #FF851B;
    --box-shadow-color-progressive-selected: #FF851B;
    --box-shadow-color-progressive-selected--hover: #FFB84D;
    --box-shadow-color-progressive-selected--active: #FF6300;
    --box-shadow-color-destructive--focus: #FF851B;
    --box-shadow-color-inverted: #FFFFFF;
    --box-shadow-color-transparent: transparent;


    /* Background Colors */
/* Navbar Logo */
     --background-color-base: #001F3F; /* Navy */
.navbar-logo a {
    --background-color-base-fixed: #001F3F;
     font-family: 'Modern Antiqua', cursive !important;
    --background-color-neutral: #002855;
}
     --background-color-neutral-subtle: #001933;
/* Infobox Title */
    --background-color-interactive: #002B5C;
.portable-infobox .pi-title {
    --background-color-interactive-subtle: #001933;
     font-family: 'Modern Antiqua' !important;
    --background-color-disabled: #54595d;
}
    --background-color-disabled-subtle: #3A3D42;
    --background-color-inverted: #101418;


    /* Background - Progressive */
h3.pi-data-label {
    --background-color-progressive: #FF851B;
     font-family: 'Bona Nova' !important;
     --background-color-progressive--hover: #FFB84D;
}
    --background-color-progressive--active: #FF6300;
    --background-color-progressive--focus: #FF851B;
    --background-color-progressive-subtle: rgba(255, 133, 27, 0.1);


    /* Background - Destructive */
/* ===== Headers (Orange Variants) ===== */
    --background-color-destructive: #FF4500;
h1, h2, h3, h4, h5, h6,
    --background-color-destructive--hover: #FF6347;
.mw-body h1,
    --background-color-destructive--active: #9F3526;
.mw-body .mw-heading1,
    --background-color-destructive--focus: #FF851B;
.mw-body-content h1,
     --background-color-destructive-subtle: rgba(255, 69, 0, 0.1);
.mw-body-content .mw-heading1,
.mw-body-content h2, .pi-title h2,
.mw-body-content .mw-heading2,
.mw-logo-wordmark,
#firstHeadingTitle {
     font-family: 'Modern Antiqua', cursive !important;
}


    /* Background - Error/Warning/Success */
.mwe-popups-extract p {
    --background-color-error: #FF4500;
     display: block !important;
    --background-color-error--hover: #FF6347;
     visibility: visible !important;
    --background-color-error--active: #9F3526;
}
    --background-color-error-subtle: rgba(255, 69, 0, 0.1);
    --background-color-warning-subtle: rgba(255, 184, 77, 0.2);
     --background-color-success-subtle: #dff2eb;
     --background-color-notice-subtle: #001933;
    --background-color-content-added: #a3d3ff;
    --background-color-content-removed: #ffe49c;
    --background-color-transparent: transparent;
    --background-color-backdrop-light: rgba(255, 255, 255, 0.65);
    --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
    --background-color-button-quiet--hover: rgba(255, 133, 27, 0.1);
    --background-color-button-quiet--active: rgba(255, 133, 27, 0.2);
    --background-color-input-binary--checked: #FF851B;
    --background-color-tab-list-item-framed--hover: rgba(255, 255, 255, 0.3);
    --background-color-tab-list-item-framed--active: rgba(255, 255, 255, 0.65);


    /* Opacity */
.mwe-popups-extract .portable-infobox {
    --opacity-icon-base: 0.87;
     display: none !important; /* Ensure infobox doesn't interfere */
    --opacity-icon-base--hover: 0.74;
}
    --opacity-icon-base--selected: 1;
.copyright-warning {
    --opacity-icon-base--disabled: 0.51;
     color: var(--color-base);
    --opacity-icon-placeholder: 0.51;
     font-size: 11px;
     --opacity-icon-subtle: 0.67;
     margin: 0 0 10px;
 
     width: 700px;
    /* Borders */
     max-width: 100%;
    --border-color-base: #FF851B;
}
    --border-color-subtle: #FFB84D;
.create-title {
    --border-color-muted: #FFB84D;
color: var(--color-base);
    --border-color-interactive: #FF851B;
border: 1px solid var(--color-subtle);
    --border-color-disabled: #54595d;
}
    --border-color-inverted: #FFFFFF;
.filehistory {
    --border-color-progressive: #FF851B;
max-width: 100% !important;
    --border-color-progressive--hover: #FFB84D;
    --border-color-progressive--active: #FF6300;
    --border-color-progressive--focus: #FF851B;
    --border-color-destructive: #FF4500;
    --border-color-destructive--hover: #FF6347;
    --border-color-destructive--active: #9F3526;
    --border-color-destructive--focus: #FF851B;
    --border-color-error: #FF4500;
    --border-color-error--hover: #FF6347;
    --border-color-warning: #FFB84D;
    --border-color-success: #177860;
    --border-color-notice: #001933;
    --border-color-content-added: #a3d3ff;
    --border-color-content-removed: #ffe49c;
    --border-color-transparent: transparent;
    --border-color-divider: #FF851B;
 
    /* Outline */
    --outline-color-progressive--focus: #FF851B;
 
    /* Link Overrides */
     --color-link-red: var(--color-destructive);
     --color-link-red--hover: var(--color-destructive--hover);
     --color-link-red--active: var(--color-destructive--active);
     --color-link-red--focus: var(--color-destructive--focus);
     --color-link-red--visited: var(--color-destructive--visited);
 
    /* Input Borders */
    --border-color-input--hover: var(--border-color-interactive);
    --border-color-input-binary: var(--border-color-interactive);
    --border-color-input-binary--hover: var(--border-color-progressive--hover);
    --border-color-input-binary--active: var(--border-color-progressive--active);
    --border-color-input-binary--focus: var(--border-color-progressive--focus);
    --border-color-input-binary--checked: var(--border-color-progressive);
 
    /* Subtle Text */
    --color-base--subtle: #54595d;
}
}

Latest revision as of 10:22, 23 May 2025

@import url('https://fonts.googleapis.com/css2?family=Bona+Nova:ital,wght@0,400;0,700;1,400&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Goudy+Bookletter+1911&family=Metamorphous&family=Modern+Antiqua&family=Uncial+Antiqua&display=swap');
.bona-nova-regular {
  font-family: "Bona Nova", serif;
  font-weight: 400;
  font-style: normal;
}

.bona-nova-bold {
  font-family: "Bona Nova", serif;
  font-weight: 700;
  font-style: normal;
}

.bona-nova-regular-italic {
  font-family: "Bona Nova", serif;
  font-weight: 400;
  font-style: italic;
}
.goudy-bookletter-1911-regular {
  font-family: "Goudy Bookletter 1911", serif;
  font-weight: 400;
  font-style: normal;
}
.eb-garamond {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.uncial-antiqua-regular {
  font-family: "Uncial Antiqua", system-ui;
  font-weight: 400;
  font-style: normal;
}
.modern-antiqua-regular {
  font-family: "Modern Antiqua", serif;
  font-weight: 400;
  font-style: normal;
}
.metamorphous-regular {
  font-family: "Metamorphous", serif;
  font-weight: 400;
  font-style: normal;
}
/* ===== Global Styles ===== */
body {
    font-family: 'Bona Nova', serif !important;
}
pre, code {                             /* Internal spacing */
	font-family: 'Courier New', 'Consolas', monospace !important; /* Monospace font */                          /* Horizontal scroll if needed */
}

#toc h2 {
    font-family: 'Modern Antiqua', cursive !important;
}
.mw-changeslist-legend h2 {
    font-family: 'Modern Antiqua', cursive !important;
}
/* ===== UI Elements Still Use Custom Font ===== */
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group .tool a,
.wikiEditor-ui-dialog {
    font-family: 'Bona Nova', serif !important; /* Keep custom font for UI */
}
/* ===== Ace Editor Base Styling ===== */
.ace_editor {
    font-family: 'Courier New', 'Consolas', monospace !important; /* Monospace for cursor alignment */
}

/* ===== CodeEditor - General Editor Styling ===== */
.ace_editor {
    font-family: 'Courier New', 'Consolas', monospace !important;
}

/* Navbar Logo */
.navbar-logo a {
    font-family: 'Modern Antiqua', cursive !important;
}
/* Infobox Title */
.portable-infobox .pi-title {
    font-family: 'Modern Antiqua' !important;
}

h3.pi-data-label {
    font-family: 'Bona Nova' !important;
}

/* ===== Headers (Orange Variants) ===== */
h1, h2, h3, h4, h5, h6,
.mw-body h1,
.mw-body .mw-heading1,
.mw-body-content h1,
.mw-body-content .mw-heading1,
.mw-body-content h2, .pi-title h2,
.mw-body-content .mw-heading2,
.mw-logo-wordmark,
#firstHeadingTitle {
    font-family: 'Modern Antiqua', cursive !important;
}

.mwe-popups-extract p {
    display: block !important;
    visibility: visible !important;
}

.mwe-popups-extract .portable-infobox {
    display: none !important; /* Ensure infobox doesn't interfere */
}
.copyright-warning {
    color: var(--color-base);
    font-size: 11px;
    margin: 0 0 10px;
    width: 700px;
    max-width: 100%;
}
.create-title {
	color: var(--color-base);
	border: 1px solid var(--color-subtle);
}
.filehistory {
	max-width: 100% !important;
}