cryptpad/www/drive/app-drive.less

871 lines
23 KiB
Plaintext

@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%);
}
}
}
}
}