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