MediaWiki:Mobile.css: Difference between revisions

MediaWiki:Mobile.css (view source)

Revision as of 22:36, 19 December 2020

1,636 bytes added , 22:36, 19 December 2020

add subtype infocard supplemental styles

Egocarib

Bureaucrats, Interface administrators, Administrators

8,290

edits

@@ Line 348: / Line 348: @@
    color: var(--qud-color-k);
    color: rgba(108, 180, 122, 0.5);
+}
+/*
+ *  QUD SUBTYPE INFOCARD
+ *  ====================
+ *  Styles to supplement [[Template:Subtype infocard]] for smaller screens.
+ *  Note that these use !important more than I'd usually like, because they
+ *  need to override inline styles applied by the template.
+ */
+@media screen and (max-width: 1599px) {
+    .subtype-infobox {
+        max-width: 780px !important;
+    }
+    .subtype-items {
+        flex: 0 0 100% !important;
+        flex-wrap: wrap !important;
+    }
+}
+@media screen and (max-width: 900px) {
+   .subtype-title {
+       justify-content: center;
+       padding: 0.2em 0 !important;
+   }
+   .subtype-image, .subtype-bonus-box {
+       flex: 0 0 50%;
+       justify-content: center;
+   }
+   .subtype-skill-box {
+       margin: auto;
+       flex: 0 0 90%;
+   }
+   .subtype-items-list ul {
+       display: flex !important;
+       flex-wrap: wrap;
+   }
+   .subtype-items-list ul li {
+       flex: 0 0 100% !important;
+   }
+   .subtype-equip-list, .subtype-items-list {
+       width: 100%;
+       padding: 1em !important;
+       text-align: center;
+   }
+   .subtype-equip-list ul, .subtype-items-list ul {
+       list-style-type: none;
+       margin: 0 !important;
+   }
+   .subtype-equip-list div, .subtype-items-list div {
+       padding: 0 !important;
+   }
+   .subtype-footnote {
+       justify-content: center !important;
+   }
+}
+@media screen and (max-width: 550px) {
+   .subtype-image, .subtype-bonus-box {
+       flex: 0 0 90%;
+       max-width: unset !important;
+       margin: auto;
+   }
+   .subtype-bonus-box {
+       text-align: center;
+   }
+   .subtype-bonus-box div {
+       position: static !important;
+   }
 }
 /*