a8323bbc05
When the preview for audio files is used an HTML 5 audio element is shown in the public share page. This element is added by the template, so it is already there when the mimetype icon is added to the "#imgframe" element. Instead of appended the icon is now prepended, so it appears before the audio element (prepending instead of appending should make no difference for other types of files, as in that case the "#imgframe" element is empty). Besides that, the CSS was modified to show the icon centered above the audio preview instead of next to it. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
225 lines
3.5 KiB
SCSS
225 lines
3.5 KiB
SCSS
#preview {
|
|
text-align: center;
|
|
}
|
|
|
|
#preview .notCreatable {
|
|
display: none;
|
|
}
|
|
|
|
#noPreview {
|
|
display:none;
|
|
padding-top:80px;
|
|
}
|
|
|
|
#imgframe {
|
|
height:75%;
|
|
padding-bottom:32px;
|
|
padding-top:32px;
|
|
width:80%;
|
|
margin:0 auto;
|
|
}
|
|
|
|
|
|
#imgframe img {
|
|
max-height: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
#imgframe audio {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#imgframe .text-preview {
|
|
display: inline-block;
|
|
position: relative;
|
|
text-align: left;
|
|
white-space: pre-wrap;
|
|
overflow-y: hidden;
|
|
height: auto;
|
|
min-height: 200px;
|
|
max-height: 800px;
|
|
}
|
|
|
|
#imgframe .ellipsis {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
/* fix multiselect bar offset on shared page */
|
|
thead {
|
|
left: 0 !important;
|
|
}
|
|
|
|
#data-upload-form {
|
|
position: relative;
|
|
right: 0;
|
|
height: 32px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
float: right;
|
|
display: inline;
|
|
margin: 0;
|
|
}
|
|
|
|
/* keep long file names in one line to not overflow download button on mobile */
|
|
.directDownload #downloadFile {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 90%;
|
|
display: inline-block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.download-size {
|
|
opacity: .5;
|
|
}
|
|
|
|
/* header buttons */
|
|
#details {
|
|
display: inline-flex;
|
|
}
|
|
#details button,
|
|
#details input,
|
|
#details .button {
|
|
margin: 0 5px;
|
|
line-height: normal;
|
|
}
|
|
#details button:hover,
|
|
#details input:hover,
|
|
#details .button:hover {
|
|
/* No */
|
|
border-color: rgba(0,0,0,0.3) !important;
|
|
}
|
|
|
|
#public-upload .avatardiv {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#emptycontent {
|
|
&.has-note {
|
|
margin-top: 5vh;
|
|
}
|
|
}
|
|
|
|
#public-upload #emptycontent h2 {
|
|
margin: 10px 0 5px 0;
|
|
}
|
|
|
|
#public-upload #emptycontent h2+p {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
#public-upload #emptycontent .icon-folder {
|
|
height: 16px;
|
|
width: 16px;
|
|
background-size: 16px;
|
|
display: inline-block;
|
|
vertical-align: text-top;
|
|
margin-bottom: 0;
|
|
margin-right: 5px;
|
|
opacity: 1;
|
|
}
|
|
|
|
#public-upload #emptycontent .button {
|
|
display: inline-block;
|
|
height: auto;
|
|
width: auto;
|
|
background-size: 16px;
|
|
background-position: 16px;
|
|
opacity: .7;
|
|
font-size: 20px;
|
|
line-height: initial;
|
|
margin: 20px;
|
|
padding: 10px 20px;
|
|
padding-left: 42px;
|
|
}
|
|
|
|
#public-upload #emptycontent ul {
|
|
width: 160px;
|
|
margin: 5px auto;
|
|
text-align: left;
|
|
}
|
|
|
|
#public-upload #emptycontent li {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
padding: 7px 0;
|
|
}
|
|
|
|
#public-upload #emptycontent li img {
|
|
margin-right: 5px;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
#public-upload li span.icon-loading-small {
|
|
padding-left: 18px;
|
|
margin-right: 7px;
|
|
}
|
|
|
|
.disclaimer,
|
|
.note {
|
|
margin: 0 auto 30px;
|
|
max-width: 400px;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Needed to ellipsize long header text on share page */
|
|
#body-login #header-left,
|
|
#body-login .header-left {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#header .header-shared-by {
|
|
color: var(--color-primary-text);
|
|
position: relative;
|
|
font-weight: 300;
|
|
font-size: 11px;
|
|
line-height: 11px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#note-content {
|
|
padding: 5px;
|
|
display:inline-block;
|
|
width: 350px;
|
|
.content {
|
|
overflow: auto;
|
|
max-height: 200px;
|
|
}
|
|
}
|
|
|
|
#show-terms-dialog {
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
// hide the download entry on the menu
|
|
// on public share when NOT on mobile
|
|
@media only screen and (min-width: 769px) {
|
|
#body-public {
|
|
.header-right {
|
|
#header-actions-menu {
|
|
> ul > li#download {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// hide the primary on public share on mobile
|
|
@media only screen and (max-width: $breakpoint-mobile) {
|
|
#body-public {
|
|
.header-right {
|
|
#header-primary-action {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|