MediaWiki:Mobile.css: Difference between revisions

MediaWiki interface page
(Created page with "→‎All CSS here will be loaded for users of the mobile site: →‎Testing table improvements suggested here: https://medium.com/allenhwkim/mobile-friendly-table-b0cb066dbc0e: @media screen and (max-width: 600px) { table thead { display: none; } table td { display: flex; } table td::before { content: attr(label); font-weight: bold; width: 120px; min-width: 120px; } }")
 
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* All CSS here will be loaded for users of the mobile site */
/* 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 */


/* Testing table improvements suggested here: https://medium.com/allenhwkim/mobile-friendly-table-b0cb066dbc0e */
/* 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"
    ". .";
}


@media screen and (max-width: 600px) {
/* Mobile Styling */
   table thead {
@media only screen and (max-width: 768px) {
    display: none;
/* For mobile phones: */
   }  table td {
.container {  display: grid;
     display: flex;
   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;
}
    
    
  table td::before {
.mp-bordered {
    content: attr(label);
  background-color: #eeeeee;
    font-weight: bold;
    width: 120px;
    min-width: 120px;
   }
   }
}
 
 
/* END */

Latest revision as of 19:47, 17 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 */