Difference between revisions of "MediaWiki:Mobile.css"

From Life After BOB Wiki
Jump to navigation Jump to search
Tags: Mobile web edit Mobile edit
Tags: Mobile web edit Mobile edit
 
(34 intermediate revisions by 2 users not shown)
Line 12: Line 12:
 
}
 
}
  
h1.firstHeading{
+
#p-banner{
 +
  font-family: "Averia Serif Libre" !important;
 +
}
 +
 
 +
.color-left,
 +
.color-right,
 +
.color-middle {
 +
  background: #eeaabb;
 +
}
 +
 
 +
.tools-inline li.selected {
 +
    border-bottom-color: #914a6e;
 +
}
 +
 
 +
.mw-body h1.firstHeading {
 +
    border-bottom: solid 4px #914a6e;
 +
}
 +
 
 +
#section_0{
 
   font-family:"Averia Serif Libre";
 
   font-family:"Averia Serif Libre";
 
   font-weight:700;
 
   font-weight:700;
Line 22: Line 40:
  
 
.largetext{
 
.largetext{
   font-size:1.4em;
+
   font-size:1em;
 
   text-align:center;
 
   text-align:center;
 
   font-family:'Averia Serif Libre'
 
   font-family:'Averia Serif Libre'
Line 28: Line 46:
  
 
.mp-main-container{
 
.mp-main-container{
 +
  font-size:0.85em;
 
   width:90%;
 
   width:90%;
 
   flex-direction:column;
 
   flex-direction:column;
 
   align-items:center;
 
   align-items:center;
 
   justify-content:space-between;
 
   justify-content:space-between;
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
margin-top:5%;
 
}
 
}
  
 
.mp-flex-box{
 
.mp-flex-box{
 
width:100%;
 
width:100%;
 +
margin-bottom:2%
 
}
 
}
  
Line 55: Line 78:
  
 
#fc-container{
 
#fc-container{
width:100%;
+
width:90%;
 +
margin-left:auto;
 +
margin-right:auto;
 +
 
}
 
}
  
Line 82: Line 108:
 
   text-align:center;
 
   text-align:center;
 
   margin-top:1em;
 
   margin-top:1em;
   font-size:1.4em;
+
   font-size:1.1em;
 
   font-family:"Averia Serif Libre";
 
   font-family:"Averia Serif Libre";
 
   font-weight:400;
 
   font-weight:400;
Line 93: Line 119:
  
 
.mp-category a{
 
.mp-category a{
  color:initial;
+
 
  text-decoration:none;
 
  background-image: linear-gradient(#0645ad, #0645ad);
 
  background-size: 100% 1px, auto;
 
  background-repeat: no-repeat;
 
  background-position: left bottom;
 
  transition: all .2s ease-out;
 
 
}
 
}
  
 
.mp-category a:hover{
 
.mp-category a:hover{
  background-size: 100% 100%, auto;
+
 
  color:white;
 
  text-decoration:none;
 
 
}
 
}
  
 
.fc-text{
 
.fc-text{
 
   text-align:center;
 
   text-align:center;
 +
  font-family: Arial;
 +
  font-size:0.75em;
 
}
 
}
  
 
.fc-text a{
 
.fc-text a{
  color:initial;
+
 
  text-decoration:none;
 
  background-image: linear-gradient(#0645ad, #0645ad);
 
  background-size: 100% 1px, auto;
 
  background-repeat: no-repeat;
 
  background-position: left bottom;
 
  transition: all .2s ease-out;
 
 
}
 
}
  
 
.fc-text a:hover{
 
.fc-text a:hover{
  background-size: 100% 100%, auto;
+
 
  color:white;
 
  text-decoration:none;
 
 
}
 
}
  
Line 132: Line 144:
 
   justify-items:center;
 
   justify-items:center;
 
   align-items:center;
 
   align-items:center;
   width:100%;
+
   width:90%;
   grid-gap: 10px;
+
   row-gap:0px;
   grid-template-columns: repeat(auto-fill, 220px);
+
  column-gap:1px;
 +
   grid-template-columns: repeat(auto-fill, 49.7%);
  
 
}
 
}
  
 
.fc-grid>* {
 
.fc-grid>* {
   width: 220px;
+
   width: 100%;
   height:350px;
+
   height:210px;
 
   text-align:center;
 
   text-align:center;
 
   border-radius:10px;
 
   border-radius:10px;
 
   border:1px grey solid;
 
   border:1px grey solid;
 +
  padding-bottom:1em;
 +
  padding-top:1em;
 
}
 
}
  
 
.mp-category-grid{
 
.mp-category-grid{
 
   display: grid;
 
   display: grid;
   justify-items:center;
+
  justify-items:center;
 +
   align-items:center;
 +
justify-content: center;
 
   width:100%;
 
   width:100%;
   grid-gap: 10px;
+
   row-gap:0px;
   grid-template-columns: repeat(auto-fill, 120px);
+
  column-gap:1px;
 +
   grid-template-columns: repeat(auto-fill, 100px);
  
 
}
 
}
  
 
.mp-category-grid>* {
 
.mp-category-grid>* {
   width: 60px;
+
   width: 100px;
 +
  height: 160px;
 
   text-align:center;
 
   text-align:center;
 +
  border-radius:10px;
 +
  border:1px grey solid;
 +
  padding-bottom:1em;
 
}
 
}
  
Line 163: Line 185:
 
.fc-img img{
 
.fc-img img{
 
   max-width:100%;
 
   max-width:100%;
  height:auto;
+
    position: absolute;
  margin: auto;
+
    left: -100%;
  display: block;
+
    right: -100%;
  border-radius:10px;
+
    top: -100%;
  box-shadow:2px 2px 4px #222222;
+
    bottom: -100%;
 +
    margin: auto;  
 +
    height: auto;
 +
    width: auto;
 
}
 
}
  
 +
.fc-img{
 +
margin-bottom:2em;
 +
text-align:center;
 +
width:120px;
 +
min-height: 120px;
 +
max-height: 120px;
 +
margin-top:1em;
 +
margin-left:auto;
 +
margin-right:auto;
 +
position:relative;
 +
overflow:hidden;
 +
border-radius:10px;
 +
  box-shadow:2px 2px 4px rgba(0,0,0,0.3);
 +
}
  
  
Line 210: Line 249:
 
   flex-basis:60%;
 
   flex-basis:60%;
 
   width:60%;
 
   width:60%;
 +
}
 +
 +
.formtable input{
 +
  width: 95% !important;
 +
 
 
}
 
}

Latest revision as of 22:35, 26 August 2021

/* All CSS here will be loaded for users of the mobile site */
/* Averia */
@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@400;700&display=swap');

body{
  font-family: "Arial",sans-serif;
background-image: url(https://d2w9rnfcy7mm78.cloudfront.net/12168207/original_451377e6bf71f18de13dabbc7d064c96.png);
  background-position:center top;
  background-repeat: repeat-y;
  background-attachment: fixed;
  background-size: cover;
}

#p-banner{
  font-family: "Averia Serif Libre" !important;
}

.color-left,
.color-right,
.color-middle {
  background: #eeaabb;
}

.tools-inline li.selected {
    border-bottom-color: #914a6e;
}

.mw-body h1.firstHeading {
    border-bottom: solid 4px #914a6e;
}

#section_0{
   font-family:"Averia Serif Libre";
   font-weight:700;
}

body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { 
  display: none; 
}

.largetext{
  font-size:1em;
  text-align:center;
  font-family:'Averia Serif Libre'
}

.mp-main-container{
  font-size:0.85em;
  width:90%;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  margin-left:auto;
  margin-right:auto;
margin-top:5%;
}

.mp-flex-box{
width:100%;
margin-bottom:2%
}

#about-container{
width:100%; 
height:60%;
}

#categories-container{
width:100%;
height:40%;
margin-top:2%;
}

#fe-container{
width:100%;
height:75%
}

#fc-container{
width:90%;
margin-left:auto;
margin-right:auto;
 
}

.mp-title a{
  color:initial;
  text-decoration:none;
  background-image: linear-gradient(#0645ad, #0645ad);
  background-size: 100% 1px, auto;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: all .2s ease-out;
}

.mp-title a:hover{
  background-size: 100% 100%, auto;
  color:white;
  text-decoration:none;
}

.mp-item-box{
  border:2px grey solid;
  border-radius:10px;
}

.mp-title{
  text-align:center;
  margin-top:1em;
  font-size:1.1em;
  font-family:"Averia Serif Libre";
  font-weight:400;
}

.mp-category{
  text-align:center;
  font-size:0.75em;
}

.mp-category a{

}

.mp-category a:hover{

}

.fc-text{
  text-align:center;
  font-family: Arial;
  font-size:0.75em;
}

.fc-text a{

}

.fc-text a:hover{

}

.fc-grid{
  display: grid;
  justify-items:center;
  align-items:center;
  width:90%;
  row-gap:0px;
  column-gap:1px;
  grid-template-columns: repeat(auto-fill, 49.7%);

}

.fc-grid>* {
  width: 100%;
  height:210px;
  text-align:center;
  border-radius:10px;
  border:1px grey solid;
  padding-bottom:1em;
  padding-top:1em;
}

.mp-category-grid{
  display: grid;
   justify-items:center;
  align-items:center;
justify-content: center;
  width:100%;
  row-gap:0px;
  column-gap:1px;
  grid-template-columns: repeat(auto-fill, 100px);

}

.mp-category-grid>* {
  width: 100px;
  height: 160px;
  text-align:center;
  border-radius:10px;
  border:1px grey solid;
  padding-bottom:1em;
}


.fc-img img{
  max-width:100%;
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto; 
    height: auto;
    width: auto;
}

.fc-img{
margin-bottom:2em;
text-align:center;
width:120px;
min-height: 120px;
max-height: 120px;
margin-top:1em;
margin-left:auto;
margin-right:auto;
position:relative;
overflow:hidden;
border-radius:10px;
  box-shadow:2px 2px 4px rgba(0,0,0,0.3);
}


.fe-img img{
  max-width:55%;
  height:auto;

}

.fe-img{
  height:80%
}


.mp-character-img img{
  max-width:100%;
  height:auto;
  margin: auto;
  display: block;
}

#randompage{
width:100%;
margin-top:2%;
height:25%
}


/* Infoboxs */
aside.portable-infobox{
  line-height: 1.25em;
}

.pi-data-label{
  flex-basis:40%;
  width:40%;
}

.pi-data-value{
  flex-basis:60%;
  width:60%;
}

.formtable input{
  width: 95% !important;
  
}