Bureaucrats, Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Administrators
1,372
edits
MediaWiki:Mobile.css: Difference between revisions
no edit summary
imported>Jacob Robertson No edit summary |
No edit summary |
||
| (21 intermediate revisions by 2 users not shown) | |||
| Line 16: | Line 16: | ||
--beacons-light: #C9DBBBff; | --beacons-light: #C9DBBBff; | ||
-- | --realm-darkest: #E0642Eff; | ||
-- | --realm-dark: #F99F53ff; | ||
-- | --realm-middle: #FED68Eff; | ||
-- | --realm-light: #FFF1ACff; | ||
-- | --realm-lightest: #FDDB63ff; | ||
} | } | ||
| Line 33: | Line 33: | ||
align-items: center; | align-items: center; | ||
} | } | ||
.em-shrinker { | |||
display: inline-block; | |||
. | |||
display: | |||
} | } | ||
.em-caption { | |||
font-style: italic; | |||
font-weight: normal; | |||
text-align: center; | |||
color: var(--beacons-dark); | |||
color: var(-- | |||
} | } | ||
. | .em-lenses-inner { | ||
white-space: nowrap; | |||
display:inline-block; | |||
} | } | ||
. | .em-show-shadows-no { | ||
display: | display: none; | ||
} | } | ||
. | .em-shadows-br { | ||
display: none; | |||
} | } | ||
.em-show-shadows-yes { | |||
font-size: 80%; | |||
font-style: italic; | font-style: italic; | ||
margin: 0px; | |||
padding: 0px; | |||
} | } | ||
/**************** PORTRAIT *********************/ | /**************** PORTRAIT *********************/ | ||
@media screen and (width <= 480px) { | @media screen and (width <= 480px) { | ||
.em-container { | .em-container { | ||
display: grid; | display: grid; | ||
| Line 133: | Line 72: | ||
.em-pathways-container { | .em-pathways-container { | ||
display: grid; | display: grid; | ||
grid-template-rows: | grid-template-rows: 50% 50%; | ||
grid-template-columns: | grid-template-columns: 50% 50%; | ||
grid-area: 4 / 2 / 8 / 4; | |||
grid-area: 4 / 2 / | |||
} | } | ||
| Line 158: | Line 95: | ||
grid-area: 3 / 3; | grid-area: 3 / 3; | ||
} | } | ||
.em-mc- | .em-mc-learning { | ||
grid-area: 5 / 1; | grid-area: 5 / 1; | ||
} | } | ||
.em-mc- | .em-mc-training { | ||
grid-area: 6 / 1; | grid-area: 6 / 1; | ||
} | } | ||
.em-mc- | .em-mc-masterful { | ||
grid-area: 7 / 1; | grid-area: 7 / 1; | ||
} | } | ||
.em-mc- | .em-mc-enlightened { | ||
grid-area: 8 / 1; | grid-area: 8 / 1; | ||
} | } | ||
.em- | .em-trails { | ||
grid-area: | grid-area: 2 / 2; | ||
margin-top: .4em; | |||
margin-bottom: .8em; | |||
margin-left: .4em; | |||
margin-right: .8em; | |||
} | |||
.em-guides { | |||
grid-area: 1 / 2; | |||
margin-top: .8em; | |||
margin-bottom: .4em; | |||
margin-left: .4em; | |||
margin-right: .8em; | |||
} | |||
.em-landmarks { | |||
grid-area: 2 / 1; | |||
margin-top: .4em; | |||
margin-bottom: .8em; | |||
margin-left: .8em; | |||
margin-right: .4em; | |||
} | } | ||
.em- | .em-lenses { | ||
grid-area: 1 / 1 | grid-area: 1 / 1; | ||
margin-top: .8em; | |||
margin-bottom: .4em; | |||
margin-left: .8em; | |||
margin-right: .4em; | |||
} | } | ||
.em- | .em-lenses-inner { | ||
white-space: normal; | |||
line-height: 75%; | |||
} | } | ||
.em- | .em-shadows-br { | ||
display: block; | |||
} | } | ||
.em- | .em-shadows-slash { | ||
display: none; | |||
} | } | ||
.em- | div.em-pathways-container div.em-lenses { | ||
background-image: linear-gradient(to right, var(--beacons-dark), var(--beacons-light)); | |||
} | } | ||
.em-pathways { | .em-pathways { | ||
grid-area: | grid-area: 8 / 2 / 9 / 4; | ||
font-style: italic; | font-style: italic; | ||
font-weight: bold; | font-weight: bold; | ||
border: 1px solid var(--map-outlines); | border: 1px solid var(--map-outlines); | ||
background-color: var(-- | background-color: var(--realm-dark); | ||
border-bottom-left-radius: .5em; | border-bottom-left-radius: .5em; | ||
border-bottom-right-radius: .5em; | border-bottom-right-radius: .5em; | ||
| Line 204: | Line 165: | ||
font-style: italic; | font-style: italic; | ||
font-weight: normal; | font-weight: normal; | ||
color: var(--beacons- | font-size: 60%; | ||
color: var(--beacons-middle); | |||
} | |||
.PageTypeLandmark, .PageTypeCredo { | |||
font-size: 85%; | |||
} | } | ||
.em-table td, .em-table a:link, .em-table a:visited { | .em-table td, .em-table a:link, .em-table a:visited { | ||
| Line 224: | Line 189: | ||
padding: 0.2em 1em 0.2em 1em; | padding: 0.2em 1em 0.2em 1em; | ||
font-weight: bold; | font-weight: bold; | ||
text-align: center; | text-align: center; | ||
} | } | ||
.em- | .em-realms { | ||
border-top-left-radius: .5em; | border-top-left-radius: .5em; | ||
border-top-right-radius: .5em; | border-top-right-radius: .5em; | ||
| Line 254: | Line 218: | ||
} | } | ||
.em-bphrase { | .em-bphrase { | ||
padding-top: 0em; | padding-top: 0em; | ||
font-style: italic; | font-style: italic; | ||
| Line 263: | Line 226: | ||
} | } | ||
.em-msc { | .em-msc { | ||
background-image: linear-gradient(to right, var(-- | background-image: linear-gradient(to right, var(--realm-darkest), var(--realm-lightest)); | ||
border: 1px solid var(--map-outlines); | border: 1px solid var(--map-outlines); | ||
border-top-left-radius: .5em; | border-top-left-radius: .5em; | ||
| Line 273: | Line 236: | ||
} | } | ||
.em-msh1 { | .em-msh1 { | ||
background-color: var(-- | background-color: var(--realm-darkest); | ||
} | } | ||
.em-msh2 { | .em-msh2 { | ||
background-color: var(-- | background-color: var(--realm-dark); | ||
} | } | ||
.em-msh3 { | .em-msh3 { | ||
background-color: var(-- | background-color: var(--realm-middle); | ||
} | } | ||
.em-msh4 { | .em-msh4 { | ||
background-color: var(-- | background-color: var(--realm-light); | ||
} | } | ||
.em-msh5 { | .em-msh5 { | ||
background-color: var(-- | background-color: var(--realm-lightest); | ||
border-bottom-left-radius: .5em; | border-bottom-left-radius: .5em; | ||
border-bottom-right-radius: .5em; | border-bottom-right-radius: .5em; | ||
| Line 308: | Line 271: | ||
border: solid white 2px; | border: solid white 2px; | ||
border-radius: | border-radius: 2em; | ||
font-weight: bold; | font-weight: bold; | ||
text-align: center; | text-align: center; | ||
vertical-align: middle; | vertical-align: middle; | ||
background-image: linear-gradient(to right, var(-- | background-image: linear-gradient(to right, var(--realm-dark), var(--realm-light)); | ||
} | } | ||
.em-bubble-old { | .em-bubble-old { | ||
| Line 326: | Line 289: | ||
display: table-row; | display: table-row; | ||
height: 5%; | height: 5%; | ||
} | } | ||
div.em-bubble-outer-old { | div.em-bubble-outer-old { | ||
| Line 339: | Line 296: | ||
:where( | :where( | ||
div.em-hide-ee-yes, div.em-hide- | div.em-hide-ee-yes, div.em-hide-realms-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-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-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- | div.em-hide-pathways-yes, div.em-hide-landmarks-yes, div.em-hide-trails-yes, div.em-hide-guides-yes, div.em-hide-lenses-yes | ||
):where(:not(:hover)) | ):where(:not(:hover)) | ||
{ | { | ||
grayscale: 35%; | grayscale: 35%; | ||
opacity: 55%; | opacity: 55%; | ||
} | |||
div.em-hide-caption-yes { | |||
display: none; | |||
} | } | ||
| Line 352: | Line 313: | ||
border-top-left-radius: .5em; | border-top-left-radius: .5em; | ||
border-top-right-radius: .5em; | border-top-right-radius: .5em; | ||
background-color: var(-- | background-color: var(--realm-middle); | ||
} | } | ||
.em-info-body td, .em-info-body th { | .em-info-body td, .em-info-body th { | ||
border: 1px solid var(-- | border: 1px solid var(--realm-darkest); | ||
padding: .25em .25em .25em .5em; | padding: .25em .25em .25em .5em; | ||
} | } | ||
| Line 362: | Line 323: | ||
} | } | ||
.em-info-label { | .em-info-label { | ||
background-color: var(-- | background-color: var(--realm-light); | ||
font-style: italic; | font-style: italic; | ||
} | } | ||
.em-info-data { | .em-info-data { | ||
background-color: var(-- | background-color: var(--realm-lightest); | ||
font-style: normal; | font-style: normal; | ||
} | } | ||
| Line 372: | Line 333: | ||
border-bottom-left-radius: .5em; | border-bottom-left-radius: .5em; | ||
border-bottom-right-radius: .5em; | border-bottom-right-radius: .5em; | ||
background-color: var(-- | background-color: var(--realm-middle); | ||
} | } | ||
.em-info-header { | .em-info-header { | ||
border-top-left-radius: .5em; | border-top-left-radius: .5em; | ||
border-top-right-radius: .5em; | border-top-right-radius: .5em; | ||
background-color: var(-- | background-color: var(--realm-middle); | ||
} | } | ||
.em-info-body td, .em-info-body th { | .em-info-body td, .em-info-body th { | ||
border: 1px solid var(-- | border: 1px solid var(--realm-darkest); | ||
padding: .25em .25em .25em .5em; | padding: .25em .25em .25em .5em; | ||
} | } | ||
| Line 387: | Line 348: | ||
} | } | ||
.em-info-label { | .em-info-label { | ||
background-color: var(-- | background-color: var(--realm-light); | ||
font-style: italic; | font-style: italic; | ||
} | } | ||
.em-info-data { | .em-info-data { | ||
background-color: var(-- | background-color: var(--realm-lightest); | ||
font-style: normal; | font-style: normal; | ||
} | } | ||
| Line 397: | Line 358: | ||
border-bottom-left-radius: .5em; | border-bottom-left-radius: .5em; | ||
border-bottom-right-radius: .5em; | border-bottom-right-radius: .5em; | ||
background-color: var(-- | background-color: var(--realm-middle); | ||
} | } | ||
} | } | ||
/ | /******************************** LANDSCAPE - COPY THIS DIRECTLY FROM Common.css *********************/ | ||
@media all and (width > 480px) { | @media all and (width > 480px) { | ||
.em-container { | .em-container { | ||
display: grid; | display: grid; | ||
grid-template-columns: | grid-template-columns: auto auto auto auto auto; | ||
gap: 2px; | gap: 2px; | ||
text-align: center; | text-align: center; | ||
| Line 422: | Line 375: | ||
.em-pathways-container { | .em-pathways-container { | ||
display: grid; | display: grid; | ||
grid-template-columns: | grid-template-columns: 50% 50%; | ||
grid-template-rows: | grid-template-rows: 50% 50%; | ||
grid-area: 3 / 2 / 6 / 6; | |||
grid-area: 3 / 2 / 6 / | |||
} | } | ||
| Line 433: | Line 384: | ||
} | } | ||
.em-ms { | .em-ms { | ||
grid-area: 1 / 2 / 2 / | grid-area: 1 / 2 / 2 / 6; | ||
} | } | ||
.em-beacons { | .em-beacons { | ||
| Line 447: | Line 398: | ||
grid-area: 5 / 1 / 7 / 2; | grid-area: 5 / 1 / 7 / 2; | ||
} | } | ||
.em-mc- | .em-mc-learning { | ||
grid-area: 2 / 2; | grid-area: 2 / 2; | ||
} | } | ||
.em-mc- | .em-mc-training { | ||
grid-area: 2 / 3; | grid-area: 2 / 3; | ||
} | } | ||
.em-mc- | .em-mc-masterful { | ||
grid-area: 2 / 4; | grid-area: 2 / 4; | ||
} | } | ||
.em-mc- | .em-mc-enlightened { | ||
grid-area: 2 / 5; | grid-area: 2 / 5; | ||
} | } | ||
.em- | .em-trails { | ||
grid-area: 2 / | grid-area: 2 / 2; | ||
margin-top: .5em; | |||
margin-bottom: 1em; | |||
margin-left: .5em; | |||
margin-right: 1em; | |||
} | } | ||
.em- | .em-guides { | ||
grid-area: | grid-area: 1 / 2; | ||
margin-top: 1em; | |||
margin-bottom: .5em; | |||
margin-left: .5em; | |||
margin-right: 1em; | |||
} | } | ||
.em- | .em-landmarks { | ||
grid-area: 2 / 1; | grid-area: 2 / 1; | ||
margin-top: .5em; | |||
margin-bottom: 1em; | |||
margin-left: 1em; | |||
margin-right: .5em; | |||
} | } | ||
.em- | .em-lenses { | ||
grid-area: | grid-area: 1 / 1; | ||
margin-top: 1em; | |||
margin-bottom: .5em; | |||
margin-left: 1em; | |||
margin-right: .5em; | |||
} | } | ||
.em- | div.em-pathways-container div.em-lenses { | ||
background-image: linear-gradient(to right, var(--beacons-dark), var(--beacons-light)); | |||
} | } | ||
.em-pathways { | .em-pathways { | ||
grid-area: 6 / 2 / 7 / | grid-area: 6 / 2 / 7 / 6; | ||
font-style: italic; | font-style: italic; | ||
font-weight: bold; | font-weight: bold; | ||
border: 1px solid var(--map-outlines); | border: 1px solid var(--map-outlines); | ||
background-color: var(-- | background-color: var(--realm-dark); | ||
border-bottom-left-radius: .5em; | border-bottom-left-radius: .5em; | ||
border-bottom-right-radius: .5em; | border-bottom-right-radius: .5em; | ||
| Line 488: | Line 453: | ||
.em-pathways a { | .em-pathways a { | ||
vertical-align: middle; | vertical-align: middle; | ||
} | } | ||
.PageType { | .PageType { | ||
font-style: italic; | font-style: italic; | ||
font-weight: normal; | font-weight: normal; | ||
color: var(--beacons- | font-size: 60%; | ||
color: var(--beacons-middle); | |||
} | |||
.PageTypeLandmark, .PageTypeCredo { | |||
font-size: 85%; | |||
} | } | ||
.em-table td, .em-table a:link, .em-table a:visited { | .em-table td, .em-table a:link, .em-table a:visited { | ||
| Line 505: | Line 471: | ||
} | } | ||
.em-ee { | .em-ee { | ||
background-color: var(-- | background-color: var(--realm-lightest); | ||
border-top-left-radius: .5em; | border-top-left-radius: .5em; | ||
border-top-right-radius: .5em; | border-top-right-radius: .5em; | ||
| Line 518: | Line 484: | ||
text-align: center; | text-align: center; | ||
} | } | ||
.em- | .em-realms { | ||
border-top-left-radius: .5em; | border-top-left-radius: .5em; | ||
border-top-right-radius: .5em; | border-top-right-radius: .5em; | ||
background-color: var(-- | background-color: var(--realm-middle); | ||
} | } | ||
.em-beacons { | .em-beacons { | ||
| Line 557: | Line 523: | ||
.em-msc { | .em-msc { | ||
background-image: linear-gradient(to right, var(-- | background-image: linear-gradient(to right, var(--realm-darkest), var(--realm-lightest)); | ||
border: 1px solid var(--map-outlines); | border: 1px solid var(--map-outlines); | ||
border-top-left-radius: .5em; | border-top-left-radius: .5em; | ||
border-top-right-radius: .5em; | border-top-right-radius: .5em; | ||
text-align: center; | text-align: center; | ||
} | |||
span.em-ms-wrapper { | |||
height: 100%; | |||
display: inline-flex; | |||
align-items: center; | |||
} | |||
span.em-pathways-wrapper { | |||
height: 100%; | |||
display: inline-flex; | |||
align-items: center; | |||
} | } | ||
| Line 567: | Line 544: | ||
} | } | ||
.em-msh1 { | .em-msh1 { | ||
background-color: var(-- | background-color: var(--realm-darkest); | ||
border-bottom-left-radius: .5em; | border-bottom-left-radius: .5em; | ||
} | } | ||
.em-msh2 { | .em-msh2 { | ||
background-color: var(-- | background-color: var(--realm-dark); | ||
border-bottom-left-radius: .5em; | |||
} | } | ||
.em-msh3 { | .em-msh3 { | ||
background-color: var(-- | background-color: var(--realm-middle); | ||
} | } | ||
.em-msh4 { | .em-msh4 { | ||
background-color: var(-- | background-color: var(--realm-light); | ||
} | } | ||
.em-msh5 { | .em-msh5 { | ||
background-color: var(-- | background-color: var(--realm-lightest); | ||
border-bottom-right-radius: .5em; | border-bottom-right-radius: .5em; | ||
} | } | ||
div.em-bubble { | div.em-bubble { | ||
display: flex; | display: flex; | ||
| Line 602: | Line 569: | ||
border: solid white 2px; | border: solid white 2px; | ||
border-radius: | border-radius: 2em; | ||
font-weight: bold; | font-weight: bold; | ||
text-align: center; | text-align: center; | ||
vertical-align: middle; | vertical-align: middle; | ||
background-image: linear-gradient(to right, var(-- | background-image: linear-gradient(to right, var(--realm-dark), var(--realm-light)); | ||
} | } | ||
:where( | :where( | ||
div.em-hide-ee-yes, div.em-hide- | div.em-hide-ee-yes, div.em-hide-realms-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-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-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- | div.em-hide-pathways-yes, div.em-hide-landmarks-yes, div.em-hide-trails-yes, div.em-hide-guides-yes, div.em-hide-lenses-yes | ||
):where(:not(:hover)) | ):where(:not(:hover)) | ||
{ | { | ||
| Line 642: | Line 587: | ||
opacity: 55%; | opacity: 55%; | ||
} | } | ||
.em- | div.em-hide-caption-yes { | ||
display: none; | |||
} | } | ||
/*** end landscape section ***/ | |||
} | } | ||