@import "commons";

@tiles-tile-padding: 1rem;

#tab-adapters {
    .grid-main-div {
        th,td {
            padding-bottom: 0;
            padding-top: 0;
        }
    }    
    .process-adapters {
        position:   absolute;
        top:        45%;
        left:       45%;
        width:      10%;
        height:     10%;
        z-index:    2;

        .spinner {
            animation: rotator @duration linear infinite;
        }

        .path {
            stroke-dasharray: @offset;
            stroke-dashoffset: 0;
            transform-origin: center;
            stroke: #4285F4;
            animation:
                    dash @duration ease-in-out infinite;
                    //colors (@duration*4) ease-in-out infinite;
        }
    }
    .main-toolbar-table {
        left: -2px;
        a.btn-small {
            line-height: @admin-small-buttons-size;
            height: @admin-small-buttons-size;
            width: @admin-small-buttons-size;
            i {
                line-height:    @admin-small-buttons-size;
            }
        }

        .filter-input {
            display:        inline-table;
            padding-left:   6px;
            //font-size:      14px;
            height:         24px;
            width:          10rem;
            margin-top:     5px;
            margin-bottom:  0;
            &::placeholder {
                color: @admin-filter-placeholder-color;
            }
        }

        .filter-clear {
            width:          18px;
            height:         18px;
            border:         0;
            i {
                font-size:  0.8rem;
                line-height: 1.2rem;
            }
        }

        .icon-github {
            width: @admin-small-buttons-size;
            height: @admin-small-buttons-size;
            background-image: url(../img/github.svg);
            background-repeat: no-repeat;
            background-position: 8px 8px;
        }

        .main-toolbar-table-types-tools {
            display: inline-block;
            white-space: nowrap;
            min-width: 320px;
            .dropdown-button {
                height: @toolbar-size + 4px;
                line-height: @toolbar-size + 4px;
            }
            #main-toolbar-table-types-btn {
                margin-right: 5px
            }
        }
    }

    &.view-tiles {
        @media screen and (max-width: 830px) {
            // small material css http://materializecss.com/grid.html
            .main-toolbar-table-sort {
                display: none;
            }
        }
        @media screen and (max-width: 992px) { // large material css http://materializecss.com/grid.html
            .main-toolbar-table-filter {
                display: none;
            }
            .main-toolbar-table-sort {
                text-align: right;
            }
        }
    }
    &.view-table {
        .main-toolbar-table-sort {
            display: none;
        }
        @media screen and (max-width: 570px) { // large material css http://materializecss.com/grid.html
            .main-toolbar-table-filter {
                display: none;
            }
        }
    }
    .plannedBg, .planned {
        background-color: rgba(255, 0, 0, 0.1);
    }
    .planned {
        /*background-color: rgba(255,0,0,0.1);*/
        width: 100%;
        display: block;
    }

    .alphaBg, .alpha {
        background-color: rgba(255, 127, 0, 0.1);
    }

    .alpha {
        width: 100%;
        display: block;
    }

    .betaBg, .beta {
        background-color: rgba(255,255,0,0.1);
    }
    .beta {
        width: 100%;
        display: block;
    }

    .stableBg, .stable {
        // background-color: rgba(0,255,0,0.1);
    }
    .stable {
        width: 100%;
        display: block;
    }

    .small-button-empty, .small-button {
        width:      24px;
        margin:     0 1px 0 0;
        display:    inline-block;
        position:   relative;
        z-index:    1;
        border:     0;
        border-radius: 2px;
    }
    .small-button {
//        height:     24px;
        background: @tiles-tile-background;
        color:      @admin-sidemenu-main-items-color;
        padding:    1px 0 0 0;
        cursor:     pointer;
        transition: 0.2s linear;
        i {
            //font-size: 14px;
        }
        &:hover {
//            background: @main-active-color;
//            color: @admin-sidemenu-color;
        }
        &.disabled {
            opacity: 0.5;
            pointer-events: none;
        }
    }
    .fancytree-container {
        .small-button {
            i {
                font-size: 18px;
            }
        }
    }

    .tiles {
        width:          100%;
        height:         100%;
        display:        grid;
        grid-gap:       0;
        background-color: @tiles-background;
        font-family:    @main-font;
        overflow-x:     hidden;

        @media screen  {
            @media (min-width: 1921px) {
                grid-template-columns: 20% 20% 20% 20% 20%;
            }
            @media (max-width: 1920px) {
                grid-template-columns: 25% 25% 25% 25%;
            }
            @media (max-width: 860px) {
                grid-template-columns: 33% 33% 33%;
            }
            @media (max-width: 640px) {
                grid-template-columns: 50% 50%;
            }
        }

        .tile {
            margin:         0.3rem;
            background-color: @tiles-tile-background;
            font-size:      150%;
            position:       relative;
            box-sizing:     border-box;
            color:          @tiles-tile-color;
            transition:     all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            box-shadow:     rgba(0, 0, 0, 0.12) 0 1px 6px, rgba(0, 0, 0, 0.12) 0 1px 4px;
            border-radius:  2px;
            max-height:     320px;

            .small-button {
                margin-left: 0.3rem;
            }

            .card-header, .card-body, .card-action {
                padding-left:   @tiles-tile-padding;
                padding-right:  @tiles-tile-padding;
            }
            .card-header, .card-body {
                position: relative;
            }
            .card-body {
                margin-bottom:  5rem;
            }
            .card-header {
                padding-top:    0.3rem;
                width:          calc(~"100% - "@tiles-tile-padding * 2);
            }
            .card-action {
                padding-bottom: .3rem;
                height:         2.5rem;
                border-top:     1px solid rgba(160,160,160,0.2);;
                background:     @tiles-tile-background;
                position:       absolute;
                bottom:         0;
                width:          calc(~"100% - "@tiles-tile-padding * 2);
            }

            .small-button-empty {
                display: none;
            }

            .stat, .last-update {
                position:   absolute;
                top:        10px;
                right:      10px;
                font-size:  12px;
            }
            .icon {
                width:          5rem;
                height:         5rem;
                display:        inline;
                float:          left;
                padding-right:  0.4rem;
                padding-bottom: 1.3rem;
            }
            .title {
                font-size:      20px;
                font-weight:    bold;
                padding-bottom: 1rem;
                white-space:    nowrap;
                text-overflow:  ellipsis;
                overflow:       hidden;
            }
            .buttons {
                position:       absolute;
                bottom:         0.5rem;
                right:          0.5rem;
            }
            .desc {
                display:        inline;
                font-size:      1rem;
            }
            .version {
                position:       absolute;
                bottom:         0.5rem;
                left:           0.5rem;
                font-size:      1rem;

                .installed {
                    font-size:     0.8rem;
                }
                .actual-version {
                    padding-left:   0.5rem;
                    padding-right:  0.5rem;
                    color:          @tiles-tile-color;
                }
                .update-version:empty {
                    display:        none;
                }
            }
        }
    }
    .order-updated {
        .tiles {
            .tile {
                .title {
                    width: calc(~"100% - "@tiles-tile-padding * 2 ~" - 2rem")
                }
            }
        }
    }

    .card-adapters {
        min-height: 200px;
        min-width: 170px;
        height: 270px;
        background: #e2e2e2;
        .card-header {
            //    background-color: #64b5f6;
            min-height: 80px;
            padding-top: 1px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            // border-bottom: 2px solid #c3c3c3;
            background: @admin-adapters-tiles-background;
            //      background: url(../img/onf.jpg) no-repeat;
            -moz-background-size: 100%;
            -webkit-background-size: 100%;
            -o-background-size: 100%;
            background-size: 100%;
        }
        .card-header.installed {
            background: @admin-adapters-installed-background;
        }
        .card-header.updatable {
            background: @admin-adapters-updatable-background;
        }
        .card-content {
            img {
                height: 70px;
                position: absolute;
                top: 5px;
                left: 5px;
                z-index: 1;
                border-radius: 5px;
            }
            /*span {
                height: 100px;
                overflow: hidden;
                font-weight: 700 !important;
            }*/
            .ver {
                position: absolute;
                bottom: 5px;
                font-size: 1.3em;
                width: calc(~"100% - 48px");
                i {
                    font-size: 1.3em;
                }
                .data {
                    float: right;
                    &.updatable {
                        color: @admin-adapters-updatable-color;
                    }
                }
                .adapter-update-submit {
                    float: right;
                    margin-right: 5px;
                    height: 20px;
                    line-height: 20px;
                }
            }
            .btnUp {
                position: absolute !important;
                top: 60px;
                right: 0;
                margin-right: 10px !important;
            }
        }
        .card-reveal {
            font-size: 1.3em;
            background: #e2e2e2;
            button {
                // position: absolute !important;
                // bottom: 10px ;
                margin-right: 5px;
            }
            width: 100%;
            padding: 24px 24px 0 24px;
            i {
                font-size: 1.7em;
            }
            .card-reveal-buttons {
                left: 0;
                position: absolute;
                border: none;
                bottom: 0;
                height: 50px;
                background: #fff;
                right: 0;
                text-align: right;
                padding: 10px;
            }
            .adapter-delete-submit:hover {
                color: red !important;

            }
            .adapter-install-submit {
                float: left;
                &:hover {
                    color: #00bd00 !important;
                }
            }
            .adapter-readme-submit:hover {
                color: #9c27b0 !important;
            }
            .adapter-upload-submit:hover {
                color: #ff5722 !important;
            }
            .adapter-update-custom-submit:hover {
                color: #00bcd4 !important;
            }
        }
        .stat, .last-update {
            position: absolute;
            top: 30px;
            right: 10px;
        }
    }
}
#dialog-install-url {
    .with-select {
        position: relative;
        margin-bottom: 2rem;
    }
    .with-select-2 {
        position: relative;
        margin-bottom: 1rem;
    }
    label[for="install-github-link"] {
        top: 100%;
    }
    .dropdown-content.select-dropdown {
        max-height: 240px !important;
    }

    h6 {
        background: #64b5f6;
        padding: 0.5rem;
        color: white;
    }
}
#dialog-add-instance {
    .dialog-add-instance-name {
        font-style: italic;
        font-weight: bold;
        color: #0c7cd5;
        padding-left: 10px;
    }
    .dialog-add-description {
        font-size: 12px;
    }
    ul {
        max-height: 200px;
    }
}
// adapters dropdown menu
#adapters-menu {
    p {
        height: calc(~"100% - 68px");
        overflow: auto;
    }
    .adapters-versions-link-version {
        font-weight: bold;
        cursor: pointer;
    }
    .adapters-versions-link-history {
        color: #000;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: calc(~"100% - 60px");
        display: inline-block;
        line-height: 13px;
        cursor: pointer;
    }
    .collection-item {
        cursor: pointer;
    }
}

#grid-adapters, .adapters-list-table {
    width:              100%;
    border-collapse:    collapse;
    padding:            0;
    table-layout:       fixed;
    overflow:           auto;
    white-space:        nowrap;
    border-top:         0 !important;
    font-family:        @iob-font;
}

#grid-adapters {
    .fancytree-title {
        padding-left:   @line-indent !important;
        display:        inline-flex;
        align-items:    center;
    }
    .text-ellipsis {
        padding-left: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis !important;
    }
    &>thead>tr {
        height:             22px !important;
        background-color:   @list-header-background;
        line-height:        20px;
    }
    &>thead>tr>th {
        background-color: @list-header-background;
        color:          #000;
        text-align:     left;
        font-weight:    normal;
        font-size:      @list-font-size;
        padding-left:   @line-indent;
        vertical-align: middle;
        border-radius:  0;
        overflow:       hidden;
    }
    &>tbody>tr>td {
        padding:    0;
        border:     0;
        margin:     0;
        text-align: left;
        overflow:   hidden;
        white-space: nowrap;
    }
    &>tbody>tr>td>span, &>tbody>tr>td>div {
        padding:    0;
        border:     0;
    }
    &>thead>tr {
        cursor:     default;
    }
    .adapter-table-icon {
        width:      18px;
        height:     18px;
    }
    .fancytree-title {
        padding-left:   @line-indent !important;
        display:        inline-flex;
        align-items:    center;
    }
    .dropdown-content a {
        padding: 5px 10px;
    }
    .dropdown-content .adapters-versions-link {
        min-height: 22px;
        line-height: 22px;
    }
    table {
        tr {
            border: 0 !important;
        }
    }
    /*@media screen and (max-width: 1100px) and (min-width: 900px) {
        .tab-adapters-table-keywords {
            display: none;
        }
    }
    @media screen and (max-width: 900px) and (min-width: 800px) {
        .tab-adapters-table-keywords,
        .tab-adapters-table-description {
            display: none;
        }
    }
    @media screen and (max-width: 800px) {
        .tab-adapters-table-license,
        .tab-adapters-table-keywords,
        .tab-adapters-table-description {
            display: none;
        }
    }*/
}
#dialog-license {
    h5 {
        background: @main-background-color;
        color:      @admin-buttons-background;
        padding:    0.5rem;
    }
    .license-text {
        margin-bottom: 0;
        height: calc(~"100% - 80px");
    }
    .license-text>div {
        height: 100%;
    }
    .license_text {
        width: 100%;
        height: calc(~"100% - 30px");
        margin-bottom: 0;
        overflow: auto;
    }
}