server/apps/files_sharing/css/public.scss
Daniel Calviño Sánchez a8323bbc05 Fix placement of icon in public share page for audio files
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>
2019-06-27 13:33:22 +02:00

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;
}
}
}
}