sam
5cdadc6158
these are *hell* for user styles and they're really not necessary. they are still used on some editor pages as those are less important to be able to comprehensively style, imo
66 lines
1.6 KiB
SCSS
66 lines
1.6 KiB
SCSS
@use "bootstrap/scss/bootstrap" with (
|
|
$color-mode-type: media-query,
|
|
$font-family-sans-serif: (
|
|
"FiraGO",
|
|
system-ui,
|
|
-apple-system,
|
|
"Segoe UI",
|
|
Roboto,
|
|
"Helvetica Neue",
|
|
"Noto Sans",
|
|
"Liberation Sans",
|
|
Arial,
|
|
sans-serif,
|
|
"Apple Color Emoji",
|
|
"Segoe UI Emoji",
|
|
"Segoe UI Symbol",
|
|
"Noto Color Emoji",
|
|
)
|
|
);
|
|
|
|
@import "bootstrap-icons/font/bootstrap-icons.css";
|
|
@import "@fontsource/firago/400.css";
|
|
@import "@fontsource/firago/400-italic.css";
|
|
@import "@fontsource/firago/700.css";
|
|
@import "@fontsource/firago/700-italic.css";
|
|
|
|
// This is necessary for line breaks in translation strings to show up. Don't ask me why
|
|
.text-has-newline {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
// Make tippy tooltips look like bootstrap's
|
|
.tippy-box {
|
|
padding: bootstrap.$spacer * 0.25 bootstrap.$spacer * 0.5;
|
|
opacity: 0.9;
|
|
color: var(--bs-body-bg);
|
|
background-color: var(--bs-emphasis-color);
|
|
border-radius: var(--bs-border-radius);
|
|
}
|
|
|
|
// Add breakpoint-dependent w-{size} utilities
|
|
// Source: https://stackoverflow.com/questions/47760132/any-way-to-get-breakpoint-specific-width-classes
|
|
@each $breakpoint in map-keys(bootstrap.$grid-breakpoints) {
|
|
@each $size, $length in (25: 25%, 50: 50%, 75: 75%, 100: 100%) {
|
|
@include bootstrap.media-breakpoint-up($breakpoint) {
|
|
.w-#{$breakpoint}-#{$size} {
|
|
width: $length !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Give identicons a background distinguishable from the page
|
|
.identicon {
|
|
@media (prefers-color-scheme: dark) {
|
|
background-color: var(--bs-secondary-border-subtle);
|
|
}
|
|
|
|
background-color: var(--bs-light-border-subtle);
|
|
}
|
|
|
|
.profile-flag {
|
|
height: 1.5rem;
|
|
max-width: 200px;
|
|
border-radius: 3px;
|
|
}
|