Citizen.css: Difference between revisions
MediaWiki interface page
More actions
Created page with "→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; }" |
No edit summary Tag: Reverted |
||
| Line 7: | Line 7: | ||
} | } | ||
.mw-special-Search label[for="mw-search-ns3"] { display:none; } | .mw-special-Search label[for="mw-search-ns3"] { display:none; } | ||
@media screen { | |||
.citizen-body { | |||
border-radius: 20px; | |||
background: rgba(60, 161, 237, 0.05); | |||
box-shadow: 40px 4px 30px rgba(0, 0, 0, 0.1); | |||
backdrop-filter: blur(10px); | |||
-webkit-backdrop-filter: blur(10px); | |||
border: 1px solid rgba(60, 161, 237, 0.50); | |||
padding-right: 20px; | |||
padding-left: 20px; | |||
} | |||
} | |||
.mw-body::before { | |||
content: ""; | |||
position: absolute; | |||
pointer-events: none; | |||
inset: 0; | |||
background-image: url(/images/EDEN.svg); | |||
background-repeat: no-repeat; | |||
background-size: cover; | |||
background-position: center top; | |||
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; | |||
} | |||
Revision as of 12:08, 29 January 2026
/* 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;
background: rgba(60, 161, 237, 0.05);
box-shadow: 40px 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(60, 161, 237, 0.50);
padding-right: 20px;
padding-left: 20px;
}
}
.mw-body::before {
content: "";
position: absolute;
pointer-events: none;
inset: 0;
background-image: url(/images/EDEN.svg);
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
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;
}