/*!
 * Copyright (C) 2023 Xibo Signage Ltd
 *
 * Xibo - Digital Signage - https://xibosignage.com
 *
 * This file is part of Xibo.
 *
 * Xibo is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * Xibo is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */

// Imports
@import "mixins";
@import "variables";
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";


// CSS

/* Tab System */
.form-container {
    .nav>li>a {
        color: $xibo-color-neutral-900;
        background-color: lighten($xibo-color-neutral-900, 30%);
        @include border-radius(0);
        border: 1px solid $xibo-color-neutral-100 !important;
        padding: 5px 7px;

        &:hover {
            color: $xibo-color-neutral-100;
            background-color: $xibo-color-primary !important;
        }

        &.active,
        &.active:hover {
            background-color: $xibo-color-neutral-100 !important;
            color: $xibo-color-primary;
        }
    }

    .tab-pane {
        padding-top: 5px;
    }

    /* Form drag and drop list */
    .connectedlist .ui-sortable {
        background-color: $xibo-color-primary;
        min-height: 80px;
    }

    .form-check {
        display: flex;
        gap: 6px;
    }
    .form-check-label {
        flex-grow: 1;
    }
    .control-label {
        & > strong {
            + span[data-toggle="popover"] {
                margin-left: 10px;
            }
        }
    }
    .colorpicker-form-element.colorpicker-input {
        .picker-container {
            position: relative;
        }
    }
}

/* Tooltip colour */
div.tooltip.bs-tooltip-auto {
    .tooltip-inner {
        background-color: darken($xibo-color-secondary, 10%);
    }

    &[x-placement^=right] .arrow::before {
        border-right-color: darken($xibo-color-secondary, 10%);
    }

    &[x-placement^=left] .arrow::before {
        border-left-color: darken($xibo-color-secondary, 10%);
    }

    &[x-placement^=top] .arrow::before {
        border-top-color: darken($xibo-color-secondary, 10%);
    }

    &[x-placement^=bottom] .arrow::before {
        border-bottom-color: darken($xibo-color-secondary, 10%);
    }
}

.no-user-select {
    @include user-select-none();
}

// Minimum resolution message
.min-res-message {
    position: fixed;
    top: 0;
    left: 0;
    z-index: $min-res-message-z-index;
    height: calc(100vh - 50px);
    align-content: center;
    margin-left: 20vw;
    width: 80vw;

    &>div {
        position: relative;
        text-align: center;
        height: 40%;
        width: 80%;
        color: $xibo-color-neutral-900;
        background-color: $xibo-color-neutral-0;
        padding: 40px;
        border-radius: 8px;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        outline: 4px solid $xibo-color-primary;

        h4 {
            margin-bottom: 8px;
        }

        .close-res-message-button {
            margin-top: 32px;
        }
    }
}

.min-res-overlay {
    display: block !important;
    z-index: $min-res-message-overlay-z-index !important;
}

@media (max-width: 768px) {
    .min-res-message {
        height: calc(100vh - 150px);
    }
}

/* Layout Manager */
#layout-manager {
    left: 10px;
    top: 10px;
    z-index: 1;
    position: fixed;
    width: 220px;
    opacity: 0.8;

    #layout-manager-header {
        background: #2d2d2d;
        color: white;
        font-weight: bold;
        padding: 5px;
        border: #212121 3px solid;
    }

    #layout-manager-container {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 2px;
        color: #444;
        padding: 2px;
        background: #303030;
        border: #3e3e3e 4px solid;
    }

    .title {
        color: white;
        font-weight: bold;
        background-color: #4d4d4d;
        cursor: move;
        text-align: center;
    }

    .label {
        display: inline-block;
        width: 48%;
    }

    .change {
        color: black;
        background-color: #c3c3c3;
        padding: 2px;
        @include border-radius(2px);
    }

    .change.uploaded {
        background-color: #8dffa6;
    }
}

// Overlay and loading
.custom-overlay,
.custom-overlay-clone,
.loading-overlay,
.custom-overlay-edit-text,
.custom-overlay-action-widget-edit {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: black;
    @include transparent-object(65);
    z-index: $loading-overlay-z-index;
}

.custom-overlay-action-widget-edit {
    position: absolute;
    background: white;
}

.custom-overlay-edit-text, .custom-overlay-action-widget-edit {
    display: block !important;
    @include transparent-object(10);
}

.custom-overlay, .custom-overlay-clone {
    z-index: $custom-overlay-z-index;
}

.loading-overlay {
    top: auto;
    bottom: 0;
    width: 100px;
    height: 100px;
    border-radius: 0 12px 0 0;
}

.loading-overlay.loading {
    z-index: $loading-overlay-z-index;
}

.loading-overlay.loading .loading-icon {
    display: block;
    font-size: 4.3rem;
    position: absolute;
    left: 20px;
    bottom: 20px;
    color: #ffffff;
}

/* Context menu */
.context-menu-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: $context-menu-overlay-z-index;

    .context-menu {
        position: absolute;
        z-index: ($context-menu-overlay-z-index + 1);
        background: $xibo-color-neutral-0;
        @include box-shadow(4px 4px 8px $xibo-color-shadow);

        .sort-controls-container {
            text-align: center;
            background: $xibo-color-secondary;

            .context-menu-btn {
                color: $xibo-color-primary-l60;

                &:hover {
                    color: $xibo-color-primary;
                }
            }
        }

        .context-menu-btn {
            display: inline-block;
            font-size: 1rem;
            color: $xibo-color-primary;
            padding: 6px 12px;
            cursor: pointer;

            & > span {
                margin-left: 6px;
            }

            &:hover {
                background-color: $xibo-color-primary-l10;
            }
        }

        .deleteBtn, .deleteGroupElementsBtn{
            color: lighten($xibo-color-semantic-error, 5%);

            &:hover {
                color: $xibo-color-semantic-error;
            }
        }
    }
}

/* Tools icons */
.tool-icon-region {
    @extend .fa, .fa-clone;
}

.tool-icon-audio {
    @extend .fa, .fa-volume-up;
}

.tool-icon-expiry {
    @extend .fa, .fa-calendar-check-o;
}

.tool-icon-transitionIn {
    @extend .fa, .fa-sign-in;
}

.tool-icon-transitionOut {
    @extend .fa, .fa-sign-out;
}

.tool-icon-permissions {
    @extend .fa, .fa-user-secret;
}

/* Form icons */
.bg_not_found_icon {
    @extend .fa, .fa-exclamation-triangle;
    padding: 0 5px;
}

/* Toolbar level icons */
.toolbar-level-icon {
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.toolbar-level-control-1 {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.8.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' style='enable-background:new 0 0 20 20;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M3.3,20H0.8C0.4,20,0,19.6,0,19.2V0.8C0,0.4,0.4,0,0.8,0h2.5c0.4,0,0.8,0.4,0.8,0.8v18.4C4.1,19.6,3.7,20,3.3,20z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23fff8' d='M8.6,20H6.1c-0.4,0-0.8-0.4-0.8-0.8V0.8C5.3,0.4,5.7,0,6.1,0h2.5c0.4,0,0.8,0.4,0.8,0.8v18.4C9.4,19.6,9.1,20,8.6,20z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23fff8' d='M13.9,20h-2.5c-0.4,0-0.8-0.4-0.8-0.8V0.8c0-0.4,0.4-0.8,0.8-0.8h2.5c0.4,0,0.8,0.4,0.8,0.8v18.4 C14.7,19.6,14.3,20,13.9,20z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23fff8' d='M19.2,20h-2.5c-0.4,0-0.8-0.4-0.8-0.8V0.8c0-0.4,0.4-0.8,0.8-0.8h2.5C19.6,0,20,0.4,20,0.8v18.4C20,19.6,19.6,20,19.2,20z' /%3E%3C/g%3E%3C/svg%3E%0A");
}

.toolbar-level-control-2 {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.8.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' style='enable-background:new 0 0 20 20;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M3.3,20H0.8C0.4,20,0,19.6,0,19.2V0.8C0,0.4,0.4,0,0.8,0h2.5c0.4,0,0.8,0.4,0.8,0.8v18.4C4.1,19.6,3.7,20,3.3,20z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23fff' d='M8.6,20H6.1c-0.4,0-0.8-0.4-0.8-0.8V0.8C5.3,0.4,5.7,0,6.1,0h2.5c0.4,0,0.8,0.4,0.8,0.8v18.4C9.4,19.6,9.1,20,8.6,20z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23fff8' d='M13.9,20h-2.5c-0.4,0-0.8-0.4-0.8-0.8V0.8c0-0.4,0.4-0.8,0.8-0.8h2.5c0.4,0,0.8,0.4,0.8,0.8v18.4 C14.7,19.6,14.3,20,13.9,20z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23fff8' d='M19.2,20h-2.5c-0.4,0-0.8-0.4-0.8-0.8V0.8c0-0.4,0.4-0.8,0.8-0.8h2.5C19.6,0,20,0.4,20,0.8v18.4C20,19.6,19.6,20,19.2,20z' /%3E%3C/g%3E%3C/svg%3E%0A");
}

.toolbar-level-control-3 {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.8.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' style='enable-background:new 0 0 20 20;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M3.3,20H0.8C0.4,20,0,19.6,0,19.2V0.8C0,0.4,0.4,0,0.8,0h2.5c0.4,0,0.8,0.4,0.8,0.8v18.4C4.1,19.6,3.7,20,3.3,20z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23fff' d='M8.6,20H6.1c-0.4,0-0.8-0.4-0.8-0.8V0.8C5.3,0.4,5.7,0,6.1,0h2.5c0.4,0,0.8,0.4,0.8,0.8v18.4C9.4,19.6,9.1,20,8.6,20z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23fff' d='M13.9,20h-2.5c-0.4,0-0.8-0.4-0.8-0.8V0.8c0-0.4,0.4-0.8,0.8-0.8h2.5c0.4,0,0.8,0.4,0.8,0.8v18.4 C14.7,19.6,14.3,20,13.9,20z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23fff8' d='M19.2,20h-2.5c-0.4,0-0.8-0.4-0.8-0.8V0.8c0-0.4,0.4-0.8,0.8-0.8h2.5C19.6,0,20,0.4,20,0.8v18.4C20,19.6,19.6,20,19.2,20z' /%3E%3C/g%3E%3C/svg%3E%0A");
}

.toolbar-level-control-4 {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.8.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' style='enable-background:new 0 0 20 20;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M3.3,20H0.8C0.4,20,0,19.6,0,19.2V0.8C0,0.4,0.4,0,0.8,0h2.5c0.4,0,0.8,0.4,0.8,0.8v18.4C4.1,19.6,3.7,20,3.3,20z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23fff' d='M8.6,20H6.1c-0.4,0-0.8-0.4-0.8-0.8V0.8C5.3,0.4,5.7,0,6.1,0h2.5c0.4,0,0.8,0.4,0.8,0.8v18.4C9.4,19.6,9.1,20,8.6,20z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23fff' d='M13.9,20h-2.5c-0.4,0-0.8-0.4-0.8-0.8V0.8c0-0.4,0.4-0.8,0.8-0.8h2.5c0.4,0,0.8,0.4,0.8,0.8v18.4 C14.7,19.6,14.3,20,13.9,20z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23fff' d='M19.2,20h-2.5c-0.4,0-0.8-0.4-0.8-0.8V0.8c0-0.4,0.4-0.8,0.8-0.8h2.5C19.6,0,20,0.4,20,0.8v18.4C20,19.6,19.6,20,19.2,20z' /%3E%3C/g%3E%3C/svg%3E%0A");
}
