Source files of fsfe.org, pdfreaders.org, freeyourandroid.org, ilovefs.org, drm.info, and test.fsfe.org. Contribute: https://fsfe.org/contribute/web/ https://fsfe.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

107 lines
2.4 KiB

// ============================================================================
// Styles for coloured boxes around normal content
// These can be:
// * coloured border: <div class="color-box border [...]" data-color="...">
// * full-background colour: <div class="color-box background [...]" data-color="...">
// ============================================================================
div.color-box {
// VARIANT 1: A coloured border around the content
&.border {
padding: 1em;
border: 6px red solid;
margin: 1em 0;
& > h2,
& > div.grid-50-50 > div.box > h2,
& > section > h2
{
margin-top: 0;
}
// Pre-defined colours for border box
&[data-color=fsfe-darkblue] {
border-color: #202D79;
}
&[data-color=fsfe-blue] {
border-color: #3394CE;
}
&[data-color=fsfe-blue] {
border-color: #4AD2F0;
}
&[data-color=fsfe-lime] {
border-color: #D0F400;
}
&[data-color=burnt-sienna] {
border-color: #F0684A;
}
&[data-color=heliotrope] {
border-color: #BB4AF0;
}
&[data-color=screaming-green] {
border-color: #7FF04A;
}
}
// VARIANT 2: a box with a coloured background, with different sub-variants
&.background {
font-weight: 500;
text-align: center;
color: white;
padding: 15px;
// Move the headline closer to the box top, and thicker
h2, h3 {
margin-top: 0;
font-weight: 700;
}
// Define the text inside the box
p {
font-size: 120%;
// no margin-bottom to not distort inner paddings
margin-bottom: 0;
}
// balance missing margin-bottom from p
a.btn {
margin-top: 10px;
}
// Background variant: a coloured box with round corners
&.rounded {
padding: 1em;
margin: 20px auto;
border-radius: 15px;
// center all the things
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
@media (min-width: @screen-sm-min) {
max-width: 70%;
}
}
// Specifics for fullwidth coloured box
&.fullwidth {
margin-top: 30px;
margin-bottom: 30px;
}
// Pre-defined colours for background box
&[data-color=android-lime] {
background-color: #A4C639;
}
&[data-color=android-blue] {
background-color: #1c68a6;
}
&[data-color=dark-green] {
background-color: #6BB340;
}
}
}