Content added Content deleted
MarbleNiter (talk | contribs) (Added the main font families) |
MarbleNiter (talk | contribs) mNo edit summary |
||
(68 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ |
/* CSS placed here will be applied to all skins */ |
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); |
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); |
||
@import url('https://fonts.googleapis.com/css2?family= |
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); |
||
@import url('https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&display=swap'); |
|||
:root { |
|||
--font-family-citizen-base: 'Inter'; |
|||
--font-family-citizen-serif: 'Noto Serif'; |
|||
letter-spacing: 0.02em; |
|||
font-kerning: normal; |
|||
--color-surface-0: #141414; |
|||
--color-surface-1: #1a1a1a; |
|||
--color-surface-2: #1c1c1c; |
|||
--color-base: #ddd; |
|||
--color-base--subtle: #aaa; |
|||
--color-base--emphasized: #fff; |
|||
--color-link: #ccffff; |
|||
--color-primary--hover: #ffcc00; |
|||
} |
|||
a, a.external { |
|||
--color-link: #ccffff; |
|||
--color-link--hover: #ffcc00; |
|||
text-decoration: none; |
|||
} |
|||
/* Hide Main Page Header */ |
|||
.page-Main_Page .mw-body-header { |
|||
display: none !important; |
|||
} |
|||
/* Footer Customisation */ |
|||
.citizen-footer__content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
gap: var(--space-md); |
|||
padding: var(--space-md) 0; |
|||
} |
|||
.citizen-footer__siteinfo { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: var(--space-xs); |
|||
align-items: center; |
|||
text-align: center; |
|||
max-width: 720px; |
|||
} |
|||
#footer-places ul { |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
} |
|||
.citizen-footer__bottom { |
|||
display: flex; |
|||
flex-direction: column; |
|||
text-align: center; |
|||
} |
|||
#footer-places-about, |
|||
#footer-places-mobileview, |
|||
#footer-places-disclaimers { |
|||
display: none; |
|||
} |
|||
/* Hiding Page-Info */ |
|||
.page-info { |
|||
display: none; |
|||
} |
|||
/* Responsive Images */ |
|||
img { |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
#citizen-drawer__card { |
|||
padding: 1em; |
|||
} |
|||
.citizen-toc__listItem--active > .citizen-toc__link { |
|||
color: var(--color-link); |
|||
} |
|||
.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator { |
|||
background-color: var(--color-link); |
|||
} |
|||
#siteSub, #contentSub, #contentSub2 { |
|||
display: none; |
|||
} |
|||
/* Flip Cards*/ |
|||
.flip-card { |
|||
width: 200px; |
|||
height: 80px; |
|||
background: var(--color-surface-1); |
|||
border: 1px solid #ffffff1a; |
|||
border-radius: 8px; |
|||
} |
|||
.flip-card-inner { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
transition: transform 0.5s; |
|||
transform-style: preserve-3d; |
|||
border-radius: 8px; |
|||
} |
|||
.flip-card:hover .flip-card-inner { |
|||
transform: rotateY(180deg); |
|||
} |
|||
.flip-card-front, .flip-card-back { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
-webkit-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
} |
|||
.flip-card-front { |
|||
display: grid; |
|||
align-items: center; |
|||
text-align: center; |
|||
border-radius: 8px; |
|||
} |
|||
.flip-card-back { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
grid-gap: 0px 4px; |
|||
align-content: space-evenly; |
|||
padding: 8px 24px; |
|||
background-color: var(--color-surface-1); |
|||
font-size: 0.9em; |
|||
transform: rotateY(180deg); |
|||
border-radius: 8px; |
|||
} |
|||
.flip-label { |
|||
color: var(--color-base--emphasized); |
|||
font-weight: 600; |
|||
font-size: 0.9em; |
|||
} |
|||
.flip-xp { |
|||
font-size: 0.8em; |
|||
color: var(--color-base--subtle); |
|||
} |
|||
.mono { |
|||
font-family: 'Cousine', monospace; |
|||
font-optical-sizing: auto; |
|||
font-style: normal; |
|||
} |
|||
.red { |
|||
color:#ff6666; |
|||
} |
|||
.green { |
|||
color:#66ff66; |
|||
} |
|||
.subtle { |
|||
color: var(--color-base--subtle); |
|||
} |
|||
.responsive-grid-section { |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fit,minmax(min(360px,100%),1fr)); |
|||
grid-gap: 2em; |
|||
} |
|||
/* Mobile Page Title */ |
|||
@media screen and (max-width: 640px) { |
|||
.mw-indicators { |
|||
display: none; |
|||
} |
|||
.firstHeading-container { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
/* Modal Cards */ |
|||
.modal-window { |
|||
position: fixed; |
|||
background-color: #000000cc; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 999; |
|||
visibility: hidden; |
|||
opacity: 0; |
|||
pointer-events: none; |
|||
transition: all 0.5s; |
|||
} |
|||
.modal-window:target { |
|||
visibility: visible; |
|||
opacity: 1; |
|||
pointer-events: auto; |
|||
} |
|||
.modal-window > div { |
|||
display: flex; |
|||
flex-flow: column nowrap; |
|||
width: 600px; |
|||
max-width: 100%; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
padding: 24px; |
|||
background: var(--color-surface-1); |
|||
border: 1px solid #ffffff1a; |
|||
overflow: auto; |
|||
} |
|||
.modal-close { |
|||
font-size: 0.8em; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
width: 80px; |
|||
text-decoration: none; |
|||
text-align: center; |
|||
padding: 16px; |
|||
letter-spacing: 0.08em; |
|||
} |
|||
.modal-label { |
|||
color: var(--color-base--emphasized); |
|||
font-weight: 700; |
|||
font-size: 1.25em; |
|||
letter-spacing: 0.04em; |
|||
} |
|||
.modal-sub { |
|||
color: var(--color-base--subtle); |
|||
font-size: 0.9em; |
|||
letter-spacing: 0.04em; |
|||
} |
|||
.modal-content { |
|||
font-size: 0.9em; |
|||
} |
Latest revision as of 17:01, 8 July 2024
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root {
--font-family-citizen-base: 'Inter';
--font-family-citizen-serif: 'Noto Serif';
letter-spacing: 0.02em;
font-kerning: normal;
--color-surface-0: #141414;
--color-surface-1: #1a1a1a;
--color-surface-2: #1c1c1c;
--color-base: #ddd;
--color-base--subtle: #aaa;
--color-base--emphasized: #fff;
--color-link: #ccffff;
--color-primary--hover: #ffcc00;
}
a, a.external {
--color-link: #ccffff;
--color-link--hover: #ffcc00;
text-decoration: none;
}
/* Hide Main Page Header */
.page-Main_Page .mw-body-header {
display: none !important;
}
/* Footer Customisation */
.citizen-footer__content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) 0;
}
.citizen-footer__siteinfo {
display: flex;
flex-direction: column;
gap: var(--space-xs);
align-items: center;
text-align: center;
max-width: 720px;
}
#footer-places ul {
flex-direction: row;
justify-content: center;
}
.citizen-footer__bottom {
display: flex;
flex-direction: column;
text-align: center;
}
#footer-places-about,
#footer-places-mobileview,
#footer-places-disclaimers {
display: none;
}
/* Hiding Page-Info */
.page-info {
display: none;
}
/* Responsive Images */
img {
max-width: 100%;
height: auto;
}
#citizen-drawer__card {
padding: 1em;
}
.citizen-toc__listItem--active > .citizen-toc__link {
color: var(--color-link);
}
.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
background-color: var(--color-link);
}
#siteSub, #contentSub, #contentSub2 {
display: none;
}
/* Flip Cards*/
.flip-card {
width: 200px;
height: 80px;
background: var(--color-surface-1);
border: 1px solid #ffffff1a;
border-radius: 8px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.5s;
transform-style: preserve-3d;
border-radius: 8px;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
display: grid;
align-items: center;
text-align: center;
border-radius: 8px;
}
.flip-card-back {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0px 4px;
align-content: space-evenly;
padding: 8px 24px;
background-color: var(--color-surface-1);
font-size: 0.9em;
transform: rotateY(180deg);
border-radius: 8px;
}
.flip-label {
color: var(--color-base--emphasized);
font-weight: 600;
font-size: 0.9em;
}
.flip-xp {
font-size: 0.8em;
color: var(--color-base--subtle);
}
.mono {
font-family: 'Cousine', monospace;
font-optical-sizing: auto;
font-style: normal;
}
.red {
color:#ff6666;
}
.green {
color:#66ff66;
}
.subtle {
color: var(--color-base--subtle);
}
.responsive-grid-section {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(min(360px,100%),1fr));
grid-gap: 2em;
}
/* Mobile Page Title */
@media screen and (max-width: 640px) {
.mw-indicators {
display: none;
}
.firstHeading-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
}
/* Modal Cards */
.modal-window {
position: fixed;
background-color: #000000cc;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: all 0.5s;
}
.modal-window:target {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
display: flex;
flex-flow: column nowrap;
width: 600px;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 24px;
background: var(--color-surface-1);
border: 1px solid #ffffff1a;
overflow: auto;
}
.modal-close {
font-size: 0.8em;
position: absolute;
right: 0;
top: 0;
width: 80px;
text-decoration: none;
text-align: center;
padding: 16px;
letter-spacing: 0.08em;
}
.modal-label {
color: var(--color-base--emphasized);
font-weight: 700;
font-size: 1.25em;
letter-spacing: 0.04em;
}
.modal-sub {
color: var(--color-base--subtle);
font-size: 0.9em;
letter-spacing: 0.04em;
}
.modal-content {
font-size: 0.9em;
}