mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 11:34:21 +00:00
✨ Use LESS instead of CSS (#1)
This commit is contained in:
parent
bca49f1309
commit
c481ce06e3
GPG key ID:
4AEE18F83AFDEB23
20 changed files with 1624 additions and 470 deletions
5
.idea/codeStyles/codeStyleConfig.xml
Normal file
5
.idea/codeStyles/codeStyleConfig.xml
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<component name="ProjectCodeStyleConfiguration">
|
||||||
|
<state>
|
||||||
|
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
|
||||||
|
</state>
|
||||||
|
</component>
|
||||||
|
|
@ -1,4 +1,31 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<project version="4">
|
<project version="4">
|
||||||
<component name="ProjectTasksOptions" suppressed-tasks="Less" />
|
<component name="ProjectTasksOptions" suppressed-tasks="Less">
|
||||||
|
<TaskOptions isEnabled="true">
|
||||||
|
<option name="arguments" value="$FileName$ $FileNameWithoutExtension$.css --source-map" />
|
||||||
|
<option name="checkSyntaxErrors" value="true" />
|
||||||
|
<option name="description" />
|
||||||
|
<option name="exitCodeBehavior" value="ERROR" />
|
||||||
|
<option name="fileExtension" value="less" />
|
||||||
|
<option name="immediateSync" value="true" />
|
||||||
|
<option name="name" value="Less" />
|
||||||
|
<option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
|
||||||
|
<option name="outputFilters">
|
||||||
|
<array>
|
||||||
|
<FilterInfo>
|
||||||
|
<option name="description" value="" />
|
||||||
|
<option name="name" value="" />
|
||||||
|
<option name="regExp" value="$MESSAGE$\Q in \E$FILE_PATH$\Q on line \E$LINE$\Q, column \E$COLUMN$" />
|
||||||
|
</FilterInfo>
|
||||||
|
</array>
|
||||||
|
</option>
|
||||||
|
<option name="outputFromStdout" value="false" />
|
||||||
|
<option name="program" value="lessc" />
|
||||||
|
<option name="runOnExternalChanges" value="true" />
|
||||||
|
<option name="scopeName" value="Source" />
|
||||||
|
<option name="trackOnlyRoot" value="true" />
|
||||||
|
<option name="workingDir" value="$FileDir$" />
|
||||||
|
<envs />
|
||||||
|
</TaskOptions>
|
||||||
|
</component>
|
||||||
</project>
|
</project>
|
||||||
|
|
@ -2,7 +2,9 @@
|
||||||
<module type="WEB_MODULE" version="4">
|
<module type="WEB_MODULE" version="4">
|
||||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||||
<exclude-output />
|
<exclude-output />
|
||||||
<content url="file://$MODULE_DIR$" />
|
<content url="file://$MODULE_DIR$">
|
||||||
|
<sourceFolder url="file://$MODULE_DIR$/targets" isTestSource="false" />
|
||||||
|
</content>
|
||||||
<orderEntry type="sourceFolder" forTests="false" />
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
</component>
|
</component>
|
||||||
</module>
|
</module>
|
||||||
76
index.html
76
index.html
|
|
@ -2,8 +2,8 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" href="skeleton.css">
|
<link rel="stylesheet" href="src/skeleton/skeleton-root.css">
|
||||||
<link rel="stylesheet" href="skin.css">
|
<link rel="stylesheet" href="src/skins/rygblue/rygblue-root.css">
|
||||||
<title>Bluelib 2</title>
|
<title>Bluelib 2</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-bluelib">
|
<body class="theme-bluelib">
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
RYG style, in pure CSS
|
RYG style, in pure CSS
|
||||||
</h2>
|
</h2>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
<section class="panel">
|
<section class="panel panel-box">
|
||||||
<h3>
|
<h3>
|
||||||
Welcome to bluelib!
|
Welcome to bluelib!
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
<h2>
|
<h2>
|
||||||
Panels
|
Panels
|
||||||
</h2>
|
</h2>
|
||||||
<section class="panel">
|
<section class="panel panel-box">
|
||||||
<h3>
|
<h3>
|
||||||
Panel
|
Panel
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
It usually represents a section of text about a topic described by the title above.
|
It usually represents a section of text about a topic described by the title above.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<table class="panel">
|
<table class="panel panel-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>This...</th>
|
<th>This...</th>
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<blockquote class="panel">
|
<blockquote class="panel panel-blockquote">
|
||||||
<h3>
|
<h3>
|
||||||
Blockquote
|
Blockquote
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -69,7 +69,7 @@
|
||||||
Blockquotes are specially formatted panels, useful for quotes!
|
Blockquotes are specially formatted panels, useful for quotes!
|
||||||
</p>
|
</p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<aside class="panel">
|
<aside class="panel panel-aside">
|
||||||
<h3>
|
<h3>
|
||||||
Aside
|
Aside
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -84,7 +84,7 @@
|
||||||
<h2>
|
<h2>
|
||||||
Nesting containers
|
Nesting containers
|
||||||
</h2>
|
</h2>
|
||||||
<section class="panel">
|
<section class="panel panel-box">
|
||||||
<h3>
|
<h3>
|
||||||
Level one
|
Level one
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -94,27 +94,27 @@
|
||||||
<p>
|
<p>
|
||||||
Drop one outside of any paragraphs and they will nest automatically.
|
Drop one outside of any paragraphs and they will nest automatically.
|
||||||
</p>
|
</p>
|
||||||
<section class="panel">
|
<section class="panel panel-box">
|
||||||
<h3>
|
<h3>
|
||||||
Level two
|
Level two
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
You can add text above...
|
You can add text above...
|
||||||
</p>
|
</p>
|
||||||
<section class="panel">
|
<section class="panel panel-box">
|
||||||
<h3>
|
<h3>
|
||||||
Level three
|
Level three
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
How deep does the rabbit hole go?
|
How deep does the rabbit hole go?
|
||||||
</p>
|
</p>
|
||||||
<blockquote class="panel">
|
<blockquote class="panel panel-blockquote">
|
||||||
<b><a href="https://www.youtube.com/watch?v=G2jUhnCU9iA" target="_blank">PANELCEPTION.</a></b>
|
<b><a href="https://www.youtube.com/watch?v=G2jUhnCU9iA" target="_blank">PANELCEPTION.</a></b>
|
||||||
<aside class="panel">
|
<aside class="panel panel-aside">
|
||||||
BWOON.
|
BWOON.
|
||||||
<aside class="panel">
|
<aside class="panel panel-aside">
|
||||||
BWOON.
|
BWOON.
|
||||||
<aside class="panel">
|
<aside class="panel panel-aside">
|
||||||
BWOON.
|
BWOON.
|
||||||
</aside>
|
</aside>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
@ -129,7 +129,7 @@
|
||||||
<h2>
|
<h2>
|
||||||
Layout
|
Layout
|
||||||
</h2>
|
</h2>
|
||||||
<section class="panel">
|
<section class="panel panel-aside">
|
||||||
<h3>
|
<h3>
|
||||||
Splitter and splitted
|
Splitter and splitted
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -139,8 +139,8 @@
|
||||||
<p>
|
<p>
|
||||||
The columns will grow automatically to on the height of the tallest.
|
The columns will grow automatically to on the height of the tallest.
|
||||||
</p>
|
</p>
|
||||||
<div class="splitter">
|
<div class="panel panel-split">
|
||||||
<section class="splitted panel">
|
<section class="panel panel-box">
|
||||||
<h3>
|
<h3>
|
||||||
Shorter panel
|
Shorter panel
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -148,7 +148,7 @@
|
||||||
That's it.
|
That's it.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<section class="splitted panel">
|
<section class="panel panel-box">
|
||||||
<h3>
|
<h3>
|
||||||
Taller panel
|
Taller panel
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -164,33 +164,7 @@
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="limited panel">
|
<section class="panel panel-box">
|
||||||
<h3>
|
|
||||||
Limiting panels
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
Panels can be limited to force them to stay under 420px in width.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
<div class="splitter">
|
|
||||||
<section class="splitted limited panel">
|
|
||||||
<h3>
|
|
||||||
Split limited panels
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
This applies to panels inside a splitter too!
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
<section class="splitted limited panel">
|
|
||||||
<h3>
|
|
||||||
Autocenter
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
The splitter will try to keep the limited panels centered.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<section class="panel">
|
|
||||||
<h3>
|
<h3>
|
||||||
Horizonal rows
|
Horizonal rows
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -205,8 +179,8 @@
|
||||||
<h2>
|
<h2>
|
||||||
Formatting
|
Formatting
|
||||||
</h2>
|
</h2>
|
||||||
<div class="splitter">
|
<div class="panel panel-split">
|
||||||
<section class="splitted panel">
|
<section class="panel panel-box">
|
||||||
<h3>
|
<h3>
|
||||||
Colors
|
Colors
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -223,7 +197,7 @@
|
||||||
<li><span class="color-magenta">Magenta</span></li>
|
<li><span class="color-magenta">Magenta</span></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section class="splitted panel">
|
<section class="panel panel-box">
|
||||||
<h3>
|
<h3>
|
||||||
Size
|
Size
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -240,7 +214,7 @@
|
||||||
<li><span class="size-xxs">XXS</span></li>
|
<li><span class="size-xxs">XXS</span></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section class="splitted panel">
|
<section class="panel panel-box">
|
||||||
<h3>
|
<h3>
|
||||||
Alignment
|
Alignment
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -251,14 +225,14 @@
|
||||||
<div class="align-center">Center</div>
|
<div class="align-center">Center</div>
|
||||||
<div class="align-right">Right</div>
|
<div class="align-right">Right</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="splitted panel">
|
<section class="panel panel-box">
|
||||||
<h3>
|
<h3>
|
||||||
Spoilers
|
Spoilers
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
You can define <span class="spoiler">spoilers</span>.
|
You can define <span class="spoiler">spoilers</span>.
|
||||||
</p>
|
</p>
|
||||||
<section class="splitted spoiler panel">
|
<section class="spoiler panel panel-box">
|
||||||
<h3>
|
<h3>
|
||||||
Spoiler panels
|
Spoiler panels
|
||||||
</h3>
|
</h3>
|
||||||
|
|
|
||||||
287
skeleton.css
vendored
287
skeleton.css
vendored
|
|
@ -1,287 +0,0 @@
|
||||||
/*
|
|
||||||
This file should contain ONLY positioning and layout rules.
|
|
||||||
Colors and theme should go in skin.css!
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
From here on, rules will be defined as
|
|
||||||
|
|
||||||
inherits1, inherits2, inherits3, ...,
|
|
||||||
.rulename {
|
|
||||||
...
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Use border boxes in all elements instead of the insane content box measuring */
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
/* Set the default border color and style on all elements, and allow skins to override them */
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0; /* Removing this means all elements will have a 2px border-width */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Main container --- */
|
|
||||||
|
|
||||||
main,
|
|
||||||
.main {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
max-width: 1280px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Horizontal split --- */
|
|
||||||
|
|
||||||
.splitter {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px;
|
|
||||||
margin: 8px 0;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.splitted { /* Yes I know split is irregular, but it allows to disambiguate better between splitter and split */
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-shrink: 0;
|
|
||||||
flex-basis: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Text positions --- */
|
|
||||||
|
|
||||||
.align-left {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, /* Align titles to the center */
|
|
||||||
.align-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.align-right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Text style --- */
|
|
||||||
|
|
||||||
h1,
|
|
||||||
.size-xxl {
|
|
||||||
font-size: xx-large;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2,
|
|
||||||
.size-xl {
|
|
||||||
font-size: x-large;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3,
|
|
||||||
.size-l {
|
|
||||||
font-size: large;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4,
|
|
||||||
.size-m {
|
|
||||||
font-size: medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5,
|
|
||||||
.size-s {
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6,
|
|
||||||
.size-xs {
|
|
||||||
font-size: x-small;
|
|
||||||
}
|
|
||||||
|
|
||||||
.size-xxs {
|
|
||||||
font-size: xx-small;
|
|
||||||
}
|
|
||||||
|
|
||||||
b,
|
|
||||||
.style-bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
i,
|
|
||||||
.style-italic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Text colors --- */
|
|
||||||
|
|
||||||
.color-red {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-orange {
|
|
||||||
color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-yellow {
|
|
||||||
color: #dddd00; /* Yellow isn't readable on a white background */
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-lime {
|
|
||||||
color: lime;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-cyan {
|
|
||||||
color: cyan;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-blue {
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-magenta {
|
|
||||||
color: magenta;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Text mode --- */
|
|
||||||
|
|
||||||
pre, code, kbd,
|
|
||||||
.monospace {
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spoiler {
|
|
||||||
filter: blur(5px);
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spoiler:hover {
|
|
||||||
filter: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Containers --- */
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
margin: 8px 0;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border-width: 2px;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.025);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dirty hack to have uniform margins */
|
|
||||||
.splitter > .panel, .panel > .panel, .panel > .splitter {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel p:first-child, /* Remove the margin from the first paragraph of a panel */
|
|
||||||
.no-margin-top {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel p:last-child, /* Remove the margin from the last paragraph of a panel */
|
|
||||||
.no-margin-bottom {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-margin-vertical {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-margin-left {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-margin-right {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-margin-horizontal {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-margin-all {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel h1:first-child, /* Add a slight margin to the first title of a panel */
|
|
||||||
.panel h2:first-child, /* */
|
|
||||||
.panel h3:first-child, /* */
|
|
||||||
.panel h4:first-child, /* */
|
|
||||||
.panel h5:first-child, /* */
|
|
||||||
.panel h6:first-child, /* */
|
|
||||||
.slight-margin-top {
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel h1:last-child, /* Add a slight margin to the last title of a panel */
|
|
||||||
.panel h2:last-child, /* */
|
|
||||||
.panel h3:last-child, /* */
|
|
||||||
.panel h4:last-child, /* */
|
|
||||||
.panel h5:last-child, /* */
|
|
||||||
.panel h6:last-child, /* */
|
|
||||||
.slight-margin-bottom {
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Blockquote panels */
|
|
||||||
blockquote.panel,
|
|
||||||
.panel.panel-blockquote {
|
|
||||||
border-radius: 4px;
|
|
||||||
border-left-width: 2px;
|
|
||||||
border-top-width: 0;
|
|
||||||
border-bottom-width: 0;
|
|
||||||
border-right-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Table panels */
|
|
||||||
table.panel,
|
|
||||||
.panel-table.panel {
|
|
||||||
border-spacing: 0;
|
|
||||||
border-width: 2px;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Aside panels */
|
|
||||||
aside.panel,
|
|
||||||
.aside.panel {
|
|
||||||
border-width: 0;
|
|
||||||
font-size: smaller;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td,
|
|
||||||
.table-cell {
|
|
||||||
padding: 4px;
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Limited panels */
|
|
||||||
.limited {
|
|
||||||
max-width: 420px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.limited {
|
|
||||||
max-width: 420px;
|
|
||||||
max-height: 420px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Separators --- */
|
|
||||||
|
|
||||||
hr,
|
|
||||||
.separator {
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Lists --- */
|
|
||||||
|
|
||||||
li,
|
|
||||||
.list-element {
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Misc --- */
|
|
||||||
|
|
||||||
*[title],
|
|
||||||
.with-title-text {
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
130
skin.css
130
skin.css
|
|
@ -1,130 +0,0 @@
|
||||||
/*
|
|
||||||
This file should contain ONLY coloring and theming rules.
|
|
||||||
Positioning and layout rules should go in skeleton.css!
|
|
||||||
*/
|
|
||||||
|
|
||||||
:root {
|
|
||||||
/*
|
|
||||||
CSS variables go here!
|
|
||||||
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* The main colors of the stylesheet */
|
|
||||||
--background: #0d193b;
|
|
||||||
--foreground: #a0ccff;
|
|
||||||
--accent: #ffffff;
|
|
||||||
|
|
||||||
/* Panel background */
|
|
||||||
--panel: rgba(160, 204, 255, 0.02); /* It's --foreground, but with 2% alpha */
|
|
||||||
--border: rgba(160, 204, 255, 0.10); /* It's --foreground, but with 10% alpha */
|
|
||||||
|
|
||||||
/* Pastel colors */
|
|
||||||
--red: #ff7d7d;
|
|
||||||
--orange: #ffbb7d;
|
|
||||||
--yellow: #ffff7d;
|
|
||||||
--lime: #7dff7d;
|
|
||||||
--cyan: #7dffff;
|
|
||||||
--blue: #7d7dff;
|
|
||||||
--magenta: #ff7dff;
|
|
||||||
|
|
||||||
/* Link colors */
|
|
||||||
--link: #00caca;
|
|
||||||
--link-hover: #00ffff;
|
|
||||||
--link-active: #a0ffff;
|
|
||||||
|
|
||||||
/* Fonts */
|
|
||||||
--font-text: sans-serif;
|
|
||||||
--font-title: sans-serif;
|
|
||||||
--font-code: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
From here on, rules will be defined as
|
|
||||||
|
|
||||||
inherits1, inherits2, inherits3, ...,
|
|
||||||
.rule-name {
|
|
||||||
...
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* --- Main colors and font --- */
|
|
||||||
|
|
||||||
* {
|
|
||||||
border-color: var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--background);
|
|
||||||
color: var(--foreground);
|
|
||||||
font-family: var(--font-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Text colors --- */
|
|
||||||
|
|
||||||
.color-red {
|
|
||||||
color: var(--red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-orange {
|
|
||||||
color: var(--orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-yellow {
|
|
||||||
color: var(--yellow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-lime {
|
|
||||||
color: var(--lime);
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-cyan {
|
|
||||||
color: var(--cyan);
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-blue {
|
|
||||||
color: var(--blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-magenta {
|
|
||||||
color: var(--magenta);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* --- Titles --- */
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, th,
|
|
||||||
.title {
|
|
||||||
color: var(--accent);
|
|
||||||
font-family: var(--font-title);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Links --- */
|
|
||||||
|
|
||||||
a,
|
|
||||||
.link {
|
|
||||||
color: var(--link);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover,
|
|
||||||
.link:hover {
|
|
||||||
color: var(--link-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active,
|
|
||||||
.link:active {
|
|
||||||
color: var(--link-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Code blocks --- */
|
|
||||||
|
|
||||||
pre, code, samp,
|
|
||||||
.monospace {
|
|
||||||
font-family: var(--font-code);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Panels --- */
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
background-color: var(--panel);
|
|
||||||
}
|
|
||||||
335
src/skeleton/skeleton-class.css
Normal file
335
src/skeleton/skeleton-class.css
Normal file
|
|
@ -0,0 +1,335 @@
|
||||||
|
.bluelib-skeleton * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .container-main {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 1280px;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel {
|
||||||
|
margin: 8px 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel > .panel {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel > .paragraph:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel > .paragraph:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel > .title:first-child {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel > .title:last-child {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel-box {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel-blockquote {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
border-left-width: 2px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
border-right-width: 0;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel-aside {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
border-width: 0;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel-table {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
display: table;
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel-split {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel-split > * {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-basis: 0;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .status-disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .status-hoverable {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .status-clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .spoiler {
|
||||||
|
filter: blur(5px);
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .spoiler:hover {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .element-title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .element-separator {
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: dimgrey;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .element-list-item {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .align-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-xxl {
|
||||||
|
font-size: xx-large;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-xl {
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-l {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-m {
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-s {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-xs {
|
||||||
|
font-size: x-small;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-xxs {
|
||||||
|
font-size: xx-small;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .style-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .style-italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .style-underline {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .style-strike {
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .style-monospace {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-orange {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-yellow {
|
||||||
|
color: #dddd00;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-lime {
|
||||||
|
color: lime;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-cyan {
|
||||||
|
color: cyan;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-blue {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-magenta {
|
||||||
|
color: magenta;
|
||||||
|
}
|
||||||
|
.bluelib * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.bluelib .container-main {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 1280px;
|
||||||
|
}
|
||||||
|
.bluelib .panel {
|
||||||
|
margin: 8px 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.bluelib .panel > .panel {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.bluelib .panel > .paragraph:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.bluelib .panel > .paragraph:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.bluelib .panel > .title:first-child {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
.bluelib .panel > .title:last-child {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.bluelib .panel-box {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
}
|
||||||
|
.bluelib .panel-blockquote {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
border-left-width: 2px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
border-right-width: 0;
|
||||||
|
}
|
||||||
|
.bluelib .panel-aside {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
border-width: 0;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
.bluelib .panel-table {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
display: table;
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.bluelib .panel-split {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.bluelib .panel-split > * {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-basis: 0;
|
||||||
|
}
|
||||||
|
.bluelib .status-disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.bluelib .status-hoverable {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
.bluelib .status-clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.bluelib .spoiler {
|
||||||
|
filter: blur(5px);
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
.bluelib .spoiler:hover {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
.bluelib .element-title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bluelib .element-separator {
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: dimgrey;
|
||||||
|
}
|
||||||
|
.bluelib .element-list-item {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.bluelib .align-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.bluelib .align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bluelib .align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.bluelib .size-xxl {
|
||||||
|
font-size: xx-large;
|
||||||
|
}
|
||||||
|
.bluelib .size-xl {
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
.bluelib .size-l {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
.bluelib .size-m {
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
.bluelib .size-s {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
.bluelib .size-xs {
|
||||||
|
font-size: x-small;
|
||||||
|
}
|
||||||
|
.bluelib .size-xxs {
|
||||||
|
font-size: xx-small;
|
||||||
|
}
|
||||||
|
.bluelib .style-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.bluelib .style-italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.bluelib .style-underline {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
.bluelib .style-strike {
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
}
|
||||||
|
.bluelib .style-monospace {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
.bluelib .color-red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.bluelib .color-orange {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
.bluelib .color-yellow {
|
||||||
|
color: #dddd00;
|
||||||
|
}
|
||||||
|
.bluelib .color-lime {
|
||||||
|
color: lime;
|
||||||
|
}
|
||||||
|
.bluelib .color-cyan {
|
||||||
|
color: cyan;
|
||||||
|
}
|
||||||
|
.bluelib .color-blue {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
.bluelib .color-magenta {
|
||||||
|
color: magenta;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=skeleton-class.css.map */
|
||||||
1
src/skeleton/skeleton-class.css.map
Normal file
1
src/skeleton/skeleton-class.css.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"sources":["skeleton.less","skeleton-class.less"],"names":[],"mappings":"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","file":"skeleton-class.css"}
|
||||||
5
src/skeleton/skeleton-class.less
Normal file
5
src/skeleton/skeleton-class.less
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import "skeleton";
|
||||||
|
|
||||||
|
.bluelib {
|
||||||
|
.bluelib-skeleton();
|
||||||
|
}
|
||||||
398
src/skeleton/skeleton-root.css
Normal file
398
src/skeleton/skeleton-root.css
Normal file
|
|
@ -0,0 +1,398 @@
|
||||||
|
.bluelib-skeleton * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .container-main {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 1280px;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel {
|
||||||
|
margin: 8px 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel > .panel {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel > .paragraph:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel > .paragraph:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel > .title:first-child {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel > .title:last-child {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel-box {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel-blockquote {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
border-left-width: 2px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
border-right-width: 0;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel-aside {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
border-width: 0;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel-table {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
display: table;
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel-split {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .panel-split > * {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-basis: 0;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .status-disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .status-hoverable {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .status-clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .spoiler {
|
||||||
|
filter: blur(5px);
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .spoiler:hover {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .element-title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .element-separator {
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: dimgrey;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .element-list-item {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .align-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-xxl {
|
||||||
|
font-size: xx-large;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-xl {
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-l {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-m {
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-s {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-xs {
|
||||||
|
font-size: x-small;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .size-xxs {
|
||||||
|
font-size: xx-small;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .style-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .style-italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .style-underline {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .style-strike {
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .style-monospace {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-orange {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-yellow {
|
||||||
|
color: #dddd00;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-lime {
|
||||||
|
color: lime;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-cyan {
|
||||||
|
color: cyan;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-blue {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
.bluelib-skeleton .color-magenta {
|
||||||
|
color: magenta;
|
||||||
|
}
|
||||||
|
:root * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
:root .container-main {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 1280px;
|
||||||
|
}
|
||||||
|
:root .panel {
|
||||||
|
margin: 8px 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
:root .panel > .panel {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
:root .panel > .paragraph:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
:root .panel > .paragraph:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
:root .panel > .title:first-child {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
:root .panel > .title:last-child {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
:root .panel-box {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
}
|
||||||
|
:root .panel-blockquote {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
border-left-width: 2px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
border-right-width: 0;
|
||||||
|
}
|
||||||
|
:root .panel-aside {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
border-width: 0;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
:root .panel-table {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
display: table;
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
:root .panel-split {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
:root .panel-split > * {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-basis: 0;
|
||||||
|
}
|
||||||
|
:root .status-disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
:root .status-hoverable {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
:root .status-clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
:root .spoiler {
|
||||||
|
filter: blur(5px);
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
:root .spoiler:hover {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
:root .element-title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
:root .element-separator {
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: dimgrey;
|
||||||
|
}
|
||||||
|
:root .element-list-item {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
:root .align-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
:root .align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
:root .align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
:root .size-xxl {
|
||||||
|
font-size: xx-large;
|
||||||
|
}
|
||||||
|
:root .size-xl {
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
:root .size-l {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
:root .size-m {
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
:root .size-s {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
:root .size-xs {
|
||||||
|
font-size: x-small;
|
||||||
|
}
|
||||||
|
:root .size-xxs {
|
||||||
|
font-size: xx-small;
|
||||||
|
}
|
||||||
|
:root .style-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
:root .style-italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
:root .style-underline {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
:root .style-strike {
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
}
|
||||||
|
:root .style-monospace {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
:root .color-red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
:root .color-orange {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
:root .color-yellow {
|
||||||
|
color: #dddd00;
|
||||||
|
}
|
||||||
|
:root .color-lime {
|
||||||
|
color: lime;
|
||||||
|
}
|
||||||
|
:root .color-cyan {
|
||||||
|
color: cyan;
|
||||||
|
}
|
||||||
|
:root .color-blue {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
:root .color-magenta {
|
||||||
|
color: magenta;
|
||||||
|
}
|
||||||
|
:root h1,
|
||||||
|
:root h2,
|
||||||
|
:root h3,
|
||||||
|
:root h4,
|
||||||
|
:root h5,
|
||||||
|
:root h6 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
:root hr {
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: dimgrey;
|
||||||
|
}
|
||||||
|
:root h1 {
|
||||||
|
font-size: xx-large;
|
||||||
|
}
|
||||||
|
:root h2 {
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
:root h3 {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
:root h4 {
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
:root h5 {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
:root h6 {
|
||||||
|
font-size: x-small;
|
||||||
|
}
|
||||||
|
:root b {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
:root i {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
:root u {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
:root pre,
|
||||||
|
:root code,
|
||||||
|
:root kbd {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
:root strike {
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
}
|
||||||
|
:root li {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
:root hr {
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: dimgrey;
|
||||||
|
}
|
||||||
|
:root *[title] {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
:root *[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
:root *[onclick] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=skeleton-root.css.map */
|
||||||
1
src/skeleton/skeleton-root.css.map
Normal file
1
src/skeleton/skeleton-root.css.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"sources":["skeleton.less","skeleton-root.less"],"names":[],"mappings":"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","file":"skeleton-root.css"}
|
||||||
87
src/skeleton/skeleton-root.less
Normal file
87
src/skeleton/skeleton-root.less
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
@import "skeleton";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
.bluelib-skeleton();
|
||||||
|
|
||||||
|
// === INHERITANCES ===
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
.bluelib-skeleton.element-title();
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
.bluelib-skeleton.element-separator();
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
.bluelib-skeleton.element-paragraph();
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
.bluelib-skeleton.size-xxl();
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
.bluelib-skeleton.size-xl();
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
.bluelib-skeleton.size-l();
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
.bluelib-skeleton.size-m();
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
.bluelib-skeleton.size-s();
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
.bluelib-skeleton.size-xs();
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
.bluelib-skeleton.style-bold();
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
.bluelib-skeleton.style-italic();
|
||||||
|
}
|
||||||
|
|
||||||
|
u {
|
||||||
|
.bluelib-skeleton.style-underline();
|
||||||
|
}
|
||||||
|
|
||||||
|
pre, code, kbd {
|
||||||
|
.bluelib-skeleton.style-monospace();
|
||||||
|
}
|
||||||
|
|
||||||
|
strike {
|
||||||
|
.bluelib-skeleton.style-strike();
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
.bluelib-skeleton.element-list-item();
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
.bluelib-skeleton.element-separator();
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
.bluelib-skeleton.element-anchor();
|
||||||
|
}
|
||||||
|
|
||||||
|
*[title] {
|
||||||
|
.bluelib-skeleton.status-hoverable();
|
||||||
|
}
|
||||||
|
|
||||||
|
*[disabled] {
|
||||||
|
.bluelib-skeleton.status-disabled();
|
||||||
|
}
|
||||||
|
|
||||||
|
*[onclick] {
|
||||||
|
.bluelib-skeleton.status-clickable();
|
||||||
|
}
|
||||||
|
}
|
||||||
248
src/skeleton/skeleton.less
vendored
Normal file
248
src/skeleton/skeleton.less
vendored
Normal file
|
|
@ -0,0 +1,248 @@
|
||||||
|
// This mixin should contain ONLY positioning and layout rules.
|
||||||
|
// They will be compiled later to different targets.
|
||||||
|
.bluelib-skeleton {
|
||||||
|
// Reset the insane box-sizing default
|
||||||
|
// Should this be changed to something different?
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
// === RULES ===
|
||||||
|
|
||||||
|
// --- Containers ---
|
||||||
|
|
||||||
|
.container-main {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 1280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// --- Panels ---
|
||||||
|
// Remember to use BOTH the panel AND the panel-* class when using a panel element!
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
margin: 8px 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
> .panel {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the margin from paragraphs, if they are the first or last element of the panel
|
||||||
|
> .paragraph {
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reduce the margin from titles, if they are the first or last element of the panel
|
||||||
|
> .title {
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// A generic content box
|
||||||
|
.panel-box {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025); // Make the panel more noticeable on a white background
|
||||||
|
}
|
||||||
|
|
||||||
|
// Should be the same as a box, but with a quote-like border
|
||||||
|
.panel-blockquote {
|
||||||
|
.panel-box();
|
||||||
|
|
||||||
|
border-left-width: 2px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
border-right-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Should be the same as a box, but with smaller text and no border
|
||||||
|
.panel-aside {
|
||||||
|
.panel-box();
|
||||||
|
|
||||||
|
border-width: 0;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Should be the same as a box, but display its contents differently
|
||||||
|
.panel-table {
|
||||||
|
.panel-box();
|
||||||
|
|
||||||
|
display: table;
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Evenly split the panels contained inside
|
||||||
|
.panel-split {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-basis: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Element status ---
|
||||||
|
|
||||||
|
.status-disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-hoverable {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Spoilers ---
|
||||||
|
|
||||||
|
.spoiler {
|
||||||
|
filter: blur(5px);
|
||||||
|
cursor: help;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Elements ---
|
||||||
|
|
||||||
|
.element-title {
|
||||||
|
.align-center();
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-paragraph {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-separator {
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: dimgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-list-item {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-anchor {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Alignment ---
|
||||||
|
|
||||||
|
.align-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Sizes ---
|
||||||
|
|
||||||
|
.size-xxl {
|
||||||
|
font-size: xx-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-xl {
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-l {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-m {
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-s {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-xs {
|
||||||
|
font-size: x-small;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-xxs {
|
||||||
|
font-size: xx-small;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Styles ---
|
||||||
|
|
||||||
|
.style-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-underline {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-strike {
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-monospace {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Colors ---
|
||||||
|
|
||||||
|
.color-red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-orange {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-yellow {
|
||||||
|
color: #dddd00; // Pure yellow isn't readable on a white background
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-lime {
|
||||||
|
color: lime;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-cyan {
|
||||||
|
color: cyan;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-blue {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-magenta {
|
||||||
|
color: magenta;
|
||||||
|
}
|
||||||
|
}
|
||||||
69
src/skins/rygblue/rygblue-class.css
Normal file
69
src/skins/rygblue/rygblue-class.css
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
.bluelib-skin-rygblue {
|
||||||
|
background-color: #0d193b;
|
||||||
|
color: #a0ccff;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .panel-box {
|
||||||
|
background-color: rgba(160, 204, 255, 0.02);
|
||||||
|
border-color: rgba(160, 204, 255, 0.1);
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .panel-blockquote {
|
||||||
|
background-color: rgba(160, 204, 255, 0.02);
|
||||||
|
border-color: rgba(160, 204, 255, 0.1);
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .panel-aside {
|
||||||
|
background-color: rgba(160, 204, 255, 0.02);
|
||||||
|
border-color: rgba(160, 204, 255, 0.1);
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .panel-table {
|
||||||
|
background-color: rgba(160, 204, 255, 0.02);
|
||||||
|
border-color: rgba(160, 204, 255, 0.1);
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .element-title {
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .element-separator {
|
||||||
|
border-color: rgba(160, 204, 255, 0.1);
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .element-anchor {
|
||||||
|
color: #00caca;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .element-anchor:hover {
|
||||||
|
color: #00ffff;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .element-anchor:active {
|
||||||
|
color: #a0ffff;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .style-bold {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .style-strike {
|
||||||
|
text-decoration-color: #ff7d7d;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .style-monospace {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .color-red {
|
||||||
|
color: #ff7d7d;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .color-orange {
|
||||||
|
color: #ffbb7d;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .color-yellow {
|
||||||
|
color: #ffff7d;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .color-lime {
|
||||||
|
color: #7dff7d;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .color-cyan {
|
||||||
|
color: #7dffff;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .color-blue {
|
||||||
|
color: #7d7dff;
|
||||||
|
}
|
||||||
|
.bluelib-skin-rygblue .color-magenta {
|
||||||
|
color: #ff7dff;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=rygblue-class.css.map */
|
||||||
1
src/skins/rygblue/rygblue-class.css.map
Normal file
1
src/skins/rygblue/rygblue-class.css.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"sources":["rygblue-class.less","rygblue.less"],"names":[],"mappings":"AAEA;ECyBI,yBAAA;EACA,cAAA;EACA,uBAAA;;AD3BJ,qBC4CI;EACI,2CAAA;EACA,sCAAA;;AD9CR,qBCkDI;EALI,2CAAA;EACA,sCAAA;;AD9CR,qBCuDI;EAVI,2CAAA;EACA,sCAAA;;AD9CR,qBC4DI;EAfI,2CAAA;EACA,sCAAA;;AD9CR,qBC2FI;EACI,cAAA;EACA,uBAAA;;AD7FR,qBCoGI;EACI,sCAAA;;ADrGR,qBC4GI;EACI,cAAA;EACA,qBAAA;;AAEA,qBAJJ,gBAIK;EACG,cAAA;;AAGJ,qBARJ,gBAQK;EACG,cAAA;;ADrHZ,qBCuKI;EACI,cAAA;;ADxKR,qBCmLI;EACI,8BAAA;;ADpLR,qBCuLI;EACI,uBAAA;;ADxLR,qBC8LI;EACI,cAAA;;AD/LR,qBCkMI;EACI,cAAA;;ADnMR,qBCsMI;EACI,cAAA;;ADvMR,qBC0MI;EACI,cAAA;;AD3MR,qBC8MI;EACI,cAAA;;AD/MR,qBCkNI;EACI,cAAA;;ADnNR,qBCsNI;EACI,cAAA","file":"rygblue-class.css"}
|
||||||
5
src/skins/rygblue/rygblue-class.less
Normal file
5
src/skins/rygblue/rygblue-class.less
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import "rygblue";
|
||||||
|
|
||||||
|
.bluelib-skin-rygblue {
|
||||||
|
.bluelib-skin-rygblue();
|
||||||
|
}
|
||||||
105
src/skins/rygblue/rygblue-root.css
Normal file
105
src/skins/rygblue/rygblue-root.css
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
:root {
|
||||||
|
background-color: #0d193b;
|
||||||
|
color: #a0ccff;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
:root .panel-box {
|
||||||
|
background-color: rgba(160, 204, 255, 0.02);
|
||||||
|
border-color: rgba(160, 204, 255, 0.1);
|
||||||
|
}
|
||||||
|
:root .panel-blockquote {
|
||||||
|
background-color: rgba(160, 204, 255, 0.02);
|
||||||
|
border-color: rgba(160, 204, 255, 0.1);
|
||||||
|
}
|
||||||
|
:root .panel-aside {
|
||||||
|
background-color: rgba(160, 204, 255, 0.02);
|
||||||
|
border-color: rgba(160, 204, 255, 0.1);
|
||||||
|
}
|
||||||
|
:root .panel-table {
|
||||||
|
background-color: rgba(160, 204, 255, 0.02);
|
||||||
|
border-color: rgba(160, 204, 255, 0.1);
|
||||||
|
}
|
||||||
|
:root .element-title {
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
:root .element-separator {
|
||||||
|
border-color: rgba(160, 204, 255, 0.1);
|
||||||
|
}
|
||||||
|
:root .element-anchor {
|
||||||
|
color: #00caca;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
:root .element-anchor:hover {
|
||||||
|
color: #00ffff;
|
||||||
|
}
|
||||||
|
:root .element-anchor:active {
|
||||||
|
color: #a0ffff;
|
||||||
|
}
|
||||||
|
:root .style-bold {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
:root .style-strike {
|
||||||
|
text-decoration-color: #ff7d7d;
|
||||||
|
}
|
||||||
|
:root .style-monospace {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
:root .color-red {
|
||||||
|
color: #ff7d7d;
|
||||||
|
}
|
||||||
|
:root .color-orange {
|
||||||
|
color: #ffbb7d;
|
||||||
|
}
|
||||||
|
:root .color-yellow {
|
||||||
|
color: #ffff7d;
|
||||||
|
}
|
||||||
|
:root .color-lime {
|
||||||
|
color: #7dff7d;
|
||||||
|
}
|
||||||
|
:root .color-cyan {
|
||||||
|
color: #7dffff;
|
||||||
|
}
|
||||||
|
:root .color-blue {
|
||||||
|
color: #7d7dff;
|
||||||
|
}
|
||||||
|
:root .color-magenta {
|
||||||
|
color: #ff7dff;
|
||||||
|
}
|
||||||
|
:root h1,
|
||||||
|
:root h2,
|
||||||
|
:root h3,
|
||||||
|
:root h4,
|
||||||
|
:root h5,
|
||||||
|
:root h6 {
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
:root hr {
|
||||||
|
border-color: rgba(160, 204, 255, 0.1);
|
||||||
|
}
|
||||||
|
:root b {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
:root pre,
|
||||||
|
:root code,
|
||||||
|
:root kbd {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
:root strike {
|
||||||
|
text-decoration-color: #ff7d7d;
|
||||||
|
}
|
||||||
|
:root hr {
|
||||||
|
border-color: rgba(160, 204, 255, 0.1);
|
||||||
|
}
|
||||||
|
:root a {
|
||||||
|
color: #00caca;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
:root a:hover {
|
||||||
|
color: #00ffff;
|
||||||
|
}
|
||||||
|
:root a:active {
|
||||||
|
color: #a0ffff;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=rygblue-root.css.map */
|
||||||
1
src/skins/rygblue/rygblue-root.css.map
Normal file
1
src/skins/rygblue/rygblue-root.css.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"sources":["rygblue-root.less","rygblue.less"],"names":[],"mappings":"AAEA;ECyBI,yBAAA;EACA,cAAA;EACA,uBAAA;;AD3BJ,KC4CI;EACI,2CAAA;EACA,sCAAA;;AD9CR,KCkDI;EALI,2CAAA;EACA,sCAAA;;AD9CR,KCuDI;EAVI,2CAAA;EACA,sCAAA;;AD9CR,KC4DI;EAfI,2CAAA;EACA,sCAAA;;AD9CR,KC2FI;EACI,cAAA;EACA,uBAAA;;AD7FR,KCoGI;EACI,sCAAA;;ADrGR,KC4GI;EACI,cAAA;EACA,qBAAA;;AAEA,KAJJ,gBAIK;EACG,cAAA;;AAGJ,KARJ,gBAQK;EACG,cAAA;;ADrHZ,KCuKI;EACI,cAAA;;ADxKR,KCmLI;EACI,8BAAA;;ADpLR,KCuLI;EACI,uBAAA;;ADxLR,KC8LI;EACI,cAAA;;AD/LR,KCkMI;EACI,cAAA;;ADnMR,KCsMI;EACI,cAAA;;ADvMR,KC0MI;EACI,cAAA;;AD3MR,KC8MI;EACI,cAAA;;AD/MR,KCkNI;EACI,cAAA;;ADnNR,KCsNI;EACI,cAAA;;ADvNR,KAKI;AALJ,KAKQ;AALR,KAKY;AALZ,KAKgB;AALhB,KAKoB;AALpB,KAKwB;ECuFhB,cAAA;EACA,uBAAA;;AD7FR,KASI;EC4FI,sCAAA;;ADrGR,KAyCI;EC+HI,cAAA;;ADxKR,KAqDI;AArDJ,KAqDS;AArDT,KAqDe;ECmIP,uBAAA;;ADxLR,KAyDI;EC2HI,8BAAA;;ADpLR,KAiEI;ECoCI,sCAAA;;ADrGR,KAqEI;ECwCI,cAAA;EACA,qBAAA;;AAEA,KD3CJ,EC2CK;EACG,cAAA;;AAGJ,KD/CJ,EC+CK;EACG,cAAA","file":"rygblue-root.css"}
|
||||||
87
src/skins/rygblue/rygblue-root.less
Normal file
87
src/skins/rygblue/rygblue-root.less
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
@import "rygblue";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
.bluelib-skin-rygblue();
|
||||||
|
|
||||||
|
// === INHERITANCES ===
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
.bluelib-skin-rygblue.element-title();
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
.bluelib-skin-rygblue.element-separator();
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
.bluelib-skin-rygblue.element-paragraph();
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
.bluelib-skin-rygblue.size-xxl();
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
.bluelib-skin-rygblue.size-xl();
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
.bluelib-skin-rygblue.size-l();
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
.bluelib-skin-rygblue.size-m();
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
.bluelib-skin-rygblue.size-s();
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
.bluelib-skin-rygblue.size-xs();
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
.bluelib-skin-rygblue.style-bold();
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
.bluelib-skin-rygblue.style-italic();
|
||||||
|
}
|
||||||
|
|
||||||
|
u {
|
||||||
|
.bluelib-skin-rygblue.style-underline();
|
||||||
|
}
|
||||||
|
|
||||||
|
pre, code, kbd {
|
||||||
|
.bluelib-skin-rygblue.style-monospace();
|
||||||
|
}
|
||||||
|
|
||||||
|
strike {
|
||||||
|
.bluelib-skin-rygblue.style-strike();
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
.bluelib-skin-rygblue.element-list-item();
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
.bluelib-skin-rygblue.element-separator();
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
.bluelib-skin-rygblue.element-anchor();
|
||||||
|
}
|
||||||
|
|
||||||
|
*[title] {
|
||||||
|
.bluelib-skin-rygblue.status-hoverable();
|
||||||
|
}
|
||||||
|
|
||||||
|
*[disabled] {
|
||||||
|
.bluelib-skin-rygblue.status-disabled();
|
||||||
|
}
|
||||||
|
|
||||||
|
*[onclick] {
|
||||||
|
.bluelib-skin-rygblue.status-clickable();
|
||||||
|
}
|
||||||
|
}
|
||||||
220
src/skins/rygblue/rygblue.less
Normal file
220
src/skins/rygblue/rygblue.less
Normal file
|
|
@ -0,0 +1,220 @@
|
||||||
|
// This mixin should contain ONLY coloring and theming rules.
|
||||||
|
// They will be compiled later to different targets.
|
||||||
|
.bluelib-skin-rygblue() {
|
||||||
|
// === LESS VARIABLES ===
|
||||||
|
|
||||||
|
@color-background: #0d193b;
|
||||||
|
@color-foreground: #a0ccff;
|
||||||
|
@color-accent: #ffffff;
|
||||||
|
|
||||||
|
@color-red: #ff7d7d;
|
||||||
|
@color-orange: #ffbb7d;
|
||||||
|
@color-yellow: #ffff7d;
|
||||||
|
@color-lime: #7dff7d;
|
||||||
|
@color-cyan: #7dffff;
|
||||||
|
@color-blue: #7d7dff;
|
||||||
|
@color-magenta: #ff7dff;
|
||||||
|
|
||||||
|
@color-link: #00caca;
|
||||||
|
@color-link-hover: #00ffff;
|
||||||
|
@color-link-active: #a0ffff;
|
||||||
|
|
||||||
|
@font-text: sans-serif;
|
||||||
|
@font-title: sans-serif;
|
||||||
|
@font-code: sans-serif;
|
||||||
|
|
||||||
|
// === RULES ===
|
||||||
|
|
||||||
|
background-color: @color-background;
|
||||||
|
color: @color-foreground;
|
||||||
|
font-family: @font-text;
|
||||||
|
|
||||||
|
// --- Containers ---
|
||||||
|
|
||||||
|
.container-main {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// --- Panels ---
|
||||||
|
// Remember to use BOTH the panel AND the panel-* class when using a panel element!
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// A generic content box
|
||||||
|
.panel-box {
|
||||||
|
background-color: fade(@color-foreground, 2%);
|
||||||
|
border-color: fade(@color-foreground, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Should be the same as a box, but with a quote-like border
|
||||||
|
.panel-blockquote {
|
||||||
|
.panel-box();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Should be the same as a box, but with smaller text and no border
|
||||||
|
.panel-aside {
|
||||||
|
.panel-box();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Should be the same as a box, but display its contents differently
|
||||||
|
.panel-table {
|
||||||
|
.panel-box();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Evenly split the panels contained inside
|
||||||
|
.panel-split {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Element status ---
|
||||||
|
|
||||||
|
.status-disabled {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-hoverable {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-clickable {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Spoilers ---
|
||||||
|
|
||||||
|
.spoiler {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Elements ---
|
||||||
|
|
||||||
|
.element-title {
|
||||||
|
color: @color-accent;
|
||||||
|
font-family: @font-title;
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-paragraph {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-separator {
|
||||||
|
border-color: fade(@color-foreground, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-list-item {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-anchor {
|
||||||
|
color: @color-link;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: @color-link-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
color: @color-link-active;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Alignment ---
|
||||||
|
|
||||||
|
.align-left {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-center {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-right {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Sizes ---
|
||||||
|
|
||||||
|
.size-xxl {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-xl {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-l {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-m {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-s {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-xs {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.size-xxs {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Styles ---
|
||||||
|
|
||||||
|
.style-bold {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-italic {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-underline {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-strike {
|
||||||
|
text-decoration-color: @color-red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-monospace {
|
||||||
|
font-family: @font-code;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// --- Colors ---
|
||||||
|
|
||||||
|
.color-red {
|
||||||
|
color: @color-red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-orange {
|
||||||
|
color: @color-orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-yellow {
|
||||||
|
color: @color-yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-lime {
|
||||||
|
color: @color-lime;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-cyan {
|
||||||
|
color: @color-cyan;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-blue {
|
||||||
|
color: @color-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-magenta {
|
||||||
|
color: @color-magenta;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue