Jump to content

MediaWiki:Common.css: Difference between revisions

From Hackerpedia
Created page with "CSS placed here will be applied to all skins: Hackerpedia Dark Matrix Theme: Background and Text Colors: body, #content, #mw-head, #mw-panel { background-color: #0d0d0d !important; color: #00ff00 !important; } Links: Matrix Green and White: a { color: #00ff00 !important; } a:visited { color: #008f11 !important; } a:hover { color: #ffffff !important; text-decoration: underline !important; } Content Box Border: #content { border: 1px..."
 
No edit summary
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* 1. MASTER LIGHT THEME - Pure white & soft greys */
/* Hackerpedia Dark Matrix Theme */
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 */
}


/* Background and Text Colors */
/* 2. HEADINGS - Professional Royal Blue */
body, #content, #mw-head, #mw-panel {
h1, h2, h3, .firstHeading {
     background-color: #0d0d0d !important;
     color: #0056b3 !important;  
     color: #00ff00 !important;
     border-bottom: 2px solid #eeeeee !important;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}
}


/* Links: Matrix Green and White */
/* 3. SEARCH & BUTTONS - Subtle Blue Grey */
a { color: #00ff00 !important; }
.cdx-button,
a:visited { color: #008f11 !important; }
.cdx-search-input__button {
a:hover { color: #ffffff !important; text-decoration: underline !important; }
    background-color: #f8f9fa !important;
    color: #0056b3 !important;
    border: 1px solid #ced4da !important;
}
/* 1. Expand the Logo Container */
.mw-logo {
    padding: 10px 0 !important;
}


/* Content Box Border */
/* 2. Set the Logo Image Size */
#content {
.mw-logo-icon {
     border: 1px solid #333 !important;
     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;
}
}


/* Headings */
/* 3. If you have a Wordmark (Text) next to the icon */
h1, h2, h3, h4, h5, h6 {
.mw-logo-wordmark {
     color: #00ff00 !important;
     height: 40px !important; /* Makes the "Hackerpedia" text larger */
    font-family: 'Courier New', Courier, monospace !important;
     width: auto !important;
     border-bottom: 1px solid #333 !important;
}
}


/* Terminal-style code blocks */
.cdx-text-input__input {
pre, code {
     background-color: #ffffff !important;
     background-color: #1a1a1a !important;
     color: #202122 !important;
     color: #ff0033 !important; /* Red for code/commands */
     border: 1px solid #ced4da !important;
     border: 1px solid #333 !important;
}
}


/* Navigation Menu text */
/* 4. SIDEBAR (MAIN MENU) */
.mw-body-content {
.vector-main-menu {
     font-size: 1.1em;
     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 */

Latest revision as of 03:19, 16 January 2026

/* 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 */