The columns will grow automatically to on the height of the tallest.
-
-
+
+
Shorter panel
@@ -148,7 +148,7 @@
That's it.
-
+
Taller panel
@@ -164,33 +164,7 @@
-
-
- Limiting panels
-
-
- Panels can be limited to force them to stay under 420px in width.
-
-
-
-
-
- Split limited panels
-
-
- This applies to panels inside a splitter too!
-
-
-
-
- Autocenter
-
-
- The splitter will try to keep the limited panels centered.
-
-
-
-
+
Horizonal rows
@@ -205,8 +179,8 @@
Formatting
-
-
+
+
Colors
@@ -223,7 +197,7 @@
Magenta
-
+
Size
@@ -240,7 +214,7 @@
XXS
-
+
Alignment
@@ -251,14 +225,14 @@
Center
Right
-
+
Spoilers
You can define spoilers.
-
+
Spoiler panels
diff --git a/skeleton.css b/skeleton.css
deleted file mode 100644
index dbf546a..0000000
--- a/skeleton.css
+++ /dev/null
@@ -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;
-}
diff --git a/skin.css b/skin.css
deleted file mode 100644
index b3f38b8..0000000
--- a/skin.css
+++ /dev/null
@@ -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);
-}
diff --git a/src/skeleton/skeleton-class.css b/src/skeleton/skeleton-class.css
new file mode 100644
index 0000000..a6f7338
--- /dev/null
+++ b/src/skeleton/skeleton-class.css
@@ -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 */
\ No newline at end of file
diff --git a/src/skeleton/skeleton-class.css.map b/src/skeleton/skeleton-class.css.map
new file mode 100644
index 0000000..49fca02
--- /dev/null
+++ b/src/skeleton/skeleton-class.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["skeleton.less","skeleton-class.less"],"names":[],"mappings":"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","file":"skeleton-class.css"}
\ No newline at end of file
diff --git a/src/skeleton/skeleton-class.less b/src/skeleton/skeleton-class.less
new file mode 100644
index 0000000..b469ab8
--- /dev/null
+++ b/src/skeleton/skeleton-class.less
@@ -0,0 +1,5 @@
+@import "skeleton";
+
+.bluelib {
+ .bluelib-skeleton();
+}
diff --git a/src/skeleton/skeleton-root.css b/src/skeleton/skeleton-root.css
new file mode 100644
index 0000000..aeae290
--- /dev/null
+++ b/src/skeleton/skeleton-root.css
@@ -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 */
\ No newline at end of file
diff --git a/src/skeleton/skeleton-root.css.map b/src/skeleton/skeleton-root.css.map
new file mode 100644
index 0000000..32962be
--- /dev/null
+++ b/src/skeleton/skeleton-root.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["skeleton.less","skeleton-root.less"],"names":[],"mappings":"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","file":"skeleton-root.css"}
\ No newline at end of file
diff --git a/src/skeleton/skeleton-root.less b/src/skeleton/skeleton-root.less
new file mode 100644
index 0000000..16c24a2
--- /dev/null
+++ b/src/skeleton/skeleton-root.less
@@ -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();
+ }
+}
diff --git a/src/skeleton/skeleton.less b/src/skeleton/skeleton.less
new file mode 100644
index 0000000..9cf6358
--- /dev/null
+++ b/src/skeleton/skeleton.less
@@ -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;
+ }
+}
diff --git a/src/skins/rygblue/rygblue-class.css b/src/skins/rygblue/rygblue-class.css
new file mode 100644
index 0000000..88c0106
--- /dev/null
+++ b/src/skins/rygblue/rygblue-class.css
@@ -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 */
\ No newline at end of file
diff --git a/src/skins/rygblue/rygblue-class.css.map b/src/skins/rygblue/rygblue-class.css.map
new file mode 100644
index 0000000..80e595d
--- /dev/null
+++ b/src/skins/rygblue/rygblue-class.css.map
@@ -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"}
\ No newline at end of file
diff --git a/src/skins/rygblue/rygblue-class.less b/src/skins/rygblue/rygblue-class.less
new file mode 100644
index 0000000..8d7dc6a
--- /dev/null
+++ b/src/skins/rygblue/rygblue-class.less
@@ -0,0 +1,5 @@
+@import "rygblue";
+
+.bluelib-skin-rygblue {
+ .bluelib-skin-rygblue();
+}
diff --git a/src/skins/rygblue/rygblue-root.css b/src/skins/rygblue/rygblue-root.css
new file mode 100644
index 0000000..314e2b7
--- /dev/null
+++ b/src/skins/rygblue/rygblue-root.css
@@ -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 */
\ No newline at end of file
diff --git a/src/skins/rygblue/rygblue-root.css.map b/src/skins/rygblue/rygblue-root.css.map
new file mode 100644
index 0000000..9b2648f
--- /dev/null
+++ b/src/skins/rygblue/rygblue-root.css.map
@@ -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"}
\ No newline at end of file
diff --git a/src/skins/rygblue/rygblue-root.less b/src/skins/rygblue/rygblue-root.less
new file mode 100644
index 0000000..569e951
--- /dev/null
+++ b/src/skins/rygblue/rygblue-root.less
@@ -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();
+ }
+}
diff --git a/src/skins/rygblue/rygblue.less b/src/skins/rygblue/rygblue.less
new file mode 100644
index 0000000..b12138d
--- /dev/null
+++ b/src/skins/rygblue/rygblue.less
@@ -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;
+ }
+}
\ No newline at end of file