415ac9b3ac
The favorite icon was shown on its own "column" (not a real column in the table, but a visual column achieved through margins and left positions). Now the icon was moved to the top right corner of the file thumbnail, and the thumbnail and file name were moved to the left to fill the space left by the "column". To keep the markup in line with its visual representation (and to ease the placing through CSS), the favorite mark is no longer prepended to the row, but appended to the thumbnail instead. In the same way, the thumbnail is no longer appended to the checkbox label, but to the link with the name of the file instead (although the checkbox is still shown at the bottom right corner of the thumbnail, and clicking on the thumbnail still selects the file). In order to show the "busy" state on a file the "icon-loading-small" CSS class is set to the parent element of the thumbnail, so the thumbnail is also wrapped now by another div with the same size and position as the label. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
98 lines
1.8 KiB
CSS
98 lines
1.8 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. */
|
|
|
|
#searchresults {
|
|
background-color: #fff;
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
padding-top: 65px;
|
|
box-sizing: border-box;
|
|
z-index: 75;
|
|
/* account for margin-bottom in files list */
|
|
margin-top: -250px;
|
|
}
|
|
#searchresults.filter-empty {
|
|
/* remove whitespace on bottom when no search results, to fix layout */
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
#searchresults.hidden {
|
|
display: none;
|
|
}
|
|
#searchresults * {
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
#searchresults .status {
|
|
background-color: rgba(255, 255, 255, .85);
|
|
height: 12px;
|
|
padding: 28px 0 28px 56px;
|
|
font-size: 18px;
|
|
}
|
|
#searchresults .status.fixed {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
|
|
#searchresults .status .spinner {
|
|
height: 16px;
|
|
width: 16px;
|
|
vertical-align: middle;
|
|
margin-left: 10px;
|
|
}
|
|
#searchresults table {
|
|
border-spacing:0;
|
|
table-layout:fixed;
|
|
top:0;
|
|
width:100%;
|
|
}
|
|
|
|
#searchresults td {
|
|
padding: 5px 19px;
|
|
font-style: normal;
|
|
vertical-align: middle;
|
|
border-bottom: none;
|
|
}
|
|
#searchresults td.icon {
|
|
text-align: right;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 5px 0;
|
|
background-position: right center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#searchresults tr.template {
|
|
display: none;
|
|
}
|
|
|
|
#searchresults .name,
|
|
#searchresults .text,
|
|
#searchresults .path {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
#searchresults .text {
|
|
white-space: normal;
|
|
color: #545454;
|
|
}
|
|
#searchresults .path {
|
|
opacity: .5;
|
|
}
|
|
#searchresults .text em {
|
|
color: #545454;
|
|
font-weight: bold;
|
|
opacity: 1;
|
|
}
|
|
|
|
#searchresults tr.result * {
|
|
cursor:pointer;
|
|
}
|
|
|
|
#searchresults tr.current {
|
|
background-color:#ddd;
|
|
}
|