mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 11:34:21 +00:00
✨ Implement the new variable system
This commit is contained in:
parent
912398ce00
commit
22042bebc6
26 changed files with 3409 additions and 5917 deletions
|
|
@ -2,6 +2,8 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
<link rel="stylesheet" href="src/targets/skeleton.root.css">
|
||||||
|
<link rel="stylesheet" href="src/targets/paper.root.css">
|
||||||
<link rel="stylesheet" href="src/targets/royalblue.root.css">
|
<link rel="stylesheet" href="src/targets/royalblue.root.css">
|
||||||
<title>Bluelib 2</title>
|
<title>Bluelib 2</title>
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
|
||||||
|
|
||||||
.font-text() {
|
.font-text() {
|
||||||
font-family: "Fira Sans", sans-serif;
|
font-family: "Fira Sans", sans-serif;
|
||||||
|
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
@hex-background: #ffffff;
|
|
||||||
@hex-foreground: #181818;
|
|
||||||
@hex-accent: #181818;
|
|
||||||
|
|
||||||
@hex-red: #c80000;
|
|
||||||
@hex-orange: #c8a500;
|
|
||||||
@hex-yellow: #c8c800;
|
|
||||||
@hex-lime: #00c800;
|
|
||||||
@hex-cyan: #00c8c8;
|
|
||||||
@hex-blue: #0000c8;
|
|
||||||
@hex-magenta: #c800c8;
|
|
||||||
@hex-gray: #808080;
|
|
||||||
|
|
||||||
@hex-link: #009393;
|
|
||||||
@hex-link-hover: #006b6b;
|
|
||||||
@hex-link-active: #004141;
|
|
||||||
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
@hex-background: #0d193b;
|
|
||||||
@hex-foreground: #a0ccff;
|
|
||||||
@hex-accent: #ffffff;
|
|
||||||
|
|
||||||
@hex-red: #ff7d7d;
|
|
||||||
@hex-orange: #ffbb7d;
|
|
||||||
@hex-yellow: #ffff7d;
|
|
||||||
@hex-lime: #7dff7d;
|
|
||||||
@hex-cyan: #7dffff;
|
|
||||||
@hex-blue: #7d7dff;
|
|
||||||
@hex-magenta: #ff7dff;
|
|
||||||
@hex-gray: #bbbbbb;
|
|
||||||
|
|
||||||
@hex-link: #00caca;
|
|
||||||
@hex-link-hover: #00ffff;
|
|
||||||
@hex-link-active: #a0ffff;
|
|
||||||
24
src/rules/paper.less
Normal file
24
src/rules/paper.less
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
@{bluelib} {
|
||||||
|
.set-var-rgb(bluelib-background; 255; 255; 255);
|
||||||
|
.set-var-rgb(bluelib-foreground; 24; 24; 24);
|
||||||
|
.set-var-rgb(bluelib-accent; 24; 24; 24);
|
||||||
|
|
||||||
|
.set-var-rgb(bluelib-link; 0; 147; 147);
|
||||||
|
.set-var-rgb(bluelib-link-hover; 0; 107; 107);
|
||||||
|
.set-var-rgb(bluelib-link-active; 0; 65; 65);
|
||||||
|
|
||||||
|
.set-var-rgb(bluelib-red; 200; 0; 0);
|
||||||
|
.set-var-rgb(bluelib-orange; 200; 165; 0);
|
||||||
|
.set-var-rgb(bluelib-yellow; 200; 200; 0);
|
||||||
|
.set-var-rgb(bluelib-lime; 0; 200; 0);
|
||||||
|
.set-var-rgb(bluelib-cyan; 0; 200; 200);
|
||||||
|
.set-var-rgb(bluelib-blue; 0; 0; 200);
|
||||||
|
.set-var-rgb(bluelib-magenta; 200; 0; 200);
|
||||||
|
.set-var-rgb(bluelib-gray; 128; 128; 128);
|
||||||
|
|
||||||
|
--bluelib-polarity: -1;
|
||||||
|
|
||||||
|
.set-var-font(bluelib-title; sans-serif; bold);
|
||||||
|
.set-var-font(bluelib-text; sans-serif; normal);
|
||||||
|
.set-var-font(bluelib-code; monospace; normal);
|
||||||
|
}
|
||||||
26
src/rules/royalblue.less
Normal file
26
src/rules/royalblue.less
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||||
|
|
||||||
|
@{bluelib} {
|
||||||
|
.set-var-rgb(bluelib-background; 13; 25; 59);
|
||||||
|
.set-var-rgb(bluelib-foreground; 160; 204; 255);
|
||||||
|
.set-var-rgb(bluelib-accent; 255; 255; 255);
|
||||||
|
|
||||||
|
.set-var-rgb(bluelib-red; 255; 125; 125);
|
||||||
|
.set-var-rgb(bluelib-orange; 255; 187; 125);
|
||||||
|
.set-var-rgb(bluelib-yellow; 255; 255; 125);
|
||||||
|
.set-var-rgb(bluelib-lime; 125; 255; 125);
|
||||||
|
.set-var-rgb(bluelib-cyan; 125; 255; 255);
|
||||||
|
.set-var-rgb(bluelib-blue; 125; 125; 255);
|
||||||
|
.set-var-rgb(bluelib-magenta; 255; 125; 255);
|
||||||
|
.set-var-rgb(bluelib-gray; 187; 187; 187);
|
||||||
|
|
||||||
|
.set-var-rgb(bluelib-link; 0; 202; 202);
|
||||||
|
.set-var-rgb(bluelib-link-hover; 0; 255; 255);
|
||||||
|
.set-var-rgb(bluelib-link-active; 160; 255; 255);
|
||||||
|
|
||||||
|
--bluelib-polarity: 1;
|
||||||
|
|
||||||
|
.set-var-font(bluelib-title; "Fira Sans", sans-serif; 500);
|
||||||
|
.set-var-font(bluelib-text; "Fira Sans", sans-serif; 400);
|
||||||
|
.set-var-font(bluelib-code; "Fira Code", sans-serif; 400);
|
||||||
|
}
|
||||||
480
src/rules/skeleton.less
vendored
480
src/rules/skeleton.less
vendored
|
|
@ -3,15 +3,45 @@
|
||||||
/// Elements outside the root won't be styled at all, allowing Bluelib's styling to be contained in components or modules of a website.
|
/// Elements outside the root won't be styled at all, allowing Bluelib's styling to be contained in components or modules of a website.
|
||||||
|
|
||||||
@{bluelib} {
|
@{bluelib} {
|
||||||
// Get
|
|
||||||
|
|
||||||
// Set the background defined in the palette
|
/// ===== Palette =====
|
||||||
background-color: @hex-background;
|
/// The palette used by bluelib is specified at the root level with attributes on the element.
|
||||||
|
/// The palette contains also the fonts bluelib should use.
|
||||||
|
/// By default, bluelib uses the "paper" palette.
|
||||||
|
|
||||||
// Set the base color to the foreground defined in the palette
|
//<editor-fold desc="Rules: Palette">
|
||||||
.bluelib-color(@hex-foreground);
|
|
||||||
// By default, text should use the main font
|
// The background color.
|
||||||
.font-text();
|
.set-var-rgb(bluelib-background; 255; 255; 255);
|
||||||
|
// The main text color.
|
||||||
|
.set-var-rgb(bluelib-foreground; 24; 24; 24);
|
||||||
|
// A contrasting color to make important text more visible
|
||||||
|
.set-var-rgb(bluelib-accent; 24; 24; 24);
|
||||||
|
|
||||||
|
// The color of links
|
||||||
|
.set-var-rgb(bluelib-link; 0; 147; 147);
|
||||||
|
|
||||||
|
// Extra builtin colors
|
||||||
|
.set-var-rgb(bluelib-red; 200; 0; 0);
|
||||||
|
.set-var-rgb(bluelib-orange; 200; 165; 0);
|
||||||
|
.set-var-rgb(bluelib-yellow; 200; 200; 0);
|
||||||
|
.set-var-rgb(bluelib-lime; 0; 200; 0);
|
||||||
|
.set-var-rgb(bluelib-cyan; 0; 200; 200);
|
||||||
|
.set-var-rgb(bluelib-blue; 0; 0; 200);
|
||||||
|
.set-var-rgb(bluelib-magenta; 200; 0; 200);
|
||||||
|
.set-var-rgb(bluelib-gray; 128; 128; 128);
|
||||||
|
|
||||||
|
// 1 for dark themes, -1 for light themes
|
||||||
|
--bluelib-polarity: -1;
|
||||||
|
|
||||||
|
// Font to be used in titles
|
||||||
|
.set-var-font(bluelib-title; sans-serif; bold);
|
||||||
|
// Font to be used in the rest of the text
|
||||||
|
.set-var-font(bluelib-text; sans-serif; normal);
|
||||||
|
// Font to be used in monospace contexts
|
||||||
|
.set-var-font(bluelib-code; monospace; normal);
|
||||||
|
|
||||||
|
//</editor-fold>
|
||||||
|
|
||||||
/// ===== Macros =====
|
/// ===== Macros =====
|
||||||
/// Less allows defining variables to reduce the amount of boilerplate code to write while defining the rules.
|
/// Less allows defining variables to reduce the amount of boilerplate code to write while defining the rules.
|
||||||
|
|
@ -19,114 +49,213 @@
|
||||||
|
|
||||||
//<editor-fold desc="Rules: Macros">
|
//<editor-fold desc="Rules: Macros">
|
||||||
|
|
||||||
@b0: rgba(
|
@rgb-background: rgb(
|
||||||
var(--bluelib-color-r),
|
var(--bluelib-background-r),
|
||||||
var(--bluelib-color-g),
|
var(--bluelib-background-g),
|
||||||
var(--bluelib-color-b),
|
var(--bluelib-background-b)
|
||||||
0.025
|
|
||||||
);
|
);
|
||||||
@b1: rgba(
|
@rgb-foreground: rgb(
|
||||||
var(--bluelib-color-r),
|
var(--bluelib-foreground-r),
|
||||||
var(--bluelib-color-g),
|
var(--bluelib-foreground-g),
|
||||||
var(--bluelib-color-b),
|
var(--bluelib-foreground-b)
|
||||||
0.100
|
|
||||||
);
|
);
|
||||||
@b2: rgba(
|
@rgb-accent: rgb(
|
||||||
var(--bluelib-color-r),
|
var(--bluelib-accent-r),
|
||||||
var(--bluelib-color-g),
|
var(--bluelib-accent-g),
|
||||||
var(--bluelib-color-b),
|
var(--bluelib-accent-b)
|
||||||
0.200
|
|
||||||
);
|
|
||||||
@b3: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.300
|
|
||||||
);
|
|
||||||
@b4: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.400
|
|
||||||
);
|
|
||||||
@b5: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.500
|
|
||||||
);
|
|
||||||
@b6: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.600
|
|
||||||
);
|
|
||||||
@b7: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.700
|
|
||||||
);
|
|
||||||
@b8: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.800
|
|
||||||
);
|
|
||||||
@b9: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.900
|
|
||||||
);
|
|
||||||
@bA: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
1.000
|
|
||||||
);
|
|
||||||
@bB: rgba(
|
|
||||||
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 10)),
|
|
||||||
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 10)),
|
|
||||||
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 10)),
|
|
||||||
1.000
|
|
||||||
);
|
|
||||||
@bC: rgba(
|
|
||||||
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)),
|
|
||||||
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)),
|
|
||||||
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)),
|
|
||||||
1.000
|
|
||||||
);
|
|
||||||
@bD: rgba(
|
|
||||||
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)),
|
|
||||||
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)),
|
|
||||||
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)),
|
|
||||||
1.000
|
|
||||||
);
|
|
||||||
@bE: rgba(
|
|
||||||
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 40)),
|
|
||||||
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 40)),
|
|
||||||
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 40)),
|
|
||||||
1.000
|
|
||||||
);
|
|
||||||
@bF: rgba(
|
|
||||||
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)),
|
|
||||||
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)),
|
|
||||||
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)),
|
|
||||||
1.000
|
|
||||||
);
|
);
|
||||||
|
|
||||||
@bL: rgba(
|
@rgb-link: rgb(
|
||||||
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
|
var(--bluelib-link-r),
|
||||||
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
|
var(--bluelib-link-g),
|
||||||
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
|
var(--bluelib-link-b)
|
||||||
1.000
|
|
||||||
);
|
);
|
||||||
@bT: rgba(
|
|
||||||
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
|
@rgb-red: rgb(
|
||||||
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
|
var(--bluelib-red-r),
|
||||||
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
|
var(--bluelib-red-g),
|
||||||
1.000
|
var(--bluelib-red-b)
|
||||||
|
);
|
||||||
|
@rgb-orange: rgb(
|
||||||
|
var(--bluelib-orange-r),
|
||||||
|
var(--bluelib-orange-g),
|
||||||
|
var(--bluelib-orange-b)
|
||||||
|
);
|
||||||
|
@rgb-yellow: rgb(
|
||||||
|
var(--bluelib-yellow-r),
|
||||||
|
var(--bluelib-yellow-g),
|
||||||
|
var(--bluelib-yellow-b)
|
||||||
|
);
|
||||||
|
@rgb-lime: rgb(
|
||||||
|
var(--bluelib-lime-r),
|
||||||
|
var(--bluelib-lime-g),
|
||||||
|
var(--bluelib-lime-b)
|
||||||
|
);
|
||||||
|
@rgb-cyan: rgb(
|
||||||
|
var(--bluelib-cyan-r),
|
||||||
|
var(--bluelib-cyan-g),
|
||||||
|
var(--bluelib-cyan-b)
|
||||||
|
);
|
||||||
|
@rgb-blue: rgb(
|
||||||
|
var(--bluelib-blue-r),
|
||||||
|
var(--bluelib-blue-g),
|
||||||
|
var(--bluelib-blue-b)
|
||||||
|
);
|
||||||
|
@rgb-magenta: rgb(
|
||||||
|
var(--bluelib-magenta-r),
|
||||||
|
var(--bluelib-magenta-g),
|
||||||
|
var(--bluelib-magenta-b)
|
||||||
|
);
|
||||||
|
@rgb-gray: rgb(
|
||||||
|
var(--bluelib-gray-r),
|
||||||
|
var(--bluelib-gray-g),
|
||||||
|
var(--bluelib-gray-b)
|
||||||
|
);
|
||||||
|
|
||||||
|
@rgb-leaving: rgba(
|
||||||
|
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
|
||||||
|
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
|
||||||
|
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@rgb-towards: rgba(
|
||||||
|
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
|
||||||
|
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
|
||||||
|
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
|
||||||
|
@c0: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.025
|
||||||
|
);
|
||||||
|
@c1: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.100
|
||||||
|
);
|
||||||
|
@c2: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.200
|
||||||
|
);
|
||||||
|
@c3: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.300
|
||||||
|
);
|
||||||
|
@c4: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.400
|
||||||
|
);
|
||||||
|
@c5: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.500
|
||||||
|
);
|
||||||
|
@c6: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.600
|
||||||
|
);
|
||||||
|
@c7: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.700
|
||||||
|
);
|
||||||
|
@c8: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.800
|
||||||
|
);
|
||||||
|
@c9: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.900
|
||||||
|
);
|
||||||
|
@cA: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@cB: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 10)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 10)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 10)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@cC: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@cD: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@cE: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 40)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 40)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 40)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@cF: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@cG: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 60)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 60)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 60)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@cH: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 70)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 70)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 70)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@cI: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 80)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 80)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 80)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@cJ: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 90)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 90)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 90)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@cK: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 100)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 100)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 100)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@cL: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 110)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 110)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 110)),
|
||||||
|
1.000
|
||||||
);
|
);
|
||||||
|
|
||||||
//</editor-fold>
|
//</editor-fold>
|
||||||
|
|
@ -147,10 +276,26 @@
|
||||||
// Bluelib magic!
|
// Bluelib magic!
|
||||||
// This rule sets the color of all text to be equal to the current .bluelib-color() at 100% opacity.
|
// This rule sets the color of all text to be equal to the current .bluelib-color() at 100% opacity.
|
||||||
// Thanks, CSS variables!
|
// Thanks, CSS variables!
|
||||||
color: @bA;
|
color: @cA;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// ===== Root =====
|
||||||
|
/// The root element has some rules itself.
|
||||||
|
|
||||||
|
//<editor-fold desc="Rules: Root">
|
||||||
|
|
||||||
|
// Set the background defined in the palette
|
||||||
|
background-color: @rgb-background;
|
||||||
|
|
||||||
|
// Set the base color to the foreground defined in the palette
|
||||||
|
.map-var-rgb(bluelib-color; bluelib-foreground);
|
||||||
|
|
||||||
|
// Set the base font
|
||||||
|
.use-var-font(bluelib-text);
|
||||||
|
|
||||||
|
//</editor-fold>
|
||||||
|
|
||||||
//</editor-fold>
|
//</editor-fold>
|
||||||
|
|
||||||
/// ===== Layouts =====
|
/// ===== Layouts =====
|
||||||
|
|
@ -259,8 +404,8 @@
|
||||||
// Panels should try to fill the most space possible
|
// Panels should try to fill the most space possible
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
background-color: @b0;
|
background-color: @c0;
|
||||||
border-color: @b1;
|
border-color: @c1;
|
||||||
|
|
||||||
// The first and last elements of a panel should not have a margin
|
// The first and last elements of a panel should not have a margin
|
||||||
> @{all} {
|
> @{all} {
|
||||||
|
|
@ -337,15 +482,15 @@
|
||||||
@{separator} {
|
@{separator} {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: @b5;
|
border-color: @c5;
|
||||||
}
|
}
|
||||||
|
|
||||||
@{separator-light} {
|
@{separator-light} {
|
||||||
border-color: @b1;
|
border-color: @c1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@{separator-heavy} {
|
@{separator-heavy} {
|
||||||
border-color: @bA;
|
border-color: @cA;
|
||||||
}
|
}
|
||||||
|
|
||||||
//</editor-fold>
|
//</editor-fold>
|
||||||
|
|
@ -409,47 +554,47 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// They should use the current bluelib color
|
// They should use the current bluelib color
|
||||||
border-color: @b3;
|
border-color: @c3;
|
||||||
color: @bA;
|
color: @cA;
|
||||||
background-color: @b0;
|
background-color: @c0;
|
||||||
|
|
||||||
// Both for themselves and their placeholder
|
// Both for themselves and their placeholder
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: @b4;
|
color: @c4;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// They should become lighter if hovered
|
// They should become lighter if hovered
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: @b6;
|
border-color: @c6;
|
||||||
color: @bC;
|
color: @cC;
|
||||||
background-color: @b1;
|
background-color: @c1;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: @b7;
|
color: @c7;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// And even lighter if focused
|
// And even lighter if focused
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: @bA;
|
border-color: @cA;
|
||||||
color: @bF;
|
color: @cF;
|
||||||
background-color: @b2;
|
background-color: @c2;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: @b7;
|
color: @c7;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Unless they are disabled
|
// Unless they are disabled
|
||||||
&@{status-disabled} {
|
&@{status-disabled} {
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
border-color: @b3;
|
border-color: @c3;
|
||||||
color: @bA;
|
color: @cA;
|
||||||
background-color: @b0;
|
background-color: @c0;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: @b4;
|
color: @c4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -492,7 +637,7 @@
|
||||||
|
|
||||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||||
@{input-option}, @{input-optgroup} {
|
@{input-option}, @{input-optgroup} {
|
||||||
background-color: @hex-background;
|
.use-var-rgb(background-color; bluelib-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -520,7 +665,7 @@
|
||||||
|
|
||||||
@{input-option} {
|
@{input-option} {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: @bA;
|
color: @cA;
|
||||||
|
|
||||||
// Options should be slightly padded too
|
// Options should be slightly padded too
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
|
@ -529,7 +674,7 @@
|
||||||
@{input-optgroup} {
|
@{input-optgroup} {
|
||||||
// Style option groups as titles
|
// Style option groups as titles
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: @hex-accent;
|
color: @rgb-accent;
|
||||||
|
|
||||||
// Options groups should be slightly padded too
|
// Options groups should be slightly padded too
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
|
@ -564,17 +709,17 @@
|
||||||
// Give them a good clicking feedback
|
// Give them a good clicking feedback
|
||||||
// (sadly it doesn't work if using the keyboard)
|
// (sadly it doesn't work if using the keyboard)
|
||||||
&:active {
|
&:active {
|
||||||
border-color: @bC;
|
border-color: @cC;
|
||||||
color: @bF;
|
color: @cF;
|
||||||
background-color: @b3;
|
background-color: @c3;
|
||||||
}
|
}
|
||||||
|
|
||||||
// But not if they're disabled
|
// But not if they're disabled
|
||||||
@{status-disabled} {
|
@{status-disabled} {
|
||||||
&:active {
|
&:active {
|
||||||
border-color: @b3;
|
border-color: @c3;
|
||||||
color: @bA;
|
color: @cA;
|
||||||
background-color: @b0;
|
background-color: @c0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -609,19 +754,19 @@
|
||||||
|
|
||||||
// If the element is checked, display it
|
// If the element is checked, display it
|
||||||
&:checked::before {
|
&:checked::before {
|
||||||
background-color: @b9;
|
background-color: @c9;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover:checked::before {
|
&:hover:checked::before {
|
||||||
background-color: @bB;
|
background-color: @cB;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus:checked::before {
|
&:focus:checked::before {
|
||||||
background-color: @bD;
|
background-color: @cD;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active:checked::before {
|
&:active:checked::before {
|
||||||
background-color: @bD;
|
background-color: @cD;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -680,7 +825,7 @@
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
// Give the labels the accent color
|
// Give the labels the accent color
|
||||||
.bluelib-color(@hex-accent);
|
.map-var-rgb(bluelib-color, bluelib-accent);
|
||||||
// And make them slightly bold
|
// And make them slightly bold
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
@ -705,7 +850,7 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
background-color: @b0;
|
background-color: @c0;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
|
|
@ -749,8 +894,8 @@
|
||||||
|
|
||||||
@{element-title} {
|
@{element-title} {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
.bluelib-color(@hex-accent);
|
.map-var-rgb(bluelib-color, bluelib-accent);
|
||||||
.font-title();
|
.use-var-font(bluelib-title)
|
||||||
}
|
}
|
||||||
|
|
||||||
@{element-paragraph} {
|
@{element-paragraph} {
|
||||||
|
|
@ -762,14 +907,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@{element-anchor} {
|
@{element-anchor} {
|
||||||
.bluelib-color(@hex-link);
|
.map-var-rgb(bluelib-color, bluelib-link);
|
||||||
|
|
||||||
text-decoration-line: underline;
|
text-decoration-line: underline;
|
||||||
text-decoration-style: solid;
|
text-decoration-style: solid;
|
||||||
text-decoration-color: currentColor;
|
text-decoration-color: currentColor;
|
||||||
text-decoration-thickness: 1px;
|
text-decoration-thickness: 1px;
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
.bluelib-color(@hex-link-hover);
|
color: @cF;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
|
|
@ -777,18 +923,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
.bluelib-color(@hex-link-active);
|
color: @cL;
|
||||||
}
|
}
|
||||||
|
|
||||||
&@{status-disabled} {
|
&@{status-disabled} {
|
||||||
text-decoration-style: dashed;
|
text-decoration-style: dashed;
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:hover, &:focus, &:active {
|
||||||
.bluelib-color(@hex-link);
|
color: @cA;
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
.bluelib-color(@hex-link);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -841,7 +983,7 @@
|
||||||
|
|
||||||
@{style-bold} {
|
@{style-bold} {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
.bluelib-color(@hex-accent);
|
.map-var-rgb(bluelib-color, bluelib-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
@{style-italic} {
|
@{style-italic} {
|
||||||
|
|
@ -857,11 +999,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@{style-monospace} {
|
@{style-monospace} {
|
||||||
.font-code();
|
.use-var-font(bluelib-code);
|
||||||
}
|
}
|
||||||
|
|
||||||
@{style-keyboard} {
|
@{style-keyboard} {
|
||||||
.font-code();
|
.use-var-font(bluelib-code);
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
border: 2px outset;
|
border: 2px outset;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
@ -870,35 +1012,35 @@
|
||||||
// --- Colors ---
|
// --- Colors ---
|
||||||
|
|
||||||
@{color-red} {
|
@{color-red} {
|
||||||
.bluelib-color(@hex-red)
|
.map-var-rgb(bluelib-color, bluelib-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-orange} {
|
@{color-orange} {
|
||||||
.bluelib-color(@hex-orange)
|
.map-var-rgb(bluelib-color, bluelib-orange);
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-yellow} {
|
@{color-yellow} {
|
||||||
.bluelib-color(@hex-yellow)
|
.map-var-rgb(bluelib-color, bluelib-yellow);
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-lime} {
|
@{color-lime} {
|
||||||
.bluelib-color(@hex-lime)
|
.map-var-rgb(bluelib-color, bluelib-lime);
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-cyan} {
|
@{color-cyan} {
|
||||||
.bluelib-color(@hex-cyan)
|
.map-var-rgb(bluelib-color, bluelib-cyan);
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-blue} {
|
@{color-blue} {
|
||||||
.bluelib-color(@hex-blue)
|
.map-var-rgb(bluelib-color, bluelib-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-magenta} {
|
@{color-magenta} {
|
||||||
.bluelib-color(@hex-magenta)
|
.map-var-rgb(bluelib-color, bluelib-magenta);
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-gray} {
|
@{color-gray} {
|
||||||
.bluelib-color(@hex-gray)
|
.map-var-rgb(bluelib-color, bluelib-gray);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,662 +1,53 @@
|
||||||
@import "../normalize/normalize.css";
|
@import "../normalize/normalize.css";
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Code';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firacode/v10/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sFVc.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 100;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9A4kDNxMZdWfMOD5VvkrCqYTc.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 200;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9f4kDNxMZdWfMOD5VvkrAGQBf_.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 300;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9f4kDNxMZdWfMOD5VvkrBiQxf_.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 400;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9C4kDNxMZdWfMOD5VvkojO.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 500;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9f4kDNxMZdWfMOD5VvkrA6Qhf_.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 600;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9f4kDNxMZdWfMOD5VvkrAWRRf_.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 700;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9f4kDNxMZdWfMOD5VvkrByRBf_.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 800;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9f4kDNxMZdWfMOD5VvkrBuRxf_.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 900;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9f4kDNxMZdWfMOD5VvkrBKRhf_.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 100;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9C4kDNxMZdWfMOD5Vn9IjO.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 200;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnWKnuQQ.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 300;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnPKruQQ.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9E4kDNxMZdWfMOD5VfkA.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnZKvuQQ.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnSKzuQQ.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnLK3uQQ.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 800;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnMK7uQQ.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 900;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnFK_uQQ.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
.bluelib {
|
.bluelib {
|
||||||
background-color: #ffffff;
|
--bluelib-background-r: 255;
|
||||||
--bluelib-color-r: 24;
|
--bluelib-background-g: 255;
|
||||||
--bluelib-color-g: 24;
|
--bluelib-background-b: 255;
|
||||||
--bluelib-color-b: 24;
|
--bluelib-foreground-r: 24;
|
||||||
font-family: "Fira Sans", sans-serif;
|
--bluelib-foreground-g: 24;
|
||||||
font-weight: 400;
|
--bluelib-foreground-b: 24;
|
||||||
}
|
--bluelib-accent-r: 24;
|
||||||
.bluelib,
|
--bluelib-accent-g: 24;
|
||||||
.bluelib *,
|
--bluelib-accent-b: 24;
|
||||||
.bluelib .all {
|
--bluelib-link-r: 0;
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
--bluelib-link-g: 147;
|
||||||
}
|
--bluelib-link-b: 147;
|
||||||
.bluelib,
|
--bluelib-link-hover-r: 0;
|
||||||
.bluelib *,
|
--bluelib-link-hover-g: 107;
|
||||||
.bluelib .all,
|
--bluelib-link-hover-b: 107;
|
||||||
.bluelib::before,
|
--bluelib-link-active-r: 0;
|
||||||
.bluelib *::before,
|
--bluelib-link-active-g: 65;
|
||||||
.bluelib .all::before,
|
--bluelib-link-active-b: 65;
|
||||||
.bluelib::after,
|
--bluelib-red-r: 200;
|
||||||
.bluelib *::after,
|
--bluelib-red-g: 0;
|
||||||
.bluelib .all::after {
|
--bluelib-red-b: 0;
|
||||||
box-sizing: border-box;
|
--bluelib-orange-r: 200;
|
||||||
}
|
--bluelib-orange-g: 165;
|
||||||
.bluelib .layout {
|
--bluelib-orange-b: 0;
|
||||||
display: grid;
|
--bluelib-yellow-r: 200;
|
||||||
justify-content: stretch;
|
--bluelib-yellow-g: 200;
|
||||||
align-items: stretch;
|
--bluelib-yellow-b: 0;
|
||||||
width: 100%;
|
--bluelib-lime-r: 0;
|
||||||
}
|
--bluelib-lime-g: 200;
|
||||||
.bluelib .layout-fill {
|
--bluelib-lime-b: 0;
|
||||||
padding: 4px;
|
--bluelib-cyan-r: 0;
|
||||||
grid-template-areas: "single";
|
--bluelib-cyan-g: 200;
|
||||||
grid-template-columns: 1fr;
|
--bluelib-cyan-b: 200;
|
||||||
grid-template-rows: 1fr;
|
--bluelib-blue-r: 0;
|
||||||
}
|
--bluelib-blue-g: 0;
|
||||||
.bluelib .layout-fill-single {
|
--bluelib-blue-b: 200;
|
||||||
grid-area: single;
|
--bluelib-magenta-r: 200;
|
||||||
}
|
--bluelib-magenta-g: 0;
|
||||||
.bluelib .layout-threecol {
|
--bluelib-magenta-b: 200;
|
||||||
padding: 4px;
|
--bluelib-gray-r: 128;
|
||||||
}
|
--bluelib-gray-g: 128;
|
||||||
@media screen and (min-width: 1281px) {
|
--bluelib-gray-b: 128;
|
||||||
.bluelib .layout-threecol {
|
--bluelib-polarity: -1;
|
||||||
grid-template-areas: "left center right";
|
--bluelib-title-family: sans-serif;
|
||||||
grid-template-columns: 1fr auto 1fr;
|
--bluelib-title-weight: bold;
|
||||||
grid-template-rows: 1fr;
|
--bluelib-text-family: sans-serif;
|
||||||
}
|
--bluelib-text-weight: normal;
|
||||||
}
|
--bluelib-code-family: monospace;
|
||||||
@media screen and (max-width: 1280px) {
|
--bluelib-code-weight: normal;
|
||||||
.bluelib .layout-threecol {
|
|
||||||
grid-template-areas: "center center" "left right";
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-template-rows: auto auto;
|
|
||||||
max-width: 1024px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bluelib .layout-threecol-left {
|
|
||||||
grid-area: left;
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 1281px) {
|
|
||||||
.bluelib .layout-threecol-left {
|
|
||||||
justify-self: end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1280px) {
|
|
||||||
.bluelib .layout-threecol-left {
|
|
||||||
justify-self: stretch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bluelib .layout-threecol-center {
|
|
||||||
grid-area: center;
|
|
||||||
max-width: 1024px;
|
|
||||||
}
|
|
||||||
.bluelib .layout-threecol-right {
|
|
||||||
grid-area: right;
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 1281px) {
|
|
||||||
.bluelib .layout-threecol-right {
|
|
||||||
justify-self: start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1280px) {
|
|
||||||
.bluelib .layout-threecol-right {
|
|
||||||
justify-self: stretch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bluelib .panel {
|
|
||||||
margin: 8px 0;
|
|
||||||
padding: 8px;
|
|
||||||
width: 100%;
|
|
||||||
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), 0.1);
|
|
||||||
}
|
|
||||||
.bluelib .panel > *:first-child,
|
|
||||||
.bluelib .panel .all:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.bluelib .panel > *:last-child,
|
|
||||||
.bluelib .panel .all:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.bluelib .panel-box {
|
|
||||||
border-radius: 4px;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
.bluelib .panel-blockquote {
|
|
||||||
border-radius: 4px;
|
|
||||||
border-width: 0 0 0 2px;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
.bluelib .panel-aside {
|
|
||||||
border-width: 0;
|
|
||||||
font-size: smaller;
|
|
||||||
}
|
|
||||||
.bluelib .split {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 4px 8px;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.bluelib .split > .panel {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.bluelib .split > *,
|
|
||||||
.bluelib .split .all {
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-shrink: 0;
|
|
||||||
flex-basis: 0;
|
|
||||||
}
|
|
||||||
.bluelib .split-forcewrap {
|
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
flex-basis: 100%;
|
|
||||||
}
|
|
||||||
.bluelib .separator {
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.5);
|
|
||||||
}
|
|
||||||
.bluelib .separator-light {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
|
||||||
}
|
|
||||||
.bluelib .separator-heavy {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
}
|
|
||||||
.bluelib img,
|
|
||||||
.bluelib .image {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
.bluelib .image-limit-half {
|
|
||||||
max-height: max(28.2vw, 50vh);
|
|
||||||
}
|
|
||||||
.bluelib .image-limit-quarter {
|
|
||||||
max-height: max(14.1vw, 25vh);
|
|
||||||
}
|
|
||||||
.bluelib .status-disabled {
|
|
||||||
opacity: 50%;
|
|
||||||
}
|
|
||||||
.bluelib .status-disabled,
|
|
||||||
.bluelib .status-disabled *,
|
|
||||||
.bluelib .status-disabled .all {
|
|
||||||
cursor: not-allowed !important;
|
|
||||||
}
|
|
||||||
.bluelib .input {
|
|
||||||
font: inherit;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .input.status-disabled {
|
|
||||||
border-style: dashed;
|
|
||||||
}
|
|
||||||
.bluelib .input::placeholder {
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.bluelib .input:hover {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
|
||||||
}
|
|
||||||
.bluelib .input:hover::placeholder {
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
|
||||||
}
|
|
||||||
.bluelib .input:focus {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
|
||||||
}
|
|
||||||
.bluelib .input:focus::placeholder {
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
|
||||||
}
|
|
||||||
.bluelib .input.status-disabled:hover,
|
|
||||||
.bluelib .input.status-disabled:focus {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .input.status-disabled:hover::placeholder,
|
|
||||||
.bluelib .input.status-disabled:focus::placeholder {
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
|
||||||
}
|
|
||||||
.bluelib .input:optional,
|
|
||||||
.bluelib .input:optional::placeholder {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
.bluelib .input:focus-visible {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.bluelib .input-field {
|
|
||||||
cursor: text;
|
|
||||||
border-width: 0 0 2px 0;
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
padding: 6px;
|
|
||||||
}
|
|
||||||
.bluelib .input-select {
|
|
||||||
cursor: context-menu;
|
|
||||||
border-width: 0 0 2px 0;
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
}
|
|
||||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
|
||||||
.bluelib .input-select .input-option,
|
|
||||||
.bluelib .input-select .input-optgroup {
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bluelib .input-multiselect {
|
|
||||||
cursor: vertical-text;
|
|
||||||
border-width: 0 0 0 2px;
|
|
||||||
border-radius: 0 4px 4px 0;
|
|
||||||
}
|
|
||||||
.bluelib .input-select,
|
|
||||||
.bluelib .input-multiselect {
|
|
||||||
padding: 6px 4px;
|
|
||||||
}
|
|
||||||
.bluelib .input-select .input-option,
|
|
||||||
.bluelib .input-multiselect .input-option {
|
|
||||||
font-weight: normal;
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
.bluelib .input-select .input-optgroup,
|
|
||||||
.bluelib .input-multiselect .input-optgroup {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #181818;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
.bluelib .input-select .input-optgroup .input-option,
|
|
||||||
.bluelib .input-multiselect .input-optgroup .input-option {
|
|
||||||
padding: 4px 20px;
|
|
||||||
}
|
|
||||||
.bluelib .input-select .input-optgroup .input-option::before,
|
|
||||||
.bluelib .input-multiselect .input-optgroup .input-option::before {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
.bluelib .input-button {
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 6px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.bluelib .input-button:active {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
}
|
|
||||||
.bluelib .input-button .status-disabled:active {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox,
|
|
||||||
.bluelib .input-radio {
|
|
||||||
appearance: none;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border-width: 2px;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox::before,
|
|
||||||
.bluelib .input-radio::before {
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox:checked::before,
|
|
||||||
.bluelib .input-radio:checked::before {
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.9);
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox:hover:checked::before,
|
|
||||||
.bluelib .input-radio:hover:checked::before {
|
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 10)), 1);
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox:focus:checked::before,
|
|
||||||
.bluelib .input-radio:focus:checked::before {
|
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox:active:checked::before,
|
|
||||||
.bluelib .input-radio:active:checked::before {
|
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox {
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox::before {
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.bluelib .input-radio {
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
.bluelib .input-radio::before {
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
.bluelib .form {
|
|
||||||
display: grid;
|
|
||||||
align-items: center;
|
|
||||||
row-gap: 4px;
|
|
||||||
column-gap: 8px;
|
|
||||||
grid-template-columns: minmax(auto, 1fr) 5fr;
|
|
||||||
}
|
|
||||||
.bluelib .form .form-label {
|
|
||||||
grid-column: 1;
|
|
||||||
justify-self: end;
|
|
||||||
text-align: right;
|
|
||||||
--bluelib-color-r: 24;
|
|
||||||
--bluelib-color-g: 24;
|
|
||||||
--bluelib-color-b: 24;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.bluelib .form .form-input {
|
|
||||||
grid-column: 2;
|
|
||||||
justify-self: stretch;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.bluelib .form .form-group {
|
|
||||||
grid-column: 2;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px 16px;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
padding: 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.bluelib .form .form-group .form-group-label {
|
|
||||||
display: flex;
|
|
||||||
gap: 6px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.bluelib .form .form-group .form-group-row {
|
|
||||||
flex-basis: 100%;
|
|
||||||
justify-content: start;
|
|
||||||
}
|
|
||||||
.bluelib .form .form-row {
|
|
||||||
grid-column-start: 1;
|
|
||||||
grid-column-end: 3;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 8px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.bluelib .element-title {
|
|
||||||
text-align: center;
|
|
||||||
--bluelib-color-r: 24;
|
|
||||||
--bluelib-color-g: 24;
|
|
||||||
--bluelib-color-b: 24;
|
|
||||||
font-family: "Fira Sans", sans-serif;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.bluelib .element-list-item {
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 147;
|
|
||||||
--bluelib-color-b: 147;
|
|
||||||
text-decoration-line: underline;
|
|
||||||
text-decoration-style: solid;
|
|
||||||
text-decoration-color: currentColor;
|
|
||||||
text-decoration-thickness: 1px;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor:hover,
|
|
||||||
.bluelib .element-anchor:focus {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 107;
|
|
||||||
--bluelib-color-b: 107;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor:focus-visible {
|
|
||||||
text-decoration-thickness: 2px;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor:active {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 65;
|
|
||||||
--bluelib-color-b: 65;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor.status-disabled {
|
|
||||||
text-decoration-style: dashed;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor.status-disabled:hover,
|
|
||||||
.bluelib .element-anchor.status-disabled:focus {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 147;
|
|
||||||
--bluelib-color-b: 147;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor.status-disabled:active {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 147;
|
|
||||||
--bluelib-color-b: 147;
|
|
||||||
}
|
|
||||||
.bluelib .align-left {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.bluelib .align-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.bluelib .align-right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.bluelib .size-xxl {
|
|
||||||
font-size: xx-large;
|
|
||||||
}
|
|
||||||
.bluelib .size-xl {
|
|
||||||
font-size: x-large;
|
|
||||||
}
|
|
||||||
.bluelib .size-l {
|
|
||||||
font-size: large;
|
|
||||||
}
|
|
||||||
.bluelib .size-m {
|
|
||||||
font-size: medium;
|
|
||||||
}
|
|
||||||
.bluelib .size-s {
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
.bluelib .size-xs {
|
|
||||||
font-size: x-small;
|
|
||||||
}
|
|
||||||
.bluelib .size-xxs {
|
|
||||||
font-size: xx-small;
|
|
||||||
}
|
|
||||||
.bluelib .style-bold {
|
|
||||||
font-weight: bold;
|
|
||||||
--bluelib-color-r: 24;
|
|
||||||
--bluelib-color-g: 24;
|
|
||||||
--bluelib-color-b: 24;
|
|
||||||
}
|
|
||||||
.bluelib .style-italic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
.bluelib .style-underline {
|
|
||||||
text-decoration-line: underline;
|
|
||||||
}
|
|
||||||
.bluelib .style-strike {
|
|
||||||
text-decoration-line: line-through;
|
|
||||||
}
|
|
||||||
.bluelib .style-monospace {
|
|
||||||
font-family: "Fira Code", monospace;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.bluelib .style-keyboard {
|
|
||||||
font-family: "Fira Code", monospace;
|
|
||||||
font-weight: 400;
|
|
||||||
padding: 2px 4px;
|
|
||||||
border: 2px outset;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.bluelib .color-red {
|
|
||||||
--bluelib-color-r: 200;
|
|
||||||
--bluelib-color-g: 0;
|
|
||||||
--bluelib-color-b: 0;
|
|
||||||
}
|
|
||||||
.bluelib .color-orange {
|
|
||||||
--bluelib-color-r: 200;
|
|
||||||
--bluelib-color-g: 165;
|
|
||||||
--bluelib-color-b: 0;
|
|
||||||
}
|
|
||||||
.bluelib .color-yellow {
|
|
||||||
--bluelib-color-r: 200;
|
|
||||||
--bluelib-color-g: 200;
|
|
||||||
--bluelib-color-b: 0;
|
|
||||||
}
|
|
||||||
.bluelib .color-lime {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 200;
|
|
||||||
--bluelib-color-b: 0;
|
|
||||||
}
|
|
||||||
.bluelib .color-cyan {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 200;
|
|
||||||
--bluelib-color-b: 200;
|
|
||||||
}
|
|
||||||
.bluelib .color-blue {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 0;
|
|
||||||
--bluelib-color-b: 200;
|
|
||||||
}
|
|
||||||
.bluelib .color-magenta {
|
|
||||||
--bluelib-color-r: 200;
|
|
||||||
--bluelib-color-g: 0;
|
|
||||||
--bluelib-color-b: 200;
|
|
||||||
}
|
|
||||||
.bluelib .color-gray {
|
|
||||||
--bluelib-color-r: 128;
|
|
||||||
--bluelib-color-g: 128;
|
|
||||||
--bluelib-color-b: 128;
|
|
||||||
}
|
}
|
||||||
/*# sourceMappingURL=paper.module.css.map */
|
/*# sourceMappingURL=paper.module.css.map */
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -3,7 +3,6 @@
|
||||||
@import (css) "../normalize/normalize.css";
|
@import (css) "../normalize/normalize.css";
|
||||||
|
|
||||||
@import (less) "../fonts/firasans.less";
|
@import (less) "../fonts/firasans.less";
|
||||||
@import (less) "../palettes/paper.less";
|
|
||||||
|
|
||||||
@import (less) "../vars/module.less";
|
@import (less) "../vars/module.less";
|
||||||
@import (less) "../rules/skeleton.less";
|
@import (less) "../rules/paper.less";
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -3,7 +3,6 @@
|
||||||
@import (css) "../normalize/normalize.css";
|
@import (css) "../normalize/normalize.css";
|
||||||
|
|
||||||
@import (less) "../fonts/firasans.less";
|
@import (less) "../fonts/firasans.less";
|
||||||
@import (less) "../palettes/paper.less";
|
|
||||||
|
|
||||||
@import (less) "../vars/root.less";
|
@import (less) "../vars/root.less";
|
||||||
@import (less) "../rules/skeleton.less";
|
@import (less) "../rules/paper.less";
|
||||||
|
|
|
||||||
|
|
@ -133,530 +133,54 @@
|
||||||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnFK_uQQ.ttf) format('truetype');
|
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnFK_uQQ.ttf) format('truetype');
|
||||||
}
|
}
|
||||||
.bluelib {
|
.bluelib {
|
||||||
background-color: #0d193b;
|
--bluelib-background-r: 13;
|
||||||
--bluelib-color-r: 160;
|
--bluelib-background-g: 25;
|
||||||
--bluelib-color-g: 204;
|
--bluelib-background-b: 59;
|
||||||
--bluelib-color-b: 255;
|
--bluelib-foreground-r: 160;
|
||||||
font-family: "Fira Sans", sans-serif;
|
--bluelib-foreground-g: 204;
|
||||||
font-weight: 400;
|
--bluelib-foreground-b: 255;
|
||||||
}
|
--bluelib-accent-r: 255;
|
||||||
.bluelib,
|
--bluelib-accent-g: 255;
|
||||||
.bluelib *,
|
--bluelib-accent-b: 255;
|
||||||
.bluelib .all {
|
--bluelib-red-r: 255;
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
--bluelib-red-g: 125;
|
||||||
}
|
--bluelib-red-b: 125;
|
||||||
.bluelib,
|
--bluelib-orange-r: 255;
|
||||||
.bluelib *,
|
--bluelib-orange-g: 187;
|
||||||
.bluelib .all,
|
--bluelib-orange-b: 125;
|
||||||
.bluelib::before,
|
--bluelib-yellow-r: 255;
|
||||||
.bluelib *::before,
|
--bluelib-yellow-g: 255;
|
||||||
.bluelib .all::before,
|
--bluelib-yellow-b: 125;
|
||||||
.bluelib::after,
|
--bluelib-lime-r: 125;
|
||||||
.bluelib *::after,
|
--bluelib-lime-g: 255;
|
||||||
.bluelib .all::after {
|
--bluelib-lime-b: 125;
|
||||||
box-sizing: border-box;
|
--bluelib-cyan-r: 125;
|
||||||
}
|
--bluelib-cyan-g: 255;
|
||||||
.bluelib .layout {
|
--bluelib-cyan-b: 255;
|
||||||
display: grid;
|
--bluelib-blue-r: 125;
|
||||||
justify-content: stretch;
|
--bluelib-blue-g: 125;
|
||||||
align-items: stretch;
|
--bluelib-blue-b: 255;
|
||||||
width: 100%;
|
--bluelib-magenta-r: 255;
|
||||||
}
|
--bluelib-magenta-g: 125;
|
||||||
.bluelib .layout-fill {
|
--bluelib-magenta-b: 255;
|
||||||
padding: 4px;
|
--bluelib-gray-r: 187;
|
||||||
grid-template-areas: "single";
|
--bluelib-gray-g: 187;
|
||||||
grid-template-columns: 1fr;
|
--bluelib-gray-b: 187;
|
||||||
grid-template-rows: 1fr;
|
--bluelib-link-r: 0;
|
||||||
}
|
--bluelib-link-g: 202;
|
||||||
.bluelib .layout-fill-single {
|
--bluelib-link-b: 202;
|
||||||
grid-area: single;
|
--bluelib-link-hover-r: 0;
|
||||||
}
|
--bluelib-link-hover-g: 255;
|
||||||
.bluelib .layout-threecol {
|
--bluelib-link-hover-b: 255;
|
||||||
padding: 4px;
|
--bluelib-link-active-r: 160;
|
||||||
}
|
--bluelib-link-active-g: 255;
|
||||||
@media screen and (min-width: 1281px) {
|
--bluelib-link-active-b: 255;
|
||||||
.bluelib .layout-threecol {
|
--bluelib-polarity: 1;
|
||||||
grid-template-areas: "left center right";
|
--bluelib-title-family: "Fira Sans", sans-serif;
|
||||||
grid-template-columns: 1fr auto 1fr;
|
--bluelib-title-weight: 500;
|
||||||
grid-template-rows: 1fr;
|
--bluelib-text-family: "Fira Sans", sans-serif;
|
||||||
}
|
--bluelib-text-weight: 400;
|
||||||
}
|
--bluelib-code-family: "Fira Code", sans-serif;
|
||||||
@media screen and (max-width: 1280px) {
|
--bluelib-code-weight: 400;
|
||||||
.bluelib .layout-threecol {
|
|
||||||
grid-template-areas: "center center" "left right";
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-template-rows: auto auto;
|
|
||||||
max-width: 1024px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bluelib .layout-threecol-left {
|
|
||||||
grid-area: left;
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 1281px) {
|
|
||||||
.bluelib .layout-threecol-left {
|
|
||||||
justify-self: end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1280px) {
|
|
||||||
.bluelib .layout-threecol-left {
|
|
||||||
justify-self: stretch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bluelib .layout-threecol-center {
|
|
||||||
grid-area: center;
|
|
||||||
max-width: 1024px;
|
|
||||||
}
|
|
||||||
.bluelib .layout-threecol-right {
|
|
||||||
grid-area: right;
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 1281px) {
|
|
||||||
.bluelib .layout-threecol-right {
|
|
||||||
justify-self: start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1280px) {
|
|
||||||
.bluelib .layout-threecol-right {
|
|
||||||
justify-self: stretch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bluelib .panel {
|
|
||||||
margin: 8px 0;
|
|
||||||
padding: 8px;
|
|
||||||
width: 100%;
|
|
||||||
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), 0.1);
|
|
||||||
}
|
|
||||||
.bluelib .panel > *:first-child,
|
|
||||||
.bluelib .panel .all:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.bluelib .panel > *:last-child,
|
|
||||||
.bluelib .panel .all:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.bluelib .panel-box {
|
|
||||||
border-radius: 4px;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
.bluelib .panel-blockquote {
|
|
||||||
border-radius: 4px;
|
|
||||||
border-width: 0 0 0 2px;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
.bluelib .panel-aside {
|
|
||||||
border-width: 0;
|
|
||||||
font-size: smaller;
|
|
||||||
}
|
|
||||||
.bluelib .split {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 4px 8px;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.bluelib .split > .panel {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.bluelib .split > *,
|
|
||||||
.bluelib .split .all {
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-shrink: 0;
|
|
||||||
flex-basis: 0;
|
|
||||||
}
|
|
||||||
.bluelib .split-forcewrap {
|
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
flex-basis: 100%;
|
|
||||||
}
|
|
||||||
.bluelib .separator {
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.5);
|
|
||||||
}
|
|
||||||
.bluelib .separator-light {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
|
||||||
}
|
|
||||||
.bluelib .separator-heavy {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
}
|
|
||||||
.bluelib img,
|
|
||||||
.bluelib .image {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
.bluelib .image-limit-half {
|
|
||||||
max-height: max(28.2vw, 50vh);
|
|
||||||
}
|
|
||||||
.bluelib .image-limit-quarter {
|
|
||||||
max-height: max(14.1vw, 25vh);
|
|
||||||
}
|
|
||||||
.bluelib .status-disabled {
|
|
||||||
opacity: 50%;
|
|
||||||
}
|
|
||||||
.bluelib .status-disabled,
|
|
||||||
.bluelib .status-disabled *,
|
|
||||||
.bluelib .status-disabled .all {
|
|
||||||
cursor: not-allowed !important;
|
|
||||||
}
|
|
||||||
.bluelib .input {
|
|
||||||
font: inherit;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .input.status-disabled {
|
|
||||||
border-style: dashed;
|
|
||||||
}
|
|
||||||
.bluelib .input::placeholder {
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.bluelib .input:hover {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
|
||||||
}
|
|
||||||
.bluelib .input:hover::placeholder {
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
|
||||||
}
|
|
||||||
.bluelib .input:focus {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
|
||||||
}
|
|
||||||
.bluelib .input:focus::placeholder {
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
|
||||||
}
|
|
||||||
.bluelib .input.status-disabled:hover,
|
|
||||||
.bluelib .input.status-disabled:focus {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .input.status-disabled:hover::placeholder,
|
|
||||||
.bluelib .input.status-disabled:focus::placeholder {
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
|
||||||
}
|
|
||||||
.bluelib .input:optional,
|
|
||||||
.bluelib .input:optional::placeholder {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
.bluelib .input:focus-visible {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.bluelib .input-field {
|
|
||||||
cursor: text;
|
|
||||||
border-width: 0 0 2px 0;
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
padding: 6px;
|
|
||||||
}
|
|
||||||
.bluelib .input-select {
|
|
||||||
cursor: context-menu;
|
|
||||||
border-width: 0 0 2px 0;
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
}
|
|
||||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
|
||||||
.bluelib .input-select .input-option,
|
|
||||||
.bluelib .input-select .input-optgroup {
|
|
||||||
background-color: #0d193b;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bluelib .input-multiselect {
|
|
||||||
cursor: vertical-text;
|
|
||||||
border-width: 0 0 0 2px;
|
|
||||||
border-radius: 0 4px 4px 0;
|
|
||||||
}
|
|
||||||
.bluelib .input-select,
|
|
||||||
.bluelib .input-multiselect {
|
|
||||||
padding: 6px 4px;
|
|
||||||
}
|
|
||||||
.bluelib .input-select .input-option,
|
|
||||||
.bluelib .input-multiselect .input-option {
|
|
||||||
font-weight: normal;
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
.bluelib .input-select .input-optgroup,
|
|
||||||
.bluelib .input-multiselect .input-optgroup {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
.bluelib .input-select .input-optgroup .input-option,
|
|
||||||
.bluelib .input-multiselect .input-optgroup .input-option {
|
|
||||||
padding: 4px 20px;
|
|
||||||
}
|
|
||||||
.bluelib .input-select .input-optgroup .input-option::before,
|
|
||||||
.bluelib .input-multiselect .input-optgroup .input-option::before {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
.bluelib .input-button {
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 6px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.bluelib .input-button:active {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
}
|
|
||||||
.bluelib .input-button .status-disabled:active {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox,
|
|
||||||
.bluelib .input-radio {
|
|
||||||
appearance: none;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border-width: 2px;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox::before,
|
|
||||||
.bluelib .input-radio::before {
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox:checked::before,
|
|
||||||
.bluelib .input-radio:checked::before {
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.9);
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox:hover:checked::before,
|
|
||||||
.bluelib .input-radio:hover:checked::before {
|
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 10)), 1);
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox:focus:checked::before,
|
|
||||||
.bluelib .input-radio:focus:checked::before {
|
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox:active:checked::before,
|
|
||||||
.bluelib .input-radio:active:checked::before {
|
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox {
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.bluelib .input-checkbox::before {
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.bluelib .input-radio {
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
.bluelib .input-radio::before {
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
.bluelib .form {
|
|
||||||
display: grid;
|
|
||||||
align-items: center;
|
|
||||||
row-gap: 4px;
|
|
||||||
column-gap: 8px;
|
|
||||||
grid-template-columns: minmax(auto, 1fr) 5fr;
|
|
||||||
}
|
|
||||||
.bluelib .form .form-label {
|
|
||||||
grid-column: 1;
|
|
||||||
justify-self: end;
|
|
||||||
text-align: right;
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.bluelib .form .form-input {
|
|
||||||
grid-column: 2;
|
|
||||||
justify-self: stretch;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.bluelib .form .form-group {
|
|
||||||
grid-column: 2;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px 16px;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
padding: 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.bluelib .form .form-group .form-group-label {
|
|
||||||
display: flex;
|
|
||||||
gap: 6px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.bluelib .form .form-group .form-group-row {
|
|
||||||
flex-basis: 100%;
|
|
||||||
justify-content: start;
|
|
||||||
}
|
|
||||||
.bluelib .form .form-row {
|
|
||||||
grid-column-start: 1;
|
|
||||||
grid-column-end: 3;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 8px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.bluelib .element-title {
|
|
||||||
text-align: center;
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
font-family: "Fira Sans", sans-serif;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.bluelib .element-list-item {
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 202;
|
|
||||||
--bluelib-color-b: 202;
|
|
||||||
text-decoration-line: underline;
|
|
||||||
text-decoration-style: solid;
|
|
||||||
text-decoration-color: currentColor;
|
|
||||||
text-decoration-thickness: 1px;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor:hover,
|
|
||||||
.bluelib .element-anchor:focus {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor:focus-visible {
|
|
||||||
text-decoration-thickness: 2px;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor:active {
|
|
||||||
--bluelib-color-r: 160;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor.status-disabled {
|
|
||||||
text-decoration-style: dashed;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor.status-disabled:hover,
|
|
||||||
.bluelib .element-anchor.status-disabled:focus {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 202;
|
|
||||||
--bluelib-color-b: 202;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor.status-disabled:active {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 202;
|
|
||||||
--bluelib-color-b: 202;
|
|
||||||
}
|
|
||||||
.bluelib .align-left {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.bluelib .align-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.bluelib .align-right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.bluelib .size-xxl {
|
|
||||||
font-size: xx-large;
|
|
||||||
}
|
|
||||||
.bluelib .size-xl {
|
|
||||||
font-size: x-large;
|
|
||||||
}
|
|
||||||
.bluelib .size-l {
|
|
||||||
font-size: large;
|
|
||||||
}
|
|
||||||
.bluelib .size-m {
|
|
||||||
font-size: medium;
|
|
||||||
}
|
|
||||||
.bluelib .size-s {
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
.bluelib .size-xs {
|
|
||||||
font-size: x-small;
|
|
||||||
}
|
|
||||||
.bluelib .size-xxs {
|
|
||||||
font-size: xx-small;
|
|
||||||
}
|
|
||||||
.bluelib .style-bold {
|
|
||||||
font-weight: bold;
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.bluelib .style-italic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
.bluelib .style-underline {
|
|
||||||
text-decoration-line: underline;
|
|
||||||
}
|
|
||||||
.bluelib .style-strike {
|
|
||||||
text-decoration-line: line-through;
|
|
||||||
}
|
|
||||||
.bluelib .style-monospace {
|
|
||||||
font-family: "Fira Code", monospace;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.bluelib .style-keyboard {
|
|
||||||
font-family: "Fira Code", monospace;
|
|
||||||
font-weight: 400;
|
|
||||||
padding: 2px 4px;
|
|
||||||
border: 2px outset;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.bluelib .color-red {
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 125;
|
|
||||||
--bluelib-color-b: 125;
|
|
||||||
}
|
|
||||||
.bluelib .color-orange {
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 187;
|
|
||||||
--bluelib-color-b: 125;
|
|
||||||
}
|
|
||||||
.bluelib .color-yellow {
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 125;
|
|
||||||
}
|
|
||||||
.bluelib .color-lime {
|
|
||||||
--bluelib-color-r: 125;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 125;
|
|
||||||
}
|
|
||||||
.bluelib .color-cyan {
|
|
||||||
--bluelib-color-r: 125;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.bluelib .color-blue {
|
|
||||||
--bluelib-color-r: 125;
|
|
||||||
--bluelib-color-g: 125;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.bluelib .color-magenta {
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 125;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.bluelib .color-gray {
|
|
||||||
--bluelib-color-r: 187;
|
|
||||||
--bluelib-color-g: 187;
|
|
||||||
--bluelib-color-b: 187;
|
|
||||||
}
|
}
|
||||||
/*# sourceMappingURL=royalblue.module.css.map */
|
/*# sourceMappingURL=royalblue.module.css.map */
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -3,7 +3,6 @@
|
||||||
@import (css) "../normalize/normalize.css";
|
@import (css) "../normalize/normalize.css";
|
||||||
|
|
||||||
@import (less) "../fonts/firasans.less";
|
@import (less) "../fonts/firasans.less";
|
||||||
@import (less) "../palettes/royalblue.less";
|
|
||||||
|
|
||||||
@import (less) "../vars/module.less";
|
@import (less) "../vars/module.less";
|
||||||
@import (less) "../rules/skeleton.less";
|
@import (less) "../rules/royalblue.less";
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -3,7 +3,6 @@
|
||||||
@import (css) "../normalize/normalize.css";
|
@import (css) "../normalize/normalize.css";
|
||||||
|
|
||||||
@import (less) "../fonts/firasans.less";
|
@import (less) "../fonts/firasans.less";
|
||||||
@import (less) "../palettes/royalblue.less";
|
|
||||||
|
|
||||||
@import (less) "../vars/root.less";
|
@import (less) "../vars/root.less";
|
||||||
@import (less) "../rules/skeleton.less";
|
@import (less) "../rules/royalblue.less";
|
||||||
|
|
|
||||||
562
src/targets/skeleton.module.css
Normal file
562
src/targets/skeleton.module.css
Normal file
|
|
@ -0,0 +1,562 @@
|
||||||
|
@import "../normalize/normalize.css";
|
||||||
|
.bluelib {
|
||||||
|
--bluelib-background-r: 255;
|
||||||
|
--bluelib-background-g: 255;
|
||||||
|
--bluelib-background-b: 255;
|
||||||
|
--bluelib-foreground-r: 24;
|
||||||
|
--bluelib-foreground-g: 24;
|
||||||
|
--bluelib-foreground-b: 24;
|
||||||
|
--bluelib-accent-r: 24;
|
||||||
|
--bluelib-accent-g: 24;
|
||||||
|
--bluelib-accent-b: 24;
|
||||||
|
--bluelib-link-r: 0;
|
||||||
|
--bluelib-link-g: 147;
|
||||||
|
--bluelib-link-b: 147;
|
||||||
|
--bluelib-red-r: 200;
|
||||||
|
--bluelib-red-g: 0;
|
||||||
|
--bluelib-red-b: 0;
|
||||||
|
--bluelib-orange-r: 200;
|
||||||
|
--bluelib-orange-g: 165;
|
||||||
|
--bluelib-orange-b: 0;
|
||||||
|
--bluelib-yellow-r: 200;
|
||||||
|
--bluelib-yellow-g: 200;
|
||||||
|
--bluelib-yellow-b: 0;
|
||||||
|
--bluelib-lime-r: 0;
|
||||||
|
--bluelib-lime-g: 200;
|
||||||
|
--bluelib-lime-b: 0;
|
||||||
|
--bluelib-cyan-r: 0;
|
||||||
|
--bluelib-cyan-g: 200;
|
||||||
|
--bluelib-cyan-b: 200;
|
||||||
|
--bluelib-blue-r: 0;
|
||||||
|
--bluelib-blue-g: 0;
|
||||||
|
--bluelib-blue-b: 200;
|
||||||
|
--bluelib-magenta-r: 200;
|
||||||
|
--bluelib-magenta-g: 0;
|
||||||
|
--bluelib-magenta-b: 200;
|
||||||
|
--bluelib-gray-r: 128;
|
||||||
|
--bluelib-gray-g: 128;
|
||||||
|
--bluelib-gray-b: 128;
|
||||||
|
--bluelib-polarity: -1;
|
||||||
|
--bluelib-title-family: sans-serif;
|
||||||
|
--bluelib-title-weight: bold;
|
||||||
|
--bluelib-text-family: sans-serif;
|
||||||
|
--bluelib-text-weight: normal;
|
||||||
|
--bluelib-code-family: monospace;
|
||||||
|
--bluelib-code-weight: normal;
|
||||||
|
background-color: rgb(var(--bluelib-background-r), var(--bluelib-background-g), var(--bluelib-background-b));
|
||||||
|
--bluelib-color-r: var(--bluelib-foreground-r);
|
||||||
|
--bluelib-color-g: var(--bluelib-foreground-g);
|
||||||
|
--bluelib-color-b: var(--bluelib-foreground-b);
|
||||||
|
font-family: var(--bluelib-text-family);
|
||||||
|
font-weight: var(--bluelib-text-weight);
|
||||||
|
}
|
||||||
|
.bluelib,
|
||||||
|
.bluelib *,
|
||||||
|
.bluelib .all {
|
||||||
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
|
}
|
||||||
|
.bluelib,
|
||||||
|
.bluelib *,
|
||||||
|
.bluelib .all,
|
||||||
|
.bluelib::before,
|
||||||
|
.bluelib *::before,
|
||||||
|
.bluelib .all::before,
|
||||||
|
.bluelib::after,
|
||||||
|
.bluelib *::after,
|
||||||
|
.bluelib .all::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.bluelib .layout {
|
||||||
|
display: grid;
|
||||||
|
justify-content: stretch;
|
||||||
|
align-items: stretch;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.bluelib .layout-fill {
|
||||||
|
padding: 4px;
|
||||||
|
grid-template-areas: "single";
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
}
|
||||||
|
.bluelib .layout-fill-single {
|
||||||
|
grid-area: single;
|
||||||
|
}
|
||||||
|
.bluelib .layout-threecol {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1281px) {
|
||||||
|
.bluelib .layout-threecol {
|
||||||
|
grid-template-areas: "left center right";
|
||||||
|
grid-template-columns: 1fr auto 1fr;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1280px) {
|
||||||
|
.bluelib .layout-threecol {
|
||||||
|
grid-template-areas: "center center" "left right";
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
max-width: 1024px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bluelib .layout-threecol-left {
|
||||||
|
grid-area: left;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1281px) {
|
||||||
|
.bluelib .layout-threecol-left {
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1280px) {
|
||||||
|
.bluelib .layout-threecol-left {
|
||||||
|
justify-self: stretch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bluelib .layout-threecol-center {
|
||||||
|
grid-area: center;
|
||||||
|
max-width: 1024px;
|
||||||
|
}
|
||||||
|
.bluelib .layout-threecol-right {
|
||||||
|
grid-area: right;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1281px) {
|
||||||
|
.bluelib .layout-threecol-right {
|
||||||
|
justify-self: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1280px) {
|
||||||
|
.bluelib .layout-threecol-right {
|
||||||
|
justify-self: stretch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bluelib .panel {
|
||||||
|
margin: 8px 0;
|
||||||
|
padding: 8px;
|
||||||
|
width: 100%;
|
||||||
|
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), 0.1);
|
||||||
|
}
|
||||||
|
.bluelib .panel > *:first-child,
|
||||||
|
.bluelib .panel .all:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.bluelib .panel > *:last-child,
|
||||||
|
.bluelib .panel .all:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.bluelib .panel-box {
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
.bluelib .panel-blockquote {
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 0 0 0 2px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
.bluelib .panel-aside {
|
||||||
|
border-width: 0;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
.bluelib .split {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 4px 8px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.bluelib .split > .panel {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.bluelib .split > *,
|
||||||
|
.bluelib .split .all {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-basis: 0;
|
||||||
|
}
|
||||||
|
.bluelib .split-forcewrap {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-basis: 100%;
|
||||||
|
}
|
||||||
|
.bluelib .separator {
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.5);
|
||||||
|
}
|
||||||
|
.bluelib .separator-light {
|
||||||
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||||
|
}
|
||||||
|
.bluelib .separator-heavy {
|
||||||
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
|
}
|
||||||
|
.bluelib img,
|
||||||
|
.bluelib .image {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
.bluelib .image-limit-half {
|
||||||
|
max-height: max(28.2vw, 50vh);
|
||||||
|
}
|
||||||
|
.bluelib .image-limit-quarter {
|
||||||
|
max-height: max(14.1vw, 25vh);
|
||||||
|
}
|
||||||
|
.bluelib .status-disabled {
|
||||||
|
opacity: 50%;
|
||||||
|
}
|
||||||
|
.bluelib .status-disabled,
|
||||||
|
.bluelib .status-disabled *,
|
||||||
|
.bluelib .status-disabled .all {
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
}
|
||||||
|
.bluelib .input {
|
||||||
|
font: inherit;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||||
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
|
}
|
||||||
|
.bluelib .input.status-disabled {
|
||||||
|
border-style: dashed;
|
||||||
|
}
|
||||||
|
.bluelib .input::placeholder {
|
||||||
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.bluelib .input:hover {
|
||||||
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||||
|
color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||||
|
}
|
||||||
|
.bluelib .input:hover::placeholder {
|
||||||
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||||
|
}
|
||||||
|
.bluelib .input:focus {
|
||||||
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
|
color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
||||||
|
}
|
||||||
|
.bluelib .input:focus::placeholder {
|
||||||
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||||
|
}
|
||||||
|
.bluelib .input.status-disabled:hover,
|
||||||
|
.bluelib .input.status-disabled:focus {
|
||||||
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||||
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
|
}
|
||||||
|
.bluelib .input.status-disabled:hover::placeholder,
|
||||||
|
.bluelib .input.status-disabled:focus::placeholder {
|
||||||
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||||
|
}
|
||||||
|
.bluelib .input:optional,
|
||||||
|
.bluelib .input:optional::placeholder {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.bluelib .input:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.bluelib .input-field {
|
||||||
|
cursor: text;
|
||||||
|
border-width: 0 0 2px 0;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
.bluelib .input-select {
|
||||||
|
cursor: context-menu;
|
||||||
|
border-width: 0 0 2px 0;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
}
|
||||||
|
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||||
|
.bluelib .input-select .input-option,
|
||||||
|
.bluelib .input-select .input-optgroup {
|
||||||
|
background-color: rgb(var(--bluelib-background-r), var(--bluelib-background-g), var(--bluelib-background-b));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bluelib .input-multiselect {
|
||||||
|
cursor: vertical-text;
|
||||||
|
border-width: 0 0 0 2px;
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
}
|
||||||
|
.bluelib .input-select,
|
||||||
|
.bluelib .input-multiselect {
|
||||||
|
padding: 6px 4px;
|
||||||
|
}
|
||||||
|
.bluelib .input-select .input-option,
|
||||||
|
.bluelib .input-multiselect .input-option {
|
||||||
|
font-weight: normal;
|
||||||
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.bluelib .input-select .input-optgroup,
|
||||||
|
.bluelib .input-multiselect .input-optgroup {
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.bluelib .input-select .input-optgroup .input-option,
|
||||||
|
.bluelib .input-multiselect .input-optgroup .input-option {
|
||||||
|
padding: 4px 20px;
|
||||||
|
}
|
||||||
|
.bluelib .input-select .input-optgroup .input-option::before,
|
||||||
|
.bluelib .input-multiselect .input-optgroup .input-option::before {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.bluelib .input-button {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.bluelib .input-button:active {
|
||||||
|
border-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
|
||||||
|
color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||||
|
}
|
||||||
|
.bluelib .input-button .status-disabled:active {
|
||||||
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||||
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
|
}
|
||||||
|
.bluelib .input-checkbox,
|
||||||
|
.bluelib .input-radio {
|
||||||
|
appearance: none;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-width: 2px;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.bluelib .input-checkbox::before,
|
||||||
|
.bluelib .input-radio::before {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
.bluelib .input-checkbox:checked::before,
|
||||||
|
.bluelib .input-radio:checked::before {
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.9);
|
||||||
|
}
|
||||||
|
.bluelib .input-checkbox:hover:checked::before,
|
||||||
|
.bluelib .input-radio:hover:checked::before {
|
||||||
|
background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 10)), 1);
|
||||||
|
}
|
||||||
|
.bluelib .input-checkbox:focus:checked::before,
|
||||||
|
.bluelib .input-radio:focus:checked::before {
|
||||||
|
background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
|
||||||
|
}
|
||||||
|
.bluelib .input-checkbox:active:checked::before,
|
||||||
|
.bluelib .input-radio:active:checked::before {
|
||||||
|
background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
|
||||||
|
}
|
||||||
|
.bluelib .input-checkbox {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.bluelib .input-checkbox::before {
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.bluelib .input-radio {
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
.bluelib .input-radio::before {
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
.bluelib .form {
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
row-gap: 4px;
|
||||||
|
column-gap: 8px;
|
||||||
|
grid-template-columns: minmax(auto, 1fr) 5fr;
|
||||||
|
}
|
||||||
|
.bluelib .form .form-label {
|
||||||
|
grid-column: 1;
|
||||||
|
justify-self: end;
|
||||||
|
text-align: right;
|
||||||
|
--bluelib-color-r: var(--bluelib-accent-r);
|
||||||
|
--bluelib-color-g: var(--bluelib-accent-g);
|
||||||
|
--bluelib-color-b: var(--bluelib-accent-b);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.bluelib .form .form-input {
|
||||||
|
grid-column: 2;
|
||||||
|
justify-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.bluelib .form .form-group {
|
||||||
|
grid-column: 2;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px 16px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
|
padding: 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.bluelib .form .form-group .form-group-label {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.bluelib .form .form-group .form-group-row {
|
||||||
|
flex-basis: 100%;
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
.bluelib .form .form-row {
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-column-end: 3;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.bluelib .element-title {
|
||||||
|
text-align: center;
|
||||||
|
--bluelib-color-r: var(--bluelib-accent-r);
|
||||||
|
--bluelib-color-g: var(--bluelib-accent-g);
|
||||||
|
--bluelib-color-b: var(--bluelib-accent-b);
|
||||||
|
font-family: var(--bluelib-title-family);
|
||||||
|
font-weight: var(--bluelib-title-weight);
|
||||||
|
}
|
||||||
|
.bluelib .element-list-item {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.bluelib .element-anchor {
|
||||||
|
--bluelib-color-r: var(--bluelib-link-r);
|
||||||
|
--bluelib-color-g: var(--bluelib-link-g);
|
||||||
|
--bluelib-color-b: var(--bluelib-link-b);
|
||||||
|
text-decoration-line: underline;
|
||||||
|
text-decoration-style: solid;
|
||||||
|
text-decoration-color: currentColor;
|
||||||
|
text-decoration-thickness: 1px;
|
||||||
|
}
|
||||||
|
.bluelib .element-anchor:hover,
|
||||||
|
.bluelib .element-anchor:focus {
|
||||||
|
color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
|
||||||
|
}
|
||||||
|
.bluelib .element-anchor:focus-visible {
|
||||||
|
text-decoration-thickness: 2px;
|
||||||
|
}
|
||||||
|
.bluelib .element-anchor:active {
|
||||||
|
color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 110)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 110)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 110)), 1);
|
||||||
|
}
|
||||||
|
.bluelib .element-anchor.status-disabled {
|
||||||
|
text-decoration-style: dashed;
|
||||||
|
}
|
||||||
|
.bluelib .element-anchor.status-disabled:hover,
|
||||||
|
.bluelib .element-anchor.status-disabled:focus,
|
||||||
|
.bluelib .element-anchor.status-disabled:active {
|
||||||
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
|
}
|
||||||
|
.bluelib .align-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.bluelib .align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bluelib .align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.bluelib .size-xxl {
|
||||||
|
font-size: xx-large;
|
||||||
|
}
|
||||||
|
.bluelib .size-xl {
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
.bluelib .size-l {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
.bluelib .size-m {
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
.bluelib .size-s {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
.bluelib .size-xs {
|
||||||
|
font-size: x-small;
|
||||||
|
}
|
||||||
|
.bluelib .size-xxs {
|
||||||
|
font-size: xx-small;
|
||||||
|
}
|
||||||
|
.bluelib .style-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
--bluelib-color-r: var(--bluelib-accent-r);
|
||||||
|
--bluelib-color-g: var(--bluelib-accent-g);
|
||||||
|
--bluelib-color-b: var(--bluelib-accent-b);
|
||||||
|
}
|
||||||
|
.bluelib .style-italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.bluelib .style-underline {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
.bluelib .style-strike {
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
}
|
||||||
|
.bluelib .style-monospace {
|
||||||
|
font-family: var(--bluelib-code-family);
|
||||||
|
font-weight: var(--bluelib-code-weight);
|
||||||
|
}
|
||||||
|
.bluelib .style-keyboard {
|
||||||
|
font-family: var(--bluelib-code-family);
|
||||||
|
font-weight: var(--bluelib-code-weight);
|
||||||
|
padding: 2px 4px;
|
||||||
|
border: 2px outset;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.bluelib .color-red {
|
||||||
|
--bluelib-color-r: var(--bluelib-red-r);
|
||||||
|
--bluelib-color-g: var(--bluelib-red-g);
|
||||||
|
--bluelib-color-b: var(--bluelib-red-b);
|
||||||
|
}
|
||||||
|
.bluelib .color-orange {
|
||||||
|
--bluelib-color-r: var(--bluelib-orange-r);
|
||||||
|
--bluelib-color-g: var(--bluelib-orange-g);
|
||||||
|
--bluelib-color-b: var(--bluelib-orange-b);
|
||||||
|
}
|
||||||
|
.bluelib .color-yellow {
|
||||||
|
--bluelib-color-r: var(--bluelib-yellow-r);
|
||||||
|
--bluelib-color-g: var(--bluelib-yellow-g);
|
||||||
|
--bluelib-color-b: var(--bluelib-yellow-b);
|
||||||
|
}
|
||||||
|
.bluelib .color-lime {
|
||||||
|
--bluelib-color-r: var(--bluelib-lime-r);
|
||||||
|
--bluelib-color-g: var(--bluelib-lime-g);
|
||||||
|
--bluelib-color-b: var(--bluelib-lime-b);
|
||||||
|
}
|
||||||
|
.bluelib .color-cyan {
|
||||||
|
--bluelib-color-r: var(--bluelib-cyan-r);
|
||||||
|
--bluelib-color-g: var(--bluelib-cyan-g);
|
||||||
|
--bluelib-color-b: var(--bluelib-cyan-b);
|
||||||
|
}
|
||||||
|
.bluelib .color-blue {
|
||||||
|
--bluelib-color-r: var(--bluelib-blue-r);
|
||||||
|
--bluelib-color-g: var(--bluelib-blue-g);
|
||||||
|
--bluelib-color-b: var(--bluelib-blue-b);
|
||||||
|
}
|
||||||
|
.bluelib .color-magenta {
|
||||||
|
--bluelib-color-r: var(--bluelib-magenta-r);
|
||||||
|
--bluelib-color-g: var(--bluelib-magenta-g);
|
||||||
|
--bluelib-color-b: var(--bluelib-magenta-b);
|
||||||
|
}
|
||||||
|
.bluelib .color-gray {
|
||||||
|
--bluelib-color-r: var(--bluelib-gray-r);
|
||||||
|
--bluelib-color-g: var(--bluelib-gray-g);
|
||||||
|
--bluelib-color-b: var(--bluelib-gray-b);
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=skeleton.module.css.map */
|
||||||
1
src/targets/skeleton.module.css.map
Normal file
1
src/targets/skeleton.module.css.map
Normal file
File diff suppressed because one or more lines are too long
5
src/targets/skeleton.module.less
Normal file
5
src/targets/skeleton.module.less
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import (css) "../normalize/normalize.css";
|
||||||
|
|
||||||
|
@import (less) "../utils/mixins.less";
|
||||||
|
@import (less) "../vars/module.less";
|
||||||
|
@import (less) "../rules/skeleton.less";
|
||||||
2228
src/targets/skeleton.root.css
Normal file
2228
src/targets/skeleton.root.css
Normal file
File diff suppressed because it is too large
Load diff
1
src/targets/skeleton.root.css.map
Normal file
1
src/targets/skeleton.root.css.map
Normal file
File diff suppressed because one or more lines are too long
5
src/targets/skeleton.root.less
Normal file
5
src/targets/skeleton.root.less
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import (css) "../normalize/normalize.css";
|
||||||
|
|
||||||
|
@import (less) "../utils/mixins.less";
|
||||||
|
@import (less) "../vars/root.less";
|
||||||
|
@import (less) "../rules/skeleton.less";
|
||||||
|
|
@ -1,9 +1,43 @@
|
||||||
.bluelib-color(@color) {
|
.set-var-rgb(@property; @r; @g; @b) {
|
||||||
--bluelib-color-r: red(@color);
|
--@{property}-r: @r;
|
||||||
--bluelib-color-g: green(@color);
|
--@{property}-g: @g;
|
||||||
--bluelib-color-b: blue(@color);
|
--@{property}-b: @b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.define-bluelib-color-macros() {
|
.map-var-rgb(@property; @source) {
|
||||||
|
--@{property}-r: var( ~"--@{source}-r" );
|
||||||
|
--@{property}-g: var( ~"--@{source}-g" );
|
||||||
|
--@{property}-b: var( ~"--@{source}-b" );
|
||||||
|
}
|
||||||
|
|
||||||
|
.use-var-rgb(@property; @source) {
|
||||||
|
@{property}: rgb(
|
||||||
|
var(~"--@{source}-r"),
|
||||||
|
var(~"--@{source}-g"),
|
||||||
|
var(~"--@{source}-b")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.use-var-rgb-with-alpha(@property; @source; @alpha) {
|
||||||
|
@{property}: rgba(
|
||||||
|
var(~"--@{source}-r"),
|
||||||
|
var(~"--@{source}-g"),
|
||||||
|
var(~"--@{source}-b"),
|
||||||
|
@alpha
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-var-font(@property; @family; @weight) {
|
||||||
|
--@{property}-family: @family;
|
||||||
|
--@{property}-weight: @weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-var-font(@property; @source) {
|
||||||
|
--@{property}-family: var( ~"--@{source}-family");
|
||||||
|
--@{property}-weight: var( ~"--@{source}-weight");
|
||||||
|
}
|
||||||
|
|
||||||
|
.use-var-font(@source) {
|
||||||
|
font-family: var( ~"--@{source}-family");
|
||||||
|
font-weight: var( ~"--@{source}-weight");
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue