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 editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/**
/**
  * ComputerScience.wiki Main Page Styles
  * ComputerScience.wiki Main Page Styles
  * Extremely simplified with consistent colors
  * Completely redesigned with symmetric structure and consistent colors
  */
  */


/* Main Page Components */
/* Reset and base styles */
.mp-box {
.mp-container {
     border: 1px solid #aaa;
     max-width: 1200px;
     padding: 0 0.5em 0.5em;
     margin: 0 auto;
     margin-top: 4px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
}


.mp-h2, body.skin-timeless .mp-h2 {
/* Header section */
     border: 1px solid #aaa;
.mp-header {
    margin: 0.5em 0;
     text-align: center;
     padding: 0.2em 0.4em;
     padding: 20px 0;
     font-size: 120%;
     margin-bottom: 20px;
     font-weight: bold;
     background-color: #f8f9fa;
     font-family: inherit;
     border: 1px solid #ddd;
    display: flex;
    align-items: center;
}
}


.mp-h2-icon {
.mp-title {
     margin-right: 10px;
    font-size: 2em;
     font-size: 1.2em;
     margin: 0;
     padding: 0;
}
}


.mp-later {
.mp-subtitle {
     font-size: 85%;
     font-size: 1.1em;
    margin: 10px 0 0;
     font-weight: normal;
     font-weight: normal;
}
}


#mp-welcomecount {
.mp-stats {
     text-align: center;
     font-size: 0.9em;
     margin: 0.4em;
     margin-top: 15px;
}
}


#mp-welcome {
/* Search bar */
     font-size: 162%;
.mp-search {
     padding: 0.1em;
     max-width: 600px;
    margin: 0 auto 30px;
     padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}
}


#mp-welcome h1, #mp-welcome .mw-heading1 {
/* Categories section */
     font-size: inherit;
.mp-section {
    font-family: inherit;
     margin-bottom: 30px;
    display: inline;
    border: none;
}
}


#mp-free {
.mp-section-header {
     font-size: 95%;
     display: flex;
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px 15px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
}
}


#articlecount {
.mp-section-icon {
     font-size: 85%;
     margin-right: 10px;
     margin-top: 10px;
     font-size: 1.2em;
}
}


#articlecount > ul {
.mp-section-title {
     margin: 0;
     font-size: 1.2em;
     padding: 0;
     font-weight: 600;
}
 
#articlecount > ul > li {
     margin: 0;
     margin: 0;
    display: inline;
}
#articlecount > ul > li::after {
    content: " · ";
    font-weight: bold;
}
}


#articlecount > ul > li:last-child::after {
.mp-category-row {
    content: "";
}
 
/* Search Box */
.mp-search-container {
    max-width: 650px;
    margin: 20px auto;
    position: relative;
}
 
.mp-search-box {
    padding: 15px;
    border: 1px solid #ddd;
}
 
/* Simple Category Grid System */
.mp-category-grid {
     display: flex;
     display: flex;
     flex-wrap: wrap;
     flex-wrap: wrap;
     margin: 15px -5px;
     margin: 0 -10px;
}
}


.mp-category {
.mp-category {
     width: 50%;
     width: 33.333%;
    padding: 0 10px;
    margin-bottom: 20px;
     box-sizing: border-box;
     box-sizing: border-box;
    padding: 0 5px 10px;
}
}


@media (max-width: 768px) {
@media (max-width: 900px) {
     .mp-category {
     .mp-category {
         width: 100%;
         width: 50%;
     }
     }
}
}


.mp-category h3 {
@media (max-width: 600px) {
    margin-top: 0;
    .mp-category {
    margin-bottom: 10px;
        width: 100%;
    padding-bottom: 5px;
     }
    font-size: 1rem;
     font-weight: normal;
    border-bottom: 1px solid #eee;
}
}


.mp-category ul {
.mp-category-content {
     margin: 0;
     border: 1px solid #ddd;
     padding-left: 20px;
     background-color: #fff;
    height: 100%;
}
}


.mp-category li {
.mp-category-header {
     margin-bottom: 5px;
     background-color: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
}
}


.mp-category li:last-child {
.mp-category-title {
     margin-top: 5px;
    font-size: 1em;
     margin: 0;
    font-weight: 600;
}
}


/* Statistics Section */
.mp-category-list {
.mp-stats {
     padding: 10px 15px;
     text-align: center;
     margin: 0;
     padding: 10px;
     list-style-position: inside;
     font-size: 0.95rem;
}
}


.mp-stat-number {
.mp-category-list li {
     font-weight: bold;
     padding: 5px 0;
}
}


/* clear fix */
.mp-category-all {
.mp-contains-float::after {
    padding: 8px 15px;
     content: "";
     border-top: 1px solid #ddd;
     display: block;
     background-color: #f8f9fa;
     clear: both;
     text-align: right;
}
}


/* Layout adjustments */
/* Dark mode */
@media (max-width: 875px) {
@media (prefers-color-scheme: dark) {
     #mp-tfp table,
     .mp-header,
     #mp-tfp tr,
     .mp-section-header,
    #mp-tfp td,
     .mp-category-header,
     #mp-tfp tbody {
     .mp-category-all {
        display: block !important;
         background-color: #2d333b;
        width: 100% !important;
        box-sizing: border-box;
     }
 
    #mp-tfp tr:first-child td:first-child a.mw-file-description {
         text-align: center;
        display: table;
        margin: 0 auto;
     }
     }
      
      
     #articlecount > ul > li::after {
     .mp-header,
        content: "";
    .mp-section-header,
         font-weight: normal;
    .mp-category-content,
    .mp-category-header,
    .mp-category-all,
    .mp-search {
         border-color: #444c56;
     }
     }
      
      
     #articlecount > ul > li {
     .mp-category-content {
         display: block;
         background-color: #22272e;
    }
}
 
@media (min-width: 875px) {
    #mp-upper {
        display: flex;
     }
     }
      
      
     #mp-left {
     .mp-search {
         flex: 1 1 55%;
         background-color: #22272e;
        margin-right: 2px;
    }
   
    #mp-right {
        flex: 1 1 45%;
        margin-left: 2px;
     }
     }
}
}


/* Light theme colors */
/* MediaWiki compatibility */
@media screen {
.mp-contains-float::after {
    #mp-topbanner {
     content: "";
        background-color: #f9f9f9;
     display: block;
        border-color: #ddd;
     clear: both;
    }
   
    #mp-banner {
        background-color: #fffaf5;
        border-color: #f2e0ce;
    }
   
    #mp-left {
        background-color: #f5fffa;
        border-color: #cef2e0;
    }
   
    #mp-left .mp-h2 {
        background-color: #cef2e0;
        border-color: #a3bfb1;
    }
   
    #mp-right {
        background-color: #f5faff;
        border-color: #cedff2;
    }
   
     #mp-right .mp-h2 {
        background-color: #cedff2;
        border-color: #a3b0bf;
    }
   
     #mp-middle {
        background-color: #fff5fa;
        border-color: #f2cedd;
    }
      
    #mp-middle .mp-h2 {
        background-color: #f2cedd;
        border-color: #bfa3af;
    }
   
    #mp-lower {
        background-color: #faf5ff;
        border-color: #ddcef2;
    }
   
    #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;
    }
 
    /* Simplified colors for ALL categories */
    .mp-search-box {
        background-color: #ffffff;
    }
   
    .mp-category h3 {
        color: #333333;
    }
   
    .mp-category li:last-child {
        color: #2e51a3;
    }
 
    /* Dark mode */
    html.skin-theme-clientpref-night #mp-topbanner,
    .skin-citizen-dark #mp-topbanner {
        background-color: #171a1d;
        border-color: #676767;
    }
   
    html.skin-theme-clientpref-night #mp-banner,
    .skin-citizen-dark #mp-banner {
        background-color: #331a00;
        border-color: #663428;
    }
   
    html.skin-theme-clientpref-night #mp-left,
    .skin-citizen-dark #mp-left {
        background-color: #0b1e1c;
        border-color: #104437;
    }
   
    html.skin-theme-clientpref-night #mp-left .mp-h2,
    .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;
        border-color: #082849;
    }
   
    html.skin-theme-clientpref-night #mp-right .mp-h2,
    .skin-citizen-dark #mp-right .mp-h2 {
        background-color: #082849;
        border-color: #a3b0bf;
    }
   
    html.skin-theme-clientpref-night #mp-middle,
    .skin-citizen-dark #mp-middle {
        background-color: #270e1a;
        border-color: #882c43;
    }
   
    html.skin-theme-clientpref-night #mp-middle .mp-h2,
    .skin-citizen-dark #mp-middle .mp-h2 {
        background-color: #882c43;
        border-color: #926c80;
    }
   
    html.skin-theme-clientpref-night #mp-lower,
    .skin-citizen-dark #mp-lower {
        background-color: #130e20;
        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 #mp-bottom .mp-h2,
    .skin-citizen-dark #mp-bottom .mp-h2 {
        background-color: #3d3d3d;
        border-color: #676767;
    }
 
    /* Dark mode for custom elements - extremely simplified */
    html.skin-theme-clientpref-night .mp-search-box,
    .skin-citizen-dark .mp-search-box {
        background-color: #1f2937;
        border-color: #374151;
    }
   
    html.skin-theme-clientpref-night .mp-category h3,
    .skin-citizen-dark .mp-category h3 {
        color: #e5e7eb;
        border-bottom-color: #374151;
    }
   
    html.skin-theme-clientpref-night .mp-category li:last-child,
    .skin-citizen-dark .mp-category li:last-child {
        color: #8ab4f8;
    }
}
 
/* OS night mode */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os #mp-topbanner {
        background-color: #171a1d;
        border-color: #676767;
    }
   
    html.skin-theme-clientpref-os #mp-banner {
        background-color: #331a00;
        border-color: #663428;
    }
   
    html.skin-theme-clientpref-os #mp-left {
        background-color: #0b1e1c;
        border-color: #104437;
    }
   
    html.skin-theme-clientpref-os #mp-left .mp-h2 {
        background-color: #104437;
        border-color: #2f4d41;
    }
   
    html.skin-theme-clientpref-os #mp-right {
        background-color: #0d1a27;
        border-color: #082849;
    }
   
    html.skin-theme-clientpref-os #mp-right .mp-h2 {
        background-color: #082849;
        border-color: #a3b0bf;
    }
   
    html.skin-theme-clientpref-os #mp-middle {
        background-color: #270e1a;
        border-color: #882c43;
    }
   
    html.skin-theme-clientpref-os #mp-middle .mp-h2 {
        background-color: #882c43;
        border-color: #926c80;
    }
   
    html.skin-theme-clientpref-os #mp-lower {
        background-color: #130e20;
        border-color: #7545ab;
    }
   
    html.skin-theme-clientpref-os #mp-lower .mp-h2 {
        background-color: #7545ab;
        border-color: #afa3bf;
    }
   
    html.skin-theme-clientpref-os #mp-bottom {
        /* no background */
        border-color: #676767;
    }
   
    html.skin-theme-clientpref-os #mp-bottom .mp-h2 {
        background-color: #3d3d3d;
        border-color: #676767;
    }
   
    /* OS dark mode for custom elements */
    html.skin-theme-clientpref-os .mp-search-box {
        background-color: #1f2937;
        border-color: #374151;
    }
   
    html.skin-theme-clientpref-os .mp-category h3 {
        color: #e5e7eb;
        border-bottom-color: #374151;
    }
   
    html.skin-theme-clientpref-os .mp-category li:last-child {
        color: #8ab4f8;
    }
}
}

Revision as of 18:12, 10 August 2025

/**
 * ComputerScience.wiki Main Page Styles
 * Completely redesigned with symmetric structure and consistent colors
 */

/* Reset and base styles */
.mp-container {
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Header section */
.mp-header {
    text-align: center;
    padding: 20px 0;
    margin-bottom: 20px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
}

.mp-title {
    font-size: 2em;
    margin: 0;
    padding: 0;
}

.mp-subtitle {
    font-size: 1.1em;
    margin: 10px 0 0;
    font-weight: normal;
}

.mp-stats {
    font-size: 0.9em;
    margin-top: 15px;
}

/* Search bar */
.mp-search {
    max-width: 600px;
    margin: 0 auto 30px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Categories section */
.mp-section {
    margin-bottom: 30px;
}

.mp-section-header {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px 15px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
}

.mp-section-icon {
    margin-right: 10px;
    font-size: 1.2em;
}

.mp-section-title {
    font-size: 1.2em;
    font-weight: 600;
    margin: 0;
}

.mp-category-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.mp-category {
    width: 33.333%;
    padding: 0 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .mp-category {
        width: 50%;
    }
}

@media (max-width: 600px) {
    .mp-category {
        width: 100%;
    }
}

.mp-category-content {
    border: 1px solid #ddd;
    background-color: #fff;
    height: 100%;
}

.mp-category-header {
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
}

.mp-category-title {
    font-size: 1em;
    margin: 0;
    font-weight: 600;
}

.mp-category-list {
    padding: 10px 15px;
    margin: 0;
    list-style-position: inside;
}

.mp-category-list li {
    padding: 5px 0;
}

.mp-category-all {
    padding: 8px 15px;
    border-top: 1px solid #ddd;
    background-color: #f8f9fa;
    text-align: right;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .mp-header,
    .mp-section-header,
    .mp-category-header,
    .mp-category-all {
        background-color: #2d333b;
    }
    
    .mp-header,
    .mp-section-header,
    .mp-category-content,
    .mp-category-header,
    .mp-category-all,
    .mp-search {
        border-color: #444c56;
    }
    
    .mp-category-content {
        background-color: #22272e;
    }
    
    .mp-search {
        background-color: #22272e;
    }
}

/* MediaWiki compatibility */
.mp-contains-float::after {
    content: "";
    display: block;
    clear: both;
}
Retrieved from "https://computerscience.wiki/index.php?title=Template:Main_Page/styles.css&oldid=83"