cryptpad/www/drive/app-drive.less

@import (once) "../../customize/src/less2/include/browser.less";
@import (once) "../../customize/src/less2/include/markdown.less";
@import (once) '../../customize/src/less2/include/leftside-menu.less';
@import (once) "../../customize/src/less2/include/tools.less";
@import (once) "../../customize/src/less2/include/limit-bar.less";
@import (once) "../../customize/src/less2/include/tokenfield.less";
@import (once) '../../customize/src/less2/include/framework.less';

.framework_min_main(
    @bg-color: @colortheme_drive-bg,
    @warn-color: @colortheme_drive-warn,
    @color: @colortheme_drive-color
);

.limit-bar_main();
.tokenfield_main();

@drive_hover: #eee;
@drive_hover-light: lighten(@drive_hover, 20%);
@drive_info-box-bg: #d2e1f2;
@drive_info-box-border: #bbb;
@drive_table-header-fg: #555;
@drive_table-header-bg: #e8e8e8;
@drive_mobile-tree-border-col: #ccc;

@drive_content-fg: @colortheme_sidebar-right-fg;
@drive_content-bg: @colortheme_sidebar-right-bg;
@drive_content-bg-ro: darken(@drive_content-bg, 10%);


/* PAGE */

display: flex;
flex-flow: column;
max-height: 100%;
min-height: auto;

.cp-unselectable {
    .tools_unselectable();
}

/* local mixins */
.drive_fileIcon {
    li {
        display: inline-block;
        margin: 10px 10px;
        width: 140px;
        height: 140px;
        text-align: center;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 5px;
        padding-bottom: 5px;
        border: 1px solid transparent;

        &:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) {
            border: 1px solid #CCC;
        }
        .cp-app-drive-element-name {
            width: 100%;
            height: 24px;
            margin: 0;
            display: inline-block;
            font-size: 14px;
            //align-items: center;
            //justify-content: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-wrap: break-word;
        }
        .cp-app-drive-element-truncated {
            display: block;
            position: absolute;
            bottom: 0px;
            left: 0; right: 0;
            text-align: center;
        }
        img.cp-app-drive-content-icon {
            height: 48px;
            max-height: none;
            max-width: none;
            margin: 8px 0;
        }
        .fa {
            display: block;
            margin: auto;
            font-size: 64px;
            margin: 18px 0;
            text-align: center;
            &.listonly {
                display: none;
            }
        }
    }
}

img.cp-app-drive-icon {
    max-width: 20px;
    max-height: 16px;
}

.cp-app-drive-container {
    flex: 1;
    overflow: auto;
    width: 100%;
    display: flex;
    flex-flow: row;
    @media screen and (max-width: @browser_media-medium-screen) {
        display: block;
        #cp-app-drive-toolbar {
            .path .element {
                display: none;
            }
        }
        #cp-app-drive-tree {
            resize: none;
            width: 100%;
            max-width: unset;
            max-height: unset;
            border-bottom: 1px solid @drive_mobile-tree-border-col;
            .cp-app-drive-tree-category {
                margin-top: 0.5em;
            }
        }
    }
}

div:focus {
    outline: none;
}

.fa {
    font-family: FontAwesome;
}

ul {
    list-style: none;
    padding-left: 0px; // Remove the default padding
}

li {
    padding: 0px 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cp-app-drive-context {
    display: none;
    position: absolute;
    z-index: 500;
    li {
        padding: 0;
        font-size: @colortheme_app-font-size;
        a {
            cursor: pointer;
        }
    }
}

.cp-app-drive-element-droppable {
    background-color: #FE9A2E;
    color: #222;
}

.cp-app-drive-element-selected {
    background: #666 !important;
    color: #eee;
    margin: -1px;
    .fa-minus-square-o, .fa-plus-square-o {
        color: @colortheme_sidebar-left-fg;
    }
}

.cp-app-drive-element-selected-tmp {
    border: 1px dotted #bbb;
    background: #AAA;
    color: #ddd;
    margin: -1px;
    .fa-minus-square-o, .fa-plus-square-o {
        color: @colortheme_sidebar-left-fg;
    }
}

span {
    &.fa-folder, &.fa-folder-open {
        //color: #FEDE8B;
        //text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }
}

/* TREE */


#cp-app-drive-tree {
    font-size: @colortheme_app-font-size;
    //border-right: 1px solid #ccc;
    box-sizing: border-box;
    background: @colortheme_sidebar-left-bg;
    overflow: auto;
    resize: horizontal;
    width: auto;
    white-space: nowrap;
    max-width: 500px;
    min-width: 200px;
    padding: 0px;
    color: @colortheme_sidebar-left-fg;
    display: flex;
    flex-flow: column;
    max-height: 100%;
    .cp-app-drive-tree-categories-container {
        flex: 1;
        max-width: 500px;
        overflow: auto;
    }
    img.cp-app-drive-icon {
        margin-bottom: 3px;
        margin-left: -2px;
    }
    .cp-app-drive-tree-docs {
        margin-top: 20px;
        //padding: 0 0 0 20px;
        padding: 0;
        cursor: auto;
        &li, li {
            padding: 0;
            &.cp-app-drive-element-collapsed ul {
                display: none;
            }
            input {
                width: ~"calc(100% - 30px)";
                padding: 0 10px;
                border: 0;
                color: lighten(@colortheme_sidebar-left-fg, 40%);
            }
            & > span.cp-app-drive-element-row {
                overflow: hidden;
                text-overflow: ellipsis;
                //min-width: ~"calc(100% + 5px)";
                .leftside-menu-category_main();
                width: ~"calc(100% + 5px)";
                margin: 0;
                margin-bottom: -6px;
                display: inline-block;
                cursor: pointer;
                margin-left: -5px;
                padding-left: 5px;
            }
            & > span.cp-app-drive-element-row:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-active):hover {
            }
        }
    }
    span.cp-app-drive-element {
        cursor: pointer;
    }
    .cp-app-drive-tree-category {
        margin: 0;
        margin-top: 15px;
        .cp-app-drive-tree-root {
            &> .fa {
                min-width: 30px;
                cursor: pointer;
            }
        }
        li {
            padding: 0;
            .cp-app-drive-element-row {
                display: block;
                padding-left: 20px;
                .leftside-menu-category_main();
                margin: 0;
                .fa {
                    width: 25px;
                }
            }
        }
    }
    .cp-app-drive-tree-category:last-child {
        margin-bottom: 20px;
    }
    .cp-limit-container {
        margin-top: 5px;
    }
    #cp-app-drive-tree-search {
        text-align: center;
        padding: 0;
        position: relative;
        input {
            background: lighten(@colortheme_drive-bg, 8%);
            color: @colortheme_drive-color;
            .tools_placeholder-color(@colortheme_drive-color);
            outline-width: 0px;
            border-radius: 0;
            width: 100%;
            //border: 1px solid #ccc;
            border: 0;
            border-right: 1px solid lighten(@colortheme_drive-bg, 16%);
            //border-right: 0;
            height: @variables_bar-height;
            padding: 0 5px;
            padding-left: 45px;
            &:focus {
                outline-width: 0px;
            }
        }
        .cp-app-drive-tree-search-con {
            color: @colortheme_drive-color;
            position: absolute;
            left: 20px; // TODO align with drive categories
            top: 8px;
        }
    }
    .fa.cp-app-drive-icon-expcol {
        margin-left: -10px;
        font-size: 14px;
        position: absolute;
        left: -20px;
        top: 10px;
        width: 11px !important;
        height: 11px !important;
        padding: 0;
        margin: 0;
        background: white;
        z-index: 10;
        cursor: default;
        &:before {
            position:relative;
            top: -1px;
        }
    }
    .cp-app-drive-tree-docs {
        .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol {
            position: relative;
            top:0;
            left: -10px;
        }
        .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder {
            margin-left: -5px;
        }
        .cp-app-drive-tree-root {
            &> .cp-app-drive-element-row {
                padding-left: 20px;
            }
            &> ul {
                padding-left: 30px;
            }
        }
    }

    // Expand/collapse lines
    .cp-app-drive-tree-docs ul {
        margin: 0px 0px 0px 10px;
        list-style: none;
        padding-left: 10px;
        li {
            position: relative;
            &:before {
                position: absolute;
                left: -15px;
                top: -11px;
                content: '';
                display: block;
                border-left: 1px solid @colortheme_sidebar-left-branch;
                height: ~"calc(1em + 11px)";
                border-bottom: 1px solid @colortheme_sidebar-left-branch;
                width: 15px;
            }
            &:after {
                position: absolute;
                left: -15px;
                bottom: -7px;
                content: '';
                display: block;
                border-left: 1px solid @colortheme_sidebar-left-branch;
                height: 100%;
            }
            &.cp-app-drive-tree-root {
                margin: 0px 0px 0px -10px;
                &:before {
                    display: none;
                }
                &:after {
                    display: none;
                }
            }
            &:last-child:after {
                display: none;
            }
        }
    }
}

/* CONTENT */
#cp-app-drive-content-container {
    display: flex;
    flex-flow: column;
    flex: 1;
    // Needed to avoid the folder's path to overflows
    // https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout
    min-width: 0;
}
#cp-app-drive-content {
    box-sizing: border-box;
    background: @drive_content-bg;
    color: @drive_content-fg;
    overflow: auto;
    flex: 1;
    display: flex;
    flex-flow: column;
    position: relative;
    .cp-app-drive-content-select-box {
        display: none;
        background-color: rgba(100, 100, 100, 0.7);
        position: absolute;
        z-index: 50;
    }
    &.cp-app-drive-readonly {
        background: @drive_content-bg-ro;
    }
    h1 {
        padding-left: 10px;
        margin-top: 10px;
    }
    .cp-app-drive-content-info-box {
        line-height: 2em;
        padding: 0.25em 0.75em;
        margin: 1em;
        background: @drive_info-box-bg;
        span {
            cursor: pointer;
            float: right;
            margin-top: 0.5em;
        }
    }
    li {
        cursor: default;
        &:not(.cp-app-drive-element-header) {
            &:hover {
                &:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) {
                    background-color: @drive_hover;
                }
            }
        }
    }
    #cp-app-drive-content-folder {
        li {
            &.cp-app-drive-search-result {
                border-bottom: 1px solid @drive_info-box-border;
                display: block;
                &:hover {
                    background-color: initial;
                }
                table {
                    width: 100%;
                    .cp-app-drive-search-label2 {
                        width: 150px;
                        font-size: 15px;
                        text-align: right;
                        padding-right: 15px;
                    }
                    .cp-app-drive-search-opendir {
                        display: flex;
                        justify-content: space-between;
                        a {
                            cursor: pointer;
                            color: #41b7d8;
                            &:hover {
                                color: #014c8c;
                                text-decoration: underline;
                            }
                        }
                    }
                    .cp-app-drive-search-path {
                        font-style: italic;
                        direction: rtl;
                        .cp-app-drive-path-element {
                            display: inline-block;
                            margin-right: 5px;
                        }
                    }
                    .cp-app-drive-search-title {
                        font-weight: bold;
                        cursor: pointer;
                        &:hover {
                            background-color: @drive_hover;
                        }
                    }
                    .cp-app-drive-search-col2 {
                        width: 250px;
                    }
                    td.cp-app-drive-search-icon {
                        width: 50px;
                        font-size: 40px;
                    }
                }
            }
            &.cp-app-drive-tags-list {
                width: 100%;
                table {
                    margin: 10px 50px;
                    width: ~"calc(100% - 100px)";
                    table-layout: fixed;
                    td, th {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
    .cp-app-drive-element {
        .cp-app-drive-element-truncated { display: none; }
    }
    div.cp-app-drive-content-grid {
        padding: 20px;
        .drive_fileIcon;
        li {
            &.cp-app-drive-element {
                position: relative;
            }
            input {
                width: 100%;
                margin: 0;
                padding: 0;
                border-radius: 0;
                border: 1px solid #ddd;
                font-size: 14px;
            }
            .cp-app-drive-element-state {
                position: absolute;
                top: 3px;
                right: 3px;
                .fa {
                    margin:0;
                    font-size: 18px;
                }
            }
            .cp-app-drive-element-thumbnail {
                max-width: 100px;
                max-height: 100px;
                & ~ .fa {
                    display: inline;
                    font-size: 17px;
                    position: absolute;
                    top: 3px;
                    left: 3px;
                    margin: 0;
                }
            }
        }
        .cp-app-drive-element-list {
            display: none;
        }
        .cp-app-drive-new-ghost {
            cursor: pointer;
            opacity: 0.5;
            padding: 0;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            display: inline-flex;
            &:hover {
                opacity: 0.7;
            }
            .fa {
                cursor: pointer;
                font-size: 90px;
                margin-top: 5px;
                margin-bottom: 0;
            }
        }
    }

    .cp-app-drive-content-list {
        .cp-app-drive-element-grid {
            display: none;
        }
        // Make it act as a table!
        padding-left: 20px;
        ul {
            display: table;
            width: 100%;
            padding: 0px 10px;
        }
        li {
            display: table-row;
            input {
                border: 1px solid #ddd;
                margin: 0;
                padding: 0 4px;
            }
            &> span {
                padding: 0 5px;
                display: table-cell;
            }
            &:not(.cp-app-drive-element-header) {
                height: @variables_bar-height;
                line-height: @variables_bar-height;
            }
            &.cp-app-drive-element-header {
                cursor: default;
                color: @drive_table-header-fg;
                span {
                    &:not(.fa) {
                        text-align: left;
                    }
                    &.sortasc, &.sortdesc {
                        float: right;
                    }
                }
                &> span {
                    padding: 15px 5px;
                    &.cp-app-drive-sort-active {
                        font-weight: bold;
                    }
                    &.cp-app-drive-sort-clickable {
                        cursor: pointer;
                        &:hover {
                            background: @drive_table-header-bg;
                        }
                    }
                }
            }
        }
        .cp-app-drive-element {
            span {
                overflow: hidden;
                white-space: nowrap;
                box-sizing: border-box;
                &.cp-app-drive-element-state {
                    .fa:not(:last-child) {
                        margin-right: 5px;
                    }
                }
                &.cp-app-drive-content-icon, &.cp-app-drive-element-state, &.cp-icon {
                    width: 30px;
                }
                &.cp-app-drive-element-type, &.cp-app-drive-element-atime, &.cp-app-drive-element-ctime {
                    width: 175px;
                }
                &.cp-app-drive-element-title {
                    width: 250px;
                    @media screen and (max-width: 1200px) {
                        display: none;
                    }
                }
                &.cp-app-drive-element-folders, &.cp-app-drive-element-files {
                    width: 150px;
                }
            }
        }
    }
}

#cp-app-drive-content-folder {
    padding-right: 10px;
    flex: 1;
}

#cp-app-drive-new-ghost-dialog.cp-modal-container {
    .drive_fileIcon;

    li:not(.cp-app-drive-element-selected):hover {
        border: 1px solid white;
    }
    .cp-modal {
        display: flex;
        flex-flow: column;
        li, li .fa {
            cursor: pointer;
        }
        &> p {
            margin: 50px;
        }
        &> div {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            overflow-y: auto;
            .cp-app-drive-new-upload {
                break-after: always;
                page-break-after: always;
            }
        }
    }

    .cp-app-drive-new-name {
        white-space: nowrap;
    }

    @media screen and (max-height: @browser_media-not-big) {
        .cp-modal {
            & > p {
                display: none;
            }
            & > div {
                align-content: unset;
                li {
                    height: 40px;
                    width: 90%;
                    display: flex;
                    align-items: center;
                    .fa {
                        font-size: 32px;
                    }
                    .cp-app-drive-new-name {
                        height: auto;
                    }
                }
            }
        }
    }
}


/* Toolbar */

#cp-app-drive-toolbar {
    background: lighten(@colortheme_drive-bg, 8%);
    color: @colortheme_drive-color;
    //height: 30px;
    //display: flex;
    //flex-flow: row;
    z-index: 100;
    box-sizing: border-box;
    height: @variables_bar-height;
    padding: 0;
    display: flex;
    flex-flow: row;

    * {
        outline-width: 0;
        &:focus {
            outline-width: 0;
        }
    }

    .cp-toolbar-icon-history {
        float: right;
        .cp-toolbar-drawer-element {
            display: none;
        }
    }

    .cp-app-drive-toolbar-rightside, .cp-app-drive-toolbar-leftside {
        display: inline-block;
        margin: 0;
        padding: 0;
        .fa {
            margin: 0;
        }
        button {
            height: @variables_bar-height;
            padding: 0 10px;
            border: none;
            border-radius: 0;
            box-sizing: border-box;
            background: transparent;
            font-size: @colortheme_app-font-size;
            color: @colortheme_drive-color;
            transition: all 0.15s;
            .drawer {
                display: none;
            }
            .fa, span {
                font-size: @colortheme_app-font-size;
            }
            &:hover {
                background: @colortheme_drive-bg;
            }
            &.cp-app-drive-toolbar-active {
                display: none;
            }
        }
    }
    .cp-app-drive-toolbar-rightside {
        float: right;
        & > * {
            float: right;
        }
        #cp-app-drive-toolbar-contextbuttons {
            display: inline-block;
            height: 100%;
        }
        padding-left: 10px;
    }
    .cp-app-drive-toolbar-leftside {
        & > span {
            height: 100%;
            margin: 0;
        }
        button {
            padding: 0 10px;
            .fa {
                margin-right: 5px;
            }
            .cp-dropdown-button-title {
                display: inline-flex;
                height: @variables_bar-height;
                align-items: center;
                span:not(.fa) {
                    line-height: 23px;
                }
            }
        }
    }

    button {
        font: @colortheme_app-font;
        span {
            font: @colortheme_app-font;
        }
        .fa, &.fa {
            font-family: FontAwesome;
        }
    }
    /* The container <div> - needed to position the dropdown content */
    .cp-dropdown-container {
        margin: 2px 2px;
        line-height: 1em;
        position: relative;
        display: inline-block;
    }
    .cp-dropdown-content {
        margin-right: 2px;
    }

    .cp-app-drive-path {
        flex: 1;
        width: 100%;
        height: @variables_bar-height;
        line-height: @variables_bar-height;
        cursor: default;
        width: auto;
        overflow: hidden;
        white-space: nowrap;
        direction: rtl;
        max-width: 100%;
        text-align: left;
        .cp-app-drive-path-element {
            display: inline-block;
            height: @variables_bar-height;
            line-height: @variables_bar-height;
            font-size: @colortheme_app-font-size;
            padding: 0 5px;
            border: 0;
            background: darken(@colortheme_drive-bg, 10%);
            color: @colortheme_drive-color;
            box-sizing: border-box;
            transition: all 0.15s;
            &.cp-app-drive-path-separator {
                color: #ccc;
            }
            &.cp-app-drive-path-lickable {
                cursor: pointer;
                &:hover {
                    background: darken(@colortheme_drive-bg, 15%);
                }
            }
        }
    }
}