MediaWiki:Citizen.css: Difference between revisions
MediaWiki interface page
More actions
Created page with "→Infobox styling for Citizen skin: .infobox-healing-machine { float: right; width: 260px; border: 1px solid var(--border-color-base); background-color: var(--background-color-primary); padding: 10px; margin: 0 0 10px 20px; font-size: 14px; box-shadow: 0 0 5px rgba(0,0,0,0.1); } .infobox-title { font-weight: bold; font-size: 16px; text-align: center; margin-bottom: 8px; color: var(--color-base); } .infobox-image { text-align: center; ma..." |
No edit summary |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* | /* Generic infobox styling */ | ||
.infobox- | .infobox-item { | ||
float: right; | float: right; /* ensures the box sits on the right */ | ||
width: | clear: right; /* prevents stacking issues */ | ||
width: 320px; | |||
border: 1px solid var(--border-color-base); | border: 1px solid var(--border-color-base); | ||
background-color: var(--background-color-primary); | background-color: var(--background-color-primary); | ||
padding: 10px; | padding: 10px; | ||
margin: 0 0 10px 20px; | margin: 0 0 10px 20px; /* space between content and infobox */ | ||
font-size: 14px; | font-size: 14px; | ||
box-shadow: 0 0 5px rgba(0,0,0,0.1); | box-shadow: 0 0 5px rgba(0,0,0,0.1); | ||
} | } | ||
.infobox-title { | .infobox-item .infobox-title { | ||
font-weight: bold; | font-weight: bold; | ||
font-size: 16px; | font-size: 16px; | ||
| Line 19: | Line 20: | ||
} | } | ||
.infobox-image { | .infobox-item .infobox-image { | ||
text-align: center; | text-align: center; | ||
margin-bottom: 8px; | margin-bottom: 8px; | ||
} | } | ||
.infobox-data .infobox-row { | .infobox-item .infobox-data .infobox-row { | ||
display: flex; | display: flex; | ||
justify-content: space-between; | justify-content: space-between; | ||
| Line 31: | Line 32: | ||
} | } | ||
.infobox-data .infobox-row:nth-child(odd) { | .infobox-item .infobox-data .infobox-row:nth-child(odd) { | ||
background-color: var(--background-color-primary); | background-color: var(--background-color-primary); | ||
} | } | ||
.infobox-data .infobox-row:nth-child(even) { | .infobox-item .infobox-data .infobox-row:nth-child(even) { | ||
background-color: var(--background-color-secondary); | background-color: var(--background-color-secondary); | ||
} | } | ||
.infobox- | .infobox-item .label { | ||
font-weight: bold; | font-weight: bold; | ||
color: var(--color-base); | color: var(--color-base); | ||
} | } | ||
.infobox- | .infobox-item .value { | ||
color: var(--color-subtle); | color: var(--color-subtle); | ||
} | |||
/* Custom standalone sidebar icon */ | |||
.custom-sidebar-icon a { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 40px; | |||
height: 40px; | |||
} | |||
.custom-icon { | |||
width: 20px; | |||
height: 20px; | |||
background-image: url(/images/3/3d/Gods.png); | |||
background-repeat: no-repeat; | |||
background-size: contain; | |||
background-position: center; | |||
} | } | ||
Latest revision as of 09:42, 28 February 2026
/* Generic infobox styling */
.infobox-item {
float: right; /* ensures the box sits on the right */
clear: right; /* prevents stacking issues */
width: 320px;
border: 1px solid var(--border-color-base);
background-color: var(--background-color-primary);
padding: 10px;
margin: 0 0 10px 20px; /* space between content and infobox */
font-size: 14px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.infobox-item .infobox-title {
font-weight: bold;
font-size: 16px;
text-align: center;
margin-bottom: 8px;
color: var(--color-base);
}
.infobox-item .infobox-image {
text-align: center;
margin-bottom: 8px;
}
.infobox-item .infobox-data .infobox-row {
display: flex;
justify-content: space-between;
padding: 6px 8px;
border-bottom: 1px solid var(--border-color-subtle);
}
.infobox-item .infobox-data .infobox-row:nth-child(odd) {
background-color: var(--background-color-primary);
}
.infobox-item .infobox-data .infobox-row:nth-child(even) {
background-color: var(--background-color-secondary);
}
.infobox-item .label {
font-weight: bold;
color: var(--color-base);
}
.infobox-item .value {
color: var(--color-subtle);
}
/* Custom standalone sidebar icon */
.custom-sidebar-icon a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.custom-icon {
width: 20px;
height: 20px;
background-image: url(/images/3/3d/Gods.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}