summaryrefslogtreecommitdiffstats
path: root/web/sass-files/sass/components/_files.scss
diff options
context:
space:
mode:
Diffstat (limited to 'web/sass-files/sass/components/_files.scss')
-rw-r--r--web/sass-files/sass/components/_files.scss293
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;
+}