Content added Content deleted
MarbleNiter (talk | contribs) mNo edit summary |
MarbleNiter (talk | contribs) mNo edit summary |
||
Line 85: | Line 85: | ||
#siteSub, #contentSub, #contentSub2 { |
#siteSub, #contentSub, #contentSub2 { |
||
display: none; |
display: none; |
||
} |
|||
/* Flip Cards*/ |
|||
.flip-card { |
|||
width: 160px; |
|||
background: var(--color-surface-1); |
|||
border: 1px solid #ffffff1a; |
|||
border-radius: 8px; |
|||
perspective: 400px; |
|||
} |
|||
.flip-card-inner { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
transition: transform 0.8s; |
|||
transform-style: preserve-3d; |
|||
} |
|||
.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 { |
|||
color: #cff; |
|||
font-weight: 700; |
|||
font-size: 1.25em; |
|||
text-align: center; |
|||
} |
|||
.flip-card-back { |
|||
display: grid; |
|||
background-color: var(--color-surface-2); |
|||
font-size: 0.8em; |
|||
transform: rotateY(180deg); |
|||
} |
} |
Revision as of 14:07, 14 June 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');
: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: 160px;
background: var(--color-surface-1);
border: 1px solid #ffffff1a;
border-radius: 8px;
perspective: 400px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.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 {
color: #cff;
font-weight: 700;
font-size: 1.25em;
text-align: center;
}
.flip-card-back {
display: grid;
background-color: var(--color-surface-2);
font-size: 0.8em;
transform: rotateY(180deg);
}