PronounsPage/app/assets/style.scss

@use "sass:color";
@use "sass:map";
@use "sass:math";

@import "variables";

@import "fonts";

@import "workarounds";

@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
//@import "~bootstrap/scss/images";
//@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
//@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
//TODO @import "~bootstrap/scss/input-group";
//TODO @import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
//@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
//@import "~bootstrap/scss/accordion";
//@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
//@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
//@import "~bootstrap/scss/tooltip";
//@import "~bootstrap/scss/popover";
//@import "~bootstrap/scss/carousel";
//@import "~bootstrap/scss/spinners";

@import "~bootstrap/scss/helpers";
@import "~bootstrap/scss/utilities/api";

$fa-font-path: "~@fortawesome/fontawesome-pro/webfonts";
@import "~@fortawesome/fontawesome-pro/scss/fontawesome";
@import "~@fortawesome/fontawesome-pro/scss/light";
@import "~@fortawesome/fontawesome-pro/scss/solid";
@import "~@fortawesome/fontawesome-pro/scss/brands";

@import "./dark";

@import "./glass";

@import "./print";

@import "./nouns";

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

body {
    background-image:
            linear-gradient(74deg,
                    rgba(236, 236, 236,0.02) 0%,
                    rgba(236, 236, 236,0.02) 13%,
                    transparent 13%,
                    transparent 64%,
                    rgba(55, 55, 55,0.02) 64%,
                    rgba(55, 55, 55,0.02) 71%,
                    rgba(239, 239, 239,0.02) 71%,
                    rgba(239, 239, 239,0.02) 100%),
            linear-gradient(170deg,
                    rgba(8, 8, 8,0.02) 0%,
                    rgba(8, 8, 8,0.02) 1%,
                    transparent 1%,
                    transparent 60%,
                    rgba(9, 9, 9,0.02) 60%,
                    rgba(9, 9, 9,0.02) 80%,
                    rgba(198, 198, 198,0.02) 80%,
                    rgba(198, 198, 198,0.02) 100%),
            linear-gradient(118deg,
                    rgba(134, 134, 134,0.02) 0%,
                    rgba(134, 134, 134,0.02) 30%,
                    transparent 30%,
                    transparent 43%,
                    rgba(85, 85, 85,0.02) 43%,
                    rgba(85, 85, 85,0.02) 47%,
                    rgba(103, 103, 103,0.02) 47%,
                    rgba(103, 103, 103,0.02) 100%),
            linear-gradient(249deg,
                    rgba(178, 178, 178,0.02) 0%,
                    rgba(178, 178, 178,0.02) 8%,
                    transparent 8%, transparent 47%,
                    rgba(161, 161, 161,0.02) 47%,
                    rgba(161, 161, 161,0.02) 61%,
                    rgba(19, 19, 19,0.02) 61%,
                    rgba(19, 19, 19,0.02) 100%),
            linear-gradient(90deg,
                    rgb(255,255,255),
                    rgb(255,255,255)
            );
    min-height: 100vh;
    --bs-primary-inverted: #{$primary-dark};
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: min(90vw, #{$container-width});
}

.container-wide {
    margin: 0 auto;
    width: 100%;
    max-width: min(90vw, #{$container-wide-width});
}

section {
    margin: 2*$spacer 0;
}

.main > section:first-child {
    margin-top: 0;
}

code {
    @include font-size($code-font-size);
    color: $code-color;
    background-color: color.adjust($code-color, $lightness: 45%, $space: hsl);
    word-wrap: break-word;

    // Streamline the style when inside anchors to avoid broken underline and more
    a > & {
        color: inherit;
    }

    border: 1px solid color.adjust($code-color, $lightness: 30%, $space: hsl);
    padding: .2em;
    border-radius: $border-radius-sm;
}
pre > code {
    display: block;
    padding: .5em;
    user-select: all;
}

@for $columns from 1 through 12 {
    .table-fixed-#{$columns} {
        th, td {
            width: math.div(100%, $columns);
        }
    }
}

img.icon, svg.icon {
    height: 1em;
    width: 1.25em;
    text-align: center;
}

@each $breakpoint in map.keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        @each $prop, $abbrev in (width: w, height: h) {
            @each $size, $length in (
                    25: 25%,
                    50: 50%,
                    75: 75%,
                    100: 100%,
                    auto: auto
            ) {
                .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
            }
        }

    }
}

label.required::after {
    color: $danger;
    content: ' *';
}

.mw-input {
    min-width: 16ch;
}

blockquote {
    margin-left: $spacer;
    border-left: 3px $primary solid;
    padding-left: $spacer;
}

.form-group {
    margin-bottom: $spacer;
}

strike, .text-strike {
    text-decoration: line-through;
}

.text-primary-inverted {
    color: var(--bs-primary-inverted) !important;
}

form[inert] {
    opacity: .5;
}

#arc-widget > iframe {
    position: fixed !important;
    bottom: 3px !important;
}

.sticky-top {
    z-index: 98;
}

@include media-breakpoint-up('lg') {
    .table-wide {
        margin-left: calc(-50vw + 50% + 3rem);
        margin-right: calc(-50vw + 50% + 3rem);
    }
}

@include media-breakpoint-up('lg', $grid-breakpoints) {
    .body {
        margin-top: $header-margin;
    }
    .sticky-top {
        top: $header-height + 3px;
    }
}

.inverted {
    filter: invert(1);
}

.list-singular, .list-plural {
    list-style: none;

    > li {
        padding-inline-start: $fa-fw-width;
        white-space: nowrap;

        &::before {
            display: inline-block;
            width: $fa-fw-width;
            margin-inline-start: -#{$fa-fw-width};
            text-align: center;
        }
    }
}

.list-singular > li::before {
    content: "⋅";
}
.list-plural > li::before {
        content: "⁖";
}

.btn-concise {
    white-space: nowrap;
}
@include media-breakpoint-up('md', $grid-breakpoints) {
    .list-btn-concise {
        min-width: 3rem;

        li {
            height: 2.5rem;
        }
    }
    .btn-concise {
        position: absolute;

        .btn-label {
            display: none;
        }

        &:hover .btn-label {
            display: inline;
        }
    }
}

.graph {
    width: 100%;
    height: 400px;
    @include media-breakpoint-up('md', $grid-breakpoints) {
        height: 600px;
    }
}

@include media-breakpoint-up('md', $grid-breakpoints) {
    .wide-escape {
        margin-left: -#{$wide-escape-size};
        margin-right: -#{$wide-escape-size};
    }
}

.emoji {
    height: 1em;
}

.list-group-item-hoverable {
    &:hover {
        color: $primary;
        border-inline-start: 3px solid $primary !important;
        padding-inline-start: calc(#{$list-group-item-padding-x} - 2px) !important;
    }
}
.list-group-item-active {
    background-color: $list-group-hover-bg !important;
    border-inline-start: 3px solid $primary !important;
    padding-inline-start: calc(#{$list-group-item-padding-x} - 2px) !important;
}

.list-group-item-bg {
    background-color: $white;
}

.bold {
    font-weight: bold;
}
.italics {
    font-style: italic;
}
.bold-italics {
    font-weight: bold;
    font-style: italic;
}
.semibold {
    font-weight: 600;
}
.hover-shadow:hover {
    @extend .shadow;
}

body:not(.reduced-colours) {
    @each $name, $value in $colours {
        .colour-#{$name} {
            color: map.get($value, 'light') !important;
        }
    }
}

.locale-dropdown.show {
    display: flex;
    flex-wrap: wrap;
    width: 360px;
    .dropdown-divider {
        width: 100%;
    }
    @include media-breakpoint-down('md', $grid-breakpoints) {
        width: calc(100vw - 2rem);
        right: auto;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
}

.headers-nowrap th {
    white-space: nowrap;
}

@for $i from 3 to 5 {
    @include media-breakpoint-up('lg', $grid-breakpoints) {
        .columns-#{$i} {
            column-count: $i;
            > * {
                break-inside: avoid-column;
            }
        }
    }
}

.table-balanced {
    th {
        text-align: left;
        text-wrap: balance;
    }
}

@each $name, $value in $theme-colors {
    tr.accent-#{$name} {
        border-left: 3px solid #{$value};
    }
}

.badge-sm {
    --bs-badge-font-size: 0.75rem;
}

.scroll-mt-7 {
    scroll-margin-top: 6 * $spacer;
}

body:has(dialog[open]) {
    overflow: hidden;
}

textarea,
textarea.form-control,
textarea.form-control-sm {
    field-sizing: content;
    min-height: 5rem;
}