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:Common.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
 
(3 intermediate revisions by the same user not shown)
Line 232: Line 232:
aspect-ratio: 300 / 141;
aspect-ratio: 300 / 141;
margin-bottom: 0;
margin-bottom: 0;
background-image: url("/mywiki/index.php/Special:Redirect/file/Wizlords_banner_nobg.png");
background-image: url("/index.php/Special:Redirect/file/Wizlords_banner_nobg.png");
background-repeat: no-repeat;
background-repeat: no-repeat;
background-position: center center;
background-position: center center;
Line 625: Line 625:
}
}


.wizlords-race-intro {
.wizlords-culture-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
margin: 18px auto 24px;
}
 
.wizlords-culture-card {
display: flex;
display: flex;
align-items: center;
flex-direction: column;
gap: 28px;
grid-column: span 2;
margin: 18px 0 24px;
min-height: 100%;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
}


.wizlords-race-intro-icon {
.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(1),
flex: 0 0 auto;
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(1),
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(3) {
grid-column: 2 / span 2;
}
}


.wizlords-race-intro-icon img {
.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(2),
display: block;
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(2),
width: 100px;
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(4) {
height: 100px;
grid-column: 4 / span 2;
object-fit: contain;
border: 0;
background: transparent;
}
}


.wizlords-race-quote {
.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(4) {
position: relative;
grid-column: 2 / span 2;
margin: 0;
padding: 0 34px;
color: var(--wiz-text, #d2d2d2);
font-size: 16px;
font-style: italic;
line-height: 1.6;
}
}


.wizlords-race-quote::before,
.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(5) {
.wizlords-race-quote::after {
grid-column: 4 / span 2;
position: absolute;
color: #555;
font-size: 42px;
line-height: 1;
}
}


.wizlords-race-quote::before {
.wizlords-culture-grid.cultures-7 .wizlords-culture-card:nth-child(7) {
content: "\201C";
grid-column: 3 / span 2;
left: 0;
top: -6px;
}
}


.wizlords-race-quote::after {
.wizlords-culture-card-header {
content: "\201D";
padding: 16px 12px 12px;
right: 0;
text-align: center;
bottom: -18px;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
}


.wizlords-race-quote-source {
.wizlords-culture-card-header img {
margin-top: 8px;
display: block;
text-align: right;
width: 250px;
font-size: 12px;
height: 250px;
font-style: normal;
max-width: 100%;
margin: 0 auto 10px;
object-fit: contain;
border: 0;
background: transparent;
}
 
.wizlords-culture-card-title,
.wizlords-culture-card-title a {
color: var(--wiz-link, #ff942d);
font-size: 16px;
font-weight: bold;
font-weight: bold;
line-height: 1.25;
text-decoration: none;
}
}


.wizlords-culture-grid {
.wizlords-culture-card-body {
display: grid;
flex: 1 1 auto;
grid-template-columns: repeat(6, minmax(0, 1fr));
padding: 12px;
gap: 14px;
background: #1f1e1e;
margin: 18px auto 24px;
}
}


.wizlords-culture-card {
.wizlords-culture-card-body p {
display: flex;
margin: 0 0 12px;
flex-direction: column;
font-style: italic;
grid-column: span 2;
line-height: 1.55;
min-height: 100%;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
}


.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(1),
.wizlords-culture-separator {
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(1),
width: 110px;
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(3) {
height: 1px;
grid-column: 2 / span 2;
margin: 14px auto 12px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
}


.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(2),
.wizlords-shared-classes {
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(2),
display: table;
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(4) {
width: auto;
grid-column: 4 / span 2;
min-width: 330px;
margin: 16px auto 22px;
padding: 10px 28px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
}


.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(4) {
.wizlords-shared-classes-title {
grid-column: 2 / span 2;
margin-bottom: 5px;
color: var(--wiz-heading-colour, #f2ead7);
font-weight: bold;
text-align: center;
}
}


.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(5) {
.wizlords-shared-classes ul {
grid-column: 4 / span 2;
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(5, auto);
grid-auto-columns: max-content;
column-gap: 42px;
width: max-content;
margin: 2px auto 0;
padding-left: 0;
list-style: disc outside;
}
}


.wizlords-culture-grid.cultures-7 .wizlords-culture-card:nth-child(7) {
.wizlords-shared-classes li {
grid-column: 3 / span 2;
display: list-item;
margin: 0 0 3px;
margin-left: 18px;
break-inside: avoid;
}
}


.wizlords-culture-card-header {
.wizlords-shared-classes.classes-8 ul {
padding: 16px 12px 12px;
grid-template-rows: repeat(4, auto);
text-align: center;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
}


.wizlords-culture-card-header img {
.wizlords-shared-classes.classes-9 ul {
display: block;
grid-template-rows: repeat(5, auto);
width: 250px;
height: 250px;
max-width: 100%;
margin: 0 auto 10px;
object-fit: contain;
border: 0;
background: transparent;
}
}


.wizlords-culture-card-title,
.wizlords-shared-classes.classes-4 ul {
.wizlords-culture-card-title a {
grid-template-rows: repeat(4, auto);
color: var(--wiz-link, #ff942d);
font-size: 16px;
font-weight: bold;
line-height: 1.25;
text-decoration: none;
}
}


.wizlords-culture-card-body {
.wizlords-shared-classes.classes-9-three ul {
flex: 1 1 auto;
grid-template-rows: repeat(3, auto);
padding: 12px;
background: #1f1e1e;
}
}


.wizlords-culture-card-body p {
.wizlords-class-compare {
margin: 0 0 12px;
display: flex;
font-style: italic;
justify-content: center;
line-height: 1.55;
align-items: stretch;
gap: 12px;
margin: 16px auto 22px;
}
}


.wizlords-culture-separator {
.wizlords-class-compare .wizlords-shared-classes {
width: 110px;
margin: 0;
height: 1px;
min-width: 0;
margin: 14px auto 12px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
}


.wizlords-shared-classes {
.wizlords-shared-classes a {
display: table;
color: var(--wiz-link, #ff942d);
width: auto;
text-decoration: none;
min-width: 330px;
margin: 16px auto 22px;
padding: 10px 28px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
}


.wizlords-shared-classes-title {
.wizlords-shared-classes a:hover {
margin-bottom: 5px;
color: #ffd37a;
color: var(--wiz-heading-colour, #f2ead7);
text-decoration: none;
font-weight: bold;
text-align: center;
}
}


.wizlords-shared-classes ul {
.wizlords-culture-classes {
display: grid;
margin-top: 12px;
grid-auto-flow: column;
font-weight: bold;
grid-template-rows: repeat(5, auto);
grid-auto-columns: max-content;
column-gap: 42px;
width: max-content;
margin: 2px auto 0;
padding-left: 0;
list-style: disc outside;
}
}


.wizlords-shared-classes li {
.wizlords-culture-known-for,
display: list-item;
.wizlords-culture-suggested-class {
margin: 0 0 3px;
margin-top: 10px;
margin-left: 18px;
line-height: 1.45;
break-inside: avoid;
}
}


.wizlords-shared-classes.classes-8 ul {
.wizlords-culture-suggested-class a {
grid-template-rows: repeat(4, auto);
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
}


.wizlords-shared-classes.classes-9 ul {
.wizlords-culture-class-note {
grid-template-rows: repeat(5, auto);
margin-top: 6px;
line-height: 1.45;
}
}


.wizlords-shared-classes.classes-4 ul {
.wizlords-culture-card-body ul {
grid-template-rows: repeat(4, auto);
margin: 4px 0 0;
padding-left: 28px;
list-style: disc outside;
}
}


.wizlords-shared-classes.classes-9-three ul {
.wizlords-culture-card-body li {
grid-template-rows: repeat(3, auto);
display: list-item;
margin: 0 0 3px;
}
}


.wizlords-class-compare {
.wizlords-culture-card-body a,
display: flex;
.wizlords-culture-row-classes a {
justify-content: center;
color: var(--wiz-link, #ff942d);
align-items: stretch;
text-decoration: none;
gap: 12px;
margin: 16px auto 22px;
}
}


.wizlords-class-compare .wizlords-shared-classes {
.wizlords-culture-card-body a:hover,
margin: 0;
.wizlords-culture-row-classes a:hover {
min-width: 0;
}
 
.wizlords-shared-classes a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
 
.wizlords-shared-classes a:hover {
color: #ffd37a;
color: #ffd37a;
text-decoration: none;
text-decoration: none;
}
}


.wizlords-culture-classes {
.wizlords-culture-list {
margin-top: 12px;
margin: 18px 0 24px;
font-weight: bold;
}
}


.wizlords-culture-known-for,
.wizlords-culture-row {
.wizlords-culture-suggested-class {
padding: 20px 0 24px;
margin-top: 10px;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
line-height: 1.45;
}
}


.wizlords-culture-suggested-class a {
.wizlords-culture-row-feature {
color: var(--wiz-link, #ff942d);
display: grid;
text-decoration: none;
grid-template-columns: 150px 1px minmax(0, 1fr) 300px;
align-items: center;
gap: 22px;
margin: 10px 0 18px;
}
}


.wizlords-culture-class-note {
.wizlords-culture-row-icon img {
margin-top: 6px;
display: block;
line-height: 1.45;
width: 150px;
height: 150px;
object-fit: contain;
border: 0;
background: transparent;
}
}


.wizlords-culture-card-body ul {
.wizlords-culture-row-divider {
margin: 4px 0 0;
width: 1px;
padding-left: 28px;
height: 150px;
list-style: disc outside;
background: var(--wiz-race-table-border-colour, #4d4d4d);
}
}


.wizlords-culture-card-body li {
.wizlords-culture-row-title,
display: list-item;
.wizlords-culture-row-title a {
margin: 0 0 3px;
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: bold;
line-height: 1.3;
text-decoration: none;
}
}


.wizlords-culture-card-body a,
.wizlords-culture-row-description {
.wizlords-culture-row-classes a {
position: relative;
color: var(--wiz-link, #ff942d);
margin: 0;
text-decoration: none;
padding: 0 34px;
color: var(--wiz-text, #d2d2d2);
font-size: 16px;
font-style: italic;
line-height: 1.6;
}
}


.wizlords-culture-card-body a:hover,
.wizlords-culture-row-description::before,
.wizlords-culture-row-classes a:hover {
.wizlords-culture-row-description::after {
color: #ffd37a;
position: absolute;
text-decoration: none;
color: #555;
font-size: 42px;
line-height: 1;
}
}


.wizlords-culture-list {
.wizlords-culture-row-description::before {
margin: 18px 0 24px;
content: "\201C";
left: 0;
top: -6px;
}
}


.wizlords-culture-row {
.wizlords-culture-row-description::after {
padding: 20px 0 24px;
content: "\201D";
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
right: 0;
bottom: -18px;
}
}


.wizlords-culture-row-feature {
.wizlords-culture-appearance {
display: grid;
box-sizing: border-box;
grid-template-columns: 150px 1px minmax(0, 1fr) 300px;
width: 300px;
align-items: center;
padding: 4px;
gap: 22px;
border: 1px solid var(--wiz-race-table-divider-colour, #9d7531);
margin: 10px 0 18px;
background: #171717;
}
}


.wizlords-culture-row-icon img {
.wizlords-culture-appearance img {
display: block;
display: block;
width: 150px;
width: 300px;
height: 150px;
height: 138px;
object-fit: contain;
object-fit: cover;
border: 0;
border: 0;
background: transparent;
background: transparent;
}
}


.wizlords-culture-row-divider {
.wizlords-culture-appearance-caption {
width: 1px;
margin-top: 4px;
height: 150px;
color: var(--wiz-text, #d2d2d2);
background: var(--wiz-race-table-border-colour, #4d4d4d);
font-size: 12px;
line-height: 1.3;
}
}


.wizlords-culture-row-title,
.wizlords-page-image {
.wizlords-culture-row-title a {
box-sizing: border-box;
color: var(--wiz-heading, #e7e1d4);
width: min(450px, 100%);
font-size: 18px;
padding: 6px;
font-weight: bold;
border: 1px solid var(--wiz-content-border, #ff942d);
line-height: 1.3;
background: #171717;
text-decoration: none;
}
}


.wizlords-culture-row-description {
.wizlords-page-image p {
position: relative;
margin: 0;
margin: 0;
padding: 0 34px;
padding: 0;
color: var(--wiz-text, #d2d2d2);
font-size: 16px;
font-style: italic;
line-height: 1.6;
}
}


.wizlords-culture-row-description::before,
.wizlords-page-image span,
.wizlords-culture-row-description::after {
.wizlords-page-image a {
position: absolute;
display: block;
color: #555;
font-size: 42px;
line-height: 1;
}
}


.wizlords-culture-row-description::before {
.wizlords-page-image.right {
content: "\201C";
float: right;
left: 0;
margin: 0 0 16px 24px;
top: -6px;
}
}


.wizlords-culture-row-description::after {
.wizlords-page-image.left {
content: "\201D";
float: left;
right: 0;
margin: 0 24px 16px 0;
bottom: -18px;
}
}


.wizlords-culture-appearance {
.wizlords-page-image img {
display: block;
box-sizing: border-box;
box-sizing: border-box;
width: 300px;
width: 100%;
padding: 4px;
aspect-ratio: 2 / 1;
border: 1px solid var(--wiz-race-table-divider-colour, #9d7531);
height: auto;
background: #171717;
object-fit: cover;
border: 1px solid var(--wiz-content-border, #ff942d);
background: transparent;
}
}


.wizlords-culture-appearance img {
.wizlords-page-image-caption {
display: block;
margin-top: 7px;
width: 300px;
padding: 0 4px;
height: 138px;
object-fit: cover;
border: 0;
background: transparent;
}
 
.wizlords-culture-appearance-caption {
margin-top: 4px;
color: var(--wiz-text, #d2d2d2);
color: var(--wiz-text, #d2d2d2);
font-size: 12px;
font-size: 12px;
Line 982: Line 971:
}
}


.wizlords-page-image {
.wizlords-culture-row-classes {
box-sizing: border-box;
color: var(--wiz-text, #d2d2d2);
width: min(450px, 100%);
font-size: 14px;
padding: 6px;
border: 1px solid var(--wiz-content-border, #ff942d);
background: #171717;
}
}


.wizlords-page-image p {
.wizlords-culture-class-list {
margin: 0;
display: grid;
padding: 0;
grid-auto-flow: column;
grid-auto-columns: minmax(130px, max-content);
grid-template-rows: repeat(4, auto);
gap: 4px 18px;
margin: 6px 0 0;
padding-left: 28px;
list-style: disc outside;
}
}


.wizlords-page-image span,
.wizlords-culture-class-list li {
.wizlords-page-image a {
display: list-item;
display: block;
margin: 0;
padding: 0;
}
}


.wizlords-page-image.right {
.wizlords-culture-class-list li::marker {
float: right;
color: var(--wiz-text, #d2d2d2);
margin: 0 0 16px 24px;
}
}


.wizlords-page-image.left {
/* Tablet and small-desktop layouts use a three-column grid. */
float: left;
@media (min-width: 600px) and (max-width: 1199px) {
margin: 0 24px 16px 0;
.wiz-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
}


.wizlords-page-image img {
/* Phone layout uses two columns. */
display: block;
@media (max-width: 599px) {
box-sizing: border-box;
.wiz-grid {
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
aspect-ratio: 2 / 1;
}
height: auto;
object-fit: cover;
border: 1px solid var(--wiz-content-border, #ff942d);
background: transparent;
}
}


.wizlords-page-image-caption {
/* CLASS OVERVIEW PAGE */
margin-top: 7px;
/* ------------------- */
padding: 0 4px;
.wizlords-classes-page {
color: var(--wiz-text, #d2d2d2);
max-width: 100%;
font-size: 12px;
line-height: 1.3;
}
}


.wizlords-culture-row-classes {
.wizlords-classes-page ul {
color: var(--wiz-text, #d2d2d2);
list-style: disc outside;
font-size: 14px;
padding-left: 28px;
}
}


.wizlords-culture-class-list {
.wizlords-classes-page li {
display: grid;
display: list-item;
grid-auto-flow: column;
}
grid-auto-columns: minmax(130px, max-content);
grid-template-rows: repeat(4, auto);
gap: 4px 18px;
margin: 6px 0 0;
padding-left: 28px;
list-style: disc outside;
}


.wizlords-culture-class-list li {
.wizlords-class-category-table {
display: list-item;
width: 100%;
margin: 0;
min-width: 0;
padding: 0;
max-width: 640px;
}
margin: 18px auto 24px;
 
border: 0 !important;
.wizlords-culture-class-list li::marker {
background: #171717;
color: var(--wiz-text, #d2d2d2);
color: var(--wiz-text, #d2d2d2);
border-collapse: collapse;
table-layout: fixed;
}
}


/* Tablet and small-desktop layouts use a three-column grid. */
.wizlords-class-category-table th,
@media (min-width: 600px) and (max-width: 1199px) {
.wizlords-class-category-table td {
.wiz-grid {
box-sizing: border-box;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
width: 33.333%;
}
min-width: 0;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
vertical-align: top;
}
}


/* Phone layout uses two columns. */
.wizlords-class-category-table th {
@media (max-width: 599px) {
padding: 8px 18px !important;
.wiz-grid {
background: #1f1e1e !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
color: var(--wiz-heading, #e7e1d4) !important;
}
font-size: 18px;
text-align: center;
}
}


/* CLASS OVERVIEW PAGE */
.wizlords-class-category-icon {
/* ------------------- */
margin: 0 0 6px;
.wizlords-classes-page {
text-align: center;
max-width: 100%;
}
}


.wizlords-classes-page ul {
.wizlords-class-category-icon img {
list-style: disc outside;
display: inline-block;
padding-left: 28px;
width: 110px;
height: 110px;
object-fit: contain;
}
}


.wizlords-classes-page li {
.wizlords-class-category-table td {
display: list-item;
padding: 8px 18px 10px 12px !important;
background: #171717 !important;
}
}


.wizlords-class-category-table {
.wizlords-class-category-table tr:first-child {
width: 100%;
border-bottom: 0;
min-width: 0;
max-width: 640px;
margin: 18px auto 24px;
border: 0 !important;
background: #171717;
color: var(--wiz-text, #d2d2d2);
border-collapse: collapse;
table-layout: fixed;
}
}


.wizlords-class-category-table th,
.wizlords-class-category-table ul {
.wizlords-class-category-table td {
margin: 0;
box-sizing: border-box;
padding-left: 22px;
width: 33.333%;
list-style: disc outside;
min-width: 0;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
vertical-align: top;
}
 
.wizlords-class-category-table th {
padding: 8px 18px !important;
background: #1f1e1e !important;
color: var(--wiz-heading, #e7e1d4) !important;
font-size: 18px;
text-align: center;
}
 
.wizlords-class-category-icon {
margin: 0 0 6px;
text-align: center;
}
 
.wizlords-class-category-icon img {
display: inline-block;
width: 110px;
height: 110px;
object-fit: contain;
}
 
.wizlords-class-category-table td {
padding: 8px 18px 10px 12px !important;
background: #171717 !important;
}
 
.wizlords-class-category-table tr:first-child {
border-bottom: 0;
}
 
.wizlords-class-category-table ul {
margin: 0;
padding-left: 22px;
list-style: disc outside;
}
}


Line 1,421: Line 1,363:
margin: 22px auto 18px;
margin: 22px auto 18px;
background: var(--wiz-race-table-divider-colour, #9d7531);
background: var(--wiz-race-table-divider-colour, #9d7531);
}
/* SHARED STANDARD TABLE
  ---------------------
  Opt-in colour and border treatment for ordinary custom wiki tables.
  Add "wizlords-table" beside "wikitable" instead of overriding every
  MediaWiki-generated wikitable. Component-specific classes continue to own
  specialised widths, alignment, captions, and collapsible behaviour. */
.wikitable.wizlords-table,
.wizlords-table {
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
border-collapse: collapse;
background: #171717 !important;
color: var(--wiz-text, #d2d2d2) !important;
}
.wikitable.wizlords-table th,
.wikitable.wizlords-table td,
.wizlords-table th,
.wizlords-table td {
padding: 8px 12px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
background: #171717 !important;
color: var(--wiz-text, #d2d2d2) !important;
}
.wikitable.wizlords-table th,
.wizlords-table th {
background: #1f1e1e !important;
color: var(--wiz-heading, #e7e1d4) !important;
}
}


Line 2,186: Line 2,158:
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox:last-child {
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox:last-child {
border-bottom: 0;
border-bottom: 0;
}
/* The Player Guide is a desktop/tablet site index. Keep it out of the phone
  layout along with the divider that belongs to it. */
@media screen and (max-width: 599px) {
.ww-navbox-stack,
.wizlords-navbox-divider {
display: none !important;
}
}
}


Retrieved from "https://wizlords.wiki/MediaWiki:Common.css"