Difference between revisions of "MediaWiki:Common.css"
From Pokemon Tabletop Wiki
(16 intermediate revisions by the same user not shown) | |||
Line 23: | Line 23: | ||
display: flex; | display: flex; | ||
align-items: stretch; | align-items: stretch; | ||
− | justify-content: | + | justify-content: left; |
border-radius: 10px; | border-radius: 10px; | ||
Line 43: | Line 43: | ||
grid-auto-rows: minmax(150px, auto); | grid-auto-rows: minmax(150px, auto); | ||
grid-gap: 1em; | grid-gap: 1em; | ||
+ | } | ||
+ | |||
+ | .module { | ||
+ | /* Demo-Specific Styles */ | ||
+ | display: flex; | ||
+ | align-items: stretch; | ||
+ | justify-content: center; | ||
+ | border-radius: 5px; | ||
+ | |||
+ | /* Flex Fallback */ | ||
+ | margin-left: 5px; | ||
+ | margin-right: 5px; | ||
+ | flex: 1 1 200px; | ||
+ | } | ||
+ | |||
+ | .dex-grid { | ||
+ | /* Grid Fallback */ | ||
+ | display: flex; | ||
+ | flex-wrap: wrap; | ||
+ | padding: .5em 0; | ||
+ | |||
+ | /* Supports Grid */ | ||
+ | display: grid; | ||
+ | grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); | ||
+ | grid-auto-rows: minmax(10px, auto); | ||
+ | grid-gap: .5em; | ||
+ | } | ||
+ | |||
+ | .smol-grid { | ||
+ | /* Grid Fallback */ | ||
+ | display: flex; | ||
+ | flex-wrap: wrap; | ||
+ | padding: .5em 0; | ||
+ | |||
+ | /* Supports Grid */ | ||
+ | display: grid; | ||
+ | grid-template-columns: repeat(auto-fill, minmax(5em, 1fr)); | ||
+ | grid-auto-rows: minmax(10px, auto); | ||
+ | grid-gap: .5em; | ||
} | } | ||
Line 60: | Line 99: | ||
} | } | ||
− | . | + | .info-module { |
/* Demo-Specific Styles */ | /* Demo-Specific Styles */ | ||
background: #F0F0F0; | background: #F0F0F0; | ||
Line 114: | Line 153: | ||
margin-right: 5px; | margin-right: 5px; | ||
flex: 1 1 200px; | flex: 1 1 200px; | ||
+ | } | ||
+ | |||
+ | .dex { | ||
+ | text-align: center; | ||
} | } | ||
Line 137: | Line 180: | ||
margin: 10px; | margin: 10px; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
+ | min-width: 95%; | ||
} | } | ||
.move-trick { | .move-trick { | ||
− | border-left: 5px solid # | + | border-left: 5px solid #006199; |
margin: 10px; | margin: 10px; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
+ | min-width: 95%; | ||
} | } | ||
.move-maneuver { | .move-maneuver { | ||
− | border-left: 5px solid # | + | border-left: 5px solid #00991c; |
margin: 10px; | margin: 10px; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
+ | min-width: 95%; | ||
} | } | ||
Line 162: | Line 208: | ||
} | } | ||
− | . | + | .bug-text { |
− | + | color: #A8B820; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 184: | Line 221: | ||
background-color:#A29288; | background-color:#A29288; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .dark-text { | ||
+ | color: #705848; | ||
} | } | ||
Line 195: | Line 236: | ||
background-color:#A27DFA; | background-color:#A27DFA; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .dragon-text { | ||
+ | color: #7038F8; | ||
} | } | ||
Line 206: | Line 251: | ||
background-color:#FAE078; | background-color:#FAE078; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .electric-text { | ||
+ | color: #F8D030; | ||
} | } | ||
Line 217: | Line 266: | ||
background-color:#F4BDC9; | background-color:#F4BDC9; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .fairy-text { | ||
+ | color: #EE99AC; | ||
} | } | ||
Line 228: | Line 281: | ||
background-color:#D67873; | background-color:#D67873; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .fighting-text { | ||
+ | color: #C03028; | ||
} | } | ||
Line 239: | Line 296: | ||
background-color:#F5AC78; | background-color:#F5AC78; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .fire-text { | ||
+ | color: #F08030; | ||
} | } | ||
Line 250: | Line 311: | ||
background-color:#C6B7F5; | background-color:#C6B7F5; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .flying-text { | ||
+ | color: #A890F0; | ||
} | } | ||
Line 261: | Line 326: | ||
background-color:#A292BC; | background-color:#A292BC; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .ghost-text { | ||
+ | color: #705898; | ||
} | } | ||
Line 272: | Line 341: | ||
background-color:#A7DB8D; | background-color:#A7DB8D; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .grass-text { | ||
+ | color: #78C850; | ||
} | } | ||
Line 283: | Line 356: | ||
background-color:#EBD69D; | background-color:#EBD69D; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .ground-text { | ||
+ | color: #E0C068; | ||
} | } | ||
Line 294: | Line 371: | ||
background-color:#BCE6E6; | background-color:#BCE6E6; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .ice-text { | ||
+ | color: #98D8D8; | ||
} | } | ||
Line 305: | Line 386: | ||
background-color:#C6C6A7; | background-color:#C6C6A7; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .normal-text { | ||
+ | color: #A8A878; | ||
} | } | ||
Line 316: | Line 401: | ||
background-color:#C183C1; | background-color:#C183C1; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .poison-text { | ||
+ | color: #A040A0; | ||
} | } | ||
Line 327: | Line 416: | ||
background-color:#FA92B2; | background-color:#FA92B2; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .psychic-text { | ||
+ | color: #F85888; | ||
} | } | ||
Line 338: | Line 431: | ||
background-color:#D1C17D; | background-color:#D1C17D; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .rock-text { | ||
+ | color: #B8A038; | ||
} | } | ||
Line 349: | Line 446: | ||
background-color:#D1D1E0; | background-color:#D1D1E0; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .steel-text { | ||
+ | color: #B8B8D0; | ||
} | } | ||
Line 360: | Line 461: | ||
background-color:#9DB7F5; | background-color:#9DB7F5; | ||
padding: 5px; | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .water-text { | ||
+ | color: #6890F0; | ||
} | } | ||
Latest revision as of 16:39, 5 July 2020
/* CSS placed here will be applied to all skins */ .mw-whatlinkshere-tools{ display:none; } .move-grid { /* Grid Fallback */ display: flex; flex-wrap: wrap; padding: 1em 0; /* Supports Grid */ display: grid; grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); grid-auto-rows: minmax(150px, auto); grid-gap: 1em; } .move-module { /* Demo-Specific Styles */ background: #F0F0F0; display: flex; align-items: stretch; justify-content: left; border-radius: 10px; /* Flex Fallback */ margin-left: 5px; margin-right: 5px; flex: 1 1 200px; } .grid { /* Grid Fallback */ display: flex; flex-wrap: wrap; padding: 1em 0; /* Supports Grid */ display: grid; grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); grid-auto-rows: minmax(150px, auto); grid-gap: 1em; } .module { /* Demo-Specific Styles */ display: flex; align-items: stretch; justify-content: center; border-radius: 5px; /* Flex Fallback */ margin-left: 5px; margin-right: 5px; flex: 1 1 200px; } .dex-grid { /* Grid Fallback */ display: flex; flex-wrap: wrap; padding: .5em 0; /* Supports Grid */ display: grid; grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); grid-auto-rows: minmax(10px, auto); grid-gap: .5em; } .smol-grid { /* Grid Fallback */ display: flex; flex-wrap: wrap; padding: .5em 0; /* Supports Grid */ display: grid; grid-template-columns: repeat(auto-fill, minmax(5em, 1fr)); grid-auto-rows: minmax(10px, auto); grid-gap: .5em; } .basic-module { /* Demo-Specific Styles */ background: #F0F0F0; display: flex; align-items: stretch; justify-content: center; padding-left: 15px; padding-right: 15px; /* Flex Fallback */ margin-left: 5px; margin-right: 5px; flex: 1 1 200px; } .info-module { /* Demo-Specific Styles */ background: #F0F0F0; display: flex; align-items: stretch; justify-content: left; padding-left: 15px; padding-right: 15px; /* Flex Fallback */ margin-left: 5px; margin-right: 5px; flex: 1 1 200px; } .role-module { /* Demo-Specific Styles */ display: flex; align-items: stretch; justify-content: center; padding: 5px; /* Flex Fallback */ margin-left: 5px; margin-right: 5px; flex: 1 1 200px; } .ability-grid { /* Grid Fallback */ display: flex; flex-wrap: wrap; padding: 1em 0; /* Supports Grid */ display: grid; grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); grid-auto-rows: minmax(150px, auto); grid-gap: 1em; justify-content: center; } .ability-module { /* Demo-Specific Styles */ background: #F0F0F0; display: flex; align-items: stretch; justify-content: center; border-radius: 10px; /* Flex Fallback */ margin-left: 5px; margin-right: 5px; flex: 1 1 200px; } .dex { text-align: center; } .ability { margin: 10px; border-collapse:collapse; } .ability td { padding-left: 5px; padding-right: 5px; } .ability th { text-align:left; background: #9DC1B7; padding-left: 5px; padding-right: 5px; } .move-strike { border-left: 5px solid #990000; margin: 10px; border-collapse: collapse; min-width: 95%; } .move-trick { border-left: 5px solid #006199; margin: 10px; border-collapse: collapse; min-width: 95%; } .move-maneuver { border-left: 5px solid #00991c; margin: 10px; border-collapse: collapse; min-width: 95%; } .bug-move { background-color:#C6D16E; padding-left: 5px; } .bug-tier { text-align: right; background-color:#C6D16E; padding: 5px; } .bug-text { color: #A8B820; } .dark-move { background-color:#A29288; padding-left: 5px; } .dark-tier { text-align: right; background-color:#A29288; padding: 5px; } .dark-text { color: #705848; } .dragon-move { background-color:#A27DFA; padding-left: 5px; } .dragon-tier { text-align: right; background-color:#A27DFA; padding: 5px; } .dragon-text { color: #7038F8; } .electric-move { background-color:#FAE078; padding-left: 5px; } .electric-tier { text-align: right; background-color:#FAE078; padding: 5px; } .electric-text { color: #F8D030; } .fairy-move { background-color:#F4BDC9; padding-left: 5px; } .fairy-tier { text-align: right; background-color:#F4BDC9; padding: 5px; } .fairy-text { color: #EE99AC; } .fighting-move { background-color:#D67873; padding-left: 5px; } .fighting-tier { text-align: right; background-color:#D67873; padding: 5px; } .fighting-text { color: #C03028; } .fire-move { background-color:#F5AC78; padding-left: 5px; } .fire-tier { text-align: right; background-color:#F5AC78; padding: 5px; } .fire-text { color: #F08030; } .flying-move { background-color:#C6B7F5; padding-left: 5px; } .flying-tier { text-align: right; background-color:#C6B7F5; padding: 5px; } .flying-text { color: #A890F0; } .ghost-move { background-color:#A292BC; padding-left: 5px; } .ghost-tier { text-align: right; background-color:#A292BC; padding: 5px; } .ghost-text { color: #705898; } .grass-move { background-color:#A7DB8D; padding-left: 5px; } .grass-tier { text-align: right; background-color:#A7DB8D; padding: 5px; } .grass-text { color: #78C850; } .ground-move { background-color:#EBD69D; padding-left: 5px; } .ground-tier { text-align: right; background-color:#EBD69D; padding: 5px; } .ground-text { color: #E0C068; } .ice-move { background-color:#BCE6E6; padding-left: 5px; } .ice-tier { text-align: right; background-color:#BCE6E6; padding: 5px; } .ice-text { color: #98D8D8; } .normal-move { background-color:#C6C6A7; padding-left: 5px; } .normal-tier { text-align: right; background-color:#C6C6A7; padding: 5px; } .normal-text { color: #A8A878; } .poison-move { background-color:#C183C1; padding-left: 5px; } .poison-tier { text-align: right; background-color:#C183C1; padding: 5px; } .poison-text { color: #A040A0; } .psychic-move { background-color:#FA92B2; padding-left: 5px; } .psychic-tier { text-align: right; background-color:#FA92B2; padding: 5px; } .psychic-text { color: #F85888; } .rock-move { background-color:#D1C17D; padding-left: 5px; } .rock-tier { text-align: right; background-color:#D1C17D; padding: 5px; } .rock-text { color: #B8A038; } .steel-move { background-color:#D1D1E0; padding-left: 5px; } .steel-tier { text-align: right; background-color:#D1D1E0; padding: 5px; } .steel-text { color: #B8B8D0; } .water-move { background-color:#9DB7F5; padding-left: 5px; } .water-tier { text-align: right; background-color:#9DB7F5; padding: 5px; } .water-text { color: #6890F0; } .move-text { padding-left: 5px; }