1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-23 20:14:21 +00:00
bluelib/src/rules/skeleton.less

256 lines
4.1 KiB
Text
Raw Normal View History

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