MediaWiki:Mobile.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-/* CSS placed here will affect users of the mobile site */
+/* CSS for mobile version of VR & AR Wiki */
-/* center the infobox on mobile */
-table.infobox tr th{
+/* Basic layout and typography */
-   text-align:center!important;
+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;
+}
-/* Old Infobox template style - NOT WORKING on Mobile*/
+/* Hide desktop-only elements */
-.infobox {
+.nomobile {
-   border: 1px solid #020202;
+  display: none !important;
-   background-color: #f9f9f9;
-   color: black;
-   margin-bottom: 0.1em!important;
-   margin-left: 1em;
-   padding: 0.2em;
-   float: right;
-   clear: right;
 }
-.infobox td,
-.infobox th,
+/* Main page header styling */
-.infobox tr,
+body.page-Main_Page h1.firstHeading {
-.infobox tbody {
+  display: none;
-   vertical-align: top;
 }
-.content .infobox tbody > tr > td, .content .infobox tbody > tr > th{
-   flex: inherit!important;
+/* Gradients and colors */
-   border-bottom:none!important;
+.XinReality1 {
+  background: #939aa4;
+  background: linear-gradient(to bottom, #939aa4 0%, #bbc2ca 100%);
 }
-.infobox  tr  th{
+.XinReality2 {
-   text-align:center!important;
+  background: #254b72;
+  background: linear-gradient(to bottom, #254b72 0%, #6f97b0 100%);
 }
+.XinReality3 {
+  background: #eab267;
+  background: linear-gradient(to bottom, #e5a145 0%, #f8d281 100%);
+}
-.infobox tbody > tr {
+/* Text colors */
-   border-bottom:1px solid #eaecf0!important;
+p.white {
+  color: #FFFFFF;
+  margin: 0;
+  font-weight: bold;
 }
-.infobox caption {
-   font-size: larger;
+/* Superheader styling */
-   margin-left: inherit;
+.superheader {
+  border: 3px double #bbc2ca;
+  padding: 10px;
+  margin-bottom: 15px;
+  text-align: center;
+  font-size: 0.9em;
 }
-.infobox.bordered {
-   border-collapse: collapse;
+/* Table layouts for mobile */
+table.mobile-layout {
+  width: 100%;
+  margin: 0 0 15px 0;
+  border-collapse: collapse;
 }
-.infobox.bordered td,
-.infobox.bordered th {
+table.mobile-layout td {
-   border: 1px solid #020202;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  margin-bottom: 15px;
 }
-.infobox.bordered .borderless td,
-.infobox.bordered .borderless th {
+/* Section styling */
-   border: 0;
+.dull1, .dull2, .dull3 {
+  border-radius: 2px;
+  padding: 5px;
+  margin-bottom: 15px;
 }
+.dull1 {
+  border: 3px double #82a0b8;
+}
+.dull2 {
+  border: 3px double #eab267;
+}
-table.sweet1 td{
+.dull3 {
-   border: 1px solid white;
+   border: 3px double #bbc2ca;
+}
+/* Section headings */
+.heading {
+  text-align: center;
+  margin-bottom: 5px;
+  border-radius: 4px;
 }
-.XinReality1 {
+/* Section content */
-    background:#939aa4;
+.body {
-    background:linear-gradient(to bottom, #939aa4 0%, #bbc2ca  100%);
+  padding: 5px 10px;
+  font-size: 0.9em;
 }
-.XinReality2 {
+/* List styling */
-    background:#254b72;
+.sweet1 {
-    background:linear-gradient(to bottom, #254b72 0%, #6f97b0  100%);
+  width: 100%;
+  margin: 5px 0;
 }
-.XinReality3 {
+.sweet1 td {
-    background:#eab267;
+  width: 50%;
-    background:linear-gradient(to bottom, #e5a145 0%, #f8d281  100%);
+  vertical-align: top;
+  padding: 3px 0;
 }
-p.white {
+/* Link styling */
-   color:#FFFFFF;
+a {
+  color: #254b72;
+  text-decoration: none;
 }
-.superheader {
+/* Description text */
-    border: 3px double #bbc2ca;
+.sweet1 td[colspan="2"] {
-    padding: 7px;
+  line-height: 1.4;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
 }
-table.sweet1 {
+/* "More..." links */
-   margin: 0 0 0 0;
+.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;
 }
-/* Stub template style */
+/* Padding for infobox fields */
-.stub {
+table.infobox tr td:nth-child(1) {
-    margin: 1px;
+  padding: 5px !important;
-    text-align: center;
+  padding-left: 10px !important;
-    border-collapse: collapse;
+  padding-right: 10px !important;
-    border: 1px solid #aaa;
-    background: #DFE8FF;
 }
-/*we don't want disqus on the main page*/
+/* Remove empty space below infobox */
-.page-Main_Page #disqus-wrapper {
+table.infobox {
-    display:none!important;
+  margin-bottom: 0px !important;
 }
-/*Show only mobile ad code on mobile*/
+/* Hide disqus on main page */
-.nomobile{
+.page-Main_Page #disqus-wrapper {
-display:none!important;
+  display: none !important;
 }