mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 11:34:21 +00:00
💥 Add text inputs
* 🚧 Begin implementing input fields * 🚧 Make more progress * 💥 Change everything again * ✨ Complete the task * 💥 Add some new things * 🧹 Clean non-existant stylesheet
This commit is contained in:
parent
34cc20cbeb
commit
a47f83b536
GPG key ID:
4AEE18F83AFDEB23
36 changed files with 4173 additions and 937 deletions
|
|
@ -45,5 +45,10 @@
|
||||||
<inspection_tool class="RegExpRepeatedSpace" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
|
<inspection_tool class="RegExpRepeatedSpace" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
|
||||||
<inspection_tool class="RegExpUnexpectedAnchor" enabled="true" level="ERROR" enabled_by_default="true" />
|
<inspection_tool class="RegExpUnexpectedAnchor" enabled="true" level="ERROR" enabled_by_default="true" />
|
||||||
<inspection_tool class="ShellCheck" enabled="true" level="WARNING" enabled_by_default="true" />
|
<inspection_tool class="ShellCheck" enabled="true" level="WARNING" enabled_by_default="true" />
|
||||||
|
<inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">
|
||||||
|
<option name="processCode" value="true" />
|
||||||
|
<option name="processLiterals" value="true" />
|
||||||
|
<option name="processComments" value="true" />
|
||||||
|
</inspection_tool>
|
||||||
</profile>
|
</profile>
|
||||||
</component>
|
</component>
|
||||||
|
|
@ -2,18 +2,7 @@
|
||||||
|
|
||||||
Feel free to contribute to bluelib at any time, adding new rules, themes or anything else through [pull requests](https://github.com/RYGhub/bluelib/pulls)!
|
Feel free to contribute to bluelib at any time, adding new rules, themes or anything else through [pull requests](https://github.com/RYGhub/bluelib/pulls)!
|
||||||
|
|
||||||
## Structure
|
<!-- Readd the Structure here, maybe. -->
|
||||||
|
|
||||||
- [src](src) contains the project source
|
|
||||||
- [rules](src/rules) are the [Less rules](http://lesscss.org/#nesting) for bluelib, which should use exclusively variables as selectors (`@{var} {...}`)
|
|
||||||
- [skeleton](src/rules/skeleton.less) is always imported, and defines the base rules of bluelib, such as layout, padding, margins, etc.
|
|
||||||
- [rygblue](src/rules/rygblue.less) is a theme: its import is optional, and only defines rules such as fonts and colors
|
|
||||||
- [vars](src/vars) contains files with [Less variables](http://lesscss.org/features/#variables-feature) which define the selectors for every rule previously defined
|
|
||||||
- [module](src/vars/module.less) defines selectors only by using unique classes, with the exception of `@all`, which selects `.bluelib *`; it's ideal for usage with [CSS Modules](https://github.com/css-modules/css-modules) and [React](https://reactjs.org)
|
|
||||||
- [root](src/vars/root.less) applies rules to the whole page by applying selectors directly to HTML elements such as `section` and `blockquote`; it's ideal for basic websites which do not mix multiple styles
|
|
||||||
- [targets](src/targets) contains Less files which import a single _var_ file followed by a single _rule_ file, and the CSS files resulting from their compilation
|
|
||||||
- [rygblue.module.less](src/targets/rygblue.module.less) imports the `module` var file followed by the `rygblue` rules file
|
|
||||||
- and so on
|
|
||||||
|
|
||||||
## Compiling
|
## Compiling
|
||||||
|
|
||||||
|
|
|
||||||
20
index.html
20
index.html
|
|
@ -2,8 +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/rygblue.root.css">
|
<link rel="stylesheet" href="src/targets/royalblue.root.css">
|
||||||
<title>Bluelib 2</title>
|
<title>Bluelib 2</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-bluelib">
|
<body class="theme-bluelib">
|
||||||
|
|
@ -374,7 +374,7 @@
|
||||||
"not allowed" cursor if hovered.
|
"not allowed" cursor if hovered.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
It also works with <a class="status-disabled">links</a>!
|
It also works with <a href="#" disabled class="status-disabled">links</a>!
|
||||||
</p>
|
</p>
|
||||||
<section class="status-disabled">
|
<section class="status-disabled">
|
||||||
And panels!
|
And panels!
|
||||||
|
|
@ -393,9 +393,17 @@
|
||||||
Bluelib allows for the easy creation of forms:
|
Bluelib allows for the easy creation of forms:
|
||||||
</p>
|
</p>
|
||||||
<form>
|
<form>
|
||||||
<input type="text" placeholder="Text"/>
|
<label for="input-text">Text</label>
|
||||||
<input type="password" placeholder="Password"/>
|
<input id="input-text" type="text" placeholder="Text"/>
|
||||||
<input type="email" placeholder="Email"/>
|
<label for="input-password">Password</label>
|
||||||
|
<input id="input-password" type="password" placeholder="Password" required/>
|
||||||
|
<label for="input-email">Email</label>
|
||||||
|
<input id="input-email" type="email" placeholder="Email"/>
|
||||||
|
<label for="input-disabled">Disabled</label>
|
||||||
|
<input id="input-disabled" type="text" placeholder="Disabled" disabled/>
|
||||||
|
<div class="form-buttons">
|
||||||
|
<input id="input-submit" type="submit" value="Submit"/>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
16
src/colors/minus.less
Normal file
16
src/colors/minus.less
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
@b0: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
|
@b1: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.100);
|
||||||
|
@b2: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-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) - 10), calc(var(--bluelib-color-g) - 10), calc(var(--bluelib-color-b) - 10), 1.000);
|
||||||
|
@bC: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1.000);
|
||||||
|
@bD: rgba(calc(var(--bluelib-color-r) - 30), calc(var(--bluelib-color-g) - 30), calc(var(--bluelib-color-b) - 30), 1.000);
|
||||||
|
@bE: rgba(calc(var(--bluelib-color-r) - 40), calc(var(--bluelib-color-g) - 40), calc(var(--bluelib-color-b) - 40), 1.000);
|
||||||
|
@bF: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1.000);
|
||||||
16
src/colors/plus.less
Normal file
16
src/colors/plus.less
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
@b0: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
|
@b1: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.100);
|
||||||
|
@b2: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-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) + 10), calc(var(--bluelib-color-g) + 10), calc(var(--bluelib-color-b) + 10), 1.000);
|
||||||
|
@bC: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1.000);
|
||||||
|
@bD: rgba(calc(var(--bluelib-color-r) + 30), calc(var(--bluelib-color-g) + 30), calc(var(--bluelib-color-b) + 30), 1.000);
|
||||||
|
@bE: rgba(calc(var(--bluelib-color-r) + 40), calc(var(--bluelib-color-g) + 40), calc(var(--bluelib-color-b) + 40), 1.000);
|
||||||
|
@bF: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1.000);
|
||||||
16
src/fonts/firasans.less
Normal file
16
src/fonts/firasans.less
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
@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-family: "Fira Sans", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-title() {
|
||||||
|
font-family: "Fira Sans", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-code() {
|
||||||
|
font-family: "Fira Code", monospace;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
16
src/fonts/lato.less
Normal file
16
src/fonts/lato.less
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
|
||||||
|
|
||||||
|
.font-text() {
|
||||||
|
font-family: "Lato", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-title() {
|
||||||
|
font-family: "Lato", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-code() {
|
||||||
|
font-family: monospace;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
18
src/palettes/paper.less
Normal file
18
src/palettes/paper.less
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
@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;
|
||||||
|
|
||||||
|
@hex-outline: #ffffff;
|
||||||
18
src/palettes/royalblue.less
Normal file
18
src/palettes/royalblue.less
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
@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;
|
||||||
|
|
||||||
|
@hex-outline: #000000;
|
||||||
|
|
@ -1,369 +0,0 @@
|
||||||
|
|
||||||
@{root} {
|
|
||||||
// === LESS VARIABLES ===
|
|
||||||
|
|
||||||
@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;
|
|
||||||
|
|
||||||
// === RULES ===
|
|
||||||
|
|
||||||
--bluelib-color-r: red(@hex-foreground);
|
|
||||||
--bluelib-color-g: green(@hex-foreground);
|
|
||||||
--bluelib-color-b: blue(@hex-foreground);
|
|
||||||
|
|
||||||
background-color: @hex-background;
|
|
||||||
color: rgb(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
);
|
|
||||||
|
|
||||||
@{all} {
|
|
||||||
color: rgb(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// --- Containers ---
|
|
||||||
|
|
||||||
@{container-main} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// --- Panels ---
|
|
||||||
// Remember to use BOTH the panel AND the panel-* class when using a panel element!
|
|
||||||
|
|
||||||
@{panel} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// A generic content box
|
|
||||||
@{panel-box} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Should be the same as a box, but with a quote-like border
|
|
||||||
@{panel-blockquote} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Should be the same as a box, but with smaller text and no border
|
|
||||||
@{panel-aside} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Evenly split the panels contained inside
|
|
||||||
@{panel-split} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Buttons ---
|
|
||||||
|
|
||||||
@{button} {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
@toggle-stroke-1: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
1
|
|
||||||
);
|
|
||||||
@toggle-stroke-2: rgba(
|
|
||||||
calc(var(--bluelib-color-r) + 25),
|
|
||||||
calc(var(--bluelib-color-g) + 25),
|
|
||||||
calc(var(--bluelib-color-b) + 25),
|
|
||||||
1
|
|
||||||
);
|
|
||||||
@toggle-stroke-3: rgba(
|
|
||||||
calc(var(--bluelib-color-r) + 55),
|
|
||||||
calc(var(--bluelib-color-g) + 55),
|
|
||||||
calc(var(--bluelib-color-b) + 55),
|
|
||||||
1
|
|
||||||
);
|
|
||||||
|
|
||||||
@toggle-fill-1: transparent;
|
|
||||||
@toggle-fill-2: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.10
|
|
||||||
);
|
|
||||||
@toggle-fill-3: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.3
|
|
||||||
);
|
|
||||||
|
|
||||||
@{button-toggle} {
|
|
||||||
padding: 4px 14px;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
@{button-toggle-off} {
|
|
||||||
border-color: @toggle-stroke-1;
|
|
||||||
color: @toggle-stroke-1;
|
|
||||||
background-color: @toggle-fill-1;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: @toggle-stroke-2;
|
|
||||||
color: @toggle-stroke-2;
|
|
||||||
background-color: @toggle-fill-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
border-color: @toggle-stroke-3;
|
|
||||||
color: @toggle-stroke-3;
|
|
||||||
background-color: @toggle-fill-3;
|
|
||||||
}
|
|
||||||
|
|
||||||
&@{status-disabled} {
|
|
||||||
&:hover {
|
|
||||||
border-color: @toggle-stroke-1;
|
|
||||||
color: @toggle-stroke-1;
|
|
||||||
background-color: @toggle-fill-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
border-color: @toggle-stroke-1;
|
|
||||||
color: @toggle-stroke-1;
|
|
||||||
background-color: @toggle-fill-1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@{button-toggle-on} {
|
|
||||||
border-color: @toggle-stroke-3;
|
|
||||||
color: @toggle-stroke-3;
|
|
||||||
background-color: @toggle-fill-3;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: @toggle-stroke-2;
|
|
||||||
color: @toggle-stroke-2;
|
|
||||||
background-color: @toggle-fill-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
border-color: @toggle-stroke-1;
|
|
||||||
color: @toggle-stroke-1;
|
|
||||||
background-color: @toggle-fill-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&@{status-disabled} {
|
|
||||||
&:hover {
|
|
||||||
border-color: @toggle-stroke-3;
|
|
||||||
color: @toggle-stroke-3;
|
|
||||||
background-color: @toggle-fill-3;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
border-color: @toggle-stroke-3;
|
|
||||||
color: @toggle-stroke-3;
|
|
||||||
background-color: @toggle-fill-3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// --- Spoilers ---
|
|
||||||
|
|
||||||
@{spoiler} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Element status ---
|
|
||||||
|
|
||||||
@{status-hoverable} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{status-clickable} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{status-disabled} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Elements ---
|
|
||||||
|
|
||||||
@{element-title} {
|
|
||||||
--bluelib-color-r: red(@hex-accent);
|
|
||||||
--bluelib-color-g: green(@hex-accent);
|
|
||||||
--bluelib-color-b: blue(@hex-accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
@{element-paragraph} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{element-separator} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{element-list-item} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{element-anchor} {
|
|
||||||
--bluelib-color-r: red(@hex-link);
|
|
||||||
--bluelib-color-g: green(@hex-link);
|
|
||||||
--bluelib-color-b: blue(@hex-link);
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
--bluelib-color-r: red(@hex-link-hover);
|
|
||||||
--bluelib-color-g: green(@hex-link-hover);
|
|
||||||
--bluelib-color-b: blue(@hex-link-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
--bluelib-color-r: red(@hex-link-active);
|
|
||||||
--bluelib-color-g: green(@hex-link-active);
|
|
||||||
--bluelib-color-b: blue(@hex-link-active);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Alignment ---
|
|
||||||
|
|
||||||
@{align-left} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{align-center} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{align-right} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Sizes ---
|
|
||||||
|
|
||||||
@{size-xxl} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{size-xl} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{size-l} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{size-m} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{size-s} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{size-xs} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{size-xxs} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Styles ---
|
|
||||||
|
|
||||||
@{style-bold} {
|
|
||||||
--bluelib-color-r: red(@hex-accent);
|
|
||||||
--bluelib-color-g: green(@hex-accent);
|
|
||||||
--bluelib-color-b: blue(@hex-accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
@{style-italic} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{style-underline} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{style-strike} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{style-monospace} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@{style-keyboard} {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// --- Colors ---
|
|
||||||
|
|
||||||
@{color-red} {
|
|
||||||
--bluelib-color-r: red(@hex-red);
|
|
||||||
--bluelib-color-g: green(@hex-red);
|
|
||||||
--bluelib-color-b: blue(@hex-red);
|
|
||||||
}
|
|
||||||
|
|
||||||
@{color-orange} {
|
|
||||||
--bluelib-color-r: red(@hex-orange);
|
|
||||||
--bluelib-color-g: green(@hex-orange);
|
|
||||||
--bluelib-color-b: blue(@hex-orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
@{color-yellow} {
|
|
||||||
--bluelib-color-r: red(@hex-yellow);
|
|
||||||
--bluelib-color-g: green(@hex-yellow);
|
|
||||||
--bluelib-color-b: blue(@hex-yellow);
|
|
||||||
}
|
|
||||||
|
|
||||||
@{color-lime} {
|
|
||||||
--bluelib-color-r: red(@hex-lime);
|
|
||||||
--bluelib-color-g: green(@hex-lime);
|
|
||||||
--bluelib-color-b: blue(@hex-lime);
|
|
||||||
}
|
|
||||||
|
|
||||||
@{color-cyan} {
|
|
||||||
--bluelib-color-r: red(@hex-cyan);
|
|
||||||
--bluelib-color-g: green(@hex-cyan);
|
|
||||||
--bluelib-color-b: blue(@hex-cyan);
|
|
||||||
}
|
|
||||||
|
|
||||||
@{color-blue} {
|
|
||||||
--bluelib-color-r: red(@hex-blue);
|
|
||||||
--bluelib-color-g: green(@hex-blue);
|
|
||||||
--bluelib-color-b: blue(@hex-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
@{color-magenta} {
|
|
||||||
--bluelib-color-r: red(@hex-magenta);
|
|
||||||
--bluelib-color-g: green(@hex-magenta);
|
|
||||||
--bluelib-color-b: blue(@hex-magenta);
|
|
||||||
}
|
|
||||||
|
|
||||||
@{color-gray} {
|
|
||||||
--bluelib-color-r: red(@hex-gray);
|
|
||||||
--bluelib-color-g: green(@hex-gray);
|
|
||||||
--bluelib-color-b: blue(@hex-gray);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
300
src/rules/skeleton.less
vendored
300
src/rules/skeleton.less
vendored
|
|
@ -1,22 +1,21 @@
|
||||||
@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');
|
|
||||||
|
|
||||||
@{root} {
|
@{root} {
|
||||||
// --- Globals ---
|
|
||||||
|
|
||||||
--bluelib-color-r: 24;
|
// --- Root ---
|
||||||
--bluelib-color-g: 24;
|
|
||||||
--bluelib-color-b: 24;
|
color: @bA;
|
||||||
|
background-color: @hex-background;
|
||||||
|
.bluelib-color(@hex-foreground);
|
||||||
|
.font-text();
|
||||||
|
|
||||||
|
|
||||||
&, @{all} {
|
&, @{all} {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: rgb(
|
color: @bA;
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
/* Disable outline, as we already highlight focused elements; if it's not enough, let me know */
|
||||||
var(--bluelib-color-b),
|
outline: none !important;
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
font-family: "Fira Sans", sans-serif;
|
|
||||||
|
|
||||||
// --- Containers ---
|
// --- Containers ---
|
||||||
|
|
||||||
|
|
@ -26,6 +25,7 @@
|
||||||
max-width: 1280px;
|
max-width: 1280px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// --- Panels ---
|
// --- Panels ---
|
||||||
// Remember to use BOTH the panel AND the panel-* class when using a panel element!
|
// Remember to use BOTH the panel AND the panel-* class when using a panel element!
|
||||||
|
|
||||||
|
|
@ -52,18 +52,8 @@
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
|
||||||
background-color: rgba(
|
background-color: @b0;
|
||||||
var(--bluelib-color-r),
|
border-color: @b1;
|
||||||
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
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// A box with a quote-like border
|
// A box with a quote-like border
|
||||||
|
|
@ -98,49 +88,72 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// --- Forms ---
|
||||||
|
|
||||||
|
@{form} {
|
||||||
|
display: grid;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
row-gap: 4px;
|
||||||
|
column-gap: 8px;
|
||||||
|
|
||||||
|
grid-template-columns: minmax(auto, 1fr) 5fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@{form-label} {
|
||||||
|
grid-column: 1;
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
@{form-input} {
|
||||||
|
grid-column: 2;
|
||||||
|
justify-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:optional::placeholder {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:invalid:not(:placeholder-shown) {
|
||||||
|
.bluelib-color(@hex-red);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@{form-submit} {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@{form-buttons} {
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-column-end: 3;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// --- Buttons ---
|
// --- Buttons ---
|
||||||
|
|
||||||
@stroke-1: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
1
|
|
||||||
);
|
|
||||||
@stroke-2: rgba(
|
|
||||||
calc(var(--bluelib-color-r) - 25),
|
|
||||||
calc(var(--bluelib-color-g) - 25),
|
|
||||||
calc(var(--bluelib-color-b) - 25),
|
|
||||||
1
|
|
||||||
);
|
|
||||||
@stroke-3: rgba(
|
|
||||||
calc(var(--bluelib-color-r) - 55),
|
|
||||||
calc(var(--bluelib-color-g) - 55),
|
|
||||||
calc(var(--bluelib-color-b) - 55),
|
|
||||||
1
|
|
||||||
);
|
|
||||||
|
|
||||||
@fill-1: transparent;
|
|
||||||
@fill-2: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.1
|
|
||||||
);
|
|
||||||
@fill-3: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.3
|
|
||||||
);
|
|
||||||
|
|
||||||
@{button} {
|
@{button} {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
background-color: @stroke-1;
|
background-color: @bA;
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: @hex-outline;
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
|
@ -149,20 +162,20 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: @stroke-2;
|
background-color: @bC;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: @stroke-3;
|
background-color: @bF;
|
||||||
}
|
}
|
||||||
|
|
||||||
&@{status-disabled} {
|
&@{status-disabled} {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: @stroke-1;
|
background-color: @bA;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: @stroke-1;
|
background-color: @bA;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -182,73 +195,106 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@{button-toggle-off} {
|
@{button-toggle-off} {
|
||||||
border-color: @stroke-1;
|
border-color: @bA;
|
||||||
color: @stroke-1;
|
color: @bA;
|
||||||
background-color: @fill-1;
|
background-color: @b0;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: @stroke-2;
|
border-color: @bC;
|
||||||
color: @stroke-2;
|
color: @bC;
|
||||||
background-color: @fill-2;
|
background-color: @b1;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
border-color: @stroke-3;
|
border-color: @bF;
|
||||||
color: @stroke-3;
|
color: @bF;
|
||||||
background-color: @fill-3;
|
background-color: @b2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&@{status-disabled} {
|
&@{status-disabled} {
|
||||||
border-style: dashed;
|
border-style: dashed;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: @stroke-1;
|
border-color: @bA;
|
||||||
color: @stroke-1;
|
color: @bA;
|
||||||
background-color: @fill-1;
|
background-color: @b0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
border-color: @stroke-1;
|
border-color: @bA;
|
||||||
color: @stroke-1;
|
color: @bA;
|
||||||
background-color: @fill-1;
|
background-color: @b0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@{button-toggle-on} {
|
@{button-toggle-on} {
|
||||||
border-color: @stroke-3;
|
border-color: @bF;
|
||||||
color: @stroke-3;
|
color: @bF;
|
||||||
background-color: @fill-3;
|
background-color: @b2;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: @stroke-2;
|
border-color: @bC;
|
||||||
color: @stroke-2;
|
color: @bC;
|
||||||
background-color: @fill-2;
|
background-color: @b1;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
border-color: @stroke-1;
|
border-color: @bA;
|
||||||
color: @stroke-1;
|
color: @bA;
|
||||||
background-color: @fill-1;
|
background-color: @b0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&@{status-disabled} {
|
&@{status-disabled} {
|
||||||
border-style: dashed;
|
border-style: dashed;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: @stroke-3;
|
border-color: @bF;
|
||||||
color: @stroke-3;
|
color: @bF;
|
||||||
background-color: @fill-3;
|
background-color: @b2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
border-color: @stroke-3;
|
border-color: @bF;
|
||||||
color: @stroke-3;
|
color: @bF;
|
||||||
background-color: @fill-3;
|
background-color: @b2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// --- Inputs ---
|
||||||
|
|
||||||
|
@{input-field} {
|
||||||
|
cursor: text;
|
||||||
|
|
||||||
|
border-width: 0 0 2px 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
padding: 4px 6px;
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
border-color: @b3;
|
||||||
|
color: @bA;
|
||||||
|
background-color: @b0;
|
||||||
|
|
||||||
|
&:hover, &:focus {
|
||||||
|
border-color: @b6;
|
||||||
|
color: @bF;
|
||||||
|
background-color: @b1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&@{status-disabled} {
|
||||||
|
border-style: dashed;
|
||||||
|
|
||||||
|
&:hover, &:focus {
|
||||||
|
border-color: @b3;
|
||||||
|
color: @bA;
|
||||||
|
background-color: @b0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// --- Spoilers ---
|
// --- Spoilers ---
|
||||||
|
|
||||||
|
|
@ -283,7 +329,8 @@
|
||||||
|
|
||||||
@{element-title} {
|
@{element-title} {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 500;
|
.bluelib-color(@hex-accent);
|
||||||
|
.font-title();
|
||||||
}
|
}
|
||||||
|
|
||||||
@{element-paragraph} {
|
@{element-paragraph} {
|
||||||
|
|
@ -293,12 +340,7 @@
|
||||||
@{element-separator} {
|
@{element-separator} {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: rgba(
|
border-color: @b1;
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.1
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@{element-list-item} {
|
@{element-list-item} {
|
||||||
|
|
@ -306,7 +348,29 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@{element-anchor} {
|
@{element-anchor} {
|
||||||
|
.bluelib-color(@hex-link);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.bluelib-color(@hex-link-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
.bluelib-color(@hex-link-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
&@{status-disabled} {
|
||||||
|
text-decoration-style: dashed;
|
||||||
|
text-decoration-color: currentColor;
|
||||||
|
text-decoration-width: 1px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.bluelib-color(@hex-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
.bluelib-color(@hex-link);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- Alignment ---
|
// --- Alignment ---
|
||||||
|
|
@ -372,11 +436,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@{style-monospace} {
|
@{style-monospace} {
|
||||||
font-family: "Fira Code", monospace;
|
.font-code();
|
||||||
}
|
}
|
||||||
|
|
||||||
@{style-keyboard} {
|
@{style-keyboard} {
|
||||||
font-family: "Fira Code", monospace;
|
.font-code();
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
border: 2px outset;
|
border: 2px outset;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
@ -385,51 +449,35 @@
|
||||||
// --- Colors ---
|
// --- Colors ---
|
||||||
|
|
||||||
@{color-red} {
|
@{color-red} {
|
||||||
--bluelib-color-r: 200;
|
.bluelib-color(@hex-red)
|
||||||
--bluelib-color-g: 0;
|
|
||||||
--bluelib-color-b: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-orange} {
|
@{color-orange} {
|
||||||
--bluelib-color-r: 200;
|
.bluelib-color(@hex-orange)
|
||||||
--bluelib-color-g: 165;
|
|
||||||
--bluelib-color-b: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-yellow} {
|
@{color-yellow} {
|
||||||
--bluelib-color-r: 200;
|
.bluelib-color(@hex-yellow)
|
||||||
--bluelib-color-g: 200;
|
|
||||||
--bluelib-color-b: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-lime} {
|
@{color-lime} {
|
||||||
--bluelib-color-r: 0;
|
.bluelib-color(@hex-lime)
|
||||||
--bluelib-color-g: 200;
|
|
||||||
--bluelib-color-b: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-cyan} {
|
@{color-cyan} {
|
||||||
--bluelib-color-r: 0;
|
.bluelib-color(@hex-cyan)
|
||||||
--bluelib-color-g: 200;
|
|
||||||
--bluelib-color-b: 200;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-blue} {
|
@{color-blue} {
|
||||||
--bluelib-color-r: 0;
|
.bluelib-color(@hex-blue)
|
||||||
--bluelib-color-g: 0;
|
|
||||||
--bluelib-color-b: 200;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-magenta} {
|
@{color-magenta} {
|
||||||
--bluelib-color-r: 200;
|
.bluelib-color(@hex-magenta)
|
||||||
--bluelib-color-g: 0;
|
|
||||||
--bluelib-color-b: 200;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@{color-gray} {
|
@{color-gray} {
|
||||||
--bluelib-color-r: 128;
|
.bluelib-color(@hex-gray)
|
||||||
--bluelib-color-g: 128;
|
|
||||||
--bluelib-color-b: 128;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
1596
src/targets/paper.module.css
Normal file
1596
src/targets/paper.module.css
Normal file
File diff suppressed because it is too large
Load diff
1
src/targets/paper.module.css.map
Normal file
1
src/targets/paper.module.css.map
Normal file
File diff suppressed because one or more lines are too long
8
src/targets/paper.module.less
Normal file
8
src/targets/paper.module.less
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@import (less) "../utils/mixins.less";
|
||||||
|
|
||||||
|
@import (less) "../fonts/firasans.less";
|
||||||
|
@import (less) "../palettes/paper.less";
|
||||||
|
@import (less) "../colors/minus.less";
|
||||||
|
|
||||||
|
@import (less) "../vars/root.less";
|
||||||
|
@import (less) "../rules/skeleton.less";
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
/* @input-field: ~'.input-field, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]'; */
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Fira Code';
|
font-family: 'Fira Code';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|
@ -134,17 +133,22 @@
|
||||||
}
|
}
|
||||||
.base-skeleton,
|
.base-skeleton,
|
||||||
body {
|
body {
|
||||||
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
|
background-color: #ffffff;
|
||||||
--bluelib-color-r: 24;
|
--bluelib-color-r: 24;
|
||||||
--bluelib-color-g: 24;
|
--bluelib-color-g: 24;
|
||||||
--bluelib-color-b: 24;
|
--bluelib-color-b: 24;
|
||||||
font-family: "Fira Sans", sans-serif;
|
font-family: "Fira Sans", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
.base-skeleton,
|
.base-skeleton,
|
||||||
body,
|
body,
|
||||||
.base-skeleton *,
|
.base-skeleton *,
|
||||||
body * {
|
body * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: rgb(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b));
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
|
/* Disable outline, as we already highlight focused elements; if it's not enough, let me know */
|
||||||
|
outline: none !important;
|
||||||
}
|
}
|
||||||
.base-skeleton .container-main,
|
.base-skeleton .container-main,
|
||||||
body .container-main,
|
body .container-main,
|
||||||
|
|
@ -787,6 +791,72 @@ body .panel-split aside,
|
||||||
body .panel-split .panel-split {
|
body .panel-split .panel-split {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
.base-skeleton form,
|
||||||
|
body form,
|
||||||
|
.base-skeleton .form,
|
||||||
|
body .form {
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
row-gap: 4px;
|
||||||
|
column-gap: 8px;
|
||||||
|
grid-template-columns: minmax(auto, 1fr) 5fr;
|
||||||
|
}
|
||||||
|
.base-skeleton form label,
|
||||||
|
body form label,
|
||||||
|
.base-skeleton .form-label,
|
||||||
|
body .form-label {
|
||||||
|
grid-column: 1;
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
.base-skeleton form input,
|
||||||
|
body form input,
|
||||||
|
.base-skeleton .form-input,
|
||||||
|
body .form-input {
|
||||||
|
grid-column: 2;
|
||||||
|
justify-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.base-skeleton form input:optional::placeholder,
|
||||||
|
body form input:optional::placeholder,
|
||||||
|
.base-skeleton .form-input:optional::placeholder,
|
||||||
|
body .form-input:optional::placeholder {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.base-skeleton form input:invalid:not(:placeholder-shown),
|
||||||
|
body form input:invalid:not(:placeholder-shown),
|
||||||
|
.base-skeleton .form-input:invalid:not(:placeholder-shown),
|
||||||
|
body .form-input:invalid:not(:placeholder-shown) {
|
||||||
|
--bluelib-color-r: 200;
|
||||||
|
--bluelib-color-g: 0;
|
||||||
|
--bluelib-color-b: 0;
|
||||||
|
}
|
||||||
|
.base-skeleton form input[type="submit"],
|
||||||
|
body form input[type="submit"],
|
||||||
|
.base-skeleton form button,
|
||||||
|
body form button,
|
||||||
|
.base-skeleton .form-submit,
|
||||||
|
body .form-submit {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.base-skeleton .form-buttons,
|
||||||
|
body .form-buttons {
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-column-end: 3;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.base-skeleton .form-buttons:first-child,
|
||||||
|
body .form-buttons:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.base-skeleton .form-buttons:last-child,
|
||||||
|
body .form-buttons:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
.base-skeleton .button,
|
.base-skeleton .button,
|
||||||
body .button,
|
body .button,
|
||||||
.base-skeleton button,
|
.base-skeleton button,
|
||||||
|
|
@ -798,7 +868,7 @@ body input[type="submit"] {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-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), 1);
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: #ffffff;
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
|
@ -811,7 +881,7 @@ body .button:hover,
|
||||||
body button:hover,
|
body button:hover,
|
||||||
.base-skeleton input[type="submit"]:hover,
|
.base-skeleton input[type="submit"]:hover,
|
||||||
body input[type="submit"]:hover {
|
body input[type="submit"]:hover {
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) - 25), calc(var(--bluelib-color-g) - 25), calc(var(--bluelib-color-b) - 25), 1);
|
background-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
||||||
}
|
}
|
||||||
.base-skeleton .button:active,
|
.base-skeleton .button:active,
|
||||||
body .button:active,
|
body .button:active,
|
||||||
|
|
@ -819,7 +889,7 @@ body .button:active,
|
||||||
body button:active,
|
body button:active,
|
||||||
.base-skeleton input[type="submit"]:active,
|
.base-skeleton input[type="submit"]:active,
|
||||||
body input[type="submit"]:active {
|
body input[type="submit"]:active {
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
background-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||||
}
|
}
|
||||||
.base-skeleton .button[disabled]:hover,
|
.base-skeleton .button[disabled]:hover,
|
||||||
body .button[disabled]:hover,
|
body .button[disabled]:hover,
|
||||||
|
|
@ -869,19 +939,19 @@ body .button-toggle .status-disabled {
|
||||||
body .button-toggle-off {
|
body .button-toggle-off {
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
background-color: transparent;
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
}
|
}
|
||||||
.base-skeleton .button-toggle-off:hover,
|
.base-skeleton .button-toggle-off:hover,
|
||||||
body .button-toggle-off:hover {
|
body .button-toggle-off:hover {
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 25), calc(var(--bluelib-color-g) - 25), calc(var(--bluelib-color-b) - 25), 1);
|
border-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 25), calc(var(--bluelib-color-g) - 25), calc(var(--bluelib-color-b) - 25), 1);
|
color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||||
}
|
}
|
||||||
.base-skeleton .button-toggle-off:active,
|
.base-skeleton .button-toggle-off:active,
|
||||||
body .button-toggle-off:active {
|
body .button-toggle-off:active {
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
border-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
||||||
}
|
}
|
||||||
.base-skeleton .button-toggle-off[disabled],
|
.base-skeleton .button-toggle-off[disabled],
|
||||||
body .button-toggle-off[disabled],
|
body .button-toggle-off[disabled],
|
||||||
|
|
@ -895,7 +965,7 @@ body .button-toggle-off[disabled]:hover,
|
||||||
body .button-toggle-off .status-disabled:hover {
|
body .button-toggle-off .status-disabled:hover {
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
background-color: transparent;
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
}
|
}
|
||||||
.base-skeleton .button-toggle-off[disabled]:active,
|
.base-skeleton .button-toggle-off[disabled]:active,
|
||||||
body .button-toggle-off[disabled]:active,
|
body .button-toggle-off[disabled]:active,
|
||||||
|
|
@ -903,25 +973,25 @@ body .button-toggle-off[disabled]:active,
|
||||||
body .button-toggle-off .status-disabled:active {
|
body .button-toggle-off .status-disabled:active {
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
background-color: transparent;
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
}
|
}
|
||||||
.base-skeleton .button-toggle-on,
|
.base-skeleton .button-toggle-on,
|
||||||
body .button-toggle-on {
|
body .button-toggle-on {
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
border-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
||||||
}
|
}
|
||||||
.base-skeleton .button-toggle-on:hover,
|
.base-skeleton .button-toggle-on:hover,
|
||||||
body .button-toggle-on:hover {
|
body .button-toggle-on:hover {
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 25), calc(var(--bluelib-color-g) - 25), calc(var(--bluelib-color-b) - 25), 1);
|
border-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 25), calc(var(--bluelib-color-g) - 25), calc(var(--bluelib-color-b) - 25), 1);
|
color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||||
}
|
}
|
||||||
.base-skeleton .button-toggle-on:active,
|
.base-skeleton .button-toggle-on:active,
|
||||||
body .button-toggle-on:active {
|
body .button-toggle-on:active {
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
background-color: transparent;
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
}
|
}
|
||||||
.base-skeleton .button-toggle-on[disabled],
|
.base-skeleton .button-toggle-on[disabled],
|
||||||
body .button-toggle-on[disabled],
|
body .button-toggle-on[disabled],
|
||||||
|
|
@ -933,17 +1003,326 @@ body .button-toggle-on .status-disabled {
|
||||||
body .button-toggle-on[disabled]:hover,
|
body .button-toggle-on[disabled]:hover,
|
||||||
.base-skeleton .button-toggle-on .status-disabled:hover,
|
.base-skeleton .button-toggle-on .status-disabled:hover,
|
||||||
body .button-toggle-on .status-disabled:hover {
|
body .button-toggle-on .status-disabled:hover {
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
border-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
||||||
}
|
}
|
||||||
.base-skeleton .button-toggle-on[disabled]:active,
|
.base-skeleton .button-toggle-on[disabled]:active,
|
||||||
body .button-toggle-on[disabled]:active,
|
body .button-toggle-on[disabled]:active,
|
||||||
.base-skeleton .button-toggle-on .status-disabled:active,
|
.base-skeleton .button-toggle-on .status-disabled:active,
|
||||||
body .button-toggle-on .status-disabled:active {
|
body .button-toggle-on .status-disabled:active {
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
border-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
||||||
|
}
|
||||||
|
.base-skeleton .input-field,
|
||||||
|
body .input-field,
|
||||||
|
.base-skeleton input[type="color"],
|
||||||
|
body input[type="color"],
|
||||||
|
.base-skeleton input[type="date"],
|
||||||
|
body input[type="date"],
|
||||||
|
.base-skeleton input[type="datetime-local"],
|
||||||
|
body input[type="datetime-local"],
|
||||||
|
.base-skeleton input[type="email"],
|
||||||
|
body input[type="email"],
|
||||||
|
.base-skeleton input[type="file"],
|
||||||
|
body input[type="file"],
|
||||||
|
.base-skeleton input[type="image"],
|
||||||
|
body input[type="image"],
|
||||||
|
.base-skeleton input[type="month"],
|
||||||
|
body input[type="month"],
|
||||||
|
.base-skeleton input[type="number"],
|
||||||
|
body input[type="number"],
|
||||||
|
.base-skeleton input[type="password"],
|
||||||
|
body input[type="password"],
|
||||||
|
.base-skeleton input[type="search"],
|
||||||
|
body input[type="search"],
|
||||||
|
.base-skeleton input[type="tel"],
|
||||||
|
body input[type="tel"],
|
||||||
|
.base-skeleton input[type="text"],
|
||||||
|
body input[type="text"],
|
||||||
|
.base-skeleton input[type="time"],
|
||||||
|
body input[type="time"],
|
||||||
|
.base-skeleton input[type="url"],
|
||||||
|
body input[type="url"],
|
||||||
|
.base-skeleton input[type="week"],
|
||||||
|
body input[type="week"] {
|
||||||
|
cursor: text;
|
||||||
|
border-width: 0 0 2px 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
padding: 4px 6px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
.base-skeleton .input-field:hover,
|
||||||
|
body .input-field:hover,
|
||||||
|
.base-skeleton input[type="color"]:hover,
|
||||||
|
body input[type="color"]:hover,
|
||||||
|
.base-skeleton input[type="date"]:hover,
|
||||||
|
body input[type="date"]:hover,
|
||||||
|
.base-skeleton input[type="datetime-local"]:hover,
|
||||||
|
body input[type="datetime-local"]:hover,
|
||||||
|
.base-skeleton input[type="email"]:hover,
|
||||||
|
body input[type="email"]:hover,
|
||||||
|
.base-skeleton input[type="file"]:hover,
|
||||||
|
body input[type="file"]:hover,
|
||||||
|
.base-skeleton input[type="image"]:hover,
|
||||||
|
body input[type="image"]:hover,
|
||||||
|
.base-skeleton input[type="month"]:hover,
|
||||||
|
body input[type="month"]:hover,
|
||||||
|
.base-skeleton input[type="number"]:hover,
|
||||||
|
body input[type="number"]:hover,
|
||||||
|
.base-skeleton input[type="password"]:hover,
|
||||||
|
body input[type="password"]:hover,
|
||||||
|
.base-skeleton input[type="search"]:hover,
|
||||||
|
body input[type="search"]:hover,
|
||||||
|
.base-skeleton input[type="tel"]:hover,
|
||||||
|
body input[type="tel"]:hover,
|
||||||
|
.base-skeleton input[type="text"]:hover,
|
||||||
|
body input[type="text"]:hover,
|
||||||
|
.base-skeleton input[type="time"]:hover,
|
||||||
|
body input[type="time"]:hover,
|
||||||
|
.base-skeleton input[type="url"]:hover,
|
||||||
|
body input[type="url"]:hover,
|
||||||
|
.base-skeleton input[type="week"]:hover,
|
||||||
|
body input[type="week"]:hover,
|
||||||
|
.base-skeleton .input-field:focus,
|
||||||
|
body .input-field:focus,
|
||||||
|
.base-skeleton input[type="color"]:focus,
|
||||||
|
body input[type="color"]:focus,
|
||||||
|
.base-skeleton input[type="date"]:focus,
|
||||||
|
body input[type="date"]:focus,
|
||||||
|
.base-skeleton input[type="datetime-local"]:focus,
|
||||||
|
body input[type="datetime-local"]:focus,
|
||||||
|
.base-skeleton input[type="email"]:focus,
|
||||||
|
body input[type="email"]:focus,
|
||||||
|
.base-skeleton input[type="file"]:focus,
|
||||||
|
body input[type="file"]:focus,
|
||||||
|
.base-skeleton input[type="image"]:focus,
|
||||||
|
body input[type="image"]:focus,
|
||||||
|
.base-skeleton input[type="month"]:focus,
|
||||||
|
body input[type="month"]:focus,
|
||||||
|
.base-skeleton input[type="number"]:focus,
|
||||||
|
body input[type="number"]:focus,
|
||||||
|
.base-skeleton input[type="password"]:focus,
|
||||||
|
body input[type="password"]:focus,
|
||||||
|
.base-skeleton input[type="search"]:focus,
|
||||||
|
body input[type="search"]:focus,
|
||||||
|
.base-skeleton input[type="tel"]:focus,
|
||||||
|
body input[type="tel"]:focus,
|
||||||
|
.base-skeleton input[type="text"]:focus,
|
||||||
|
body input[type="text"]:focus,
|
||||||
|
.base-skeleton input[type="time"]:focus,
|
||||||
|
body input[type="time"]:focus,
|
||||||
|
.base-skeleton input[type="url"]:focus,
|
||||||
|
body input[type="url"]:focus,
|
||||||
|
.base-skeleton input[type="week"]:focus,
|
||||||
|
body input[type="week"]:focus {
|
||||||
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||||
|
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||||
|
}
|
||||||
|
.base-skeleton .input-field[disabled],
|
||||||
|
body .input-field[disabled],
|
||||||
|
.base-skeleton input[type="color"][disabled],
|
||||||
|
body input[type="color"][disabled],
|
||||||
|
.base-skeleton input[type="date"][disabled],
|
||||||
|
body input[type="date"][disabled],
|
||||||
|
.base-skeleton input[type="datetime-local"][disabled],
|
||||||
|
body input[type="datetime-local"][disabled],
|
||||||
|
.base-skeleton input[type="email"][disabled],
|
||||||
|
body input[type="email"][disabled],
|
||||||
|
.base-skeleton input[type="file"][disabled],
|
||||||
|
body input[type="file"][disabled],
|
||||||
|
.base-skeleton input[type="image"][disabled],
|
||||||
|
body input[type="image"][disabled],
|
||||||
|
.base-skeleton input[type="month"][disabled],
|
||||||
|
body input[type="month"][disabled],
|
||||||
|
.base-skeleton input[type="number"][disabled],
|
||||||
|
body input[type="number"][disabled],
|
||||||
|
.base-skeleton input[type="password"][disabled],
|
||||||
|
body input[type="password"][disabled],
|
||||||
|
.base-skeleton input[type="search"][disabled],
|
||||||
|
body input[type="search"][disabled],
|
||||||
|
.base-skeleton input[type="tel"][disabled],
|
||||||
|
body input[type="tel"][disabled],
|
||||||
|
.base-skeleton input[type="text"][disabled],
|
||||||
|
body input[type="text"][disabled],
|
||||||
|
.base-skeleton input[type="time"][disabled],
|
||||||
|
body input[type="time"][disabled],
|
||||||
|
.base-skeleton input[type="url"][disabled],
|
||||||
|
body input[type="url"][disabled],
|
||||||
|
.base-skeleton input[type="week"][disabled],
|
||||||
|
body input[type="week"][disabled],
|
||||||
|
.base-skeleton .input-field .status-disabled,
|
||||||
|
body .input-field .status-disabled,
|
||||||
|
.base-skeleton input[type="color"] .status-disabled,
|
||||||
|
body input[type="color"] .status-disabled,
|
||||||
|
.base-skeleton input[type="date"] .status-disabled,
|
||||||
|
body input[type="date"] .status-disabled,
|
||||||
|
.base-skeleton input[type="datetime-local"] .status-disabled,
|
||||||
|
body input[type="datetime-local"] .status-disabled,
|
||||||
|
.base-skeleton input[type="email"] .status-disabled,
|
||||||
|
body input[type="email"] .status-disabled,
|
||||||
|
.base-skeleton input[type="file"] .status-disabled,
|
||||||
|
body input[type="file"] .status-disabled,
|
||||||
|
.base-skeleton input[type="image"] .status-disabled,
|
||||||
|
body input[type="image"] .status-disabled,
|
||||||
|
.base-skeleton input[type="month"] .status-disabled,
|
||||||
|
body input[type="month"] .status-disabled,
|
||||||
|
.base-skeleton input[type="number"] .status-disabled,
|
||||||
|
body input[type="number"] .status-disabled,
|
||||||
|
.base-skeleton input[type="password"] .status-disabled,
|
||||||
|
body input[type="password"] .status-disabled,
|
||||||
|
.base-skeleton input[type="search"] .status-disabled,
|
||||||
|
body input[type="search"] .status-disabled,
|
||||||
|
.base-skeleton input[type="tel"] .status-disabled,
|
||||||
|
body input[type="tel"] .status-disabled,
|
||||||
|
.base-skeleton input[type="text"] .status-disabled,
|
||||||
|
body input[type="text"] .status-disabled,
|
||||||
|
.base-skeleton input[type="time"] .status-disabled,
|
||||||
|
body input[type="time"] .status-disabled,
|
||||||
|
.base-skeleton input[type="url"] .status-disabled,
|
||||||
|
body input[type="url"] .status-disabled,
|
||||||
|
.base-skeleton input[type="week"] .status-disabled,
|
||||||
|
body input[type="week"] .status-disabled {
|
||||||
|
border-style: dashed;
|
||||||
|
}
|
||||||
|
.base-skeleton .input-field[disabled]:hover,
|
||||||
|
body .input-field[disabled]:hover,
|
||||||
|
.base-skeleton input[type="color"][disabled]:hover,
|
||||||
|
body input[type="color"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="date"][disabled]:hover,
|
||||||
|
body input[type="date"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="datetime-local"][disabled]:hover,
|
||||||
|
body input[type="datetime-local"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="email"][disabled]:hover,
|
||||||
|
body input[type="email"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="file"][disabled]:hover,
|
||||||
|
body input[type="file"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="image"][disabled]:hover,
|
||||||
|
body input[type="image"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="month"][disabled]:hover,
|
||||||
|
body input[type="month"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="number"][disabled]:hover,
|
||||||
|
body input[type="number"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="password"][disabled]:hover,
|
||||||
|
body input[type="password"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="search"][disabled]:hover,
|
||||||
|
body input[type="search"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="tel"][disabled]:hover,
|
||||||
|
body input[type="tel"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="text"][disabled]:hover,
|
||||||
|
body input[type="text"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="time"][disabled]:hover,
|
||||||
|
body input[type="time"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="url"][disabled]:hover,
|
||||||
|
body input[type="url"][disabled]:hover,
|
||||||
|
.base-skeleton input[type="week"][disabled]:hover,
|
||||||
|
body input[type="week"][disabled]:hover,
|
||||||
|
.base-skeleton .input-field .status-disabled:hover,
|
||||||
|
body .input-field .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="color"] .status-disabled:hover,
|
||||||
|
body input[type="color"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="date"] .status-disabled:hover,
|
||||||
|
body input[type="date"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="datetime-local"] .status-disabled:hover,
|
||||||
|
body input[type="datetime-local"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="email"] .status-disabled:hover,
|
||||||
|
body input[type="email"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="file"] .status-disabled:hover,
|
||||||
|
body input[type="file"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="image"] .status-disabled:hover,
|
||||||
|
body input[type="image"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="month"] .status-disabled:hover,
|
||||||
|
body input[type="month"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="number"] .status-disabled:hover,
|
||||||
|
body input[type="number"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="password"] .status-disabled:hover,
|
||||||
|
body input[type="password"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="search"] .status-disabled:hover,
|
||||||
|
body input[type="search"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="tel"] .status-disabled:hover,
|
||||||
|
body input[type="tel"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="text"] .status-disabled:hover,
|
||||||
|
body input[type="text"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="time"] .status-disabled:hover,
|
||||||
|
body input[type="time"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="url"] .status-disabled:hover,
|
||||||
|
body input[type="url"] .status-disabled:hover,
|
||||||
|
.base-skeleton input[type="week"] .status-disabled:hover,
|
||||||
|
body input[type="week"] .status-disabled:hover,
|
||||||
|
.base-skeleton .input-field[disabled]:focus,
|
||||||
|
body .input-field[disabled]:focus,
|
||||||
|
.base-skeleton input[type="color"][disabled]:focus,
|
||||||
|
body input[type="color"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="date"][disabled]:focus,
|
||||||
|
body input[type="date"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="datetime-local"][disabled]:focus,
|
||||||
|
body input[type="datetime-local"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="email"][disabled]:focus,
|
||||||
|
body input[type="email"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="file"][disabled]:focus,
|
||||||
|
body input[type="file"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="image"][disabled]:focus,
|
||||||
|
body input[type="image"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="month"][disabled]:focus,
|
||||||
|
body input[type="month"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="number"][disabled]:focus,
|
||||||
|
body input[type="number"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="password"][disabled]:focus,
|
||||||
|
body input[type="password"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="search"][disabled]:focus,
|
||||||
|
body input[type="search"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="tel"][disabled]:focus,
|
||||||
|
body input[type="tel"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="text"][disabled]:focus,
|
||||||
|
body input[type="text"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="time"][disabled]:focus,
|
||||||
|
body input[type="time"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="url"][disabled]:focus,
|
||||||
|
body input[type="url"][disabled]:focus,
|
||||||
|
.base-skeleton input[type="week"][disabled]:focus,
|
||||||
|
body input[type="week"][disabled]:focus,
|
||||||
|
.base-skeleton .input-field .status-disabled:focus,
|
||||||
|
body .input-field .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="color"] .status-disabled:focus,
|
||||||
|
body input[type="color"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="date"] .status-disabled:focus,
|
||||||
|
body input[type="date"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="datetime-local"] .status-disabled:focus,
|
||||||
|
body input[type="datetime-local"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="email"] .status-disabled:focus,
|
||||||
|
body input[type="email"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="file"] .status-disabled:focus,
|
||||||
|
body input[type="file"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="image"] .status-disabled:focus,
|
||||||
|
body input[type="image"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="month"] .status-disabled:focus,
|
||||||
|
body input[type="month"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="number"] .status-disabled:focus,
|
||||||
|
body input[type="number"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="password"] .status-disabled:focus,
|
||||||
|
body input[type="password"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="search"] .status-disabled:focus,
|
||||||
|
body input[type="search"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="tel"] .status-disabled:focus,
|
||||||
|
body input[type="tel"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="text"] .status-disabled:focus,
|
||||||
|
body input[type="text"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="time"] .status-disabled:focus,
|
||||||
|
body input[type="time"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="url"] .status-disabled:focus,
|
||||||
|
body input[type="url"] .status-disabled:focus,
|
||||||
|
.base-skeleton input[type="week"] .status-disabled:focus,
|
||||||
|
body input[type="week"] .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);
|
||||||
}
|
}
|
||||||
.base-skeleton .spoiler,
|
.base-skeleton .spoiler,
|
||||||
body .spoiler {
|
body .spoiler {
|
||||||
|
|
@ -993,6 +1372,10 @@ body h5,
|
||||||
.base-skeleton h6,
|
.base-skeleton h6,
|
||||||
body h6 {
|
body h6 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
--bluelib-color-r: 24;
|
||||||
|
--bluelib-color-g: 24;
|
||||||
|
--bluelib-color-b: 24;
|
||||||
|
font-family: "Fira Sans", sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.base-skeleton .element-separator,
|
.base-skeleton .element-separator,
|
||||||
|
|
@ -1009,6 +1392,66 @@ body .element-list-item,
|
||||||
body li {
|
body li {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
.base-skeleton .element-anchor,
|
||||||
|
body .element-anchor,
|
||||||
|
.base-skeleton a,
|
||||||
|
body a {
|
||||||
|
--bluelib-color-r: 0;
|
||||||
|
--bluelib-color-g: 147;
|
||||||
|
--bluelib-color-b: 147;
|
||||||
|
}
|
||||||
|
.base-skeleton .element-anchor:hover,
|
||||||
|
body .element-anchor:hover,
|
||||||
|
.base-skeleton a:hover,
|
||||||
|
body a:hover {
|
||||||
|
--bluelib-color-r: 0;
|
||||||
|
--bluelib-color-g: 107;
|
||||||
|
--bluelib-color-b: 107;
|
||||||
|
}
|
||||||
|
.base-skeleton .element-anchor:active,
|
||||||
|
body .element-anchor:active,
|
||||||
|
.base-skeleton a:active,
|
||||||
|
body a:active {
|
||||||
|
--bluelib-color-r: 0;
|
||||||
|
--bluelib-color-g: 65;
|
||||||
|
--bluelib-color-b: 65;
|
||||||
|
}
|
||||||
|
.base-skeleton .element-anchor[disabled],
|
||||||
|
body .element-anchor[disabled],
|
||||||
|
.base-skeleton a[disabled],
|
||||||
|
body a[disabled],
|
||||||
|
.base-skeleton .element-anchor .status-disabled,
|
||||||
|
body .element-anchor .status-disabled,
|
||||||
|
.base-skeleton a .status-disabled,
|
||||||
|
body a .status-disabled {
|
||||||
|
text-decoration-style: dashed;
|
||||||
|
text-decoration-color: currentColor;
|
||||||
|
text-decoration-width: 1px;
|
||||||
|
}
|
||||||
|
.base-skeleton .element-anchor[disabled]:hover,
|
||||||
|
body .element-anchor[disabled]:hover,
|
||||||
|
.base-skeleton a[disabled]:hover,
|
||||||
|
body a[disabled]:hover,
|
||||||
|
.base-skeleton .element-anchor .status-disabled:hover,
|
||||||
|
body .element-anchor .status-disabled:hover,
|
||||||
|
.base-skeleton a .status-disabled:hover,
|
||||||
|
body a .status-disabled:hover {
|
||||||
|
--bluelib-color-r: 0;
|
||||||
|
--bluelib-color-g: 147;
|
||||||
|
--bluelib-color-b: 147;
|
||||||
|
}
|
||||||
|
.base-skeleton .element-anchor[disabled]:active,
|
||||||
|
body .element-anchor[disabled]:active,
|
||||||
|
.base-skeleton a[disabled]:active,
|
||||||
|
body a[disabled]:active,
|
||||||
|
.base-skeleton .element-anchor .status-disabled:active,
|
||||||
|
body .element-anchor .status-disabled:active,
|
||||||
|
.base-skeleton a .status-disabled:active,
|
||||||
|
body a .status-disabled:active {
|
||||||
|
--bluelib-color-r: 0;
|
||||||
|
--bluelib-color-g: 147;
|
||||||
|
--bluelib-color-b: 147;
|
||||||
|
}
|
||||||
.base-skeleton .align-left,
|
.base-skeleton .align-left,
|
||||||
body .align-left {
|
body .align-left {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
@ -1090,12 +1533,14 @@ body .style-monospace,
|
||||||
.base-skeleton code,
|
.base-skeleton code,
|
||||||
body code {
|
body code {
|
||||||
font-family: "Fira Code", monospace;
|
font-family: "Fira Code", monospace;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
.base-skeleton .style-keyboard,
|
.base-skeleton .style-keyboard,
|
||||||
body .style-keyboard,
|
body .style-keyboard,
|
||||||
.base-skeleton kbd,
|
.base-skeleton kbd,
|
||||||
body kbd {
|
body kbd {
|
||||||
font-family: "Fira Code", monospace;
|
font-family: "Fira Code", monospace;
|
||||||
|
font-weight: 400;
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
border: 2px outset;
|
border: 2px outset;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
@ -1148,4 +1593,4 @@ body .color-gray {
|
||||||
--bluelib-color-g: 128;
|
--bluelib-color-g: 128;
|
||||||
--bluelib-color-b: 128;
|
--bluelib-color-b: 128;
|
||||||
}
|
}
|
||||||
/*# sourceMappingURL=skeleton.root.css.map */
|
/*# sourceMappingURL=paper.root.css.map */
|
||||||
1
src/targets/paper.root.css.map
Normal file
1
src/targets/paper.root.css.map
Normal file
File diff suppressed because one or more lines are too long
8
src/targets/paper.root.less
Normal file
8
src/targets/paper.root.less
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@import (less) "../utils/mixins.less";
|
||||||
|
|
||||||
|
@import (less) "../fonts/firasans.less";
|
||||||
|
@import (less) "../palettes/paper.less";
|
||||||
|
@import (less) "../colors/minus.less";
|
||||||
|
|
||||||
|
@import (less) "../vars/root.less";
|
||||||
|
@import (less) "../rules/skeleton.less";
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
/* @input-field: ~'.input-field'; */
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Fira Code';
|
font-family: 'Fira Code';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|
@ -133,15 +132,20 @@
|
||||||
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 {
|
||||||
--bluelib-color-r: 24;
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
--bluelib-color-g: 24;
|
background-color: #0d193b;
|
||||||
--bluelib-color-b: 24;
|
--bluelib-color-r: 160;
|
||||||
|
--bluelib-color-g: 204;
|
||||||
|
--bluelib-color-b: 255;
|
||||||
font-family: "Fira Sans", sans-serif;
|
font-family: "Fira Sans", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
.bluelib,
|
.bluelib,
|
||||||
.bluelib * {
|
.bluelib * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: rgb(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b));
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
|
/* Disable outline, as we already highlight focused elements; if it's not enough, let me know */
|
||||||
|
outline: none !important;
|
||||||
}
|
}
|
||||||
.bluelib .container-main {
|
.bluelib .container-main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
|
@ -194,13 +198,56 @@
|
||||||
.bluelib .panel-split > .panel {
|
.bluelib .panel-split > .panel {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
.bluelib .form {
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
row-gap: 4px;
|
||||||
|
column-gap: 8px;
|
||||||
|
grid-template-columns: minmax(auto, 1fr) 5fr;
|
||||||
|
}
|
||||||
|
.bluelib .form-label {
|
||||||
|
grid-column: 1;
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
.bluelib .form-input {
|
||||||
|
grid-column: 2;
|
||||||
|
justify-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.bluelib .form-input:optional::placeholder {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.bluelib .form-input:invalid:not(:placeholder-shown) {
|
||||||
|
--bluelib-color-r: 255;
|
||||||
|
--bluelib-color-g: 125;
|
||||||
|
--bluelib-color-b: 125;
|
||||||
|
}
|
||||||
|
.bluelib .form-submit {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.bluelib .form-buttons {
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-column-end: 3;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.bluelib .form-buttons:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.bluelib .form-buttons:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
.bluelib .button {
|
.bluelib .button {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-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), 1);
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: #000000;
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
|
@ -208,10 +255,10 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.bluelib .button:hover {
|
.bluelib .button:hover {
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) - 25), calc(var(--bluelib-color-g) - 25), calc(var(--bluelib-color-b) - 25), 1);
|
background-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
||||||
}
|
}
|
||||||
.bluelib .button:active {
|
.bluelib .button:active {
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
background-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||||
}
|
}
|
||||||
.bluelib .button.status-disabled:hover {
|
.bluelib .button.status-disabled:hover {
|
||||||
background-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), 1);
|
||||||
|
|
@ -233,17 +280,17 @@
|
||||||
.bluelib .button-toggle-off {
|
.bluelib .button-toggle-off {
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
background-color: transparent;
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
}
|
}
|
||||||
.bluelib .button-toggle-off:hover {
|
.bluelib .button-toggle-off:hover {
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 25), calc(var(--bluelib-color-g) - 25), calc(var(--bluelib-color-b) - 25), 1);
|
border-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 25), calc(var(--bluelib-color-g) - 25), calc(var(--bluelib-color-b) - 25), 1);
|
color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||||
}
|
}
|
||||||
.bluelib .button-toggle-off:active {
|
.bluelib .button-toggle-off:active {
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
border-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
||||||
}
|
}
|
||||||
.bluelib .button-toggle-off.status-disabled {
|
.bluelib .button-toggle-off.status-disabled {
|
||||||
border-style: dashed;
|
border-style: dashed;
|
||||||
|
|
@ -251,40 +298,67 @@
|
||||||
.bluelib .button-toggle-off.status-disabled:hover {
|
.bluelib .button-toggle-off.status-disabled:hover {
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
background-color: transparent;
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
}
|
}
|
||||||
.bluelib .button-toggle-off.status-disabled:active {
|
.bluelib .button-toggle-off.status-disabled:active {
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
background-color: transparent;
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
}
|
}
|
||||||
.bluelib .button-toggle-on {
|
.bluelib .button-toggle-on {
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
border-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
||||||
}
|
}
|
||||||
.bluelib .button-toggle-on:hover {
|
.bluelib .button-toggle-on:hover {
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 25), calc(var(--bluelib-color-g) - 25), calc(var(--bluelib-color-b) - 25), 1);
|
border-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 25), calc(var(--bluelib-color-g) - 25), calc(var(--bluelib-color-b) - 25), 1);
|
color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||||
}
|
}
|
||||||
.bluelib .button-toggle-on:active {
|
.bluelib .button-toggle-on:active {
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
background-color: transparent;
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
}
|
}
|
||||||
.bluelib .button-toggle-on.status-disabled {
|
.bluelib .button-toggle-on.status-disabled {
|
||||||
border-style: dashed;
|
border-style: dashed;
|
||||||
}
|
}
|
||||||
.bluelib .button-toggle-on.status-disabled:hover {
|
.bluelib .button-toggle-on.status-disabled:hover {
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
border-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
||||||
}
|
}
|
||||||
.bluelib .button-toggle-on.status-disabled:active {
|
.bluelib .button-toggle-on.status-disabled:active {
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
border-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 55), calc(var(--bluelib-color-g) - 55), calc(var(--bluelib-color-b) - 55), 1);
|
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
||||||
|
}
|
||||||
|
.bluelib .input-field {
|
||||||
|
cursor: text;
|
||||||
|
border-width: 0 0 2px 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
padding: 4px 6px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
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-field:hover,
|
||||||
|
.bluelib .input-field:focus {
|
||||||
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||||
|
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||||
|
}
|
||||||
|
.bluelib .input-field.status-disabled {
|
||||||
|
border-style: dashed;
|
||||||
|
}
|
||||||
|
.bluelib .input-field.status-disabled:hover,
|
||||||
|
.bluelib .input-field.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 .spoiler {
|
.bluelib .spoiler {
|
||||||
filter: blur(5px);
|
filter: blur(5px);
|
||||||
|
|
@ -307,6 +381,10 @@
|
||||||
}
|
}
|
||||||
.bluelib .element-title {
|
.bluelib .element-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
--bluelib-color-r: 255;
|
||||||
|
--bluelib-color-g: 255;
|
||||||
|
--bluelib-color-b: 255;
|
||||||
|
font-family: "Fira Sans", sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.bluelib .element-separator {
|
.bluelib .element-separator {
|
||||||
|
|
@ -317,6 +395,36 @@
|
||||||
.bluelib .element-list-item {
|
.bluelib .element-list-item {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
.bluelib .element-anchor {
|
||||||
|
--bluelib-color-r: 0;
|
||||||
|
--bluelib-color-g: 202;
|
||||||
|
--bluelib-color-b: 202;
|
||||||
|
}
|
||||||
|
.bluelib .element-anchor:hover {
|
||||||
|
--bluelib-color-r: 0;
|
||||||
|
--bluelib-color-g: 255;
|
||||||
|
--bluelib-color-b: 255;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
text-decoration-color: currentColor;
|
||||||
|
text-decoration-width: 1px;
|
||||||
|
}
|
||||||
|
.bluelib .element-anchor.status-disabled:hover {
|
||||||
|
--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 {
|
.bluelib .align-left {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
@ -361,51 +469,53 @@
|
||||||
}
|
}
|
||||||
.bluelib .style-monospace {
|
.bluelib .style-monospace {
|
||||||
font-family: "Fira Code", monospace;
|
font-family: "Fira Code", monospace;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
.bluelib .style-keyboard {
|
.bluelib .style-keyboard {
|
||||||
font-family: "Fira Code", monospace;
|
font-family: "Fira Code", monospace;
|
||||||
|
font-weight: 400;
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
border: 2px outset;
|
border: 2px outset;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
.bluelib .color-red {
|
.bluelib .color-red {
|
||||||
--bluelib-color-r: 200;
|
--bluelib-color-r: 255;
|
||||||
--bluelib-color-g: 0;
|
--bluelib-color-g: 125;
|
||||||
--bluelib-color-b: 0;
|
--bluelib-color-b: 125;
|
||||||
}
|
}
|
||||||
.bluelib .color-orange {
|
.bluelib .color-orange {
|
||||||
--bluelib-color-r: 200;
|
--bluelib-color-r: 255;
|
||||||
--bluelib-color-g: 165;
|
--bluelib-color-g: 187;
|
||||||
--bluelib-color-b: 0;
|
--bluelib-color-b: 125;
|
||||||
}
|
}
|
||||||
.bluelib .color-yellow {
|
.bluelib .color-yellow {
|
||||||
--bluelib-color-r: 200;
|
--bluelib-color-r: 255;
|
||||||
--bluelib-color-g: 200;
|
--bluelib-color-g: 255;
|
||||||
--bluelib-color-b: 0;
|
--bluelib-color-b: 125;
|
||||||
}
|
}
|
||||||
.bluelib .color-lime {
|
.bluelib .color-lime {
|
||||||
--bluelib-color-r: 0;
|
--bluelib-color-r: 125;
|
||||||
--bluelib-color-g: 200;
|
--bluelib-color-g: 255;
|
||||||
--bluelib-color-b: 0;
|
--bluelib-color-b: 125;
|
||||||
}
|
}
|
||||||
.bluelib .color-cyan {
|
.bluelib .color-cyan {
|
||||||
--bluelib-color-r: 0;
|
--bluelib-color-r: 125;
|
||||||
--bluelib-color-g: 200;
|
--bluelib-color-g: 255;
|
||||||
--bluelib-color-b: 200;
|
--bluelib-color-b: 255;
|
||||||
}
|
}
|
||||||
.bluelib .color-blue {
|
.bluelib .color-blue {
|
||||||
--bluelib-color-r: 0;
|
--bluelib-color-r: 125;
|
||||||
--bluelib-color-g: 0;
|
--bluelib-color-g: 125;
|
||||||
--bluelib-color-b: 200;
|
--bluelib-color-b: 255;
|
||||||
}
|
}
|
||||||
.bluelib .color-magenta {
|
.bluelib .color-magenta {
|
||||||
--bluelib-color-r: 200;
|
--bluelib-color-r: 255;
|
||||||
--bluelib-color-g: 0;
|
--bluelib-color-g: 125;
|
||||||
--bluelib-color-b: 200;
|
--bluelib-color-b: 255;
|
||||||
}
|
}
|
||||||
.bluelib .color-gray {
|
.bluelib .color-gray {
|
||||||
--bluelib-color-r: 128;
|
--bluelib-color-r: 187;
|
||||||
--bluelib-color-g: 128;
|
--bluelib-color-g: 187;
|
||||||
--bluelib-color-b: 128;
|
--bluelib-color-b: 187;
|
||||||
}
|
}
|
||||||
/*# sourceMappingURL=skeleton.module.css.map */
|
/*# sourceMappingURL=royalblue.module.css.map */
|
||||||
1
src/targets/royalblue.module.css.map
Normal file
1
src/targets/royalblue.module.css.map
Normal file
File diff suppressed because one or more lines are too long
8
src/targets/royalblue.module.less
Normal file
8
src/targets/royalblue.module.less
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@import (less) "../utils/mixins.less";
|
||||||
|
|
||||||
|
@import (less) "../fonts/firasans.less";
|
||||||
|
@import (less) "../palettes/royalblue.less";
|
||||||
|
@import (less) "../colors/plus.less";
|
||||||
|
|
||||||
|
@import (less) "../vars/module.less";
|
||||||
|
@import (less) "../rules/skeleton.less";
|
||||||
1596
src/targets/royalblue.root.css
Normal file
1596
src/targets/royalblue.root.css
Normal file
File diff suppressed because it is too large
Load diff
1
src/targets/royalblue.root.css.map
Normal file
1
src/targets/royalblue.root.css.map
Normal file
File diff suppressed because one or more lines are too long
8
src/targets/royalblue.root.less
Normal file
8
src/targets/royalblue.root.less
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@import (less) "../utils/mixins.less";
|
||||||
|
|
||||||
|
@import (less) "../fonts/firasans.less";
|
||||||
|
@import (less) "../palettes/royalblue.less";
|
||||||
|
@import (less) "../colors/plus.less";
|
||||||
|
|
||||||
|
@import (less) "../vars/root.less";
|
||||||
|
@import (less) "../rules/skeleton.less";
|
||||||
|
|
@ -1,136 +0,0 @@
|
||||||
/* @input-field: ~'.input-field'; */
|
|
||||||
.bluelib {
|
|
||||||
--bluelib-color-r: 160;
|
|
||||||
--bluelib-color-g: 204;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
background-color: #0d193b;
|
|
||||||
color: rgb(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b));
|
|
||||||
}
|
|
||||||
.bluelib * {
|
|
||||||
color: rgb(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b));
|
|
||||||
}
|
|
||||||
.bluelib .button {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle {
|
|
||||||
padding: 4px 14px;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off:hover {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 25), calc(var(--bluelib-color-g) + 25), calc(var(--bluelib-color-b) + 25), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 25), calc(var(--bluelib-color-g) + 25), calc(var(--bluelib-color-b) + 25), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off:active {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off.status-disabled:hover {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off.status-disabled:active {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on:hover {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 25), calc(var(--bluelib-color-g) + 25), calc(var(--bluelib-color-b) + 25), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 25), calc(var(--bluelib-color-g) + 25), calc(var(--bluelib-color-b) + 25), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on:active {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on.status-disabled:hover {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on.status-disabled:active {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
}
|
|
||||||
.bluelib .element-title {
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 202;
|
|
||||||
--bluelib-color-b: 202;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor:hover {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.bluelib .element-anchor:active {
|
|
||||||
--bluelib-color-r: 160;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.bluelib .style-bold {
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.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=rygblue.module.css.map */
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"sources":["/mnt/tera/ext4/code/bluelib/src/rules/rygblue.less"],"names":[],"mappings":"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","file":"rygblue.module.css"}
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
@import "../vars/module.less";
|
|
||||||
@import "../rules/rygblue.less";
|
|
||||||
|
|
@ -1,195 +0,0 @@
|
||||||
/* @input-field: ~'.input-field, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]'; */
|
|
||||||
.base-skeleton,
|
|
||||||
body {
|
|
||||||
--bluelib-color-r: 160;
|
|
||||||
--bluelib-color-g: 204;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
background-color: #0d193b;
|
|
||||||
color: rgb(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b));
|
|
||||||
}
|
|
||||||
.base-skeleton *,
|
|
||||||
body * {
|
|
||||||
color: rgb(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b));
|
|
||||||
}
|
|
||||||
.base-skeleton .button,
|
|
||||||
body .button,
|
|
||||||
.base-skeleton button,
|
|
||||||
body button,
|
|
||||||
.base-skeleton input[type="submit"],
|
|
||||||
body input[type="submit"] {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
.base-skeleton .button-toggle,
|
|
||||||
body .button-toggle {
|
|
||||||
padding: 4px 14px;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
.base-skeleton .button-toggle-off,
|
|
||||||
body .button-toggle-off {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.base-skeleton .button-toggle-off:hover,
|
|
||||||
body .button-toggle-off:hover {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 25), calc(var(--bluelib-color-g) + 25), calc(var(--bluelib-color-b) + 25), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 25), calc(var(--bluelib-color-g) + 25), calc(var(--bluelib-color-b) + 25), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
|
||||||
}
|
|
||||||
.base-skeleton .button-toggle-off:active,
|
|
||||||
body .button-toggle-off:active {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
}
|
|
||||||
.base-skeleton .button-toggle-off[disabled]:hover,
|
|
||||||
body .button-toggle-off[disabled]:hover,
|
|
||||||
.base-skeleton .button-toggle-off .status-disabled:hover,
|
|
||||||
body .button-toggle-off .status-disabled:hover {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.base-skeleton .button-toggle-off[disabled]:active,
|
|
||||||
body .button-toggle-off[disabled]:active,
|
|
||||||
.base-skeleton .button-toggle-off .status-disabled:active,
|
|
||||||
body .button-toggle-off .status-disabled:active {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.base-skeleton .button-toggle-on,
|
|
||||||
body .button-toggle-on {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
}
|
|
||||||
.base-skeleton .button-toggle-on:hover,
|
|
||||||
body .button-toggle-on:hover {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 25), calc(var(--bluelib-color-g) + 25), calc(var(--bluelib-color-b) + 25), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 25), calc(var(--bluelib-color-g) + 25), calc(var(--bluelib-color-b) + 25), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
|
||||||
}
|
|
||||||
.base-skeleton .button-toggle-on:active,
|
|
||||||
body .button-toggle-on:active {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.base-skeleton .button-toggle-on[disabled]:hover,
|
|
||||||
body .button-toggle-on[disabled]:hover,
|
|
||||||
.base-skeleton .button-toggle-on .status-disabled:hover,
|
|
||||||
body .button-toggle-on .status-disabled:hover {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
}
|
|
||||||
.base-skeleton .button-toggle-on[disabled]:active,
|
|
||||||
body .button-toggle-on[disabled]:active,
|
|
||||||
.base-skeleton .button-toggle-on .status-disabled:active,
|
|
||||||
body .button-toggle-on .status-disabled:active {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 55), calc(var(--bluelib-color-g) + 55), calc(var(--bluelib-color-b) + 55), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
|
||||||
}
|
|
||||||
.base-skeleton .element-title,
|
|
||||||
body .element-title,
|
|
||||||
.base-skeleton h1,
|
|
||||||
body h1,
|
|
||||||
.base-skeleton h2,
|
|
||||||
body h2,
|
|
||||||
.base-skeleton h3,
|
|
||||||
body h3,
|
|
||||||
.base-skeleton h4,
|
|
||||||
body h4,
|
|
||||||
.base-skeleton h5,
|
|
||||||
body h5,
|
|
||||||
.base-skeleton h6,
|
|
||||||
body h6 {
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.base-skeleton .element-anchor,
|
|
||||||
body .element-anchor,
|
|
||||||
.base-skeleton a,
|
|
||||||
body a {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 202;
|
|
||||||
--bluelib-color-b: 202;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.base-skeleton .element-anchor:hover,
|
|
||||||
body .element-anchor:hover,
|
|
||||||
.base-skeleton a:hover,
|
|
||||||
body a:hover {
|
|
||||||
--bluelib-color-r: 0;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.base-skeleton .element-anchor:active,
|
|
||||||
body .element-anchor:active,
|
|
||||||
.base-skeleton a:active,
|
|
||||||
body a:active {
|
|
||||||
--bluelib-color-r: 160;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.base-skeleton .style-bold,
|
|
||||||
body .style-bold,
|
|
||||||
.base-skeleton b,
|
|
||||||
body b {
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.base-skeleton .color-red,
|
|
||||||
body .color-red {
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 125;
|
|
||||||
--bluelib-color-b: 125;
|
|
||||||
}
|
|
||||||
.base-skeleton .color-orange,
|
|
||||||
body .color-orange {
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 187;
|
|
||||||
--bluelib-color-b: 125;
|
|
||||||
}
|
|
||||||
.base-skeleton .color-yellow,
|
|
||||||
body .color-yellow {
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 125;
|
|
||||||
}
|
|
||||||
.base-skeleton .color-lime,
|
|
||||||
body .color-lime {
|
|
||||||
--bluelib-color-r: 125;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 125;
|
|
||||||
}
|
|
||||||
.base-skeleton .color-cyan,
|
|
||||||
body .color-cyan {
|
|
||||||
--bluelib-color-r: 125;
|
|
||||||
--bluelib-color-g: 255;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.base-skeleton .color-blue,
|
|
||||||
body .color-blue {
|
|
||||||
--bluelib-color-r: 125;
|
|
||||||
--bluelib-color-g: 125;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.base-skeleton .color-magenta,
|
|
||||||
body .color-magenta {
|
|
||||||
--bluelib-color-r: 255;
|
|
||||||
--bluelib-color-g: 125;
|
|
||||||
--bluelib-color-b: 255;
|
|
||||||
}
|
|
||||||
.base-skeleton .color-gray,
|
|
||||||
body .color-gray {
|
|
||||||
--bluelib-color-r: 187;
|
|
||||||
--bluelib-color-g: 187;
|
|
||||||
--bluelib-color-b: 187;
|
|
||||||
}
|
|
||||||
/*# sourceMappingURL=rygblue.root.css.map */
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"sources":["/mnt/tera/ext4/code/bluelib/src/rules/rygblue.less"],"names":[],"mappings":"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","file":"rygblue.root.css"}
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
@import "../vars/root.less";
|
|
||||||
@import "../rules/rygblue.less";
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
||||||
@import "../vars/module.less";
|
|
||||||
@import "../rules/skeleton.less";
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
||||||
@import "../vars/root.less";
|
|
||||||
@import "../rules/skeleton.less";
|
|
||||||
5
src/utils/mixins.less
Normal file
5
src/utils/mixins.less
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
.bluelib-color(@color) {
|
||||||
|
--bluelib-color-r: red(@color);
|
||||||
|
--bluelib-color-g: green(@color);
|
||||||
|
--bluelib-color-b: blue(@color);
|
||||||
|
}
|
||||||
|
|
@ -9,12 +9,17 @@
|
||||||
@status-disabled: ~".status-disabled";
|
@status-disabled: ~".status-disabled";
|
||||||
@status-hoverable: ~".status-hoverable";
|
@status-hoverable: ~".status-hoverable";
|
||||||
@status-clickable: ~".status-clickable";
|
@status-clickable: ~".status-clickable";
|
||||||
|
@form: ~".form";
|
||||||
|
@form-label: ~".form-label";
|
||||||
|
@form-input: ~".form-input";
|
||||||
|
@form-submit: ~'.form-submit';
|
||||||
|
@form-buttons: ~'.form-buttons';
|
||||||
@button: ~'.button';
|
@button: ~'.button';
|
||||||
@button-fill-width: ~'.button-fill-width';
|
@button-fill-width: ~'.button-fill-width';
|
||||||
@button-toggle: ~'.button-toggle';
|
@button-toggle: ~'.button-toggle';
|
||||||
@button-toggle-off: ~'.button-toggle-off';
|
@button-toggle-off: ~'.button-toggle-off';
|
||||||
@button-toggle-on: ~'.button-toggle-on';
|
@button-toggle-on: ~'.button-toggle-on';
|
||||||
/* @input-field: ~'.input-field'; */
|
@input-field: ~'.input-field';
|
||||||
@spoiler: ~".spoiler";
|
@spoiler: ~".spoiler";
|
||||||
@element-title: ~".element-title";
|
@element-title: ~".element-title";
|
||||||
@element-paragraph: ~".element-paragraph";
|
@element-paragraph: ~".element-paragraph";
|
||||||
|
|
|
||||||
|
|
@ -9,12 +9,17 @@
|
||||||
@status-disabled: ~"[disabled], .status-disabled";
|
@status-disabled: ~"[disabled], .status-disabled";
|
||||||
@status-hoverable: ~"[title], .status-hoverable";
|
@status-hoverable: ~"[title], .status-hoverable";
|
||||||
@status-clickable: ~"[onclick], .status-clickable";
|
@status-clickable: ~"[onclick], .status-clickable";
|
||||||
|
@form: ~"form, .form";
|
||||||
|
@form-label: ~"form label, .form-label";
|
||||||
|
@form-input: ~"form input, .form-input";
|
||||||
|
@form-submit: ~'form input[type="submit"], form button, .form-submit';
|
||||||
|
@form-buttons: ~'.form-buttons';
|
||||||
@button: ~'.button, button, input[type="submit"]';
|
@button: ~'.button, button, input[type="submit"]';
|
||||||
@button-fill-width: ~'.button-fill-width';
|
@button-fill-width: ~'.button-fill-width';
|
||||||
@button-toggle: ~'.button-toggle';
|
@button-toggle: ~'.button-toggle';
|
||||||
@button-toggle-off: ~'.button-toggle-off';
|
@button-toggle-off: ~'.button-toggle-off';
|
||||||
@button-toggle-on: ~'.button-toggle-on';
|
@button-toggle-on: ~'.button-toggle-on';
|
||||||
/* @input-field: ~'.input-field, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]'; */
|
@input-field: ~'.input-field, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]';
|
||||||
@spoiler: ~".spoiler";
|
@spoiler: ~".spoiler";
|
||||||
@element-title: ~".element-title, h1, h2, h3, h4, h5, h6";
|
@element-title: ~".element-title, h1, h2, h3, h4, h5, h6";
|
||||||
@element-paragraph: ~".element-paragraph, p";
|
@element-paragraph: ~".element-paragraph, p";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue