Difference between revisions of "MediaWiki:Common.css"

2,194 bytes added ,  11:40, 3 October 2020
Make box colors generic.
m (Protected "MediaWiki:Common.css": High traffic page ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)))
(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 */
  
/* For template documentation */
+
/* Boxes, boxes everywhere */
.template-documentation {
+
/* 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;
margin: 1em 0 0 0;
+
border: 1px solid hsl(0, 0%, 89%);
border: 1px solid #9a66b3;
+
background-color: hsl(0, 0%, 100%);
background-color: #f8eafb;
+
}
padding: 1em;
+
 
 +
.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%); }