MediaWiki:Common.css: Difference between revisions

From Terra Invicta Official Wiki
(Created page with "→‎CSS placed here will be applied to all skins: →‎SITE COLORS: #content { background-color: #000000; } #bodyContent { background-color: #3B3737; } #firstHeading { background-color: #e6ffb4; } #catlinks { background-color: #e6ffb4; } #p-logo { background-color: #e6ffb4; } #p-navigation { background-color: #white; } #p-navigation .pBody { background-color: #e6ffb4; } #p-search { background-color: #e6ffb4; } #p-search .pBody { background-color: #e6ffb4; } #...")
 
No edit summary
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */


/* SITE COLORS */
/* Grid layout for front page */
/* grid container (large screen) */
.grid-container {
    display: grid;
    grid-template-areas:
        'header header header header header header'
        'middle middle middle middle middle right'
        'middle2 middle2 middle2 middle2 middle2 right'
        'middle3 middle3 middle3 middle3 middle3 right'
        'bottom bottom bottom bottom bottom right';
}


#content { background-color: #000000; }
/* grid container (medium screen) */
@media only screen and (max-width: 80rem) {
  .grid-container {
    grid-template-areas:  
        'header header header header header header'
        'middle middle middle middle right right'
        'middle2 middle2 middle2 middle2 right right '
        'middle3 middle3 middle3 middle3 middle3 middle3'
        'bottom bottom bottom bottom bottom bottom';
    }
}


#bodyContent { background-color: #3B3737; }
/* grid container (small screen) */
@media only screen and (max-width: 64rem) {
  .grid-container {
    grid-template-areas:  
        'header header header header header header'
        'middle middle middle middle middle middle'
        'middle2 middle2 middle2 middle2 middle2 middle2'
        'middle3 middle3 middle3 middle3 middle3 middle3'
        'right right right right right right'
        'bottom bottom bottom bottom bottom bottom';
    }
}


#firstHeading { background-color: #e6ffb4; }
/* grid area location classes */
 
.header { grid-area: header; }
#catlinks { background-color: #e6ffb4; }
.bottom { grid-area: bottom; }
 
.left { grid-area: left; }
#p-logo { background-color: #e6ffb4; }
.right { grid-area: right; }
 
.middle { grid-area: middle; }
#p-navigation { background-color: #white; }
.middle2 { grid-area: middle2; }
 
.middle3 { grid-area: middle3; }
#p-navigation .pBody { background-color: #e6ffb4; }
 
#p-search { background-color: #e6ffb4; }
 
#p-search .pBody { background-color: #e6ffb4; }
 
#p-tb { background-color: #e6ffb4; }
 
#p-tb .pBody { background-color: #e6ffb4; }
 
#footer { background-color: #e6ffb4!important; }
 
body { background-color: #25252F; }
 
#globalWrapper { background-color: #e6ffb4; }
 
#column-content { background-color: #3B3737; }
 
#column-one { background-color: #3B3737; }
 
/* TEXT COLORS */
 
#content { color: white }

Latest revision as of 10:34, 27 October 2022

/* CSS placed here will be applied to all skins */

/* Grid layout for front page */
/* grid container (large screen) */
.grid-container {
    display: grid;
    grid-template-areas:
        'header header header header header header' 
        'middle middle middle middle middle right' 
        'middle2 middle2 middle2 middle2 middle2 right' 
        'middle3 middle3 middle3 middle3 middle3 right' 
        'bottom bottom bottom bottom bottom right';
} 

/* grid container (medium screen) */
@media only screen and (max-width: 80rem) {
  .grid-container {
    grid-template-areas: 
        'header header header header header header' 
        'middle middle middle middle right right' 
        'middle2 middle2 middle2 middle2 right right ' 
        'middle3 middle3 middle3 middle3 middle3 middle3' 
        'bottom bottom bottom bottom bottom bottom';
    }
}

/* grid container (small screen) */
@media only screen and (max-width: 64rem) {
  .grid-container {
    grid-template-areas: 
        'header header header header header header' 
        'middle middle middle middle middle middle' 
        'middle2 middle2 middle2 middle2 middle2 middle2' 
        'middle3 middle3 middle3 middle3 middle3 middle3' 
        'right right right right right right' 
        'bottom bottom bottom bottom bottom bottom';
    }
}

/* grid area location classes */
.header { grid-area: header; }
.bottom { grid-area: bottom; }
.left { grid-area: left; }
.right { grid-area: right; }
.middle { grid-area: middle; }
.middle2 { grid-area: middle2; }
.middle3 { grid-area: middle3; }