MediaWiki:Common.css: Difference between revisions
imported>Jacob Robertson No edit summary |
No edit summary |
||
(58 intermediate revisions by 2 users not shown) | |||
Line 14: | Line 14: | ||
--beacons-light: #C9DBBBff; | --beacons-light: #C9DBBBff; | ||
-- | --realm-darkest: #E0642Eff; | ||
-- | --realm-dark: #F99F53ff; | ||
-- | --realm-middle: #FED68Eff; | ||
-- | --realm-light: #FFF1ACff; | ||
-- | --realm-lightest: #FDDB63ff; | ||
} | } | ||
Line 32: | Line 32: | ||
.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 39: | Line 39: | ||
.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 50: | Line 48: | ||
} | } | ||
.em-ms { | .em-ms { | ||
grid-area: 1 / 2 / 2 / | grid-area: 1 / 2 / 2 / 6; | ||
} | } | ||
.em-beacons { | .em-beacons { | ||
Line 64: | Line 62: | ||
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: | 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- | .em-lenses-inner { | ||
white-space: nowrap; | |||
display:inline-block; | |||
} | } | ||
.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 109: | Line 124: | ||
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 118: | Line 137: | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.em-ee { | div.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; | ||
border-bottom-left-radius: .5em; | border-bottom-left-radius: .5em; | ||
border-bottom-right-radius: .5em; | border-bottom-right-radius: .5em; | ||
padding: 0.2em .5em 0.2em .5em; | |||
} | } | ||
.em-header { | .em-header { | ||
Line 132: | Line 152: | ||
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 171: | Line 191: | ||
.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 192: | Line 212: | ||
} | } | ||
.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; | ||
} | } | ||
.em-realms-item { | |||
padding: 0.2em .5em 0.2em .5em; | |||
} | |||
div.em-bubble { | div.em-bubble { | ||
display: flex; | display: flex; | ||
Line 217: | Line 239: | ||
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-show-shadows-no, .em-shadows-br { | |||
display: none; | |||
} | |||
.em-show-shadows-yes { | |||
font-size: 80%; | |||
font-style: italic; | |||
} | } | ||
: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)) | ||
{ | { | ||
opacity: 55%; | opacity: 55%; | ||
} | } | ||
div.em-hide-lenses-no { | |||
. | opacity: 100%; | ||
} | } | ||
div.em-hide-caption-yes { | |||
display: none; | |||
div. | |||
display: | |||
} | } | ||
Latest revision as of 21:31, 15 September 2023
/* CSS placed here will be applied to all skins */ /********************************************************************************************/ /* NOTE - ADD THIS ALL TO [[MediaWiki:Mobile.css]] AS WELL OR IT WILL NOT SHOW UP ON MOBILE.*/ /********************************************************************************************/ :root { --map-outlines: #48514Bff; --map-hover: #white; --beacons-dark: #75867Aff; --beacons-middle: #8EA485ff; --beacons-light: #C9DBBBff; --realm-darkest: #E0642Eff; --realm-dark: #F99F53ff; --realm-middle: #FED68Eff; --realm-light: #FFF1ACff; --realm-lightest: #FDDB63ff; } .em-shrinker { display: inline-block; } .em-caption { font-style: italic; font-weight: normal; text-align: center; color: var(--beacons-dark); } .em-container { display: grid; grid-template-columns: auto auto auto auto auto; gap: 2px; text-align: center; } .em-pathways-container { display: grid; grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; grid-area: 3 / 2 / 6 / 6; } .em-ee { grid-area: 1 / 1; } .em-ms { grid-area: 1 / 2 / 2 / 6; } .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 / 7 / 2; } .em-mc-learning { grid-area: 2 / 2; } .em-mc-training { grid-area: 2 / 3; } .em-mc-masterful { grid-area: 2 / 4; } .em-mc-enlightened { grid-area: 2 / 5; } .em-trails { grid-area: 2 / 2; margin-top: .5em; margin-bottom: 1em; margin-left: .5em; margin-right: 1em; } .em-guides { grid-area: 1 / 2; margin-top: 1em; margin-bottom: .5em; margin-left: .5em; margin-right: 1em; } .em-landmarks { grid-area: 2 / 1; margin-top: .5em; margin-bottom: 1em; margin-left: 1em; margin-right: .5em; } .em-lenses { grid-area: 1 / 1; margin-top: 1em; margin-bottom: .5em; margin-left: 1em; margin-right: .5em; } .em-lenses-inner { white-space: nowrap; display:inline-block; } div.em-pathways-container div.em-lenses { background-image: linear-gradient(to right, var(--beacons-dark), var(--beacons-light)); } .em-pathways { grid-area: 6 / 2 / 7 / 6; font-style: italic; font-weight: bold; border: 1px solid var(--map-outlines); background-color: var(--realm-dark); border-bottom-left-radius: .5em; border-bottom-right-radius: .5em; } .em-pathways a { vertical-align: middle; } .PageType { font-style: italic; font-weight: normal; font-size: 60%; color: var(--beacons-middle); } .PageTypeLandmark, .PageTypeCredo { font-size: 85%; } .em-table td, .em-table a:link, .em-table a:visited { color: var(--map-outlines); } .em-table a:hover, .em-table a:active { color: var(--map-hover); text-decoration: none; } div.em-ee { background-color: var(--realm-lightest); border-top-left-radius: .5em; border-top-right-radius: .5em; border-bottom-left-radius: .5em; border-bottom-right-radius: .5em; padding: 0.2em .5em 0.2em .5em; } .em-header { border: 1px solid var(--map-outlines); padding: 0.2em 1em 0.2em 1em; font-weight: bold; zzheight: 1em; text-align: center; } .em-realms { border-top-left-radius: .5em; border-top-right-radius: .5em; background-color: var(--realm-middle); } .em-beacons { background-color: var(--beacons-middle); border-top-left-radius: .5em; border-top-right-radius: .5em; } .em-bc { background-color: var(--beacons-light); 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, var(--realm-darkest), var(--realm-lightest)); border: 1px solid var(--map-outlines); border-top-left-radius: .5em; border-top-right-radius: .5em; 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; } .em-msh { } .em-msh1 { background-color: var(--realm-darkest); border-bottom-left-radius: .5em; } .em-msh2 { background-color: var(--realm-dark); border-bottom-left-radius: .5em; } .em-msh3 { background-color: var(--realm-middle); } .em-msh4 { background-color: var(--realm-light); } .em-msh5 { background-color: var(--realm-lightest); border-bottom-right-radius: .5em; } .em-realms-item { padding: 0.2em .5em 0.2em .5em; } div.em-bubble { display: flex; justify-content: center; align-content: center; flex-direction: column; border: solid white 2px; border-radius: 2em; font-weight: bold; text-align: center; vertical-align: middle; background-image: linear-gradient(to right, var(--realm-dark), var(--realm-light)); } .em-show-shadows-no, .em-shadows-br { display: none; } .em-show-shadows-yes { font-size: 80%; font-style: italic; } :where( 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-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-landmarks-yes, div.em-hide-trails-yes, div.em-hide-guides-yes, div.em-hide-lenses-yes ):where(:not(:hover)) { opacity: 55%; } div.em-hide-lenses-no { opacity: 100%; } div.em-hide-caption-yes { display: none; } /**************************************** WIKIPEDIA CSS *******************************************/ /* Infobox template style */ .infobox { border: 1px solid #a2a9b1; border-spacing: 3px; background-color: #f8f9fa; color: black; /* @noflip */ margin: 0.5em 0 0.5em 1em; padding: 0.2em; /* @noflip */ float: right; /* @noflip */ clear: right; font-size: 88%; line-height: 1.5em; width: 22em; } .infobox-header, .infobox-label, .infobox-above, .infobox-full-data, .infobox-data, .infobox-below, .infobox-subheader, .infobox-image, .infobox-navbar, /* Remove element selector when every .infobox thing is using the standard module/templates */ .infobox th, .infobox td { vertical-align: top; } .infobox-label, .infobox-data, /* Remove element selector when every .infobox thing is using the standard module/templates */ .infobox th, .infobox td { /* @noflip */ text-align: left; } /* Remove .infobox when element selectors above are removed */ .infobox .infobox-above, .infobox .infobox-title, /* Remove element selector when every .infobox thing is using the standard module/templates */ .infobox caption { font-size: 125%; font-weight: bold; text-align: center; } .infobox-title, /* Remove element selector when every .infobox thing is using the standard module/templates */ .infobox caption { padding: 0.2em; } /* Remove .infobox when element selectors above are removed */ .infobox .infobox-header, .infobox .infobox-subheader, .infobox .infobox-image, .infobox .infobox-full-data, .infobox .infobox-below { text-align: center; } /* Remove .infobox when element selectors above are removed */ .infobox .infobox-navbar { /* @noflip */ text-align: right; }