Use less2 in secure iframes
This commit is contained in:
yflory
@@ -1,595 +0,0 @@
|
||||
/* PAGE */
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
overflow: auto;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
img.icon {
|
||||
max-width: 20px;
|
||||
}
|
||||
.unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.app-container {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.app-container {
|
||||
display: block;
|
||||
}
|
||||
.app-container #tree {
|
||||
resize: none;
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.app-container #tree .category2 {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
.padColor {
|
||||
color: #1c4fa0;
|
||||
}
|
||||
.codeColor {
|
||||
color: #ffae00;
|
||||
}
|
||||
.slideColor {
|
||||
color: #e57614;
|
||||
}
|
||||
.pollColor {
|
||||
color: #006304;
|
||||
}
|
||||
.fileColor {
|
||||
color: #cd2532;
|
||||
}
|
||||
.whiteboardColor {
|
||||
color: #800080;
|
||||
}
|
||||
.driveColor {
|
||||
color: #0087ff;
|
||||
}
|
||||
.defaultColor {
|
||||
color: #ddd;
|
||||
}
|
||||
div:focus {
|
||||
outline: none;
|
||||
}
|
||||
.fa {
|
||||
/*min-width: 17px;*/
|
||||
margin-right: 3px;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0px;
|
||||
}
|
||||
li {
|
||||
padding: 0px 5px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.folder,
|
||||
.file {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.contextMenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 500;
|
||||
}
|
||||
.contextMenu li {
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.contextMenu li a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.droppable {
|
||||
background-color: #FE9A2E;
|
||||
color: #222;
|
||||
}
|
||||
.selected {
|
||||
border: 1px dotted #bbb;
|
||||
background: #666;
|
||||
color: #eee;
|
||||
margin: -1px;
|
||||
}
|
||||
.selected .fa-minus-square-o,
|
||||
.selected .fa-plus-square-o {
|
||||
color: #000;
|
||||
}
|
||||
.selectedTmp {
|
||||
border: 1px dotted #bbb;
|
||||
background: #AAA;
|
||||
color: #ddd;
|
||||
margin: -1px;
|
||||
}
|
||||
.selectedTmp .fa-minus-square-o,
|
||||
.selectedTmp .fa-plus-square-o {
|
||||
color: #000;
|
||||
}
|
||||
span.fa-folder,
|
||||
span.fa-folder-open {
|
||||
color: #FEDE8B;
|
||||
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
|
||||
}
|
||||
/* TREE */
|
||||
#tree {
|
||||
border-right: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
overflow: auto;
|
||||
resize: horizontal;
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
max-width: 500px;
|
||||
min-width: 200px;
|
||||
padding: 10px 0px;
|
||||
color: #000;
|
||||
}
|
||||
#tree img.icon {
|
||||
margin-bottom: 3px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
#tree li {
|
||||
padding: 0 0 0 5px;
|
||||
cursor: auto;
|
||||
}
|
||||
#tree li.collapsed ul {
|
||||
display: none;
|
||||
}
|
||||
#tree li input {
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
#tree li > span.element-row {
|
||||
min-width: calc(100% + 5px);
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin-left: -5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
#tree li > span.element-row:not(.selected):not(.active):hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
#tree span.element {
|
||||
cursor: pointer;
|
||||
}
|
||||
#tree .active:not(.selected):not(.droppable) {
|
||||
background-color: #c8c8c8;
|
||||
}
|
||||
#tree .category2 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
#tree .category2 .root > .fa {
|
||||
min-width: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#tree #allfilesTree {
|
||||
margin-top: 0;
|
||||
}
|
||||
#tree #searchContainer {
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
#tree #searchContainer input {
|
||||
width: 80%;
|
||||
}
|
||||
#tree .fa.expcol {
|
||||
margin-left: -10px;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 9px;
|
||||
width: auto;
|
||||
height: 11px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
cursor: default;
|
||||
}
|
||||
#tree .fa.expcol:before {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
#tree ul {
|
||||
margin: 0px 0px 0px 10px;
|
||||
list-style: none;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#tree ul li {
|
||||
position: relative;
|
||||
}
|
||||
#tree ul li:before {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: -0.25em;
|
||||
content: '';
|
||||
display: block;
|
||||
border-left: 1px solid #888;
|
||||
height: 1em;
|
||||
border-bottom: 1px solid #888;
|
||||
width: 17.5px;
|
||||
}
|
||||
#tree ul li:after {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
bottom: -7px;
|
||||
content: '';
|
||||
display: block;
|
||||
border-left: 1px solid #888;
|
||||
height: 100%;
|
||||
}
|
||||
#tree ul li.root {
|
||||
margin: 0px 0px 0px -10px;
|
||||
}
|
||||
#tree ul li.root:before {
|
||||
display: none;
|
||||
}
|
||||
#tree ul li.root:after {
|
||||
display: none;
|
||||
}
|
||||
#tree ul li:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
/* CONTENT */
|
||||
#rightCol {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
#content {
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
position: relative;
|
||||
}
|
||||
#content .selectBox {
|
||||
display: none;
|
||||
background-color: rgba(100, 100, 100, 0.7);
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
}
|
||||
#content.readonly {
|
||||
background: #e6e6e6;
|
||||
}
|
||||
#content h1 {
|
||||
padding-left: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#content .info-box {
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
margin: 10px auto;
|
||||
background: #ddddff;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#content .info-box span {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
float: right;
|
||||
}
|
||||
#content .info-box.noclose {
|
||||
padding-right: 10px;
|
||||
}
|
||||
#content li {
|
||||
cursor: default;
|
||||
}
|
||||
#content li:not(.header) *:not(input) {
|
||||
/*pointer-events: none;*/
|
||||
}
|
||||
#content li:not(.header):hover:not(.selected, .selectedTmp) {
|
||||
background-color: #eee;
|
||||
}
|
||||
#content li:not(.header):hover .name {
|
||||
/*text-decoration: underline;*/
|
||||
}
|
||||
#content #folderContent li.searchResult {
|
||||
border-bottom: 1px solid #bbb;
|
||||
display: block;
|
||||
}
|
||||
#content #folderContent li.searchResult:hover {
|
||||
background-color: initial;
|
||||
}
|
||||
#content #folderContent li.searchResult table {
|
||||
width: 100%;
|
||||
}
|
||||
#content #folderContent li.searchResult table .label2 {
|
||||
width: 150px;
|
||||
font-size: 15px;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
}
|
||||
#content #folderContent li.searchResult table .openDir a {
|
||||
cursor: pointer;
|
||||
color: #41b7d8;
|
||||
}
|
||||
#content #folderContent li.searchResult table .openDir a:hover {
|
||||
color: #014c8c;
|
||||
text-decoration: underline;
|
||||
}
|
||||
#content #folderContent li.searchResult table .path {
|
||||
font-style: italic;
|
||||
}
|
||||
#content #folderContent li.searchResult table .title {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
#content #folderContent li.searchResult table .title:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
#content #folderContent li.searchResult table .col2 {
|
||||
width: 250px;
|
||||
}
|
||||
#content #folderContent li.searchResult table td.icon {
|
||||
width: 50px;
|
||||
font-size: 40px;
|
||||
}
|
||||
#content .element .truncated {
|
||||
display: none;
|
||||
}
|
||||
#content div.grid {
|
||||
padding: 20px;
|
||||
}
|
||||
#content div.grid 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;
|
||||
}
|
||||
#content div.grid li:not(.selected):not(.selectedTmp) {
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
#content div.grid li .name {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
margin: 8px 0;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
#content div.grid li.element {
|
||||
position: relative;
|
||||
}
|
||||
#content div.grid li .truncated {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
#content div.grid li input {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
#content div.grid li img.icon {
|
||||
height: 48px;
|
||||
max-width: none;
|
||||
margin: 8px 0;
|
||||
}
|
||||
#content div.grid li .fa {
|
||||
display: block;
|
||||
margin: auto;
|
||||
font-size: 48px;
|
||||
margin: 8px 0;
|
||||
text-align: center;
|
||||
}
|
||||
#content div.grid li .fa.listonly {
|
||||
display: none;
|
||||
}
|
||||
#content div.grid .listElement {
|
||||
display: none;
|
||||
}
|
||||
#content .list {
|
||||
padding-left: 20px;
|
||||
}
|
||||
#content .list ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
#content .list li {
|
||||
display: table-row;
|
||||
}
|
||||
#content .list li > span {
|
||||
padding: 0 5px;
|
||||
display: table-cell;
|
||||
}
|
||||
#content .list li.header {
|
||||
cursor: default;
|
||||
color: #555;
|
||||
}
|
||||
#content .list li.header span:not(.fa) {
|
||||
text-align: left;
|
||||
}
|
||||
#content .list li.header span.sortasc,
|
||||
#content .list li.header span.sortdesc {
|
||||
float: right;
|
||||
}
|
||||
#content .list li.header > span {
|
||||
padding: 15px 5px;
|
||||
}
|
||||
#content .list li.header > span.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
#content .list li.header > span.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
#content .list li.header > span.clickable:hover {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
#content .list .element span {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#content .list .element span.icon {
|
||||
width: 30px;
|
||||
}
|
||||
#content .list .element span.type,
|
||||
#content .list .element span.atime,
|
||||
#content .list .element span.ctime {
|
||||
width: 175px;
|
||||
}
|
||||
#content .list .element span.title {
|
||||
width: 250px;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
#content .list .element span.title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#content .list .element span.folders,
|
||||
#content .list .element span.files {
|
||||
width: 150px;
|
||||
}
|
||||
.parentFolder {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.parentFolder:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#folderContent {
|
||||
padding-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
/* Toolbar */
|
||||
#driveToolbar {
|
||||
background: #ddd;
|
||||
color: #555;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: ;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
z-index: 100;
|
||||
box-sizing: content-box;
|
||||
padding: 0 6px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
/* The container <div> - needed to position the dropdown content */
|
||||
}
|
||||
#driveToolbar .newPadContainer {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
#driveToolbar button {
|
||||
height: 24px;
|
||||
font: 12px Ubuntu, Arial, sans-serif;
|
||||
}
|
||||
#driveToolbar button span {
|
||||
font: 12px Ubuntu, Arial, sans-serif;
|
||||
}
|
||||
#driveToolbar button .fa,
|
||||
#driveToolbar button.fa {
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
#driveToolbar button.element {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#driveToolbar button.new {
|
||||
padding: 0 5px;
|
||||
}
|
||||
#driveToolbar .dropdown-bar {
|
||||
margin: 2px 2px;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
#driveToolbar .right {
|
||||
float: right;
|
||||
/* Right-side buttons */
|
||||
}
|
||||
#driveToolbar .right button {
|
||||
display: inline-block;
|
||||
}
|
||||
#driveToolbar .right button.active {
|
||||
display: none;
|
||||
}
|
||||
#driveToolbar .right button .fa {
|
||||
margin-right: 0px;
|
||||
}
|
||||
#driveToolbar .dropdown-bar-content {
|
||||
margin-right: 2px;
|
||||
}
|
||||
#driveToolbar .leftside {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
#driveToolbar .rightside {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
#driveToolbar .path {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
cursor: default;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
direction: rtl;
|
||||
max-width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
#driveToolbar .path .element {
|
||||
padding: 5px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#driveToolbar .path .element.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
#driveToolbar .path .element.clickable:hover {
|
||||
background: #fff;
|
||||
border: 1px solid #888;
|
||||
}
|
||||
#driveToolbar #contextButtonsContainer {
|
||||
float: right;
|
||||
margin: 2px;
|
||||
}
|
||||
#driveToolbar #contextButtonsContainer button {
|
||||
vertical-align: top;
|
||||
}
|
||||
@@ -709,7 +709,7 @@ span {
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.buttonTitle {
|
||||
.cp-dropdown-button-title {
|
||||
display: inline-flex;
|
||||
height: @toolbar-line-height;
|
||||
align-items: center;
|
||||
@@ -730,13 +730,13 @@ span {
|
||||
}
|
||||
}
|
||||
/* The container <div> - needed to position the dropdown content */
|
||||
.dropdown-bar {
|
||||
.cp-dropdown-container {
|
||||
margin: 2px 2px;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.dropdown-bar-content {
|
||||
.cp-dropdown-content {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1154,23 +1154,8 @@ define([
|
||||
|
||||
// This is duplicated in cryptpad-common, it should be unified
|
||||
var getFileIcon = function (id) {
|
||||
var $icon = Cryptpad.getIcon();
|
||||
|
||||
var data = filesOp.getFileData(id);
|
||||
if (!data) { return $icon; }
|
||||
|
||||
var href = data.href;
|
||||
if (!href) { return $icon; }
|
||||
|
||||
if (href.indexOf('/pad/') !== -1) { $icon = Cryptpad.getIcon('pad'); }
|
||||
else if (href.indexOf('/pad2/') !== -1) { $icon = Cryptpad.getIcon('pad'); } // SFRAME
|
||||
else if (href.indexOf('/code/') !== -1) { $icon = Cryptpad.getIcon('code'); }
|
||||
else if (href.indexOf('/slide/') !== -1) { $icon = Cryptpad.getIcon('slide'); }
|
||||
else if (href.indexOf('/poll/') !== -1) { $icon = Cryptpad.getIcon('poll'); }
|
||||
else if (href.indexOf('/whiteboard/') !== -1) { $icon = Cryptpad.getIcon('whiteboard'); }
|
||||
else if (href.indexOf('/file/') !== -1) { $icon = Cryptpad.getIcon('file'); }
|
||||
|
||||
return $icon;
|
||||
return Cryptpad.getFileIcon(data);
|
||||
};
|
||||
var getIcon = Cryptpad.getIcon;
|
||||
|
||||
@@ -1356,10 +1341,6 @@ define([
|
||||
|
||||
// Create the button allowing the user to switch from list to icons modes
|
||||
var createViewModeButton = function ($container) {
|
||||
/*var $block = $('<div>', {
|
||||
'class': 'dropdown-bar right changeViewModeContainer'
|
||||
});*/
|
||||
|
||||
var $listButton = $listIcon.clone().addClass('element');
|
||||
var $gridButton = $gridIcon.clone().addClass('element');
|
||||
|
||||
@@ -1495,7 +1476,7 @@ define([
|
||||
};
|
||||
|
||||
var hideNewButton = function () {
|
||||
$iframe.find('.dropdown-bar-content').hide();
|
||||
$iframe.find('.cp-dropdown-content').hide();
|
||||
};
|
||||
|
||||
var SORT_FOLDER_DESC = 'sortFoldersDesc';
|
||||
@@ -2004,7 +1985,7 @@ define([
|
||||
createTitle($toolbar.find('.path'), path);
|
||||
|
||||
if (APP.mobile()) {
|
||||
var $context = $('<button>', {'class': 'element right dropdown-bar', id: 'contextButton'});
|
||||
var $context = $('<button>', {'class': 'element right cp-dropdown-container', id: 'contextButton'});
|
||||
$context.append($('<span>', {'class': 'fa fa-caret-down'}));
|
||||
$context.appendTo($toolbar.find('.rightside'));
|
||||
$context.click(function (e) {
|
||||
@@ -2301,7 +2282,7 @@ define([
|
||||
$trashContextMenu.hide();
|
||||
$contentContextMenu.hide();
|
||||
$defaultContextMenu.hide();
|
||||
$iframe.find('.cryptpad-dropdown').hide();
|
||||
$iframe.find('.cp-dropdown-content').hide();
|
||||
};
|
||||
|
||||
var stringifyPath = function (path) {
|
||||
@@ -2335,7 +2316,7 @@ define([
|
||||
|
||||
// Disable middle click in the context menu to avoid opening /drive/inner.html# in new tabs
|
||||
$(ifrw).click(function (e) {
|
||||
if (!e.target || !$(e.target).parents('.cryptpad-dropdown').length) { return; }
|
||||
if (!e.target || !$(e.target).parents('.cp-dropdown-content').length) { return; }
|
||||
if (e.which !== 1) {
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
@@ -2919,6 +2900,8 @@ define([
|
||||
};
|
||||
|
||||
if (!readOnly && !APP.loggedIn) {
|
||||
// TODO secure drive
|
||||
// cryptpad-backup --> cp-toolbar-backup
|
||||
var $backupButton = Cryptpad.createButton('', true).removeClass('fa').removeClass('fa-question').addClass('cryptpad-backup');
|
||||
$backupButton.append($backupIcon.clone().css('marginRight', '0px'));
|
||||
$backupButton.attr('title', Messages.fm_backup_title);
|
||||
|
||||
@@ -1,378 +0,0 @@
|
||||
/* PAGE */
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.fa {
|
||||
/*min-width: 17px;*/
|
||||
margin-right: 3px;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0px 5px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.folder, .file {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.contextMenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.droppable {
|
||||
background-color: #FE9A2E;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.selected {
|
||||
border: 1px dotted #bbb;
|
||||
background: #666;
|
||||
color: #eee;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
/* TREE */
|
||||
|
||||
|
||||
#tree {
|
||||
border-right: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
overflow: auto;
|
||||
resize: horizontal;
|
||||
width: 350px;
|
||||
white-space: nowrap;
|
||||
max-width: 500px;
|
||||
min-width: 200px;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
#tree li {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
#tree span.element {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#tree li > span.element:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#tree .active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#tree .category2 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
#tree .fa.expcol {
|
||||
margin-left: -10px;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 9px;
|
||||
width: auto;
|
||||
height: 11px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
cursor: default;
|
||||
}
|
||||
#tree .fa.expcol:before {
|
||||
position:relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
#tree li.collapsed ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tree li input {
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
|
||||
/* Tree lines */
|
||||
|
||||
#tree ul {
|
||||
margin: 0px 0px 0px 10px;
|
||||
list-style: none;
|
||||
}
|
||||
#tree ul li {
|
||||
position: relative;
|
||||
}
|
||||
#tree ul li:before {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: -0.25em;
|
||||
content: '';
|
||||
display: block;
|
||||
border-left: 1px solid #888;
|
||||
height: 1em;
|
||||
border-bottom: 1px solid #888;
|
||||
width: 17.5px;
|
||||
}
|
||||
#tree ul li:after {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
bottom: -7px;
|
||||
content: '';
|
||||
display: block;
|
||||
border-left: 1px solid #888;
|
||||
height: 100%;
|
||||
}
|
||||
#tree ul li.root {
|
||||
margin: 0px 0px 0px -10px;
|
||||
}
|
||||
#tree ul li.root:before {
|
||||
display: none;
|
||||
}
|
||||
#tree ul li.root:after {
|
||||
display: none;
|
||||
}
|
||||
#tree ul li:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* CONTENT */
|
||||
|
||||
#content {
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
#content h1 {
|
||||
padding-left: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#content .info-box {
|
||||
margin: 0px auto;
|
||||
padding: 5px;
|
||||
background: #ddddff;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#content .info-box span {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.parentFolder {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.parentFolder:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#folderContent {
|
||||
padding-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#content li:not(.header) * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#content li:hover:not(.header) .name {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#content .grid li {
|
||||
display: inline-block;
|
||||
margin: 10px 10px;
|
||||
width: 140px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#content .grid li .name {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#content .grid li input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#content .grid li .fa {
|
||||
display: block;
|
||||
margin: auto;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#content .grid li .fa.listonly {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#content .list li {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
#content .list li .element {
|
||||
display: inline-flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#content .list li.header {
|
||||
cursor: default;
|
||||
color: #008;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#content .list li.header .element span:not(.fa) {
|
||||
border-right: 1px solid #CCC;
|
||||
text-align: left;
|
||||
}
|
||||
#content .list li.header .element span.fa {
|
||||
float: right;
|
||||
}
|
||||
#content .list li.header span.name {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#content .list .element span {
|
||||
padding: 0px 10px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
padding-right: 0px;
|
||||
border-right: 10px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
#content .list .element span.name {
|
||||
width: 478px;
|
||||
}
|
||||
.iframe #content .list .element span.name {
|
||||
width: 278px;
|
||||
}
|
||||
#content .list .header span.name {
|
||||
width: 500px;
|
||||
}
|
||||
.iframe #content .list .header span.name {
|
||||
width: 300px;
|
||||
}
|
||||
#content .list .element span.type, #content .list .element span.atime, #content .list .element span.ctime {
|
||||
width: 175px;
|
||||
}
|
||||
#content .list .element span.title {
|
||||
width: 250px;
|
||||
}
|
||||
#content .list .element span.folders {
|
||||
width: 150px;
|
||||
}
|
||||
#content .list .element span.files {
|
||||
width: 150px;
|
||||
}
|
||||
#content div.grid .listElement {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
#content .list .element span.title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1201px) {
|
||||
#content .list .element span.title {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
|
||||
#driveToolbar {
|
||||
background: #ddd;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.newPadContainer {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button.newElement {
|
||||
border-radius: 2px;
|
||||
height: 30px;
|
||||
background: #888;
|
||||
color: #eee;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button.newElement:hover {
|
||||
box-shadow: 0px 0px 2px #000;
|
||||
}
|
||||
|
||||
|
||||
/* The container <div> - needed to position the dropdown content */
|
||||
#driveToolbar .dropdown-bar {
|
||||
margin: 4px 5px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
#driveToolbar .dropdown-bar.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Right-side buttons */
|
||||
#driveToolbar .dropdown-bar.right button {
|
||||
display: inline-block;
|
||||
}
|
||||
#driveToolbar .dropdown-bar.right button.active {
|
||||
display: none;
|
||||
}
|
||||
#driveToolbar .dropdown-bar.right button .fa {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.dropdown-bar-content {
|
||||
margin-top: -3px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
Reference in New Issue
Block a user