Remove old style for sframe drive

This commit is contained in:
yflory 2017-09-25 11:54:01 +02:00
parent c364377d7c
commit deba699d08
2 changed files with 0 additions and 821 deletions

View file

@ -1,820 +0,0 @@
@import "/customize/src/less/variables.less";
@import "/customize/src/less/mixins.less";
@tree-bg: #eee;
@tree-fg: #000;
@tree-lines-col: #888;
@drive-hover: #eee;
@drive-hover-light: lighten(@drive-hover, 20%);
@content-bg: #fff;
@content-bg-ro: darken(@content-bg, 10%);
@content-fg: @tree-fg;
@info-box-bg: #d2e1f2;
@info-box-border: #bbb;
@table-header-fg: #555;
@table-header-bg: #e8e8e8;
@toolbar-bg: #ddd;
@toolbar-fg: #555;
@toolbar-border-col: #ccc;
@toolbar-button-bg: #888;
@toolbar-button-border: #888;
@toolbar-button-bg-hover: #777;
@toolbar-button-fg: #eee;
@toolbar-path-bg: #fff;
@toolbar-path-border: #888;
@size-mobile: 600px;
/* PAGE */
html, body {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
position: relative;
font-size: @main-font-size;
overflow: auto;
}
body {
display: flex;
flex-flow: column;
}
img.icon {
max-width: 20px;
max-height: 16px;
}
.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: @size-mobile) {
display: block;
#driveToolbar {
.path .element {
display: none;
}
}
#tree {
resize: none;
width: 100%;
max-width: unset;
max-height: unset;
border-bottom: 1px solid @toolbar-border-col;
.category {
margin-top: 0.5em;
}
}
}
}
.padColor { color: @toolbar-pad-bg; }
.codeColor { color: @toolbar-code-bg; }
.slideColor { color: @toolbar-slide-bg; }
.pollColor { color: @toolbar-poll-bg; }
.fileColor { color: @toolbar-file-bg; }
.whiteboardColor { color: @toolbar-whiteboard-bg; }
.driveColor { color: @toolbar-drive-bg; }
.defaultColor { color: @toolbar-default-bg; }
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;
}
.contextMenu {
display: none;
position: absolute;
z-index: 500;
li {
padding: 0;
font-size: @main-font-size;
a {
cursor: pointer;
}
}
}
.droppable {
background-color: #FE9A2E;
color: #222;
}
.selected {
background: #666 !important;
color: #eee;
margin: -1px;
.fa-minus-square-o, .fa-plus-square-o {
color: @tree-fg;
}
}
.selectedTmp {
border: 1px dotted #bbb;
background: #AAA;
color: #ddd;
margin: -1px;
.fa-minus-square-o, .fa-plus-square-o {
color: @tree-fg;
}
}
span {
&.fa-folder, &.fa-folder-open {
//color: #FEDE8B;
//text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
}
/* TREE */
#tree {
font-size: @main-font-size;
//border-right: 1px solid #ccc;
box-sizing: border-box;
background: @tree-bg;
overflow: auto;
resize: horizontal;
width: auto;
white-space: nowrap;
max-width: 500px;
min-width: 200px;
padding: 0px;
color: @tree-fg;
display: flex;
flex-flow: column;
max-height: 100%;
.categories-container {
flex: 1;
max-width: 500px;
overflow: auto;
}
img.icon {
margin-bottom: 3px;
margin-left: -2px;
}
.docTree {
margin-top: 20px;
//padding: 0 0 0 20px;
padding: 0;
cursor: auto;
&li, li {
padding: 0;
&.collapsed ul {
display: none;
}
input {
width: ~"calc(100% - 30px)";
padding: 0 10px;
border: 0;
color: lighten(@tree-fg, 40%);
}
& > span.element-row {
overflow: hidden;
text-overflow: ellipsis;
//min-width: ~"calc(100% + 5px)";
.leftsideCategory();
width: ~"calc(100% + 5px)";
margin: 0;
margin-bottom: -6px;
display: inline-block;
cursor: pointer;
margin-left: -5px;
padding-left: 5px;
}
& > span.element-row:not(.selected):not(.active):hover {
//background-color: @drive-hover;
}
}
}
span.element {
cursor: pointer;
}
/*.active {
&:not(.selected):not(.droppable) {
background-color: darken(@drive-hover, 15%);
}
}*/
.category {
margin: 0;
margin-top: 15px;
.root {
&> .fa {
min-width: 30px;
cursor: pointer;
}
}
li {
padding: 0;
.element-row {
display: block;
padding-left: 20px;
.leftsideCategory();
margin: 0;
.fa {
width: 25px;
}
}
}
}
.category:last-child {
margin-bottom: 20px;
}
#allfilesTree {
margin-top: 0;
}
.limit-container {
margin-top: 0;
}
#searchContainer {
text-align: center;
padding: 0;
position: relative;
input {
background: lighten(@toolbar-drive-bg, 8%);
color: @toolbar-drive-color;
.placeholderColor(@toolbar-drive-color);
outline-width: 0px;
border-radius: 0;
width: 100%;
//border: 1px solid #ccc;
border: 0;
border-right: 1px solid lighten(@toolbar-drive-bg, 16%);
//border-right: 0;
height: @toolbar-line-height;
padding: 0 5px;
padding-left: 45px;
&:focus {
outline-width: 0px;
}
}
.searchIcon {
color: @toolbar-drive-color;
position: absolute;
left: 20px; // TODO align with drive categories
top: 8px;
}
}
.fa.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;
}
}
.docTree {
.root > .element-row > .expcol {
position: relative;
top:0;
left: -10px;
}
.root > .element-row > .folder {
margin-left: -5px;
}
.root {
&> .element-row {
padding-left: 20px;
}
&> ul {
padding-left: 30px;
}
}
}
// Expand/collapse lines
.docTree 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 @tree-lines-col;
height: ~"calc(1em + 11px)";
border-bottom: 1px solid @tree-lines-col;
width: 15px;
}
&:after {
position: absolute;
left: -15px;
bottom: -7px;
content: '';
display: block;
border-left: 1px solid @tree-lines-col;
height: 100%;
}
&.root {
margin: 0px 0px 0px -10px;
&:before {
display: none;
}
&:after {
display: none;
}
}
&:last-child:after {
display: none;
}
}
}
}
/* CONTENT */
#rightCol {
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;
}
#content {
box-sizing: border-box;
background: @content-bg;
color: @content-fg;
overflow: auto;
flex: 1;
display: flex;
flex-flow: column;
position: relative;
.selectBox {
display: none;
background-color: rgba(100, 100, 100, 0.7);
position: absolute;
z-index: 50;
}
&.readonly {
background: @content-bg-ro;
}
h1 {
padding-left: 10px;
margin-top: 10px;
}
.info-box {
line-height: 2em;
padding: 0.25em 0.75em;
margin: 1em;
background: @info-box-bg;
span {
cursor: pointer;
float: right;
margin-top: 0.5em;
}
&.noclose {
}
}
li {
cursor: default;
&:not(.header) {
*:not(input) {
/*pointer-events: none;*/
}
&:hover {
&:not(.selected, .selectedTmp) {
background-color: @drive-hover;
}
.name {
/*text-decoration: underline;*/
}
}
}
}
#folderContent {
li {
&.searchResult {
border-bottom: 1px solid @info-box-border;
display: block;
&:hover {
background-color: initial;
}
table {
width: 100%;
.label2 {
width: 150px;
font-size: 15px;
text-align: right;
padding-right: 15px;
}
.openDir {
a {
cursor: pointer;
color: #41b7d8;
&:hover {
color: #014c8c;
text-decoration: underline;
}
}
}
.path {
font-style: italic;
direction: rtl;
.element {
display: inline-block;
margin-right: 5px;
}
}
.title {
font-weight: bold;
cursor: pointer;
&:hover {
background-color: @drive-hover;
}
}
.col2 {
width: 250px;
}
td.icon {
width: 50px;
font-size: 40px;
}
}
}
}
}
.element {
.truncated { display: none; }
}
div.grid {
padding: 20px;
.fileIcon;
li {
&.element {
position: relative;
}
input {
width: 100%;
margin-top: 5px;
}
.state {
position: absolute;
top: 3px;
right: 3px;
.fa {
margin:0;
font-size: 18px;
}
}
}
.listElement {
display: none;
}
.addpad {
cursor: pointer;
opacity: 0.5;
padding: 0;
&:hover {
opacity: 0.7;
}
.fa {
cursor: pointer;
font-size: 90px;
margin-top: 5px;
margin-bottom: 0;
}
}
}
.list {
.grid-element {
display: none;
}
// Make it act as a table!
padding-left: 20px;
ul {
display: table;
width: 100%;
padding: 0px 10px;
}
li {
display: table-row;
&> span {
padding: 0 5px;
display: table-cell;
}
&:not(.header) {
height: @toolbar-line-height;
line-height: @toolbar-line-height;
}
&.header {
cursor: default;
color: @table-header-fg;
span {
&:not(.fa) {
text-align: left;
}
&.sortasc, &.sortdesc {
float: right;
}
}
&> span {
padding: 15px 5px;
&.active {
font-weight: bold;
}
&.clickable {
cursor: pointer;
&:hover {
background: @table-header-bg;
}
}
}
}
}
.element {
span {
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
&.state {
.fa:not(:last-child) {
margin-right: 5px;
}
}
&.icon, &.state {
width: 30px;
}
&.type, &.atime, &.ctime {
width: 175px;
}
&.title {
width: 250px;
@media screen and (max-width: 1200px) {
display: none;
}
}
&.folders, &.files {
width: 150px;
}
}
}
}
}
.parentFolder {
cursor: pointer;
margin-left: 10px;
&:hover {
text-decoration: underline;
}
}
#folderContent {
padding-right: 10px;
flex: 1;
}
#addPadDialog.cp-modal-container {
.fileIcon;
li:not(.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;
.uploadFile {
break-after: always;
page-break-after: always;
}
}
}
@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;
}
.name {
height: auto;
}
}
}
}
}
}
/* Toolbar */
#driveToolbar {
background: lighten(@toolbar-drive-bg, 8%);
color: @toolbar-drive-color;
//height: 30px;
//display: flex;
//flex-flow: row;
z-index: 100;
box-sizing: border-box;
height: @toolbar-line-height;
padding: 0;
display: flex;
flex-flow: row;
* {
outline-width: 0;
&:focus {
outline-width: 0;
}
}
.newPadContainer {
display: inline-block;
height: 100%;
}
.history {
float: right;
}
.rightside, .leftside {
display: inline-block;
margin: 0;
padding: 0;
.fa {
margin: 0;
}
button {
height: @toolbar-line-height;
padding: 0 10px;
border: none;
border-radius: 0;
box-sizing: border-box;
background: transparent;
font-size: @main-font-size;
color: @toolbar-drive-color;
transition: all 0.15s;
.drawer {
display: none;
}
.fa, span {
font-size: @main-font-size;
}
&:hover {
background: @toolbar-drive-bg;
}
&.active {
display: none;
}
}
}
.rightside {
float: right;
& > * {
float: right;
}
#contextButtonsContainer {
display: inline-block;
height: 100%;
}
padding-left: 10px;
}
.leftside {
& > span {
height: 100%;
margin: 0;
}
button {
padding: 0 10px;
.fa {
margin-right: 5px;
}
.cp-dropdown-button-title {
display: inline-flex;
height: @toolbar-line-height;
align-items: center;
span:not(.fa) {
line-height: 23px;
}
}
}
}
button {
font: @toolbar-button-font;
span {
font: @toolbar-button-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;
}
.path {
flex: 1;
width: 100%;
height: @toolbar-line-height;
line-height: @toolbar-line-height;
cursor: default;
width: auto;
overflow: hidden;
white-space: nowrap;
direction: rtl;
max-width: 100%;
text-align: left;
.element {
display: inline-block;
height: @toolbar-line-height;
line-height: @toolbar-line-height;
font-size: @main-font-size;
padding: 0 5px;
border: 0;
background: darken(@toolbar-drive-bg, 10%);
color: @toolbar-drive-color;
box-sizing: border-box;
transition: all 0.15s;
&.separator {
color: #ccc;
}
&.clickable {
cursor: pointer;
&:hover {
background: darken(@toolbar-drive-bg, 15%);
}
}
}
}
}

View file

@ -18,7 +18,6 @@ define([
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less',
'less!/newdrive/file.less',
], function (
$,
Crypto,