mirror of
https://github.com/Steffo99/bluelib.git
synced 2025-01-03 00:54:20 +00:00
✨ Use LESS instead of CSS
yup, i already gave up
This commit is contained in:
parent
bca49f1309
commit
44588c43e9
GPG key ID:
6965406171929D01
7 changed files with 734 additions and 0 deletions
210
src/skeleton/skeleton-class.css
Normal file
210
src/skeleton/skeleton-class.css
Normal file
|
|
@ -0,0 +1,210 @@
|
||||||
|
.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;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
}
|
||||||
|
.bluelib .panel-blockquote {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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 .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;
|
||||||
|
}
|
||||||
|
.bluelib h1,
|
||||||
|
.bluelib h2,
|
||||||
|
.bluelib h3,
|
||||||
|
.bluelib h4,
|
||||||
|
.bluelib h5,
|
||||||
|
.bluelib h6 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bluelib hr {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
.bluelib h1 {
|
||||||
|
font-size: xx-large;
|
||||||
|
}
|
||||||
|
.bluelib h2 {
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
.bluelib h3 {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
.bluelib h4 {
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
.bluelib h5 {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
.bluelib h6 {
|
||||||
|
font-size: x-small;
|
||||||
|
}
|
||||||
|
.bluelib b {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.bluelib i {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.bluelib u {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
.bluelib li {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.bluelib *[title] {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
.bluelib *[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.bluelib *[onclick] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/*# 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-class.less","skeleton.less"],"names":[],"mappings":"AAEA;ECGI,sBAAA;;ADHJ,QCSI;EACI,iBAAA;EACA,kBAAA;EACA,iBAAA;;ADZR,QCmBI;EACI,aAAA;EACA,WAAA;;ADrBR,QCmBI,OAII;EACI,SAAA;;AAKA,QAVR,OASI,aACK;EACG,aAAA;;AAGJ,QAdR,OASI,aAKK;EACG,gBAAA;;AAMJ,QArBR,OAoBI,SACK;EACG,eAAA;;AAGJ,QAzBR,OAoBI,SAKK;EACG,kBAAA;;AD7ChB,QCmDI;EACI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;;ADvDR,QC2DI;EAPI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAOA,sBAAA;EACA,mBAAA;EACA,sBAAA;EACA,qBAAA;;ADjER,QCqEI;EAjBI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAiBA,eAAA;EACA,kBAAA;;ADzER,QC6EI;EAzBI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAyBA,cAAA;EACA,iBAAA;EACA,yBAAA;;ADlFR,QCsFI;EACI,aAAA;EACA,eAAA;EACA,QAAA;EACA,uBAAA;;AD1FR,QCsFI,aAMI;EACI,YAAA;EACA,cAAA;EACA,aAAA;;AD/FZ,QCqGI;EACI,mBAAA;;ADtGR,QCyGI;EACI,YAAA;;AD1GR,QC6GI;EACI,eAAA;;AD9GR,QCmHI;EACI,QAAQ,SAAR;EACA,YAAA;;AAEA,QAJJ,SAIK;EACG,YAAA;;ADxHZ,QC8HI;EAuBI,kBAAA;;ADrJR,QCsII;EACI,iBAAA;;ADvIR,QC0II;EACI,cAAA;;AD3IR,QCgJI;EACI,gBAAA;;ADjJR,QCoJI;EACI,kBAAA;;ADrJR,QCwJI;EACI,iBAAA;;ADzJR,QC8JI;EACI,mBAAA;;AD/JR,QCkKI;EACI,kBAAA;;ADnKR,QCsKI;EACI,gBAAA;;ADvKR,QC0KI;EACI,iBAAA;;AD3KR,QC8KI;EACI,gBAAA;;AD/KR,QCkLI;EACI,kBAAA;;ADnLR,QCsLI;EACI,mBAAA;;ADvLR,QC4LI;EACI,iBAAA;;AD7LR,QCgMI;EACI,kBAAA;;ADjMR,QCoMI;EACI,+BAAA;;ADrMR,QCwMI;EACI,kCAAA;;ADzMR,QC8MI;EACI,UAAA;;AD/MR,QCkNI;EACI,aAAA;;ADnNR,QCsNI;EACI,cAAA;;ADvNR,QC0NI;EACI,WAAA;;AD3NR,QC8NI;EACI,WAAA;;AD/NR,QCkOI;EACI,WAAA;;ADnOR,QCsOI;EACI,cAAA;;ADvOR,QC4OI;AD5OJ,QC4OQ;AD5OR,QC4OY;AD5OZ,QC4OgB;AD5OhB,QC4OoB;AD5OpB,QC4OwB;EAvFhB,kBAAA;;ADrJR,QCgPI;EAzGI,iBAAA;;ADvIR,QCwPI;EAzFI,mBAAA;;AD/JR,QC4PI;EAzFI,kBAAA;;ADnKR,QCgQI;EAzFI,gBAAA;;ADvKR,QCoQI;EAzFI,iBAAA;;AD3KR,QCwQI;EAzFI,gBAAA;;AD/KR,QC4QI;EAzFI,kBAAA;;ADnLR,QCgRI;EAnFI,iBAAA;;AD7LR,QCoRI;EAnFI,kBAAA;;ADjMR,QCwRI;EAnFI,+BAAA;;ADrMR,QC4RI;EAjJI,cAAA;;AD3IR,QCgSI,EAAC;EAtLG,YAAA;;AD1GR,QCoSI,EAAC;EA9LG,mBAAA;;ADtGR,QCwSI,EAAC;EA1LG,eAAA","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();
|
||||||
|
}
|
||||||
210
src/skeleton/skeleton-root.css
Normal file
210
src/skeleton/skeleton-root.css
Normal file
|
|
@ -0,0 +1,210 @@
|
||||||
|
: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;
|
||||||
|
background-color: rgba(0, 0, 0, 0.025);
|
||||||
|
}
|
||||||
|
:root .panel-blockquote {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 2px;
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
: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 .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;
|
||||||
|
}
|
||||||
|
: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 li {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
: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-root.less","skeleton.less"],"names":[],"mappings":"AAEA;ECGI,sBAAA;;ADHJ,KCSI;EACI,iBAAA;EACA,kBAAA;EACA,iBAAA;;ADZR,KCmBI;EACI,aAAA;EACA,WAAA;;ADrBR,KCmBI,OAII;EACI,SAAA;;AAKA,KAVR,OASI,aACK;EACG,aAAA;;AAGJ,KAdR,OASI,aAKK;EACG,gBAAA;;AAMJ,KArBR,OAoBI,SACK;EACG,eAAA;;AAGJ,KAzBR,OAoBI,SAKK;EACG,kBAAA;;AD7ChB,KCmDI;EACI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;;ADvDR,KC2DI;EAPI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAOA,sBAAA;EACA,mBAAA;EACA,sBAAA;EACA,qBAAA;;ADjER,KCqEI;EAjBI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAiBA,eAAA;EACA,kBAAA;;ADzER,KC6EI;EAzBI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,sCAAA;EAyBA,cAAA;EACA,iBAAA;EACA,yBAAA;;ADlFR,KCsFI;EACI,aAAA;EACA,eAAA;EACA,QAAA;EACA,uBAAA;;AD1FR,KCsFI,aAMI;EACI,YAAA;EACA,cAAA;EACA,aAAA;;AD/FZ,KCqGI;EACI,mBAAA;;ADtGR,KCyGI;EACI,YAAA;;AD1GR,KC6GI;EACI,eAAA;;AD9GR,KCmHI;EACI,QAAQ,SAAR;EACA,YAAA;;AAEA,KAJJ,SAIK;EACG,YAAA;;ADxHZ,KC8HI;EAuBI,kBAAA;;ADrJR,KCsII;EACI,iBAAA;;ADvIR,KC0II;EACI,cAAA;;AD3IR,KCgJI;EACI,gBAAA;;ADjJR,KCoJI;EACI,kBAAA;;ADrJR,KCwJI;EACI,iBAAA;;ADzJR,KC8JI;EACI,mBAAA;;AD/JR,KCkKI;EACI,kBAAA;;ADnKR,KCsKI;EACI,gBAAA;;ADvKR,KC0KI;EACI,iBAAA;;AD3KR,KC8KI;EACI,gBAAA;;AD/KR,KCkLI;EACI,kBAAA;;ADnLR,KCsLI;EACI,mBAAA;;ADvLR,KC4LI;EACI,iBAAA;;AD7LR,KCgMI;EACI,kBAAA;;ADjMR,KCoMI;EACI,+BAAA;;ADrMR,KCwMI;EACI,kCAAA;;ADzMR,KC8MI;EACI,UAAA;;AD/MR,KCkNI;EACI,aAAA;;ADnNR,KCsNI;EACI,cAAA;;ADvNR,KC0NI;EACI,WAAA;;AD3NR,KC8NI;EACI,WAAA;;AD/NR,KCkOI;EACI,WAAA;;ADnOR,KCsOI;EACI,cAAA;;ADvOR,KC4OI;AD5OJ,KC4OQ;AD5OR,KC4OY;AD5OZ,KC4OgB;AD5OhB,KC4OoB;AD5OpB,KC4OwB;EAvFhB,kBAAA;;ADrJR,KCgPI;EAzGI,iBAAA;;ADvIR,KCwPI;EAzFI,mBAAA;;AD/JR,KC4PI;EAzFI,kBAAA;;ADnKR,KCgQI;EAzFI,gBAAA;;ADvKR,KCoQI;EAzFI,iBAAA;;AD3KR,KCwQI;EAzFI,gBAAA;;AD/KR,KC4QI;EAzFI,kBAAA;;ADnLR,KCgRI;EAnFI,iBAAA;;AD7LR,KCoRI;EAnFI,kBAAA;;ADjMR,KCwRI;EAnFI,+BAAA;;ADrMR,KC4RI;EAjJI,cAAA;;AD3IR,KCgSI,EAAC;EAtLG,YAAA;;AD1GR,KCoSI,EAAC;EA9LG,mBAAA;;ADtGR,KCwSI,EAAC;EA1LG,eAAA","file":"skeleton-root.css"}
|
||||||
5
src/skeleton/skeleton-root.less
Normal file
5
src/skeleton/skeleton-root.less
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import "skeleton";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
.bluelib-skeleton();
|
||||||
|
}
|
||||||
302
src/skeleton/skeleton.less
vendored
Normal file
302
src/skeleton/skeleton.less
vendored
Normal file
|
|
@ -0,0 +1,302 @@
|
||||||
|
// 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
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-list-item {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// === INHERITANCES ===
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
.element-title();
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
.element-separator();
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
.element-paragraph();
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
.size-xxl();
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
.size-xl();
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
.size-l();
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
.size-m();
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
.size-s();
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
.size-xs();
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
.style-bold();
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
.style-italic();
|
||||||
|
}
|
||||||
|
|
||||||
|
u {
|
||||||
|
.style-underline();
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
.element-list-item();
|
||||||
|
}
|
||||||
|
|
||||||
|
*[title] {
|
||||||
|
.status-hoverable();
|
||||||
|
}
|
||||||
|
|
||||||
|
*[disabled] {
|
||||||
|
.status-disabled();
|
||||||
|
}
|
||||||
|
|
||||||
|
*[onclick] {
|
||||||
|
.status-clickable();
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue