32d2457e58
View container height needs to be accurate and span over the whole scroll container for infinite scrolling to work properly.
520 lines
12 KiB
CSS
520 lines
12 KiB
CSS
/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
|
||
This file is licensed under the Affero General Public License version 3 or later.
|
||
See the COPYING-README file. */
|
||
|
||
/* FILE MENU */
|
||
.actions { padding:5px; height:32px; display: inline-block; float: left; }
|
||
.actions input, .actions button, .actions .button { margin:0; float:left; }
|
||
.actions .button a { color: #555; }
|
||
.actions .button a:hover, .actions .button a:active { color: #333; }
|
||
.actions.hidden { display: none; }
|
||
|
||
#new {
|
||
z-index: 1010;
|
||
float: left;
|
||
padding: 0 !important; /* override default control bar button padding */
|
||
}
|
||
#trash {
|
||
margin-right: 8px;
|
||
float: right;
|
||
z-index: 1010;
|
||
padding: 10px;
|
||
font-weight: normal;
|
||
}
|
||
#new > a {
|
||
padding: 14px 10px;
|
||
position: relative;
|
||
top: 7px;
|
||
}
|
||
#new.active {
|
||
border-bottom-left-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
border-bottom: none;
|
||
}
|
||
#new > ul {
|
||
display: none;
|
||
position: fixed;
|
||
min-width: 112px;
|
||
z-index: 10;
|
||
padding: 8px;
|
||
padding-bottom: 0;
|
||
margin-top: 14px;
|
||
margin-left: -1px;
|
||
text-align: left;
|
||
background: #f8f8f8;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
border-top-left-radius: 0;
|
||
box-shadow: 0 2px 7px rgba(170,170,170,.4);
|
||
}
|
||
#new > ul > li {
|
||
height: 36px;
|
||
margin: 5px;
|
||
padding-left: 42px;
|
||
padding-bottom: 2px;
|
||
background-position: left center;
|
||
cursor: pointer;
|
||
}
|
||
#new > ul > li > p {
|
||
cursor: pointer;
|
||
padding-top: 7px;
|
||
padding-bottom: 7px;
|
||
}
|
||
|
||
#new .error, #fileList .error {
|
||
color: #e9322d;
|
||
border-color: #e9322d;
|
||
-webkit-box-shadow: 0 0 6px #f8b9b7;
|
||
-moz-box-shadow: 0 0 6px #f8b9b7;
|
||
box-shadow: 0 0 6px #f8b9b7;
|
||
}
|
||
|
||
/* FILE TABLE */
|
||
|
||
#filestable {
|
||
position: relative;
|
||
top: 44px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* make sure there's enough room for the file actions */
|
||
#body-user #filestable {
|
||
min-width: 688px; /* 768 (mobile break) - 80 (nav width) */
|
||
}
|
||
#body-user #controls {
|
||
min-width: 688px; /* 768 (mobile break) - 80 (nav width) */
|
||
}
|
||
|
||
#filestable tbody tr { background-color:#fff; height:51px; }
|
||
|
||
/* fit app list view heights */
|
||
.app-files #app-content>.viewcontainer {
|
||
min-height: 100%;
|
||
}
|
||
|
||
/* move Deleted Files to bottom of sidebar */
|
||
.nav-trashbin {
|
||
position: absolute !important;
|
||
bottom: 0;
|
||
}
|
||
|
||
#filestable tbody tr { background-color:#fff; height:40px; }
|
||
#filestable tbody tr:hover, tbody tr:active {
|
||
background-color: rgb(240,240,240);
|
||
}
|
||
#filestable tbody tr.selected {
|
||
background-color: rgb(230,230,230);
|
||
}
|
||
#filestable tbody tr.searchresult {
|
||
background-color: rgb(240,240,240);
|
||
}
|
||
tbody a { color:#000; }
|
||
|
||
span.extension, span.uploading, td.date {
|
||
color: #999;
|
||
}
|
||
span.extension {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||
filter: alpha(opacity=70);
|
||
opacity: .7;
|
||
-webkit-transition: opacity 300ms;
|
||
-moz-transition: opacity 300ms;
|
||
-o-transition: opacity 300ms;
|
||
transition: opacity 300ms;
|
||
vertical-align: top;
|
||
}
|
||
tr:hover span.extension {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||
filter: alpha(opacity=100);
|
||
opacity: 1;
|
||
color: #777;
|
||
}
|
||
|
||
table tr.mouseOver td {
|
||
background-color: #eee;
|
||
}
|
||
table th, table th a {
|
||
color: #999;
|
||
}
|
||
table.multiselect th a {
|
||
color: #000;
|
||
}
|
||
table th .columntitle {
|
||
display: block;
|
||
padding: 15px;
|
||
height: 50px;
|
||
box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
vertical-align: middle;
|
||
}
|
||
table th .columntitle.name {
|
||
padding-left: 5px;
|
||
padding-right: 80px;
|
||
margin-left: 50px;
|
||
}
|
||
/* hover effect on sortable column */
|
||
table th a.columntitle:hover {
|
||
color: #000;
|
||
}
|
||
table th .sort-indicator {
|
||
width: 10px;
|
||
height: 8px;
|
||
margin-left: 10px;
|
||
display: inline-block;
|
||
}
|
||
table th, table td { border-bottom:1px solid #ddd; text-align:left; font-weight:normal; }
|
||
table td {
|
||
padding: 0 15px;
|
||
border-bottom: 1px solid #eee;
|
||
font-style: normal;
|
||
background-position: 8px center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
table th#headerName {
|
||
position: relative;
|
||
width: 9999px; /* not really sure why this works better than 100% … table styling */
|
||
padding: 0;
|
||
}
|
||
#headerName-container {
|
||
position: relative;
|
||
height: 50px;
|
||
}
|
||
table th#headerSize, table td.filesize {
|
||
text-align: right;
|
||
}
|
||
table th#headerDate, table td.date,
|
||
table th.column-last, table td.column-last {
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
/* this can not be just width, both need to be set … table styling */
|
||
min-width: 176px;
|
||
max-width: 176px;
|
||
}
|
||
|
||
/* Multiselect bar */
|
||
#filestable.multiselect {
|
||
top: 95px;
|
||
}
|
||
table.multiselect thead {
|
||
position: fixed;
|
||
top: 89px;
|
||
z-index: 10;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
left: 250px; /* sidebar */
|
||
}
|
||
|
||
table.multiselect thead th {
|
||
background-color: rgba(220,220,220,.8);
|
||
color: #000;
|
||
font-weight: bold;
|
||
border-bottom: 0;
|
||
}
|
||
table.multiselect #headerName {
|
||
position: relative;
|
||
width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */
|
||
}
|
||
table td.selection, table th.selection, table td.fileaction { width:32px; text-align:center; }
|
||
table td.filename a.name {
|
||
position:relative; /* Firefox needs to explicitly have this default set … */
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
display: block;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
padding: 0;
|
||
}
|
||
table tr[data-type="dir"] td.filename a.name span.nametext {font-weight:bold; }
|
||
table td.filename input.filename {
|
||
width: 80%;
|
||
font-size: 14px;
|
||
margin-top: 0;
|
||
margin-left: 2px;
|
||
cursor: text;
|
||
}
|
||
table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:3px 8px 8px 3px; }
|
||
table td.filename .nametext, .uploadtext, .modified, .column-last>span:first-child { float:left; padding:15px 0; }
|
||
|
||
.modified, .column-last>span:first-child {
|
||
position: relative;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
width: 90%;
|
||
}
|
||
/* ellipsize long modified dates to make room for showing delete button */
|
||
#fileList tr:hover .modified, #fileList tr:hover .column-last>span:first-child,
|
||
#fileList tr:focus .modified, #fileList tr:focus .column-last>span:first-child {
|
||
width: 75%;
|
||
}
|
||
|
||
/* TODO fix usability bug (accidental file/folder selection) */
|
||
table td.filename .nametext {
|
||
position: absolute;
|
||
left: 55px;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 800px;
|
||
}
|
||
|
||
table td.filename .nametext .innernametext {
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
|
||
@media only screen and (min-width: 1366px) {
|
||
table td.filename .nametext .innernametext {
|
||
max-width: 760px;
|
||
}
|
||
|
||
table tr:hover td.filename .nametext .innernametext {
|
||
max-width: 480px;
|
||
}
|
||
}
|
||
|
||
@media only screen and (min-width: 1200px) and (max-width: 1366px) {
|
||
table td.filename .nametext .innernametext {
|
||
max-width: 600px;
|
||
}
|
||
|
||
table tr:hover td.filename .nametext .innernametext {
|
||
max-width: 320px;
|
||
}
|
||
}
|
||
|
||
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
|
||
table td.filename .nametext .innernametext {
|
||
max-width: 400px;
|
||
}
|
||
|
||
table tr:hover td.filename .nametext .innernametext {
|
||
max-width: 120px;
|
||
}
|
||
}
|
||
|
||
@media only screen and (min-width: 768px) and (max-width: 1000px) {
|
||
table td.filename .nametext .innernametext {
|
||
max-width: 320px;
|
||
}
|
||
|
||
table tr:hover td.filename .nametext .innernametext {
|
||
max-width: 40px;
|
||
}
|
||
}
|
||
|
||
/* for smaller resolutions - see mobile.css */
|
||
|
||
table td.filename .uploadtext {
|
||
font-weight: normal;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.ie8 input[type="checkbox"]{
|
||
padding: 0;
|
||
}
|
||
|
||
/* File checkboxes */
|
||
#fileList tr td.filename>input[type="checkbox"]:first-child {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||
filter: alpha(opacity=0);
|
||
opacity: 0;
|
||
float: left;
|
||
margin: 32px 0 4px 32px; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/
|
||
}
|
||
/* Show checkbox when hovering, checked, or selected */
|
||
#fileList tr:hover td.filename>input[type="checkbox"]:first-child,
|
||
#fileList tr td.filename>input[type="checkbox"]:checked:first-child,
|
||
#fileList tr.selected td.filename>input[type="checkbox"]:first-child {
|
||
opacity: 1;
|
||
}
|
||
.lte9 #fileList tr:hover td.filename>input[type="checkbox"]:first-child,
|
||
.lte9 #fileList tr td.filename>input[type="checkbox"][checked=checked]:first-child,
|
||
.lte9 #fileList tr.selected td.filename>input[type="checkbox"]:first-child {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||
filter: alpha(opacity=100);
|
||
}
|
||
|
||
/* Use label to have bigger clickable size for checkbox */
|
||
#fileList tr td.filename>input[type="checkbox"] + label,
|
||
.select-all + label {
|
||
height: 50px;
|
||
position: absolute;
|
||
width: 50px;
|
||
z-index: 5;
|
||
}
|
||
#fileList tr td.filename>input[type="checkbox"]{
|
||
/* sometimes checkbox height is bigger (KDE/Qt), so setting to absolute
|
||
* to prevent it to increase the height */
|
||
position: absolute;
|
||
}
|
||
#fileList tr td.filename>input[type="checkbox"] + label {
|
||
left: 0;
|
||
}
|
||
.select-all + label {
|
||
top: 0;
|
||
}
|
||
.select-all {
|
||
position: absolute;
|
||
top: 18px;
|
||
left: 18px;
|
||
}
|
||
|
||
|
||
#fileList tr td.filename {
|
||
position: relative;
|
||
width: 100%;
|
||
padding-left: 0;
|
||
-webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms;
|
||
}
|
||
|
||
#fileList tr td.filename a.name label {
|
||
position: absolute;
|
||
width: 80%;
|
||
height: 50px;
|
||
}
|
||
|
||
#uploadsize-message,#delete-confirm { display:none; }
|
||
|
||
/* File actions */
|
||
.fileactions {
|
||
position: absolute;
|
||
right: 0;
|
||
font-size: 11px;
|
||
}
|
||
|
||
#fileList img.move2trash { display:inline; margin:-8px 0; padding:16px 8px 16px 8px !important; float:right; }
|
||
#fileList a.action.delete {
|
||
position: absolute;
|
||
right: 0;
|
||
padding: 17px 14px;
|
||
}
|
||
|
||
#fileList .action.action-share-notification span, #fileList a {
|
||
cursor: default !important;
|
||
}
|
||
|
||
a.action>img {
|
||
max-height:16px;
|
||
max-width:16px;
|
||
vertical-align:text-bottom;
|
||
margin-bottom: -1px;
|
||
}
|
||
|
||
/* Actions for selected files */
|
||
.selectedActions {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
.selectedActions a {
|
||
display: inline;
|
||
font-size: 11px;
|
||
line-height: 50px;
|
||
padding: 18px 5px;
|
||
}
|
||
.selectedActions a.delete-selected {
|
||
padding-right: 15px;
|
||
}
|
||
.selectedActions a.hidden {
|
||
display: none;
|
||
}
|
||
.selectedActions a img {
|
||
position:relative;
|
||
vertical-align: text-bottom;
|
||
margin-bottom: -1px;
|
||
}
|
||
|
||
|
||
#fileList a.action {
|
||
display: inline;
|
||
padding: 18px 8px;
|
||
line-height: 50px;
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||
filter: alpha(opacity=0);
|
||
opacity: 0;
|
||
display:none;
|
||
}
|
||
|
||
#fileList a.action[data-action="Rename"] {
|
||
padding: 16px 14px 17px !important;
|
||
position: relative;
|
||
top: -21px;
|
||
}
|
||
#fileList tr:hover a.action, #fileList a.action.permanent {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||
filter: alpha(opacity=50);
|
||
opacity: .5;
|
||
display:inline;
|
||
}
|
||
#fileList tr:hover a.action:hover {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||
filter: alpha(opacity=100);
|
||
opacity: 1;
|
||
display:inline;
|
||
}
|
||
|
||
.summary {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
||
filter: alpha(opacity=30);
|
||
opacity: .3;
|
||
height: 70px;
|
||
}
|
||
|
||
.summary:hover, .summary, table tr.summary td {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.summary td {
|
||
padding-top: 8px;
|
||
padding-bottom: 8px;
|
||
border-bottom: none;
|
||
}
|
||
.summary .info {
|
||
margin-left: 55px;
|
||
}
|
||
|
||
#scanning-message{ top:40%; left:40%; position:absolute; display:none; }
|
||
|
||
table.dragshadow {
|
||
width:auto;
|
||
}
|
||
table.dragshadow td.filename {
|
||
padding-left:60px;
|
||
padding-right:16px;
|
||
height: 36px;
|
||
}
|
||
table.dragshadow td.size {
|
||
padding-right:8px;
|
||
}
|
||
#upgrade {
|
||
width: 400px;
|
||
position: absolute;
|
||
top: 200px;
|
||
left: 50%;
|
||
text-align: center;
|
||
margin-left: -200px;
|
||
}
|
||
.mask {
|
||
z-index: 50;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: white;
|
||
background-repeat: no-repeat no-repeat;
|
||
background-position: 50%;
|
||
opacity: 0.7;
|
||
filter: alpha(opacity=70);
|
||
transition: opacity 100ms;
|
||
-moz-transition: opacity 100ms;
|
||
-o-transition: opacity 100ms;
|
||
-ms-transition: opacity 100ms;
|
||
-webkit-transition: opacity 100ms;
|
||
}
|
||
.mask.transparent{
|
||
opacity: 0;
|
||
}
|