MediaWiki:Common.css: Difference between revisions

MediaWiki:Common.css (view source)

Revision as of 16:20, 13 July 2017

1,398 bytes added , 13 July 2017

m

Reworked gender bars to cut down on html in the articles and work needed.

Patrick

Bureaucrats, Interface administrators, Administrators

15,432

edits

@@ Line 159: / Line 159: @@
 /*
-  * StatBar Div
+  * StatBar
   * Anything where you need to display something in a small bar
   * For example, gender ratio or HP - This can be used
   */
-.statbarLeft{
+.statbarLeft {
-border-top-left-radius: 20px;
+    border-top-left-radius: 20px;
--moz-border-radius-topleft: 20px;
+    -moz-border-radius-topleft: 20px;
--webkit-border-top-left-radius: 20px;
+    -webkit-border-top-left-radius: 20px;
--khtml-border-top-left-radius: 20px;
+    -khtml-border-top-left-radius: 20px;
--icab-border-top-left-radius: 20px;
+    -icab-border-top-left-radius: 20px;
--o-border-top-left-radius: 20px;
+    -o-border-top-left-radius: 20px;
-border-bottom-left-radius: 20px;
+    border-bottom-left-radius: 20px;
--moz-border-radius-bottomleft: 20px;
+    -moz-border-radius-bottomleft: 20px;
--webkit-border-bottom-left-radius: 20px;
+    -webkit-border-bottom-left-radius: 20px;
--khtml-border-bottom-left-radius: 20px;
+    -khtml-border-bottom-left-radius: 20px;
--icab-border-bottom-left-radius: 20px;
+    -icab-border-bottom-left-radius: 20px;
--o-border-bottom-left-radius: 20px;
+    -o-border-bottom-left-radius: 20px;
-color: #FFF;
+    color: #FFF;
-height: 10px;
+    height: 10px;
-border: 0.5px solid black;
+    border: 0.5px solid black;
-overflow: hidden;
+    overflow: hidden;
 }
-.statbarRight{
+.statbarRight {
-border-top-right-radius: 20px;
+    border-top-right-radius: 20px;
--moz-border-radius-topright: 20px;
+    -moz-border-radius-topright: 20px;
--webkit-border-top-right-radius: 20px;
+    -webkit-border-top-right-radius: 20px;
--khtml-border-top-right-radius: 20px;
+    -khtml-border-top-right-radius: 20px;
--icab-border-top-right-radius: 20px;
+    -icab-border-top-right-radius: 20px;
--o-border-top-right-radius: 20px;
+    -o-border-top-right-radius: 20px;
-border-bottom-right-radius: 20px;
+    border-bottom-right-radius: 20px;
--moz-border-radius-bottomright: 20px;
+    -moz-border-radius-bottomright: 20px;
--webkit-border-bottom-right-radius: 20px;
+    -webkit-border-bottom-right-radius: 20px;
--khtml-border-bottom-right-radius: 20px;
+    -khtml-border-bottom-right-radius: 20px;
--icab-border-bottom-right-radius: 20px;
+    -icab-border-bottom-right-radius: 20px;
--o-border-bottom-right-radius: 20px;
+    -o-border-bottom-right-radius: 20px;
-color: #000;
+    color: #000;
-height: 10px;
+    height: 10px;
-border: 0.5px solid black;
+    border: 0.5px solid black;
-overflow: hidden;
+    overflow: hidden;
+}
+/* Gender ratio bars */
+.maleOnly {
+    background: #3355FF;
+}
+.femaleOnly {
+    background: #FF77DD;
+}
+.genderless {
+	background: #6E6E6E;
+}
+.male87 {
+    float: left;
+    background: #3355FF;
+    width: 87.5%;
+    border-right-width: 0px;
+}
+.male75 {
+    float: left;
+    background: #3355FF;
+    width: 75%;
+    border-right-width: 0px;
+}
+.male50 {
+    float: left;
+    background: #3355FF;
+    width: 50%;
+    border-right-width: 0px;
+}
+.male25 {
+    float: left;
+    background: #3355FF;
+    width: 25%;
+    border-right-width: 0px;
+}
+.female12 {
+    float: left;
+    background: #FF77DD;
+    width: 12.5%;
+    border-left-width: 0px;
+}
+.female25 {
+    float: left;
+    background: #FF77DD;
+    width: 25%;
+    border-left-width: 0px;
+}
+.female50 {
+    float: left;
+    background: #FF77DD;
+    width: 50%;
+    border-left-width: 0px;
+}
+.female75 {
+    float: left;
+    background: #FF77DD;
+    width: 75%;
+    border-left-width: 0px;
+}
+.genderless, .femaleOnly, .maleOnly {
+    width: 100%;
+    float: left;
+    -moz-border-radius: 20px;
+    -webkit-border-radius: 20px;
+    -khtml-border-radius: 20px;
+    -icab-border-radius: 20px;
+    -o-border-radius: 20px;
+    color: #FFF;
+    height: 10px;
+    border: 0.5px solid black;
+    overflow: hidden;
 }