diff options
Diffstat (limited to 'web/sass-files/sass/components/_files.scss')
| -rw-r--r-- | web/sass-files/sass/components/_files.scss | 293 |
1 files changed, 293 insertions, 0 deletions
diff --git a/web/sass-files/sass/components/_files.scss b/web/sass-files/sass/components/_files.scss new file mode 100644 index 000000000..17ffb206f --- /dev/null +++ b/web/sass-files/sass/components/_files.scss @@ -0,0 +1,293 @@ +@charset 'UTF-8'; + +.file-preview__container { + position: relative; + margin: 1px 0 10px; + width: 100%; + max-height: 100px; + height: 100px; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; +} + +.file-preview { + display: inline-block; + width: 120px; + height: 100px; + margin: 0 0 0 10px; + position: relative; + border: 1px solid #ddd; + @include clearfix; + + &:hover .file-preview__remove:after { + @include opacity(1); + } + + &:first-child { + margin-left: 0; + } + + .spinner { + position: absolute; + top: 50%; + left: 50%; + margin-left: -16px; + margin-top: -16px; + width: 32px; + height: 32px; + } +} + +.file-preview__image { + display: block; + height: auto; + max-width: 100%; +} + +.file-preview__remove { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + + &:after { + background: rgba(0, 0, 0, .4); + content: ''; + height: 100%; + left: 0; + opacity: 0; + position: absolute; + top: 0; + width: 100%; + @include opacity(0); + } + + i { + top: 5px; + right: 5px; + position: absolute; + color: #fff; + cursor: pointer; + z-index: 5; + opacity: inherit; + text-shadow: 0 0px 3px #444; + text-shadow: 0 0px 3px rgba(0, 0, 0, .7); + } +} + +.image-comment { + background-position: left top; + background-repeat: no-repeat; + width: 300px; + height: 300px; +} + + +.file-icon { + width: 100%; + height: 100%; + + &.audio { + @include file-icon('../images/icons/audio.png'); + } + + &.video { + @include file-icon('../images/icons/video.png'); + } + + &.ppt { + @include file-icon('../images/icons/ppt.png'); + } + + &.generic { + @include file-icon('../images/icons/generic.png'); + } + + &.code { + @include file-icon('../images/icons/code.png'); + } + + &.excel { + @include file-icon('../images/icons/excel.png'); + } + + &.word { + @include file-icon('../images/icons/word.png'); + } + + &.pdf { + @include file-icon('../images/icons/pdf.png'); + } + + &.patch { + @include file-icon('../images/icons/patch.png'); + } + + &.image { + @include file-icon('../images/icons/image.png'); + } +} + +.post-image__column { + position: relative; + width: 240px; + height: 100px; + float: left; + margin: 5px 10px 5px 0; + border: 1px solid lightgrey; + + a { + text-decoration: none; + color: grey; + } +} + +.post-image__load { + height: 100%; + width: 100%; + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; +} + +.post-image { + width: 100%; + height: 100%; + background-color: #fff; + background-repeat: no-repeat; + overflow: hidden; + position: relative; + text-align: center; + + &.small { + background-position: center; + } + + &.normal { + background-position: top left; + } + + .spinner.file__loading { + position: absolute; + left: 50%; + margin-left: -16px; + top: 50%; + margin-top: -16px; + } + + .file__loaded { + max-width: initial; + &.landscape, + &.quadrat { + height: 100px; + } + &.portrait { + width: 120px; + } + } + + &:hover .file-playback__controls.stop { + @include opacity(1); + } +} + +.post-image__thumbnail { + float: left; + width: 50%; + height: 100%; + cursor: zoom-in; + cursor: -webkit-zoom-in; +} + +.post-image__details { + float: left; + @include clearfix; + word-break: break-word; + width: 50%; + height: 100%; + background: white; + border-left: 1px solid #ddd; + font-size: 13px; + padding: 7px; + color: #333; + + .post-image__name { + margin-bottom: 3px; + display: block; + } + + .post-image__download { + display: inline-block; + padding-right: 7px; + cursor: pointer; + @include opacity(.7); + } + + .post-image__type { + @include opacity(.6); + } + + .post-image__size { + margin-left: 4px; + @include opacity(.6); + } +} + +.file-details__container { + @include display-flex; + display: -ms-flexbox; + + .file-details { + width: 320px; + height: 270px; + padding: 14px; + text-align: left; + vertical-align: top; + + .file-details__name { + color: #333; + font-size: 16px; + } + + .file-details__info { + color: grey; + } + } + .file-details__preview { + width: 320px; + height: 270px; + border-right: 1px solid #ddd; + vertical-align: center; + + // helper to center the image icon in the preview window + .file-details__preview-helper { + height: 100%; + display: inline-block; + vertical-align: middle; + } + } +} + +.file-playback__controls { + position: absolute; + right: 5px; + bottom: 0; + font-size: 22px; + cursor: pointer; + z-index: 2; + -webkit-transition: opacity .6s; + -moz-transition: opacity .6s; + -o-transition: opacity .6s; + transition: opacity .6s; + + &.stop { + @include opacity(0); + } +} + +.view-image__loading { + background: black; + min-height: 100px; +} |