summaryrefslogtreecommitdiffstats
path: root/web/sass-files
diff options
context:
space:
mode:
Diffstat (limited to 'web/sass-files')
-rw-r--r--web/sass-files/sass/partials/_command-box.scss1
-rw-r--r--web/sass-files/sass/partials/_files.scss39
-rw-r--r--web/sass-files/sass/partials/_modal.scss91
-rw-r--r--web/sass-files/sass/partials/_post.scss48
-rw-r--r--web/sass-files/sass/partials/_responsive.scss33
-rw-r--r--web/sass-files/sass/partials/_settings.scss14
-rw-r--r--web/sass-files/sass/partials/_videos.scss7
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
+}