MediaWiki:Mobile.css

/* CSS for mobile version of VR & AR Wiki */

/* --- START: Infobox on Mobile - Top --- */
.infobox { /* Targeting by class is generally good */
    display: table !important;   /* Override the template's inline 'display:inline-table!important' */
                                 /* 'block' would also work, but 'table' maintains its table nature */
    float: none !important;      /* Remove the float inherited from Common.css */
    clear: both !important;      /* Ensure it clears any (unlikely) preceding floats and nothing floats beside it */
    width: 100% !important;      /* Make it take the full width of its container */
    margin-left: 0 !important;   /* Reset margins */
    margin-right: 0 !important;
    margin-top: 0 !important;    /* Ensure it's at the very top */
    margin-bottom: 1em !important; /* Add some space after it, this will override your previous 0px */
    box-sizing: border-box;      /* Include padding and border in the element's total width and height */
}



/* Basic layout and typography */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  color: #333;
}

/* Container adjustments */
#content {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* Hide desktop-only elements */
.nomobile {
  display: none !important;
}

/* Main page header styling */
body.page-Main_Page h1.firstHeading {
  display: none;
}

/* Gradients and colors */
.XinReality1 {
  background: #939aa4;
  background: linear-gradient(to bottom, #939aa4 0%, #bbc2ca 100%);
}

.XinReality2 {
  background: #254b72;
  background: linear-gradient(to bottom, #254b72 0%, #6f97b0 100%);
}

.XinReality3 {
  background: #eab267;
  background: linear-gradient(to bottom, #e5a145 0%, #f8d281 100%);
}

/* Text colors */
p.white {
  color: #FFFFFF;
  margin: 0;
  font-weight: bold;
}

/* Superheader styling */
.superheader {
  border: 3px double #bbc2ca;
  padding: 10px;
  margin-bottom: 15px;
  text-align: center;
  font-size: 0.9em;
}

/* Table layouts for mobile */
table.mobile-layout {
  width: 100%;
  margin: 0 0 15px 0;
  border-collapse: collapse;
}

table.mobile-layout td {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 15px;
}

/* Section styling */
.dull1, .dull2, .dull3 {
  border-radius: 2px;
  padding: 5px;
  margin-bottom: 15px;
}

.dull1 {
  border: 3px double #82a0b8;
}

.dull2 {
  border: 3px double #eab267;
}

.dull3 {
  border: 3px double #bbc2ca;
}

/* Section headings */
.heading {
  text-align: center;
  margin-bottom: 5px;
  border-radius: 4px;
}

/* Section content */
.body {
  padding: 5px 10px;
  font-size: 0.9em;
}

/* List styling */
.sweet1 {
  width: 100%;
  margin: 5px 0;
}

.sweet1 td {
  width: 50%;
  vertical-align: top;
  padding: 3px 0;
}

/* Link styling */
a {
  color: #254b72;
  text-decoration: none;
}

/* Description text */
.sweet1 td[colspan="2"] {
  line-height: 1.4;
  margin-bottom: 15px;
  padding-bottom: 10px;
}

/* "More..." links */
.more-link {
  text-align: right;
  font-style: italic;
  display: block;
  margin-top: 5px;
}

/* Center infobox on mobile */
table.infobox tr th {
  text-align: center !important;
}

/* Padding for infobox fields */
table.infobox tr td:nth-child(1) {
  padding: 5px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Remove empty space below infobox */
table.infobox {
  margin-bottom: 0px !important;
}

/* Hide disqus on main page */
.page-Main_Page #disqus-wrapper {
  display: none !important;
}