nextcloud/apps/files/css/files.css

361 lines
9.7 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* 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:.3em; height:2em; width: 100%; }
.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; }
#new {
height:17px; margin:0 0 0 1em; z-index:1010; float:left;
}
#new.active { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:none; }
#new>a { padding:.5em 1.2em .3em; }
#new>ul {
display:none; position:fixed; min-width:7em; z-index:10;
padding:.5em; padding-bottom:0; margin-top:.075em; margin-left:-.5em;
text-align:left;
background:#f8f8f8; border:1px solid #ddd; border-radius:10px; border-top-left-radius:0;
box-shadow:0 2px 7px rgba(170,170,170,.4);
}
#new>ul>li { height:36px; margin:.3em; padding-left:3em; padding-bottom:0.1em;
background-repeat:no-repeat; cursor:pointer; }
#new>ul>li>p { cursor:pointer; padding-top: 7px; padding-bottom: 7px;}
#new>ul>li>form>input {
padding: 5px;
margin: 2px 0;
}
#trash { margin: 0 1em; z-index:1010; float: right; }
#upload {
height:27px; padding:0; margin-left:0.2em; overflow:hidden;
}
#upload a {
position:relative; display:block; width:100%; height:27px;
cursor:pointer; z-index:10;
background-image:url('%webroot%/core/img/actions/upload.svg');
background-repeat:no-repeat;
background-position:7px 6px;
opacity:0.65;
}
.file_upload_target { display:none; }
.file_upload_form { display:inline; float:left; margin:0; padding:0; cursor:pointer; overflow:visible; }
#file_upload_start {
left:0; top:0; width:28px; height:27px; padding:0;
font-size:1em;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0;
z-index:20; position:relative; cursor:pointer; overflow:hidden;
}
#uploadprogresswrapper {
position: relative;
display: inline;
}
#uploadprogressbar {
position:relative;
float: left;
margin-left: 12px;
width: 130px;
height: 26px;
display:inline-block;
}
#uploadprogressbar + stop {
font-size: 13px;
}
/* FILE TABLE */
#filestable { position: relative; top:37px; width:100%; }
#filestable tbody tr { background-color:#fff; height:2.5em; }
#filestable tbody tr:hover, tbody tr:active {
background-color: rgb(240,240,240);
}
#filestable tbody tr.selected {
background-color: rgb(230,230,230);
}
tbody a { color:#000; }
span.extension, span.uploading, td.date { color:#999; }
span.extension { text-transform:lowercase; -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; }
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 { height:2em; padding:0 .5em; color:#999; }
table th .name {
position: absolute;
left: 55px;
top: 15px;
}
table th, table td { border-bottom:1px solid #ddd; text-align:left; font-weight:normal; }
table td {
border-bottom: 1px solid #eee;
font-style: normal;
background-position: 8px center;
background-repeat: no-repeat;
}
table th#headerName {
position: relative;
width: 100em; /* 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 {
min-width: 3em;
padding: 0 1em;
text-align: right;
}
table th#headerDate, table td.date {
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
min-width: 11em;
display: block;
height: 51px;
}
/* Multiselect bar */
#filestable.multiselect {
top: 88px;
}
table.multiselect thead { position:fixed; top:82px; z-index:1; -moz-box-sizing: border-box; box-sizing: border-box; left: 0; padding-left: 80px; width:100%; }
table.multiselect thead th {
background-color: rgba(210,210,210,.7);
color: #000;
font-weight: bold;
border-bottom: 0;
}
table.multiselect #headerName {
position: relative;
width: 100%;
}
table td.selection, table th.selection, table td.fileaction { width:2em; 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;
vertical-align: middle;
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: 8px;
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:.2em .5em .5em .3em; }
table td.filename .nametext, .uploadtext, .modified { float:left; padding:.3em 0; }
#modified {
position: absolute;
top: 15px;
}
.modified {
position: relative;
top: 11px;
left: 5px;
}
/* TODO fix usability bug (accidental file/folder selection) */
table td.filename .nametext {
position: absolute;
top: 16px;
left: 55px;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
max-width: 800px;
}
table td.filename .uploadtext { font-weight:normal; margin-left:.5em; }
table td.filename form { font-size:.85em; margin-left:3em; margin-right:3em; }
/* 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 doesnt 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"] + label {
left: 0;
}
#select_all + label {
top: 0;
}
#select_all {
position: absolute;
top: 18px;
left: 18px;
}
#fileList tr td.filename {
position:relative; width:100%;
-webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms;
}
#uploadsize-message,#delete-confirm { display:none; }
/* File actions */
.fileactions {
position: absolute;
top: 16px;
right: 0;
font-size: 11px;
}
#fileList tr:hover .fileactions { /* background to distinguish when overlaying with file names */
background-color: rgba(240,240,240,0.898);
box-shadow: -5px 0 7px rgba(240,240,240,0.898);
}
#fileList tr.selected:hover .fileactions, #fileList tr.mouseOver .fileactions { /* slightly darker color for selected rows */
background-color: rgba(230,230,230,.9);
box-shadow: -5px 0 7px rgba(230,230,230,.9);
}
#fileList .fileactions a.action img { position:relative; top:.2em; }
#fileList img.move2trash { display:inline; margin:-.5em 0; padding:1em .5em 1em .5em !important; float:right; }
#fileList a.action.delete {
position: absolute;
right: 0;
top: 0;
margin: 0;
padding: 15px 14px 19px !important;
}
a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; }
/* Actions for selected files */
.selectedActions {
display: none;
position: absolute;
top: -1px;
right: 0;
padding: 15px 8px;
}
.selectedActions a {
display: inline;
padding: 17px 5px;
}
.selectedActions a img {
position:relative;
top:.3em;
}
#fileList a.action {
display: inline;
margin: -.5em 0;
padding: 18px 8px !important;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
display:none;
}
#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; }
div.crumb a{ padding:0.9em 0 0.7em 0; color:#555; }
table.dragshadow {
width:auto;
}
table.dragshadow td.filename {
padding-left:36px;
padding-right:16px;
}
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;
}