Jump to content

MediaWiki:Vector-2022.css: Difference between revisions

Created page with "→Fix VisualEditor Toolbar Height: body.ve-active .oo-ui-toolbar { height: 48px; →Set consistent toolbar height: min-height: 48px; max-height: 48px; padding: 0; display: flex; align-items: center; →Vertically align toolbar items: background-color: #001933; →Navy background: border-bottom: 2px solid #ff851b; →Orange border: box-sizing: border-box; } →Toolbar Items: body.ve-active .oo-ui-toolbar .oo-ui-toolGroup {..."
 
No edit summary
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* 🟠 Dark Theme - Header */
.vector-header-container .mw-header, .vector-header-container .vector-sticky-header  {
    background-color: #001A33; /* Deep Navy */
    color: #FFFFFF; /* White text */
    border-bottom: 3px solid #FF851B; /* Bright Orange underline */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    padding: 10px;
}
/* 🔗 Links */
.mw-header a {
    color: #FF851B; /* Bright Orange */
    text-decoration: none;
}
.mw-header a:hover {
    color: #FFB84D; /* Soft Peach */
    text-decoration: underline;
}
/* 🟡 Logo */
.mw-header .mw-logo-wordmark {
    font-family: 'Metamorphous', cursive;
    color: #FF851B;
    font-size: 1.8em;
}
/* 🔄 Responsive */
@media (max-width: 768px) {
    .mw-header {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* 🌑 Dark Theme */
.mw-page-container {
    background-color: #001F3F; /* Navy */
    color: #FFFFFF; /* White text */
    border: 1px solid #FF851B; /* Orange border */
}
.mw-page-container a {
    color: #FF851B; /* Bright Orange */
}
.mw-page-container a:hover {
    color: #FFB84D; /* Soft Peach */
    text-decoration: underline;
}
.mw-page-container h1,
.mw-page-container h2,
.mw-page-container h3 {
    color: #FF6300; /* Strong Orange for headers */
}
.mw-page-container .mw-header,
.mw-page-container .mw-footer {
    background-color: #001933; /* Darker Navy */
    color: #FFFFFF;
}
/* Fix VisualEditor Toolbar Height */
/* Fix VisualEditor Toolbar Height */
body.ve-active .oo-ui-toolbar {
body.ve-active .oo-ui-toolbar {
Line 49: Line 113:
     --background-color-base: #001933; /* Deep Navy */
     --background-color-base: #001933; /* Deep Navy */
     --background-color-neutral: #001a33;
     --background-color-neutral: #001a33;
     --background-color-interactive: #002244;
     --background-color-interactive: #0044;
     --background-color-disabled: #333333;
     --background-color-disabled: #333333;
     --background-color-progressive: #ff851b; /* Bright Orange */
     --background-color-progressive: #ff851b; /* Bright Orange */
Line 61: Line 125:
     --color-progressive: #ff851b; /* Bright Orange */
     --color-progressive: #ff851b; /* Bright Orange */
     --color-destructive: #ff4500; /* Burnt Orange */
     --color-destructive: #ff4500; /* Burnt Orange */
 
}
     /* Additional tweaks for form fields */
     /* Additional tweaks for form fields */
     .oo-ui-fieldLayout,
     .oo-ui-fieldLayout,
     .mw-htmlform-field-HTMLTextField,
     .mw-htmlform-field-HTMLTextField,
     .mw-htmlform-field-HTMLSelectField {
     .mw-htmlform-field-HTMLSelectField {
         background-color: #002244; /* Dark Navy for input fields */
         background-color: #0044; /* Dark Navy for input fields */
         color: #ffffff; /* White text */
         color: #ffffff; /* White text */
         border: 1px solid #ff851b; /* Bright Orange borders */
         border: 1px solid #ff851b; /* Bright Orange borders */
Line 160: Line 224:
         background-color: #ffb84d;
         background-color: #ffb84d;
     }
     }
}


:root, .skin-vector, .skin-invert, .notheme {
:root, .skin-vector, .skin-invert, .notheme {
    --color-deep-navy: #001A33;      /* Header Background */
    --color-navy: #001F3F;            /* Page Background */
    --color-dark-navy: #001933;      /* Footer, Panels */
    --color-lighter-navy: #002855;    /* Sidebar */
    --color-accent-navy: #002B5C;    /* TOC */
    --color-bright-orange: #FF851B;  /* Primary Accent */
    --color-deep-orange: #FF6300;    /* Headers */
    --color-soft-peach: #FFB84D;      /* Hover Effects */
    --color-burnt-orange: #FF4500;    /* Alerts */
    --color-soft-gray: #AAAAAA;      /* Subtle Text */
    --color-white: #FFFFFF;          /* Base Text */
    --color-error-red: #FF6347;      /* Error States */
    --color-visited-link: #B86BFF;    /* Visited Links */
    --color-dark-gray: #1E1E1E;      /* Code Block BG */
    --color-gold: #FFD700;            /* Code Numbers */
    --color-azure: #7FDBFF;          /* Code Strings */
    /* Base Colors */
    /* Base Colors */
    --color-base: #FFFFFF; /* White for primary text */
    --color-base: #FFFFFF; /* White for primary text */
Line 399: Line 478:
         color: #FF851B;
         color: #FF851B;
     }
     }
      
     pre, code {
    background-color: var(--color-dark-gray);    /* Background for code blocks */
    color: var(--color-medium-gray);            /* Default text color */
    border: 1px solid var(--color-dark-teal);  /* Subtle border */
    border-radius: 4px;                        /* Rounded corners */
    padding: 6px;                              /* Internal spacing */
    font-family: 'Courier New', 'Consolas', monospace; /* Monospace font */
    font-size: 14px;
    line-height: 1.5;
    overflow-x: auto;                          /* Horizontal scroll if needed */
}
     #pt-userpage a:hover,
     #pt-userpage a:hover,
     #pt-mytalk a:hover,
     #pt-mytalk a:hover,
Line 442: Line 531:
         background-color: #001933;
         background-color: #001933;
         border: 1px solid #FF851B;
         border: 1px solid #FF851B;
         padding: 20px;
         padding: px;
         color: #FFFFFF;
         color: #FFFFFF;
     }
     }
Line 609: Line 698:
     }
     }
      
      
     /* ===== vector 20 Specific Tweaks ===== */
     /* ===== vector Specific Tweaks ===== */
     /* Sidebar collapsed state */
     /* Sidebar collapsed state */
     .vector-menu-tabs li a {
     .vector-menu-tabs li a {
Line 619: Line 708:
     }
     }
      
      
     /* Sticky header in vector 20 */
     /* Sticky header in vector */
     .vector-sticky-header {
     .vector-sticky-header {
         background-color: #001A33;
         background-color: #001A33;
Line 747: Line 836:
     }
     }
      
      
     /* ===== vector 20 Header Image Fix ===== */
     /* ===== vector Header Image Fix ===== */
     .vector-header img {
     .vector-header img {
         width: auto;
         width: auto;
Line 785: Line 874:
      
      
     /* ===== WikiEditor Monospace Font for Editing Area ===== */
     /* ===== WikiEditor Monospace Font for Editing Area ===== */
     .wikiEditor-ui .editor textarea {
     .wikiEditor-ui .editor textarea, textarea {
         background-color: #001933; /* Dark Navy */
         background-color: #001933; /* Dark Navy */
         color: #FFFFFF; /* White text */
         color: #FFFFFF; /* White text */
Line 1,063: Line 1,152:
     background-color: #002B5C;
     background-color: #002B5C;
     border-bottom: 3px solid #FF851B;
     border-bottom: 3px solid #FF851B;
     padding: 10px 20px;
     padding: 10px px;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
Line 1,238: Line 1,327:
     border-top: 1px solid #ff851b;
     border-top: 1px solid #ff851b;
     position: relative;
     position: relative;
     z-index: 20;
     z-index: ;
}
}


Line 1,298: Line 1,387:
     color: #ffffff;
     color: #ffffff;
     border: 1px solid #ff851b;
     border: 1px solid #ff851b;
}
/* Base container for layout */
.mw-page-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
/* Header */
.mw-header {
    background-color: var(--color-medium-slate);
}
/* Main body container */
.mw-body-container {
    display: flex;
    flex: 1 1 auto;
}
/* Sidebar */
.mw-sidebar {
    flex: 0 0 250px;
    background-color: var(--color-dark-teal);
    padding: 10px;
}
/* Main Content */
.mw-content {
    flex: 1 1 auto;
    padding: 20px;
    background-color: var(--color-shale);
}
/* Footer */
.mw-footer {
    background-color: var(--color-medium-gray);
    text-align: center;
    padding: 10px;
}
/* === Main Menu Spacing === */
#p-views .vector-menu-content {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Adjust spacing between menu items */
    justify-content: flex-start;
}
/* === Fix for Mobile and Smaller Screens === */
@media (max-width: 768px) {
    #p-views .vector-menu-content {
        flex-direction: column;
    }
}
}
Retrieved from "https://continuum-universes.com/wiki/MediaWiki:Vector-2022.css"