Difference between revisions of "MediaWiki:Mobile.css"
Jump to navigation
Jump to search
Tags: Mobile web edit Mobile edit |
Tags: Mobile web edit Mobile edit |
||
Line 155: | Line 155: | ||
border-radius:10px; | border-radius:10px; | ||
border:1px grey solid; | border:1px grey solid; | ||
+ | padding-bottom:1em; | ||
} | } | ||
Line 175: | Line 176: | ||
border-radius:10px; | border-radius:10px; | ||
border:1px grey solid; | border:1px grey solid; | ||
+ | padding-bottom:1em; | ||
} | } | ||
Revision as of 07:03, 23 June 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; } #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{ 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{ background-size: 100% 100%, auto; color:white; text-decoration:none; } .fc-text{ text-align:center; font-family: Arial; font-size:0.75em; } .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{ background-size: 100% 100%, auto; color:white; text-decoration:none; } .fc-grid{ display: grid; justify-items:center; align-items:center; width:100%; row-gap:0px; column-gap:1px; grid-template-columns: repeat(auto-fill, 150px); } .fc-grid>* { width: 150px; height:210px; text-align:center; border-radius:10px; border:1px grey solid; padding-bottom: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%; } @media only screen and (max-width: 370px) { .fc-grid{ display: grid; justify-items:center; align-items:center; width:100%; row-gap:0px; column-gap:1px; grid-template-columns: repeat(auto-fill, 120px); } .fc-grid>* { width: 120px; height:210px; text-align:center; border-radius:10px; border:1px grey solid; } .fc-img{ width:100px; min-height: 100px; max-height: 100px; } }