Difference between revisions of "MediaWiki:Mobile.css"

From Dragalia Lost Wiki
Jump to navigation Jump to search
>SandovalCurse
>Teg
(Created page with "→‎CSS placed here will affect users of the mobile site: →‎Main page: body.page-Main_Page h1.firstHeading { display: none; } .mp-portal-row { display: flex; flex-f...")
Line 1: Line 1:
 
/* CSS placed here will affect users of the mobile site */
 
/* CSS placed here will affect users of the mobile site */
  
−
body {
 
−
    background: #fff url("https://dragalialost.gamepedia.com/media/dragalialost.gamepedia.com/c/cc/Dragalia_lost_background.png");
 
−
    background-position: center;
 
−
    background-repeat: no-repeat;
 
−
    background-attachment: fixed;
 
−
    background-size:cover;
 
−
}
 
−
 
−
.overlay-enabled, #content {
 
−
    background-color: transparent;
 
−
}
 
−
 
−
footer {
 
−
    background: #c8ccd1;
 
−
}
 
−
 
−
.nomobile {
 
−
    display: none;
 
−
}
 
−
 
−
.client-js .toc-mobile {
 
−
    background-color: rgba(0, 0, 0, 0) !important;
 
−
    border: 1px solid #505050 !important;
 
−
}
 
−
 
−
.last-modified-bar.active #mw-mf-last-modified {
 
−
    background-color: rgba(0,0,0,.4);
 
−
}
 
−
 
−
body.mediawiki #mw-mf-page-center {
 
−
    background: rgba(255,255,255,.85);
 
−
}
 
−
 
−
a,
 
−
a:visited,
 
−
a.external {
 
−
    color: #0645ad;
 
−
}
 
−
 
−
.thumb,
 
−
#content_wrapper .thumb,
 
−
li.gallerybox div.thumb {
 
−
    background-color: rgba(0, 0, 0, 0);
 
−
}
 
−
 
−
.content table th {
 
−
    background-color: rgba(0, 0, 0, 0);
 
−
}
 
−
 
−
.content table td,
 
−
.content table th {
 
−
    padding: 3px;
 
−
}
 
  
−
.content table.wikitable {
+
/* Main page */
−
    background-color: rgba(0, 0, 0, 0);
 
−
    margin: auto;
 
−
    margin-bottom: 1em;
 
−
}
 
  
−
.content table.wikitable > tr > th,
+
body.page-Main_Page h1.firstHeading {
−
.content table.wikitable > tr > td,
+
display: none;
−
.content table.wikitable > * > tr > th,
 
−
.content table.wikitable > * > tr > td {
 
 
}
 
}
  
−
.content table.wikitable > tr > th,
+
.mp-portal-row {
−
.content table.wikitable > * > tr > th {
+
display: flex;
−
    background-color: inherit;
+
flex-flow: row nowrap;
−
    padding: 3px;
+
margin: 0;
 +
align-items: self-start;
 +
justify-content: space-around;
 +
text-align: center;
 +
font-weight: bold;
 +
max-width: 100%;
 
}
 
}
  
−
/* Responsive main page stuff */
+
.mp-portal-row div {
−
/********************
+
flex: 0 1 auto;
−
/* Main menu styles *
+
margin: 4px;
−
/********************/
 
−
.primary-navigation-enabled {
 
−
  border-left: 12px solid #505050 !important;
 
−
  background: #101010 !important;
 
 
}
 
}
  
−
#mw-mf-page-left {
+
.mp-portal-icon a img {
−
  border-left: 12px solid #505050;
+
width: 100%;
−
  background: transparent;
+
min-width: 50px;
 +
max-width: 150px;
 +
height: auto;
 
}
 
}
  
−
#mw-mf-page-left ul {
+
.mp p img {
−
  background: transparent;
+
max-width: 100%;
 +
height: auto;
 
}
 
}
  
−
#mw-mf-page-left ul:first-child {
+
.mp-menu-item {
−
  border-bottom: 12px solid #505050;
+
text-align: left;
 +
width: 195px;
 +
display: inline-block;
 +
margin: 15px 25px;
 +
vertical-align: top;
 
}
 
}
  
−
#mw-mf-page-left ul li {
+
.mp-menu-item-header {
−
  border-top: 1px solid #505050;
+
border-bottom: 1px solid #505050;
−
  border-bottom: 1px solid #505050;
+
font-size: 150%;
−
  background: transparent;
+
font-variant: small-caps;
−
  text-shadow: none;
+
color: black;
 +
padding-bottom: 5px;
 
}
 
}
  
−
#mw-mf-page-left ul li a,
+
.mp-menu-item-body {
−
#mw-mf-page-left ul.hlist li a {
+
column-count: 1;
−
  border: none;
+
margin-top: 5px;
−
  color: #3674b3;
 
 
}
 
}
  
−
#mw-mf-page-left ul li:hover {
+
.mp-menu-item-body>ul {
−
  border-left: 12px solid #aaaaaa;
+
margin-top: 0;
−
  background: #505050;
 
 
}
 
}
  
−
#mw-mf-page-left ul.hlist li:hover {
+
.mp-news-container {
−
  border: none;
+
width: 100%;
 +
    max-height:250px;
 +
    overflow:hidden;
 +
    text-overflow: ellipsis;
 +
    content: "";
 +
    position:relative;
 
}
 
}
  
−
#mw-mf-page-left ul li:hover a,
+
.mp-news-container:before {
−
#mw-mf-page-left ul.hlist li:hover a {
+
    content:'';
−
  color: #ffffff;
+
    width:100%;
 +
    height:100%;   
 +
    position:absolute;
 +
    left:0;
 +
    top:0;
 +
    background:linear-gradient(transparent 200px, white);
 +
    pointer-events: none;
 
}
 
}
  
−
/*********************
+
.mp-container-small,
−
/* Front page styles *
+
.mp-container-large {
−
/*********************/
+
width: 100%;
−
.fpbox {
 
−
  border-radius: 5px;
 
−
  border: 2px solid #7c7c7c;
 
−
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0) inset;
 
−
  background: transparent;
 
−
  color: inherit;
 
−
  margin: 5px;
 
−
  padding: 5px;
 
 
}
 
}
  
−
.fpbox .welcome {
+
/* Panel */
−
  border-bottom: 1px solid #505050;
 
−
  background: transparent;
 
−
  /* color: #e0e0e0; */
 
−
  font-size: 150%;
 
−
  text-transform: uppercase;
 
−
  text-align: center;
 
−
  margin: 0 0 10px 0;
 
−
  padding: 0 0 5px 0;
 
−
}
 
  
−
.fpbox .heading {
+
.panel {
−
  border-bottom: 1px solid #505050;
+
border: 1px solid #528e52;
−
  background: transparent;
+
margin: 2px;
−
  /* color: #e0e0e0; */
 
−
  font-size: 132%;
 
−
  font-variant: small-caps;
 
−
  margin: 0 0 10px 0;
 
−
  padding: 0 0 5px 0;
 
 
}
 
}
  
−
.fpbox .heading .smalllink {
+
.panel-heading {
−
  color: #3674b3;
+
position: relative;
−
  font-weight: bold;
+
text-align: center;
−
  font-size: 75%;
+
font-weight: bold;
 +
color: #1f4c1f;
 +
margin: 5px;
 +
font-size: 1.5em;
 +
font-variant-caps: small-caps;
 
}
 
}
  
−
.fpbox hr {
+
.panel-body {
−
  border: none;
+
position: relative;
−
  border-bottom: 2px solid #505050;
+
    padding: 5px 15px;;
 
}
 
}
  
−
.fpplainbox {
 
−
  padding: 5px 8px 10px 8px;
 
−
  margin: 0 5px 10px 5px;
 
−
  vertical-align: top;
 
−
}
 
  
−
.fplinks {
 
−
  margin: -2px -3px;
 
−
}
 
  
−
.fplinks .linkslabel {
+
/* mw ui button tweaks */
−
  border-bottom: 2px solid #505050;
 
−
  margin: 6px 3px 0 3px;
 
−
}
 
  
−
.fplink {
+
.mw-ui-button-group {
−
  display: inline-block;
+
display: inline-flex;
−
  vertical-align: middle;
 
−
  width: 100%;
 
 
}
 
}
−
 
+
.mw-ui-button-group > * {
−
/* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */
+
min-width: 46px;
−
.fplink .box {
+
float: none;
−
  display: table;
 
−
  width: 100%;
 
−
  border-spacing: 2px 3px;
 
−
  border-collapse: separate;
 
 
}
 
}
  
−
.fplink .box .row {
+
.mw-ui-button-group > *:last-child {
−
  display: table-row;
+
border-top-right-radius: 0;
 +
    border-bottom-right-radius: 0;
 
}
 
}
  
−
.fplink .box .row .cell {
+
.mw-ui-button {
−
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
+
    -webkit-touch-callout: none;
−
  border: 2px solid #505050;
+
    -webkit-user-select: none;
−
  border-radius: 2px;
+
    -khtml-user-select: none;
−
  box-shadow: 0 0 0 2px #505050 inset;
+
    -moz-user-select: none;
−
  /* color: #e0e0e0; */
+
    -ms-user-select: none;
−
  display: table-cell;
+
    user-select: none;
−
  font-weight: bold;
 
−
  position: relative;
 
−
  text-align: center;
 
−
  text-transform: uppercase;
 
−
  vertical-align: middle;
 
 
}
 
}
  
−
.fplink.wide .box .row .cell {
+
/* MISC */
−
  padding: 0 5px;
 
−
}
 
−
 
 
−
.fplink.image {
 
−
  width: 78px;
 
−
  height: 78px;
 
−
}
 
−
 
 
−
.fplink.image .box .row .cell {
 
−
  width: 70px;
 
−
  height: 70px;
 
−
  vertical-align: bottom;
 
−
}
 
−
 
 
−
.fplink.image .box .row .cell .image img {
 
−
  width: 70px;
 
−
  height: 70px;
 
−
}
 
−
 
 
−
@media (min-width: 188px) {
 
−
  .fplink {
 
−
    width: 50%;
 
−
  }
 
−
 
 
−
  .fplink.wide {
 
−
    width: 100%;
 
−
  }
 
−
}
 
−
 
 
−
@media (min-width: 294px) {
 
−
  .fplink {
 
−
    width: 33.333%;
 
−
  }
 
−
 
 
−
  .fplink.wide {
 
−
    width: 66.666%;
 
−
  }
 
−
}
 
−
 
 
−
@media (min-width: 400px) {
 
−
  .fplink {
 
−
    width: 25%;
 
−
  }
 
−
 
 
−
  .fplink.wide {
 
−
    width: 50%;
 
−
  }
 
−
 
 
−
  .fplink.image {
 
−
    width: 108px;
 
−
    height: 108px;
 
−
  }
 
−
 
 
−
  .fplink.image .box .row .cell {
 
−
    width: 100px;
 
−
    height: 100px;
 
−
  }
 
−
 
 
−
  .fplink.image .box .row .cell .image img {
 
−
    width: 100px;
 
−
    height: 100px;
 
−
  }
 
−
}
 
−
 
 
−
@media (min-width: 506px) {
 
−
  .fplink {
 
−
    width: 20%;
 
−
  }
 
−
 
 
−
  .fplink.wide {
 
−
    width: 40%;
 
−
  }
 
−
}
 
−
 
 
−
@media (min-width: 612px) {
 
−
  .fplink {
 
−
    width: 16.666%;
 
−
  }
 
−
 
 
−
  .fplink.wide {
 
−
    width: 33.333%;
 
−
  }
 
−
}
 
−
 
 
−
@media (min-width: 718px) {
 
−
  .fplink {
 
−
    width: 14.285%;
 
−
  }
 
−
 
 
−
  .fplink.wide {
 
−
    width: 28.571%;
 
−
  }
 
−
}
 
−
 
 
−
@media (min-width: 824px) {
 
−
  .fplink {
 
−
    width: 12.5%;
 
−
  }
 
−
 
 
−
  .fplink.wide {
 
−
    width: 25%;
 
−
  }
 
−
}
 
−
 
 
−
@media (min-width: 930px) {
 
−
  .fplink {
 
−
    width: 11.111%;
 
−
  }
 
−
 
 
−
  .fplink.wide {
 
−
    width: 22.222%;
 
−
  }
 
−
}
 
−
 
 
−
@media (min-width: 1036px) {
 
−
  .fplink {
 
−
    width: 10%;
 
−
  }
 
−
 
 
−
  .fplink.wide {
 
−
    width: 20%;
 
−
  }
 
−
 
 
−
  .fplink.image {
 
−
    width: 128px;
 
−
    height: 128px;
 
−
  }
 
−
 
 
−
  .fplink.image .box .row .cell {
 
−
    width: 120px;
 
−
    height: 120px;
 
−
  }
 
−
 
 
−
  .fplink.image .box .row .cell .image img {
 
−
    width: 120px;
 
−
    height: 120px;
 
−
  }
 
−
}
 
−
 
 
−
.fplink.image .image {
 
−
  position: absolute;
 
−
  top: 0;
 
−
  right: 0;
 
−
  bottom: 0;
 
−
  left: 0;
 
−
  font-size: 75%;
 
−
  z-index: 1;
 
−
}
 
−
 
 
−
.fplink.image a {
 
−
  z-index: 2;
 
−
}
 
−
 
 
−
.fplink a {
 
−
  display: block;
 
−
  position: relative;
 
−
  top: 0;
 
−
  right: 0;
 
−
  bottom: 0;
 
−
  left: 0;
 
−
  padding: 3px 5px;
 
−
}
 
−
 
 
−
.fplink.image .image a {
 
−
  padding: 0;
 
−
}
 
−
 
 
−
.fplink.image .link a {
 
−
  border-top: 2px solid #505050;
 
−
  background: #ddddb7 !important;
 
−
}
 
−
 
 
−
.fplink.wide a {
 
−
  margin: 0 -5px;
 
−
}
 
−
 
 
−
.fplink.image a {
 
−
  top: auto;
 
−
}
 
−
 
 
−
.fpvideos {
 
−
  margin: 0 auto;
 
−
  overflow: hidden;
 
−
  text-align: center;
 
−
  max-width: 480px;
 
−
}
 
  
−
.fpvideo {
+
.character-grid-entry {
−
  position: relative;
+
    width: 150px;
−
  padding-top: 25px;
+
    text-align: center;
−
  padding-bottom: 56.25%;
+
    border: 1px solid green;
−
  height: 0;
+
    padding: 10px 5px;
 +
    margin: 12px;
 +
    transition: opacity 1s linear;
 
}
 
}
  
−
.fpvideo iframe {
+
.character-grid-entry.hidden {
−
  position: absolute;
+
position: absolute;
−
  top: 0;
+
opacity: 0;
−
  left: 0;
 
−
  width: 100%;
 
−
  height: 100%;
 
 
}
 
}

Revision as of 11:04, 17 September 2018

/* CSS placed here will affect users of the mobile site */


/* Main page */

body.page-Main_Page h1.firstHeading {
	display: none;
}

.mp-portal-row {
	display: flex;
	flex-flow: row nowrap;
	margin: 0;
	align-items: self-start;
	justify-content: space-around;
	text-align: center;
	font-weight: bold;
	max-width: 100%;
}

.mp-portal-row div {
	flex: 0 1 auto;
	margin: 4px;
}

.mp-portal-icon a img {
	width: 100%;
	min-width: 50px;
	max-width: 150px;
	height: auto;
}

.mp p img {
	max-width: 100%;
	height: auto;
}

.mp-menu-item {
	text-align: left;
	width: 195px;
	display: inline-block;
	margin: 15px 25px;
	vertical-align: top;
}

.mp-menu-item-header {
	border-bottom: 1px solid #505050;
	font-size: 150%;
	font-variant: small-caps;
	color: black;
	padding-bottom: 5px;
}

.mp-menu-item-body {
	column-count: 1;
	margin-top: 5px;
}

.mp-menu-item-body>ul {
	margin-top: 0;
}

.mp-news-container {
	width: 100%;
    max-height:250px;
    overflow:hidden;
    text-overflow: ellipsis;
    content: "";
    position:relative;
}

.mp-news-container:before {
    content:'';
    width:100%;
    height:100%;    
    position:absolute;
    left:0;
    top:0;
    background:linear-gradient(transparent 200px, white);
    pointer-events: none;
}

.mp-container-small,
.mp-container-large {
	width: 100%;
}

/* Panel */

.panel {
	border: 1px solid #528e52;
	margin: 2px;
}

.panel-heading {
	position: relative;
	text-align: center;
	font-weight: bold;
	color: #1f4c1f;
	margin: 5px;
	font-size: 1.5em;
	font-variant-caps: small-caps;
}

.panel-body {
	position: relative;
    padding: 5px 15px;;
}



/* mw ui button tweaks */

.mw-ui-button-group {
	display: inline-flex;
}
.mw-ui-button-group > * {
	min-width: 46px;
	float: none;
}

.mw-ui-button-group > *:last-child {
	border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.mw-ui-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* MISC */

.character-grid-entry {
    width: 150px;
    text-align: center;
    border: 1px solid green;
    padding: 10px 5px;
    margin: 12px;
    transition: opacity 1s linear;
}

.character-grid-entry.hidden {
	position: absolute;
	opacity: 0;
}
Retrieved from "https://dlwiki.cherrymint.live/index.php?title=MediaWiki:Mobile.css&oldid=2560"