diff options
Diffstat (limited to 'web/sass-files/sass')
-rw-r--r-- | web/sass-files/sass/partials/_base.scss | 22 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_files.scss | 6 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_headers.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_loading.scss | 68 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_mentions.scss | 2 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_modal.scss | 13 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 49 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post_right.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 80 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_search.scss | 2 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_settings.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_sidebar--left.scss | 3 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_sidebar--right.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/styles.scss | 1 |
14 files changed, 196 insertions, 66 deletions
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 5808aeb44..cf28e44e8 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -3,7 +3,7 @@ html, body { } body { - font-family: 'Lato', sans-serif; + font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; background: #e9e9e9; position: relative; @@ -11,21 +11,29 @@ body { &.white { background: #fff; .inner__wrap { - height: 100%; + > .row.content { + min-height: 100%; + margin-bottom: -89px; + } } - .row.content { - min-height: 100%; - height: auto !important; + } + .inner__wrap { + height: 100%; + > .row.main { height: 100%; - margin-bottom: -89px; } } > .container-fluid { @include clearfix; + height: 100%; position: relative; } } +b, strong { + font-weight: 600; +} + a { word-break: break-word; } @@ -142,7 +150,7 @@ div.theme { top: 0; color: #FFF; font-size: 20px; - font-weight: bold; + font-weight: 600; text-decoration: none; padding: 0 10px; } diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index b01d2e157..1268d8a07 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -13,6 +13,7 @@ vertical-align: top; position: relative; border: 1px solid #DDD; + @include clearfix; &.custom-file { width: 85px; height: 100px; @@ -31,8 +32,8 @@ } } .preview-img { - width:100%; - height:100%; + height: auto; + max-width: 100%; } .remove-preview { position: absolute; @@ -136,6 +137,7 @@ border: 1px solid #E2E2E2; background-color: #FFF; background-repeat: no-repeat; + background-position: left center; } a { text-decoration: none; diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index 89bbaef2b..1ec1109a5 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -65,7 +65,7 @@ float:left; } .channel-intro-title { - font-weight:bold; + font-weight:600; } .channel-intro-text { margin-top:35px; @@ -88,7 +88,7 @@ } .dropdown-menu { li a { - padding: 3 20px; + padding: 3px 20px; color: #555; } } diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss new file mode 100644 index 000000000..185a42180 --- /dev/null +++ b/web/sass-files/sass/partials/_loading.scss @@ -0,0 +1,68 @@ +.loading-screen { + display: table; + width: 100%; + height: 100%; + position: absolute; + @include box-sizing(border-box); + text-align: center; + .loading__content { + display: table-cell; + vertical-align: middle; + h3 { + font-weight: 400; + margin: 0 0.2em 0; + display: inline-block; + } + } +} + +.loading-screen { + .loading__content { + .round { + background-color: #444; + width: 4px; + height: 4px; + display: inline-block; + margin: 0 1px; + opacity: 0.1; + @include border-radius(10px); + -moz-animation: move 0.75s infinite linear; + -webkit-animation: move 0.75s infinite linear; + } + + #round_1 { + -moz-animation-delay: .2s; + -webkit-animation-delay: .2s; + } + + #round_2 { + -moz-animation-delay: .4s; + -webkit-animation-delay: .4s; + } + + #round_3 { + -moz-animation-delay: .6s; + -webkit-animation-delay: .6s; + } + + @-moz-keyframes move { + 0% { + opacity: 1; + } + + 100% { + opacity: 0.1; + }; + } + + @-webkit-keyframes move { + 0% { + opacity: 1; + } + + 100% { + opacity: 0.1; + }; + } + } +} diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss index ee254b546..d6e2ab368 100644 --- a/web/sass-files/sass/partials/_mentions.scss +++ b/web/sass-files/sass/partials/_mentions.scss @@ -9,7 +9,7 @@ .mentions--top { position: absolute; - z-index: 1040; + z-index: 1060; .mentions-box { position:absolute; background-color:#fff; diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 4427cb7dd..637f908ca 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -2,13 +2,14 @@ padding: 20px 15px; } .modal { + width: 100%; &.image_modal { .modal-backdrop.in { @include opacity(0.7); } } .info__label { - font-weight: bold; + font-weight: 600; text-align: right; padding-right: 0; } @@ -21,7 +22,6 @@ margin-right: auto; } .modal-body { - max-height: 75%; overflow: auto; } .modal-push-down { @@ -66,7 +66,6 @@ } } .btn { - margin-right: 10px; &.btn-primary { float: right; margin-top: -4px; @@ -120,7 +119,7 @@ } .more-channel-name { color: #444; - font-weight: bold; + font-weight: 600; font-size: 0.95em; } tbody { @@ -145,11 +144,12 @@ .modal-image { position:relative; width:100%; + height: 100%; margin: 0 auto; .image-wrapper { background: #FFF; position: relative; - max-width: 80%; + max-width: 90%; min-width: 280px; @include border-radius(3px); display: table; @@ -262,6 +262,9 @@ color:white; margin-left:5px; } + .public-link { + margin-right: 5px; + } } } } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 745d50173..f33cedd16 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -63,13 +63,13 @@ body.ios { } &.hovered--after { &:before { - background: #f6f6f6; + background: #f5f5f5; display: block; } } &.hovered--before { &:after { - background: #f6f6f6; + background: #f5f5f5; display: block; } } @@ -86,10 +86,11 @@ body.ios { background: #FFF; display: inline-block; padding: 0 1em; - font-weight: 900; + font-weight: 700; @include border-radius(50px); position: relative; z-index: 5; + font-size: 13px; } } .new-separator { @@ -165,7 +166,7 @@ body.ios { color: #999; @include single-transition(all, 0.15s); font-size: 16px; - padding: 9px; + padding: 7px 9px 6px; &:hover, &:active { color: #444; box-shadow: none; @@ -191,7 +192,7 @@ body.ios { .post { word-wrap: break-word; - padding: 0.4em 1em; + padding: 8px 1em; position: relative; max-width: 100%; @include legacy-pie-clearfix; @@ -201,14 +202,36 @@ body.ios { @include opacity(1); } } - background: #f6f6f6; + background: #f5f5f5; + } + &.current--user { + .post-body { + @include border-radius(4px); + background: #f5f5f5; + } } &.post--comment { &.other--root { .post-comment { border-left: 4px solid #EEE; - margin-left: 30px; - padding: 2px 0 2px 10px; + padding: 4px 0 6px 10px; + margin: 0 0 0 30px; + @include border-radius(0 4px 4px 0); + } + .post-body { + background: transparent; + margin: 0; + padding: 1px 0px; + } + &.current--user { + .post-comment { + background: #f5f5f5; + } + } + } + &.same--root { + .post-body { + @include border-radius(0 4px 4px 0); } } } @@ -217,6 +240,7 @@ body.ios { @include opacity(0); } div.post-profile-img__container { + height: 1px; .post-profile-img { visibility: hidden; } @@ -249,9 +273,11 @@ body.ios { } p { margin: 0 0 5px; + font-size: 0.97em; white-space: pre-wrap; } .comment-icon__container { + margin-left: 7px; fill: $primary-color; .comment-icon { display: inline-block; @@ -269,7 +295,7 @@ body.ios { float: left; .post-profile-img { margin-right: 10px; - @include border-radius(3px); + @include border-radius(50px); } } &.post__content { @@ -290,6 +316,8 @@ body.ios { width: 600px; float: left; word-wrap: break-word; + padding: 0.3em 0.5em 0.1em; + margin: -0.3em 0 0; .post-link { @include clearfix; text-overflow: ellipsis; @@ -336,7 +364,6 @@ body.ios { } .dropdown { min-width: 18px; - margin-right: 7px; display: inline-block; @include opacity(0); } @@ -359,7 +386,7 @@ body.ios { .embed-title { margin: 3px 0 1px; color: #555; - font-weight: bold; + font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index 972aef29b..0d3e75689 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -11,7 +11,8 @@ .post { &.post--root { - padding: 1em; + padding: 1em 1em 0; + margin: 1em 0; hr { border-color: #DDD; margin: 1em 0 0 0; @@ -20,6 +21,7 @@ } .post-create__container { + margin-top: 1em; .custom-textarea { min-height: 100px; } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 25533c770..1a2befc3f 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -2,13 +2,6 @@ .inner__wrap { &.move--left { .post { - &.post--comment { - &.other--root { - .post-comment { - margin-left: 0; - } - } - } &.same--root { margin-left: 60px; padding-left: 10px; @@ -22,11 +15,27 @@ width: 825px; } .post-body { - padding-left: 0; + width: 736px; border: none; - margin: 0; + margin: 3px 0 0; } } + &.post--comment { + &.other--root { + .post-comment { + margin-left: 0; + } + } + &.same--root { + margin-top: 10px; + margin-bottom: 10px; + } + } + .post-body { + float: none; + width: 750px; + margin: 3px 0 0; + } .post__content { width: 920px; } @@ -63,10 +72,6 @@ } } } - .post-body { - float: none; - width: 750px; - } } } } @@ -78,13 +83,6 @@ } } .post { - &.post--comment { - &.other--root { - .post-comment { - margin-left: 0; - } - } - } &.same--root { margin-left: 60px; padding-left: 10px; @@ -98,9 +96,20 @@ width: 825px; } .post-body { - padding-left: 0; + width: 736px; border: none; - margin: 0; + margin: 3px 0 0; + } + } + &.post--comment { + &.other--root { + .post-comment { + margin-left: 0; + } + } + &.same--root { + margin-top: 5px; + margin-bottom: 5px; } } .post__content { @@ -135,6 +144,7 @@ } } .post-body { + margin: 3px 0 0; float: none; width: 750px; } @@ -163,16 +173,9 @@ @media screen and (max-width: 960px) { .post { - &:hover { - .post-header .post-header-col.post-header__reply { - .comment-icon__container__hide { - @include opacity(0); - } - } - } .post-header .post-header-col.post-header__reply { .comment-icon__container__hide { - @include opacity(0); + display: none; } .dropdown { @include opacity(1); @@ -205,12 +208,16 @@ @media screen and (max-width: 768px) { #post-list { - .date-seperator { + .date-seperator, .new-separator { &.hovered--after { - background: none; + &:before { + background: none; + } } &.hovered--before { - background: none; + &:after { + background: none; + } } } } @@ -221,6 +228,13 @@ &:hover { background: none; } + &.post--comment { + &.other--root { + &:hover { + background: none; + } + } + } } .signup-team__container { padding: 30px 0; diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss index ca5d25720..8d51d00c0 100644 --- a/web/sass-files/sass/partials/_search.scss +++ b/web/sass-files/sass/partials/_search.scss @@ -77,7 +77,7 @@ border: none; } .search-channel__name { - font-weight: bold; + font-weight: 600; margin: 0 0 10px 0; } } diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index dbaab8b58..af759c650 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -56,7 +56,7 @@ .section-title { margin-bottom: 5px; - font-weight: bold; + font-weight: 600; } .section-edit { @@ -172,7 +172,7 @@ border-top:1px solid lightgrey; } .post-profile-img { - @include border-radius(3px); + @include border-radius(50px); margin-right: 8px; } .member-name { diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index b1dd470d2..89d1ff416 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -59,7 +59,7 @@ color: #999; &.unread-title { color: #333; - font-weight: bold; + font-weight: 600; } &:hover, &:focus { background: #e6f2fa; @@ -70,6 +70,7 @@ color: #111; background-color: #e1e1e1; border-radius: 0; + font-weight: 400; } } } diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss index d6000a515..7a91caec9 100644 --- a/web/sass-files/sass/partials/_sidebar--right.scss +++ b/web/sass-files/sass/partials/_sidebar--right.scss @@ -23,8 +23,12 @@ } } } + .post-body { + margin: 3px 0 0; + } } .post-create__container { + margin-top: 10px; .post-create-footer { padding-top: 10px; } diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index 8446f1c01..9cc26320c 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -29,6 +29,7 @@ @import "partials/modal"; @import "partials/mentions"; @import "partials/error"; +@import "partials/loading"; // Responsive Css @import "partials/responsive"; |