Citizen.css
MediaWiki interface page
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* All CSS here will be loaded for users of the Citizen skin */
/* To make images responsive */
.res-img img {
max-width: 25vw;
height: auto;
}
.mw-special-Search label[for="mw-search-ns3"] {
display:none;
}
@media screen {
.citizen-body {
border-radius: 20px;
box-shadow: 40px 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding-left: 1em;
padding-right: 1em;
}
.mw-body-content {
margin: 0 !important;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-top: 1em;
}
}
.mw-body::before {
content: "";
position: fixed;
pointer-events: none;
inset: 0;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
z-index: -1; /* behind content */
pointer-events: none; /* avoid blocking clicks */
opacity: 0.75;
/* Fade at bottom */
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: cover;
-webkit-mask-position: center top;
}
/* Test */
.capiunto {
border: 1px solid var(--border-color, #2a2f3a);
border-radius: 8px;
overflow: hidden;
background: #0b1220;
}
.capiunto__media {
display: block;
width: 100%;
margin: 0;
padding: 0;
border-bottom: 1px solid var(--border-color, #2a2f3a);
}
.capiunto__media img,
.capiunto__media video {
display: block;
width: 100%;
height: auto;
}
.capiunto__media video,
.capiunto__media img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.capiunto__table {
width: 100%;
border-collapse: collapse;
background: #0e1627;
}
.capiunto__table th,
.capiunto__table td {
padding: 0.6em 0.8em;
border: none;
}
.capiunto__table tr + tr {
border-top: 1px solid rgba(255,255,255,0.05);
}
.capiunto__table th {
color: #9aa4b2;
font-weight: 500;
text-align: left;
}
.capiunto__table td {
color: #e6e9ef;
}
.capiunto__media img,
.capiunto__media video {
border-radius: 0;
}