Zaimki/assets/style.scss

@import "variables";

@import "fonts";

@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";

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;
}

main {
    margin: 2rem;
}

.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: lighten($code-color, 45%);
    word-wrap: break-word;

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

    border: 1px solid lighten($code-color, 30%);
    padding: .2em;
    border-radius: $border-radius-sm;
}

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

img.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;
    font-size: 1em;
    font-style: italic;
    em, i {
        font-style: normal;
    }
}

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

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

form[disabled] {
    opacity: .5;
}

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

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

.inverted {
    filter: invert(1);
}

.list-singular {
    padding-inline-start: 0;
    list-style: none;
    li {
        white-space: nowrap;
    }
    >li:before {
        content: "⋅";
        display: inline-block;
        width: $fa-fw-width;
        text-align: center;
    }
}
.list-plural {
    padding-inline-start: 0;
    list-style: none;
    li {
        white-space: nowrap;
    }
    >li:before {
        content: "⁖";
        display: inline-block;
        width: $fa-fw-width;
        text-align: center;
    }
}

.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;
}