Toggle search
Toggle menu
41
155
1
1.5K
Wizards and Warlords
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
More actions
← Older edit
Aurelian (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,509 edits
No edit summary
No edit summary
 
(31 intermediate revisions by the same user not shown)
Line 128: Line 128:
.skin-citizen .citizen-footer a:hover {
.skin-citizen .citizen-footer a:hover {
color: #ffd37a;
color: #ffd37a;
}
/* Main Page banner swap for Citizen/tablet/mobile.
  The no-background banner is used through the tablet range, then the desktop
  parchment banner returns at the 900px layout breakpoint. */
.skin-citizen .page-banner-desktop {
display: block !important;
}
.skin-citizen .page-banner-mobile {
display: none !important;
}
@media (max-width: 899px) {
.skin-citizen .page-banner {
aspect-ratio: 300 / 141;
margin-bottom: 0;
background-image: url("/index.php/Special:Redirect/file/Wizlords_banner_nobg.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.skin-citizen .page-banner-desktop {
display: none !important;
}
.skin-citizen .page-banner-mobile {
display: none !important;
}
}
@media (min-width: 900px) {
.skin-citizen .page-banner {
aspect-ratio: auto;
background-image: none;
}
.skin-citizen .page-banner-desktop {
display: block !important;
}
.skin-citizen .page-banner-mobile {
display: none !important;
}
}
}


Line 138: Line 183:
width: 100%;
width: 100%;
max-width: 100%;
max-width: 100%;
}
.skin-citizen .citizen-overflow-wrapper:has(.wizlords-class-category-table) {
width: min(100%, 640px);
max-width: 640px;
margin-right: auto;
margin-left: auto;
overflow-x: visible;
border: 0;
border-radius: 0;
box-shadow: none;
}
.skin-citizen .citizen-overflow-wrapper:has(.wizlords-class-category-table)
.wizlords-class-category-table {
width: 100%;
min-width: 0;
max-width: 640px;
}
.skin-citizen .citizen-overflow-wrapper:has(.wizlords-example-table) {
width: min(100%, 600px);
max-width: 600px;
margin-right: auto;
margin-left: auto;
overflow-x: visible;
border: 0;
border-radius: 0;
box-shadow: none;
}
.skin-citizen .citizen-overflow-wrapper:has(.wizlords-example-table.mw-collapsed) {
background: transparent;
}
.skin-citizen .citizen-overflow-wrapper:has(.wizlords-example-table)
.wizlords-example-table {
width: 100%;
min-width: 0;
max-width: 600px;
}
.skin-citizen .citizen-overflow-wrapper:has(.wizlords-example-table-full-heal) {
width: min(100%, 500px);
max-width: 500px;
}
.skin-citizen .citizen-overflow-wrapper:has(.wizlords-example-table-full-heal)
.wizlords-example-table-full-heal {
max-width: 500px;
}
.skin-citizen .citizen-overflow-wrapper:has(.wizlords-reward-table) {
width: fit-content;
max-width: 100%;
margin-right: auto;
margin-left: 0;
overflow-x: visible;
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
}
.skin-citizen .citizen-overflow-wrapper:has(.wizlords-reward-table)
.wizlords-reward-table {
min-width: 0;
}
.skin-citizen .citizen-overflow-wrapper:has(.wizlords-example-table)
.wizlords-example-table caption {
display: table-caption !important;
caption-side: top;
width: auto !important;
max-width: none !important;
text-align: center !important;
}
}


Line 178: Line 299:
+ .collapsible-block.open-block {
+ .collapsible-block.open-block {
margin-top: 12px;
margin-top: 12px;
}
/* ==========================================================================
  Citizen Custom Collapsible Boxes
  --------------------------------------------------------------------------
  Desktop Vector keeps the standard MediaWiki [Expand] / [Collapse] text from
  Common.css. Citizen uses a compact chevron control so custom collapsible
  boxes visually match MobileFrontend section headings.
  ========================================================================== */
.skin-citizen .wizlords-collapsible-section {
position: relative;
padding-right: 46px;
}
.skin-citizen .wizlords-collapsible-section > .mw-collapsible-toggle {
position: absolute;
top: 9px;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 30px;
height: 30px;
margin: 0;
color: var(--wiz-link, #ff942d) !important;
font-size: 0;
line-height: 1;
text-decoration: none;
}
.skin-citizen .wizlords-collapsible-section > .mw-collapsible-toggle::after {
content: "⌄";
display: block;
color: var(--wiz-link, #ff942d);
font-size: 22px;
line-height: 1;
}
.skin-citizen
.wizlords-collapsible-section:not(.mw-collapsed)
> .mw-collapsible-toggle::after {
content: "⌃";
}
.skin-citizen
.wizlords-collapsible-section
> .mw-collapsible-toggle
.mw-collapsible-text,
.skin-citizen
.wizlords-collapsible-section
> .mw-collapsible-toggle
a {
font-size: 0;
}
.skin-citizen .wizlords-collapsible-section-bottom-toggle {
color: var(--wiz-link, #ff942d) !important;
font-size: 0;
line-height: 1;
}
.skin-citizen .wizlords-collapsible-section-bottom-toggle::after {
content: "⌃";
font-size: 22px;
}
/* Override the text-glyph toggle above with a CSS-drawn Citizen-style chevron.
  The toggle spans the title row, so tapping the heading area opens/closes the
  custom collapsible box on Citizen while Vector keeps the text toggle. */
.skin-citizen .wizlords-collapsible-section {
position: relative;
padding-right: 14px;
}
.skin-citizen .wizlords-collapsible-section > .mw-collapsible-toggle {
position: absolute;
z-index: 2;
top: 0;
right: 0;
left: 0;
box-sizing: border-box;
width: auto;
height: 48px;
margin: 0;
color: transparent !important;
font-size: 0;
line-height: 1;
text-decoration: none;
cursor: pointer;
}
.skin-citizen .wizlords-collapsible-section > .mw-collapsible-toggle::after {
content: "";
position: absolute;
top: 20px;
right: 18px;
display: block;
width: 8px;
height: 8px;
border-right: 2px solid var(--wiz-link, #ff942d);
border-bottom: 2px solid var(--wiz-link, #ff942d);
transform: rotate(45deg);
transform-origin: center;
}
.skin-citizen
.wizlords-collapsible-section:not(.mw-collapsed)
> .mw-collapsible-toggle::after {
top: 24px;
transform: rotate(225deg);
}
.skin-citizen .wizlords-collapsible-section-title {
padding-right: 34px;
}
.skin-citizen
.wizlords-collapsible-section
> .mw-collapsible-toggle
.mw-collapsible-text,
.skin-citizen
.wizlords-collapsible-section
> .mw-collapsible-toggle
a {
color: transparent !important;
font-size: 0;
}
.skin-citizen .wizlords-collapsible-section-bottom-toggle {
position: relative;
min-height: 28px;
color: var(--wiz-link, #ff942d) !important;
font-size: 0;
line-height: 1;
}
.skin-citizen .wizlords-collapsible-section-bottom-toggle::after {
content: "";
position: absolute;
right: 4px;
bottom: 6px;
width: 8px;
height: 8px;
border-right: 2px solid var(--wiz-link, #ff942d);
border-bottom: 2px solid var(--wiz-link, #ff942d);
transform: rotate(225deg);
}
/* Final Citizen custom-collapsible icon override.
  Mimics MobileFrontend's mf-icon-expand / mf-icon-rotate-flip visual states
  without depending on those internal classes being present in page markup. */
.skin-citizen .wizlords-collapsible-section {
position: relative;
padding-right: 14px;
}
.skin-citizen .wizlords-collapsible-section-title {
padding-right: 34px;
}
.skin-citizen .wizlords-collapsible-section > .mw-collapsible-toggle {
position: absolute;
z-index: 2;
top: 0;
right: 0;
left: 0;
box-sizing: border-box;
width: auto;
height: 48px;
margin: 0;
color: transparent !important;
font-size: 0;
line-height: 1;
text-decoration: none;
cursor: pointer;
}
.skin-citizen .wizlords-collapsible-section > .mw-collapsible-toggle::after {
content: "";
position: absolute;
top: 19px;
right: 18px;
display: block;
width: 10px;
height: 10px;
border-right: 2px solid var(--wiz-link, #ff942d);
border-bottom: 2px solid var(--wiz-link, #ff942d);
transform: rotate(45deg);
transform-origin: 50% 50%;
}
.skin-citizen
.wizlords-collapsible-section:not(.mw-collapsed)
> .mw-collapsible-toggle::after {
top: 23px;
transform: rotate(225deg);
}
.skin-citizen
.wizlords-collapsible-section
> .mw-collapsible-toggle
.mw-collapsible-text,
.skin-citizen
.wizlords-collapsible-section
> .mw-collapsible-toggle
a {
color: transparent !important;
font-size: 0;
}
.skin-citizen .wizlords-collapsible-section-bottom-toggle {
position: relative;
min-height: 28px;
color: transparent !important;
font-size: 0;
line-height: 1;
cursor: pointer;
}
.skin-citizen .wizlords-collapsible-section-bottom-toggle::after {
content: "";
position: absolute;
right: 4px;
bottom: 6px;
width: 10px;
height: 10px;
border-right: 2px solid var(--wiz-text, #d2d2d2);
border-bottom: 2px solid var(--wiz-text, #d2d2d2);
transform: rotate(225deg);
}
/* Citizen custom collapsible heading refinement: place the chevron before the
  title text, matching native Citizen section headings. */
.skin-citizen .wizlords-collapsible-section-title {
position: relative;
padding-right: 0;
padding-left: 20px;
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
.skin-citizen .wizlords-collapsible-section > .wizlords-collapsed-hint {
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif !important;
font-size: 14px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1.6 !important;
}
.skin-citizen .wizlords-collapsible-section > .mw-collapsible-toggle::after {
display: none;
}
.skin-citizen .wizlords-collapsible-section-title::before {
content: "";
position: absolute;
top: 50%;
left: 1px;
display: block;
width: 8px;
height: 8px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-65%) rotate(45deg);
transform-origin: 50% 50%;
}
.skin-citizen
.wizlords-collapsible-section:not(.mw-collapsed)
.wizlords-collapsible-section-title::before {
transform: translateY(-35%) rotate(225deg);
}
}


Line 257: Line 652:
   Wide image cards use separate classes and are intentionally unaffected.
   Wide image cards use separate classes and are intentionally unaffected.
   ========================================================================== */
   ========================================================================== */
.skin-citizen .wizlords-mainpage-items,
.skin-citizen .wizlords-mainpage-items {
.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
Line 270: Line 663:
margin-left: auto;
margin-left: auto;
text-align: center;
text-align: center;
}
/* MediaWiki may place introductory text in the same .center wrapper as the
  icon links. Keep that text above the grid instead of treating it as an icon
  cell. */
.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p,
.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p {
flex: 0 0 100%;
width: 100%;
margin: 0 0 8px;
text-align: center;
}
/* MediaWiki sometimes wraps the first block-style icon link in a paragraph.
  Flatten only those icon wrappers so every icon participates in the same
  homepage grid/flex row. Plain text paragraphs keep their normal layout. */
.skin-citizen
:is(.wizlords-mainpage-left, .wizlords-mainpage-right)
> .center
> p:has(.wizlords-imagetext) {
display: contents;
}
}


Line 335: Line 707:
line-height: 1.2;
line-height: 1.2;
text-align: center;
text-align: center;
overflow-wrap: anywhere;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
}


Line 361: Line 735:
   sparse before the full desktop Vector layout takes over. */
   sparse before the full desktop Vector layout takes over. */
@media screen and (min-width: 900px) and (max-width: 1199px) {
@media screen and (min-width: 900px) and (max-width: 1199px) {
.skin-citizen .wizlords-mainpage-items,
.skin-citizen .wizlords-mainpage-items {
.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
gap: 20px 16px;
gap: 20px 16px;
}
}
Line 386: Line 758:
   keeps Citizen tidy if it is tested manually on a wide screen. */
   keeps Citizen tidy if it is tested manually on a wide screen. */
@media screen and (min-width: 1200px) {
@media screen and (min-width: 1200px) {
.skin-citizen .wizlords-mainpage-items,
.skin-citizen .wizlords-mainpage-items {
.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
gap: 16px 12px;
gap: 16px 12px;
}
}
Line 497: Line 867:
line-height: 1.2;
line-height: 1.2;
text-align: center;
text-align: center;
overflow-wrap: anywhere;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
}
 
/* Ultra-narrow phones/foldables.
  Keep the four-across homepage icon rhythm, but give labels just enough room
  that words do not split into single trailing letters around 344-369px. */
@media screen and (max-width: 369px) {
.skin-citizen .wizlords-mainpage-items {
gap: 12px 6px;
}
 
.skin-citizen .wizlords-imagetext {
flex-basis: calc((100% - 18px) / 4);
width: calc((100% - 18px) / 4);
}
 
.skin-citizen .wizlords-imagetext-image,
.skin-citizen .wizlords-imagetext-image img {
width: 58px;
height: 58px;
}
 
.skin-citizen .wizlords-imagetext-text {
font-size: 11px;
line-height: 1.15;
}
}
 
/* Extremely narrow foldable screens.
  At 360px and below, four columns become too tight for readable labels.
  The Main Page square-icon groups contain seven items, so this creates a
  centred 3 / 3 / 1 rhythm instead of allowing single-letter word breaks. */
@media screen and (max-width: 360px) {
.skin-citizen .wizlords-mainpage-items {
gap: 14px 8px;
}
 
.skin-citizen .wizlords-imagetext {
flex-basis: calc((100% - 16px) / 3);
width: calc((100% - 16px) / 3);
}
 
.skin-citizen .wizlords-imagetext-image,
.skin-citizen .wizlords-imagetext-image img {
width: 62px;
height: 62px;
}
 
.skin-citizen .wizlords-imagetext-text {
font-size: 12px;
line-height: 1.15;
}
}
}
}
Line 505: Line 928:
   --------------------------------------------------------------------------
   --------------------------------------------------------------------------
   At 600-899px the homepage uses the available width as one broad content
   At 600-899px the homepage uses the available width as one broad content
   column, while icon groups stay as compact centred rows. The grid columns are
   column. The square icon groups need one component-specific split inside the
   fixed-width, not fractional, so seven icons do not stretch across the whole
   tablet range: 600-799px keeps the stable four-column rhythm with centred
   section and eight icons can still fit on one row where space allows.
   wrapped rows, while 800-899px has enough room for compact single-row groups.
  This avoids ugly orphan rows such as 5+2 or 6+1.
   ========================================================================== */
   ========================================================================== */
@media screen and (min-width: 600px) and (max-width: 899px) {
@media screen and (min-width: 600px) and (max-width: 899px) {
Line 560: Line 984:
}
}


.skin-citizen .wizlords-mainpage-items,
.skin-citizen .wizlords-mainpage-items {
.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext),
display: flex;
.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) {
flex-wrap: wrap;
display: grid;
gap: 12px 16px;
grid-template-columns: repeat(auto-fit, 78px);
max-width: 360px;
gap: 10px 14px;
margin-right: auto;
margin-left: auto;
justify-content: center;
justify-content: center;
justify-items: center;
align-items: flex-start;
align-items: start;
}
 
.skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p,
.skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p {
grid-column: 1 / -1;
width: 100%;
margin-bottom: 4px;
}
}


.skin-citizen .wizlords-imagetext {
.skin-citizen .wizlords-imagetext {
flex: 0 0 78px;
width: 78px;
width: 78px;
max-width: none;
max-width: none;
Line 594: Line 1,012:
font-size: 12px;
font-size: 12px;
line-height: 1.15;
line-height: 1.15;
}
/* Upper tablet widths can cleanly fit seven or eight compact icons in one
  row. Use flex here rather than auto-fit grid: auto-fit can create an
  empty eighth track for seven-item groups once there is enough width,
  while flex only lays out real icon items. */
@media screen and (min-width: 800px) {
.skin-citizen .wizlords-mainpage-items {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
max-width: none;
justify-content: center;
align-items: flex-start;
}
.skin-citizen .wizlords-imagetext {
flex: 0 0 78px;
}
}
}


Line 672: Line 1,109:
padding-right: max(var(--padding-page, 16px), env(safe-area-inset-right));
padding-right: max(var(--padding-page, 16px), env(safe-area-inset-right));
padding-left: max(var(--padding-page, 16px), env(safe-area-inset-left));
padding-left: max(var(--padding-page, 16px), env(safe-area-inset-left));
}
.skin-citizen .toc-page #toc,
.skin-citizen .toc-page .toc {
float: none;
width: 100%;
min-width: 0;
max-width: none;
margin: 0 0 18px;
padding: 14px 16px;
}
}
}
}
Line 704: Line 1,131:
}
}


.skin-citizen .wizlords-race-intro,
.skin-citizen .wizlords-magic-intro {
.skin-citizen .wizlords-magic-intro {
align-items: flex-start;
align-items: flex-start;
gap: 16px;
gap: 16px;
}
.skin-citizen .wizlords-race-quote {
padding-right: 20px;
}
}


Line 770: Line 1,192:
min-width: 0;
min-width: 0;
max-width: 100%;
max-width: 100%;
}
.skin-citizen .wizlords-class-category-table {
max-width: 640px;
}
.skin-citizen .citizen-overflow-wrapper:has(.wizlords-reward-table) {
margin-right: auto;
margin-left: auto;
}
.skin-citizen .wizlords-class-category-mobile {
max-width: 420px;
}
}


Line 799: Line 1,234:
padding: 6px 10px;
padding: 6px 10px;
text-align: center;
text-align: center;
}
.skin-citizen .wizlords-class-card-title {
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
.skin-citizen .wizlords-class-card-summary {
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif !important;
font-size: 13px !important;
font-style: italic !important;
font-weight: 400 !important;
line-height: 1.35 !important;
display: block !important;
overflow: visible !important;
-webkit-line-clamp: unset !important;
}
}
}
}
Retrieved from "https://wizlords.wiki/MediaWiki:Citizen.css"