mirror of
https://codeberg.org/VnPower/PixivFE
synced 2024-12-06 19:16:23 +01:00
perennial
150 lines
3.0 KiB
SCSS
150 lines
3.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%),
|
|
);
|
|
|
|
/// Base twbs imports
|
|
@import "./bootstrap/functions";
|
|
@import "./bootstrap/variables";
|
|
@import "./bootstrap/variables-dark";
|
|
|
|
/// Define custom colors
|
|
|
|
// 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";
|
|
|
|
/// Enable responsive border classes
|
|
/// ref: https://getbootstrap.com/docs/5.3/utilities/api/#enable-responsive
|
|
$utilities: map-merge(
|
|
$utilities, (
|
|
"rounded-start": map-merge(
|
|
map-get($utilities, "rounded-start"),
|
|
( responsive: true ),
|
|
),
|
|
"rounded-top": map-merge(
|
|
map-get($utilities, "rounded-top"),
|
|
( responsive: true ),
|
|
),
|
|
"rounded-end": map-merge(
|
|
map-get($utilities, "rounded-end"),
|
|
( responsive: true ),
|
|
),
|
|
)
|
|
);
|
|
|
|
@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-novel-card {
|
|
@extend .card;
|
|
@extend .h-100;
|
|
@extend .border-0;
|
|
@extend .rounded;
|
|
}
|
|
|
|
/// 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;
|
|
}
|
|
|
|
/// Hide elements that require JS when scripting is disabled
|
|
/// NOTE: This only seems to work when JS is actually disabled browser-wide, not via an extension like uBO
|
|
/// See the callout on https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting
|
|
/// and the CSS spec at https://drafts.csswg.org/mediaqueries-5/#scripting for more on this
|
|
///
|
|
@media (scripting: none) {
|
|
.js-required {
|
|
display: none !important;
|
|
}
|
|
}
|