MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
Hide WikiEditor insert-file button |
Match WikiEditor insert dialog layout |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 264: | Line 264: | ||
} | } | ||
.ab-difficulty { | .ab-difficulty, | ||
.ab-difficulty-1, | |||
.ab-difficulty-2, | |||
.ab-difficulty-3, | |||
.ab-difficulty-4 { | |||
font-weight: 700; | font-weight: 700; | ||
} | } | ||
.ab-difficulty-1, | |||
.portable-infobox .pi-data-value.ab-difficulty-1, | .portable-infobox .pi-data-value.ab-difficulty-1, | ||
.ab-inline-level.ab-difficulty-1 { | .ab-inline-level.ab-difficulty-1 { | ||
| Line 273: | Line 278: | ||
} | } | ||
.ab-difficulty-2, | |||
.portable-infobox .pi-data-value.ab-difficulty-2, | .portable-infobox .pi-data-value.ab-difficulty-2, | ||
.ab-inline-level.ab-difficulty-2 { | .ab-inline-level.ab-difficulty-2 { | ||
| Line 278: | Line 284: | ||
} | } | ||
.ab-difficulty-3, | |||
.portable-infobox .pi-data-value.ab-difficulty-3, | .portable-infobox .pi-data-value.ab-difficulty-3, | ||
.ab-inline-level.ab-difficulty-3 { | .ab-inline-level.ab-difficulty-3 { | ||
| Line 283: | Line 290: | ||
} | } | ||
.ab-difficulty-4, | |||
.portable-infobox .pi-data-value.ab-difficulty-4, | .portable-infobox .pi-data-value.ab-difficulty-4, | ||
.ab-inline-level.ab-difficulty-4 { | .ab-inline-level.ab-difficulty-4 { | ||
color: #9c27b0; | color: #9c27b0; | ||
} | |||
.ab-hide-catlist { | |||
display: none; | |||
} | |||
.mw-parser-output:has(.ab-hide-catlist) ~ .mw-category-generated { | |||
display: none; | |||
} | } | ||
| Line 443: | Line 459: | ||
align-items: center; | align-items: center; | ||
gap: 6px; | gap: 6px; | ||
} | } | ||
| Line 683: | Line 698: | ||
.wikiEditor-ui-toolbar [rel="file"] { | .wikiEditor-ui-toolbar [rel="file"] { | ||
display: none !important; | display: none !important; | ||
} | |||
.ab-insert-dialog input[type="text"], | |||
.ab-insert-dialog select { | |||
box-sizing: border-box; | |||
width: 100%; | |||
} | |||
.ab-insert-dialog .ab-insert-size-row { | |||
overflow: hidden; | |||
} | |||
.ab-insert-dialog .ab-insert-size-row input[type="text"] { | |||
width: 8em; | |||
} | } | ||
Latest revision as of 21:08, 29 August 2026
/* hide-upv2-edit */
@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito+Sans:wght@400;600;700;800&display=swap");
:root,
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-os {
--ab-bg: #18181c;
--ab-panel: #202026;
--ab-surface: #2a2a30;
--ab-border: #37373e;
--ab-border-hover: #46464e;
--ab-text: #f0f0f5;
--ab-muted: #a0a0aa;
--ab-link: #6496ff;
--ab-link-hover: #78aaff;
--ab-link-stroke: #4669b2;
--ab-font: "Nunito Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
--ab-display: "Fredoka One", cursive;
--btn-text-size: 14px;
--color-surface-0: var(--ab-bg);
--color-surface-1: var(--ab-panel);
--color-surface-2: var(--ab-surface);
--color-surface-3: #32323a;
--color-surface-4: #3a3a44;
--color-base: var(--ab-text);
--color-subtle: var(--ab-muted);
--color-progressive: var(--ab-link);
--color-progressive--hover: var(--ab-link-hover);
--color-link: var(--ab-link);
--color-visited: #78aaff;
--border-color-base: var(--ab-border);
--font-family-base: var(--ab-font);
--font-family-heading: var(--ab-display);
--font-family-citizen-base: "Nunito Sans";
}
html {
color-scheme: dark;
background: var(--ab-bg);
}
body.skin-citizen {
font-family: var(--ab-font);
background: var(--ab-bg);
color: var(--ab-text);
}
.skin-citizen .mw-body h1,
.skin-citizen .firstHeading,
.skin-citizen h1,
.skin-citizen h2,
.skin-citizen h3,
.skin-citizen h4,
.skin-citizen h5,
.skin-citizen h6 {
font-family: var(--ab-display);
font-weight: 400;
}
.skin-citizen a {
color: var(--ab-link);
}
.skin-citizen a:hover {
color: var(--ab-link-hover);
}
.profile-header-attributes > h2,
.profile-avatar-edit-action,
.profile-header-actions,
#userProfileV2-edit,
.profile-externalLinks,
.profile-header-about {
display: none !important;
}
#ab-hide-upv2-edit {
display: none;
}
#ca-ab-central a span:last-child {
white-space: nowrap;
}
#ca-ab-central .ab-central-icon,
#ca-ab-central .ab-central-icon svg {
display: block;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.portable-infobox,
.mw-parser-output table.wikitable,
.mw-parser-output table.infobox {
background: var(--ab-panel);
border: 3px solid var(--ab-border);
border-radius: 4px;
color: var(--ab-text);
box-sizing: border-box;
overflow: hidden;
}
.portable-infobox.ab-infobox {
float: right;
clear: right;
width: 270px;
margin: 0 0 1.2em 1.2em;
}
.portable-infobox .pi-title {
font-family: var(--ab-display);
font-weight: 400;
text-align: center;
background: transparent;
margin: 0;
padding: 0.55em 0.75em;
border: 0;
}
.portable-infobox .pi-image {
margin: 0;
background: var(--ab-surface);
}
.portable-infobox .pi-data {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 0.5em;
padding: 0.35em 0.75em;
overflow: hidden;
}
.portable-infobox .pi-data-label,
.portable-infobox h3.pi-data-label,
.portable-infobox .pi-data-value {
font-family: var(--ab-font);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.portable-infobox .pi-data-label {
color: var(--ab-muted);
flex: 0 0 42%;
}
.portable-infobox .pi-data-value {
flex: 1 1 auto;
text-align: right;
}
.portable-infobox .pi-navigation {
text-align: center;
background: transparent;
margin: 0;
padding: 0.55em 0.75em;
}
.mw-parser-output table.wikitable {
border-collapse: separate;
border-spacing: 0;
margin: 1em 0;
}
.citizen-overflow-wrapper:has(.citizen-overflow-content > .wikitable),
.citizen-overflow-wrapper:has(.citizen-overflow-content > table.infobox) {
border: 0;
border-radius: 0;
box-shadow: none;
margin-inline: 0;
background: transparent;
}
.mw-parser-output table.wikitable > * > tr > th,
.mw-parser-output table.wikitable > * > tr > td {
background: transparent;
border: 0;
border-bottom: 1px solid var(--ab-border);
color: var(--ab-text);
padding: 0.45em 0.75em;
}
.mw-parser-output table.wikitable > * > tr > th {
background: var(--ab-surface);
font-family: var(--ab-display);
font-weight: 400;
}
.mw-parser-output table.wikitable > * > tr:last-child > th,
.mw-parser-output table.wikitable > * > tr:last-child > td {
border-bottom: 0;
}
.mw-parser-output table.infobox {
float: right;
clear: right;
margin: 0 0 1.2em 1.2em;
border-collapse: separate;
border-spacing: 0;
}
.mw-parser-output table.infobox > * > tr > th,
.mw-parser-output table.infobox > * > tr > td {
background: transparent;
border: 0;
border-bottom: 1px solid var(--ab-border);
color: var(--ab-text);
}
.mw-parser-output table.infobox > * > tr:last-child > th,
.mw-parser-output table.infobox > * > tr:last-child > td {
border-bottom: 0;
}
.ab-level-thumb,
.ab-player-thumb {
display: block;
width: 100%;
height: auto;
background: var(--ab-surface);
}
.ab-player-infobox .pi-image {
aspect-ratio: 1 / 1;
overflow: hidden;
}
.ab-player-thumb {
height: 100%;
object-fit: cover;
}
.ab-infobox-central,
.ab-level-central {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4em;
color: var(--ab-link);
font-weight: 700;
text-decoration: none;
}
.ab-infobox-central:hover,
.ab-level-central:hover {
color: var(--ab-link-hover);
}
.ab-infobox-central .ab-central-icon,
.ab-infobox-central .ab-central-icon svg,
.ab-level-central .ab-central-icon,
.ab-level-central .ab-central-icon svg {
display: block;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.ab-difficulty,
.ab-difficulty-1,
.ab-difficulty-2,
.ab-difficulty-3,
.ab-difficulty-4 {
font-weight: 700;
}
.ab-difficulty-1,
.portable-infobox .pi-data-value.ab-difficulty-1,
.ab-inline-level.ab-difficulty-1 {
color: #4caf50;
}
.ab-difficulty-2,
.portable-infobox .pi-data-value.ab-difficulty-2,
.ab-inline-level.ab-difficulty-2 {
color: #e6aa14;
}
.ab-difficulty-3,
.portable-infobox .pi-data-value.ab-difficulty-3,
.ab-inline-level.ab-difficulty-3 {
color: #f44336;
}
.ab-difficulty-4,
.portable-infobox .pi-data-value.ab-difficulty-4,
.ab-inline-level.ab-difficulty-4 {
color: #9c27b0;
}
.ab-hide-catlist {
display: none;
}
.mw-parser-output:has(.ab-hide-catlist) ~ .mw-category-generated {
display: none;
}
.ab-role {
font-weight: 700;
}
.portable-infobox .pi-data-value.ab-role-owner,
.ab-inline-player.ab-role-owner {
color: #dc3c3c;
}
.portable-infobox .pi-data-value.ab-role-moderator,
.ab-inline-player.ab-role-moderator {
color: #6496ff;
}
.portable-infobox .pi-data-value.ab-role-scout,
.ab-inline-player.ab-role-scout {
color: #50be78;
}
.roblox-asset {
margin: 0 0 1em;
max-width: 100%;
box-sizing: border-box;
}
.roblox-asset img,
.roblox-asset-img {
display: block;
max-width: 100%;
height: auto;
background: none;
object-fit: contain;
}
.roblox-asset:not(.roblox-asset--inline) .roblox-asset-img--pending {
min-width: 80px;
min-height: 80px;
background: var(--ab-surface);
}
.roblox-asset.roblox-asset--inline {
display: inline-block;
margin: 0 0.12em;
max-width: none;
vertical-align: middle;
line-height: 1;
}
.roblox-asset.roblox-asset--inline img,
.roblox-asset.roblox-asset--inline .roblox-asset-img {
display: inline-block;
vertical-align: middle;
background: none;
}
.roblox-asset--right {
float: right;
clear: right;
margin: 0 0 1em 1.2em;
}
.roblox-asset--left {
float: left;
clear: left;
margin: 0 1.2em 1em 0;
}
.roblox-asset--center {
display: block;
float: none;
margin: 0 auto 1em;
}
.roblox-asset figcaption {
margin: 0.35em 0 0;
padding: 0;
color: var(--ab-muted);
font-size: 0.75rem;
font-weight: 400;
line-height: 1.35;
text-align: center;
}
.roblox-asset-link {
display: block;
color: inherit;
text-decoration: none;
}
.roblox-asset.roblox-asset--inline .roblox-asset-link {
display: inline-block;
vertical-align: middle;
line-height: 0;
}
.btn,
.home-cats a,
.home-card-action a {
--btn-fill: var(--ab-surface);
--btn-stroke: var(--ab-border);
--btn-fg: var(--ab-text);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
isolation: isolate;
font-family: var(--ab-display);
font-weight: 400;
font-synthesis: none;
font-size: var(--btn-text-size);
letter-spacing: 0.02em;
color: var(--btn-fg);
background: var(--btn-fill);
border: 3px solid var(--btn-stroke);
border-radius: 4px;
padding: 9px 16px;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-decoration: none;
transform: scale(1);
transition:
transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),
filter 0.15s ease;
user-select: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.btn::before,
.home-cats a::before,
.home-card-action a::before {
content: "";
position: absolute;
inset: 0;
border-radius: 1px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.18) 0%,
rgba(255, 255, 255, 0) 42%,
rgba(0, 0, 0, 0.28) 100%
);
pointer-events: none;
z-index: 0;
}
.btn > *,
.home-cats a > *,
.home-card-action a > * {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn:hover,
.home-cats a:hover,
.home-card-action a:hover {
transform: scale(1.03);
filter: brightness(1.06);
text-decoration: none;
}
.btn:active,
.home-cats a:active,
.home-card-action a:active {
transform: scale(0.92);
transition-duration: 0.08s;
}
.btn-secondary,
.home-cats a {
--btn-fill: var(--ab-panel);
--btn-stroke: var(--ab-border);
--btn-fg: var(--ab-text);
}
.btn-secondary:hover,
.home-cats a:hover {
--btn-fill: var(--ab-surface);
--btn-stroke: var(--ab-border-hover);
}
.btn-brand {
--btn-fill: var(--ab-link);
--btn-stroke: var(--ab-link-stroke);
--btn-fg: #ffffff;
}
.btn-blue {
--btn-fill: #3b82f6;
--btn-stroke: #295bb0;
--btn-fg: #ffffff;
}
.btn-discord {
--btn-fill: #5865f2;
--btn-stroke: #4752c4;
--btn-fg: #ffffff;
}
.skin-citizen a.btn,
.skin-citizen a.btn:hover,
.skin-citizen a.btn:visited,
.skin-citizen a.btn.new,
.skin-citizen a.btn.new:visited,
.skin-citizen .home-cats a,
.skin-citizen .home-cats a:hover,
.skin-citizen .home-cats a:visited,
.skin-citizen .home-cats a.new,
.skin-citizen .home-cats a.new:visited,
.skin-citizen .home-card-action a,
.skin-citizen .home-card-action a:hover,
.skin-citizen .home-card-action a:visited {
color: var(--btn-fg) !important;
text-decoration: none !important;
background: var(--btn-fill);
}
.page-Main_Page .mw-body-header,
.page-Main_Page .firstHeading,
.page-Main_Page .citizen-page-header,
.page-Main_Page .citizen-page-heading,
.page-Main_Page #toc,
.page-Main_Page .toc,
.page-Main_Page .citizen-toc,
.page-Main_Page #ext-comments-container,
.page-Main_Page .ext-comments-comments-list,
.page-Main_Page .comment-list-toolbar {
display: none !important;
}
.home {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
padding: 1.5rem 0 2.5rem;
}
.home-logo {
width: min(560px, 92vw);
height: 150px;
background: url(/images/ab-home-logo.png?v=3) center / contain no-repeat;
}
.home-cats {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
width: min(920px, 100%);
flex: 0 0 auto;
align-items: stretch;
}
.home-cats > p {
display: contents;
}
.home-cats > div {
min-width: 0;
}
.home-cats a {
display: flex;
width: 100%;
min-width: 0;
height: 100%;
box-sizing: border-box;
padding: 12px 8px;
font-size: 15px;
white-space: nowrap;
justify-content: center;
text-align: center;
line-height: 1.15;
}
.home-links {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
width: min(920px, 100%);
flex: 0 0 auto;
align-items: stretch;
}
.home-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
min-width: 0;
padding: 16px 14px;
background: var(--ab-panel);
border: 3px solid var(--ab-border);
border-radius: 4px;
box-sizing: border-box;
}
.home-card-title {
margin: 0;
font-family: var(--ab-display);
font-weight: 400;
font-size: 1.25rem;
line-height: 1.2;
color: var(--ab-text);
text-align: center;
width: 100%;
}
.home-card-blurb,
.home-card-blurb p {
margin: 0;
flex: 1;
width: 100%;
color: var(--ab-muted);
font-size: 0.9rem;
line-height: 1.4;
text-align: center;
}
.home-card-action {
margin-top: 4px;
}
.home-card-action a {
display: inline-flex;
background-image: none !important;
padding-right: 16px;
}
.home-card-action a.external::after,
.home-card-action .mw-external-link-icon {
display: none !important;
}
.home-card--play .home-card-action a {
--btn-fill: var(--ab-link);
--btn-stroke: var(--ab-link-stroke);
--btn-fg: #ffffff;
}
.home-card--central .home-card-action a {
--btn-fill: #3b82f6;
--btn-stroke: #295bb0;
--btn-fg: #ffffff;
}
.home-card--discord .home-card-action a {
--btn-fill: #5865f2;
--btn-stroke: #4752c4;
--btn-fg: #ffffff;
}
@media (max-width: 720px) {
.home-cats,
.home-links {
grid-template-columns: 1fr;
}
}
.citizen-footer {
padding: 1.25rem var(--padding-page, 32px);
margin-top: 4rem;
}
.citizen-footer__content,
.citizen-footer__desc,
.citizen-footer__sitetitle,
#footer-places,
#footer-tagline {
display: none !important;
}
.citizen-footer__container {
max-width: none;
width: 100%;
}
.citizen-footer__container,
.citizen-footer__bottom,
#footer-icons {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
}
.wikiEditor-ui-toolbar [rel="file"] {
display: none !important;
}
.ab-insert-dialog input[type="text"],
.ab-insert-dialog select {
box-sizing: border-box;
width: 100%;
}
.ab-insert-dialog .ab-insert-size-row {
overflow: hidden;
}
.ab-insert-dialog .ab-insert-size-row input[type="text"] {
width: 8em;
}