MediaWiki:Common.css: Difference between revisions
>Abcboy mNo edit summary |
FloofyPlasma (talk | contribs) No edit summary |
||
| (11 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* Colors from custom Blockheads skin */ | |||
:root { | |||
--bh-sky: #4c91c5; | |||
--bh-sky-mid: #3976A2; | |||
--bh-sky-dark: #326d9b; | |||
--bh-grass: #79a957; | |||
--bh-dirt: #a87b50; | |||
--bh-wood: #c7a477; | |||
--bh-wood-dark: #8b6846; | |||
--bh-paper: #f7f3eb; | |||
--bh-paper-dark: #ebe3d5; | |||
--bh-ink: #3b332b; | |||
--bh-muted: #776f65; | |||
--bh-border: #cdbda5; | |||
} | |||
div.editsection | div.editsection | ||
| Line 13: | Line 29: | ||
{ | { | ||
display: none !important; | display: none !important; | ||
} | |||
/* Message Box */ | |||
.msgbox{ | |||
display:flex; | |||
background:#FCFCFC; | |||
box-sizing:border-box; | |||
align-items:center; | |||
width:auto; | |||
padding:.4em .8em; | |||
margin:0 auto; | |||
margin-bottom:1em | |||
} | |||
.msgbox + .msgbox{ | |||
border-top:none; | |||
margin-top:-1em | |||
} | |||
:not(.msgbox) + .msgbox,.msgbox:first-of-type{ | |||
border-top-right-radius:.15em; | |||
border-top-left-radius:.15em | |||
} | |||
.msgbox #msgbox-iconimage,.msgbox #msgbox-image{ | |||
margin:0 1.5em 0 .5em | |||
} | |||
.msgbox-mini{ | |||
padding:.4em .5em; | |||
margin:0 0; | |||
margin-bottom:1em | |||
} | |||
.msgbox-mini #msgbox-icon{ | |||
align-self:flex-start | |||
} | |||
.msgbox-mini #msgbox-iconimage,.msgbox-mini #msgbox-image{ | |||
margin:0 .4em 0 .5em | |||
} | |||
.msgbox-mini #msgbox-text{ | |||
font-size:small | |||
} | |||
.msgbox-red{ | |||
background:hsl(0,75%,92%); | |||
border-left:4px solid hsl(0,75%,85%) | |||
} | |||
.msgbox-orange{ | |||
background:hsl(40,75%,92%); | |||
border-left:4px solid hsl(40,75%,85%) | |||
} | |||
.msgbox-yellow{ | |||
background:hsl(60,75%,92%); | |||
border-left:4px solid hsl(60,75%,85%) | |||
} | |||
.msgbox-green{ | |||
background:hsl(120,75%,92%); | |||
border-left:4px solid hsl(120,75%,85%) | |||
} | |||
.msgbox-blue{ | |||
background:hsl(215,75%,92%); | |||
border-left:4px solid hsl(215,75%,85%) | |||
} | |||
.msgbox-magenta{ | |||
background:hsl(310,75%,92%); | |||
border-left:4px solid hsl(310,75%,85%) | |||
} | |||
.msgbox-purple{ | |||
background:hsl(260,75%,92%); | |||
border-left:4px solid hsl(260,75%,85%) | |||
} | |||
.msgbox-gray{ | |||
background:hsl(0,0%,92%); | |||
border-left:4px solid hsl(0,0%,85%) | |||
} | |||
/* Crafting Recipe */ | |||
.craft-recipe { | |||
background: var(--surface-2); | |||
border: 0.5px solid var(--border); | |||
border-radius: 8px; | |||
padding: 1.25rem; | |||
margin: 1.5rem 0; | |||
} | |||
.craft-header { | |||
font-size: 13px; | |||
color: var(--text-secondary); | |||
margin-bottom: 1.25rem; | |||
font-weight: 500; | |||
display: flex; | |||
align-items: center; | |||
gap: 0.5rem; | |||
} | |||
.craft-bench-icon { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 20px; | |||
height: 20px; | |||
flex-shrink: 0; | |||
} | |||
.craft-bench-icon img { | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
.craft-row { | |||
display: flex; | |||
align-items: center; | |||
gap: 0.75rem; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
} | |||
.craft-item { | |||
text-align: center; | |||
min-width: 60px; | |||
} | |||
.craft-icon { | |||
width: 36px; | |||
height: 36px; | |||
margin: 0 auto 0.5rem; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
background: var(--surface-1); | |||
border: 0.5px solid var(--border); | |||
border-radius: 4px; | |||
} | |||
.craft-icon img { | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
.craft-qty { | |||
font-size: 12px; | |||
font-weight: 500; | |||
color: var(--text-primary); | |||
margin-bottom: 0.25rem; | |||
} | |||
.craft-name { | |||
font-size: 12px; | |||
color: var(--text-primary); | |||
word-break: break-word; | |||
} | |||
.craft-name a { | |||
color: var(--text-accent); | |||
text-decoration: none; | |||
} | |||
.craft-name a:hover { | |||
text-decoration: underline; | |||
} | |||
.craft-plus { | |||
font-size: 16px; | |||
color: var(--text-secondary); | |||
font-weight: 300; | |||
} | |||
.craft-equals { | |||
font-size: 16px; | |||
color: var(--text-secondary); | |||
font-weight: 300; | |||
margin: 0 0.5rem; | |||
} | } | ||