diff options
Diffstat (limited to 'web/sass-files/sass')
-rw-r--r-- | web/sass-files/sass/partials/_command-box.scss | 1 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_files.scss | 39 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_modal.scss | 91 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 48 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 33 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_settings.scss | 14 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_videos.scss | 7 |
7 files changed, 167 insertions, 66 deletions
diff --git a/web/sass-files/sass/partials/_command-box.scss b/web/sass-files/sass/partials/_command-box.scss index f1aa4dca2..184fb55eb 100644 --- a/web/sass-files/sass/partials/_command-box.scss +++ b/web/sass-files/sass/partials/_command-box.scss @@ -5,6 +5,7 @@ border: $border-gray; bottom: 38px; overflow: auto; + z-index: 100; @extend %popover-box-shadow; .sidebar--right & { bottom: 100px; diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 01057423d..d3ab3b9f8 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -133,12 +133,34 @@ 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; @@ -215,3 +237,20 @@ } } } + +.file-playback-controls { + position: absolute; + right: 5px; + bottom: 0; + font-size: 22px; + cursor: pointer; + z-index: 2; + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + -o-transition: opacity 0.6s; + transition: opacity 0.6s; + + &.stop { + @include opacity(0); + } +} diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index b942a5a40..1dcdbf348 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -140,7 +140,7 @@ padding: 0; } } - .more-channel-table { + .more-table { margin: 0; table-layout: fixed; p { @@ -150,9 +150,11 @@ @include opacity(0.8); margin: 5px 0; } - .more-channel-name { + .more-name { font-weight: 600; font-size: 0.95em; + overflow: hidden; + text-overflow: ellipsis; } tbody { > tr { @@ -175,6 +177,9 @@ padding: 8px 15px 8px 8px; width: 80px; vertical-align: middle; + &.lg { + width: 110px; + } } } } @@ -189,7 +194,7 @@ position: relative; max-width: 90%; min-height: 100px; - min-width: 240px; + min-width: 320px; @include border-radius(3px); display: table; margin: 0 auto; @@ -223,11 +228,24 @@ background: #FFF; display: table-cell; vertical-align: middle; + position: relative; + + &:hover .file-playback-controls.stop { + @include opacity(1); + } } img { max-width: 100%; max-height: 100%; } + .spinner.file__loading { + z-index: 2; + position: absolute; + left: 50%; + margin-left: -16px; + top: 50%; + margin-top: -16px; + } } .modal-content{ box-shadow: none; @@ -331,47 +349,42 @@ } .modal-direct-channels { - .user-list { - list-style-type: none; - margin: 15px 0px 0px; - max-height: 600px; - padding: 0px; - overflow: auto; - li { - border-bottom: 1px solid #ddd; - height: 60px; - padding: 10px 0px; + .user-list { + margin-top: 10px; + overflow: auto; + -webkit-overflow-scrolling: touch; + max-height: 500px; + position: relative; + } - .image-div { - padding: 0px; + .table { + margin-top: 10px; + } - .profile-image { - width: 40px; - height: 40px; - @include border-radius(20px); - } - } + .modal-body { + padding: 20px 0 0; + @include clearfix; + } - .username { - font-weight: bold; - } + .filter-row { + padding: 0 15px; + } - .nickname { - color: #888; - } + .member-count { + margin-top: 5px; + float: right; + @include opacity(0.8); + } - .btn-div { - padding: 0px; - .btn-message { - position: relative; - top: 5px; - } - } + .more-description { + @include opacity(0.7); + } - &:last-child { - border-bottom: 0px; - } - } - } + .profile-img { + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; + margin-right: 8px; + } } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 0f3cc0ef6..6ecc0d965 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -119,20 +119,52 @@ body.ios { background-color: rgba(0, 0, 0, 0.6); text-align: center; color: #FFF; - display: table; - font-size: 1.7em; + font-size: em(20px); font-weight: 600; z-index: 6; - > div { - display: table-cell; - vertical-align: middle; + &.right-file-overlay { + font-size: em(18px); + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } } - .fa { + .overlay__circle { + background: #111; + background: rgba(black, 0.7); + width: 370px; + height: 370px; + margin: -185px 0 0 -185px; + @include border-radius(500px); + position: absolute; + top: 50%; + left: 50%; + } + + .overlay__files { display: block; - font-size: 2em; - margin: 0 0 0.3em; + margin: 75px auto 20px; + } + + .overlay__logo { + position: absolute; + left: 50%; + bottom: 30px; + margin-left: -50px; + @include opacity(0.3); + } + + .fa { + display: inline-block; + font-size: 1.1em; + margin-right: 8px; } } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 09f2c179e..c8bb24f3a 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -199,9 +199,6 @@ } @media screen and (max-width: 960px) { - .center-file-overlay { - font-size: 1.5em; - } .post { .post-header .post-header-col.post-header__reply { .comment-icon__container__hide { @@ -267,11 +264,28 @@ } } .file-details { + width: 100%; height: auto; } } - .center-file-overlay { - font-size: 1.3em; + .modal-direct-channels { + .member-count { + float: none; + margin-top: 10px; + display: block; + } + } + .file-overlay { + font-size: em(18px); + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } } .date-separator, .new-separator { &.hovered--after { @@ -631,6 +645,9 @@ } &.has-close { .btn-close { + width: 40px; + text-align: center; + right: 0; display: block; @include opacity(0.5); } @@ -690,7 +707,7 @@ .modal-image { .image-wrapper { font-size: 12px; - min-width: 280px; + min-width: 250px; .modal-close { @include opacity(1); } @@ -741,6 +758,10 @@ .post-comments { padding: 9px 21px 10px 10px !important; } + + .post-image__column .post__image .file-playback-controls.stop, .image-wrapper > a .file-playback-controls.stop { + @include opacity(1); + } } @media screen and (max-width: 640px) { .access-history__table { diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index 0c2f25eab..bc53dc0e4 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -103,6 +103,9 @@ text-overflow: ellipsis; margin-bottom: 0; } + .input-group-addon { + background: transparent; + } .radio { label { font-weight: 600; @@ -230,13 +233,6 @@ font-weight:500; } -.profile-img { - width:128px; - height:128px; - margin-bottom: 10px; - @include border-radius(128px); -} - .sel-btn { margin-right:5px; } @@ -298,3 +294,7 @@ .color-btn { margin:4px; } + +.no-resize { + resize:none; +} diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss index 9e1ce29b7..6ae5b488b 100644 --- a/web/sass-files/sass/partials/_videos.scss +++ b/web/sass-files/sass/partials/_videos.scss @@ -26,11 +26,6 @@ padding:0px; } -.video-uploader { - font-size: 13px; - margin: 0 0 15px; -} - .video-title { font-size:15px; margin-top:3px; @@ -54,4 +49,4 @@ border-top:36px solid transparent; border-bottom:36px solid transparent; border-left:60px solid rgba(255,255,255,0.4); -}
\ No newline at end of file +} |