/* 
--------------------------------------------------
EzGitDoc | Theme: Raw-Dark
--------------------------------------------------
Raw Dark is best option to pick as base project if 
you want to create your own theme. It has the most 
overwritten page styles and expanded constants list. 
If you want to share your theme, feel free to do so!
--------------------------------------------------
For more details about creating your own theme,
please refer to DEV section at:
https://trolit.github.io/EzGitDoc-documentation/
--------------------------------------------------
*/

// **********************************
// 1. Global Constants
// **********************************

@primary-color: #18181b;
@darker-primary-color: darken(@primary-color, 15%);
@lighter-primary-color: lighten(@primary-color, 45%);
@lighter-20-primary-color: lighten(@primary-color, 20%);

@brand-text-color: lighten(@primary-color, 15%);
@brand-primary-color: @lighter-primary-color;
@brand-secondary-color: @darker-primary-color;

@forms-dark-color: #585858;

@red-color: #770501;
@white-color: #fff;

// **********************************
// 2. Specific Constants
// **********************************

@workingSpace-color: @lighter-20-primary-color;
@footer-color: lighten(@primary-color, 10%);

// Badges
@badge-light-bg-color: @brand-primary-color;
@badge-light-text-color: @primary-color;

// Icons
@edit-icon-bg-color: darken(@brand-text-color, 3%);
@edit-icon-bg-color-onHover: darken(@lighter-20-primary-color, 5%);

@delete-icon-bg-color: darken(@red-color, 2%);
@delete-icon-bg-color-onHover: darken(@red-color, 2%);

// Buttons
@create-btn-color: @primary-color;
@reset-btn-color: #950A24;
@docs-btn-color: lighten(@brand-text-color, 10%);
@generate-btn-color: darken(@brand-text-color, 5%);
@close-btn-color: lighten(@primary-color, 8%);
@elegant-btn-color: @create-btn-color;
@mdb-btn-color: @lighter-primary-color;

// Toast
@toast-header-bg-color: lighten(@primary-color, 5%);
@toast-header-text-color: lighten(@primary-color, 40%);
@toast-bg-color: lighten(@primary-color, 10%);
@toast-bg-text-color: lighten(@primary-color, 55%);
@toast-close-bg-color: lighten(@primary-color, 5%);
@toast-close-text-color: lighten(@primary-color, 40%);

// Forms (Input/Textarea/Dropdown)
@form-border-color: darken(@brand-text-color, 25%);
@form-border-color-onFocus: @form-border-color;
@form-bg-color: @forms-dark-color;
@form-bg-color-onFocus: lighten(@forms-dark-color, 8%);

// List Group Item
@lgi-bg-color: lighten(@forms-dark-color, 5%);
@lgi-bg-color-onActive: darken(@forms-dark-color, 1%);
@lgi-border-color-onActive: @lgi-bg-color-onActive;

// Text
@text-muted-color: lighten(@forms-dark-color, 15%);
@didYouKnow-text-color: lighten(@forms-dark-color, 50%);
@optional-text-color: lighten(@forms-dark-color, 10%);

// Modals
@modal-header-bg-color: lighten(@primary-color, 8%);
@modal-content-bg-color: lighten(@primary-color, 15%);

@references-modal-href-active: #FFB400;
@references-modal-href-hover: #B37E00;

@modal-customContent-href-active: lighten(@brand-secondary-color, 65%);
@modal-customContent-href-onHover: lighten(@brand-secondary-color, 5%);

@ezgitpart-href-active: @references-modal-href-active;
@ezgitpart-href-hover: @references-modal-href-hover;

// Sidebar
@sidebar-headers-text-color: @brand-primary-color;
@sidebar-background-color: lighten(@primary-color, 5%);
@sidebar-top-icons-color: @brand-primary-color;
@sidebar-single-item-icon-background: #4C4C4C;
@sidebar-single-item-text-color: @brand-primary-color;
@sidebar-single-item-icon-color: @lighter-primary-color;
@sidebar-single-item-icon-color-on-hover: @brand-primary-color;
@sidebar-single-item-shadow-color-on-hover: @brand-secondary-color;

@sidebar-footer-bg-color: @brand-text-color;
@sidebar-footer-box-shadow: @brand-text-color;
@sidebar-footer-border-color: @darker-primary-color;
@sidebar-footer-icon-color-on-hover: @darker-primary-color;

// **********************************
// 3. Theme Preview
// **********************************

/* Themes Modal Preview Color */
.theme-raw-dark {
    background-color: @primary-color;
}

// **********************************
// 4. Styling
// **********************************

html[data-theme='raw-dark'] {

    /* Working space background color */
    body {
        background-color: @workingSpace-color;
    }

    /* Badges */
    .badge-light {
        background-color: @badge-light-bg-color !important;
        color: @badge-light-text-color !important;
    }

    .modal-custom-content .badge-light {
        background-color: @white-color !important;
        color: @badge-light-text-color !important;
    }

    /* Footer */
    .page-footer {
        background-color: @footer-color !important;
    }

    /* EzGitPart Element */
    .edit-icon-stylizer {
        color: white;
        background-color: @edit-icon-bg-color;
    }
    
    .edit-icon-stylizer:hover {
        background-color: @edit-icon-bg-color-onHover;
    }

    .delete-icon-stylizer {
        background-color: @reset-btn-color;
    }

    .delete-icon-stylizer:hover {
        background-color: @delete-icon-bg-color;
    }

    .ezGitPart {
        border-left: 9px solid darken(@lighter-20-primary-color, 4%);
        border-right: 9px solid @delete-icon-bg-color-onHover;
        background-color: darken(@lighter-primary-color, 9%);
        color: @white-color;
        
        td {
            color: @white-color;
        }

        pre {
            color: @white-color;
        }

        a:link, a:visited, a:active {
            color: @ezgitpart-href-active !important;     
        }

        a:hover {
            color: @ezgitpart-href-hover !important;  
        }
    }

    /* RESET(remove all items) and REMOVE single item */
    #resetConfirmationModal,
    #removeElementConfirmationModal {

        .modal-header {
            background-color: @modal-header-bg-color;
        }

        .modal-body, .modal-footer {
            background-color: lighten(@primary-color, 25%);
        }

        .modal-body i {
            color: @modal-header-bg-color;
        }

        .btn-outline-danger {
            border: 2px solid @white-color !important;
            color: @white-color !important;
        }
        
        .btn-danger {
            background-color: @primary-color !important;
        }
    }

    /* Themes/Change Element Pos modal */
    #themesModal .modal-header {
        background-color: @primary-color;
    }

    #changeElementPositionModal {
        .modal-footer {
            color: @white-color;
            background-color: @modal-content-bg-color;
        }
    }

    /* Generate Code Btn */
    #codeGenButton {
        background-color: @generate-btn-color !important;
    }

    /* Settings Modal Close Btn  */
    .settings-header .close {
        background-color: @modal-header-bg-color;
    }

    /* Settings Modal Font Setting */
    #settingsModal .modal-body .btn-toolbar {
        color: @white-color;

        .btn-group .btn {
            background-color: lighten(@brand-text-color, 10%) !important;
        }
    }

    /* Notifications (Toast) */
    #myToast {
        background-color: @toast-bg-color !important;
        color: @toast-bg-text-color;

        .close {
            background-color: @toast-close-bg-color !important;
            color: @toast-close-text-color !important;
        }

        .toast-header {
            background-color: @toast-header-bg-color;
            color: @toast-header-text-color;
        }
    }

    .btn-purple {
        background-color: @docs-btn-color !important;
    }

}

// ********************************
// References Modal Styling
// ********************************

html[data-theme='raw-dark'] {

    #referencesModal {
        .references-header {
            .heading {
                color: @white-color;
            }

            .close {
                background-color: @brand-text-color;
            }
        }
    }

    .references-modal-styles {
        background-color: @brand-text-color !important;

        a:link, a:visited, a:active {
            color: @references-modal-href-active !important;
        }

        a:hover {
            color: @references-modal-href-hover !important;  
        }
    }

}

// *****************************************
// Create/Update/Settings/@ Modals Styling
// *****************************************

html[data-theme='raw-dark'] {

    body {

        /* Header */
        .modal-custom-header {
            background-color: @modal-header-bg-color !important;
            color: @white-color;
        }

        /* Body (also named content) */
        .modal-custom-content {
            background-color: @modal-content-bg-color;
            color: @white-color !important;
            font-family: 'Sen', sans-serif, 'Josefin Sans', 'Times New Roman', Times, serif;
    
            a:link, 
            a:visited, 
            a:active {
                color: @modal-customContent-href-active;
            }
            
            a:hover {
                color: @modal-customContent-href-onHover;
            }

            /* Close Button */
            .close {
                color: @white-color;
                background-color: @close-btn-color;
            }

            /* Input / Textarea */
            .form-control:focus{
                border: 2px solid @form-border-color-onFocus;
                background-color: @form-bg-color-onFocus;
                color: @white-color;
            }

            .form-control {
                border: 2px solid @form-border-color;
                background-color: @form-bg-color;
                color: @white-color;
            }
        }
    }

    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: fade(@white-color, 65%);
        opacity: 1; /* Firefox */
    }
        
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: fade(@white-color, 65%);
    }
    
    ::-ms-input-placeholder { /* Microsoft Edge */
        color: fade(@white-color, 65%);
    }

    /* Dropdown */
    .form-group {

        .custom-select {
            border: 2px solid @form-border-color;
            background-color: @form-bg-color;
            color: @white-color;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        .custom-select:focus {
            border: 2px solid @form-border-color-onFocus;
            background-color: @form-bg-color-onFocus;
            color: @white-color;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

    }

    /* List Group Item */
    .list-group-item {
        background-color: @lgi-bg-color;
    }

    .list-group-item.active {
        background-color: @lgi-bg-color-onActive !important;
        border: 1px solid @lgi-border-color-onActive !important;
    }

    /* Required label */
    .text-muted {
        color: @text-muted-color !important;
    }

    /* "Did you know" list items */
    .form-text.text-muted {
        color: @didYouKnow-text-color !important;
    }

    /* CREATE BTN */
    .btn-elegant {
        background-color: @elegant-btn-color !important;
    }

    /* RESET BTN */
    .btn-unique {
        background-color: @reset-btn-color !important;
    }

    /* UPDATE / CLOSE BTN */
    .btn-mdb-color {
        background-color: @mdb-btn-color !important;
    }

    /* Optional label */
    .optional-text {
        color: @optional-text-color;
    }

    .modal-footer, .modal-header {
        border: 0px !important;
    }
    
    /* Setting Name */
    .custom-control-label {
        color: @white-color;
    }

}

// ********************************
// Sidebar Styling
// ********************************

html[data-theme='raw-dark'] {

    /* Background */
    .chiller-theme .sidebar-wrapper {
        background: @sidebar-background-color;
    }

    /* Icons above EzGitDoc logo */
    .github-icon, .theme-icon {
        color: @sidebar-top-icons-color; 
        height: 50px; 
        font-size: 125%; 
        position: absolute;
    }

    .theme-icon {
        margin-left: 10%;
    }

    /* Sidebar single item text color */
    .sidebar-content span {
        color: @sidebar-single-item-text-color;
    }

    /* RESET button */
    #resetButton {
        background-color: @reset-btn-color !important;
    }

    /* Borders separating sections */
    .chiller-theme .sidebar-wrapper .sidebar-header,
    .chiller-theme .sidebar-wrapper .sidebar-search,
    .chiller-theme .sidebar-wrapper .sidebar-menu {
        border-top: 0px;
    }

    /* Single Item Icon Color */
    .chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
    .chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
    .chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
    .chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
    .chiller-theme .sidebar-wrapper .sidebar-brand>a,
    .chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
    .chiller-theme .sidebar-footer>a {
        color: @primary-color;
    }

    /* Single Item Icon Color (on hover) */
    .chiller-theme .sidebar-wrapper ul li:hover a i,
    .chiller-theme .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before,
    .chiller-theme .sidebar-wrapper .sidebar-search input.search-menu:focus+span,
    .chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
        color: @sidebar-single-item-icon-color-on-hover;
        text-shadow: 0px 0px 10px @sidebar-single-item-shadow-color-on-hover;
    }

    /* Single Item Background Surrounding Icon */
    .chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
    .chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
    .chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
    .chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
        background: @sidebar-single-item-icon-background;
    }

    /* Sidebar Headers */
    .chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
        color: @sidebar-headers-text-color;
    }

    /* Footer Bg & Shadow Effect */
    .chiller-theme .sidebar-footer {
        background: @sidebar-footer-bg-color;
        box-shadow: 0px -1px 5px @sidebar-footer-box-shadow;
        border-top: 1px solid @sidebar-footer-border-color;
    }

    /* Footer Eye Icon Color */
    .page-wrapper.chiller-theme.toggled #close-sidebar {
        color: @sidebar-single-item-icon-color;
    }

    /* Footer Icon Color On Hover */
    .chiller-theme .sidebar-footer>a:hover i {
        color: @sidebar-footer-icon-color-on-hover
    }

    /* Single Element Background Color On Hover */
    .chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover>a,
    .chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a,
    .chiller-theme .sidebar-wrapper .sidebar-header .user-info,
    .chiller-theme .sidebar-wrapper .sidebar-brand>a:hover {
        background-image: linear-gradient(to right, 
        fade(@lighter-primary-color, 15%), fade(@lighter-primary-color, 10%), lighten(@primary-color, 5%););
    }

    /* Icons Color (Besides eye - fullscreen) */
    .chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
    .chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
    .chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
    .chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
    .chiller-theme .sidebar-wrapper .sidebar-brand>a,
    .chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
    .chiller-theme .sidebar-footer>a {
        color: @sidebar-single-item-icon-color;
    }

    /* Toggle Sidebar Button Background Color */
    #show-sidebar {
        background-color: @brand-secondary-color !important;
    }
}

// ********************************
// EzGitDoc Brand Styling
// ********************************

html[data-theme='raw-dark'] {

    .logo-body {
        width: 120px;
        height: 120px;
        background: @brand-primary-color; 
        -moz-border-radius: 30px; 
        -webkit-border-radius: 30px; 
        border-radius: 30px;
        text-align: center;
        margin-left: 45px;
        border: 5px inset @brand-secondary-color;
    }

    .logo-icon {
        color: @brand-text-color;
    }

    .logo-title {
        font-size: 90%; 
        color: @brand-text-color; 
        margin: 0; 
        padding: 15px 0 4px 0; 
        line-height: 0;
    }
    
}