diff options
Diffstat (limited to 'web/sass-files')
-rw-r--r-- | web/sass-files/sass/partials/_base.scss | 3 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_headers.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_markdown.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_modal.scss | 22 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 34 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_settings.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_sidebar--right.scss | 19 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_signup.scss | 55 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_tutorial.scss | 189 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_videos.scss | 5 | ||||
-rw-r--r-- | web/sass-files/sass/styles.scss | 1 |
11 files changed, 291 insertions, 49 deletions
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index c286927a2..2830026c9 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -133,9 +133,6 @@ a:focus, a:hover { &.no-resize { resize: none; } - &.min-height { - min-height: 100px; - } } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index feb392234..5c8313454 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -1,5 +1,6 @@ #channel-header { padding: 3px 0; + height: 58px; } .row { &.header { @@ -42,6 +43,9 @@ text-overflow: ellipsis; margin-top: 2px; max-height: 45px; + .markdown-inline-img { + max-height: 45px + } } &.popover { white-space: normal; diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss index 70c99f504..87e809694 100644 --- a/web/sass-files/sass/partials/_markdown.scss +++ b/web/sass-files/sass/partials/_markdown.scss @@ -8,6 +8,10 @@ margin-left: 4px; } } +.markdown-inline-img { + max-height: 500px; + height: 500px; +} .post-body { hr { height: 4px; diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 9314b4980..0333e0c65 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -149,6 +149,12 @@ @include opacity(0.8); margin: 5px 0; } + .profile-img { + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; + margin-right: 8px; + } .more-name { font-weight: 600; font-size: 0.95em; @@ -230,8 +236,8 @@ position: relative; &:hover .file-playback-controls.stop { - @include opacity(1); - } + @include opacity(1); + } } img { max-width: 100%; @@ -347,7 +353,7 @@ } } -.modal-direct-channels { +.more-modal { .user-list { margin-top: 10px; @@ -362,11 +368,12 @@ } .modal-body { - padding: 20px 0 0; + padding: 10px 0 0; @include clearfix; } .filter-row { + margin-top: 10px; padding: 0 15px; } @@ -379,11 +386,4 @@ .more-purpose { @include opacity(0.7); } - - .profile-img { - -moz-border-radius: 50px; - -webkit-border-radius: 50px; - border-radius: 50px; - margin-right: 8px; - } } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 8f353c401..339412b45 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -100,7 +100,7 @@ .date-separator, .new-separator { &.hovered--comment { &:before, &:after { - background: none; + background: none !important; } } } @@ -179,6 +179,15 @@ } @media screen and (max-width: 1140px) { + .tip-overlay { + &.tip-overlay--chat { + margin: -10px 0 0 -10px; + .arrow { + right: 15px; + left: auto; + } + } + } .inner__wrap { &.move--left { .file-overlay { @@ -266,6 +275,26 @@ } } @media screen and (max-width: 768px) { + .form-control { + &.min-height { + min-height: 100px; + } + } + .gif-div { + max-width: 100%; + } + .tip-div { + left: 15px; + right: auto; + } + .tip-overlay { + &.tip-overlay--chat { + margin-left: 10px; + .arrow { + left: 32px; + } + } + } .file-details__container { display: block; .file-details__preview { @@ -439,7 +468,7 @@ } } .settings-table { - .nav { + .nav, .nav.absolute { position: relative; top: auto; width: 100%; @@ -482,7 +511,6 @@ padding-bottom: 10px; display: table; width: 100%; - table-layout: fixed; .post-body__cell { display: table-cell; padding-left: 45px; diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index 174b7b21d..3be83ed2f 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -76,6 +76,10 @@ position: fixed; top: 57px; width: 179px; + &.absolute { + position: absolute; + top: 0; + } } .security-links { margin-right: 20px; diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss index c954b03d8..a4267294c 100644 --- a/web/sass-files/sass/partials/_sidebar--right.scss +++ b/web/sass-files/sass/partials/_sidebar--right.scss @@ -80,13 +80,18 @@ } .sidebar--right__subheader { font-size: 1em; - text-transform: uppercase; - color: #999; - font-weight: 400; - color: #888; - height: 44px; - line-height: 44px; - padding: 0 1em; + padding: 1em 1em 0; + h4 { + font-size: 1em; + } + ul { + @include opacity(0.7); + padding: 10px 0 0 30px; + } + li { + font-size: 0.95em; + padding-bottom: 10px; + } } } diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss index 14c676f82..b9486e254 100644 --- a/web/sass-files/sass/partials/_signup.scss +++ b/web/sass-files/sass/partials/_signup.scss @@ -314,32 +314,39 @@ } .signup-team-all { - width: 280px; - box-shadow: 3px 3px 1px #d5d5d5; - margin: 0px 0px 0px 5px; -} - -.signup-team-dir { - background: #fafafa; - border-bottom: 1px solid #d5d5d5; -} - -.signup-team-dir__group { - padding: 15px 10px 15px 10px; -} - -.signup-team-dir__name { - line-height: 1.3 !important; - font-size: 1.5em !important; - font-weight: 300 !important; + margin: 0 0 20px; + border: 1px solid #ddd; + @include border-radius(2px); + .signup-team-dir { + background: #fafafa; + border-top: 1px solid #d5d5d5; + &:first-child { + border: none; + } + a { + color: inherit; + display: block; + padding: 0 15px; + line-height: 3.5em; + height: 3.5em; + font-size: 1.1em; + } + } + .signup-team-dir__name { + white-space: nowrap; + float: left; + overflow: hidden; + text-overflow: ellipsis; + width: 90%; + } + .signup-team-dir__arrow { + float: right; + font-size: 0.9em; + color: #999; + line-height: 3.5em; + } } -.signup-team-dir__arrow { - float: right; - line-height: 1.3 !important; - font-size: 1.5em !important; - font-weight: 300 !important; -} .authorize-box { margin: 100px auto; diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss new file mode 100644 index 000000000..70216aa97 --- /dev/null +++ b/web/sass-files/sass/partials/_tutorial.scss @@ -0,0 +1,189 @@ +.tip-backdrop { + background: rgba(black, 0.5); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 999; +} + +.tip-overlay { + width: 350px; + max-width: 90%; + position:absolute; + background-color: #fff; + @include border-radius(3px); + padding: 20px; + z-index: 1000; + + .arrow { + border-width: 10px; + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + &.tip-overlay--sidebar { + max-width: 75%; + margin: 50px 0 0 10px; + .arrow { + top: 80px; + left: -10px; + margin-top: -10px; + border-left-width: 0; + border-right-color: #fff; + } + } + + &.tip-overlay--header { + margin: 10px 0 0 10px; + .arrow { + top: 15px; + left: -10px; + border-left-width: 0; + border-right-color: #fff; + } + } + + &.tip-overlay--chat { + margin-top: -10px; + .arrow { + left: 50%; + margin-left: -10px; + border-bottom-width: 0; + border-top-color: #fff; + bottom: -10px; + } + } + + h4 { + font-size: em(16px); + font-weight: 600; + margin: 5px 0 15px; + } + + p { + font-size: 13px; + line-height: 1.6; + + strong { + font-weight: 600; + } + + } + + .btn { + background: #cccccc; + color: #fff; + @include border-radius(3px); + border: none; + margin-bottom: 10px; + + &:hover, &:active, &:focus { + color: #fff; + border: none; + background: #bbb; + } + + } + + .tip-opt { + font-size: 12px; + + span { + @include opacity(0.5); + } + + } + + .tutorial__circles { + margin: 1.5em 0px -1.7em -4px; + + .circle { + width: 7px; + height: 7px; + margin: 0 4px; + &.active { + background: #000; + @include opacity(0.4); + } + + } + + } + +} + +.tip-button { + z-index: 998; + right: -10px; + top: -10px; + position: relative; + cursor: pointer; +} + +.tip-div { + position:absolute; + top:0px; + right:0px; + + &.tip-overlay--header { + top: 20px; + } + + &.tip-overlay--sidebar { + left: 0; + top: -9px; + } + +} + +.tutorial-steps__container { + text-align: center; + width: 100%; + display: table; + height: 100%; + .tutorial__content { + display: table-cell; + vertical-align: middle; + padding-bottom: 100px; + padding: 20px 40px 40px; + .tutorial__steps { + max-width: 310px; + min-height: 420px; + text-align: left; + display: inline-block; + } + } + h1 { + font-size: em(40px); + margin: -20px 0 30px; + font-weight: 600; + } + h3 { + font-size: em(24px); + margin-bottom: 30px; + font-weight: 600; + } +} + +.tutorial__circles { + margin: 2em 0; + .circle { + width: 9px; + height: 9px; + @include border-radius(9px); + @include opacity(0.2); + background: #000; + display: inline-block; + margin: 0 5px; + &.active { + background: $primary-color; + @include opacity(1); + } + } +}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss index f6999d15c..bcfc28f19 100644 --- a/web/sass-files/sass/partials/_videos.scss +++ b/web/sass-files/sass/partials/_videos.scss @@ -56,5 +56,8 @@ max-width: 450px; max-height: 500px; margin-bottom: 8px; - border-radius:5px + border-radius:5px; + &.placeholder { + height: 500px; + } } diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index ad2cae194..5c83d5c5b 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -38,6 +38,7 @@ @import "partials/loading"; @import "partials/get-link"; @import "partials/markdown"; +@import "partials/tutorial"; @import "partials/statistics"; // Responsive Css |