mirror of
https://github.com/Steffo99/bluelib.git
synced 2025-01-03 00:54:20 +00:00
🔧 Replace .container-main with .layout-*
This commit is contained in:
parent
3fb2679646
commit
bfe5a48282
12 changed files with 1021 additions and 595 deletions
786
index.html
786
index.html
|
|
@ -11,429 +11,437 @@
|
|||
</style>
|
||||
</head>
|
||||
<body class="theme-bluelib">
|
||||
<main class="main">
|
||||
<hgroup>
|
||||
<h1>
|
||||
Bluelib 2
|
||||
</h1>
|
||||
<h2>
|
||||
RYG style, in pure CSS
|
||||
</h2>
|
||||
</hgroup>
|
||||
<section>
|
||||
<h3>
|
||||
Welcome to bluelib!
|
||||
</h3>
|
||||
<p>
|
||||
Following are some examples on the things you can do with bluelib.
|
||||
</p>
|
||||
<p>
|
||||
To see how something is done, <kbd>Right Click</kbd> on it and then press <kbd>Inspect Element</kbd>.
|
||||
</p>
|
||||
<img class="image-limited" src="https://i.imgur.com/M8sFJeO.png" alt="How to Inspect Element">
|
||||
</section>
|
||||
<hgroup>
|
||||
<h1>
|
||||
Bluelib 2
|
||||
</h1>
|
||||
<h2>
|
||||
Panels
|
||||
RYG style, in pure CSS
|
||||
</h2>
|
||||
<section>
|
||||
<h3>
|
||||
Panel
|
||||
</h3>
|
||||
<p>
|
||||
This is a panel.
|
||||
</p>
|
||||
<p>
|
||||
It usually represents a section of text about a topic described by the title above.
|
||||
</p>
|
||||
</section>
|
||||
<blockquote>
|
||||
<h3>
|
||||
Blockquote
|
||||
</h3>
|
||||
<p>
|
||||
This is a blockquote.
|
||||
</p>
|
||||
<p>
|
||||
Blockquotes are specially formatted panels, useful for quotes!
|
||||
</p>
|
||||
</blockquote>
|
||||
<aside>
|
||||
<h3>
|
||||
Aside
|
||||
</h3>
|
||||
<p>
|
||||
This is an aside.
|
||||
</p>
|
||||
<p>
|
||||
Asides are panels with no border and smaller text, useful to describe less important things while inside
|
||||
a panel.
|
||||
</p>
|
||||
</aside>
|
||||
<h2>
|
||||
Close containers
|
||||
</h2>
|
||||
<section>
|
||||
<p>
|
||||
Here's what two panels next to each other look like:
|
||||
</p>
|
||||
<aside>
|
||||
<p>
|
||||
STONKS
|
||||
</p>
|
||||
</aside>
|
||||
<aside>
|
||||
<p>
|
||||
STINKS
|
||||
</p>
|
||||
</aside>
|
||||
</section>
|
||||
<h2>
|
||||
Nesting containers
|
||||
</h2>
|
||||
<section>
|
||||
<h3>
|
||||
Level one
|
||||
</h3>
|
||||
<p>
|
||||
Containers can be nested effortlessly!
|
||||
</p>
|
||||
<p>
|
||||
Drop one outside of any paragraphs and they will nest automatically.
|
||||
</p>
|
||||
</hgroup>
|
||||
<div class="layout layout-threecol">
|
||||
<main class="main layout-threecol-center">
|
||||
<section>
|
||||
<h3>
|
||||
Level two
|
||||
Welcome to bluelib!
|
||||
</h3>
|
||||
<p>
|
||||
You can add text above...
|
||||
Following are some examples on the things you can do with bluelib.
|
||||
</p>
|
||||
<p>
|
||||
To see how something is done, <kbd>Right Click</kbd> on it and then press <kbd>Inspect Element</kbd>.
|
||||
</p>
|
||||
<img class="image-limited" src="https://i.imgur.com/M8sFJeO.png" alt="How to Inspect Element">
|
||||
</section>
|
||||
<h2>
|
||||
Panels
|
||||
</h2>
|
||||
<section>
|
||||
<h3>
|
||||
Panel
|
||||
</h3>
|
||||
<p>
|
||||
This is a panel.
|
||||
</p>
|
||||
<p>
|
||||
It usually represents a section of text about a topic described by the title above.
|
||||
</p>
|
||||
</section>
|
||||
<blockquote>
|
||||
<h3>
|
||||
Blockquote
|
||||
</h3>
|
||||
<p>
|
||||
This is a blockquote.
|
||||
</p>
|
||||
<p>
|
||||
Blockquotes are specially formatted panels, useful for quotes!
|
||||
</p>
|
||||
</blockquote>
|
||||
<aside>
|
||||
<h3>
|
||||
Aside
|
||||
</h3>
|
||||
<p>
|
||||
This is an aside.
|
||||
</p>
|
||||
<p>
|
||||
Asides are panels with no border and smaller text, useful to describe less important things while inside
|
||||
a panel.
|
||||
</p>
|
||||
</aside>
|
||||
<h2>
|
||||
Close containers
|
||||
</h2>
|
||||
<section>
|
||||
<p>
|
||||
Here's what two panels next to each other look like:
|
||||
</p>
|
||||
<aside>
|
||||
<p>
|
||||
STONKS
|
||||
</p>
|
||||
</aside>
|
||||
<aside>
|
||||
<p>
|
||||
STINKS
|
||||
</p>
|
||||
</aside>
|
||||
</section>
|
||||
<h2>
|
||||
Nesting containers
|
||||
</h2>
|
||||
<section>
|
||||
<h3>
|
||||
Level one
|
||||
</h3>
|
||||
<p>
|
||||
Containers can be nested effortlessly!
|
||||
</p>
|
||||
<p>
|
||||
Drop one outside of any paragraphs and they will nest automatically.
|
||||
</p>
|
||||
<section>
|
||||
<h3>
|
||||
Level three
|
||||
Level two
|
||||
</h3>
|
||||
<p>
|
||||
How deep does the rabbit hole go?
|
||||
You can add text above...
|
||||
</p>
|
||||
<blockquote>
|
||||
<b><a href="https://www.youtube.com/watch?v=G2jUhnCU9iA" target="_blank">PANELCEPTION.</a></b>
|
||||
<aside>
|
||||
BWOON.
|
||||
<section>
|
||||
<h3>
|
||||
Level three
|
||||
</h3>
|
||||
<p>
|
||||
How deep does the rabbit hole go?
|
||||
</p>
|
||||
<blockquote>
|
||||
<b><a href="https://www.youtube.com/watch?v=G2jUhnCU9iA" target="_blank">PANELCEPTION.</a></b>
|
||||
<aside>
|
||||
BWOON.
|
||||
<aside>
|
||||
BWOON.
|
||||
<aside>
|
||||
BWOON.
|
||||
</aside>
|
||||
</aside>
|
||||
</aside>
|
||||
</aside>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</section>
|
||||
<p>
|
||||
...or below!
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
<h2>
|
||||
Layout
|
||||
</h2>
|
||||
<section>
|
||||
<h3>
|
||||
Splitter and splitted
|
||||
</h3>
|
||||
<p>
|
||||
...or below!
|
||||
You can split elements into multiple columns.
|
||||
</p>
|
||||
<p>
|
||||
The columns will grow automatically to on the height of the tallest.
|
||||
</p>
|
||||
<div class="panel panel-split">
|
||||
<section>
|
||||
<h3>
|
||||
Shorter panel
|
||||
</h3>
|
||||
<p>
|
||||
That's it.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Taller panel
|
||||
</h3>
|
||||
<p><a href="https://bit.ly/3ou3jzG">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Giro in barca ma teme che le diverse e
|
||||
grandi prestazioni morbide. Per essere sempre un letto posuere posuere velit, ac lacinia ai
|
||||
bordi di un lago. Vestibulum vehicles, metus blandit fringilla of life, volutpat arcu lorem mi,
|
||||
eget porttitor augue turpis vitae libero. Laghi che ora hanno bisogno solo di proteine presenti
|
||||
membri del calcio. Nessuna temperatura libera UE. Attualmente le forze dell'ordine sono libere.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Calcio scommesse chili ricette
|
||||
calcio taccuino, con un morbido banane.
|
||||
</a></p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Horizonal rows
|
||||
</h3>
|
||||
<p>
|
||||
You can add horizontal rows to the page:
|
||||
</p>
|
||||
<hr>
|
||||
<p>
|
||||
They are very useful as separators!
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
<h2>
|
||||
Layout
|
||||
</h2>
|
||||
<section>
|
||||
<h3>
|
||||
Splitter and splitted
|
||||
</h3>
|
||||
<p>
|
||||
You can split elements into multiple columns.
|
||||
</p>
|
||||
<p>
|
||||
The columns will grow automatically to on the height of the tallest.
|
||||
</p>
|
||||
<h2>
|
||||
Formatting
|
||||
</h2>
|
||||
<div class="panel panel-split">
|
||||
<section>
|
||||
<h3>
|
||||
Shorter panel
|
||||
Colors
|
||||
</h3>
|
||||
<p>
|
||||
That's it.
|
||||
You can use colored text:
|
||||
</p>
|
||||
<ul>
|
||||
<li><span class="color-red">Red</span></li>
|
||||
<li><span class="color-orange">Orange</span></li>
|
||||
<li><span class="color-yellow">Yellow</span></li>
|
||||
<li><span class="color-lime">Lime</span></li>
|
||||
<li><span class="color-cyan">Cyan</span></li>
|
||||
<li><span class="color-blue">Blue</span></li>
|
||||
<li><span class="color-magenta">Magenta</span></li>
|
||||
<li><span class="color-gray">Gray</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Size
|
||||
</h3>
|
||||
<p>
|
||||
You can set the text size:
|
||||
</p>
|
||||
<ul>
|
||||
<li><span class="size-xxl">XXL</span></li>
|
||||
<li><span class="size-xl">XL</span></li>
|
||||
<li><span class="size-l">L</span></li>
|
||||
<li><span class="size-m">M</span></li>
|
||||
<li><span class="size-s">S</span></li>
|
||||
<li><span class="size-xs">XS</span></li>
|
||||
<li><span class="size-xxs">XXS</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Alignment
|
||||
</h3>
|
||||
<p>
|
||||
You can set the text alignment (<i>only in block elements</i> such as div):
|
||||
</p>
|
||||
<div class="align-left">Left</div>
|
||||
<div class="align-center">Center</div>
|
||||
<div class="align-right">Right</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Style
|
||||
</h3>
|
||||
<p>
|
||||
You can use all the usual text styles:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Regular</li>
|
||||
<li><b>Bold</b></li>
|
||||
<li><i>Italic</i></li>
|
||||
<li><u>Underlined</u></li>
|
||||
<li><s>Struck</s></li>
|
||||
<li><code>Code</code></li>
|
||||
<li><b><i><u><s><code>All of them together</code></s></u></i></b></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<h2>
|
||||
Elements
|
||||
</h2>
|
||||
<div class="panel panel-split">
|
||||
<section>
|
||||
<h3>
|
||||
Buttons
|
||||
</h3>
|
||||
<p>
|
||||
Bluelib supports buttons:
|
||||
</p>
|
||||
<p>
|
||||
<button>
|
||||
Hi, I'm a inline default button!
|
||||
</button>
|
||||
or
|
||||
<input class="color-lime" type="submit" value="Hi, I'm a lime submit button!"/>
|
||||
</p>
|
||||
<p>
|
||||
<button class="button-fill-width color-orange">
|
||||
I'm stretched horizontally!
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<button disabled class="button-fill-width">
|
||||
Can't click on this!
|
||||
</button>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Taller panel
|
||||
Toggle buttons
|
||||
</h3>
|
||||
<p><a href="https://bit.ly/3ou3jzG">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Giro in barca ma teme che le diverse e
|
||||
grandi prestazioni morbide. Per essere sempre un letto posuere posuere velit, ac lacinia ai
|
||||
bordi di un lago. Vestibulum vehicles, metus blandit fringilla of life, volutpat arcu lorem mi,
|
||||
eget porttitor augue turpis vitae libero. Laghi che ora hanno bisogno solo di proteine presenti
|
||||
membri del calcio. Nessuna temperatura libera UE. Attualmente le forze dell'ordine sono libere.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Calcio scommesse chili ricette
|
||||
calcio taccuino, con un morbido banane.
|
||||
</a></p>
|
||||
<p>
|
||||
Bluelib supports buttons that can be toggled on and off:
|
||||
</p>
|
||||
<p>
|
||||
<button class="button-toggle button-toggle-off">
|
||||
Toggled off
|
||||
</button>
|
||||
|
||||
<button class="button-toggle button-toggle-on">
|
||||
Toggled on
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="button-toggle button-toggle-off color-red">
|
||||
Colored off
|
||||
</button>
|
||||
|
||||
<button class="button-toggle button-toggle-on color-lime">
|
||||
Colored on
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<button disabled class="button-toggle button-toggle-off">
|
||||
Disabled off
|
||||
</button>
|
||||
|
||||
<button disabled class="button-toggle button-toggle-on">
|
||||
Disabled on
|
||||
</button>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Horizonal rows
|
||||
</h3>
|
||||
<p>
|
||||
You can add horizontal rows to the page:
|
||||
</p>
|
||||
<hr>
|
||||
<p>
|
||||
They are very useful as separators!
|
||||
</p>
|
||||
</section>
|
||||
<h2>
|
||||
Formatting
|
||||
</h2>
|
||||
<div class="panel panel-split">
|
||||
<section>
|
||||
<h3>
|
||||
Colors
|
||||
</h3>
|
||||
<p>
|
||||
You can use colored text:
|
||||
</p>
|
||||
<ul>
|
||||
<li><span class="color-red">Red</span></li>
|
||||
<li><span class="color-orange">Orange</span></li>
|
||||
<li><span class="color-yellow">Yellow</span></li>
|
||||
<li><span class="color-lime">Lime</span></li>
|
||||
<li><span class="color-cyan">Cyan</span></li>
|
||||
<li><span class="color-blue">Blue</span></li>
|
||||
<li><span class="color-magenta">Magenta</span></li>
|
||||
<li><span class="color-gray">Gray</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Size
|
||||
</h3>
|
||||
<p>
|
||||
You can set the text size:
|
||||
</p>
|
||||
<ul>
|
||||
<li><span class="size-xxl">XXL</span></li>
|
||||
<li><span class="size-xl">XL</span></li>
|
||||
<li><span class="size-l">L</span></li>
|
||||
<li><span class="size-m">M</span></li>
|
||||
<li><span class="size-s">S</span></li>
|
||||
<li><span class="size-xs">XS</span></li>
|
||||
<li><span class="size-xxs">XXS</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Alignment
|
||||
</h3>
|
||||
<p>
|
||||
You can set the text alignment (<i>only in block elements</i> such as div):
|
||||
</p>
|
||||
<div class="align-left">Left</div>
|
||||
<div class="align-center">Center</div>
|
||||
<div class="align-right">Right</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Style
|
||||
</h3>
|
||||
<p>
|
||||
You can use all the usual text styles:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Regular</li>
|
||||
<li><b>Bold</b></li>
|
||||
<li><i>Italic</i></li>
|
||||
<li><u>Underlined</u></li>
|
||||
<li><s>Struck</s></li>
|
||||
<li><code>Code</code></li>
|
||||
<li><b><i><u><s><code>All of them together</code></s></u></i></b></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<h2>
|
||||
Elements
|
||||
</h2>
|
||||
<div class="panel panel-split">
|
||||
<section>
|
||||
<h3>
|
||||
Buttons
|
||||
</h3>
|
||||
<p>
|
||||
Bluelib supports buttons:
|
||||
</p>
|
||||
<p>
|
||||
<button>
|
||||
Hi, I'm a inline default button!
|
||||
</button>
|
||||
or
|
||||
<input class="color-lime" type="submit" value="Hi, I'm a lime submit button!"/>
|
||||
</p>
|
||||
<p>
|
||||
<button class="button-fill-width color-orange">
|
||||
I'm stretched horizontally!
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<button disabled class="button-fill-width">
|
||||
Can't click on this!
|
||||
</button>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Toggle buttons
|
||||
</h3>
|
||||
<p>
|
||||
Bluelib supports buttons that can be toggled on and off:
|
||||
</p>
|
||||
<p>
|
||||
<button class="button-toggle button-toggle-off">
|
||||
Toggled off
|
||||
</button>
|
||||
|
||||
<button class="button-toggle button-toggle-on">
|
||||
Toggled on
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="button-toggle button-toggle-off color-red">
|
||||
Colored off
|
||||
</button>
|
||||
|
||||
<button class="button-toggle button-toggle-on color-lime">
|
||||
Colored on
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<button disabled class="button-toggle button-toggle-off">
|
||||
Disabled off
|
||||
</button>
|
||||
|
||||
<button disabled class="button-toggle button-toggle-on">
|
||||
Disabled on
|
||||
</button>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<h2>
|
||||
Coloring panels
|
||||
</h2>
|
||||
<div class="panel panel-split">
|
||||
<section class="color-red">
|
||||
<h3>
|
||||
Panels can be recolored!
|
||||
</h3>
|
||||
<p>
|
||||
Elements contained inside will be recolored accordingly.
|
||||
</p>
|
||||
</section>
|
||||
<blockquote class="color-lime">
|
||||
<h3>
|
||||
It works on all types of panels!
|
||||
</h3>
|
||||
<p>
|
||||
This blockquote should be green!
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
And so should be the separator above.
|
||||
</p>
|
||||
</blockquote>
|
||||
<aside class="color-blue">
|
||||
<h3>
|
||||
Smol blue aside
|
||||
</h3>
|
||||
<p>
|
||||
The buttons below should be automatically colored blue.
|
||||
</p>
|
||||
<button>
|
||||
Blue button
|
||||
</button>
|
||||
<button class="button-toggle button-toggle-off">
|
||||
Blue toggle off
|
||||
</button>
|
||||
<button class="button-toggle button-toggle-on">
|
||||
Blue toggle on
|
||||
</button>
|
||||
</aside>
|
||||
</div>
|
||||
<h2>
|
||||
Interactivity
|
||||
</h2>
|
||||
<div class="panel panel-split">
|
||||
<section>
|
||||
<h3>
|
||||
Tooltips
|
||||
</h3>
|
||||
<p>
|
||||
Text <abbr title="Hello world!">with a tooltip</abbr> is underlined and has a "help" cursor if
|
||||
hovered.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Disabled
|
||||
</h3>
|
||||
<p>
|
||||
Elements can be <span class="status-disabled">disabled</span> to reduce their opacity and display a
|
||||
"not allowed" cursor if hovered.
|
||||
</p>
|
||||
<p>
|
||||
It also works with <a disabled class="status-disabled">links</a>!
|
||||
</p>
|
||||
<section class="status-disabled">
|
||||
And panels!
|
||||
<h2>
|
||||
Coloring panels
|
||||
</h2>
|
||||
<div class="panel panel-split">
|
||||
<section class="color-red">
|
||||
<h3>
|
||||
Panels can be recolored!
|
||||
</h3>
|
||||
<p>
|
||||
Elements contained inside will be recolored accordingly.
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
<h2>
|
||||
Forms
|
||||
</h2>
|
||||
<div class="panel panel-split">
|
||||
<section>
|
||||
<h3>
|
||||
Inputs
|
||||
</h3>
|
||||
<p>
|
||||
Bluelib allows for the easy creation of forms:
|
||||
</p>
|
||||
<form>
|
||||
<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/>
|
||||
<label for="input-select">Select</label>
|
||||
<select id="input-select">
|
||||
<option>A</option>
|
||||
<option>B</option>
|
||||
<option>C</option>
|
||||
<optgroup label="D">
|
||||
<option>D.1</option>
|
||||
<option>D.2</option>
|
||||
<option>D.3</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<label for="input-multiple">Multiple</label>
|
||||
<select id="input-multiple" multiple>
|
||||
<option>A</option>
|
||||
<option>B</option>
|
||||
<option>C</option>
|
||||
<optgroup label="D">
|
||||
<option>D.1</option>
|
||||
<option>D.2</option>
|
||||
<option>D.3</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<div class="form-buttons">
|
||||
<input id="input-submit" type="submit" value="Submit"/>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<blockquote class="color-lime">
|
||||
<h3>
|
||||
It works on all types of panels!
|
||||
</h3>
|
||||
<p>
|
||||
This blockquote should be green!
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
And so should be the separator above.
|
||||
</p>
|
||||
</blockquote>
|
||||
<aside class="color-blue">
|
||||
<h3>
|
||||
Smol blue aside
|
||||
</h3>
|
||||
<p>
|
||||
The buttons below should be automatically colored blue.
|
||||
</p>
|
||||
<button>
|
||||
Blue button
|
||||
</button>
|
||||
<button class="button-toggle button-toggle-off">
|
||||
Blue toggle off
|
||||
</button>
|
||||
<button class="button-toggle button-toggle-on">
|
||||
Blue toggle on
|
||||
</button>
|
||||
</aside>
|
||||
</div>
|
||||
<h2>
|
||||
Interactivity
|
||||
</h2>
|
||||
<div class="panel panel-split">
|
||||
<section>
|
||||
<h3>
|
||||
Tooltips
|
||||
</h3>
|
||||
<p>
|
||||
Text <abbr title="Hello world!">with a tooltip</abbr> is underlined and has a "help" cursor if
|
||||
hovered.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Disabled
|
||||
</h3>
|
||||
<p>
|
||||
Elements can be <span class="status-disabled">disabled</span> to reduce their opacity and display a
|
||||
"not allowed" cursor if hovered.
|
||||
</p>
|
||||
<p>
|
||||
It also works with <a disabled class="status-disabled">links</a>!
|
||||
</p>
|
||||
<section class="status-disabled">
|
||||
And panels!
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
<h2>
|
||||
Forms
|
||||
</h2>
|
||||
<div class="panel panel-split">
|
||||
<section>
|
||||
<h3>
|
||||
Inputs
|
||||
</h3>
|
||||
<p>
|
||||
Bluelib allows for the easy creation of forms:
|
||||
</p>
|
||||
<form>
|
||||
<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/>
|
||||
<label for="input-select">Select</label>
|
||||
<select id="input-select">
|
||||
<option>A</option>
|
||||
<option>B</option>
|
||||
<option>C</option>
|
||||
<optgroup label="D">
|
||||
<option>D.1</option>
|
||||
<option>D.2</option>
|
||||
<option>D.3</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<label for="input-multiple">Multiple</label>
|
||||
<select id="input-multiple" multiple>
|
||||
<option>A</option>
|
||||
<option>B</option>
|
||||
<option>C</option>
|
||||
<optgroup label="D">
|
||||
<option>D.1</option>
|
||||
<option>D.2</option>
|
||||
<option>D.3</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<div class="form-buttons">
|
||||
<input id="input-submit" type="submit" value="Submit"/>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<nav class="layout-threecol-left">
|
||||
I'm wrong.
|
||||
</nav>
|
||||
<nav class="layout-threecol-right">
|
||||
I'm right :)
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
122
src/rules/skeleton.less
vendored
122
src/rules/skeleton.less
vendored
|
|
@ -1,33 +1,127 @@
|
|||
@{bluelib} {
|
||||
// --- Root ---
|
||||
/// ===== Root =====
|
||||
/// Every HTML document using Bluelib must define a root, an element where all bluelib styles can start being applied.
|
||||
/// Elements outside the root won't be styled at all, allowing Bluelib's styling to be contained in components or modules of a website.
|
||||
|
||||
color: @bA;
|
||||
@{bluelib} {
|
||||
|
||||
// Set the background defined in the palette
|
||||
background-color: @hex-background;
|
||||
|
||||
// Set the base color to the foreground defined in the palette
|
||||
.bluelib-color(@hex-foreground);
|
||||
|
||||
// By default, text should use the main font
|
||||
.font-text();
|
||||
|
||||
/// ===== All =====
|
||||
/// By default, browsers style elements with some weird rules.
|
||||
/// This is an attempt to correct them, and to implement some Bluelib magic.
|
||||
|
||||
&, @{all} {
|
||||
box-sizing: border-box;
|
||||
|
||||
// Globally set the box-sizing to border-box, as content-box is completely insane
|
||||
&, &::before, &::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Bluelib magic!
|
||||
// This rule sets the color of all text to be equal to the current .bluelib-color() at 100% opacity.
|
||||
// Thanks, CSS variables!
|
||||
color: @bA;
|
||||
|
||||
/* Disable outline, as we already highlight focused elements; if it's not enough, let me know */
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/// ===== Layouts =====
|
||||
/// Layouts arrange the content displayed inside the root.
|
||||
/// Layouts are the second element in the Bluelib hierarchy, immediately following the root.
|
||||
/// Ideally, a single layout should be used per page.
|
||||
|
||||
// --- Containers ---
|
||||
// The base layout class.
|
||||
@{layout} {
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
|
||||
@{container-main} {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1280px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// A layout with a single container spanning the whole screen.
|
||||
@{layout-fill} {
|
||||
padding: 4px;
|
||||
|
||||
// --- Panels ---
|
||||
// Remember to use BOTH the panel AND the panel-* class when using a panel element!
|
||||
grid-template-areas:
|
||||
"single";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
// Base panel
|
||||
@{layout-fill-single} {
|
||||
grid-area: single;
|
||||
}
|
||||
|
||||
// A layout with a centered 1024px wide main container and two symmetric containers at the sides.
|
||||
@{layout-threecol} {
|
||||
padding: 4px;
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
grid-template-areas:
|
||||
"left center right";
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
// If the side containers would be smaller than 128px (if the screen is narrower than 1280px), the smaller containers are moved below the main one.
|
||||
@media screen and (max-width: 1280px) {
|
||||
grid-template-areas:
|
||||
"center center"
|
||||
"left right";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
|
||||
// Keep the container limited to 1024px and centered
|
||||
max-width: 1024px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@{layout-threecol-left} {
|
||||
grid-area: left;
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
@{layout-threecol-center} {
|
||||
grid-area: center;
|
||||
|
||||
// Ensure the container doesn't eat up all the space
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
@{layout-threecol-right} {
|
||||
grid-area: right;
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
/// ===== Panels =====
|
||||
/// Panels are the main sectioning elements available in Bluelib.
|
||||
/// Many instance of them should be present on the page!
|
||||
/// They should group small amounts of tightly related content, which can be understood more or less separately from the rest of the page.
|
||||
|
||||
// The base panel class.
|
||||
@{panel} {
|
||||
margin: 8px 0;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -133,7 +133,6 @@
|
|||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnFK_uQQ.ttf) format('truetype');
|
||||
}
|
||||
.bluelib {
|
||||
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;
|
||||
|
|
@ -144,15 +143,84 @@
|
|||
.bluelib,
|
||||
.bluelib *,
|
||||
.bluelib .all {
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
margin-right: auto;
|
||||
max-width: 1280px;
|
||||
.bluelib,
|
||||
.bluelib *,
|
||||
.bluelib .all,
|
||||
.bluelib::before,
|
||||
.bluelib *::before,
|
||||
.bluelib .all::before,
|
||||
.bluelib::after,
|
||||
.bluelib *::after,
|
||||
.bluelib .all::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bluelib .layout {
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
.bluelib .layout-fill {
|
||||
padding: 4px;
|
||||
grid-template-areas: "single";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
.bluelib .layout-fill > main,
|
||||
.bluelib .layout-fill-single {
|
||||
grid-area: single;
|
||||
}
|
||||
.bluelib .layout-threecol {
|
||||
padding: 4px;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "left center right";
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "center center" "left right";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
max-width: 1024px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
.bluelib .layout-threecol-left {
|
||||
grid-area: left;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
.bluelib .layout-threecol-center {
|
||||
grid-area: center;
|
||||
max-width: 1024px;
|
||||
}
|
||||
.bluelib .layout-threecol-right {
|
||||
grid-area: right;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
.bluelib .panel {
|
||||
margin: 8px 0;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -134,7 +134,6 @@
|
|||
}
|
||||
body,
|
||||
.bluelib {
|
||||
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;
|
||||
|
|
@ -148,18 +147,105 @@ body *,
|
|||
.bluelib *,
|
||||
body .all,
|
||||
.bluelib .all {
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
}
|
||||
body main,
|
||||
.bluelib main,
|
||||
body .container-main,
|
||||
.bluelib .container-main {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1280px;
|
||||
body,
|
||||
.bluelib,
|
||||
body *,
|
||||
.bluelib *,
|
||||
body .all,
|
||||
.bluelib .all,
|
||||
body::before,
|
||||
.bluelib::before,
|
||||
body *::before,
|
||||
.bluelib *::before,
|
||||
body .all::before,
|
||||
.bluelib .all::before,
|
||||
body::after,
|
||||
.bluelib::after,
|
||||
body *::after,
|
||||
.bluelib *::after,
|
||||
body .all::after,
|
||||
.bluelib .all::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body .layout,
|
||||
.bluelib .layout {
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
body .layout-fill,
|
||||
.bluelib .layout-fill {
|
||||
padding: 4px;
|
||||
grid-template-areas: "single";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
body .layout-fill-single,
|
||||
.bluelib .layout-fill-single {
|
||||
grid-area: single;
|
||||
}
|
||||
body .layout-threecol,
|
||||
.bluelib .layout-threecol {
|
||||
padding: 4px;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
body .layout-threecol,
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "left center right";
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
body .layout-threecol,
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "center center" "left right";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
max-width: 1024px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
body .layout-threecol-left,
|
||||
.bluelib .layout-threecol-left {
|
||||
grid-area: left;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
body .layout-threecol-left,
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
body .layout-threecol-left,
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
body .layout-threecol-center,
|
||||
.bluelib .layout-threecol-center {
|
||||
grid-area: center;
|
||||
max-width: 1024px;
|
||||
}
|
||||
body .layout-threecol-right,
|
||||
.bluelib .layout-threecol-right {
|
||||
grid-area: right;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
body .layout-threecol-right,
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
body .layout-threecol-right,
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
body .panel,
|
||||
.bluelib .panel,
|
||||
|
|
@ -874,12 +960,12 @@ body .form-input,
|
|||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
body form .button,
|
||||
.bluelib form .button,
|
||||
body button,
|
||||
.bluelib button,
|
||||
body form button,
|
||||
.bluelib form button,
|
||||
body input[type="submit"],
|
||||
.bluelib input[type="submit"],
|
||||
body .button,
|
||||
.bluelib .button,
|
||||
body form button,
|
||||
.bluelib form button,
|
||||
body .form-submit,
|
||||
|
|
@ -906,12 +992,12 @@ body .form-buttons:last-child,
|
|||
.bluelib .form-buttons:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body .button,
|
||||
.bluelib .button,
|
||||
body button,
|
||||
.bluelib button,
|
||||
body input[type="submit"],
|
||||
.bluelib input[type="submit"] {
|
||||
.bluelib input[type="submit"],
|
||||
body .button,
|
||||
.bluelib .button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -924,56 +1010,56 @@ body input[type="submit"],
|
|||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
body .button:hover,
|
||||
.bluelib .button:hover,
|
||||
body button:hover,
|
||||
.bluelib button:hover,
|
||||
body input[type="submit"]:hover,
|
||||
.bluelib input[type="submit"]:hover {
|
||||
.bluelib input[type="submit"]:hover,
|
||||
body .button:hover,
|
||||
.bluelib .button:hover {
|
||||
background-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
||||
}
|
||||
body .button:focus-visible,
|
||||
.bluelib .button:focus-visible,
|
||||
body button:focus-visible,
|
||||
.bluelib button:focus-visible,
|
||||
body input[type="submit"]:focus-visible,
|
||||
.bluelib input[type="submit"]:focus-visible {
|
||||
.bluelib input[type="submit"]:focus-visible,
|
||||
body .button:focus-visible,
|
||||
.bluelib .button:focus-visible {
|
||||
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
|
||||
}
|
||||
body .button:active,
|
||||
.bluelib .button:active,
|
||||
body button:active,
|
||||
.bluelib button:active,
|
||||
body input[type="submit"]:active,
|
||||
.bluelib input[type="submit"]:active {
|
||||
.bluelib input[type="submit"]:active,
|
||||
body .button:active,
|
||||
.bluelib .button:active {
|
||||
background-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||
}
|
||||
body .button[disabled]:hover,
|
||||
.bluelib .button[disabled]:hover,
|
||||
body button[disabled]:hover,
|
||||
.bluelib button[disabled]:hover,
|
||||
body input[type="submit"][disabled]:hover,
|
||||
.bluelib input[type="submit"][disabled]:hover,
|
||||
body .button .status-disabled:hover,
|
||||
.bluelib .button .status-disabled:hover,
|
||||
body .button[disabled]:hover,
|
||||
.bluelib .button[disabled]:hover,
|
||||
body button .status-disabled:hover,
|
||||
.bluelib button .status-disabled:hover,
|
||||
body input[type="submit"] .status-disabled:hover,
|
||||
.bluelib input[type="submit"] .status-disabled:hover {
|
||||
.bluelib input[type="submit"] .status-disabled:hover,
|
||||
body .button .status-disabled:hover,
|
||||
.bluelib .button .status-disabled:hover {
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
}
|
||||
body .button[disabled]:active,
|
||||
.bluelib .button[disabled]:active,
|
||||
body button[disabled]:active,
|
||||
.bluelib button[disabled]:active,
|
||||
body input[type="submit"][disabled]:active,
|
||||
.bluelib input[type="submit"][disabled]:active,
|
||||
body .button .status-disabled:active,
|
||||
.bluelib .button .status-disabled:active,
|
||||
body .button[disabled]:active,
|
||||
.bluelib .button[disabled]:active,
|
||||
body button .status-disabled:active,
|
||||
.bluelib button .status-disabled:active,
|
||||
body input[type="submit"] .status-disabled:active,
|
||||
.bluelib input[type="submit"] .status-disabled:active {
|
||||
.bluelib input[type="submit"] .status-disabled:active,
|
||||
body .button .status-disabled:active,
|
||||
.bluelib .button .status-disabled:active {
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
}
|
||||
body .button-fill-width,
|
||||
|
|
@ -1072,12 +1158,12 @@ body .button-toggle-on .status-disabled:active,
|
|||
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);
|
||||
}
|
||||
body .input,
|
||||
.bluelib .input,
|
||||
body input,
|
||||
.bluelib input,
|
||||
body select,
|
||||
.bluelib select {
|
||||
.bluelib select,
|
||||
body .input,
|
||||
.bluelib .input {
|
||||
border-style: solid;
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
|
|
@ -1085,135 +1171,135 @@ body select,
|
|||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
body .input::placeholder,
|
||||
.bluelib .input::placeholder,
|
||||
body input::placeholder,
|
||||
.bluelib input::placeholder,
|
||||
body select::placeholder,
|
||||
.bluelib select::placeholder {
|
||||
.bluelib select::placeholder,
|
||||
body .input::placeholder,
|
||||
.bluelib .input::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
body .input:optional,
|
||||
.bluelib .input:optional,
|
||||
body input:optional,
|
||||
.bluelib input:optional,
|
||||
body select:optional,
|
||||
.bluelib select:optional,
|
||||
body .input:optional::placeholder,
|
||||
.bluelib .input:optional::placeholder,
|
||||
body .input:optional,
|
||||
.bluelib .input:optional,
|
||||
body input:optional::placeholder,
|
||||
.bluelib input:optional::placeholder,
|
||||
body select:optional::placeholder,
|
||||
.bluelib select:optional::placeholder {
|
||||
.bluelib select:optional::placeholder,
|
||||
body .input:optional::placeholder,
|
||||
.bluelib .input:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
body .input:invalid:not(:placeholder-shown),
|
||||
.bluelib .input:invalid:not(:placeholder-shown),
|
||||
body input:invalid:not(:placeholder-shown),
|
||||
.bluelib input:invalid:not(:placeholder-shown),
|
||||
body select:invalid:not(:placeholder-shown),
|
||||
.bluelib select:invalid:not(:placeholder-shown) {
|
||||
.bluelib select:invalid:not(:placeholder-shown),
|
||||
body .input:invalid:not(:placeholder-shown),
|
||||
.bluelib .input:invalid:not(:placeholder-shown) {
|
||||
--bluelib-color-r: 200;
|
||||
--bluelib-color-g: 0;
|
||||
--bluelib-color-b: 0;
|
||||
}
|
||||
body .input:hover,
|
||||
.bluelib .input:hover,
|
||||
body input:hover,
|
||||
.bluelib input:hover,
|
||||
body select:hover,
|
||||
.bluelib select:hover,
|
||||
body .input:focus,
|
||||
.bluelib .input:focus,
|
||||
body .input:hover,
|
||||
.bluelib .input:hover,
|
||||
body input:focus,
|
||||
.bluelib input:focus,
|
||||
body select:focus,
|
||||
.bluelib select:focus {
|
||||
.bluelib select:focus,
|
||||
body .input:focus,
|
||||
.bluelib .input: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);
|
||||
}
|
||||
body .input:hover::placeholder,
|
||||
.bluelib .input:hover::placeholder,
|
||||
body input:hover::placeholder,
|
||||
.bluelib input:hover::placeholder,
|
||||
body select:hover::placeholder,
|
||||
.bluelib select:hover::placeholder,
|
||||
body .input:focus::placeholder,
|
||||
.bluelib .input:focus::placeholder,
|
||||
body .input:hover::placeholder,
|
||||
.bluelib .input:hover::placeholder,
|
||||
body input:focus::placeholder,
|
||||
.bluelib input:focus::placeholder,
|
||||
body select:focus::placeholder,
|
||||
.bluelib select:focus::placeholder {
|
||||
.bluelib select:focus::placeholder,
|
||||
body .input:focus::placeholder,
|
||||
.bluelib .input:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
body .input[disabled],
|
||||
.bluelib .input[disabled],
|
||||
body input[disabled],
|
||||
.bluelib input[disabled],
|
||||
body select[disabled],
|
||||
.bluelib select[disabled],
|
||||
body .input .status-disabled,
|
||||
.bluelib .input .status-disabled,
|
||||
body .input[disabled],
|
||||
.bluelib .input[disabled],
|
||||
body input .status-disabled,
|
||||
.bluelib input .status-disabled,
|
||||
body select .status-disabled,
|
||||
.bluelib select .status-disabled {
|
||||
.bluelib select .status-disabled,
|
||||
body .input .status-disabled,
|
||||
.bluelib .input .status-disabled {
|
||||
border-style: dashed;
|
||||
}
|
||||
body .input[disabled]:hover,
|
||||
.bluelib .input[disabled]:hover,
|
||||
body input[disabled]:hover,
|
||||
.bluelib input[disabled]:hover,
|
||||
body select[disabled]:hover,
|
||||
.bluelib select[disabled]:hover,
|
||||
body .input .status-disabled:hover,
|
||||
.bluelib .input .status-disabled:hover,
|
||||
body .input[disabled]:hover,
|
||||
.bluelib .input[disabled]:hover,
|
||||
body input .status-disabled:hover,
|
||||
.bluelib input .status-disabled:hover,
|
||||
body select .status-disabled:hover,
|
||||
.bluelib select .status-disabled:hover,
|
||||
body .input[disabled]:focus,
|
||||
.bluelib .input[disabled]:focus,
|
||||
body .input .status-disabled:hover,
|
||||
.bluelib .input .status-disabled:hover,
|
||||
body input[disabled]:focus,
|
||||
.bluelib input[disabled]:focus,
|
||||
body select[disabled]:focus,
|
||||
.bluelib select[disabled]:focus,
|
||||
body .input .status-disabled:focus,
|
||||
.bluelib .input .status-disabled:focus,
|
||||
body .input[disabled]:focus,
|
||||
.bluelib .input[disabled]:focus,
|
||||
body input .status-disabled:focus,
|
||||
.bluelib input .status-disabled:focus,
|
||||
body select .status-disabled:focus,
|
||||
.bluelib select .status-disabled:focus {
|
||||
.bluelib select .status-disabled:focus,
|
||||
body .input .status-disabled:focus,
|
||||
.bluelib .input .status-disabled:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||
}
|
||||
body .input[disabled]:hover::placeholder,
|
||||
.bluelib .input[disabled]:hover::placeholder,
|
||||
body input[disabled]:hover::placeholder,
|
||||
.bluelib input[disabled]:hover::placeholder,
|
||||
body select[disabled]:hover::placeholder,
|
||||
.bluelib select[disabled]:hover::placeholder,
|
||||
body .input .status-disabled:hover::placeholder,
|
||||
.bluelib .input .status-disabled:hover::placeholder,
|
||||
body .input[disabled]:hover::placeholder,
|
||||
.bluelib .input[disabled]:hover::placeholder,
|
||||
body input .status-disabled:hover::placeholder,
|
||||
.bluelib input .status-disabled:hover::placeholder,
|
||||
body select .status-disabled:hover::placeholder,
|
||||
.bluelib select .status-disabled:hover::placeholder,
|
||||
body .input[disabled]:focus::placeholder,
|
||||
.bluelib .input[disabled]:focus::placeholder,
|
||||
body .input .status-disabled:hover::placeholder,
|
||||
.bluelib .input .status-disabled:hover::placeholder,
|
||||
body input[disabled]:focus::placeholder,
|
||||
.bluelib input[disabled]:focus::placeholder,
|
||||
body select[disabled]:focus::placeholder,
|
||||
.bluelib select[disabled]:focus::placeholder,
|
||||
body .input .status-disabled:focus::placeholder,
|
||||
.bluelib .input .status-disabled:focus::placeholder,
|
||||
body .input[disabled]:focus::placeholder,
|
||||
.bluelib .input[disabled]:focus::placeholder,
|
||||
body input .status-disabled:focus::placeholder,
|
||||
.bluelib input .status-disabled:focus::placeholder,
|
||||
body select .status-disabled:focus::placeholder,
|
||||
.bluelib select .status-disabled:focus::placeholder {
|
||||
.bluelib select .status-disabled:focus::placeholder,
|
||||
body .input .status-disabled:focus::placeholder,
|
||||
.bluelib .input .status-disabled:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
}
|
||||
body .input-field,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -133,7 +133,6 @@
|
|||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnFK_uQQ.ttf) format('truetype');
|
||||
}
|
||||
.bluelib {
|
||||
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;
|
||||
|
|
@ -144,15 +143,84 @@
|
|||
.bluelib,
|
||||
.bluelib *,
|
||||
.bluelib .all {
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
margin-right: auto;
|
||||
max-width: 1280px;
|
||||
.bluelib,
|
||||
.bluelib *,
|
||||
.bluelib .all,
|
||||
.bluelib::before,
|
||||
.bluelib *::before,
|
||||
.bluelib .all::before,
|
||||
.bluelib::after,
|
||||
.bluelib *::after,
|
||||
.bluelib .all::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bluelib .layout {
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
.bluelib .layout-fill {
|
||||
padding: 4px;
|
||||
grid-template-areas: "single";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
.bluelib .layout-fill > main,
|
||||
.bluelib .layout-fill-single {
|
||||
grid-area: single;
|
||||
}
|
||||
.bluelib .layout-threecol {
|
||||
padding: 4px;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "left center right";
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "center center" "left right";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
max-width: 1024px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
.bluelib .layout-threecol-left {
|
||||
grid-area: left;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
.bluelib .layout-threecol-center {
|
||||
grid-area: center;
|
||||
max-width: 1024px;
|
||||
}
|
||||
.bluelib .layout-threecol-right {
|
||||
grid-area: right;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
.bluelib .panel {
|
||||
margin: 8px 0;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -134,7 +134,6 @@
|
|||
}
|
||||
body,
|
||||
.bluelib {
|
||||
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;
|
||||
|
|
@ -148,18 +147,105 @@ body *,
|
|||
.bluelib *,
|
||||
body .all,
|
||||
.bluelib .all {
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
}
|
||||
body main,
|
||||
.bluelib main,
|
||||
body .container-main,
|
||||
.bluelib .container-main {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1280px;
|
||||
body,
|
||||
.bluelib,
|
||||
body *,
|
||||
.bluelib *,
|
||||
body .all,
|
||||
.bluelib .all,
|
||||
body::before,
|
||||
.bluelib::before,
|
||||
body *::before,
|
||||
.bluelib *::before,
|
||||
body .all::before,
|
||||
.bluelib .all::before,
|
||||
body::after,
|
||||
.bluelib::after,
|
||||
body *::after,
|
||||
.bluelib *::after,
|
||||
body .all::after,
|
||||
.bluelib .all::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body .layout,
|
||||
.bluelib .layout {
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
body .layout-fill,
|
||||
.bluelib .layout-fill {
|
||||
padding: 4px;
|
||||
grid-template-areas: "single";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
body .layout-fill-single,
|
||||
.bluelib .layout-fill-single {
|
||||
grid-area: single;
|
||||
}
|
||||
body .layout-threecol,
|
||||
.bluelib .layout-threecol {
|
||||
padding: 4px;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
body .layout-threecol,
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "left center right";
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
body .layout-threecol,
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "center center" "left right";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
max-width: 1024px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
body .layout-threecol-left,
|
||||
.bluelib .layout-threecol-left {
|
||||
grid-area: left;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
body .layout-threecol-left,
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
body .layout-threecol-left,
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
body .layout-threecol-center,
|
||||
.bluelib .layout-threecol-center {
|
||||
grid-area: center;
|
||||
max-width: 1024px;
|
||||
}
|
||||
body .layout-threecol-right,
|
||||
.bluelib .layout-threecol-right {
|
||||
grid-area: right;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
body .layout-threecol-right,
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
body .layout-threecol-right,
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
body .panel,
|
||||
.bluelib .panel,
|
||||
|
|
@ -874,12 +960,12 @@ body .form-input,
|
|||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
body form .button,
|
||||
.bluelib form .button,
|
||||
body button,
|
||||
.bluelib button,
|
||||
body form button,
|
||||
.bluelib form button,
|
||||
body input[type="submit"],
|
||||
.bluelib input[type="submit"],
|
||||
body .button,
|
||||
.bluelib .button,
|
||||
body form button,
|
||||
.bluelib form button,
|
||||
body .form-submit,
|
||||
|
|
@ -906,12 +992,12 @@ body .form-buttons:last-child,
|
|||
.bluelib .form-buttons:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body .button,
|
||||
.bluelib .button,
|
||||
body button,
|
||||
.bluelib button,
|
||||
body input[type="submit"],
|
||||
.bluelib input[type="submit"] {
|
||||
.bluelib input[type="submit"],
|
||||
body .button,
|
||||
.bluelib .button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -924,56 +1010,56 @@ body input[type="submit"],
|
|||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
body .button:hover,
|
||||
.bluelib .button:hover,
|
||||
body button:hover,
|
||||
.bluelib button:hover,
|
||||
body input[type="submit"]:hover,
|
||||
.bluelib input[type="submit"]:hover {
|
||||
.bluelib input[type="submit"]:hover,
|
||||
body .button:hover,
|
||||
.bluelib .button:hover {
|
||||
background-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
||||
}
|
||||
body .button:focus-visible,
|
||||
.bluelib .button:focus-visible,
|
||||
body button:focus-visible,
|
||||
.bluelib button:focus-visible,
|
||||
body input[type="submit"]:focus-visible,
|
||||
.bluelib input[type="submit"]:focus-visible {
|
||||
.bluelib input[type="submit"]:focus-visible,
|
||||
body .button:focus-visible,
|
||||
.bluelib .button:focus-visible {
|
||||
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
|
||||
}
|
||||
body .button:active,
|
||||
.bluelib .button:active,
|
||||
body button:active,
|
||||
.bluelib button:active,
|
||||
body input[type="submit"]:active,
|
||||
.bluelib input[type="submit"]:active {
|
||||
.bluelib input[type="submit"]:active,
|
||||
body .button:active,
|
||||
.bluelib .button:active {
|
||||
background-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||
}
|
||||
body .button[disabled]:hover,
|
||||
.bluelib .button[disabled]:hover,
|
||||
body button[disabled]:hover,
|
||||
.bluelib button[disabled]:hover,
|
||||
body input[type="submit"][disabled]:hover,
|
||||
.bluelib input[type="submit"][disabled]:hover,
|
||||
body .button .status-disabled:hover,
|
||||
.bluelib .button .status-disabled:hover,
|
||||
body .button[disabled]:hover,
|
||||
.bluelib .button[disabled]:hover,
|
||||
body button .status-disabled:hover,
|
||||
.bluelib button .status-disabled:hover,
|
||||
body input[type="submit"] .status-disabled:hover,
|
||||
.bluelib input[type="submit"] .status-disabled:hover {
|
||||
.bluelib input[type="submit"] .status-disabled:hover,
|
||||
body .button .status-disabled:hover,
|
||||
.bluelib .button .status-disabled:hover {
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
}
|
||||
body .button[disabled]:active,
|
||||
.bluelib .button[disabled]:active,
|
||||
body button[disabled]:active,
|
||||
.bluelib button[disabled]:active,
|
||||
body input[type="submit"][disabled]:active,
|
||||
.bluelib input[type="submit"][disabled]:active,
|
||||
body .button .status-disabled:active,
|
||||
.bluelib .button .status-disabled:active,
|
||||
body .button[disabled]:active,
|
||||
.bluelib .button[disabled]:active,
|
||||
body button .status-disabled:active,
|
||||
.bluelib button .status-disabled:active,
|
||||
body input[type="submit"] .status-disabled:active,
|
||||
.bluelib input[type="submit"] .status-disabled:active {
|
||||
.bluelib input[type="submit"] .status-disabled:active,
|
||||
body .button .status-disabled:active,
|
||||
.bluelib .button .status-disabled:active {
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
}
|
||||
body .button-fill-width,
|
||||
|
|
@ -1072,12 +1158,12 @@ body .button-toggle-on .status-disabled:active,
|
|||
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);
|
||||
}
|
||||
body .input,
|
||||
.bluelib .input,
|
||||
body input,
|
||||
.bluelib input,
|
||||
body select,
|
||||
.bluelib select {
|
||||
.bluelib select,
|
||||
body .input,
|
||||
.bluelib .input {
|
||||
border-style: solid;
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
|
|
@ -1085,135 +1171,135 @@ body select,
|
|||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
body .input::placeholder,
|
||||
.bluelib .input::placeholder,
|
||||
body input::placeholder,
|
||||
.bluelib input::placeholder,
|
||||
body select::placeholder,
|
||||
.bluelib select::placeholder {
|
||||
.bluelib select::placeholder,
|
||||
body .input::placeholder,
|
||||
.bluelib .input::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
body .input:optional,
|
||||
.bluelib .input:optional,
|
||||
body input:optional,
|
||||
.bluelib input:optional,
|
||||
body select:optional,
|
||||
.bluelib select:optional,
|
||||
body .input:optional::placeholder,
|
||||
.bluelib .input:optional::placeholder,
|
||||
body .input:optional,
|
||||
.bluelib .input:optional,
|
||||
body input:optional::placeholder,
|
||||
.bluelib input:optional::placeholder,
|
||||
body select:optional::placeholder,
|
||||
.bluelib select:optional::placeholder {
|
||||
.bluelib select:optional::placeholder,
|
||||
body .input:optional::placeholder,
|
||||
.bluelib .input:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
body .input:invalid:not(:placeholder-shown),
|
||||
.bluelib .input:invalid:not(:placeholder-shown),
|
||||
body input:invalid:not(:placeholder-shown),
|
||||
.bluelib input:invalid:not(:placeholder-shown),
|
||||
body select:invalid:not(:placeholder-shown),
|
||||
.bluelib select:invalid:not(:placeholder-shown) {
|
||||
.bluelib select:invalid:not(:placeholder-shown),
|
||||
body .input:invalid:not(:placeholder-shown),
|
||||
.bluelib .input:invalid:not(:placeholder-shown) {
|
||||
--bluelib-color-r: 255;
|
||||
--bluelib-color-g: 125;
|
||||
--bluelib-color-b: 125;
|
||||
}
|
||||
body .input:hover,
|
||||
.bluelib .input:hover,
|
||||
body input:hover,
|
||||
.bluelib input:hover,
|
||||
body select:hover,
|
||||
.bluelib select:hover,
|
||||
body .input:focus,
|
||||
.bluelib .input:focus,
|
||||
body .input:hover,
|
||||
.bluelib .input:hover,
|
||||
body input:focus,
|
||||
.bluelib input:focus,
|
||||
body select:focus,
|
||||
.bluelib select:focus {
|
||||
.bluelib select:focus,
|
||||
body .input:focus,
|
||||
.bluelib .input: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);
|
||||
}
|
||||
body .input:hover::placeholder,
|
||||
.bluelib .input:hover::placeholder,
|
||||
body input:hover::placeholder,
|
||||
.bluelib input:hover::placeholder,
|
||||
body select:hover::placeholder,
|
||||
.bluelib select:hover::placeholder,
|
||||
body .input:focus::placeholder,
|
||||
.bluelib .input:focus::placeholder,
|
||||
body .input:hover::placeholder,
|
||||
.bluelib .input:hover::placeholder,
|
||||
body input:focus::placeholder,
|
||||
.bluelib input:focus::placeholder,
|
||||
body select:focus::placeholder,
|
||||
.bluelib select:focus::placeholder {
|
||||
.bluelib select:focus::placeholder,
|
||||
body .input:focus::placeholder,
|
||||
.bluelib .input:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
body .input[disabled],
|
||||
.bluelib .input[disabled],
|
||||
body input[disabled],
|
||||
.bluelib input[disabled],
|
||||
body select[disabled],
|
||||
.bluelib select[disabled],
|
||||
body .input .status-disabled,
|
||||
.bluelib .input .status-disabled,
|
||||
body .input[disabled],
|
||||
.bluelib .input[disabled],
|
||||
body input .status-disabled,
|
||||
.bluelib input .status-disabled,
|
||||
body select .status-disabled,
|
||||
.bluelib select .status-disabled {
|
||||
.bluelib select .status-disabled,
|
||||
body .input .status-disabled,
|
||||
.bluelib .input .status-disabled {
|
||||
border-style: dashed;
|
||||
}
|
||||
body .input[disabled]:hover,
|
||||
.bluelib .input[disabled]:hover,
|
||||
body input[disabled]:hover,
|
||||
.bluelib input[disabled]:hover,
|
||||
body select[disabled]:hover,
|
||||
.bluelib select[disabled]:hover,
|
||||
body .input .status-disabled:hover,
|
||||
.bluelib .input .status-disabled:hover,
|
||||
body .input[disabled]:hover,
|
||||
.bluelib .input[disabled]:hover,
|
||||
body input .status-disabled:hover,
|
||||
.bluelib input .status-disabled:hover,
|
||||
body select .status-disabled:hover,
|
||||
.bluelib select .status-disabled:hover,
|
||||
body .input[disabled]:focus,
|
||||
.bluelib .input[disabled]:focus,
|
||||
body .input .status-disabled:hover,
|
||||
.bluelib .input .status-disabled:hover,
|
||||
body input[disabled]:focus,
|
||||
.bluelib input[disabled]:focus,
|
||||
body select[disabled]:focus,
|
||||
.bluelib select[disabled]:focus,
|
||||
body .input .status-disabled:focus,
|
||||
.bluelib .input .status-disabled:focus,
|
||||
body .input[disabled]:focus,
|
||||
.bluelib .input[disabled]:focus,
|
||||
body input .status-disabled:focus,
|
||||
.bluelib input .status-disabled:focus,
|
||||
body select .status-disabled:focus,
|
||||
.bluelib select .status-disabled:focus {
|
||||
.bluelib select .status-disabled:focus,
|
||||
body .input .status-disabled:focus,
|
||||
.bluelib .input .status-disabled:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||
}
|
||||
body .input[disabled]:hover::placeholder,
|
||||
.bluelib .input[disabled]:hover::placeholder,
|
||||
body input[disabled]:hover::placeholder,
|
||||
.bluelib input[disabled]:hover::placeholder,
|
||||
body select[disabled]:hover::placeholder,
|
||||
.bluelib select[disabled]:hover::placeholder,
|
||||
body .input .status-disabled:hover::placeholder,
|
||||
.bluelib .input .status-disabled:hover::placeholder,
|
||||
body .input[disabled]:hover::placeholder,
|
||||
.bluelib .input[disabled]:hover::placeholder,
|
||||
body input .status-disabled:hover::placeholder,
|
||||
.bluelib input .status-disabled:hover::placeholder,
|
||||
body select .status-disabled:hover::placeholder,
|
||||
.bluelib select .status-disabled:hover::placeholder,
|
||||
body .input[disabled]:focus::placeholder,
|
||||
.bluelib .input[disabled]:focus::placeholder,
|
||||
body .input .status-disabled:hover::placeholder,
|
||||
.bluelib .input .status-disabled:hover::placeholder,
|
||||
body input[disabled]:focus::placeholder,
|
||||
.bluelib input[disabled]:focus::placeholder,
|
||||
body select[disabled]:focus::placeholder,
|
||||
.bluelib select[disabled]:focus::placeholder,
|
||||
body .input .status-disabled:focus::placeholder,
|
||||
.bluelib .input .status-disabled:focus::placeholder,
|
||||
body .input[disabled]:focus::placeholder,
|
||||
.bluelib .input[disabled]:focus::placeholder,
|
||||
body input .status-disabled:focus::placeholder,
|
||||
.bluelib input .status-disabled:focus::placeholder,
|
||||
body select .status-disabled:focus::placeholder,
|
||||
.bluelib select .status-disabled:focus::placeholder {
|
||||
.bluelib select .status-disabled:focus::placeholder,
|
||||
body .input .status-disabled:focus::placeholder,
|
||||
.bluelib .input .status-disabled:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
}
|
||||
body .input-field,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,14 @@
|
|||
@bluelib: ~".bluelib";
|
||||
@all: ~"*, .all";
|
||||
@container-main: ~".container-main";
|
||||
|
||||
@layout: ~".layout";
|
||||
@layout-fill: ~".layout-fill";
|
||||
@layout-fill-single: ~"@{layout-fill} > main, .layout-fill-single";
|
||||
@layout-threecol: ~".layout-threecol";
|
||||
@layout-threecol-left: ~".layout-threecol-left";
|
||||
@layout-threecol-center: ~".layout-threecol-center";
|
||||
@layout-threecol-right: ~".layout-threecol-right";
|
||||
|
||||
@panel: ~".panel";
|
||||
@panel-box: ~".panel-box";
|
||||
@panel-blockquote: ~".panel-blockquote";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
@bluelib: ~"body, .bluelib";
|
||||
@all: ~"*, .all";
|
||||
@container-main: ~"main, .container-main";
|
||||
|
||||
@layout: ~".layout";
|
||||
@layout-fill: ~".layout-fill";
|
||||
@layout-fill-single: ~".layout-fill-single";
|
||||
@layout-threecol: ~".layout-threecol";
|
||||
@layout-threecol-left: ~".layout-threecol-left";
|
||||
@layout-threecol-center: ~".layout-threecol-center";
|
||||
@layout-threecol-right: ~".layout-threecol-right";
|
||||
|
||||
@panel: ~".panel, .panel-box, section, .panel-blockquote, blockquote, .panel-aside, aside, .panel-split";
|
||||
@panel-box: ~".panel-box, section, .panel-blockquote, blockquote, .panel-aside, aside";
|
||||
@panel-blockquote: ~".panel-blockquote, blockquote";
|
||||
|
|
@ -17,12 +25,12 @@
|
|||
@form-input: ~"form @{input-field}, form @{input-select}, .form-input";
|
||||
@form-submit: ~'form @{button}, form button, .form-submit';
|
||||
@form-buttons: ~'.form-buttons';
|
||||
@button: ~'.button, button, input[type="submit"]';
|
||||
@button: ~'button, input[type="submit"], .button';
|
||||
@button-fill-width: ~'.button-fill-width';
|
||||
@button-toggle: ~'.button-toggle';
|
||||
@button-toggle-off: ~'.button-toggle-off';
|
||||
@button-toggle-on: ~'.button-toggle-on';
|
||||
@input: ~'.input, input, select';
|
||||
@input: ~'input, select, .input';
|
||||
@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-select: ~'select:not([multiple]), .input-select';
|
||||
@input-select-optgroup: ~'optgroup, .input-select-optgroup';
|
||||
|
|
|
|||
Loading…
Reference in a new issue