mirror of
https://codeberg.org/VnPower/PixivFE
synced 2024-12-06 19:16:23 +01:00
perennial
111 lines
2.0 KiB
SCSS
111 lines
2.0 KiB
SCSS
/// Bootstrap limits grid-row-columns to 6 by default
|
|
/// src: https://github.com/twbs/bootstrap/issues/36691
|
|
$grid-row-columns: 7;
|
|
|
|
/// custom aspect ratio for novels (currently using 3x4)
|
|
/// NOTE: "1x1" needs to be specified here even though it's not custom
|
|
$aspect-ratios: (
|
|
"1x1": 100%,
|
|
"1x2": calc(2 / 1 * 100%),
|
|
"3x4": calc(4 / 3 * 100%),
|
|
"9x16": calc(16 / 9 * 100%),
|
|
);
|
|
|
|
/// Define custom colors
|
|
@import "./bootstrap/functions";
|
|
@import "./bootstrap/variables";
|
|
@import "./bootstrap/variables-dark";
|
|
|
|
// Add a custom color to $theme-colors
|
|
$custom-colors: (
|
|
"custom-color": #7aa2f7,
|
|
"charcoal-surface1": #1f1f1f,
|
|
"charcoal-surface2": #3a3a3a,
|
|
);
|
|
$theme-colors: map-merge($theme-colors, $custom-colors);
|
|
|
|
@import "./bootstrap/maps";
|
|
@import "./bootstrap/mixins";
|
|
@import "./bootstrap/utilities";
|
|
|
|
@import "./bootstrap/bootstrap";
|
|
|
|
/// Custom classes to reduce boilerplate
|
|
.custom-btn-secondary {
|
|
@extend .btn;
|
|
@extend .fw-bold;
|
|
@extend .rounded-pill;
|
|
@extend .border-0;
|
|
@extend .py-2;
|
|
@extend .px-3;
|
|
}
|
|
|
|
.custom-btn-secondary-flex {
|
|
@extend .custom-btn-secondary;
|
|
@extend .flex-fill;
|
|
}
|
|
|
|
.custom-card {
|
|
@extend .card;
|
|
@extend .border-0;
|
|
@extend .rounded-5;
|
|
}
|
|
|
|
.custom-card-body {
|
|
@extend .card-body;
|
|
@extend .border-0;
|
|
@extend .rounded-5;
|
|
}
|
|
|
|
/// Custom heading sizes (e.g., h1 gets h3 size, h2 gets h4 size, etc.)
|
|
h1 {
|
|
font-size: $h3-font-size;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
h2 {
|
|
font-size: $h4-font-size;
|
|
font-weight: $font-weight-bold;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: $h5-font-size;
|
|
font-weight: $font-weight-bold;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: $h6-font-size;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
h5 {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
h6 {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
/// htmx
|
|
.bookmark-spinner {
|
|
display: none;
|
|
}
|
|
.htmx-request .bookmark-spinner {
|
|
display: inline;
|
|
}
|
|
.htmx-request.bookmark-spinner {
|
|
display: inline;
|
|
}
|
|
|
|
.like-spinner {
|
|
display: none;
|
|
}
|
|
.htmx-request .like-spinner {
|
|
display: inline;
|
|
}
|
|
.htmx-request.like-spinner {
|
|
display: inline;
|
|
}
|