127 lines
2.4 KiB
CSS
127 lines
2.4 KiB
CSS
.short {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 5;
|
||
overflow: hidden;
|
||
|
||
/* Do not remove : required not to crop letters descenders */
|
||
padding-bottom: 0.16rem;
|
||
}
|
||
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
|
||
.no-scroll {
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
body {
|
||
background-size: var(--unit--horizontal) var(--unit--vertical);
|
||
background-image: linear-gradient(
|
||
to right,
|
||
var(--color-secondary--x-light) 1px,
|
||
transparent 1px
|
||
),
|
||
linear-gradient(
|
||
to bottom,
|
||
var(--color-secondary--light) 1px,
|
||
transparent 1px
|
||
),
|
||
linear-gradient(
|
||
to bottom,
|
||
var(--color-secondary--x-light) 1px,
|
||
transparent 1px
|
||
);
|
||
background-position: 0 0, 0 0, 0 calc(var(--unit--vertical) / 2);
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
.left:not(.padding) {
|
||
margin-left: calc(var(--unit--horizontal) * var(--left));
|
||
}
|
||
.padding.left {
|
||
padding-left: calc(var(--unit--horizontal) * var(--left));
|
||
}
|
||
.top:not(.padding) {
|
||
margin-top: calc(var(--unit--vertical) * var(--top));
|
||
}
|
||
.padding.top {
|
||
padding-top: calc(var(--unit--vertical) * var(--top));
|
||
}
|
||
.right:not(.padding) {
|
||
margin-right: calc(var(--unit--horizontal) * var(--right));
|
||
}
|
||
.padding.right {
|
||
padding-right: calc(var(--unit--horizontal) * var(--right));
|
||
}
|
||
.bottom:not(.padding) {
|
||
margin-bottom: calc(var(--unit--vertical) * var(--bottom));
|
||
}
|
||
.padding.bottom {
|
||
padding-bottom: calc(var(--unit--vertical) * var(--bottom));
|
||
}
|
||
|
||
.full-width {
|
||
width: 100%;
|
||
}
|
||
|
||
.width {
|
||
width: calc(var(--unit--horizontal) * var(--width));
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
justify-content: var(--content);
|
||
align-items: var(--align);
|
||
gap: calc(var(--gap) * var(--unit--horizontal));
|
||
}
|
||
.flex.column {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.light {
|
||
opacity: var(--opacity-light);
|
||
}
|
||
|
||
.footnote::before {
|
||
content: " [";
|
||
}
|
||
.footnote::after {
|
||
content: "]";
|
||
}
|
||
|
||
/* ================= COLORS ================= */
|
||
.color {
|
||
color: var(--color);
|
||
}
|
||
.opacity {
|
||
opacity: var(--opacity);
|
||
}
|
||
|
||
/* ================= BUTTONS ================= */
|
||
.toggle-btn--left::after,
|
||
button.plus::after {
|
||
margin-left: var(--unit--horizontal);
|
||
}
|
||
|
||
.toggle-btn--left::after,
|
||
button.plus::after {
|
||
content: "+";
|
||
}
|
||
.toggle-btn--left.open::after {
|
||
content: "-";
|
||
}
|
||
.toggle-btn--right::before {
|
||
margin-right: var(--unit--horizontal);
|
||
}
|
||
.toggle-btn--right::before {
|
||
content: "+";
|
||
}
|
||
.toggle-btn--right.open::before {
|
||
content: "-";
|
||
}
|
||
|
||
.transition {
|
||
transition: all 0.5s var(--curve-sine);
|
||
}
|