MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* 1. MASTER LIGHT THEME - Pure white & soft greys */
html, body, 
.mw-page-container, 
.mw-header, 
.vector-header-container,
.mw-footer-container,
.mw-body, #content {
    background-color: #ffffff !important;
    color: #202122 !important; /* Standard high-readability dark grey text */
}

/* 2. HEADINGS - Professional Royal Blue */
h1, h2, h3, .firstHeading {
    color: #0056b3 !important; 
    border-bottom: 2px solid #eeeeee !important;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

/* 3. SEARCH & BUTTONS - Subtle Blue Grey */
.cdx-button, 
.cdx-search-input__button {
    background-color: #f8f9fa !important;
    color: #0056b3 !important;
    border: 1px solid #ced4da !important;
}
/* 1. Expand the Logo Container */
.mw-logo {
    padding: 10px 0 !important;
}

/* 2. Set the Logo Image Size */
.mw-logo-icon {
    width: 80px !important;  /* Adjust this number to your liking */
    height: 80px !important; /* Keep width and height equal for square logos */
    max-width: none !important;
    max-height: none !important;
}

/* 3. If you have a Wordmark (Text) next to the icon */
.mw-logo-wordmark {
    height: 40px !important; /* Makes the "Hackerpedia" text larger */
    width: auto !important;
}

.cdx-text-input__input {
    background-color: #ffffff !important;
    color: #202122 !important;
    border: 1px solid #ced4da !important;
}

/* 4. SIDEBAR (MAIN MENU) */
.vector-main-menu {
    background-color: #f8f9fa !important; /* Soft grey sidebar */
    border-right: 1px solid #eeeeee !important;
}

.vector-group-title, .vector-menu-heading {
    color: #4b0082 !important; /* Indigo/Purple for menu headers */
    font-weight: bold;
}

/* 5. TABS (Read, Edit, History) */
.vector-menu-tabs .mw-list-item a {
    background-color: #f8f9fa !important;
    color: #0056b3 !important;
    border: 1px solid #eeeeee !important;
}

.vector-menu-tabs .selected a {
    background-color: #ffffff !important;
    color: #d32f2f !important; /* Red for the active tab */
    border-bottom: 2px solid #d32f2f !important;
}

/* 6. LINKS - Deep Purple for a sophisticated look */
a { color: #6f42c1 !important; }
a:visited { color: #4b0082 !important; }
a:hover { color: #d32f2f !important; text-decoration: underline; }

/* 7. DEFINITION BOX (CyberTerm) - Red Tech Accent */
.cyber-term-box {
    background-color: #fff9f9; /* Extremely light red tint */
    border: 1px solid #f5c2c7;
    border-left: 6px solid #d32f2f; /* Bold Crimson Red bar */
    padding: 25px;
    margin: 20px 0;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

/* 8. CATEGORY & LANGUAGE BOXES */
#catlinks, .mw-portlet-lang, #p-lang {
    background-color: #f8f9fa !important;
    border: 1px solid #eeeeee !important;
    color: #202122 !important;
}

#catlinks a {
    color: #0056b3 !important;
}

/* 9. INDICATORS (Icons) */
.mw-indicators { filter: none !important; } /* Restore original icon colors */