MediaWiki:Common.css: Difference between revisions

/* ================================================
   Bright Summer Theme for Timeless Skin
   MediaWiki:Common.css
   ================================================ */

:root {
    /* Primary summer colors - sun and sea! */
    --ocean-blue: #0891b2;            /* Deep ocean blue */
    --sky-blue: #38bdf8;              /* Bright sky blue */
    --sunshine-yellow: #fbbf24;       /* Warm sunshine yellow */
    --sand: #fef3c7;                  /* Beach sand */
    
    /* Accent colors */
    --coral: #f97316;                 /* Coral/sunset orange */
    --tropical-pink: #ec4899;         /* Tropical flower pink */
    --lime-green: #84cc16;            /* Fresh lime green */
    --turquoise: #06b6d4;             /* Tropical water */
    
    /* Neutrals */
    --summer-white: #fffbeb;
    --sunny-cream: #fef9e7;
    --warm-gray: #78716c;
    --deep-blue: #164e63;
}

/* Main page background */
body {
    background-color: var(--summer-white);
}

/* Header/top navigation - ocean waves */
#mw-header-container {
    background: linear-gradient(135deg, var(--ocean-blue) 0%, var(--turquoise) 100%);
    border-bottom: 4px solid var(--sunshine-yellow);
}

#mw-header-nav-hack {
    background: transparent;
}

/* Site logo area */
#p-logo a {
    background-color: transparent;
}

/* Navigation links in header */
#mw-header-nav-hack a,
#user-tools a {
    color: var(--summer-white);
    font-weight: 500;
}

#mw-header-nav-hack a:hover,
#user-tools a:hover {
    color: var(--sunshine-yellow);
}

/* Sidebar - beach vibes */
#mw-site-navigation,
#mw-related-navigation {
    background-color: var(--sand);
    border-right: 2px solid var(--sky-blue);
}

#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
    background-color: transparent;
}

#mw-site-navigation h3,
#mw-related-navigation h3 {
    background: linear-gradient(90deg, var(--sky-blue) 0%, var(--turquoise) 100%);
    color: white;
    border-bottom: 3px solid var(--sunshine-yellow);
    font-weight: bold;
}

/* Sidebar links */
#mw-site-navigation a,
#mw-related-navigation a {
    color: var(--ocean-blue);
    font-weight: 500;
}

#mw-site-navigation a:hover,
#mw-related-navigation a:hover {
    color: var(--coral);
    background-color: rgba(251, 191, 36, 0.15);
}

/* Main content area - sunny page */
#mw-content-container {
    background-color: white;
    border: 2px solid var(--sky-blue);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.15);
}

#mw-content {
    background-color: white;
}

/* Page title - bright and sunny */
#firstHeading {
    color: var(--ocean-blue);
    border-bottom: 4px solid var(--sunshine-yellow);
    text-shadow: 1px 1px 0px rgba(251, 191, 36, 0.2);
}

/* Content headings */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4 {
    color: var(--ocean-blue);
}

.mw-body h2 {
    border-bottom: 3px solid var(--sky-blue);
}

.mw-body h3 {
    color: var(--turquoise);
}

/* Links - coral sunset colors */
.mw-body a:not(.new) {
    color: var(--coral);
    font-weight: 500;
}

.mw-body a:not(.new):hover {
    color: var(--tropical-pink);
}

.mw-body a:not(.new):visited {
    color: var(--ocean-blue);
}

/* Red links (non-existent pages) */
.mw-body a.new {
    color: #dc2626;
}

/* Tabs (page actions) */
#p-namespaces ul li,
#p-views ul li {
    background-color: var(--sand);
    border: 2px solid var(--sky-blue);
}

#p-namespaces ul li.selected,
#p-views ul li.selected {
    background-color: white;
    border-bottom-color: white;
    border-top: 3px solid var(--sunshine-yellow);
}

#p-namespaces a,
#p-views a {
    color: var(--ocean-blue);
    font-weight: 600;
}

/* Buttons - tropical colors */
.mw-ui-button,
.oo-ui-buttonElement-button {
    background: linear-gradient(135deg, var(--coral) 0%, var(--tropical-pink) 100%);
    color: white;
    border: 2px solid var(--sunshine-yellow);
    font-weight: bold;
}

.mw-ui-button:hover,
.oo-ui-buttonElement-button:hover {
    background: linear-gradient(135deg, var(--tropical-pink) 0%, var(--coral) 100%);
}

/* Info boxes */
.infobox {
    background-color: var(--sand);
    border: 2px solid var(--sky-blue);
    border-left: 5px solid var(--sunshine-yellow);
    box-shadow: 2px 2px 8px rgba(8, 145, 178, 0.1);
}

/* Table styling - bright and clean */
table.wikitable {
    background-color: white;
    border: 2px solid var(--sky-blue);
}

table.wikitable th {
    background: linear-gradient(90deg, var(--sky-blue) 0%, var(--turquoise) 100%);
    color: white;
    font-weight: bold;
}

table.wikitable tr:nth-child(even) {
    background-color: var(--sunny-cream);
}

table.wikitable tr:nth-child(odd) {
    background-color: white;
}

table.wikitable tr:hover {
    background-color: var(--sand);
}

table.wikitable td {
    border: 1px solid var(--sky-blue);
}

/* Code blocks */
pre, code {
    background-color: var(--sand);
    border: 2px solid var(--lime-green);
    color: var(--deep-blue);
}

/* Footer */
#footer {
    background: linear-gradient(90deg, var(--sand) 0%, var(--sunny-cream) 100%);
    border-top: 4px solid var(--sunshine-yellow);
    color: var(--warm-gray);
}

#footer a {
    color: var(--ocean-blue);
    font-weight: 500;
}

#footer a:hover {
    color: var(--coral);
}

/* Search box */
#searchInput {
    border: 2px solid var(--sky-blue);
    background-color: white;
}

#searchInput:focus {
    border-color: var(--sunshine-yellow);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

/* Blockquotes */
blockquote {
    border-left: 5px solid var(--sunshine-yellow);
    background-color: var(--sand);
    padding: 15px 20px;
    margin: 20px 0;
    color: var(--warm-gray);
}

/* ================================================
   Additional fixes for header text visibility
   ================================================ */

/* Wiki name/site title in top left */
#p-logo a,
#p-logo-text a,
.mw-wiki-title,
#sitelogo-text {
    color: var(--summer-white) !important;
    font-weight: bold !important;
}

#p-logo a:hover,
#p-logo-text a:hover {
    color: var(--sunshine-yellow) !important;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
}

/* Username in top right corner */
#user-tools .mw-ui-icon + span,
#user-tools #pt-userpage a,
#personal h2,
#personal .mw-portlet-heading {
    color: var(--summer-white) !important;
    font-weight: 500 !important;
}

#user-tools #pt-userpage a:hover {
    color: var(--sunshine-yellow) !important;
}

/* Dropdown menu from username */
#personal .mw-portlet-body,
#personal ul,
#user-tools .dropdown,
#personal .vector-menu-content {
    background-color: white;
    border: 2px solid var(--sky-blue);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.2);
}

#personal .mw-portlet-body a,
#personal ul a,
#user-tools .dropdown a {
    color: var(--ocean-blue) !important;
    background-color: white;
    font-weight: 500;
}

#personal .mw-portlet-body a:hover,
#personal ul a:hover,
#user-tools .dropdown a:hover {
    color: var(--coral) !important;
    background-color: var(--sand);
}