MediaWiki:Mobile.css: Difference between revisions

Revision as of 09:14, 15 October 2022

/* All CSS here will be loaded for users of the mobile site */
/* Designed for Vector skin but will need to be modified for Citizen Skin */

/* Fix compressed image width on mobile in Citizen skin */
img {
    max-width:600px;
}

/* Hide the Main Page title  */
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { 
  display: none; 
}

/* Main Page Grid */
.container {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 0.8em 0.8em;
  grid-auto-flow: row;
  grid-template-areas:
    "Banner Banner"
    "Intro Intro"
    "Nested NestedR"
    "Misc Misc"
    ". .";
}

/* Mobile Styling */
@media only screen and (max-width: 768px) {
/* For mobile phones: */
.container {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 0.8em 0.8em;
  grid-auto-flow: row;
  grid-template-areas:
    "Banner Banner"
    "Intro Intro"
    "NestedR NestedR"
    "Nested Nested"
    "Misc Misc"
    ". .";
  }
}

.Banner { grid-area: Banner; }
.Intro { grid-area: Intro; }
.Featured { grid-area: Featured; }
.FeaturedSponsor { grid-area: FeaturedSponsor; }
.MoreFeatured { grid-area: MoreFeatured; }
.Contents { grid-area: Contents; }
.Lore { grid-area: Lore; }
.FAQ { grid-area: FAQ; }
.Misc { grid-area: Misc; }

/* Nested Grid Styling */
.Nested { grid-area: Nested; }
.NestedR { grid-area: NestedR; }

.Nested {
  display: grid;
  grid-auto-rows: min-content;
  grid-template-areas:
    "Featured"
    "FeaturedSponsor"
    "MoreFeatured"
    "Lore"
    ".";
  /* grid-template-columns: repeat(1, 1fr);
  grid-gap: 1em; */
}

.NestedR {
  display: grid;
  grid-auto-rows: min-content;
  grid-template-areas:
    "Contents"
    "FAQ"
    ".";
  /* grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: auto;
  grid-gap: 1em; */
}

/* Main Page Disclaimer styling */
.mp-bordered {
  margin-bottom: 0.4em;
  padding: 0.4em;
  border-width: 1px;
  border-style: solid;  
  border-color: #ddd;
  border-radius: 0.5em;
  overflow: auto;
}
/* Removed - white-space: nowrap; background-color: #f9f9f9; added border-radius */

/* START - Styling the Main Page content boxes */

/* Changing the margins on the thumbnail in the intro */
div.Intro > div > div >.tleft {
  margin: 0em 1.4em 0em 0;  
}

.box {
  display: inline-block;
  border: 1px solid #d9d9d9;
  border-radius: 0.5em;
}
/* Removed - width: 100%; border-radius: 10px 10px 0 0; background-color: #fff; */

.box .box-header {
  display: block;
  clear: both;
  margin: 0;
  border-bottom: 1px solid #d9d9d9;
  padding: 8px 20px;
  overflow: hidden;
}
/* Removed - border-radius: 10px 10px 0 0; border-top: 1px solid #fff; background-color: #f2f2f2; */

.box-header {
  text-align: right;
  font-size: 120%;
  font-weight: bold;
  font-family: inherit;
  margin: 0.5em;
}

.box-content {
  margin: 0.5em;
  padding-top: 0.1em;
  padding-right: 0.6em;
  padding-bottom: 0.1em;
  padding-left: 0.6em;
}

.Featured > .box > .box-header {
  background-color: #cef2e0;
  border-bottom-color: #cef2e0;
}

.Featured > .box  {
  border-color: #cef2e0;
  background-color: #f5fffa;
}

.MoreFeatured > .box > .box-header {
  background-color: #cef2e0;
  border-bottom-color: #cef2e0;
}

.MoreFeatured > .box  {
  border-color: #cef2e0;
  background-color: #f5fffa;
}

/* FEATURED SPONSOR SECTION */
.FeaturedSponsor > .box  {
  border-color: #afa3bf;
  background-color: #faf5ff;
}
.FeaturedSponsor > .box > .box-header {
  background-color: #ddcef2;
  border-bottom-color: #afa3bf;
}
.featuredtable {
  background-color:#faf5ff;
  color:#202122;
  margin:1em 0;
  border:1px solid #afa3bf;
  border-collapse:collapse
 }
 .featuredtable > tr > th,
 .featuredtable > tr > td,
 .featuredtable > * > tr > th,
 .featuredtable > * > tr > td {
  border:1px solid #afa3bf;
  padding:0.2em 0.4em;
 }
 .featuredtable > tr > th,
 .featuredtable > * > tr > th {
  background-color:#ddcef2;
  text-align:center
 }
 .featuredtable > caption {
  font-weight:bold
 }
/* END FEATURED SPONSOR */

.Lore > .box > .box-header {
  background-color: #cef2e0;
  border-bottom-color: #cef2e0;
}

.Lore > .box  {
  border-color: #cef2e0;
  background-color: #f5fffa;
}

/* GREEN TABLES */
.web3table {
  background-color:#f5fffa;
  color:#202122;
  margin:1em 0;
  border:1px solid #ABC9BA;
  border-collapse:collapse
 }
/*   border:1px solid #cef2e0; */
 .web3table > tr > th,
 .web3table > tr > td,
 .web3table > * > tr > th,
 .web3table > * > tr > td {
  border:1px solid #ABC9BA;
  padding:0.2em 0.4em;
 }
 .web3table > tr > th,
 .web3table > * > tr > th {
  background-color:#cef2e0;
  text-align:center
 }
 .web3table > caption {
  font-weight:bold
 }

/*BLUE BOX*/
.Contents > .box > .box-header {
  background-color: #cedff2;
  border-bottom-color: #cedff2;
}

.Contents > .box  {
  border-color: #cedff2;
  background-color: #f5faff;
}

.FAQ > .box > .box-header {
  background-color: #cedff2;
  border-bottom-color: #cedff2;
}

.FAQ > .box  {
  border-color: #cedff2;
  background-color: #f5faff;
}

/* BLUE TABLES */
.arttable {
  background-color:#f5faff;
  color:#202122;
  margin:1em 0;
  border:1px solid #ABB9C9;
  border-collapse:collapse
 }
/* border:1px solid #cedff2; */
 .arttable > tr > th,
 .arttable > tr > td,
 .arttable > * > tr > th,
 .arttable > * > tr > td {
  border:1px solid #ABB9C9;
  padding:0.2em 0.4em;
 }
 .arttable > tr > th,
 .arttable > * > tr > th {
  background-color:#cedff2;
  text-align:center
 }
 .arttable > caption {
  font-weight:bold
 }

/* ORANGE TABLES */
.orgtable {
  background-color:#FFF8EB;
  color:#202122;
  margin:1em 0;
  border:1px solid #ABB9C9;
  border-collapse:collapse
 }

 .orgtable > tr > th,
 .orgtable > tr > td,
 .orgtable > * > tr > th,
 .orgtable > * > tr > td {
  border:1px solid #ABB9C9;
  padding:0.2em 0.4em;
 }
 .orgtable > tr > th,
 .orgtable > * > tr > th {
  background-color:#FFDEA6;
  text-align:center
 }
 .orgtable > caption {
  font-weight:bold
 }


/* PURPLE BOX */
.Misc > .box > .box-header {
  background-color: #ddcef2;
  border-bottom-color: #afa3bf;
}

.Misc > .box  {
  border-color: #afa3bf;
  background-color: #faf5ff;
}
  
.mp-bordered {
  background-color: #eeeeee;
  }


/* END */