Content added Content deleted
mNo edit summary |
(force no bottom margin) |
||
| (24 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| ⚫ | |||
| ⚫ | |||
} |
|||
.container-header { |
.container-header { |
||
position: relative; |
|||
| ⚫ | |||
overflow: visible; |
|||
border: none; |
border: none; |
||
padding-left: 25px; |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
margin-bottom: 0; |
|||
background-color: var(--theme-primary-0); |
|||
} |
} |
||
.container- |
.container-body { |
||
padding: 20px 30px; |
|||
content: ""; |
|||
| ⚫ | |||
position: absolute; |
|||
left: 0; |
|||
| ⚫ | |||
top: 0; |
|||
| ⚫ | |||
width: 100%; |
|||
height: 100%; |
|||
background: #0fd; |
|||
transform: skew(-20deg); |
|||
} |
} |
||
/* |
|||
| ⚫ | |||
* Vector skin |
|||
position: relative; |
|||
*/ |
|||
z-index: 1; |
|||
| ⚫ | |||
/* |
|||
| ⚫ | |||
* Citizen skin |
|||
| ⚫ | |||
*/ |
|||
body.skin-citizen .container-header { |
|||
border-radius: var(--border-radius--medium) var(--border-radius--medium) 0 0; |
|||
color: hsl(210, 3%, 12.9%); |
|||
} |
|||
body.skin-citizen .container-body { |
|||
border: 1px solid var(--color-surface-3); |
|||
border-top: none; |
|||
border-radius: 0 0 var(--border-radius--medium) var(--border-radius--medium); |
|||
background-color: var(--color-surface-2); |
|||
} |
|||
/* |
|||
* Cosmos |
|||
*/ |
|||
body.skin-cosmos .container-header { |
|||
margin-bottom: 0; |
|||
padding-top: 4px; |
|||
border-bottom: none !important; |
|||
border-radius: 4px 4px 0 0; |
|||
} |
|||
body.skin-cosmos .container-body { |
|||
border: 1px solid var(--theme-primary-0); |
|||
border-top: none; |
|||
border-radius: 0 0 4px 4px; |
|||
} |
} |
||
Latest revision as of 14:41, 23 January 2023
.container {
margin-bottom: 1.5em;
}
.container-header {
border: none;
padding-left: 25px;
padding-right: 25px;
display: block;
line-height: 45px;
text-align: center;
font-family: sans-serif;
margin-top: 0;
margin-bottom: 0;
background-color: var(--theme-primary-0);
}
.container-body {
padding: 20px 30px;
}
/*
* Vector skin
*/
/*
* Citizen skin
*/
body.skin-citizen .container-header {
border-radius: var(--border-radius--medium) var(--border-radius--medium) 0 0;
color: hsl(210, 3%, 12.9%);
}
body.skin-citizen .container-body {
border: 1px solid var(--color-surface-3);
border-top: none;
border-radius: 0 0 var(--border-radius--medium) var(--border-radius--medium);
background-color: var(--color-surface-2);
}
/*
* Cosmos
*/
body.skin-cosmos .container-header {
margin-bottom: 0;
padding-top: 4px;
border-bottom: none !important;
border-radius: 4px 4px 0 0;
}
body.skin-cosmos .container-body {
border: 1px solid var(--theme-primary-0);
border-top: none;
border-radius: 0 0 4px 4px;
}