3a36163e91
A recent change replaced img elements with CSS icons for file actions. This fix adjusts the logic to work properly with CSS icons instead of images.
811 lines
18 KiB
CSS
811 lines
18 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:focus,
|
||
.actions .button a:active {
|
||
color: #333;
|
||
}
|
||
.actions.hidden { display: none; }
|
||
|
||
.actions.creatable {
|
||
position: relative;
|
||
z-index: -30;
|
||
}
|
||
|
||
#trash {
|
||
margin-right: 8px;
|
||
float: right;
|
||
z-index: 1010;
|
||
padding: 10px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.newFileMenu .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;
|
||
width: 100%;
|
||
}
|
||
|
||
#filestable.has-controls {
|
||
top: 44px;
|
||
}
|
||
|
||
/* 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: 0%;
|
||
}
|
||
|
||
.app-files #app-content {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* icons for sidebar */
|
||
.nav-icon-files {
|
||
background-image: url('../img/folder.svg');
|
||
}
|
||
.nav-icon-favorites {
|
||
background-image: url('../img/star.svg');
|
||
}
|
||
.nav-icon-sharingin,
|
||
.nav-icon-sharingout {
|
||
background-image: url('../img/share.svg');
|
||
}
|
||
.nav-icon-sharinglinks {
|
||
background-image: url('../img/public.svg');
|
||
}
|
||
.nav-icon-extstoragemounts {
|
||
background-image: url('../img/external.svg');
|
||
}
|
||
.nav-icon-trashbin {
|
||
background-image: url('../img/delete.svg');
|
||
}
|
||
|
||
#app-navigation .nav-files a.nav-icon-files {
|
||
width: auto;
|
||
}
|
||
/* button needs overrides due to navigation styles */
|
||
#app-navigation .nav-files a.new {
|
||
width: 40px;
|
||
height: 32px;
|
||
padding: 0 10px;
|
||
margin: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
#app-navigation .nav-files a.new.hidden {
|
||
display: none;
|
||
}
|
||
|
||
#app-navigation .nav-files a.new.disabled {
|
||
opacity: 0.3;
|
||
}
|
||
|
||
#filestable tbody tr {
|
||
background-color: #fff;
|
||
height: 40px;
|
||
}
|
||
#filestable tbody tr:hover,
|
||
#filestable tbody tr:focus,
|
||
#filestable tbody .name:focus,
|
||
#filestable tbody tr:active,
|
||
#filestable tbody tr.highlighted,
|
||
#filestable tbody tr.highlighted .name:focus,
|
||
#filestable tbody tr.selected,
|
||
#filestable tbody tr.searchresult,
|
||
table tr.mouseOver td {
|
||
background-color: #f8f8f8;
|
||
}
|
||
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,
|
||
tr:focus span.extension {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||
filter: alpha(opacity=100);
|
||
opacity: 1;
|
||
color: #777;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
table th .sort-indicator {
|
||
width: 10px;
|
||
height: 8px;
|
||
margin-left: 5px;
|
||
display: inline-block;
|
||
vertical-align: text-bottom;
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
||
filter: alpha(opacity=30);
|
||
opacity: .3;
|
||
}
|
||
.sort-indicator.hidden,
|
||
.multiselect .sort-indicator,
|
||
table.multiselect th:hover .sort-indicator.hidden,
|
||
table.multiselect th:focus .sort-indicator.hidden {
|
||
visibility: hidden;
|
||
}
|
||
.multiselect .sort, .multiselect .sort span {
|
||
cursor: default;
|
||
}
|
||
table th:hover .sort-indicator.hidden,
|
||
table th:focus .sort-indicator.hidden {
|
||
visibility: visible;
|
||
}
|
||
|
||
table th,
|
||
table td {
|
||
border-bottom: 1px solid #eee;
|
||
text-align: left;
|
||
font-weight: normal;
|
||
}
|
||
table td {
|
||
padding: 0 15px;
|
||
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;
|
||
}
|
||
.has-favorites #headerName-container {
|
||
padding-left: 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: 130px;
|
||
max-width: 130px;
|
||
}
|
||
|
||
/* 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 thead th {
|
||
background-color: #fff;
|
||
}
|
||
table.multiselect thead th {
|
||
background-color: rgba(255, 255, 255, 0.95); /* like controls bar */
|
||
color: #000;
|
||
font-weight: bold;
|
||
border-bottom: 0;
|
||
}
|
||
|
||
#app-content.with-app-sidebar table.multiselect thead{
|
||
margin-right: 27%;
|
||
}
|
||
|
||
table.multiselect #headerName {
|
||
position: relative;
|
||
width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */
|
||
}
|
||
table.multiselect #modified {
|
||
display: none;
|
||
}
|
||
|
||
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 td.filename .thumbnail {
|
||
display: inline-block;
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-left: 8px;
|
||
margin-top: 9px;
|
||
cursor: pointer;
|
||
float: left;
|
||
position: absolute;
|
||
z-index: 4;
|
||
}
|
||
table td.filename input.filename {
|
||
width: 70%;
|
||
margin-top: 9px;
|
||
margin-left: 48px;
|
||
cursor: text;
|
||
}
|
||
.has-favorites table td.filename input.filename {
|
||
margin-left: 52px;
|
||
}
|
||
|
||
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: 110px;
|
||
}
|
||
|
||
/* 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;
|
||
height: 100%;
|
||
}
|
||
.has-favorites #fileList td.filename a.name {
|
||
left: 50px;
|
||
margin-right: 50px;
|
||
}
|
||
|
||
table td.filename .nametext .innernametext {
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
position: relative;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
|
||
@media only screen and (min-width: 1500px) {
|
||
table td.filename .nametext .innernametext {
|
||
max-width: 790px;
|
||
}
|
||
.with-app-sidebar table td.filename .nametext .innernametext {
|
||
max-width: 390px;
|
||
}
|
||
}
|
||
@media only screen and (min-width: 1366px) and (max-width: 1500px) {
|
||
table td.filename .nametext .innernametext {
|
||
max-width: 660px;
|
||
}
|
||
.with-app-sidebar table td.filename .nametext .innernametext {
|
||
max-width: 290px;
|
||
}
|
||
}
|
||
@media only screen and (min-width: 1200px) and (max-width: 1366px) {
|
||
table td.filename .nametext .innernametext {
|
||
max-width: 500px;
|
||
}
|
||
.with-app-sidebar table td.filename .nametext .innernametext {
|
||
max-width: 230px;
|
||
}
|
||
}
|
||
@media only screen and (min-width: 1100px) and (max-width: 1200px) {
|
||
table td.filename .nametext .innernametext {
|
||
max-width: 400px;
|
||
}
|
||
.with-app-sidebar table td.filename .nametext .innernametext {
|
||
max-width: 230px;
|
||
}
|
||
}
|
||
@media only screen and (min-width: 1000px) and (max-width: 1100px) {
|
||
table td.filename .nametext .innernametext {
|
||
max-width: 310px;
|
||
}
|
||
.with-app-sidebar table td.filename .nametext .innernametext {
|
||
max-width: 230px;
|
||
}
|
||
}
|
||
@media only screen and (min-width: 768px) and (max-width: 1000px) {
|
||
table td.filename .nametext .innernametext {
|
||
max-width: 240px;
|
||
}
|
||
.with-app-sidebar table td.filename .nametext .innernametext {
|
||
max-width: 230px;
|
||
}
|
||
}
|
||
|
||
/* for smaller resolutions - see mobile.css */
|
||
|
||
table td.filename .uploadtext {
|
||
font-weight: normal;
|
||
margin-left: 55px;
|
||
margin-top: 5px;
|
||
height: 20px;
|
||
padding: 10px 0;
|
||
font-size: 11px;
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||
filter: alpha(opacity=50);
|
||
opacity: .5;
|
||
}
|
||
|
||
.ie8 input[type="checkbox"]{
|
||
padding: 0;
|
||
}
|
||
|
||
/* File checkboxes */
|
||
html:not(.ie8) #fileList tr td.filename>.selectCheckBox + label:before {
|
||
opacity: 0;
|
||
position: absolute;
|
||
bottom: 4px;
|
||
right: 0;
|
||
z-index: 10;
|
||
}
|
||
html.ie8 #fileList tr td.filename>.selectCheckBox {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||
filter: alpha(opacity=0);
|
||
opacity: 0;
|
||
float: left;
|
||
top: 0;
|
||
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 */
|
||
html.ie8 #fileList tr:hover td.filename>.selectCheckBox,
|
||
html.ie8 #fileList tr:focus td.filename>.selectCheckBox,
|
||
html.ie8 #fileList tr td.filename>.selectCheckBox:checked,
|
||
html.ie8 #fileList tr.selected td.filename>.selectCheckBox,
|
||
html:not(.ie8) #fileList tr:hover td.filename>.selectCheckBox + label:before,
|
||
html:not(.ie8) #fileList tr:focus td.filename>.selectCheckBox + label:before,
|
||
html:not(.ie8) #fileList tr td.filename>.selectCheckBox:checked + label:before,
|
||
html:not(.ie8) #fileList tr.selected td.filename>.selectCheckBox + label:before {
|
||
opacity: 1;
|
||
}
|
||
html.ie8 #fileList tr:hover td.filename>.selectCheckBox,
|
||
html.ie8 #fileList tr:focus td.filename>.selectCheckBox,
|
||
html.ie8 #fileList tr td.filename>.selectCheckBox[checked=checked],
|
||
html.ie8 #fileList tr.selected td.filename>.selectCheckBox {
|
||
-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>.selectCheckBox + label,
|
||
.select-all + label {
|
||
background-position: 30px 30px;
|
||
height: 50px;
|
||
position: absolute;
|
||
width: 50px;
|
||
z-index: 5;
|
||
}
|
||
#fileList tr td.filename>.selectCheckBox {
|
||
/* sometimes checkbox height is bigger (KDE/Qt), so setting to absolute
|
||
* to prevent it to increase the height */
|
||
position: absolute;
|
||
z-index: 10;
|
||
}
|
||
.select-all + label {
|
||
top: 0;
|
||
}
|
||
.ie8 .select-all,
|
||
.select-all + label:before {
|
||
position: absolute;
|
||
top: 18px;
|
||
left: 18px;
|
||
z-index: 10;
|
||
}
|
||
.has-favorites .select-all {
|
||
left: 68px;
|
||
}
|
||
|
||
#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;
|
||
}
|
||
|
||
#fileList tr td.filename .favorite {
|
||
display: inline-block;
|
||
float: left;
|
||
}
|
||
#fileList tr td.filename .action-favorite {
|
||
display: block;
|
||
float: left;
|
||
width: 30px;
|
||
line-height: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
#uploadsize-message,#delete-confirm { display:none; }
|
||
|
||
/* File actions */
|
||
.fileactions {
|
||
position: absolute;
|
||
right: 0;
|
||
}
|
||
|
||
.busy .fileactions, .busy .action {
|
||
visibility: hidden;
|
||
}
|
||
|
||
/* fix position of bubble pointer for Files app */
|
||
.bubble,
|
||
#app-navigation .app-navigation-entry-menu {
|
||
border-top-right-radius: 3px;
|
||
}
|
||
.bubble:after,
|
||
#app-navigation .app-navigation-entry-menu:after {
|
||
right: 6px;
|
||
}
|
||
.bubble:before,
|
||
#app-navigation .app-navigation-entry-menu:before {
|
||
right: 6px;
|
||
}
|
||
|
||
/* force show the loading icon, not only on hover */
|
||
#fileList .icon-loading-small {
|
||
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||
filter:alpha(opacity=100);
|
||
opacity: 1 !important;
|
||
display: inline !important;
|
||
}
|
||
|
||
#fileList img.move2trash { display:inline; margin:-8px 0; padding:16px 8px 16px 8px !important; float:right; }
|
||
|
||
#fileList .action.action-share-notification span, #fileList a.name {
|
||
cursor: default !important;
|
||
}
|
||
|
||
a.action > img {
|
||
height: 16px;
|
||
width: 16px;
|
||
vertical-align: text-bottom;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
html.ie8 .column-mtime .selectedActions {
|
||
top: -95px;
|
||
}
|
||
|
||
#fileList a.action {
|
||
display: inline;
|
||
padding: 17px 8px;
|
||
line-height: 50px;
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||
filter: alpha(opacity=0);
|
||
opacity: 0;
|
||
display:none;
|
||
}
|
||
#fileList a.action.action-share,
|
||
#fileList a.action.action-menu {
|
||
padding: 17px 14px;
|
||
}
|
||
|
||
#fileList .popovermenu {
|
||
margin-right: 21px;
|
||
}
|
||
.ie8 #fileList .popovermenu {
|
||
margin-top: -10px;
|
||
}
|
||
|
||
.ie8 #fileList a.action img,
|
||
#fileList tr:hover a.action,
|
||
#fileList a.action.permanent,
|
||
#fileList tr:focus a.action,
|
||
#fileList a.action.permanent,
|
||
#fileList tr:hover a.action.no-permission:hover,
|
||
#fileList tr:focus a.action.no-permission:focus,
|
||
/*#fileList .name:focus .action,*/
|
||
/* also enforce the low opacity for disabled links that are hovered/focused */
|
||
.ie8 #fileList a.action.disabled:hover img,
|
||
#fileList tr:hover a.action.disabled:hover,
|
||
#fileList tr:focus a.action.disabled:focus,
|
||
#fileList .name:focus a.action.disabled:focus,
|
||
#fileList a.action.disabled img {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
||
filter: alpha(opacity=30);
|
||
opacity: .3;
|
||
display:inline;
|
||
}
|
||
.ie8 #fileList a.action:hover img,
|
||
#fileList tr a.action.disabled.action-download,
|
||
#fileList tr:hover a.action.disabled.action-download:hover,
|
||
#fileList tr:focus a.action.disabled.action-download:focus,
|
||
#fileList tr:hover a.action:hover,
|
||
#fileList tr:focus a.action:focus,
|
||
#fileList .name:focus a.action:focus {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||
filter: alpha(opacity=70);
|
||
opacity: 7;
|
||
display:inline;
|
||
}
|
||
#fileList tr a.action.disabled {
|
||
background: none;
|
||
}
|
||
|
||
/* show share action of shared items darker to distinguish from non-shared */
|
||
#fileList a.action.permanent.shared-style,
|
||
#fileList a.action.action-favorite.permanent {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
|
||
filter: alpha(opacity=70) !important;
|
||
opacity: .7 !important;
|
||
}
|
||
/* always show actions on mobile, not only on hover */
|
||
#fileList a.action.action-menu.permanent {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" !important;
|
||
filter: alpha(opacity=30) !important;
|
||
opacity: .3 !important;
|
||
display: inline !important;
|
||
}
|
||
|
||
/* properly display actions in the popover menu */
|
||
#fileList .popovermenu .action {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
|
||
filter: alpha(opacity=50) !important;
|
||
opacity: .5 !important;
|
||
}
|
||
#fileList .popovermenu .action:hover,
|
||
#fileList .popovermenu .action:focus {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
|
||
filter: alpha(opacity=100) !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
|
||
#selectedActionsList a.download.disabled,
|
||
#fileList tr a.action.action-download.disabled {
|
||
color: #000000;
|
||
}
|
||
|
||
#fileList tr:hover a.action.disabled:hover * {
|
||
cursor: default;
|
||
}
|
||
|
||
.summary {
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
||
filter: alpha(opacity=30);
|
||
opacity: .3;
|
||
/* add whitespace to bottom of files list to correctly show dropdowns */
|
||
height: 300px;
|
||
}
|
||
.summary:hover,
|
||
.summary:focus,
|
||
.summary,
|
||
table tr.summary td {
|
||
background-color: transparent;
|
||
}
|
||
.summary td {
|
||
border-bottom: none;
|
||
vertical-align: top;
|
||
padding-top: 20px;
|
||
}
|
||
.summary .info {
|
||
margin-left: 40px;
|
||
}
|
||
.has-favorites .summary .info {
|
||
margin-left: 90px;
|
||
}
|
||
|
||
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: #fff;
|
||
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;
|
||
}
|
||
|
||
#fileList .popovermenu a.action img {
|
||
padding: initial;
|
||
}
|
||
|
||
#fileList .popovermenu a.action {
|
||
padding: 10px;
|
||
margin: -10px;
|
||
}
|
||
|
||
html.ie8 #controls .button.new {
|
||
padding-right: 0;
|
||
}
|
||
|
||
.newFileMenu {
|
||
width: 140px;
|
||
margin-left: -56px;
|
||
margin-top: 25px;
|
||
z-index: 1001;
|
||
}
|
||
|
||
.newFileMenu .menuitem {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
.newFileMenu.popovermenu a.menuitem,
|
||
.newFileMenu.popovermenu label.menuitem,
|
||
.newFileMenu.popovermenu .menuitem {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.newFileMenu.popovermenu a.menuitem.active {
|
||
opacity: 1;
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||
filter: alpha(opacity=100);
|
||
}
|
||
|
||
.newFileMenu.bubble:after {
|
||
left: 75px;
|
||
right: auto;
|
||
}
|
||
.newFileMenu.bubble:before {
|
||
left: 75px;
|
||
right: auto;
|
||
}
|
||
|
||
.newFileMenu .filenameform {
|
||
display: inline-block;
|
||
}
|
||
|
||
.newFileMenu .filenameform input {
|
||
width: 100px;
|
||
}
|
||
|
||
#fileList .popovermenu .action {
|
||
display: block;
|
||
line-height: 30px;
|
||
padding-left: 5px;
|
||
color: #000;
|
||
padding: 0;
|
||
}
|
||
|
||
#filestable .filename .action .icon,
|
||
#filestable .selectedActions a .icon,
|
||
#controls .actions .button .icon {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
background-size: 16px 16px;
|
||
}
|
||
|
||
#filestable .filename .action .icon.hidden,
|
||
#filestable .selectedActions a .icon.hidden,
|
||
#controls .actions .button .icon.hidden {
|
||
display: none;
|
||
}
|
||
|
||
#filestable .filename .action .icon.loading,
|
||
#filestable .selectedActions a .icon.loading,
|
||
#controls .actions .button .icon.loading {
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
|
||
.app-files .actions .button.new .icon {
|
||
margin-bottom: 2px;
|
||
}
|