diff options
Diffstat (limited to 'web/sass-files')
| -rw-r--r-- | web/sass-files/sass/partials/_base.scss | 38 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_post.scss | 3 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 22 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_tutorial.scss | 188 | ||||
| -rw-r--r-- | web/sass-files/sass/styles.scss | 1 |
5 files changed, 236 insertions, 16 deletions
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 635928fe3..c286927a2 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -9,29 +9,37 @@ body { position: relative; height: 100%; &.white { - background: #fff; - > .container-fluid { - overflow: auto; - } - .inner__wrap { - > .row.content { - min-height: 100%; - margin-bottom: -89px; + background: #fff; + > .container-fluid { + overflow: auto; + } + .inner__wrap { + > .row.content { + min-height: 100%; + margin-bottom: -89px; + } } - } } - .inner__wrap { +} + +.inner__wrap { height: 100%; > .row.main { - height: 100%; - position: relative; + height: 100%; + position: relative; } - } - > .container-fluid { +} + +.container-fluid { + @include clearfix; + height: 100%; + position: relative; +} + +.channel-view { @include clearfix; height: 100%; position: relative; - } } img { diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 7709e17f3..e11f9b640 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -441,7 +441,10 @@ body.ios { &.post-profile-img__container { float: left; .post-profile-img { + width: 36px; + height: 36px; margin-right: 10px; + vertical-align: inherit; @include border-radius(50px); } } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 8f353c401..a49a98952 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -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,18 @@ } } @media screen and (max-width: 768px) { + .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 { @@ -482,7 +503,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/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss new file mode 100644 index 000000000..42183d599 --- /dev/null +++ b/web/sass-files/sass/partials/_tutorial.scss @@ -0,0 +1,188 @@ +.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; + .tutorial__content { + display: table-cell; + vertical-align: middle; + padding-bottom: 100px; + padding: 0 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.1); + 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/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 |