MediaWiki:Mobile.css: Difference between revisions
no edit summary
imported>Jacob Robertson No edit summary |
imported>Jacob Robertson No edit summary |
||
Line 5: | Line 5: | ||
/********************************************************************************************/ | /********************************************************************************************/ | ||
@media screen and (orientation:portrait) { | |||
.em-shrinker { | .em-shrinker { | ||
Line 208: | Line 210: | ||
vertical-align: middle; | vertical-align: middle; | ||
background-image: linear-gradient(to bottom, #fcbba1, #ffdb8b); | background-image: linear-gradient(to bottom, #fcbba1, #ffdb8b); | ||
} | |||
.em-bubble-old { | |||
display: table-cell; | |||
height: 5em; | |||
width: 4.5em; | |||
vertical-align: middle; | |||
padding: .5em; | |||
} | |||
div.em-bubble-container-row2{ | |||
width: 100%; | |||
display: table-row; | |||
height: 5%; | |||
} | |||
div.em-pathways-old { | |||
position: relative; | |||
padding: 0em; | |||
margin: 0em; | |||
bottom: -.25em; | |||
} | |||
div.em-bubble-outer-old { | |||
position: relative; | |||
top: .85em; | |||
} | |||
:where( | |||
div.em-hide-ee-yes, div.em-hide-milestones-yes, div.em-hide-msarea-yes, | |||
div.em-hide-deluded-yes, div.em-hide-learning-yes, div.em-hide-training-yes, div.em-hide-masterful-yes, div.em-hide-enlightened-yes, | |||
div.em-hide-beacons-yes, div.em-hide-attention-yes, div.em-hide-adaptation-yes, div.em-hide-association-yes, | |||
div.em-hide-pathways-yes, div.em-hide-skills-yes, div.em-hide-trails-yes, div.em-hide-guides-yes | |||
):where(:not(:hover)) | |||
{ | |||
grayscale: 35%; | |||
opacity: 55%; | |||
} | |||
} | |||
/** NON - PORTRAIT **/ | |||
.em-shrinker { | |||
display: inline-block; | |||
} | |||
.em-caption { | |||
font-style: italic; | |||
font-weight: normal; | |||
text-align: center; | |||
color: #590000; | |||
} | |||
.em-container { | |||
display: grid; | |||
grid-template-columns: auto auto auto auto auto auto; | |||
gap: 2px; | |||
text-align: center; | |||
} | |||
.em-pathways-container { | |||
display: grid; | |||
grid-template-columns: auto auto auto; | |||
grid-template-rows: 25% 50% 10% 15%; | |||
gap: 2px; | |||
grid-area: 3 / 2 / 6 / 7; | |||
padding: .5em; | |||
} | |||
.em-ee { | |||
grid-area: 1 / 1; | |||
} | |||
.em-ms { | |||
grid-area: 1 / 2 / 2 / 7; | |||
} | |||
.em-beacons { | |||
grid-area: 2 / 1; | |||
} | |||
.em-bc-attention { | |||
grid-area: 3 / 1; | |||
} | |||
.em-bc-adaptation { | |||
grid-area: 4 / 1; | |||
} | |||
.em-bc-association { | |||
grid-area: 5 / 1; | |||
} | |||
.em-mc-deluded { | |||
grid-area: 2 / 2; | |||
} | |||
.em-mc-learning { | |||
grid-area: 2 / 3; | |||
} | |||
.em-mc-training { | |||
grid-area: 2 / 4; | |||
} | |||
.em-mc-masterful { | |||
grid-area: 2 / 5; | |||
} | |||
.em-mc-enlightened { | |||
grid-area: 2 / 6; | |||
} | |||
.em-top-spacer { | |||
grid-area: 1 / 1 / 2 / 4; | |||
} | |||
.em-bottom-spacer { | |||
grid-area: 3 / 1 / 4 / 4; | |||
} | |||
.em-trails { | |||
grid-area: 2 / 1; | |||
} | |||
.em-guides { | |||
grid-area: 2 / 2; | |||
} | |||
.em-skills { | |||
grid-area: 2 / 3; | |||
} | |||
.em-pathways { | |||
grid-area: 4 / 1 / 5 / 4; | |||
font-style: italic; | |||
padding-bottom: .8em; | |||
} | |||
/************* good stuff *****/ | |||
.PageType { | |||
font-style: italic; | |||
font-weight: normal; | |||
color: #590000; | |||
} | |||
.em-table td, .em-table a:link, .em-table a:visited, .em-table a:active { | |||
color: #590000; | |||
} | |||
.em-table a:hover { | |||
color: #666600; | |||
text-decoration: none; | |||
} | |||
.em-ee { | |||
background-color: #ffeb80; | |||
border-top-left-radius: .5em; | |||
border-top-right-radius: .5em; | |||
border-bottom-left-radius: .5em; | |||
border-bottom-right-radius: .5em; | |||
} | |||
.em-header { | |||
border: 1px solid #fa8484; | |||
padding: 0.2em 1em 0.2em 1em; | |||
font-weight: bold; | |||
zzheight: 1em; | |||
text-align: center; | |||
} | |||
.em-milestones { | |||
border-top-left-radius: .5em; | |||
border-top-right-radius: .5em; | |||
background-color: #fdcb96; | |||
} | |||
.em-beacons { | |||
background-color: #fecb96; | |||
border-top-left-radius: .5em; | |||
border-top-right-radius: .5em; | |||
} | |||
.em-bc { | |||
background-color: #fedb8b; | |||
padding: .1px; | |||
} | |||
.em-bc br { | |||
display: block; | |||
height: 0em; | |||
} | |||
.em-bc a { | |||
padding: 0em; | |||
} | |||
.em-attention { | |||
padding: .2em; | |||
} | |||
.em-adaptation { | |||
padding: .2em; | |||
} | |||
.em-association { | |||
border-bottom-left-radius: .5em; | |||
border-bottom-right-radius: .5em; | |||
padding: .2em; | |||
} | |||
.em-bc > span.em-bphrase { | |||
font-style: italic; | |||
font-weight: normal; | |||
padding: .1em .1em .2em .1em; | |||
} | |||
.em-msc { | |||
background-image: linear-gradient(to right, #fa8484, #ffeb80); | |||
border: 1px solid #fa8484; | |||
border-top-left-radius: .5em; | |||
border-top-right-radius: .5em; | |||
border-bottom-left-radius: .5em; | |||
border-bottom-right-radius: .5em; | |||
text-align: center; | |||
} | |||
.em-msh { | |||
} | |||
.em-msh1 { | |||
background-color: #fa8484; | |||
border-bottom-left-radius: .5em; | |||
} | |||
.em-msh2 { | |||
background-color: #fbacac; | |||
} | |||
.em-msh3 { | |||
background-color: #fcbba1; | |||
} | |||
.em-msh4 { | |||
background-color: #fecb96; | |||
} | |||
.em-msh5 { | |||
background-color: #ffdb8b; | |||
border-bottom-right-radius: .5em; | |||
} | |||
div.em-bubble-container { | |||
width: 100%; | |||
display: table; | |||
height: 100%; | |||
} | |||
div.em-bubble-container-row1 { | |||
width: 100%; | |||
display: table-row; | |||
height: 95%; | |||
} | |||
div.em-bubble { | |||
display: flex; | |||
justify-content: center; | |||
align-content: center; | |||
flex-direction: column; | |||
border: solid white 2px; | |||
border-radius: 50%; | |||
font-weight: bold; | |||
text-align: center; | |||
vertical-align: middle; | |||
background-image: linear-gradient(to right, #fcbba1, #ffdb8b); | |||
} | } | ||
.em-bubble-old { | .em-bubble-old { |