Commit bba245c2 authored by asseldonk's avatar asseldonk
Browse files

filebrowser: converted base.css to less

parent 0eea89fd
.file-content {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
.filebrowser .file-content {
position: absolute;
height: 100%;
bottom: 0px;
right: 0px;
top: 0px;
left: 0px;
overflow: hidden;
}
.fileselector .file-content {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.file-view-content-container {
overflow: auto;
}
.fileselector .file-view-content-container {
max-height: 250px;
}
.actionmenu {
position: absolute;
display: none;
}
.file-menu {
height: 0px;
/*overflow: hidden;*/
overflow: auto;
visibility: hidden;
}
.table-info-dialog > tbody > tr > td {
border: none;
border: 0px;
border-top: 0px;
}
.table-info-dialog-width {
width: 114px;
}
.table-info-dialog {
overflow: hidden;
table-layout: fixed;
word-wrap: break-word;
}
.file-info-dialog-header {
margin-bottom: 20px;
}
.filterField {
bottom: 5px;
right: 5px;
position: absolute;
visibility: hidden;
width: 300px;
z-index: 99;
}
/* drag and drop */
.file-dragover {
background-color: rgba(92, 184, 92, 0.5) !important;
}
.file-dragstart {
opacity: 0.4;
}
[draggable=true] {
cursor: move;
-khtml-user-drag: element;
}
/* path bar */
.file-path-bar {
line-height: 15px !important;
width: 100% !important;
position: absolute !important;
left: 0px !important;
bottom: 0px !important;
height: 32px !important;
background-color: #fcfcfc;
overflow-x: auto;
overflow-y: hidden;
/* following entry has to be removed when bookmarks leave this place */
border-top: 1px solid #d3d3d3;
}
.bookmark-opener {
left: 0px;
bottom: 0px;
width: 30px;
height: 30px;
position: absolute;
padding: 8px 0px;
cursor: pointer;
border-right: 1px solid #d3d3d3;
}
.breadcrumb {
border-radius: 0px;
background-color: #fcfcfc;
/* following entry has to be set when bookmarks leave this place */
/*border-top: 1px solid #d3d3d3;*/
/* following three entries have to be removed, when bookamrks leave this place */
left: 30px;
top: 0px;
position: absolute;
}
.breadcrumb > li + li:before {
color: #333;
}
.file-content{-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none}.fileselector>.file-content{position:relative;height:100%;width:100%;overflow:hidden}.fileselector>.file-view-content-container{max-height:250px}.actionmenu{position:absolute;display:none}.file-menu{height:0;overflow:auto;visibility:hidden}.table-info-dialog>tbody>tr>td{border:none;border:0;border-top:0}.table-info-dialog-width{width:114px}.table-info-dialog{overflow:hidden;table-layout:fixed;word-wrap:break-word}.file-info-dialog-header{margin-bottom:20px}.filterField{bottom:5px;right:5px;position:absolute;visibility:hidden;width:300px;z-index:99}.file-dragover{background-color:#5cb85c !important;opacity:.5}.file-dragstart{opacity:.4}[draggable=true]{cursor:move;-khtml-user-drag:element}.file-path-bar{line-height:15px !important;width:100% !important;position:absolute !important;left:0 !important;bottom:0 !important;height:32px !important;background-color:#f5f5f5;overflow-x:auto;overflow-y:hidden;border-top:1px solid #ddd}.file-path-bar>.bookmark-opener{left:0;bottom:0;width:30px;height:30px;position:absolute;padding:8px 0;cursor:pointer;border-right:1px solid #ddd}.file-path-bar>.breadcrumb{border-radius:0;background-color:#f5f5f5;left:30px;top:0;position:absolute}.file-path-bar>.breadcrumb>li,.file-path-bar>.breadcrumb li:before{color:#333}
\ No newline at end of file
@brand-success: #5cb85c;
@gray-dark: lighten(#000, 20%);
@table-bg-hover: #f5f5f5;
@table-border-color: #ddd;
@breadcrumb-bg: #f5f5f5;
/* main template */
.file-content {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
/* file selector - temporary: this leaves, when template of table view is used */
.fileselector {
> .file-content {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
> .file-view-content-container {
max-height: 250px;
}
}
/* right click menu */
.actionmenu {
position: absolute;
display: none;
}
.file-menu {
height: 0px;
overflow: auto;
visibility: hidden;
}
/* info dialog - temporary: this leaves, when template of table view is used */
.table-info-dialog > tbody > tr > td {
border: none;
border: 0px;
border-top: 0px;
}
.table-info-dialog-width {
width: 114px;
}
.table-info-dialog {
overflow: hidden;
table-layout: fixed;
word-wrap: break-word;
}
.file-info-dialog-header {
margin-bottom: 20px;
}
.filterField {
bottom: 5px;
right: 5px;
position: absolute;
visibility: hidden;
width: 300px;
z-index: 99;
}
/* drag and drop */
.file-dragover {
background-color: @brand-success !important;
opacity: 0.5;
}
.file-dragstart {
opacity: 0.4;
}
[draggable=true] {
cursor: move;
-khtml-user-drag: element;
}
/* path bar */
.file-path-bar {
line-height: 15px !important;
width: 100% !important;
position: absolute !important;
left: 0px !important;
bottom: 0px !important;
height: 32px !important;
background-color: @breadcrumb-bg;
overflow-x: auto;
overflow-y: hidden;
border-top: 1px solid @table-border-color; //entry has to be removed, when bookmarks leave this place
> .bookmark-opener {
//block has to be removed, when bookmarks leave this place
left: 0px;
bottom: 0px;
width: 30px;
height: 30px;
position: absolute;
padding: 8px 0px;
cursor: pointer;
border-right: 1px solid @table-border-color;
}
> .breadcrumb {
border-radius: 0px;
background-color: @breadcrumb-bg;
// border-top: 1px solid @table-border-color; entry has to be set when bookmarks leave this place
left: 30px; // entry has to be removed, when bookamrks leave this place
top: 0px; // entry has to be removed, when bookamrks leave this place
position: absolute; // entry has to be removed, when bookamrks leave this place
> li, li:before {
color: @gray-dark;
}
}
}
.file-view-symbol {
/*position: absolute;*/
overflow: auto;
-webkit-user-select: none;
height: 100%;
/*position: absolute;*/
overflow: auto;
-webkit-user-select: none;
height: 100%;
}
.filebrowser .file-content {
position: absolute;
height: 100%;
bottom: 0px;
right: 0px;
top: 0px;
left: 0px;
overflow: hidden;
}
.file-view-content-container {
overflow: auto;
}
.symbol-item {
height: 80px;
margin: 10px;
border-radius: 5px;
width: 120px;
float: left;
-webkit-user-select: none;
height: 80px;
margin: 10px;
border-radius: 5px;
width: 120px;
float: left;
-webkit-user-select: none;
}
.symbol-item:hover {
/*-webkit-box-shadow: inset 0px 0px 5px 0px #898989;
/*-webkit-box-shadow: inset 0px 0px 5px 0px #898989;
-moz-box-shadow: inset 0px 0px 5px 0px #898989;*/
/*box-shadow: inset 0px 0px 5px 0px #898989;*/
background-color: rgba(51, 131, 187, 0.7);
color: white;
cursor: pointer;
/*box-shadow: inset 0px 0px 5px 0px #898989;*/
background-color: rgba(51, 131, 187, 0.7);
color: white;
cursor: pointer;
}
.file-selection-p {
display: inline-block;
width: 19px;
margin: 4px 4px 4px 4px;
position: relative;
vertical-align: middle;
visibility: visible;
-webkit-user-select: none;
display: inline-block;
width: 19px;
margin: 4px 4px 4px 4px;
position: relative;
vertical-align: middle;
visibility: visible;
-webkit-user-select: none;
}
.symbol-icon-p {
margin-bottom: 0px;
margin-top: -19px;
text-align: center;
z-index: -1;
padding: 0px;
-webkit-user-select: none;
width: 120px;
margin-bottom: 0px;
margin-top: -19px;
text-align: center;
z-index: -1;
padding: 0px;
-webkit-user-select: none;
width: 120px;
}
.symbol-name {
-webkit-hyphens: auto;
-moz-hyphens: auto;
display: inline-block;
font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
/* hyphens: auto; */
overflow: hidden;
text-align: center;
width: 120px;
word-wrap: break-word;
/*height 10px*/
-webkit-user-select: none;
-webkit-hyphens: auto;
-moz-hyphens: auto;
display: inline-block;
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
/* hyphens: auto; */
overflow: hidden;
text-align: center;
width: 120px;
word-wrap: break-word;
/*height 10px*/
-webkit-user-select: none;
}
.file-selection-box {
position: absolute;
top: -10px;
left: 30px;
bottom: 0px
right: 0px;
visibility: hidden;
-webkit-user-select: none;
position: absolute;
top: -10px;
left: 30px;
bottom: 0px right: 0px;
visibility: hidden;
-webkit-user-select: none;
}
.file-selection-box:after {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
/*border: 1px solid silver;*/
border-radius: 18px;
-webkit-user-select: none;
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
/*border: 1px solid silver;*/
border-radius: 18px;
-webkit-user-select: none;
}
.file-symlink {
display: none;
display: none;
}
.symbol-item .file-symlink-file {
display: block;
height: 0;
left: -42px;
position: relative;
right: 5px;
text-align: right;
top: -42px;
display: block;
height: 0;
left: -42px;
position: relative;
right: 5px;
text-align: right;
top: -42px;
}
.symbol-item .file-symlink-dir {
display: block;
height: 0;
left: -51px;
position: relative;
right: 5px;
text-align: right;
top: -27px;
display: block;
height: 0;
left: -51px;
position: relative;
right: 5px;
text-align: right;
top: -27px;
}
.file-selection-box input {
display: none;
display: none;
}
.file-selection-box span {
background: url("../../../../img/white_plus.png");
background-color: green;
background-position: center;
background-repeat: no-repeat;
border-radius: 8px;
display: block;
height: 16px;
width: 16px;
-webkit-user-select: none;
/*margin-left: 20px;*/
/*margin-top: 4px;*/
background: url("../../../../img/white_plus.png");
background-color: green;
background-position: center;
background-repeat: no-repeat;
border-radius: 8px;
display: block;
height: 16px;
width: 16px;
-webkit-user-select: none;
/*margin-left: 20px;*/
/*margin-top: 4px;*/
}
.file-selection-box input:checked + span {
background: url("../../../../img/white_minus.png");
background-color: red;
background-position: center;
background-repeat: no-repeat;
background: url("../../../../img/white_minus.png");
background-color: red;
background-position: center;
background-repeat: no-repeat;
}
.symbol-item[selected] {
background-color: #D2D2D2;
color: white;
background-color: #D2D2D2;
color: white;
}
.file-warning{
background-color: red; text-align: center;
-webkit-user-select: none;
.file-warning {
background-color: red;
text-align: center;
-webkit-user-select: none;
}
/* opt icon */
.symbol-item[selected] > .file-opt {
visibility: visible;
visibility: visible;
}
.symbol-item:hover > .file-opt {
visibility: visible;
visibility: visible;
}
.file-opt {
visibility: hidden;
margin-left: 70px;
-webkit-user-select: none;
visibility: hidden;
margin-left: 70px;
-webkit-user-select: none;
}
.file-opt:after {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
/*border: 1px solid silver;*/
border-radius: 18px
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
/*border: 1px solid silver;*/
border-radius: 18px
}
/* define variables and classes */
@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;
@screen-xs-min: @screen-xs;
@screen-sm-min: @screen-sm;
@screen-md-min: @screen-md;
......@@ -12,43 +12,40 @@
@screen-sm-max: @screen-sm;
@screen-md-max: @screen-md;
@screen-lg-max: @screen-lg;
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@gray-darker: lighten(#000, 13.5%);
/* #222 */
@gray-dark: lighten(#000, 20%);
/* #333 */
@brand-danger: #d9534f;
@gray: lighten(#000, 33.5%);
/* #555 */
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@gray-light: lighten(#000, 46.7%);
/* #777 */
@gray-lighter: lighten(#000, 93.5%);
/* #eee */
@table-bg-hover: #f5f5f5;
@table-bg-active: @table-bg-hover;
@table-bg-hover: #f5f5f5;
@table-bg-active: @table-bg-hover;
@table-border-color: #ddd;
@width-edit-tool-small: 160px;
@width-edit-tool-large: 320px;
@width-select-column: 50px;
@width-icon-column: 70px;
@width-size-column: 120px;
@width-time-column: 215px;
@width-options-column: 50px;
@width-select-column: 50px;
@width-icon-column: 70px;
@width-size-column: 120px;
@width-time-column: 215px;
@width-options-column: 50px;
@border-radius-base: 4px;
@input-bg: #fff;
@input-color: @gray;
@input-border: #ccc;
@input-border-radius: @border-radius-base;
@input-border-focus: #66afe9;
@input-bg: #fff;
@input-color: @gray;
@input-border: #ccc;
@input-border-radius: @border-radius-base;
@input-border-focus: #66afe9;
@input-color-placeholder: #999;
.file-table-select-column {
width: @width-select-column;