2021-03-20 03:10:00 +00:00
|
|
|
@{base-skeleton} {
|
|
|
|
// --- Globals ---
|
|
|
|
|
|
|
|
// Force box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
2021-01-24 03:56:06 +00:00
|
|
|
* {
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
2021-01-23 22:44:06 +00:00
|
|
|
|
|
|
|
// --- Containers ---
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{container-main} {
|
2021-01-23 22:44:06 +00:00
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
|
|
|
max-width: 1280px;
|
|
|
|
}
|
|
|
|
|
|
|
|
// --- Panels ---
|
|
|
|
// Remember to use BOTH the panel AND the panel-* class when using a panel element!
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
// Base panel
|
|
|
|
@{panel} {
|
2021-01-23 22:44:06 +00:00
|
|
|
margin: 8px 0;
|
|
|
|
width: 100%;
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
> @{element-paragraph}, @{element-title}, @{panel} {
|
2021-01-23 22:44:06 +00:00
|
|
|
&:first-child {
|
|
|
|
margin-top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
// A generic content panel
|
|
|
|
@{panel-box} {
|
2021-01-23 22:44:06 +00:00
|
|
|
padding: 8px;
|
|
|
|
border-radius: 4px;
|
|
|
|
border-width: 2px;
|
2021-01-24 03:56:06 +00:00
|
|
|
border-style: solid;
|
2021-03-20 03:10:00 +00:00
|
|
|
background-color: rgba(0, 0, 0, 0.025);
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
// A box with a quote-like border
|
|
|
|
@{panel-blockquote} {
|
2021-01-23 22:44:06 +00:00
|
|
|
border-left-width: 2px;
|
|
|
|
border-top-width: 0;
|
|
|
|
border-bottom-width: 0;
|
|
|
|
border-right-width: 0;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
// A box with smaller text and no border
|
|
|
|
@{panel-aside} {
|
2021-01-23 22:44:06 +00:00
|
|
|
border-width: 0;
|
|
|
|
font-size: smaller;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Evenly split the panels contained inside
|
2021-03-20 03:10:00 +00:00
|
|
|
@{panel-split} {
|
2021-01-23 22:44:06 +00:00
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
gap: 8px;
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
> * {
|
|
|
|
flex-grow: 1;
|
|
|
|
flex-shrink: 0;
|
|
|
|
flex-basis: 0;
|
|
|
|
}
|
2021-01-29 03:01:08 +00:00
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
> @{panel} {
|
2021-01-29 03:01:08 +00:00
|
|
|
margin: 0;
|
|
|
|
}
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// --- Element status ---
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{status-disabled} {
|
2021-01-23 22:44:06 +00:00
|
|
|
cursor: not-allowed;
|
2021-01-29 00:49:21 +00:00
|
|
|
opacity: 50%;
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{status-hoverable} {
|
2021-01-23 22:44:06 +00:00
|
|
|
cursor: help;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{status-clickable} {
|
2021-01-23 22:44:06 +00:00
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
// --- Spoilers ---
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{spoiler} {
|
2021-01-23 22:44:06 +00:00
|
|
|
filter: blur(5px);
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
filter: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// --- Elements ---
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{element-title} {
|
|
|
|
text-align: center;
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{element-paragraph} {
|
2021-01-23 22:44:06 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{element-separator} {
|
2021-01-23 22:44:06 +00:00
|
|
|
border-width: 1px;
|
2021-01-24 03:56:06 +00:00
|
|
|
border-color: dimgrey;
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{element-list-item} {
|
2021-01-23 22:44:06 +00:00
|
|
|
margin: 10px 0;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{element-anchor} {
|
2021-01-24 03:50:18 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2021-01-23 22:44:06 +00:00
|
|
|
// --- Alignment ---
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{align-left} {
|
2021-01-23 22:44:06 +00:00
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{align-center} {
|
2021-01-23 22:44:06 +00:00
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{align-right} {
|
2021-01-23 22:44:06 +00:00
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
|
|
|
|
// --- Sizes ---
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{size-xxl} {
|
2021-01-23 22:44:06 +00:00
|
|
|
font-size: xx-large;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{size-xl} {
|
2021-01-23 22:44:06 +00:00
|
|
|
font-size: x-large;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{size-l} {
|
2021-01-23 22:44:06 +00:00
|
|
|
font-size: large;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{size-m} {
|
2021-01-23 22:44:06 +00:00
|
|
|
font-size: medium;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{size-s} {
|
2021-01-23 22:44:06 +00:00
|
|
|
font-size: small;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{size-xs} {
|
2021-01-23 22:44:06 +00:00
|
|
|
font-size: x-small;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{size-xxs} {
|
2021-01-23 22:44:06 +00:00
|
|
|
font-size: xx-small;
|
|
|
|
}
|
|
|
|
|
|
|
|
// --- Styles ---
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{style-bold} {
|
2021-01-23 22:44:06 +00:00
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{style-italic} {
|
2021-01-23 22:44:06 +00:00
|
|
|
font-style: italic;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{style-underline} {
|
2021-01-23 22:44:06 +00:00
|
|
|
text-decoration-line: underline;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{style-strike} {
|
2021-01-23 22:44:06 +00:00
|
|
|
text-decoration-line: line-through;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{style-monospace} {
|
2021-01-24 03:50:18 +00:00
|
|
|
font-family: monospace;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{style-keyboard} {
|
|
|
|
font-family: monospace;
|
|
|
|
padding: 4px;
|
|
|
|
border: 2px outset;
|
|
|
|
border-radius: 4px;
|
|
|
|
}
|
|
|
|
|
2021-01-23 22:44:06 +00:00
|
|
|
// --- Colors ---
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{color-red} {
|
2021-01-23 22:44:06 +00:00
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{color-orange} {
|
2021-01-23 22:44:06 +00:00
|
|
|
color: orange;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{color-yellow} {
|
2021-01-23 22:44:06 +00:00
|
|
|
color: #dddd00; // Pure yellow isn't readable on a white background
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{color-lime} {
|
2021-01-23 22:44:06 +00:00
|
|
|
color: lime;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{color-cyan} {
|
2021-01-23 22:44:06 +00:00
|
|
|
color: cyan;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{color-blue} {
|
2021-01-23 22:44:06 +00:00
|
|
|
color: blue;
|
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{color-magenta} {
|
2021-01-23 22:44:06 +00:00
|
|
|
color: magenta;
|
|
|
|
}
|
2021-03-20 03:10:00 +00:00
|
|
|
|
|
|
|
@{color-gray} {
|
|
|
|
color: gray;
|
|
|
|
}
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
2021-03-20 03:10:00 +00:00
|
|
|
|