NodeBB/NodeBB

@import "fonts";
@import "mixins";
@import "common";

@import "sidebar";
@import "./mobile";

@import "./general/dashboard";
@import "./general/navigation";
@import "./manage/categories";
@import "./manage/privileges";
@import "./manage/tags";
@import "./manage/groups";
@import "./settings/api";
@import "./appearance/customise";
@import "./extend/plugins";
@import "./extend/widgets";
@import "settings";

@import "../modules/alerts";
@import "../modules/scrollbar.scss";
@import "./modules/selectable";
@import "./modules/nprogress";
@import "./modules/search";

body {
    overflow-y: scroll;
}

[data-bs-theme="dark"] {
    .admin .card:not([data-container-html]) {
        box-shadow: 0px 1px 3px 0px rgba(var(--bs-black-rgb), 0.5);
    }
}

.admin {
    .acp-page-container {
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: $spacer * 1.5;
        padding: $spacer * 1.5;
        padding-top: 0;
    }
    .acp-page-main-header {
        background-color: var(--bs-body-bg);
    }

    .settings, .categories, .category, .admins-mods {
        hr {
            color: $gray-500;
        }
    }

    .form-control::placeholder, .bootstrap-tagsinput::placeholder {
        color: $gray-500 !important;
    }

    // .floating-button can either be a container or the button itself
    .floating-button {
        position: fixed;
        right: 30px;
        bottom: 30px;
        z-index: 2;
        max-width: 56px;

        button {
            &.primary {
                background: $primary !important;
            }

            &.success {
                background: $success !important;
            }

            &:not(:last-child) {
                margin-bottom: 2rem;
            }
        }
    }
    button.floating-button {
        background: $primary !important;
    }

    @mixin acp-panel-heading() {
        padding: 7px 14px;
        border: 0;
        @include box-header-font;
    }

    .card:not([data-container-html]) {
        background-color: var(--bs-body-bg);
        box-sizing: border-box;
        border-radius: 3px;
        border-width: 0px;
        box-shadow: 0px 1px 3px 0px rgba(var(--bs-secondary-rgb), 0.5);
        margin-bottom: 20px;

        >.card-header {
            @include acp-panel-heading;
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
        }

        &.card-danger >.card-header {
            @include acp-panel-heading;
        }
    }

    .icon-container {
        .fa-nbb-none {
            border: 1px dotted black;
        }
        .nbb-fa-icons {
            margin: 0;
            i {
                width: 36px;
                height: 36px;
                cursor: pointer;
                line-height: 36px;
                text-align: center;
                color: $gray-700;
                margin: 4px;

                &:hover, &.selected {
                    background: $primary;
                    color: white;
                }
            }
        }
    }

    #taskbar {
        display: none; /* not sure why I have to do this, but it only seems to show up on prod */
    }

    /* Allows the autocomplete dropbox to appear on top of a modal's backdrop */
    .ui-autocomplete {
        z-index: $zindex-popover;
    }

    .bootstrap-tagsinput {
        box-shadow: $input-box-shadow;
        width: 100%;
        background-color: var(--bs-body-bg);
        border: var(--bs-border-width) solid var(--bs-border-color);
        input {
            font-size: 0.875rem;
            width: 64px;
            padding: 0;
        }
    }
}

.dropdown-left .dropdown-menu {
    --bs-position: start;
}
.dropdown-right .dropdown-menu {
    --bs-position: end;
}

[component="category-selector"] {
    .category-dropdown-menu {
        max-height: 500px;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

.table-reordering {
    tr:hover {
        cursor: move;
    }
}

.privilege-table {
    th {
        font-size: 10px;
    }
}

* > .checkbox:first-child {
    margin-top: 0px;
}

.ui-selectable-helper {
    border: 1px dashed $success;
    background: lighten($success, 10%);
    opacity: 0.5;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

#save {
    transition: background-color 500ms linear;

    &.saved {
        background-color: $success;

        i {
            @include fa-icon-solid($fa-var-check);
        }
    }
}