steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 03:24:20 +00:00
Code Activity

💥 Add text inputs

Browse source 
* 🚧 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:
Steffo 2021-07-19 18:21:57 +02:00 committed by GitHub
parent 34cc20cbeb
commit a47f83b536
Signed by: github
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 4173 additions and 937 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.idea/inspectionProfiles/Project_Default.xml
View file

@ -45,5 +45,10 @@
<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="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>
</component>

13
CONTRIBUTING.md
View file

@ -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)!
## Structure
- [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
<!-- Readd the Structure here, maybe. -->
## Compiling

20
index.html
View file

@ -2,8 +2,8 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="src/targets/skeleton.root.css">
<link rel="stylesheet" href="src/targets/rygblue.root.css">
<link rel="stylesheet" href="src/targets/paper.root.css">
<link rel="stylesheet" href="src/targets/royalblue.root.css">
<title>Bluelib 2</title>
</head>
<body class="theme-bluelib">
@ -374,7 +374,7 @@
"not allowed" cursor if hovered.
</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>
<section class="status-disabled">
And panels!
@ -393,9 +393,17 @@
Bluelib allows for the easy creation of forms:
</p>
<form>
<input type="text" placeholder="Text"/>
<input type="password" placeholder="Password"/>
<input type="email" placeholder="Email"/>
<label for="input-text">Text</label>
<input id="input-text" type="text" placeholder="Text"/>
<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>
</section>
</div>

16
src/colors/minus.less Normal file
View 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
View 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
View 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
View 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
View 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
View 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;

369
src/rules/rygblue.less
View file

@ -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
View file

@ -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} {
// --- Globals ---
--bluelib-color-r: 24;
--bluelib-color-g: 24;
--bluelib-color-b: 24;
// --- Root ---
color: @bA;
background-color: @hex-background;
.bluelib-color(@hex-foreground);
.font-text();
&, @{all} {
box-sizing: border-box;
color: rgb(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
);
color: @bA;
/* Disable outline, as we already highlight focused elements; if it's not enough, let me know */
outline: none !important;
}
font-family: "Fira Sans", sans-serif;
// --- Containers ---
@ -26,6 +25,7 @@
max-width: 1280px;
}
// --- Panels ---
// Remember to use BOTH the panel AND the panel-* class when using a panel element!
@ -52,18 +52,8 @@
border-width: 2px;
border-style: solid;
background-color: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.025
);
border-color: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.1
);
background-color: @b0;
border-color: @b1;
}
// 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 ---
@stroke-1: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
1
);
@stroke-2: rgba(
calc(var(--bluelib-color-r) - 25),
calc(var(--bluelib-color-g) - 25),
calc(var(--bluelib-color-b) - 25),
1
);
@stroke-3: rgba(
calc(var(--bluelib-color-r) - 55),
calc(var(--bluelib-color-g) - 55),
calc(var(--bluelib-color-b) - 55),
1
);
@fill-1: transparent;
@fill-2: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.1
);
@fill-3: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.3
);
@{button} {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: @stroke-1;
background-color: @bA;
border: none;
color: white;
color: @hex-outline;
padding: 6px 16px;
border-radius: 4px;
font-family: inherit;
@ -149,20 +162,20 @@
cursor: pointer;
&:hover {
background-color: @stroke-2;
background-color: @bC;
}
&:active {
background-color: @stroke-3;
background-color: @bF;
}
&@{status-disabled} {
&:hover {
background-color: @stroke-1;
background-color: @bA;
}
&:active {
background-color: @stroke-1;
background-color: @bA;
}
}
}
@ -182,73 +195,106 @@
}
@{button-toggle-off} {
border-color: @stroke-1;
color: @stroke-1;
background-color: @fill-1;
border-color: @bA;
color: @bA;
background-color: @b0;
&:hover {
border-color: @stroke-2;
color: @stroke-2;
background-color: @fill-2;
border-color: @bC;
color: @bC;
background-color: @b1;
}
&:active {
border-color: @stroke-3;
color: @stroke-3;
background-color: @fill-3;
border-color: @bF;
color: @bF;
background-color: @b2;
}
&@{status-disabled} {
border-style: dashed;
&:hover {
border-color: @stroke-1;
color: @stroke-1;
background-color: @fill-1;
border-color: @bA;
color: @bA;
background-color: @b0;
}
&:active {
border-color: @stroke-1;
color: @stroke-1;
background-color: @fill-1;
border-color: @bA;
color: @bA;
background-color: @b0;
}
}
}
@{button-toggle-on} {
border-color: @stroke-3;
color: @stroke-3;
background-color: @fill-3;
border-color: @bF;
color: @bF;
background-color: @b2;
&:hover {
border-color: @stroke-2;
color: @stroke-2;
background-color: @fill-2;
border-color: @bC;
color: @bC;
background-color: @b1;
}
&:active {
border-color: @stroke-1;
color: @stroke-1;
background-color: @fill-1;
border-color: @bA;
color: @bA;
background-color: @b0;
}
&@{status-disabled} {
border-style: dashed;
&:hover {
border-color: @stroke-3;
color: @stroke-3;
background-color: @fill-3;
border-color: @bF;
color: @bF;
background-color: @b2;
}
&:active {
border-color: @stroke-3;
color: @stroke-3;
background-color: @fill-3;
border-color: @bF;
color: @bF;
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 ---
@ -283,7 +329,8 @@
@{element-title} {
text-align: center;
font-weight: 500;
.bluelib-color(@hex-accent);
.font-title();
}
@{element-paragraph} {
@ -293,12 +340,7 @@
@{element-separator} {
border-width: 1px;
border-style: solid;
border-color: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.1
);
border-color: @b1;
}
@{element-list-item} {
@ -306,7 +348,29 @@
}
@{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 ---
@ -372,11 +436,11 @@
}
@{style-monospace} {
font-family: "Fira Code", monospace;
.font-code();
}
@{style-keyboard} {
font-family: "Fira Code", monospace;
.font-code();
padding: 2px 4px;
border: 2px outset;
border-radius: 4px;
@ -385,51 +449,35 @@
// --- Colors ---
@{color-red} {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 0;
.bluelib-color(@hex-red)
}
@{color-orange} {
--bluelib-color-r: 200;
--bluelib-color-g: 165;
--bluelib-color-b: 0;
.bluelib-color(@hex-orange)
}
@{color-yellow} {
--bluelib-color-r: 200;
--bluelib-color-g: 200;
--bluelib-color-b: 0;
.bluelib-color(@hex-yellow)
}
@{color-lime} {
--bluelib-color-r: 0;
--bluelib-color-g: 200;
--bluelib-color-b: 0;
.bluelib-color(@hex-lime)
}
@{color-cyan} {
--bluelib-color-r: 0;
--bluelib-color-g: 200;
--bluelib-color-b: 200;
.bluelib-color(@hex-cyan)
}
@{color-blue} {
--bluelib-color-r: 0;
--bluelib-color-g: 0;
--bluelib-color-b: 200;
.bluelib-color(@hex-blue)
}
@{color-magenta} {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 200;
.bluelib-color(@hex-magenta)
}
@{color-gray} {
--bluelib-color-r: 128;
--bluelib-color-g: 128;
--bluelib-color-b: 128;
.bluelib-color(@hex-gray)
}
}

1596
src/targets/paper.module.css Normal file
View file

File diff suppressed because it is too large Load diff

1
src/targets/paper.module.css.map Normal file
View file

File diff suppressed because one or more lines are too long

8
src/targets/paper.module.less Normal file
View 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";

497
src/targets/skeleton.root.css → src/targets/paper.root.css
View file

@ -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-family: 'Fira Code';
font-style: normal;
@ -134,17 +133,22 @@
}
.base-skeleton,
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-g: 24;
--bluelib-color-b: 24;
font-family: "Fira Sans", sans-serif;
font-weight: 400;
}
.base-skeleton,
body,
.base-skeleton *,
body * {
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,
body .container-main,
@ -787,6 +791,72 @@ body .panel-split aside,
body .panel-split .panel-split {
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,
body .button,
.base-skeleton button,
@ -798,7 +868,7 @@ body input[type="submit"] {
align-items: center;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
border: none;
color: white;
color: #ffffff;
padding: 6px 16px;
border-radius: 4px;
font-family: inherit;
@ -811,7 +881,7 @@ body .button:hover,
body button:hover,
.base-skeleton 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,
body .button:active,
@ -819,7 +889,7 @@ body .button:active,
body button:active,
.base-skeleton 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,
body .button[disabled]:hover,
@ -869,19 +939,19 @@ body .button-toggle .status-disabled {
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;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.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);
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) - 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);
}
.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);
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) - 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.2);
}
.base-skeleton .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 {
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;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.base-skeleton .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 {
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;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.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);
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) - 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.2);
}
.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);
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) - 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);
}
.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;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.base-skeleton .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,
.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);
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) - 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.2);
}
.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);
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) - 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.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,
body .spoiler {
@ -993,6 +1372,10 @@ body h5,
.base-skeleton h6,
body h6 {
text-align: center;
--bluelib-color-r: 24;
--bluelib-color-g: 24;
--bluelib-color-b: 24;
font-family: "Fira Sans", sans-serif;
font-weight: 500;
}
.base-skeleton .element-separator,
@ -1009,6 +1392,66 @@ body .element-list-item,
body li {
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,
body .align-left {
text-align: left;
@ -1090,12 +1533,14 @@ body .style-monospace,
.base-skeleton code,
body code {
font-family: "Fira Code", monospace;
font-weight: 400;
}
.base-skeleton .style-keyboard,
body .style-keyboard,
.base-skeleton kbd,
body kbd {
font-family: "Fira Code", monospace;
font-weight: 400;
padding: 2px 4px;
border: 2px outset;
border-radius: 4px;
@ -1148,4 +1593,4 @@ body .color-gray {
--bluelib-color-g: 128;
--bluelib-color-b: 128;
}
/*# sourceMappingURL=skeleton.root.css.map */
/*# sourceMappingURL=paper.root.css.map */

1
src/targets/paper.root.css.map Normal file
View file

File diff suppressed because one or more lines are too long

8
src/targets/paper.root.less Normal file
View 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";

216
src/targets/skeleton.module.css → src/targets/royalblue.module.css
View file

@ -1,4 +1,3 @@
/* @input-field: ~'.input-field'; */
@font-face {
font-family: 'Fira Code';
font-style: normal;
@ -133,15 +132,20 @@
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnFK_uQQ.ttf) format('truetype');
}
.bluelib {
--bluelib-color-r: 24;
--bluelib-color-g: 24;
--bluelib-color-b: 24;
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: #0d193b;
--bluelib-color-r: 160;
--bluelib-color-g: 204;
--bluelib-color-b: 255;
font-family: "Fira Sans", sans-serif;
font-weight: 400;
}
.bluelib,
.bluelib * {
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 {
margin-left: auto;
@ -194,13 +198,56 @@
.bluelib .panel-split > .panel {
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 {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
border: none;
color: white;
color: #000000;
padding: 6px 16px;
border-radius: 4px;
font-family: inherit;
@ -208,10 +255,10 @@
cursor: pointer;
}
.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 {
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 {
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
@ -233,17 +280,17 @@
.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;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.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);
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) + 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);
}
.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);
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) + 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.2);
}
.bluelib .button-toggle-off.status-disabled {
border-style: dashed;
@ -251,40 +298,67 @@
.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;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.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;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.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);
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) + 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.2);
}
.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);
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) + 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);
}
.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;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.bluelib .button-toggle-on.status-disabled {
border-style: dashed;
}
.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);
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) + 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.2);
}
.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);
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) + 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.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 {
filter: blur(5px);
@ -307,6 +381,10 @@
}
.bluelib .element-title {
text-align: center;
--bluelib-color-r: 255;
--bluelib-color-g: 255;
--bluelib-color-b: 255;
font-family: "Fira Sans", sans-serif;
font-weight: 500;
}
.bluelib .element-separator {
@ -317,6 +395,36 @@
.bluelib .element-list-item {
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 {
text-align: left;
}
@ -361,51 +469,53 @@
}
.bluelib .style-monospace {
font-family: "Fira Code", monospace;
font-weight: 400;
}
.bluelib .style-keyboard {
font-family: "Fira Code", monospace;
font-weight: 400;
padding: 2px 4px;
border: 2px outset;
border-radius: 4px;
}
.bluelib .color-red {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 0;
--bluelib-color-r: 255;
--bluelib-color-g: 125;
--bluelib-color-b: 125;
}
.bluelib .color-orange {
--bluelib-color-r: 200;
--bluelib-color-g: 165;
--bluelib-color-b: 0;
--bluelib-color-r: 255;
--bluelib-color-g: 187;
--bluelib-color-b: 125;
}
.bluelib .color-yellow {
--bluelib-color-r: 200;
--bluelib-color-g: 200;
--bluelib-color-b: 0;
--bluelib-color-r: 255;
--bluelib-color-g: 255;
--bluelib-color-b: 125;
}
.bluelib .color-lime {
--bluelib-color-r: 0;
--bluelib-color-g: 200;
--bluelib-color-b: 0;
--bluelib-color-r: 125;
--bluelib-color-g: 255;
--bluelib-color-b: 125;
}
.bluelib .color-cyan {
--bluelib-color-r: 0;
--bluelib-color-g: 200;
--bluelib-color-b: 200;
--bluelib-color-r: 125;
--bluelib-color-g: 255;
--bluelib-color-b: 255;
}
.bluelib .color-blue {
--bluelib-color-r: 0;
--bluelib-color-g: 0;
--bluelib-color-b: 200;
--bluelib-color-r: 125;
--bluelib-color-g: 125;
--bluelib-color-b: 255;
}
.bluelib .color-magenta {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 200;
--bluelib-color-r: 255;
--bluelib-color-g: 125;
--bluelib-color-b: 255;
}
.bluelib .color-gray {
--bluelib-color-r: 128;
--bluelib-color-g: 128;
--bluelib-color-b: 128;
--bluelib-color-r: 187;
--bluelib-color-g: 187;
--bluelib-color-b: 187;
}
/*# sourceMappingURL=skeleton.module.css.map */
/*# sourceMappingURL=royalblue.module.css.map */

1
src/targets/royalblue.module.css.map Normal file
View file

File diff suppressed because one or more lines are too long

8
src/targets/royalblue.module.less Normal file
View 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
View file

File diff suppressed because it is too large Load diff

1
src/targets/royalblue.root.css.map Normal file
View file

File diff suppressed because one or more lines are too long

8
src/targets/royalblue.root.less Normal file
View 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";

136
src/targets/rygblue.module.css
View file

@ -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
src/targets/rygblue.module.css.map
View file

@ -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"}

2
src/targets/rygblue.module.less
View file

@ -1,2 +0,0 @@
@import "../vars/module.less";
@import "../rules/rygblue.less";

195
src/targets/rygblue.root.css
View file

@ -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
src/targets/rygblue.root.css.map
View file

@ -1 +0,0 @@
{"version":3,"sources":["/mnt/tera/ext4/code/bluelib/src/rules/rygblue.less"],"names":[],"mappings":";AACA;AACM;EAqBF,sBAAA;EACA,sBAAA;EACA,sBAAA;EAEA,yBAAA;EACA,OAAO,IACC,wBACA,wBACA,uBAHR;;AA3BJ,cAAA;AACM,IADN;EAkCQ,OAAO,IACC,wBACA,wBACA,uBAHR;;AAlCR,cAAA;AACM,IADN;AAAA,cAAS;AACH,IADG;AAAT,cACO,MAAK;AAAN,IAAC,MAAK;EA8EJ,YAAA;;AA/ER,cAAA;AACM,IADN;EAoHQ,iBAAA;EACA,iBAAA;EACA,mBAAA;;AAtHR,cAAA;AACM,IADN;EA0HQ,cAxCc,KACV,wBACA,wBACA,0BAqCJ;EACA,OAzCc,KACV,wBACA,wBACA,0BAsCJ;EACA,6BAAA;;AAEA,cA9HR,mBA8HS;AAAD,IA9HR,mBA8HS;EACG,cAvCU,KACV,KAAK,8BACL,KAAK,8BACL,KAAK,gCAoCL;EACA,OAxCU,KACV,KAAK,8BACL,KAAK,8BACL,KAAK,gCAqCL;EACA,kBA3BQ,KACR,wBACA,wBACA,4BAwBA;;AAGJ,cApIR,mBAoIS;AAAD,IApIR,mBAoIS;EACG,cAvCU,KACV,KAAK,8BACL,KAAK,8BACL,KAAK,gCAoCL;EACA,OAxCU,KACV,KAAK,8BACL,KAAK,8BACL,KAAK,gCAqCL;EACA,kBA3BQ,KACR,wBACA,wBACA,4BAwBA;;AAIA,cA3IZ,mBAAC,UA2IY;AAAD,IA3IZ,mBAAC,UA2IY;AAAD,cA3IZ,mBACG,iBA0IU;AAAD,IA3IZ,mBACG,iBA0IU;EACG,cA1DM,KACV,wBACA,wBACA,0BAuDI;EACA,OA3DM,KACV,wBACA,wBACA,0BAwDI;EACA,6BAAA;;AAGJ,cAjJZ,mBAAC,UAiJY;AAAD,IAjJZ,mBAAC,UAiJY;AAAD,cAjJZ,mBACG,iBAgJU;AAAD,IAjJZ,mBACG,iBAgJU;EACG,cAhEM,KACV,wBACA,wBACA,0BA6DI;EACA,OAjEM,KACV,wBACA,wBACA,0BA8DI;EACA,6BAAA;;AApJhB,cAAA;AACM,IADN;EA0JQ,cA5Dc,KACV,KAAK,8BACL,KAAK,8BACL,KAAK,gCAyDT;EACA,OA7Dc,KACV,KAAK,8BACL,KAAK,8BACL,KAAK,gCA0DT;EACA,kBAhDY,KACR,wBACA,wBACA,4BA6CJ;;AAEA,cA9JR,kBA8JS;AAAD,IA9JR,kBA8JS;EACG,cAvEU,KACV,KAAK,8BACL,KAAK,8BACL,KAAK,gCAoEL;EACA,OAxEU,KACV,KAAK,8BACL,KAAK,8BACL,KAAK,gCAqEL;EACA,kBA3DQ,KACR,wBACA,wBACA,4BAwDA;;AAGJ,cApKR,kBAoKS;AAAD,IApKR,kBAoKS;EACG,cAnFU,KACV,wBACA,wBACA,0BAgFA;EACA,OApFU,KACV,wBACA,wBACA,0BAiFA;EACA,6BAAA;;AAIA,cA3KZ,kBAAC,UA2KY;AAAD,IA3KZ,kBAAC,UA2KY;AAAD,cA3KZ,kBACG,iBA0KU;AAAD,IA3KZ,kBACG,iBA0KU;EACG,cA9EM,KACV,KAAK,8BACL,KAAK,8BACL,KAAK,gCA2ED;EACA,OA/EM,KACV,KAAK,8BACL,KAAK,8BACL,KAAK,gCA4ED;EACA,kBAlEI,KACR,wBACA,wBACA,4BA+DI;;AAGJ,cAjLZ,kBAAC,UAiLY;AAAD,IAjLZ,kBAAC,UAiLY;AAAD,cAjLZ,kBACG,iBAgLU;AAAD,IAjLZ,kBACG,iBAgLU;EACG,cApFM,KACV,KAAK,8BACL,KAAK,8BACL,KAAK,gCAiFD;EACA,OArFM,KACV,KAAK,8BACL,KAAK,8BACL,KAAK,gCAkFD;EACA,kBAxEI,KACR,wBACA,wBACA,4BAqEI;;AApLhB,cAAA;AACM,IADN;AAAA,cACM;AAAA,IAAA;AADN,cACU;AAAJ,IAAI;AADV,cACc;AAAR,IAAQ;AADd,cACkB;AAAZ,IAAY;AADlB,cACsB;AAAhB,IAAgB;AADtB,cAC0B;AAApB,IAAoB;EAgNlB,sBAAA;EACA,sBAAA;EACA,sBAAA;;AAnNR,cAAA;AACM,IADN;AAAA,cACO;AAAD,IAAC;EAkOC,oBAAA;EACA,sBAAA;EACA,sBAAA;EACA,qBAAA;;AAEA,cAxOR,gBAwOS;AAAD,IAxOR,gBAwOS;AAAD,cAvOD,EAuOE;AAAD,IAvOD,EAuOE;EACG,oBAAA;EACA,sBAAA;EACA,sBAAA;;AAGJ,cA9OR,gBA8OS;AAAD,IA9OR,gBA8OS;AAAD,cA7OD,EA6OE;AAAD,IA7OD,EA6OE;EACG,sBAAA;EACA,sBAAA;EACA,sBAAA;;AAjPZ,cAAA;AACM,IADN;AAAA,cACG;AAAG,IAAH;EAmSK,sBAAA;EACA,sBAAA;EACA,sBAAA;;AAtSR,cAAA;AACM,IADN;EAiUQ,sBAAA;EACA,sBAAA;EACA,sBAAA;;AAnUR,cAAA;AACM,IADN;EAuUQ,sBAAA;EACA,sBAAA;EACA,sBAAA;;AAzUR,cAAA;AACM,IADN;EA6UQ,sBAAA;EACA,sBAAA;EACA,sBAAA;;AA/UR,cAAA;AACM,IADN;EAmVQ,sBAAA;EACA,sBAAA;EACA,sBAAA;;AArVR,cAAA;AACM,IADN;EAyVQ,sBAAA;EACA,sBAAA;EACA,sBAAA;;AA3VR,cAAA;AACM,IADN;EA+VQ,sBAAA;EACA,sBAAA;EACA,sBAAA;;AAjWR,cAAA;AACM,IADN;EAqWQ,sBAAA;EACA,sBAAA;EACA,sBAAA;;AAvWR,cAAA;AACM,IADN;EA2WQ,sBAAA;EACA,sBAAA;EACA,sBAAA","file":"rygblue.root.css"}

2
src/targets/rygblue.root.less
View file

@ -1,2 +0,0 @@
@import "../vars/root.less";
@import "../rules/rygblue.less";

1
src/targets/skeleton.module.css.map
View file

File diff suppressed because one or more lines are too long

2
src/targets/skeleton.module.less
View file

@ -1,2 +0,0 @@
@import "../vars/module.less";
@import "../rules/skeleton.less";

1
src/targets/skeleton.root.css.map
View file

File diff suppressed because one or more lines are too long

2
src/targets/skeleton.root.less
View file

@ -1,2 +0,0 @@
@import "../vars/root.less";
@import "../rules/skeleton.less";

5
src/utils/mixins.less Normal file
View file

@ -0,0 +1,5 @@
.bluelib-color(@color) {
--bluelib-color-r: red(@color);
--bluelib-color-g: green(@color);
--bluelib-color-b: blue(@color);
}

7
src/vars/module.less
View file

@ -9,12 +9,17 @@
@status-disabled: ~".status-disabled";
@status-hoverable: ~".status-hoverable";
@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-fill-width: ~'.button-fill-width';
@button-toggle: ~'.button-toggle';
@button-toggle-off: ~'.button-toggle-off';
@button-toggle-on: ~'.button-toggle-on';
/* @input-field: ~'.input-field'; */
@input-field: ~'.input-field';
@spoiler: ~".spoiler";
@element-title: ~".element-title";
@element-paragraph: ~".element-paragraph";

7
src/vars/root.less
View file

@ -9,12 +9,17 @@
@status-disabled: ~"[disabled], .status-disabled";
@status-hoverable: ~"[title], .status-hoverable";
@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-fill-width: ~'.button-fill-width';
@button-toggle: ~'.button-toggle';
@button-toggle-off: ~'.button-toggle-off';
@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";
@element-title: ~".element-title, h1, h2, h3, h4, h5, h6";
@element-paragraph: ~".element-paragraph, p";