Toggle search
Toggle menu
1
1
133
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 edit
No edit summary
No edit summary
 
(36 intermediate revisions by the same user not shown)
Line 1: Line 1:
/**
/**
  * ComputerScience.wiki Main Page Styles
  * ComputerScience.wiki - Main Page Styles
  * Based on MediaWiki-Common.css with consistent card structure
  * With fixed button width and single button
  */
  */


/* Main Page Components */
/* Base container */
.mp-box {
.cs-container {
     border: 1px solid #aaa; /* all colors overridden on specific elements in @media screen */
     max-width: 1200px;
     padding: 0 0.5em 0.5em;
     margin: 0 auto;
     margin-top: 4px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
}


.mp-h2, body.skin-timeless .mp-h2 {
/* Header */
    border: 1px solid #aaa; /* all colors overridden on specific elements in @media screen */
.cs-header {
     margin: 0.5em 0;
     text-align: center;
     padding: 0.2em 0.4em;
     padding: 30px 20px;
     font-size: 120%;
     margin-bottom: 30px;
     font-weight: bold;
     border-radius: 8px;
     font-family: inherit;
     background-color: #f9f9f9;
     display: flex;
     border: 1px solid #ddd;
    align-items: center;
}
}


.mp-h2-icon {
.cs-title {
     margin-right: 10px;
     font-size: 2em;
     font-size: 1.2em;
     font-weight: 700;
    margin: 0;
    color: #000;
}
}


.mp-later {
.cs-subtitle {
     font-size: 85%;
     font-size: 1.1em;
     font-weight: normal;
     font-weight: normal;
    margin: 10px 0 0;
    color: #444;
}
/* Search */
.cs-search {
    max-width: 800px;
    margin: 0 auto 40px;
    padding: 25px;
    border-radius: 8px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
}
/* Search input - restore original background */
.cs-search input[type="search"],
.cs-search input[type="text"],
.cs-search .mw-searchInput,
.cs-search .cdx-text-input__input {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    height: 40px !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    color: #333 !important;
    width: 100% !important;
}
/* Search button */
.cs-search input[name="go"],
.cs-search button[name="go"],
.cs-search input[type="submit"],
.cs-search button[type="submit"],
.cs-search .oo-ui-buttonElement-button {
    width: 80px !important;
    max-width: 80px !important;
    min-width: 80px !important;
    background-color: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    height: 40px !important;
    padding: 5px 8px !important;
    border-radius: 4px !important;
    color: #333 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
/* Hide the second (fulltext) button */
.cs-search input[name="fulltext"],
.cs-search button[name="fulltext"],
.cs-search input[value="Search full text"],
.cs-search button[value="Search full text"] {
    display: none !important;
}
/* Grid Layout */
.cs-grid {
    display: table;
    width: 100%;
    border-spacing: 10px;
    border-collapse: separate;
    margin: 0 -10px;
}
.cs-row {
    display: table-row;
}
}


#mp-welcomecount {
.cs-cell {
     text-align: center;
     display: table-cell;
     margin: 0.4em;
    width: 33.333%;
    vertical-align: top;
}
 
/* Section styling */
.cs-section {
     margin-bottom: 30px;
}
}


#mp-welcome {
.cs-section-header {
     font-size: 162%;
     padding: 12px 15px;
     padding: 0.1em;
    margin-bottom: 20px;
     border-radius: 6px;
}
}


#mp-welcome h1, #mp-welcome .mw-heading1 {
.cs-section-title {
     font-size: inherit;
     margin: 0;
     font-family: inherit;
     font-size: 1.3em;
     display: inline;
     font-weight: 600;
    border: none;
}
}


#mp-free {
/* Card Design */
     font-size: 95%;
.cs-card {
     border-radius: 6px;
    overflow: hidden;
    height: 100%;
}
}


#articlecount {
.cs-card-header {
     font-size: 85%;
     padding: 12px 15px;
    margin-top: 10px;
}
}


#articlecount > ul {
.cs-card-title {
     margin: 0;
     margin: 0;
     padding: 0;
     font-size: 1.1em;
    font-weight: 600;
}
}


#articlecount > ul > li {
.cs-card-body {
    padding: 15px;
}
 
.cs-card-list {
     margin: 0;
     margin: 0;
     display: inline;
     padding: 0 0 0 20px;
}
}


#articlecount > ul > li::after {
.cs-card-list li {
     content: " · ";
     margin-bottom: 10px;
    font-weight: bold;
}
}


#articlecount > ul > li:last-child::after {
/* Card footer with hover effects */
     content: "";
.cs-card-footer {
    padding: 8px 15px;
     text-align: right;
}
}


/* Search Box */
/* Link hover effects */
.mp-search-container {
.cs-card-footer a {
     max-width: 650px;
     text-decoration: none;
    margin: 20px auto;
     position: relative;
     position: relative;
    padding-bottom: 2px;
    transition: all 0.2s ease-in-out;
}
.cs-card-footer a:hover {
    opacity: 0.85;
}
.cs-card-footer a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transition: width 0.3s ease;
}
.cs-card-footer a:hover::after {
    width: 100%;
}
/* Section color schemes */
/* Programming */
.cs-section:nth-child(3) .cs-section-header {
    background-color: #cef2e0;
    border: 1px solid #cef2e0;
}
.cs-section:nth-child(3) .cs-card {
    background-color: #f5fffa;
    border: 1px solid #cef2e0;
}
.cs-section:nth-child(3) .cs-card-header {
    background-color: #cef2e0;
    border-bottom: 1px solid #cef2e0;
}
.cs-section:nth-child(3) .cs-card-footer {
    background-color: #f5fffa;
    border-top: 1px solid #cef2e0;
}
.cs-section:nth-child(3) .cs-card-footer a {
    color: #2e8b57;
}
/* Data Science */
.cs-section:nth-child(4) .cs-section-header {
    background-color: #cedff2;
    border: 1px solid #cedff2;
}
.cs-section:nth-child(4) .cs-card {
    background-color: #f5faff;
    border: 1px solid #cedff2;
}
.cs-section:nth-child(4) .cs-card-header {
    background-color: #cedff2;
    border-bottom: 1px solid #cedff2;
}
}


.mp-search-box {
.cs-section:nth-child(4) .cs-card-footer {
     border-radius: 8px;
    background-color: #f5faff;
     padding: 15px;
     border-top: 1px solid #cedff2;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
 
.cs-section:nth-child(4) .cs-card-footer a {
     color: #4169e1;
}
 
/* Databases */
.cs-section:nth-child(5) .cs-section-header {
     background-color: #f2cedd;
    border: 1px solid #f2cedd;
}
 
.cs-section:nth-child(5) .cs-card {
    background-color: #fff5fa;
    border: 1px solid #f2cedd;
}
 
.cs-section:nth-child(5) .cs-card-header {
    background-color: #f2cedd;
    border-bottom: 1px solid #f2cedd;
}
 
.cs-section:nth-child(5) .cs-card-footer {
    background-color: #fff5fa;
    border-top: 1px solid #f2cedd;
}
 
.cs-section:nth-child(5) .cs-card-footer a {
    color: #db7093;
}
 
/* Infrastructure */
.cs-section:nth-child(6) .cs-section-header {
    background-color: #ddcef2;
    border: 1px solid #ddcef2;
}
 
.cs-section:nth-child(6) .cs-card {
    background-color: #faf5ff;
    border: 1px solid #ddcef2;
}
}


/* Category Card System */
.cs-section:nth-child(6) .cs-card-header {
.mp-category-container {
     background-color: #ddcef2;
     display: flex;
     border-bottom: 1px solid #ddcef2;
     flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
}
}


.mp-category {
.cs-section:nth-child(6) .cs-card-footer {
    flex: 1;
     background-color: #faf5ff;
    min-width: calc(50% - 15px);
     border-top: 1px solid #ddcef2;
    box-sizing: border-box;
     padding: 15px;
     border-radius: 8px;
    border: 1px solid; /* Color defined in theme sections */
}
}


@media (max-width: 768px) {
.cs-section:nth-child(6) .cs-card-footer a {
    .mp-category {
    color: #8a2be2;
        min-width: 100%;
    }
}
}


.mp-category h3 {
/* CS Fundamentals */
    margin-top: 0;
.cs-section:nth-child(7) .cs-section-header {
    margin-bottom: 12px;
     background-color: #f2e0ce;
     font-size: 1.1rem;
     border: 1px solid #f2e0ce;
     font-weight: 600;
}
}


.mp-category ul {
.cs-section:nth-child(7) .cs-card {
     margin: 0;
     background-color: #fffaf5;
     padding-left: 20px;
     border: 1px solid #f2e0ce;
}
}


.mp-category li {
.cs-section:nth-child(7) .cs-card-header {
     margin-bottom: 8px;
     background-color: #f2e0ce;
    border-bottom: 1px solid #f2e0ce;
}
}


.mp-category li:last-child {
.cs-section:nth-child(7) .cs-card-footer {
     margin-top: 5px;
     background-color: #fffaf5;
    border-top: 1px solid #f2e0ce;
}
}


/* Statistics Section */
.cs-section:nth-child(7) .cs-card-footer a {
.mp-stats {
     color: #d2691e;
     text-align: center;
    padding: 10px;
    font-size: 0.95rem;
}
}


.mp-stat-number {
/* Community */
     font-weight: bold;
.cs-section:nth-child(8) .cs-section-header {
     background-color: #eee;
    border: 1px solid #eee;
}
}


/* clear fix */
.cs-section:nth-child(8) .cs-card {
.mp-contains-float::after {
     background-color: #f9f9f9;
     content: "";
     border: 1px solid #eee;
    display: block;
     clear: both;
}
}


/* Layout adjustments */
.cs-section:nth-child(8) .cs-card-header {
@media (max-width: 875px) {
     background-color: #eee;
    /* We need to improve Template:POTD as used on the main page so that these
    border-bottom: 1px solid #eee;
    * hacks aren't necessary */
}
    #mp-tfp table,
    #mp-tfp tr,
     #mp-tfp td,
    #mp-tfp tbody {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }


    #mp-tfp tr:first-child td:first-child a.mw-file-description {
.cs-section:nth-child(8) .cs-card-footer {
        text-align: center;
    background-color: #f9f9f9;
        display: table;
     border-top: 1px solid #eee;
        margin: 0 auto;
     }
   
    #articlecount > ul > li::after {
        content: "";
        font-weight: normal;
    }
   
    #articlecount > ul > li {
        display: block;
    }
}
}


@media (min-width: 875px) {
.cs-section:nth-child(8) .cs-card-footer a {
    #mp-upper {
     color: #444;
        display: flex;
    }
   
     #mp-left {
        flex: 1 1 55%;
        margin-right: 2px;
    }
   
    #mp-right {
        flex: 1 1 45%;
        margin-left: 2px;
    }
}
}


/* Light theme colors from original MediaWiki-Common.css */
/* Dark mode theme toggle */
@media screen {
@media screen {
     #mp-topbanner {
     /* Dark mode styles */
         background-color: #f9f9f9;
    html.skin-theme-clientpref-night .cs-header,
         border-color: #ddd;
    html.skin-theme-clientpref-os .cs-header {
         background-color: #171a1d;
         border-color: #676767;
     }
     }
      
 
     #mp-banner {
     html.skin-theme-clientpref-night .cs-title,
         background-color: #fffaf5;
     html.skin-theme-clientpref-os .cs-title {
        border-color: #f2e0ce;
         color: #fff;
     }
     }
      
 
     #mp-left {
     html.skin-theme-clientpref-night .cs-subtitle,
         background-color: #f5fffa;
     html.skin-theme-clientpref-os .cs-subtitle {
        border-color: #cef2e0;
         color: #ccc;
     }
     }
      
 
     #mp-left .mp-h2 {
     html.skin-theme-clientpref-night .cs-search,
         background-color: #cef2e0;
     html.skin-theme-clientpref-os .cs-search {
         border-color: #a3bfb1;
         background-color: #252525;
         border-color: #676767;
     }
     }
      
 
     #mp-right {
     html.skin-theme-clientpref-night .cs-search input[type="search"],
         background-color: #f5faff;
     html.skin-theme-clientpref-night .cs-search input[type="text"],
         border-color: #cedff2;
    html.skin-theme-clientpref-night .cs-search .mw-searchInput,
    html.skin-theme-clientpref-night .cs-search .cdx-text-input__input,
    html.skin-theme-clientpref-os .cs-search input[type="search"],
    html.skin-theme-clientpref-os .cs-search input[type="text"],
    html.skin-theme-clientpref-os .cs-search .mw-searchInput,
    html.skin-theme-clientpref-os .cs-search .cdx-text-input__input {
         background-color: #1f1f1f !important;
        color: #fff !important;
         border-color: #555 !important;
     }
     }
      
 
     #mp-right .mp-h2 {
     html.skin-theme-clientpref-night .cs-search input[type="submit"],
         background-color: #cedff2;
     html.skin-theme-clientpref-night .cs-search button[type="submit"],
         border-color: #a3b0bf;
    html.skin-theme-clientpref-os .cs-search input[type="submit"],
    html.skin-theme-clientpref-os .cs-search button[type="submit"] {
         background-color: #444 !important;
         border-color: #555 !important;
        color: #fff !important;
     }
     }
      
 
     #mp-middle {
     html.skin-theme-clientpref-night .cs-search input[type="submit"]:hover,
        background-color: #fff5fa;
     html.skin-theme-clientpref-night .cs-search button[type="submit"]:hover,
         border-color: #f2cedd;
    html.skin-theme-clientpref-os .cs-search input[type="submit"]:hover,
    html.skin-theme-clientpref-os .cs-search button[type="submit"]:hover {
         background-color: #555 !important;
     }
     }
      
 
     #mp-middle .mp-h2 {
     /* Dark text colors */
        background-color: #f2cedd;
    html.skin-theme-clientpref-night .cs-section-title,
         border-color: #bfa3af;
    html.skin-theme-clientpref-night .cs-card-title,
     html.skin-theme-clientpref-os .cs-section-title,
    html.skin-theme-clientpref-os .cs-card-title {
         color: #fff;
     }
     }
   
 
     #mp-lower {
     html.skin-theme-clientpref-night .cs-card-list li,
        background-color: #faf5ff;
     html.skin-theme-clientpref-os .cs-card-list li {
        border-color: #ddcef2;
         color: #ccc;
    }
   
    #mp-lower .mp-h2 {
        background-color: #ddcef2;
        border-color: #afa3bf;
     }
   
    #mp-bottom {
        /* no background */
        border-color: #e2e2e2;
    }
   
    #mp-bottom .mp-h2 {
         background-color: #eee;
        border-color: #ddd;
     }
     }
}


     /* Custom elements colors */
/* Dark mode section colors - condensed */
     .mp-search-box {
@media screen {
         background-color: #ffffff;
     /* Programming section - dark */
         border: 1px solid #dfe1e5;
     html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-section-header,
    html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-section-header {
         background-color: #104437;
         border-color: #104437;
     }
     }
      
     html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card,
     /* Category cards */
     html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card {
    #mp-left .mp-category {
         background-color: #0b1e1c;
         background-color: #f8fcf9;
         border-color: #104437;
         border-color: #cef2e0;
     }
     }
      
     html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card-header,
     #mp-right .mp-category {
     html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card-header {
         background-color: #f8fafd;
         background-color: #104437;
         border-color: #cedff2;
         border-color: #104437;
     }
     }
      
     html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card-footer,
    #mp-middle .mp-category {
     html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card-footer {
        background-color: #fdf9fb;
         background-color: #0b1e1c;
        border-color: #f2cedd;
         border-color: #104437;
     }
   
    #mp-lower .mp-category {
        background-color: #fbf9fd;
        border-color: #ddcef2;
    }
   
    #mp-bottom .mp-category {
         background-color: #fdfdfd;
         border-color: #e2e2e2;
    }
   
    .mp-category h3 {
        color: #2e51a3;
     }
     }
      
     html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card-footer a,
     .mp-category li:last-child {
     html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card-footer a {
         color: #2e51a3;
         color: #8fbc8f;
        font-weight: 500;
     }
     }


     /* Dark mode */
     /* Data Science section - dark */
     html.skin-theme-clientpref-night #mp-topbanner,
     html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-section-header,
     .skin-citizen-dark #mp-topbanner {
     html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-section-header {
         background-color: #171a1d;
         background-color: #082849;
         border-color: #676767;
         border-color: #082849;
     }
     }
   
     html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card,
     html.skin-theme-clientpref-night #mp-banner,
     html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card {
     .skin-citizen-dark #mp-banner {
         background-color: #0d1a27;
         background-color: #331a00;
         border-color: #082849;
         border-color: #663428;
     }
     }
   
     html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card-header,
     html.skin-theme-clientpref-night #mp-left,
     html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card-header {
     .skin-citizen-dark #mp-left {
         background-color: #082849;
         background-color: #0b1e1c;
         border-color: #082849;
         border-color: #104437;
     }
     }
   
     html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card-footer,
     html.skin-theme-clientpref-night #mp-left .mp-h2,
     html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card-footer {
    .skin-citizen-dark #mp-left .mp-h2 {
        background-color: #104437;
        border-color: #2f4d41;
    }
   
     html.skin-theme-clientpref-night #mp-right,
    .skin-citizen-dark #mp-right {
         background-color: #0d1a27;
         background-color: #0d1a27;
         border-color: #082849;
         border-color: #082849;
     }
     }
      
     html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card-footer a,
     html.skin-theme-clientpref-night #mp-right .mp-h2,
    html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card-footer a {
     .skin-citizen-dark #mp-right .mp-h2 {
        color: #87cefa;
         background-color: #082849;
    }
         border-color: #a3b0bf;
 
    /* Databases section - dark */
     html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-section-header,
     html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-section-header {
         background-color: #882c43;
         border-color: #882c43;
     }
     }
   
     html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card,
     html.skin-theme-clientpref-night #mp-middle,
     html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card {
     .skin-citizen-dark #mp-middle {
         background-color: #270e1a;
         background-color: #270e1a;
         border-color: #882c43;
         border-color: #882c43;
     }
     }
   
     html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card-header,
     html.skin-theme-clientpref-night #mp-middle .mp-h2,
     html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card-header {
     .skin-citizen-dark #mp-middle .mp-h2 {
         background-color: #882c43;
         background-color: #882c43;
         border-color: #926c80;
         border-color: #882c43;
     }
     }
   
     html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card-footer,
     html.skin-theme-clientpref-night #mp-lower,
     html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card-footer {
    .skin-citizen-dark #mp-lower {
         background-color: #270e1a;
        background-color: #130e20;
         border-color: #882c43;
        border-color: #7545ab;
    }
   
     html.skin-theme-clientpref-night #mp-lower .mp-h2,
    .skin-citizen-dark #mp-lower .mp-h2 {
         background-color: #7545ab;
         border-color: #afa3bf;
    }
   
    html.skin-theme-clientpref-night #mp-bottom,
    .skin-citizen-dark #mp-bottom {
        /* no background */
        border-color: #676767;
     }
     }
   
     html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card-footer a,
     html.skin-theme-clientpref-night #mp-bottom .mp-h2,
     html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card-footer a {
     .skin-citizen-dark #mp-bottom .mp-h2 {
         color: #ffb6c1;
         background-color: #3d3d3d;
        border-color: #676767;
     }
     }


     /* Dark mode for custom elements */
     /* Infrastructure section - dark */
     html.skin-theme-clientpref-night .mp-search-box,
     html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-section-header,
     .skin-citizen-dark .mp-search-box {
     html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-section-header {
         background-color: #111827;
         background-color: #7545ab;
         border-color: #374151;
         border-color: #7545ab;
     }
     }
   
     html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card,
    /* Dark mode category cards */
     html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card {
     html.skin-theme-clientpref-night #mp-left .mp-category,
         background-color: #130e20;
     .skin-citizen-dark #mp-left .mp-category {
         border-color: #7545ab;
         background-color: #0a1a19;
         border-color: #104437;
     }
     }
   
     html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card-header,
     html.skin-theme-clientpref-night #mp-right .mp-category,
     html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card-header {
     .skin-citizen-dark #mp-right .mp-category {
         background-color: #7545ab;
         background-color: #0b1622;
         border-color: #7545ab;
         border-color: #082849;
     }
     }
   
     html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card-footer,
     html.skin-theme-clientpref-night #mp-middle .mp-category,
     html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card-footer {
    .skin-citizen-dark #mp-middle .mp-category {
         background-color: #130e20;
        background-color: #220c17;
        border-color: #882c43;
    }
   
     html.skin-theme-clientpref-night #mp-lower .mp-category,
    .skin-citizen-dark #mp-lower .mp-category {
         background-color: #100b1d;
         border-color: #7545ab;
         border-color: #7545ab;
     }
     }
   
     html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card-footer a,
     html.skin-theme-clientpref-night #mp-bottom .mp-category,
     html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card-footer a {
     .skin-citizen-dark #mp-bottom .mp-category {
         color: #da70d6;
         background-color: #1a1a1a;
        border-color: #676767;
     }
     }
      
 
     html.skin-theme-clientpref-night .mp-category h3,
     /* CS Fundamentals section - dark */
     .skin-citizen-dark .mp-category h3 {
     html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-section-header,
         color: #8ab4f8;
     html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-section-header {
         background-color: #663428;
        border-color: #663428;
     }
     }
   
     html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card,
     html.skin-theme-clientpref-night .mp-category li:last-child,
     html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card {
     .skin-citizen-dark .mp-category li:last-child {
         background-color: #331a00;
         color: #8ab4f8;
        border-color: #663428;
     }
     }
}
    html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card-header,
 
     html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card-header {
/* OS night mode */
         background-color: #663428;
@media screen and (prefers-color-scheme: dark) {
         border-color: #663428;
     html.skin-theme-clientpref-os #mp-topbanner {
         background-color: #171a1d;
         border-color: #676767;
     }
     }
      
     html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card-footer,
     html.skin-theme-clientpref-os #mp-banner {
     html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card-footer {
         background-color: #331a00;
         background-color: #331a00;
         border-color: #663428;
         border-color: #663428;
     }
     }
      
     html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card-footer a,
     html.skin-theme-clientpref-os #mp-left {
     html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card-footer a {
         background-color: #0b1e1c;
         color: #ffa500;
        border-color: #104437;
     }
     }
      
 
     html.skin-theme-clientpref-os #mp-left .mp-h2 {
    /* Community section - dark */
         background-color: #104437;
     html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-section-header,
         border-color: #2f4d41;
     html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-section-header {
         background-color: #3d3d3d;
         border-color: #3d3d3d;
     }
     }
      
     html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card,
     html.skin-theme-clientpref-os #mp-right {
     html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card {
        background-color: #0d1a27;
        background-color: #171a1d;
        border-color: #082849;
        border-color: #3d3d3d;
     }
     }
      
     html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card-header,
     html.skin-theme-clientpref-os #mp-right .mp-h2 {
     html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card-header {
         background-color: #082849;
         background-color: #3d3d3d;
         border-color: #a3b0bf;
         border-color: #3d3d3d;
     }
     }
      
     html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card-footer,
     html.skin-theme-clientpref-os #mp-middle {
     html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card-footer {
         background-color: #270e1a;
         background-color: #171a1d;
         border-color: #882c43;
         border-color: #3d3d3d;
     }
     }
      
     html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card-footer a,
     html.skin-theme-clientpref-os #mp-middle .mp-h2 {
     html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card-footer a {
         background-color: #882c43;
         color: #ccc;
        border-color: #926c80;
     }
     }
   
}
    html.skin-theme-clientpref-os #mp-lower {
 
        background-color: #130e20;
/* OS dark mode detection through prefers-color-scheme */
         border-color: #7545ab;
@media (prefers-color-scheme: dark) {
    /* Dark mode handled through class combinations above */
}
 
/* Responsive layout */
@media (max-width: 875px) {
    .cs-title {
         font-size: 1.8em;
     }
     }
      
      
     html.skin-theme-clientpref-os #mp-lower .mp-h2 {
     .cs-subtitle {
         background-color: #7545ab;
         font-size: 1em;
        border-color: #afa3bf;
     }
     }
      
      
     html.skin-theme-clientpref-os #mp-bottom {
     .cs-search {
         /* no background */
         padding: 15px;
        border-color: #676767;
     }
     }
      
      
     html.skin-theme-clientpref-os #mp-bottom .mp-h2 {
     /* Convert grid table to blocks on mobile */
         background-color: #3d3d3d;
    .cs-grid {
         border-color: #676767;
         display: block;
        width: 100%;
        margin: 0;
        padding: 0 10px;
         box-sizing: border-box;
     }
     }
      
      
     /* OS dark mode for custom elements */
     .cs-row {
    html.skin-theme-clientpref-os .mp-search-box {
         display: block;
         background-color: #111827;
        border-color: #374151;
     }
     }
      
      
     /* OS dark mode category cards */
     .cs-cell {
    html.skin-theme-clientpref-os #mp-left .mp-category {
         display: block;
         background-color: #0a1a19;
        width: 100%;
         border-color: #104437;
         margin-bottom: 15px;
     }
     }
      
      
     html.skin-theme-clientpref-os #mp-right .mp-category {
     .cs-card {
         background-color: #0b1622;
         width: 100%;
         border-color: #082849;
         margin: 0 0 15px 0;
     }
     }
      
      
     html.skin-theme-clientpref-os #mp-middle .mp-category {
     .cs-section-header {
         background-color: #220c17;
         text-align: center;
         border-color: #882c43;
         padding: 10px;
     }
     }
      
      
     html.skin-theme-clientpref-os #mp-lower .mp-category {
     .cs-section-title {
         background-color: #100b1d;
         font-size: 1.2em;
        border-color: #7545ab;
     }
     }
   
}
     html.skin-theme-clientpref-os #mp-bottom .mp-category {
 
         background-color: #1a1a1a;
/* Extra small screens */
        border-color: #676767;
@media (max-width: 480px) {
     .cs-search {
         padding: 10px;
     }
     }
      
      
     html.skin-theme-clientpref-os .mp-category h3 {
     .cs-card-header,
         color: #8ab4f8;
    .cs-card-body {
         padding: 10px;
     }
     }
      
      
     html.skin-theme-clientpref-os .mp-category li:last-child {
     .cs-title {
         color: #8ab4f8;
         font-size: 1.6em;
     }
     }
}
}

Latest revision as of 15:51, 12 August 2025

/**
 * ComputerScience.wiki - Main Page Styles
 * With fixed button width and single button
 */

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

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

.cs-title {
    font-size: 2em;
    font-weight: 700;
    margin: 0;
    color: #000;
}

.cs-subtitle {
    font-size: 1.1em;
    font-weight: normal;
    margin: 10px 0 0;
    color: #444;
}

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

/* Search input - restore original background */
.cs-search input[type="search"],
.cs-search input[type="text"],
.cs-search .mw-searchInput,
.cs-search .cdx-text-input__input {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    height: 40px !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    color: #333 !important;
    width: 100% !important;
}

/* Search button */
.cs-search input[name="go"],
.cs-search button[name="go"],
.cs-search input[type="submit"],
.cs-search button[type="submit"],
.cs-search .oo-ui-buttonElement-button {
    width: 80px !important;
    max-width: 80px !important;
    min-width: 80px !important;
    background-color: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    height: 40px !important;
    padding: 5px 8px !important;
    border-radius: 4px !important;
    color: #333 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* Hide the second (fulltext) button */
.cs-search input[name="fulltext"],
.cs-search button[name="fulltext"],
.cs-search input[value="Search full text"],
.cs-search button[value="Search full text"] {
    display: none !important;
}

/* Grid Layout */
.cs-grid {
    display: table;
    width: 100%;
    border-spacing: 10px;
    border-collapse: separate;
    margin: 0 -10px;
}

.cs-row {
    display: table-row;
}

.cs-cell {
    display: table-cell;
    width: 33.333%;
    vertical-align: top;
}

/* Section styling */
.cs-section {
    margin-bottom: 30px;
}

.cs-section-header {
    padding: 12px 15px;
    margin-bottom: 20px;
    border-radius: 6px;
}

.cs-section-title {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
}

/* Card Design */
.cs-card {
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
}

.cs-card-header {
    padding: 12px 15px;
}

.cs-card-title {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
}

.cs-card-body {
    padding: 15px;
}

.cs-card-list {
    margin: 0;
    padding: 0 0 0 20px;
}

.cs-card-list li {
    margin-bottom: 10px;
}

/* Card footer with hover effects */
.cs-card-footer {
    padding: 8px 15px;
    text-align: right;
}

/* Link hover effects */
.cs-card-footer a {
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    transition: all 0.2s ease-in-out;
}

.cs-card-footer a:hover {
    opacity: 0.85;
}

.cs-card-footer a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transition: width 0.3s ease;
}

.cs-card-footer a:hover::after {
    width: 100%;
}

/* Section color schemes */
/* Programming */
.cs-section:nth-child(3) .cs-section-header {
    background-color: #cef2e0;
    border: 1px solid #cef2e0;
}

.cs-section:nth-child(3) .cs-card {
    background-color: #f5fffa;
    border: 1px solid #cef2e0;
}

.cs-section:nth-child(3) .cs-card-header {
    background-color: #cef2e0;
    border-bottom: 1px solid #cef2e0;
}

.cs-section:nth-child(3) .cs-card-footer {
    background-color: #f5fffa;
    border-top: 1px solid #cef2e0;
}

.cs-section:nth-child(3) .cs-card-footer a {
    color: #2e8b57;
}

/* Data Science */
.cs-section:nth-child(4) .cs-section-header {
    background-color: #cedff2;
    border: 1px solid #cedff2;
}

.cs-section:nth-child(4) .cs-card {
    background-color: #f5faff;
    border: 1px solid #cedff2;
}

.cs-section:nth-child(4) .cs-card-header {
    background-color: #cedff2;
    border-bottom: 1px solid #cedff2;
}

.cs-section:nth-child(4) .cs-card-footer {
    background-color: #f5faff;
    border-top: 1px solid #cedff2;
}

.cs-section:nth-child(4) .cs-card-footer a {
    color: #4169e1;
}

/* Databases */
.cs-section:nth-child(5) .cs-section-header {
    background-color: #f2cedd;
    border: 1px solid #f2cedd;
}

.cs-section:nth-child(5) .cs-card {
    background-color: #fff5fa;
    border: 1px solid #f2cedd;
}

.cs-section:nth-child(5) .cs-card-header {
    background-color: #f2cedd;
    border-bottom: 1px solid #f2cedd;
}

.cs-section:nth-child(5) .cs-card-footer {
    background-color: #fff5fa;
    border-top: 1px solid #f2cedd;
}

.cs-section:nth-child(5) .cs-card-footer a {
    color: #db7093;
}

/* Infrastructure */
.cs-section:nth-child(6) .cs-section-header {
    background-color: #ddcef2;
    border: 1px solid #ddcef2;
}

.cs-section:nth-child(6) .cs-card {
    background-color: #faf5ff;
    border: 1px solid #ddcef2;
}

.cs-section:nth-child(6) .cs-card-header {
    background-color: #ddcef2;
    border-bottom: 1px solid #ddcef2;
}

.cs-section:nth-child(6) .cs-card-footer {
    background-color: #faf5ff;
    border-top: 1px solid #ddcef2;
}

.cs-section:nth-child(6) .cs-card-footer a {
    color: #8a2be2;
}

/* CS Fundamentals */
.cs-section:nth-child(7) .cs-section-header {
    background-color: #f2e0ce;
    border: 1px solid #f2e0ce;
}

.cs-section:nth-child(7) .cs-card {
    background-color: #fffaf5;
    border: 1px solid #f2e0ce;
}

.cs-section:nth-child(7) .cs-card-header {
    background-color: #f2e0ce;
    border-bottom: 1px solid #f2e0ce;
}

.cs-section:nth-child(7) .cs-card-footer {
    background-color: #fffaf5;
    border-top: 1px solid #f2e0ce;
}

.cs-section:nth-child(7) .cs-card-footer a {
    color: #d2691e;
}

/* Community */
.cs-section:nth-child(8) .cs-section-header {
    background-color: #eee;
    border: 1px solid #eee;
}

.cs-section:nth-child(8) .cs-card {
    background-color: #f9f9f9;
    border: 1px solid #eee;
}

.cs-section:nth-child(8) .cs-card-header {
    background-color: #eee;
    border-bottom: 1px solid #eee;
}

.cs-section:nth-child(8) .cs-card-footer {
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
}

.cs-section:nth-child(8) .cs-card-footer a {
    color: #444;
}

/* Dark mode theme toggle */
@media screen {
    /* Dark mode styles */
    html.skin-theme-clientpref-night .cs-header,
    html.skin-theme-clientpref-os .cs-header {
        background-color: #171a1d;
        border-color: #676767;
    }

    html.skin-theme-clientpref-night .cs-title,
    html.skin-theme-clientpref-os .cs-title {
        color: #fff;
    }

    html.skin-theme-clientpref-night .cs-subtitle,
    html.skin-theme-clientpref-os .cs-subtitle {
        color: #ccc;
    }

    html.skin-theme-clientpref-night .cs-search,
    html.skin-theme-clientpref-os .cs-search {
        background-color: #252525;
        border-color: #676767;
    }

    html.skin-theme-clientpref-night .cs-search input[type="search"],
    html.skin-theme-clientpref-night .cs-search input[type="text"],
    html.skin-theme-clientpref-night .cs-search .mw-searchInput,
    html.skin-theme-clientpref-night .cs-search .cdx-text-input__input,
    html.skin-theme-clientpref-os .cs-search input[type="search"],
    html.skin-theme-clientpref-os .cs-search input[type="text"],
    html.skin-theme-clientpref-os .cs-search .mw-searchInput,
    html.skin-theme-clientpref-os .cs-search .cdx-text-input__input {
        background-color: #1f1f1f !important;
        color: #fff !important;
        border-color: #555 !important;
    }

    html.skin-theme-clientpref-night .cs-search input[type="submit"],
    html.skin-theme-clientpref-night .cs-search button[type="submit"],
    html.skin-theme-clientpref-os .cs-search input[type="submit"],
    html.skin-theme-clientpref-os .cs-search button[type="submit"] {
        background-color: #444 !important;
        border-color: #555 !important;
        color: #fff !important;
    }

    html.skin-theme-clientpref-night .cs-search input[type="submit"]:hover,
    html.skin-theme-clientpref-night .cs-search button[type="submit"]:hover,
    html.skin-theme-clientpref-os .cs-search input[type="submit"]:hover,
    html.skin-theme-clientpref-os .cs-search button[type="submit"]:hover {
        background-color: #555 !important;
    }

    /* Dark text colors */
    html.skin-theme-clientpref-night .cs-section-title,
    html.skin-theme-clientpref-night .cs-card-title,
    html.skin-theme-clientpref-os .cs-section-title,
    html.skin-theme-clientpref-os .cs-card-title {
        color: #fff;
    }

    html.skin-theme-clientpref-night .cs-card-list li,
    html.skin-theme-clientpref-os .cs-card-list li {
        color: #ccc;
    }
}

/* Dark mode section colors - condensed */
@media screen {
    /* Programming section - dark */
    html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-section-header,
    html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-section-header {
        background-color: #104437;
        border-color: #104437;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card,
    html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card {
        background-color: #0b1e1c;
        border-color: #104437;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card-header,
    html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card-header {
        background-color: #104437;
        border-color: #104437;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card-footer,
    html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card-footer {
        background-color: #0b1e1c;
        border-color: #104437;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card-footer a,
    html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card-footer a {
        color: #8fbc8f;
    }

    /* Data Science section - dark */
    html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-section-header,
    html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-section-header {
        background-color: #082849;
        border-color: #082849;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card,
    html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card {
        background-color: #0d1a27;
        border-color: #082849;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card-header,
    html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card-header {
        background-color: #082849;
        border-color: #082849;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card-footer,
    html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card-footer {
        background-color: #0d1a27;
        border-color: #082849;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card-footer a,
    html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card-footer a {
        color: #87cefa;
    }

    /* Databases section - dark */
    html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-section-header,
    html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-section-header {
        background-color: #882c43;
        border-color: #882c43;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card,
    html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card {
        background-color: #270e1a;
        border-color: #882c43;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card-header,
    html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card-header {
        background-color: #882c43;
        border-color: #882c43;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card-footer,
    html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card-footer {
        background-color: #270e1a;
        border-color: #882c43;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card-footer a,
    html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card-footer a {
        color: #ffb6c1;
    }

    /* Infrastructure section - dark */
    html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-section-header,
    html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-section-header {
        background-color: #7545ab;
        border-color: #7545ab;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card,
    html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card {
        background-color: #130e20;
        border-color: #7545ab;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card-header,
    html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card-header {
        background-color: #7545ab;
        border-color: #7545ab;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card-footer,
    html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card-footer {
        background-color: #130e20;
        border-color: #7545ab;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card-footer a,
    html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card-footer a {
        color: #da70d6;
    }

    /* CS Fundamentals section - dark */
    html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-section-header,
    html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-section-header {
        background-color: #663428;
        border-color: #663428;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card,
    html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card {
        background-color: #331a00;
        border-color: #663428;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card-header,
    html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card-header {
        background-color: #663428;
        border-color: #663428;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card-footer,
    html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card-footer {
        background-color: #331a00;
        border-color: #663428;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card-footer a,
    html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card-footer a {
        color: #ffa500;
    }

    /* Community section - dark */
    html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-section-header,
    html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-section-header {
        background-color: #3d3d3d;
        border-color: #3d3d3d;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card,
    html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card {
        background-color: #171a1d;
        border-color: #3d3d3d;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card-header,
    html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card-header {
        background-color: #3d3d3d;
        border-color: #3d3d3d;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card-footer,
    html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card-footer {
        background-color: #171a1d;
        border-color: #3d3d3d;
    }
    html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card-footer a,
    html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card-footer a {
        color: #ccc;
    }
}

/* OS dark mode detection through prefers-color-scheme */
@media (prefers-color-scheme: dark) {
    /* Dark mode handled through class combinations above */
}

/* Responsive layout */
@media (max-width: 875px) {
    .cs-title {
        font-size: 1.8em;
    }
    
    .cs-subtitle {
        font-size: 1em;
    }
    
    .cs-search {
        padding: 15px;
    }
    
    /* Convert grid table to blocks on mobile */
    .cs-grid {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    .cs-row {
        display: block;
    }
    
    .cs-cell {
        display: block;
        width: 100%;
        margin-bottom: 15px;
    }
    
    .cs-card {
        width: 100%;
        margin: 0 0 15px 0;
    }
    
    .cs-section-header {
        text-align: center;
        padding: 10px;
    }
    
    .cs-section-title {
        font-size: 1.2em;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .cs-search {
        padding: 10px;
    }
    
    .cs-card-header, 
    .cs-card-body {
        padding: 10px;
    }
    
    .cs-title {
        font-size: 1.6em;
    }
}
Retrieved from "https://computerscience.wiki/index.php?title=Template:Main_Page/styles.css&oldid=129"