mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-10-16 05:37:28 +00:00
Convert indentation to tabs
This commit is contained in:
parent
0c95bd2b3f
commit
7dc64b44cb
GPG key ID:
2A24051445686895
20 changed files with 3513 additions and 3370 deletions
9
.editorconfig
Normal file
9
.editorconfig
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 4
|
||||
indent_style = tab
|
||||
insert_final_newline = true
|
||||
tab_width = 4
|
||||
4
.vscode/launch.json
vendored
4
.vscode/launch.json
vendored
|
|
@ -6,7 +6,7 @@
|
|||
"type": "firefox",
|
||||
"request": "launch",
|
||||
"reAttach": true,
|
||||
"file": "${workspaceFolder}/examples/index.html",
|
||||
},
|
||||
"file": "${workspaceFolder}/examples/index.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
|
@ -9,6 +9,6 @@
|
|||
".idea": true,
|
||||
"dist": true,
|
||||
"node_modules": true,
|
||||
".nojekyll": true,
|
||||
".nojekyll": true
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="preload" href="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg" as="image" />
|
||||
<link rel="preload" href="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg" as="image"/>
|
||||
<title>Bluelib</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta property="og:title" content="Bluelib" />
|
||||
<meta property="og:description" content="A versatile and easy to use CSS stylesheet that supports fast dynamic recoloring via CSS variables." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://gh.steffo.eu/bluelib/examples/index.html" />
|
||||
<meta property="og:image" content="../media/opengraph.png" />
|
||||
<meta property="og:title" content="Bluelib"/>
|
||||
<meta property="og:description" content="A versatile and easy to use CSS stylesheet that supports fast dynamic recoloring via CSS variables."/>
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:url" content="https://gh.steffo.eu/bluelib/examples/index.html"/>
|
||||
<meta property="og:image" content="../media/opengraph.png"/>
|
||||
<link rel="icon" type="image/x-icon" href="../favicon.ico">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/base.root.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/layouts-center.root.less">
|
||||
|
|
@ -26,12 +26,12 @@
|
|||
<script>
|
||||
less = {
|
||||
env: "development",
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/less"></script>
|
||||
<title>Bluelib</title>
|
||||
</head>
|
||||
<body class="theme-bluelib layout-center">
|
||||
</head>
|
||||
<body class="theme-bluelib layout-center">
|
||||
<img class="layout-center-background" alt="" src="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg">
|
||||
<header>
|
||||
<h1>
|
||||
|
|
@ -48,13 +48,15 @@
|
|||
What is Bluelib?
|
||||
</h3>
|
||||
<p>
|
||||
<dfn id="dfn-bluelib">Bluelib</dfn> is a modular <i>CSS</i> library for web pages which aims to provide <b>great customization</b> and <b>flexibility</b> while trying to keep <b>HTML as "basic" as possible</b>.
|
||||
<dfn id="dfn-bluelib">Bluelib</dfn> is a modular <i>CSS</i> library for web pages which aims to provide <b>great customization</b> and
|
||||
<b>flexibility</b> while trying to keep <b>HTML as "basic" as possible</b>.
|
||||
</p>
|
||||
<p>
|
||||
This page itself acts both as a <b>documentation</b> of the library and as a <b>live preview</b> of its capabilities.
|
||||
</p>
|
||||
<p>
|
||||
If you're on a browser which supports that, you can right click any element of this page and then click <kbd>Inspect Element</kbd> to see how something is done.
|
||||
If you're on a browser which supports that, you can right click any element of this page and then click
|
||||
<kbd>Inspect Element</kbd> to see how something is done.
|
||||
</p>
|
||||
<div class="panel parenthesis float-bottom">
|
||||
<p>
|
||||
|
|
@ -164,7 +166,8 @@
|
|||
A Bluelib <dfn id="dfn-target">target</dfn> is a CSS document where CSS rulesets of a certain type are grouped together.
|
||||
</p>
|
||||
<p>
|
||||
It is composed by two parts: the <dfn id="dfn-ruleset">ruleset</dfn>, determining the CSS rules to use, and the <dfn id="dfn-selectorset">selectorset</dfn>, determining the elements to apply the CSS rules on.
|
||||
It is composed by two parts: the <dfn id="dfn-ruleset">ruleset</dfn>, determining the CSS rules to use, and the
|
||||
<dfn id="dfn-selectorset">selectorset</dfn>, determining the elements to apply the CSS rules on.
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
|
|
@ -183,7 +186,8 @@
|
|||
By running <code>dist/_build.sh</code>, new targets are generated and compiled from <a href="https://lesscss.org/">Less</a> to CSS.
|
||||
</p>
|
||||
<p>
|
||||
The <a href="https://en.wikipedia.org/wiki/Cartesian_product">cartesian product</a> is applied between all <i>rulesets</i> in <code>src/rulesets</code> and all <i>selectorsets</i> in <code>src/selectorsets</code>, compiling a new target for each pair.
|
||||
The <a href="https://en.wikipedia.org/wiki/Cartesian_product">cartesian product</a> is applied between all <i>rulesets</i> in
|
||||
<code>src/rulesets</code> and all <i>selectorsets</i> in <code>src/selectorsets</code>, compiling a new target for each pair.
|
||||
</p>
|
||||
</section>
|
||||
<section class="panel box rainbow" id="panel-rulesets todo">
|
||||
|
|
@ -191,26 +195,37 @@
|
|||
Available rulesets
|
||||
</h3>
|
||||
<dl>
|
||||
<dt><label class="fade"><input type="checkbox" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-base" onclick="toggleStyle('less:dist-base:root')"> Base</label></dt>
|
||||
<dt>
|
||||
<label class="fade"><input type="checkbox" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-base" onclick="toggleStyle('less:dist-base:root')"> Base</label>
|
||||
</dt>
|
||||
<dd>
|
||||
The base <i>ruleset</i>, providing the layout and basic high contrast theming.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-classic" onclick="toggleStyle('less:dist-classic:root')"> Classic</label></dt>
|
||||
<dt>
|
||||
<label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-classic" onclick="toggleStyle('less:dist-classic:root')"> Classic</label>
|
||||
</dt>
|
||||
<dd>
|
||||
Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-glass" onclick="toggleStyle('less:dist-glass:root')"> Glass</label></dt>
|
||||
<dt>
|
||||
<label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-glass" onclick="toggleStyle('less:dist-glass:root')"> Glass</label>
|
||||
</dt>
|
||||
<dd>
|
||||
Made to celebrate the addition of <code>backdrop-filter</code> to Firefox, makes panels have a <q>stained glass</q> background.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="checkbox" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:dist-fun:root')"> Fun</label></dt>
|
||||
<dt>
|
||||
<label class="fade"><input type="checkbox" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:dist-fun:root')"> Fun</label>
|
||||
</dt>
|
||||
<dd>
|
||||
<mark>Experimental.</mark> <i>Ruleset</i> with bizzare or buggy but fun rules.
|
||||
<mark>Experimental.</mark>
|
||||
<i>Ruleset</i> with bizzare or buggy but fun rules.
|
||||
</dd>
|
||||
<dt>Layouts</dt>
|
||||
<dd>
|
||||
<dl>
|
||||
<dt><label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:dist-layouts-center:root')"> Center</label></dt>
|
||||
<dt>
|
||||
<label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:dist-layouts-center:root')"> Center</label>
|
||||
</dt>
|
||||
<dd>
|
||||
Gives the page a background, a header at the top, a footer at the bottom, and fits the content between the two.
|
||||
</dd>
|
||||
|
|
@ -219,19 +234,27 @@
|
|||
<dt>Colors</dt>
|
||||
<dd>
|
||||
<dl>
|
||||
<dt><label class="fade"><input type="radio" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-royalblue:root', 'fabrice-nerfin-puHQJZd3MDg-unsplash.jpg')"> Royal Blue</label></dt>
|
||||
<dt>
|
||||
<label class="fade"><input type="radio" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-royalblue:root', 'fabrice-nerfin-puHQJZd3MDg-unsplash.jpg')"> Royal Blue</label>
|
||||
</dt>
|
||||
<dd>
|
||||
<a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-amber:root', 'anastasiia-chepinska-lcfH0p6emhw-unsplash-edited.jpg')"> Gestione Amber</label></dt>
|
||||
<dt>
|
||||
<label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-amber:root', 'anastasiia-chepinska-lcfH0p6emhw-unsplash-edited.jpg')"> Gestione Amber</label>
|
||||
</dt>
|
||||
<dd>
|
||||
<a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-pixeldawn:root', 'pixeldawn-viktya.png')"> Pixel Dawn</label></dt>
|
||||
<dt>
|
||||
<label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-pixeldawn:root', 'pixeldawn-viktya.png')"> Pixel Dawn</label>
|
||||
</dt>
|
||||
<dd>
|
||||
A theme developed in collaboration with Viktya, featuring a pixelated beach-side sunrise.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-purplestar:root', 'kazuend-2KXEb_8G5vo-unsplash-edited.jpg')"> Purple Star</label></dt>
|
||||
<dt>
|
||||
<label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-purplestar:root', 'kazuend-2KXEb_8G5vo-unsplash-edited.jpg')"> Purple Star</label>
|
||||
</dt>
|
||||
<dd>
|
||||
A purple-ish theme for <a href="https://www.starshard.studio">Star Shard Studio</a>.
|
||||
</dd>
|
||||
|
|
@ -259,7 +282,8 @@
|
|||
</dd>
|
||||
<dt><label class="fade"><input type="radio" autocomplete="off" disabled name="selectorset"> Module</label></dt>
|
||||
<dd>
|
||||
All selectors use class names, allowing the usage of the target with <a href="https://github.com/css-modules/css-modules">CSS Modules</a>. Useful for React or similar web app projects.
|
||||
All selectors use class names, allowing the usage of the target with
|
||||
<a href="https://github.com/css-modules/css-modules">CSS Modules</a>. Useful for React or similar web app projects.
|
||||
</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
|
@ -279,13 +303,35 @@
|
|||
Simply link the stylesheets in the header of your project like this:
|
||||
</p>
|
||||
<div class="panel">
|
||||
<code><link<wbr> rel="stylesheet"<wbr> href="https://unpkg.com/@steffo/bluelib<wbr>@<var>VERSION</var><wbr>/dist/<wbr><var>RULESET</var>.<var>SELECTORSET</var>.css"<wbr> type="text/css"<wbr>/></code>
|
||||
<code><link
|
||||
<wbr>
|
||||
rel="stylesheet"<wbr>
|
||||
href="https://unpkg.com/@steffo/bluelib
|
||||
<wbr>
|
||||
@<var>VERSION</var>
|
||||
<wbr>
|
||||
/dist/
|
||||
<wbr>
|
||||
<var>RULESET</var>.<var>SELECTORSET</var>.css"<wbr>
|
||||
type="text/css"<wbr>
|
||||
/></code>
|
||||
</div>
|
||||
<p>
|
||||
To save a bit extra bandwidth, at the cost of harder-to-read stylesheets, you can use minified stylesheets, like this:
|
||||
</p>
|
||||
<div class="panel">
|
||||
<code><link<wbr> rel="stylesheet"<wbr> href="https://unpkg.com/@steffo/bluelib<wbr>@<var>VERSION</var><wbr>/dist/<wbr><var>RULESET</var>.<var>SELECTORSET</var>.min.css"<wbr> type="text/css"<wbr>/></code>
|
||||
<code><link
|
||||
<wbr>
|
||||
rel="stylesheet"<wbr>
|
||||
href="https://unpkg.com/@steffo/bluelib
|
||||
<wbr>
|
||||
@<var>VERSION</var>
|
||||
<wbr>
|
||||
/dist/
|
||||
<wbr>
|
||||
<var>RULESET</var>.<var>SELECTORSET</var>.min.css"<wbr>
|
||||
type="text/css"<wbr>
|
||||
/></code>
|
||||
</div>
|
||||
</section>
|
||||
<section class="panel box todo" id="panel-installtbd">
|
||||
|
|
@ -367,10 +413,12 @@
|
|||
Box usage
|
||||
</h3>
|
||||
<p>
|
||||
A <i>Box</i> creates a visible <b>separation</b> between the <b>content inside it</b> and the <b>content outside it</b>, and should be used when this separation is desired, like when <b>describing a topic</b> (like here).
|
||||
A <i>Box</i> creates a visible <b>separation</b> between the <b>content inside it</b> and the
|
||||
<b>content outside it</b>, and should be used when this separation is desired, like when <b>describing a topic</b> (like here).
|
||||
</p>
|
||||
<p>
|
||||
To achieve the best visual style, <i>Boxes</i> should always be the outmost panels: you should <b><em>never</em> place a <i>Box</i> inside a Panel or a Dialog</b>, but you can place one inside another <i>Box</i>.
|
||||
To achieve the best visual style, <i>Boxes</i> should always be the outmost panels: you should <b><em>never</em> place a
|
||||
<i>Box</i> inside a Panel or a Dialog</b>, but you can place one inside another <i>Box</i>.
|
||||
</p>
|
||||
</section>
|
||||
<section class="panel box" id="panel-when-dialog">
|
||||
|
|
@ -378,7 +426,8 @@
|
|||
Dialog usage
|
||||
</h3>
|
||||
<p>
|
||||
A <i>Dialog</i> creates a visible <b>indentation</b> of the <b>content inside it</b>, and should be used when this indentation is desired, like in <b>quotes</b> or <b>examples</b>.
|
||||
A <i>Dialog</i> creates a visible <b>indentation</b> of the
|
||||
<b>content inside it</b>, and should be used when this indentation is desired, like in <b>quotes</b> or <b>examples</b>.
|
||||
</p>
|
||||
<p>
|
||||
When containing a quote, they should use <b><code><blockquote></code> elements</b>.
|
||||
|
|
@ -392,7 +441,8 @@
|
|||
Parenthesis usage
|
||||
</h3>
|
||||
<p>
|
||||
A <i>Parenthesis</i> <b>removes importance from its contents</b>, and therefore makes for a great container for notes or additional information about a topic.
|
||||
A <i>Parenthesis</i>
|
||||
<b>removes importance from its contents</b>, and therefore makes for a great container for notes or additional information about a topic.
|
||||
</p>
|
||||
<p>
|
||||
Having no borders, they should be considered as Panels when placing them: never add Boxes or Dialogs inside them.
|
||||
|
|
@ -475,7 +525,8 @@
|
|||
A <dfn id="dfn-float">float</dfn> is a utility class to align items in panels without having to write CSS.
|
||||
</p>
|
||||
<p class="float-bottom">
|
||||
For example, if a panel has some empty space, elements can be made to <b>float to the bottom</b>, which can be useful for example for buttons in sibling panels.
|
||||
For example, if a panel has some empty space, elements can be made to
|
||||
<b>float to the bottom</b>, which can be useful for example for buttons in sibling panels.
|
||||
</p>
|
||||
</section>
|
||||
<section class="panel box" id="panel-autowrap">
|
||||
|
|
@ -568,19 +619,26 @@
|
|||
Mark
|
||||
</h3>
|
||||
<p>
|
||||
The <dfn id="dfn-mark">mark</dfn> modifier <b>distinguishes</b> the elements it is applied to from the surrounding ones by applying a <b>strong color contrast</b>.
|
||||
The <dfn id="dfn-mark">mark</dfn> modifier <b>distinguishes</b> the elements it is applied to from the surrounding ones by applying a
|
||||
<b>strong color contrast</b>.
|
||||
</p>
|
||||
<div class="panel box mark float-bottom">
|
||||
<p>
|
||||
Think of it like an <b>highlighter</b>, but for <mark>anything</mark>!
|
||||
Think of it like an <b>highlighter</b>, but for
|
||||
<mark>anything</mark>
|
||||
!
|
||||
</p>
|
||||
<div class="panel box mark">
|
||||
<p>
|
||||
Which can be nested to <mark>negate</mark> its effect.
|
||||
Which can be nested to
|
||||
<mark>negate</mark>
|
||||
its effect.
|
||||
</p>
|
||||
<div class="panel box mark">
|
||||
<p>
|
||||
Up to 3 times and <mark>not any more</mark>.
|
||||
Up to 3 times and
|
||||
<mark>not any more</mark>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -677,7 +735,8 @@
|
|||
Separator
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-separator">separator</dfn> is a <b>horizontal line</b> that fills all the horizontal space available on a panel, forcing a line wrap.
|
||||
A <dfn id="dfn-separator">separator</dfn> is a
|
||||
<b>horizontal line</b> that fills all the horizontal space available on a panel, forcing a line wrap.
|
||||
</p>
|
||||
<hr class="float-bottom">
|
||||
<blockquote class="panel dialog">
|
||||
|
|
@ -689,7 +748,8 @@
|
|||
Light separator
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-separator-light">light separator</dfn> is a <b>less eye-catching separator</b>, to be used if the regular separator distracts too much from the flow of the text.
|
||||
A <dfn id="dfn-separator-light">light separator</dfn> is a
|
||||
<b>less eye-catching separator</b>, to be used if the regular separator distracts too much from the flow of the text.
|
||||
</p>
|
||||
<hr class="separator-light float-bottom">
|
||||
<blockquote class="panel dialog">
|
||||
|
|
@ -701,7 +761,8 @@
|
|||
Heavy separator
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-separator-heavy">heavy separator</dfn> is a <b>very eye-catching separator</b>, to be used if the regular separator isn't apparent enough.
|
||||
A <dfn id="dfn-separator-heavy">heavy separator</dfn> is a
|
||||
<b>very eye-catching separator</b>, to be used if the regular separator isn't apparent enough.
|
||||
</p>
|
||||
<hr class="separator-heavy float-bottom">
|
||||
<blockquote class="panel dialog">
|
||||
|
|
@ -789,7 +850,8 @@
|
|||
Collapsible details
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-details">details</dfn> element <b>hides its contents</b>, displaying only a <dfn id="dfn-summary">summary</dfn> until either the marker or the summary itself <b>is activated</b>.
|
||||
A <dfn id="dfn-details">details</dfn> element <b>hides its contents</b>, displaying only a
|
||||
<dfn id="dfn-summary">summary</dfn> until either the marker or the summary itself <b>is activated</b>.
|
||||
</p>
|
||||
<details>
|
||||
<summary>Something</summary>
|
||||
|
|
@ -814,7 +876,8 @@
|
|||
<u>A</u>nchors
|
||||
</h3>
|
||||
<p>
|
||||
An <dfn id="dfn-anchor">anchor</dfn> is an interactable element which can be clicked to <b>go to a different page</b>, or a <b>different part of the same page</b>, or to <b>perform an action with a different application</b>!
|
||||
An <dfn id="dfn-anchor">anchor</dfn> is an interactable element which can be clicked to <b>go to a different page</b>, or a
|
||||
<b>different part of the same page</b>, or to <b>perform an action with a different application</b>!
|
||||
</p>
|
||||
<div class="panel">
|
||||
<p>
|
||||
|
|
@ -875,7 +938,8 @@
|
|||
<u>Strong</u> importance
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-strong">strong importance</dfn> element denotes parts of text that are <b>even more important</b> than the ones denoted by <i>attention-bringers</i>.
|
||||
A <dfn id="dfn-strong">strong importance</dfn> element denotes parts of text that are
|
||||
<b>even more important</b> than the ones denoted by <i>attention-bringers</i>.
|
||||
</p>
|
||||
<div class="panel float-bottom">
|
||||
<p>
|
||||
|
|
@ -888,7 +952,8 @@
|
|||
<u>U</u>narticulated annotations
|
||||
</h3>
|
||||
<p>
|
||||
An <dfn id="dfn-annotation">unarticulated annotation</dfn> denotes parts of text that were given an <b>annotation</b> without any comment.
|
||||
An <dfn id="dfn-annotation">unarticulated annotation</dfn> denotes parts of text that were given an
|
||||
<b>annotation</b> without any comment.
|
||||
</p>
|
||||
<div class="panel float-bottom">
|
||||
<p>
|
||||
|
|
@ -914,15 +979,20 @@
|
|||
<u>Ins</u>erted and <u>del</u>eted text
|
||||
</h3>
|
||||
<p>
|
||||
When comparing changes to a text, parts of it can be marked as <dfn id="dfn-inserted">inserted</dfn> or <dfn id="dfn-deleted">deleted</dfn>.
|
||||
When comparing changes to a text, parts of it can be marked as <dfn id="dfn-inserted">inserted</dfn> or
|
||||
<dfn id="dfn-deleted">deleted</dfn>.
|
||||
</p>
|
||||
<div class="panel float-bottom">
|
||||
<h4 style="text-align: left;">
|
||||
Bluelib 5.0.0
|
||||
</h4>
|
||||
<ul>
|
||||
<li>Added: <ins>more bugs</ins></li>
|
||||
<li>Removed: <del>cool features</del></li>
|
||||
<li>Added:
|
||||
<ins>more bugs</ins>
|
||||
</li>
|
||||
<li>Removed:
|
||||
<del>cool features</del>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -947,7 +1017,8 @@
|
|||
<u>Pre</u>formatted text
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-preformatted">preformatted text</dfn> element denotes text where <b>lines and positioning are significant</b>; this prevents them from being <b>rearranged</b> by the browser.
|
||||
A <dfn id="dfn-preformatted">preformatted text</dfn> element denotes text where
|
||||
<b>lines and positioning are significant</b>; this prevents them from being <b>rearranged</b> by the browser.
|
||||
</p>
|
||||
<p>
|
||||
It should be used for <b>poetry</b>, <b>code</b>, <b>ASCII art</b>, <b>kaomoji</b>, etc.
|
||||
|
|
@ -965,7 +1036,8 @@
|
|||
<u>Code</u>
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-code">code</dfn> element denotes that its contents are some kind of <b>code</b> (probably belonging to a programming language).
|
||||
A <dfn id="dfn-code">code</dfn> element denotes that its contents are some kind of
|
||||
<b>code</b> (probably belonging to a programming language).
|
||||
</p>
|
||||
<p>
|
||||
If displayed as a block instead of inline, it should be used with a <i>preformatted text</i> element.
|
||||
|
|
@ -986,7 +1058,8 @@ Contents
|
|||
<u>K</u>ey<u>b</u>oar<u>d</u> input and <u>samp</u>le output
|
||||
</h3>
|
||||
<p>
|
||||
<dfn id="dfn-sample-input">Input samples</dfn> and <dfn id="dfn-sample-output">output samples</dfn> from a computer have elements which denote them, and are formatted appropriately.
|
||||
<dfn id="dfn-sample-input">Input samples</dfn> and
|
||||
<dfn id="dfn-sample-output">output samples</dfn> from a computer have elements which denote them, and are formatted appropriately.
|
||||
</p>
|
||||
<p>
|
||||
A <i>sample</i> inside another creates emphasises the individual element, creating a combination.
|
||||
|
|
@ -1018,7 +1091,8 @@ Contents
|
|||
Quotes and citations
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-quote">quote</dfn> element indicates an <b>inline quote</b>, and may be optionally include a <dfn id="dfn-citation">citation</dfn> element indicating the <b>source of the quote</b>.
|
||||
A <dfn id="dfn-quote">quote</dfn> element indicates an <b>inline quote</b>, and may be optionally include a
|
||||
<dfn id="dfn-citation">citation</dfn> element indicating the <b>source of the quote</b>.
|
||||
</p>
|
||||
<div class="panel dialog float-bottom">
|
||||
<p>
|
||||
|
|
@ -1045,14 +1119,17 @@ Contents
|
|||
Abbreviations
|
||||
</h3>
|
||||
<p>
|
||||
An <dfn id="dfn-abbreviation">abbreviation</dfn> element marks its contents as an <b>acronym</b> or <b>abbreviation</b> and allows the user to view the expanded abbreviation by hovering it with the mouse.
|
||||
An <dfn id="dfn-abbreviation">abbreviation</dfn> element marks its contents as an <b>acronym</b> or
|
||||
<b>abbreviation</b> and allows the user to view the expanded abbreviation by hovering it with the mouse.
|
||||
</p>
|
||||
<p>
|
||||
Note that no mobile browsers currently support this feature, so you'll have to <b>manually provide an alternative</b> for mobile users to see the full abbreviation.
|
||||
Note that no mobile browsers currently support this feature, so you'll have to
|
||||
<b>manually provide an alternative</b> for mobile users to see the full abbreviation.
|
||||
</p>
|
||||
<div class="panel float-bottom">
|
||||
<p>
|
||||
Two companies against each other: <abbr class="blue" title="Builders League United">BLU</abbr> vs. <abbr class="red" title="Reliable Excavation Demolition">RED</abbr>!
|
||||
Two companies against each other: <abbr class="blue" title="Builders League United">BLU</abbr> vs.
|
||||
<abbr class="red" title="Reliable Excavation Demolition">RED</abbr>!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1066,20 +1143,38 @@ Contents
|
|||
<div class="panel float-bottom">
|
||||
<p style="font-size: xx-large;">
|
||||
<ruby>
|
||||
Mo <rp>/</rp><rt>ˈmɒ</rt><rp>/</rp>
|
||||
de <rp>/</rp><rt>dɪ</rt><rp>/</rp>
|
||||
na <rp>/</rp><rt>nə</rt><rp>/</rp>
|
||||
Mo
|
||||
<rp>/</rp>
|
||||
<rt>ˈmɒ</rt>
|
||||
<rp>/</rp>
|
||||
de
|
||||
<rp>/</rp>
|
||||
<rt>dɪ</rt>
|
||||
<rp>/</rp>
|
||||
na
|
||||
<rp>/</rp>
|
||||
<rt>nə</rt>
|
||||
<rp>/</rp>
|
||||
</ruby>
|
||||
</p>
|
||||
<p style="font-size: xx-large;">
|
||||
<ruby>
|
||||
漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
|
||||
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
|
||||
漢
|
||||
<rp>(</rp>
|
||||
<rt>kan</rt>
|
||||
<rp>)</rp>
|
||||
字
|
||||
<rp>(</rp>
|
||||
<rt>ji</rt>
|
||||
<rp>)</rp>
|
||||
</ruby>
|
||||
</p>
|
||||
<p style="font-size: xx-large;">
|
||||
<ruby>
|
||||
明日 <rp>(</rp><rt>ashita</rt><rp>)</rp>
|
||||
明日
|
||||
<rp>(</rp>
|
||||
<rt>ashita</rt>
|
||||
<rp>)</rp>
|
||||
</ruby>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1304,7 +1399,8 @@ Contents
|
|||
Limited
|
||||
</h3>
|
||||
<p>
|
||||
Images can be <dfn id="dfn-limited">limited</dfn> to <b>prevent them from taking up too much screen space</b>, like the previous one did.
|
||||
Images can be <dfn id="dfn-limited">limited</dfn> to
|
||||
<b>prevent them from taking up too much screen space</b>, like the previous one did.
|
||||
</p>
|
||||
<hr/>
|
||||
<h4>
|
||||
|
|
@ -1370,7 +1466,8 @@ Contents
|
|||
Special types of <i>Field</i>s
|
||||
</h4>
|
||||
<p>
|
||||
A <i>Field</i> may require a particular <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type">type</a> of data, such as an email or a phone number.
|
||||
A <i>Field</i> may require a particular
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type">type</a> of data, such as an email or a phone number.
|
||||
</p>
|
||||
<form class="panel">
|
||||
<p>
|
||||
|
|
@ -1474,7 +1571,8 @@ Contents
|
|||
A <dfn id="dfn-multiselect">Multiselect</dfn> is an <i>Input</i> which allows the user to <b>enable or disable multiple options</b>.
|
||||
</p>
|
||||
<p>
|
||||
Be aware that the average user will probably not know how to interact with the <i>Multiselect</i>: to select options not adjacent to each other on a desktop browser, it requires holding the <kbd>Ctrl</kbd> key.
|
||||
Be aware that the average user will probably not know how to interact with the
|
||||
<i>Multiselect</i>: to select options not adjacent to each other on a desktop browser, it requires holding the <kbd>Ctrl</kbd> key.
|
||||
</p>
|
||||
<form class="panel float-bottom">
|
||||
<p>
|
||||
|
|
@ -1511,7 +1609,8 @@ Contents
|
|||
Radio
|
||||
</h3>
|
||||
<p>
|
||||
<dfn id="dfn-radio">Radios</dfn> are <i>Input</i>s which, like a <i>Select</i>, allow the user to select between <b>one of multiple options</b> when grouped together.
|
||||
<dfn id="dfn-radio">Radios</dfn> are <i>Input</i>s which, like a <i>Select</i>, allow the user to select between
|
||||
<b>one of multiple options</b> when grouped together.
|
||||
</p>
|
||||
<form class="panel float-bottom">
|
||||
<p>
|
||||
|
|
@ -1551,7 +1650,8 @@ Contents
|
|||
Checkbox
|
||||
</h3>
|
||||
<p>
|
||||
<dfn id="dfn-checkbox">Checkboxes</dfn> are <i>Input</i>s which, like a <i>Multiselect</i>, allows the user to <b>enable or disable multiple options</b> when grouped together.
|
||||
<dfn id="dfn-checkbox">Checkboxes</dfn> are <i>Input</i>s which, like a <i>Multiselect</i>, allows the user to
|
||||
<b>enable or disable multiple options</b> when grouped together.
|
||||
</p>
|
||||
<form class="panel float-bottom">
|
||||
<p>
|
||||
|
|
@ -1803,5 +1903,5 @@ Contents
|
|||
<a href="https://github.com/Steffo99/bluelib">GitHub</a>
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
* @returns {boolean} `true` if the rendering is complete, `false` otherwise.
|
||||
*/
|
||||
function isLessDone() {
|
||||
const lessSheets = document.querySelectorAll('link[rel="stylesheet/less"]')
|
||||
const cssSheets = document.querySelectorAll('style')
|
||||
const lessSheets = document.querySelectorAll("link[rel=\"stylesheet/less\"]")
|
||||
const cssSheets = document.querySelectorAll("style")
|
||||
|
||||
return lessSheets.length === cssSheets.length
|
||||
}
|
||||
|
|
@ -43,32 +43,44 @@ async function enableChanges() {
|
|||
await sleepUntilLessIsDone()
|
||||
|
||||
lessStyles = [...document.styleSheets].filter(
|
||||
(s) => s.ownerNode.id.startsWith("less:dist")
|
||||
(s) => s.ownerNode.id.startsWith("less:dist"),
|
||||
).map(
|
||||
(s) => ({[s.ownerNode.id]: s})
|
||||
(s) => (
|
||||
{ [s.ownerNode.id]: s }
|
||||
),
|
||||
).reduce(
|
||||
(p, c) => ({...p, ...c}),
|
||||
{}
|
||||
(p, c) => (
|
||||
{ ...p, ...c }
|
||||
),
|
||||
{},
|
||||
)
|
||||
console.debug("Found Less stylesheets:", lessStyles)
|
||||
|
||||
lessColors = [...document.styleSheets].filter(
|
||||
(s) => s.ownerNode.id.startsWith("less:dist-colors")
|
||||
(s) => s.ownerNode.id.startsWith("less:dist-colors"),
|
||||
).map(
|
||||
(s) => ({[s.ownerNode.id]: s})
|
||||
(s) => (
|
||||
{ [s.ownerNode.id]: s }
|
||||
),
|
||||
).reduce(
|
||||
(p, c) => ({...p, ...c}),
|
||||
{}
|
||||
(p, c) => (
|
||||
{ ...p, ...c }
|
||||
),
|
||||
{},
|
||||
)
|
||||
console.debug("Found Less colors:", lessColors)
|
||||
|
||||
lessFonts = [...document.styleSheets].filter(
|
||||
(s) => s.ownerNode.id.startsWith("less:dist-fonts")
|
||||
(s) => s.ownerNode.id.startsWith("less:dist-fonts"),
|
||||
).map(
|
||||
(s) => ({[s.ownerNode.id]: s})
|
||||
(s) => (
|
||||
{ [s.ownerNode.id]: s }
|
||||
),
|
||||
).reduce(
|
||||
(p, c) => ({...p, ...c}),
|
||||
{}
|
||||
(p, c) => (
|
||||
{ ...p, ...c }
|
||||
),
|
||||
{},
|
||||
)
|
||||
console.debug("Found Less fonts:", lessFonts)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="0; url=examples/index.html" />
|
||||
<meta http-equiv="refresh" content="0; url=examples/index.html"/>
|
||||
<title>Redirecting...</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -27,25 +27,17 @@
|
|||
///
|
||||
/// For example, acceptable parameters may be: "+ 10deg", "/ 2", "* 1000", "- var(--something)", and so on.
|
||||
.hsl-group(@name) {
|
||||
@c: hsl(
|
||||
var(~"--bhsl-@{name}-hue")
|
||||
var(~"--bhsl-@{name}-saturation")
|
||||
var(~"--bhsl-@{name}-lightness")
|
||||
);
|
||||
@c: hsl(var(~"--bhsl-@{name}-hue") var(~"--bhsl-@{name}-saturation") var(~"--bhsl-@{name}-lightness"));
|
||||
}
|
||||
|
||||
.hsl-group(@name; @alpha) {
|
||||
@c: hsl(
|
||||
var(~"--bhsl-@{name}-hue")
|
||||
var(~"--bhsl-@{name}-saturation")
|
||||
@c: hsl(var(~"--bhsl-@{name}-hue") var(~"--bhsl-@{name}-saturation")
|
||||
var(~"--bhsl-@{name}-lightness")
|
||||
/ @alpha
|
||||
);
|
||||
/ @alpha);
|
||||
}
|
||||
|
||||
.hsl-group(@name; @hue-changes; @saturation-changes; @lightness-changes; @alpha) {
|
||||
@c: hsl(
|
||||
calc(var(~"--bhsl-@{name}-hue") ~"@{hue-changes}")
|
||||
calc(var(~"--bhsl-@{name}-saturation") ~"@{saturation-changes}")
|
||||
@c: hsl(calc(var(~"--bhsl-@{name}-hue") ~"@{hue-changes}") calc(var(~"--bhsl-@{name}-saturation") ~"@{saturation-changes}")
|
||||
calc(var(~"--bhsl-@{name}-lightness") ~"@{lightness-changes}")
|
||||
/ @alpha
|
||||
);
|
||||
/ @alpha);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,19 +90,24 @@
|
|||
@{float-top} {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
@{float-right} {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@{float-bottom} {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
@{float-left} {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@{float-hcenter} {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@{float-vcenter} {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
|
|
@ -170,14 +175,17 @@
|
|||
border-top-width: 2px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
&@{border-right}, &@{panel-box} {
|
||||
border-right-width: 2px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
&@{border-left}, &@{panel-box}, &@{panel-dialog} {
|
||||
border-left-width: 2px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
&@{border-bottom}, &@{panel-box} {
|
||||
border-bottom-width: 2px;
|
||||
padding-bottom: 6px;
|
||||
|
|
@ -213,41 +221,49 @@
|
|||
flex-basis: calc(100% / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@{chapter-2} {
|
||||
> @{all} {
|
||||
flex-basis: calc(100% / 3);
|
||||
}
|
||||
}
|
||||
|
||||
@{chapter-3} {
|
||||
> @{all} {
|
||||
flex-basis: calc(100% / 4);
|
||||
}
|
||||
}
|
||||
|
||||
@{chapter-4} {
|
||||
> @{all} {
|
||||
flex-basis: calc(100% / 5);
|
||||
}
|
||||
}
|
||||
|
||||
@{chapter-5} {
|
||||
> @{all} {
|
||||
flex-basis: calc(100% / 6);
|
||||
}
|
||||
}
|
||||
|
||||
@{chapter-6} {
|
||||
> @{all} {
|
||||
flex-basis: calc(100% / 7);
|
||||
}
|
||||
}
|
||||
|
||||
@{chapter-7} {
|
||||
> @{all} {
|
||||
flex-basis: calc(100% / 8);
|
||||
}
|
||||
}
|
||||
|
||||
@{chapter-8} {
|
||||
> @{all} {
|
||||
flex-basis: calc(100% / 9);
|
||||
}
|
||||
}
|
||||
|
||||
@{chapter-9} {
|
||||
> @{all} {
|
||||
flex-basis: calc(100% / 10);
|
||||
|
|
@ -555,18 +571,23 @@
|
|||
@{modifier-red} {
|
||||
.map-hsl-group(current; red);
|
||||
}
|
||||
|
||||
@{modifier-yellow} {
|
||||
.map-hsl-group(current; yellow);
|
||||
}
|
||||
|
||||
@{modifier-green} {
|
||||
.map-hsl-group(current; green);
|
||||
}
|
||||
|
||||
@{modifier-cyan} {
|
||||
.map-hsl-group(current; cyan);
|
||||
}
|
||||
|
||||
@{modifier-blue} {
|
||||
.map-hsl-group(current; blue);
|
||||
}
|
||||
|
||||
@{modifier-magenta} {
|
||||
.map-hsl-group(current; magenta);
|
||||
}
|
||||
|
|
@ -628,6 +649,7 @@
|
|||
// Fields and selects should have a bottom border
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
@{input-area}, @{input-multiselect} {
|
||||
// Areas and multiselects should have a left border
|
||||
border-left-width: 2px;
|
||||
|
|
@ -637,12 +659,15 @@
|
|||
@{input-field}:not(@{property-disabled}), @{input-area}:not(@{property-disabled}) {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
@{input-select}:not(@{property-disabled}), @{input-multiselect}:not(@{property-disabled}) {
|
||||
cursor: vertical-text;
|
||||
}
|
||||
|
||||
@{input-range}:not(@{property-disabled}) {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
@{input-radio}:not(@{property-disabled}), @{input-checkbox}:not(@{property-disabled}), @{input-button}:not(@{property-disabled}), @{input-color}:not(@{property-disabled}) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -701,6 +726,7 @@
|
|||
background-color: .hsl-group(current)[@c];
|
||||
}
|
||||
}
|
||||
|
||||
@{input-radio} {
|
||||
// Radios should be round
|
||||
border-radius: 100%;
|
||||
|
|
@ -754,7 +780,7 @@
|
|||
}
|
||||
|
||||
// Webkit hacks
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
// Make the icons that webkit randomly add to fields AT LEAST use the correct color
|
||||
@{input-field} {
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
|
|
@ -839,6 +865,7 @@
|
|||
@{text-idiomatic} {
|
||||
.use-font-group(idiomatic);
|
||||
}
|
||||
|
||||
@{text-emphasis} {
|
||||
.use-font-group(emphasis);
|
||||
}
|
||||
|
|
@ -846,6 +873,7 @@
|
|||
@{text-attention} {
|
||||
.use-font-group(attention);
|
||||
}
|
||||
|
||||
@{text-strong} {
|
||||
.use-font-group(strong);
|
||||
}
|
||||
|
|
@ -853,6 +881,7 @@
|
|||
@{text-inserted} {
|
||||
.map-hsl-group(current; inserted);
|
||||
}
|
||||
|
||||
@{text-deleted} {
|
||||
.map-hsl-group(current; deleted);
|
||||
}
|
||||
|
|
@ -860,12 +889,15 @@
|
|||
@{text-code}, @{text-preformatted}, @{text-input}, @{text-output} {
|
||||
.use-font-group(code);
|
||||
}
|
||||
|
||||
@{text-preformatted} {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
@{text-input}, @{text-output} {
|
||||
padding: 0 0.25ex;
|
||||
}
|
||||
|
||||
@{text-input} {
|
||||
background-color: .hsl-group(sample-output)[@c];
|
||||
.map-hsl-group(current; sample-input);
|
||||
|
|
@ -874,6 +906,7 @@
|
|||
.use-font-group(boldcode);
|
||||
}
|
||||
}
|
||||
|
||||
@{text-output} {
|
||||
background-color: .hsl-group(sample-input)[@c];
|
||||
.map-hsl-group(current; sample-output);
|
||||
|
|
|
|||
|
|
@ -104,9 +104,11 @@
|
|||
@{input-field}, @{input-select} {
|
||||
border-radius: var(--b-border-radius) var(--b-border-radius) 0 0;
|
||||
}
|
||||
|
||||
@{input-area}, @{input-multiselect} {
|
||||
border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0;
|
||||
}
|
||||
|
||||
@{input-button} {
|
||||
border-radius: var(--b-border-radius);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -251,17 +251,17 @@
|
|||
|
||||
@{bluelib} {
|
||||
// @name; @style; @variant; @weight;@stretch; @size; @height; @family
|
||||
.create-font-group( text; normal; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group( header; normal; normal; 600; normal; regular; 1.7; "Fira Sans", sans-serif);
|
||||
.create-font-group( code; normal; normal; 400; normal; regular; 1.3; "Fira Mono", monospace);
|
||||
.create-font-group( boldcode; normal; normal; 600; normal; regular; 1.3; "Fira Mono", monospace);
|
||||
.create-font-group( term; italic; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group( summary; italic; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group(text; normal; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group(header; normal; normal; 600; normal; regular; 1.7; "Fira Sans", sans-serif);
|
||||
.create-font-group(code; normal; normal; 400; normal; regular; 1.3; "Fira Mono", monospace);
|
||||
.create-font-group(boldcode; normal; normal; 600; normal; regular; 1.3; "Fira Mono", monospace);
|
||||
.create-font-group(term; italic; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group(summary; italic; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group(idiomatic; italic; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group( emphasis; italic; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group(emphasis; italic; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group(attention; normal; normal; 600; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group( strong; normal; normal; 900; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group( variable; normal; normal; 300; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group( citation; normal; small-caps; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group( label; normal; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group(strong; normal; normal; 900; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group(variable; normal; normal; 300; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group(citation; normal; small-caps; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
.create-font-group(label; normal; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,10 +18,7 @@
|
|||
|
||||
@{panel}, @{table}@{panel} > @{table-caption} {
|
||||
background-color: .hsl-group(background; var(--b-panel-initial-opacity))[@c];
|
||||
backdrop-filter:
|
||||
blur(var(--b-panel-blur))
|
||||
hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))
|
||||
;
|
||||
backdrop-filter: blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)));
|
||||
|
||||
@{panel} {
|
||||
background-color: .hsl-group(current; var(--b-panel-nested-opacity))[@c];
|
||||
|
|
@ -59,11 +56,9 @@
|
|||
// Make to-do have a glass background too
|
||||
@{panel}@{modifier-todo} {
|
||||
background-color: .hsl-group(todo-background; 0.3)[@c];
|
||||
backdrop-filter:
|
||||
blur(var(--b-panel-blur))
|
||||
grayscale(100%)
|
||||
;
|
||||
backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%);
|
||||
}
|
||||
|
||||
@{panel} {
|
||||
@{panel}@{modifier-todo} {
|
||||
background-color: .hsl-group(todo-background)[@c];
|
||||
|
|
|
|||
Loading…
Reference in a new issue