nextcloud/apps/files/css/files.css

360 lines
8.9 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 {
z-index: 1010;
float: left;
padding: 0 !important; /* override default control bar button padding */
}
#trash {
margin-right: 12px;
float: right;
z-index: 1010;
padding: 10px;
}
#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: 7em;
z-index: 10;
padding: .5em;
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:.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;}
/* FILE TABLE */
#filestable {
position: relative;
top: 44px;
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);
}
#filestable tbody tr.searchresult {
background-color: rgb(240,240,240);
}
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;
}
/* 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: 0;
padding-left: 80px;
width: 100%;
}
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: 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;
}
/* 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; }
.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 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;
}
#fileList tr td.filename a.name label {
position: absolute;
width: 100%;
height: 50px;
}
#uploadsize-message,#delete-confirm { display:none; }
/* File actions */
.fileactions {
position: absolute;
top: 14px;
right: 0;
}
#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 img.move2trash { display:inline; margin:-.5em 0; padding:1em .5em 1em .5em !important; float:right; }
#fileList a.action.delete {
position: absolute;
right: 0;
padding: 9px 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; }
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: fixed;
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;
}