2021-03-20 03:27:45 +00:00
|
|
|
|
|
|
|
@{root} {
|
2021-03-20 03:10:00 +00:00
|
|
|
// --- Globals ---
|
|
|
|
|
2021-03-21 00:06:22 +00:00
|
|
|
--bluelib-color-r: 24;
|
|
|
|
--bluelib-color-g: 24;
|
|
|
|
--bluelib-color-b: 24;
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
box-sizing: border-box;
|
2021-03-21 00:35:40 +00:00
|
|
|
@{all} {
|
2021-01-24 03:56:06 +00:00
|
|
|
box-sizing: border-box;
|
2021-03-21 00:35:40 +00:00
|
|
|
color: rgb(
|
|
|
|
var(--bluelib-color-r),
|
|
|
|
var(--bluelib-color-g),
|
|
|
|
var(--bluelib-color-b),
|
|
|
|
);
|
2021-01-24 03:56:06 +00:00
|
|
|
}
|
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-21 00:06:22 +00:00
|
|
|
|
|
|
|
background-color: rgba(
|
|
|
|
var(--bluelib-color-r),
|
|
|
|
var(--bluelib-color-g),
|
|
|
|
var(--bluelib-color-b),
|
|
|
|
0.025
|
|
|
|
);
|
|
|
|
border-color: rgba(
|
|
|
|
var(--bluelib-color-r),
|
|
|
|
var(--bluelib-color-g),
|
|
|
|
var(--bluelib-color-b),
|
2021-03-22 15:28:15 +00:00
|
|
|
0.1
|
2021-03-21 00:06:22 +00:00
|
|
|
);
|
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;
|
|
|
|
|
2021-03-21 01:00:14 +00:00
|
|
|
> @{all} {
|
2021-01-23 22:44:06 +00:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2021-03-22 15:28:15 +00:00
|
|
|
// --- Buttons ---
|
|
|
|
|
|
|
|
@stroke-1: rgba(
|
|
|
|
var(--bluelib-color-r),
|
|
|
|
var(--bluelib-color-g),
|
|
|
|
var(--bluelib-color-b),
|
|
|
|
1
|
|
|
|
);
|
|
|
|
@stroke-2: rgba(
|
|
|
|
calc(var(--bluelib-color-r) - 25),
|
|
|
|
calc(var(--bluelib-color-g) - 25),
|
|
|
|
calc(var(--bluelib-color-b) - 25),
|
|
|
|
1
|
|
|
|
);
|
|
|
|
@stroke-3: rgba(
|
|
|
|
calc(var(--bluelib-color-r) - 55),
|
|
|
|
calc(var(--bluelib-color-g) - 55),
|
|
|
|
calc(var(--bluelib-color-b) - 55),
|
|
|
|
1
|
|
|
|
);
|
|
|
|
|
|
|
|
@fill-1: transparent;
|
|
|
|
@fill-2: rgba(
|
|
|
|
var(--bluelib-color-r),
|
|
|
|
var(--bluelib-color-g),
|
|
|
|
var(--bluelib-color-b),
|
|
|
|
0.1
|
|
|
|
);
|
|
|
|
@fill-3: rgba(
|
|
|
|
var(--bluelib-color-r),
|
|
|
|
var(--bluelib-color-g),
|
|
|
|
var(--bluelib-color-b),
|
|
|
|
0.3
|
|
|
|
);
|
|
|
|
|
|
|
|
@{button} {
|
|
|
|
display: inline-flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
background-color: @stroke-1;
|
|
|
|
border: none;
|
|
|
|
color: white;
|
|
|
|
padding: 6px 16px;
|
|
|
|
border-radius: 4px;
|
|
|
|
font-family: inherit;
|
|
|
|
font-size: inherit;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: @stroke-2;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
background-color: @stroke-3;
|
|
|
|
}
|
2021-03-23 16:12:13 +00:00
|
|
|
|
|
|
|
&@{status-disabled} {
|
|
|
|
border-style: dashed;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: @stroke-1;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
background-color: @stroke-1;
|
|
|
|
}
|
|
|
|
}
|
2021-03-22 15:28:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@{button-fill-width} {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
@{button-toggle} {
|
|
|
|
padding: 4px 14px;
|
|
|
|
border-width: 2px;
|
|
|
|
border-style: solid;
|
|
|
|
}
|
|
|
|
|
|
|
|
@{button-toggle-off} {
|
|
|
|
border-color: @stroke-1;
|
|
|
|
color: @stroke-1;
|
|
|
|
background-color: @fill-1;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
border-color: @stroke-2;
|
|
|
|
color: @stroke-2;
|
|
|
|
background-color: @fill-2;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
border-color: @stroke-3;
|
|
|
|
color: @stroke-3;
|
|
|
|
background-color: @fill-3;
|
|
|
|
}
|
2021-03-23 16:12:13 +00:00
|
|
|
|
|
|
|
&@{status-disabled} {
|
|
|
|
border-style: dashed;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
border-color: @stroke-1;
|
|
|
|
color: @stroke-1;
|
|
|
|
background-color: @fill-1;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
border-color: @stroke-1;
|
|
|
|
color: @stroke-1;
|
|
|
|
background-color: @fill-1;
|
|
|
|
}
|
|
|
|
}
|
2021-03-22 15:28:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@{button-toggle-on} {
|
|
|
|
border-color: @stroke-3;
|
|
|
|
color: @stroke-3;
|
|
|
|
background-color: @fill-3;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
border-color: @stroke-2;
|
|
|
|
color: @stroke-2;
|
|
|
|
background-color: @fill-2;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
border-color: @stroke-1;
|
|
|
|
color: @stroke-1;
|
|
|
|
background-color: @fill-1;
|
|
|
|
}
|
2021-03-23 16:12:13 +00:00
|
|
|
|
|
|
|
&@{status-disabled} {
|
|
|
|
border-style: dashed;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
border-color: @stroke-3;
|
|
|
|
color: @stroke-3;
|
|
|
|
background-color: @fill-3;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
border-color: @stroke-3;
|
|
|
|
color: @stroke-3;
|
|
|
|
background-color: @fill-3;
|
|
|
|
}
|
|
|
|
}
|
2021-03-22 15:28:15 +00:00
|
|
|
}
|
|
|
|
|
2021-01-23 22:44:06 +00:00
|
|
|
// --- 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-03-22 15:28:15 +00:00
|
|
|
border-style: solid;
|
2021-03-21 01:00:14 +00:00
|
|
|
border-color: rgba(
|
|
|
|
var(--bluelib-color-r),
|
|
|
|
var(--bluelib-color-g),
|
|
|
|
var(--bluelib-color-b),
|
|
|
|
0.1
|
|
|
|
);
|
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-03-22 15:28:15 +00:00
|
|
|
--bluelib-color-r: 200;
|
|
|
|
--bluelib-color-g: 0;
|
|
|
|
--bluelib-color-b: 0;
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{color-orange} {
|
2021-03-22 15:28:15 +00:00
|
|
|
--bluelib-color-r: 200;
|
|
|
|
--bluelib-color-g: 165;
|
|
|
|
--bluelib-color-b: 0;
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{color-yellow} {
|
2021-03-22 15:28:15 +00:00
|
|
|
--bluelib-color-r: 200;
|
|
|
|
--bluelib-color-g: 200;
|
|
|
|
--bluelib-color-b: 0;
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{color-lime} {
|
2021-03-22 15:28:15 +00:00
|
|
|
--bluelib-color-r: 0;
|
|
|
|
--bluelib-color-g: 200;
|
|
|
|
--bluelib-color-b: 0;
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{color-cyan} {
|
2021-03-22 15:28:15 +00:00
|
|
|
--bluelib-color-r: 0;
|
|
|
|
--bluelib-color-g: 200;
|
|
|
|
--bluelib-color-b: 200;
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{color-blue} {
|
2021-03-22 15:28:15 +00:00
|
|
|
--bluelib-color-r: 0;
|
|
|
|
--bluelib-color-g: 0;
|
|
|
|
--bluelib-color-b: 200;
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
|
|
|
|
2021-03-20 03:10:00 +00:00
|
|
|
@{color-magenta} {
|
2021-03-22 15:28:15 +00:00
|
|
|
--bluelib-color-r: 200;
|
|
|
|
--bluelib-color-g: 0;
|
|
|
|
--bluelib-color-b: 200;
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
2021-03-20 03:10:00 +00:00
|
|
|
|
|
|
|
@{color-gray} {
|
2021-03-22 15:28:15 +00:00
|
|
|
--bluelib-color-r: 128;
|
|
|
|
--bluelib-color-g: 128;
|
|
|
|
--bluelib-color-b: 128;
|
2021-03-20 03:10:00 +00:00
|
|
|
}
|
2021-01-23 22:44:06 +00:00
|
|
|
}
|
2021-03-20 03:10:00 +00:00
|
|
|
|