Toggle search
Toggle menu
1
1
147
ComputerScience.wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Main Page/styles.css: Difference between revisions

Template page
More actions
← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/**
* ComputerScience.wiki - Modern Grid Layout
* Based on user-provided colors and search bar
*/
/* --- CONTAINER --- */
/* --- CONTAINER --- */
.cs-doc-container {
.cs-container {
     max-width: 1100px;
     max-width: 1200px;
     margin: 0 auto;
     margin: 0 auto;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     color: #1f2937;
     padding: 0 10px;
    line-height: 1.6;
}
}


/* --- HERO SECTION (Clean & Centered) --- */
/* --- HEADER --- */
.cs-doc-hero {
.cs-header {
     text-align: center;
     text-align: center;
     padding: 60px 20px 40px;
     padding: 40px 20px;
     margin-bottom: 40px;
     margin-bottom: 30px;
     border-bottom: 1px solid #e5e7eb;
     border-radius: 8px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}
}


.cs-doc-hero h1 {
.cs-title {
     font-size: 2.5em;
     font-size: 2.5em;
     font-weight: 700;
     font-weight: 800;
     margin: 0 0 15px 0;
     margin: 0;
     color: #111827;
     color: #000;
     border: none;
     letter-spacing: -1px;
    line-height: 1.2;
}
}


.cs-doc-hero p {
.cs-subtitle {
     font-size: 1.2em;
     font-size: 1.2em;
     color: #6b7280;
     color: #555;
     margin: 0 auto 30px;
     margin-top: 10px;
    max-width: 600px;
}
}


/* --- SEARCH BAR (Modern & Wide) --- */
/* --- SEARCH (Unchanged as requested) --- */
.cs-search-wrapper {
.cs-search {
     max-width: 600px;
     max-width: 800px;
     margin: 0 auto;
     margin: 0 auto 40px;
    padding: 25px;
    border-radius: 8px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
}
}


.cs-search-wrapper input {
/* Search Input Overrides */
.cs-search input[type="search"],
.cs-search .mw-searchInput {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    height: 45px !important;
    padding: 5px 15px !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    color: #333 !important;
     width: 100% !important;
     width: 100% !important;
    padding: 15px 20px !important;
    font-size: 1.1em !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    outline: none !important;
    transition: border-color 0.2s;
     box-shadow: 0 2px 5px rgba(0,0,0,0.05);
     box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
}


.cs-search-wrapper input:focus {
/* Search Button Overrides */
     border-color: #3b82f6 !important; /* Blue focus */
.cs-search input[type="submit"],
.cs-search .oo-ui-buttonElement-button {
    min-width: 80px !important;
     background-color: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    height: 45px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}
}


/* --- TRACKS GRID --- */
/* Hide fulltext button */
.cs-track-header {
.cs-search input[name="fulltext"] { display: none !important; }
 
 
/* --- GRID SYSTEM (The "Dynamic" Fix) --- */
/* Replaces table display with modern Grid */
.cs-grid {
    display: grid;
    /* Auto-fit: Creates as many columns as fit, min 300px wide */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}
 
/* --- SECTIONS --- */
.cs-section-header {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
     display: flex;
     display: flex;
     align-items: baseline;
     align-items: center;
    justify-content: space-between;
    margin: 40px 0 20px;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 10px;
}
}


.cs-track-header h2 {
.cs-section-title {
    font-size: 1.5em;
     margin: 0;
     margin: 0;
     border: none;
     font-size: 1.4em;
     font-weight: 700;
     font-weight: 700;
    color: #111827;
}
.cs-track-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
}


/* --- CARDS (Minimalist) --- */
/* --- CARDS --- */
.cs-doc-card {
.cs-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
     border-radius: 8px;
     border-radius: 8px;
     padding: 24px;
     overflow: hidden;
     transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
     height: 100%;
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     height: 100%; /* Force equal height */
     transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box; /* Fix padding issues */
}
}


.cs-doc-card:hover {
/* Dynamic Hover Effect */
     transform: translateY(-2px);
.cs-card:hover {
     box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
     transform: translateY(-5px);
    border-color: #3b82f6;
     box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
}


/* Header inside card */
.cs-card-header {
.cs-doc-card h3 {
     padding: 15px 20px;
     margin-top: 0 !important; /* Force reset MediaWiki margins */
    margin-bottom: 10px !important;
    font-size: 1.25em;
     font-weight: 600;
     font-weight: 600;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
}


/* The Icon */
.cs-card-title {
.cs-card-icon {
    margin: 0;
     font-size: 1.2em;
     font-size: 1.2em;
    opacity: 0.8;
}
}


/* The Description */
.cs-card-body {
.cs-doc-card p {
     padding: 20px;
     font-size: 0.95em;
     flex-grow: 1; /* Ensures footer sticks to bottom */
    color: #6b7280;
    margin-bottom: 15px;
     flex-grow: 1; /* Pushes list down */
}
}


/* The Links List */
.cs-card-list {
.cs-doc-list {
     margin: 0;
     margin: 0;
     padding: 0;
     padding: 0;
     list-style: none;
     list-style: none;
    border-top: 1px solid #f3f4f6;
    padding-top: 15px;
}
}


.cs-doc-list li {
.cs-card-list li {
     margin-bottom: 8px;
     margin-bottom: 12px;
     padding-left: 0;
     padding-left: 0;
     font-size: 0.95em;
     font-size: 0.95em;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 5px;
}
}
 
.cs-card-list li:last-child { border-bottom: none; }
.cs-doc-list li a {
    text-decoration: none;
    color: #374151; /* Dark grey */
    font-weight: 500;
    display: block;
    transition: color 0.2s;
}
 
.cs-doc-list li a:hover {
    color: #2563eb; /* Blue hover */
    text-decoration: underline;
}


.cs-card-footer {
.cs-card-footer {
     margin-top: 10px;
     padding: 15px 20px;
    font-size: 0.85em;
     text-align: right;
     text-align: right;
    font-size: 0.9em;
     font-weight: bold;
     font-weight: bold;
}
}


/* --- FOOTER CTA --- */
.cs-card-footer a {
.cs-footer-cta {
     text-decoration: none;
    margin-top: 60px;
    padding: 40px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
     text-align: center;
}
}


/* ========================================= */
/* --- COLOR SCHEMES (Strictly copied from your source) --- */
/* === DARK MODE (Citizen Skin Overrides) === */
/* ========================================= */


html.skin-theme-clientpref-night .cs-doc-container {
/* Programming (Green) */
    color: #d1d5db;
.cs-section.prog .cs-section-header { background-color: #cef2e0; border: 1px solid #cef2e0; }
}
.cs-section.prog .cs-card { background-color: #f5fffa; border: 1px solid #cef2e0; }
.cs-section.prog .cs-card-header { background-color: #cef2e0; border-bottom: 1px solid #cef2e0; }
.cs-section.prog .cs-card-footer { background-color: #f5fffa; border-top: 1px solid #cef2e0; }
.cs-section.prog .cs-card-footer a { color: #2e8b57; }
 
/* Data Science (Blue) */
.cs-section.data .cs-section-header { background-color: #cedff2; border: 1px solid #cedff2; }
.cs-section.data .cs-card { background-color: #f5faff; border: 1px solid #cedff2; }
.cs-section.data .cs-card-header { background-color: #cedff2; border-bottom: 1px solid #cedff2; }
.cs-section.data .cs-card-footer { background-color: #f5faff; border-top: 1px solid #cedff2; }
.cs-section.data .cs-card-footer a { color: #4169e1; }
 
/* Databases (Pink) */
.cs-section.db .cs-section-header { background-color: #f2cedd; border: 1px solid #f2cedd; }
.cs-section.db .cs-card { background-color: #fff5fa; border: 1px solid #f2cedd; }
.cs-section.db .cs-card-header { background-color: #f2cedd; border-bottom: 1px solid #f2cedd; }
.cs-section.db .cs-card-footer { background-color: #fff5fa; border-top: 1px solid #f2cedd; }
.cs-section.db .cs-card-footer a { color: #db7093; }
 
/* Infrastructure (Purple) */
.cs-section.inf .cs-section-header { background-color: #ddcef2; border: 1px solid #ddcef2; }
.cs-section.inf .cs-card { background-color: #faf5ff; border: 1px solid #ddcef2; }
.cs-section.inf .cs-card-header { background-color: #ddcef2; border-bottom: 1px solid #ddcef2; }
.cs-section.inf .cs-card-footer { background-color: #faf5ff; border-top: 1px solid #ddcef2; }
.cs-section.inf .cs-card-footer a { color: #8a2be2; }


/* Hero Dark */
/* Fundamentals (Orange) */
html.skin-theme-clientpref-night .cs-doc-hero {
.cs-section.fund .cs-section-header { background-color: #f2e0ce; border: 1px solid #f2e0ce; }
    border-bottom-color: #374151;
.cs-section.fund .cs-card { background-color: #fffaf5; border: 1px solid #f2e0ce; }
}
.cs-section.fund .cs-card-header { background-color: #f2e0ce; border-bottom: 1px solid #f2e0ce; }
html.skin-theme-clientpref-night .cs-doc-hero h1 {
.cs-section.fund .cs-card-footer { background-color: #fffaf5; border-top: 1px solid #f2e0ce; }
    color: #f3f4f6;
.cs-section.fund .cs-card-footer a { color: #d2691e; }
}
html.skin-theme-clientpref-night .cs-doc-hero p {
    color: #9ca3af;
}


/* Search Dark */
/* Community (Grey) */
html.skin-theme-clientpref-night .cs-search-wrapper input {
.cs-section.comm .cs-section-header { background-color: #eee; border: 1px solid #eee; }
    background-color: #1f2937 !important;
.cs-section.comm .cs-card { background-color: #f9f9f9; border: 1px solid #eee; }
    border-color: #4b5563 !important;
.cs-section.comm .cs-card-header { background-color: #eee; border-bottom: 1px solid #eee; }
    color: #ffffff !important;
.cs-section.comm .cs-card-footer { background-color: #f9f9f9; border-top: 1px solid #eee; }
}
.cs-section.comm .cs-card-footer a { color: #444; }
html.skin-theme-clientpref-night .cs-search-wrapper input:focus {
    border-color: #60a5fa !important;
}


/* Headers Dark */
html.skin-theme-clientpref-night .cs-track-header {
    border-bottom-color: #374151;
}
html.skin-theme-clientpref-night .cs-track-header h2 {
    color: #f3f4f6;
}


/* Cards Dark */
/* --- DARK MODE (Citizen Skin) --- */
html.skin-theme-clientpref-night .cs-doc-card {
@media screen {
     background-color: #1f2937; /* Dark Grey background */
    html.skin-theme-clientpref-night .cs-header { background-color: #171a1d; border-color: #676767; }
     border-color: #374151;
    html.skin-theme-clientpref-night .cs-title { color: #fff; }
}
    html.skin-theme-clientpref-night .cs-subtitle { color: #ccc; }
     html.skin-theme-clientpref-night .cs-search { background-color: #252525; border-color: #676767; }
    html.skin-theme-clientpref-night .cs-search input { background-color: #1f1f1f !important; color: #fff !important; border-color: #555 !important; }
     html.skin-theme-clientpref-night .cs-search input[type="submit"] { background-color: #444 !important; }
    html.skin-theme-clientpref-night .cs-card-list li { color: #ccc; }


html.skin-theme-clientpref-night .cs-doc-card:hover {
    /* Programming Dark */
     border-color: #60a5fa; /* Light Blue hover */
    html.skin-theme-clientpref-night .cs-section.prog .cs-section-header,
     background-color: #262f3e; /* Slightly lighter on hover */
    html.skin-theme-clientpref-night .cs-section.prog .cs-card-header { background-color: #104437; border-color: #104437; }
}
    html.skin-theme-clientpref-night .cs-section.prog .cs-card,
     html.skin-theme-clientpref-night .cs-section.prog .cs-card-footer { background-color: #0b1e1c; border-color: #104437; }
     html.skin-theme-clientpref-night .cs-section.prog .cs-card-footer a { color: #8fbc8f; }


html.skin-theme-clientpref-night .cs-doc-card h3 {
    /* Data Dark */
     color: #f3f4f6;
    html.skin-theme-clientpref-night .cs-section.data .cs-section-header,
}
    html.skin-theme-clientpref-night .cs-section.data .cs-card-header { background-color: #082849; border-color: #082849; }
html.skin-theme-clientpref-night .cs-doc-card p {
     html.skin-theme-clientpref-night .cs-section.data .cs-card,
     color: #9ca3af;
    html.skin-theme-clientpref-night .cs-section.data .cs-card-footer { background-color: #0d1a27; border-color: #082849; }
}
    html.skin-theme-clientpref-night .cs-section.data .cs-card-footer a { color: #87cefa; }
   
    /* DB Dark */
    html.skin-theme-clientpref-night .cs-section.db .cs-section-header,
    html.skin-theme-clientpref-night .cs-section.db .cs-card-header { background-color: #882c43; border-color: #882c43; }
     html.skin-theme-clientpref-night .cs-section.db .cs-card,
    html.skin-theme-clientpref-night .cs-section.db .cs-card-footer { background-color: #270e1a; border-color: #882c43; }
    html.skin-theme-clientpref-night .cs-section.db .cs-card-footer a { color: #ffb6c1; }


/* Lists Dark */
    /* Inf Dark */
html.skin-theme-clientpref-night .cs-doc-list {
    html.skin-theme-clientpref-night .cs-section.inf .cs-section-header,
     border-top-color: #374151;
     html.skin-theme-clientpref-night .cs-section.inf .cs-card-header { background-color: #7545ab; border-color: #7545ab; }
}
    html.skin-theme-clientpref-night .cs-section.inf .cs-card,
html.skin-theme-clientpref-night .cs-doc-list li a {
     html.skin-theme-clientpref-night .cs-section.inf .cs-card-footer { background-color: #130e20; border-color: #7545ab; }
     color: #d1d5db;
    html.skin-theme-clientpref-night .cs-section.inf .cs-card-footer a { color: #da70d6; }
}
html.skin-theme-clientpref-night .cs-doc-list li a:hover {
    color: #93c5fd; /* Light Blue hover */
}


/* Footer Dark */
    /* Fund Dark */
html.skin-theme-clientpref-night .cs-footer-cta {
    html.skin-theme-clientpref-night .cs-section.fund .cs-section-header,
     background-color: #1f2937;
    html.skin-theme-clientpref-night .cs-section.fund .cs-card-header { background-color: #663428; border-color: #663428; }
     border-color: #374151;
    html.skin-theme-clientpref-night .cs-section.fund .cs-card,
    html.skin-theme-clientpref-night .cs-section.fund .cs-card-footer { background-color: #331a00; border-color: #663428; }
    html.skin-theme-clientpref-night .cs-section.fund .cs-card-footer a { color: #ffa500; }
   
    /* Comm Dark */
     html.skin-theme-clientpref-night .cs-section.comm .cs-section-header,
    html.skin-theme-clientpref-night .cs-section.comm .cs-card-header { background-color: #3d3d3d; border-color: #3d3d3d; }
    html.skin-theme-clientpref-night .cs-section.comm .cs-card,
     html.skin-theme-clientpref-night .cs-section.comm .cs-card-footer { background-color: #171a1d; border-color: #3d3d3d; }
    html.skin-theme-clientpref-night .cs-section.comm .cs-card-footer a { color: #ccc; }
}
}

Revision as of 23:29, 22 November 2025

/**
 * ComputerScience.wiki - Modern Grid Layout
 * Based on user-provided colors and search bar
 */

/* --- CONTAINER --- */
.cs-container {
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 0 10px;
}

/* --- HEADER --- */
.cs-header {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

.cs-title {
    font-size: 2.5em;
    font-weight: 800;
    margin: 0;
    color: #000;
    letter-spacing: -1px;
}

.cs-subtitle {
    font-size: 1.2em;
    color: #555;
    margin-top: 10px;
}

/* --- SEARCH (Unchanged as requested) --- */
.cs-search {
    max-width: 800px;
    margin: 0 auto 40px;
    padding: 25px;
    border-radius: 8px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
}

/* Search Input Overrides */
.cs-search input[type="search"],
.cs-search .mw-searchInput {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    height: 45px !important;
    padding: 5px 15px !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    color: #333 !important;
    width: 100% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Search Button Overrides */
.cs-search input[type="submit"],
.cs-search .oo-ui-buttonElement-button {
    min-width: 80px !important;
    background-color: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    height: 45px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* Hide fulltext button */
.cs-search input[name="fulltext"] { display: none !important; }


/* --- GRID SYSTEM (The "Dynamic" Fix) --- */
/* Replaces table display with modern Grid */
.cs-grid {
    display: grid;
    /* Auto-fit: Creates as many columns as fit, min 300px wide */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 25px;
    margin-bottom: 40px;
}

/* --- SECTIONS --- */
.cs-section-header {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.cs-section-title {
    margin: 0;
    font-size: 1.4em;
    font-weight: 700;
}

/* --- CARDS --- */
.cs-card {
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Dynamic Hover Effect */
.cs-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.cs-card-header {
    padding: 15px 20px;
    font-weight: 600;
}

.cs-card-title {
    margin: 0;
    font-size: 1.2em;
}

.cs-card-body {
    padding: 20px;
    flex-grow: 1; /* Ensures footer sticks to bottom */
}

.cs-card-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cs-card-list li {
    margin-bottom: 12px;
    padding-left: 0;
    font-size: 0.95em;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 5px;
}
.cs-card-list li:last-child { border-bottom: none; }

.cs-card-footer {
    padding: 15px 20px;
    text-align: right;
    font-size: 0.9em;
    font-weight: bold;
}

.cs-card-footer a {
    text-decoration: none;
}

/* --- COLOR SCHEMES (Strictly copied from your source) --- */

/* Programming (Green) */
.cs-section.prog .cs-section-header { background-color: #cef2e0; border: 1px solid #cef2e0; }
.cs-section.prog .cs-card { background-color: #f5fffa; border: 1px solid #cef2e0; }
.cs-section.prog .cs-card-header { background-color: #cef2e0; border-bottom: 1px solid #cef2e0; }
.cs-section.prog .cs-card-footer { background-color: #f5fffa; border-top: 1px solid #cef2e0; }
.cs-section.prog .cs-card-footer a { color: #2e8b57; }

/* Data Science (Blue) */
.cs-section.data .cs-section-header { background-color: #cedff2; border: 1px solid #cedff2; }
.cs-section.data .cs-card { background-color: #f5faff; border: 1px solid #cedff2; }
.cs-section.data .cs-card-header { background-color: #cedff2; border-bottom: 1px solid #cedff2; }
.cs-section.data .cs-card-footer { background-color: #f5faff; border-top: 1px solid #cedff2; }
.cs-section.data .cs-card-footer a { color: #4169e1; }

/* Databases (Pink) */
.cs-section.db .cs-section-header { background-color: #f2cedd; border: 1px solid #f2cedd; }
.cs-section.db .cs-card { background-color: #fff5fa; border: 1px solid #f2cedd; }
.cs-section.db .cs-card-header { background-color: #f2cedd; border-bottom: 1px solid #f2cedd; }
.cs-section.db .cs-card-footer { background-color: #fff5fa; border-top: 1px solid #f2cedd; }
.cs-section.db .cs-card-footer a { color: #db7093; }

/* Infrastructure (Purple) */
.cs-section.inf .cs-section-header { background-color: #ddcef2; border: 1px solid #ddcef2; }
.cs-section.inf .cs-card { background-color: #faf5ff; border: 1px solid #ddcef2; }
.cs-section.inf .cs-card-header { background-color: #ddcef2; border-bottom: 1px solid #ddcef2; }
.cs-section.inf .cs-card-footer { background-color: #faf5ff; border-top: 1px solid #ddcef2; }
.cs-section.inf .cs-card-footer a { color: #8a2be2; }

/* Fundamentals (Orange) */
.cs-section.fund .cs-section-header { background-color: #f2e0ce; border: 1px solid #f2e0ce; }
.cs-section.fund .cs-card { background-color: #fffaf5; border: 1px solid #f2e0ce; }
.cs-section.fund .cs-card-header { background-color: #f2e0ce; border-bottom: 1px solid #f2e0ce; }
.cs-section.fund .cs-card-footer { background-color: #fffaf5; border-top: 1px solid #f2e0ce; }
.cs-section.fund .cs-card-footer a { color: #d2691e; }

/* Community (Grey) */
.cs-section.comm .cs-section-header { background-color: #eee; border: 1px solid #eee; }
.cs-section.comm .cs-card { background-color: #f9f9f9; border: 1px solid #eee; }
.cs-section.comm .cs-card-header { background-color: #eee; border-bottom: 1px solid #eee; }
.cs-section.comm .cs-card-footer { background-color: #f9f9f9; border-top: 1px solid #eee; }
.cs-section.comm .cs-card-footer a { color: #444; }


/* --- DARK MODE (Citizen Skin) --- */
@media screen {
    html.skin-theme-clientpref-night .cs-header { background-color: #171a1d; border-color: #676767; }
    html.skin-theme-clientpref-night .cs-title { color: #fff; }
    html.skin-theme-clientpref-night .cs-subtitle { color: #ccc; }
    html.skin-theme-clientpref-night .cs-search { background-color: #252525; border-color: #676767; }
    html.skin-theme-clientpref-night .cs-search input { background-color: #1f1f1f !important; color: #fff !important; border-color: #555 !important; }
    html.skin-theme-clientpref-night .cs-search input[type="submit"] { background-color: #444 !important; }
    html.skin-theme-clientpref-night .cs-card-list li { color: #ccc; }

    /* Programming Dark */
    html.skin-theme-clientpref-night .cs-section.prog .cs-section-header,
    html.skin-theme-clientpref-night .cs-section.prog .cs-card-header { background-color: #104437; border-color: #104437; }
    html.skin-theme-clientpref-night .cs-section.prog .cs-card,
    html.skin-theme-clientpref-night .cs-section.prog .cs-card-footer { background-color: #0b1e1c; border-color: #104437; }
    html.skin-theme-clientpref-night .cs-section.prog .cs-card-footer a { color: #8fbc8f; }

    /* Data Dark */
    html.skin-theme-clientpref-night .cs-section.data .cs-section-header,
    html.skin-theme-clientpref-night .cs-section.data .cs-card-header { background-color: #082849; border-color: #082849; }
    html.skin-theme-clientpref-night .cs-section.data .cs-card,
    html.skin-theme-clientpref-night .cs-section.data .cs-card-footer { background-color: #0d1a27; border-color: #082849; }
    html.skin-theme-clientpref-night .cs-section.data .cs-card-footer a { color: #87cefa; }
    
    /* DB Dark */
    html.skin-theme-clientpref-night .cs-section.db .cs-section-header,
    html.skin-theme-clientpref-night .cs-section.db .cs-card-header { background-color: #882c43; border-color: #882c43; }
    html.skin-theme-clientpref-night .cs-section.db .cs-card,
    html.skin-theme-clientpref-night .cs-section.db .cs-card-footer { background-color: #270e1a; border-color: #882c43; }
    html.skin-theme-clientpref-night .cs-section.db .cs-card-footer a { color: #ffb6c1; }

    /* Inf Dark */
    html.skin-theme-clientpref-night .cs-section.inf .cs-section-header,
    html.skin-theme-clientpref-night .cs-section.inf .cs-card-header { background-color: #7545ab; border-color: #7545ab; }
    html.skin-theme-clientpref-night .cs-section.inf .cs-card,
    html.skin-theme-clientpref-night .cs-section.inf .cs-card-footer { background-color: #130e20; border-color: #7545ab; }
    html.skin-theme-clientpref-night .cs-section.inf .cs-card-footer a { color: #da70d6; }

    /* Fund Dark */
    html.skin-theme-clientpref-night .cs-section.fund .cs-section-header,
    html.skin-theme-clientpref-night .cs-section.fund .cs-card-header { background-color: #663428; border-color: #663428; }
    html.skin-theme-clientpref-night .cs-section.fund .cs-card,
    html.skin-theme-clientpref-night .cs-section.fund .cs-card-footer { background-color: #331a00; border-color: #663428; }
    html.skin-theme-clientpref-night .cs-section.fund .cs-card-footer a { color: #ffa500; }
    
    /* Comm Dark */
    html.skin-theme-clientpref-night .cs-section.comm .cs-section-header,
    html.skin-theme-clientpref-night .cs-section.comm .cs-card-header { background-color: #3d3d3d; border-color: #3d3d3d; }
    html.skin-theme-clientpref-night .cs-section.comm .cs-card,
    html.skin-theme-clientpref-night .cs-section.comm .cs-card-footer { background-color: #171a1d; border-color: #3d3d3d; }
    html.skin-theme-clientpref-night .cs-section.comm .cs-card-footer a { color: #ccc; }
}
Retrieved from "https://computerscience.wiki/index.php?title=Template:Main_Page/styles.css&oldid=139"