mirror of
https://github.com/nextcloud/server.git
synced 2026-03-01 21:10:36 -05:00
14ad1ebf53
Having a too small widths for the files table doesn't make sense as it overlaps file actions with the files themselves and make them unclickable, especially when viewed on mobile phone. The compromise that this fix introduces is to have a minimum width that will trigger horizontal scrolling, which will at least make it possible to click files on mobile phones.
362 lines
8.7 KiB
CSS
362 lines
8.7 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:.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;
|
||
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: 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;}
|
||
|
||
#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%;
|
||
}
|
||
#filestable, #controls {
|
||
min-width: 680px;
|
||
}
|
||
#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 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"] + 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 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: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: 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;
|
||
}
|