518
edits
Difference between revisions of "MediaWiki:Common.css"
Make box colors generic.
KimPegasus (talk | contribs) m (Protected "MediaWiki:Common.css": High traffic page ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))) |
KimPegasus (talk | contribs) (Make box colors generic.) |
||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
| − | /* | + | /* Boxes, boxes everywhere */ |
| − | . | + | /* These colors are purposefully a bit washed out. We want to provide a hint that's distinctive enough to imply a new section or element, whilst not overpowering everything else or creating undue emphasis. Could be done way easier with CSS Custom Properties. Boo IE! Boo! */ |
| + | .box { | ||
| + | display: block; | ||
| + | padding: 1em; | ||
clear: both; | clear: both; | ||
| − | + | border: 1px solid hsl(0, 0%, 89%); | |
| − | border: | + | background-color: hsl(0, 0%, 100%); |
| − | background-color: | + | } |
| − | + | ||
| + | .box.gray { | ||
| + | border-color: hsl(0, 0%, 87%); | ||
| + | background-color: hsl(0, 0%, 98%); | ||
| + | } | ||
| + | .box.gray .box { background-color: hsl(0, 0%, 93%); } | ||
| + | .box.gray .header { background-color: hsl(0, 0%, 50%); } | ||
| + | |||
| + | .box.red { | ||
| + | border-color: hsl(354, 71.5%, 87%); | ||
| + | background-color: hsl(354, 71.5%, 98%); | ||
| + | } | ||
| + | .box.red .box { background-color: hsl(354, 71.5%, 93%); } | ||
| + | .box.red .box { background-color: hsl(354, 71.5%, 50%); } | ||
| + | |||
| + | |||
| + | .box.orange { | ||
| + | border-color: hsl(39, 71.5%, 87%); | ||
| + | background-color: hsl(39, 71.5%, 98%); | ||
| + | } | ||
| + | .box.orange .box { background-color: hsl(39, 71.5%, 93%); } | ||
| + | .box.orange .box { background-color: hsl(39, 71.5%, 50%); } | ||
| + | |||
| + | .box.yellow { | ||
| + | border-color: hsl(55, 71.5%, 87%); | ||
| + | background-color: hsl(55, 71.5%, 98%); | ||
| + | } | ||
| + | .box.yellow .box { background-color: hsl(55, 71.5%, 93%); } | ||
| + | .box.yellow .box { background-color: hsl(55, 71.5%, 50%); } | ||
| + | |||
| + | .box.green { | ||
| + | border-color: hsl(73, 71.5%, 87%); | ||
| + | background-color: hsl(73, 71.5%, 98%); | ||
| + | } | ||
| + | .box.green .box { background-color: hsl(73, 71.5%, 93%); } | ||
| + | .box.green .box { background-color: hsl(73, 71.5%, 50%); } | ||
| + | |||
| + | .box.cerulean { | ||
| + | border-color: hsl(259, 71.5%, 87%); | ||
| + | background-color: hsl(259, 71.5%, 98%); | ||
| + | } | ||
| + | .box.cerulean .box { background-color: hsl(259, 71.5%, 93%); } | ||
| + | .box.cerulean .box { background-color: hsl(259, 71.5%, 50%); } | ||
| + | |||
| + | .box.blue { | ||
| + | border-color hsl(225, 71.5%, 87%); | ||
| + | background-color: hsl(225, 71.5%, 98%); | ||
| + | } | ||
| + | .box.blue .box { background-color: hsl(225, 71.5%, 93%); } | ||
| + | .box.blue .header background-color: hsl(225, 71.5%, 50%); } | ||
| + | |||
| + | |||
| + | .box.purple { | ||
| + | border-color: hsl(259, 71.5%, 87%); | ||
| + | background-color: hsl(259, 71.5%, 98%); | ||
| + | } | ||
| + | .box.purple .box { background-color: hsl(259, 71.5%, 93%); } | ||
| + | .box.purple .header { background-color: hsl(259, 71.5%, 50%); } | ||
| + | |||
| + | |||
| + | .box.pink { | ||
| + | border-color: hsl(334, 71.5%, 87%); | ||
| + | background-color: hsl(334, 71.5%, 98%); | ||
} | } | ||
| + | .box.pink .box { background-color: hsl(334, 71.5%, 93%); } | ||
| + | .box.pink .header { background-color: hsl(334, 71.5%, 50%); } | ||