From cc453a048d50e57802bab9363b59c2189143b784 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 8 Mar 2016 15:07:43 +0500 Subject: Multiple UI Improvements --- web/sass-files/sass/partials/_base.scss | 30 ++ web/sass-files/sass/partials/_modal.scss | 2 +- web/sass-files/sass/partials/_post.scss | 35 +- web/sass-files/sass/partials/_post_right.scss | 6 + web/sass-files/sass/partials/_responsive.scss | 186 ++++---- web/sass-files/sass/partials/_settings.scss | 599 +++++++++++++------------- 6 files changed, 464 insertions(+), 394 deletions(-) (limited to 'web/sass-files') diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index ee6a6b955..4dcf0ff85 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -224,3 +224,33 @@ a:focus, a:hover { margin-bottom: 0.25em; background-size: contain; } + + +// Scrollbar Css + +::-webkit-scrollbar +{ + width: 8px; /* for vertical scrollbars */ + height: 8px; /* for horizontal scrollbars */ +} + +::-webkit-scrollbar-track +{ + background: rgba(0, 0, 0, 0.1); +} + +::-webkit-scrollbar-thumb +{ + @include border-radius(5px); + background: rgba(0, 0, 0, 0.4); +} + +body{ + scrollbar-face-color: rgba(0, 0, 0, 0.1); + scrollbar-shadow-color: #2D2C4D; + scrollbar-highlight-color:#7D7E94; + scrollbar-3dlight-color: #7D7E94; + scrollbar-darkshadow-color: #2D2C4D; + scrollbar-track-color: rgba(0, 0, 0, 0.1); + scrollbar-arrow-color: #C1C1D1; +} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index ca83c77da..ea41d9e09 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -49,7 +49,7 @@ width: 100%; @include legacy-pie-clearfix; text-overflow: ellipsis; - padding: 8px 8px 8px 15px; + padding: 8px 15px; &.padding--equal { padding: 8px; } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 4478b3f15..39cebe856 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -58,22 +58,37 @@ body.ios { box-shadow: none; white-space: normal; } - .textbox-preview-link, .textbox-help-link { + .textbox-help-link { position: absolute; z-index: 3; bottom: -23px; font-size: 13px; cursor: pointer; } - .textbox-preview-link { - right: 45px; - } .textbox-help-link { right: 0; } min-height:36px; } +.help_format_text { + position: absolute; + bottom: -23px; + right: 40px; + font-size: 0.85em; + @include opacity(0); + @include single-transition(all 0.2s ease); + + b, i, code { + margin-right: 3px; + } + .textbox-preview-link{ + font-size: 13px; + cursor: pointer; + margin-left: 15px; + } +} + .date-separator, .new-separator { text-align: center; height: 2em; @@ -709,6 +724,12 @@ body.ios { margin-top: 1.4em; } + li { + > p { + margin-top: 10px; + } + } + img { max-height: 400px; } @@ -765,14 +786,12 @@ body.ios { .post__embed-visibility { cursor: pointer; - display: block; font: normal normal normal 14px/1 FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: 0; - width: 30px; - margin-top: -5px; + margin: 5px 0 10px; + display: inline-block; &:hover{ text-decoration: none; diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index 2b48fd2c2..5df6fdc01 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -22,6 +22,12 @@ } + + .help_format_text { + bottom: -63px; + right: auto; + } + .post { &.post--root { diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 0f978a806..a9a572768 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -98,8 +98,6 @@ .post { - background: none !important; - .post__dropdown { line-height: 9px; text-decoration: none; @@ -120,9 +118,9 @@ visibility: visible; display: none; - &.icon--show { - display: inline-block; - } + &.icon--show { + display: inline-block; + } } @@ -310,6 +308,11 @@ } } } + .row--invite { + .col-sm-6 { + padding: 0; + } + } .modal { .info__label { text-align: left; @@ -319,6 +322,10 @@ .modal-action { margin-top: 10px; } + button.close { + font-weight: normal; + font-size: 27px; + } .modal-title { float: none; max-width: 90%; @@ -332,95 +339,89 @@ } } } - } - .row--invite { - .col-sm-6 { - padding: 0; - } - } - .settings-modal { - &.display--content { - .modal-header { - display: none; - } - .settings-table { - display: block; - .settings-content { - &.minimize-settings { - display: block; - } - .section-min:hover { - background: none; - } - .no-padding--left { - padding-left: 15px; - } - } - .settings-links { + .settings-modal { + &.display--content { + .modal-header { display: none; } - .modal-header { + .settings-table { display: block; - position: absolute; - top: 0; - width: 100%; - z-index: 5; - } - .modal-title { - padding-left: 20px; - } - .user-settings { - .tab-header { - display: none; + .settings-content { + &.minimize-settings { + display: block; + } + .section-min:hover { + background: none; + } + .no-padding--left { + padding-left: 15px; + } } - .divider-dark.first { + .settings-links { display: none; } + .modal-header { + display: block; + position: absolute; + top: 0; + width: 100%; + z-index: 5; + .modal-title { + width: 100%; + text-align: center; + } + } + .user-settings { + .tab-header { + display: none; + } + .divider-dark.first { + display: none; + } + } } } - } - .settings-table { - .nav { - &.position--top { + .settings-table { + padding: 0; + .nav { + &.position--top { + top: auto; + } + position: relative; top: auto; + width: 100%; } - position: relative; - top: auto; - width: 100%; - } - .settings-content { - .section-edit { - position: absolute; - top: 14px; - right: 0; - padding-right: 0; - .fa { - display: inline-block; + .settings-content { + .section-edit { + position: absolute; + top: 14px; + right: 0; + padding-right: 0; + .fa { + display: inline-block; + } } - } - &.minimize-settings { - padding: 0; - display: none; - .user-settings { - padding: 70px 20px 30px; + &.minimize-settings { + padding: 0; + display: none; + .user-settings { + padding: 70px 20px 30px; + } + } + .section-min:hover { + background: none !important; } } - .section-min:hover { - background: none !important; - } - } - .settings-links { - background: #fff; - } - .nav { - > li { - > a { - border-top: 1px solid #ddd; - font-size: 1.1em; - line-height: 2.7; - color: #555; - .glyphicon { - margin-left: 7px; + .nav { + > li { + > a { + border-top: 1px solid #ddd; + font-size: 1.1em; + line-height: 2.7; + color: #555; + .glyphicon { + margin-left: 7px; + } } } } @@ -572,7 +573,8 @@ .glyphicon-refresh-animate { right: 33px; top: 15px; - color: #aaa; + color: #fff; + color: rgba(255,255,255,0.5); } .form-control { border: none; @@ -800,22 +802,24 @@ } } @media screen and (max-width: 480px) { - .settings-modal { + .modal { + .settings-modal { - .settings-table { + .settings-table { - .security-links { - margin-bottom: 10px; - display: block; + .security-links { + margin-bottom: 10px; + display: block; + + &:last-child { + margin-bottom: 0; + } - &:last-child { - margin-bottom: 0; } } - } - + } } .tip-overlay.tip-overlay--sidebar { diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index 99b564fe5..6574dd927 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -12,358 +12,369 @@ } } -.settings-modal { - width:800px; - max-width: 100%; - .modal-content { - width:800px; - max-width: 100%; - } - .modal-back { - width: 40px; - height: 56px; - background: url("../images/arrow-left.png") no-repeat; - @include background-size(8px 13px); - background-position: center; - top: 0; - left: 0; - cursor: pointer; - position: absolute; - } - .modal-body { - padding: 0; - } - li { - list-style: none; - } - label { - font-weight: 600; - } - - .no-padding--left { - padding-left: 0; - } - .padding-top { - padding-top: 7px; - &.x2 { - padding-top: 14px; - } - &.x3 { - padding-top: 21px; +.modal { + .settings-modal { + width: 800px; + .modal-back { + width: 50px; + height: 40px; + top: 12px; + font-size: 27px; + font-weight: normal; + line-height: 32px; + position: absolute; + left: 0; + text-align: center; + .fa { + line-height: inherit; + position: absolute; + width: 100%; + height: 100%; + left: 0; + } } - } - .padding-bottom { - padding-bottom: 7px; - &.x2 { - padding-bottom: 14px; + .modal-body { + padding: 0; + margin: 0 auto; + min-height: calc(100% - 62px); } - &.x3 { - padding-bottom: 21px; + li { + list-style: none; } - .control-label { + label { font-weight: 600; - &.text-left { - text-align: left; - } } - } - .profile-img { - width: 128px; - height: 128px; - } - .settings-table { - display: table; - table-layout: fixed; - width: 100%; - > div { - display: table-cell; - vertical-align: top; + + .no-padding--left { + padding-left: 0; } - .nav { - position: fixed; - width: 179px; - &.position--top { - top: 57px; + .padding-top { + padding-top: 7px; + &.x2 { + padding-top: 14px; + } + &.x3 { + padding-top: 21px; } } - .security-links { - margin-right: 20px; - .fa { - margin-right: 6px; + .padding-bottom { + padding-bottom: 7px; + &.x2 { + padding-bottom: 14px; + } + &.x3 { + padding-bottom: 21px; + } + .control-label { + font-weight: 600; + &.text-left { + text-align: left; + } } } - .settings-links { - width: 180px; - background: #FAFAFA; - border-right: 1px solid #DDD; + .profile-img { + width: 128px; + height: 128px; } - .settings-content { - padding: 0px 20px 30px; - .modal-header { - display: none; + .settings-table { + max-width: 1000px; + margin: 0 auto; + display: table; + table-layout: fixed; + width: 100%; + > div { + display: table-cell; + vertical-align: top; } - .section-min { - padding: 1em 0; - margin-bottom: 0; - cursor: pointer; - position: relative; - @include clearfix; - &:hover { - background: #f9f9f9; - } - &:hover .fa { - display: inline-block; - } - &:hover .section-edit { - text-decoration: underline; + .nav { + position: fixed; + width: 179px; + &.position--top { + top: 57px; } } - - .section-max { - background: rgba(black, 0.05); - padding: 1em 0 1.3em; - margin-bottom: 0; - @include clearfix; - .section-title { - margin-bottom: 10px; + .security-links { + margin-right: 20px; + .fa { + margin-right: 6px; } } - - .appearance-section { - .theme-group { - .input-group-addon { - padding: 4px 5px; - width: 40px; - } - img { - border: 1px solid rgba(black, 0.15); - width: 29px; - } + .settings-links { + width: 180px; + } + .settings-content { + padding: 0px 20px 30px; + .modal-header { + display: none; } - .group--code { - select { - padding-right: 25px; + .section-min { + padding: 1em 0; + margin-bottom: 0; + cursor: pointer; + position: relative; + @include clearfix; + &:hover { + background: #f9f9f9; } - select::-ms-expand { - display: none; - } - &:before { - pointer-events: none; - position: absolute; - top: 11px; - right: 50px; - z-index: 5; - content: "\f0d7"; + &:hover .fa { display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } - select { - -moz-appearance:none; - -webkit-appearance:none; - appearance:none; - } - } - .premade-themes { - margin-bottom: 10px; - .theme-label { - font-weight: 400; - margin-top: 5px; - } - img { - border: 3px solid transparent; + &:hover .section-edit { + text-decoration: underline; + } } - .active { - img { - border-color: $primary-color; + + .section-max { + background: rgba(black, 0.05); + padding: 1em 0 1.3em; + margin-bottom: 0; + @include clearfix; + .section-title { + margin-bottom: 10px; } } - } - .theme-elements { - padding-left:15px; + .appearance-section { + .theme-group { + .input-group-addon { + padding: 4px 5px; + width: 40px; + } + img { + border: 1px solid rgba(black, 0.15); + width: 29px; + } + } + .group--code { + select { + padding-right: 25px; + } + select::-ms-expand { + display: none; + } + &:before { + pointer-events: none; + position: absolute; + top: 11px; + right: 50px; + z-index: 5; + content: "\f0d7"; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + select { + -moz-appearance:none; + -webkit-appearance:none; + appearance:none; + } + } + .premade-themes { + margin-bottom: 10px; + .theme-label { + font-weight: 400; + margin-top: 5px; + } + img { + border: 3px solid transparent; + } + .active { + img { + border-color: $primary-color; + } + } + } - .element { - margin-right:10px; + .theme-elements { + padding-left:15px; - &:nth-child(2n) { - margin-right: 0; - } + .element { + margin-right:10px; - } - } + &:nth-child(2n) { + margin-right: 0; + } - .theme-elements__header { - margin: 10px 20px 0px 0; - border-bottom: 1px solid #ccc; - padding: 5px 0 10px; - font-size: em(13.5px); - font-weight: 600; - cursor: pointer; + } + } - .fa-minus { - display: none; - } + .theme-elements__header { + margin: 10px 20px 0px 0; + border-bottom: 1px solid #ccc; + padding: 5px 0 10px; + font-size: em(13.5px); + font-weight: 600; + cursor: pointer; + + .fa-minus { + display: none; + } + + &.open { + .fa-minus { + display: inline-block; + } + .fa-plus { + display: none; + } + } + + .header__icon { + float: right; + @include opacity(0.5); + } - &.open { - .fa-minus { - display: inline-block; } - .fa-plus { + + .theme-elements__body { + padding-top: 5px; display: none; + @include legacy-pie-clearfix; + background: rgba(255, 255, 255, 0.05); + padding: 20px 0 0 20px; + margin: 0 20px 0 0; + @include border-radius(0 0 3px 3px); } - } - .header__icon { - float: right; - @include opacity(0.5); + .custom-label { + white-space: nowrap; + font-weight: normal; + font-size: 12px; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 0; + } + .input-group-addon { + background: transparent; + } + .radio { + label { + font-weight: 600; + } + } } - } - - .theme-elements__body { - padding-top: 5px; - display: none; - @include legacy-pie-clearfix; - background: rgba(255, 255, 255, 0.05); - padding: 20px 0 0 20px; - margin: 0 20px 0 0; - @include border-radius(0 0 3px 3px); - } - - .custom-label { - white-space: nowrap; - font-weight: normal; - font-size: 12px; - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - margin-bottom: 0; - } - .input-group-addon { - background: transparent; - } - .radio { - label { + .section-title { + margin-bottom: 5px; font-weight: 600; + padding-right: 50px; } - } - } - .section-title { - margin-bottom: 5px; - font-weight: 600; - padding-right: 50px; - } + .section-edit { + text-align: right; + margin-bottom: 5px; + .fa { + margin-right: 5px; + font-size: 12px; + @include opacity(0.5); + display: none; + &.fa-chevron-down { + top: -1px; + margin-right: 0; + position: relative; + } + } + } - .section-edit { - text-align: right; - margin-bottom: 5px; - .fa { - margin-right: 5px; - font-size: 12px; - @include opacity(0.5); - display: none; - } - } + .section-describe { + @include opacity(0.7); + white-space:pre; + @include clearfix; + text-overflow: ellipsis; + } - .section-describe { - @include opacity(0.7); - white-space:pre; - @include clearfix; - text-overflow: ellipsis; - } + .divider-dark { + border-bottom:1px solid #aaaaaa; + } - .divider-dark { - border-bottom:1px solid #aaaaaa; - } + .divider-light { + border-bottom:1px solid lightgrey; + } - .divider-light { - border-bottom:1px solid lightgrey; - } + .setting-list { + padding: 0; + list-style-type:none; + } - .setting-list { - padding: 0; - list-style-type:none; - } + .setting-list__hint { + margin-top: 20px; + } - .setting-list__hint { - margin-top: 20px; - } + .mentions-input { + margin-top: 10px; + } - .mentions-input { - margin-top: 10px; - } + .setting-list-item { + margin-top:7px; + } + .has-error { + color: #a94442; + } - .setting-list-item { - margin-top:7px; - } - .has-error { - color: #a94442; - } + .file-status { + font-size: 13px; + margin-top: 8px; + color: #555; + } - .file-status { - font-size: 13px; - margin-top: 8px; - color: #555; - } + .confirm-import { + padding: 4px 10px; + margin: 10px 0; + } - .confirm-import { - padding: 4px 10px; - margin: 10px 0; + } } - } -} -.nav-pills { - > li { - margin: 0; - a { - border-radius: 0; - color: #777; - } - .glyphicon { - width: 25px; - top: 2px; - } - &:hover { + .nav-pills { + > li { + margin: 0; a { - background: #E6F2FA; + padding: 8px 5px 8px 15px; + border-radius: 0; + color: #777; } - } - &.active { - a { - color: #111; - background-color: #E1E1E1; - &:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 5px; - height: 100%; - background: #000; + .glyphicon { + width: 25px; + top: 2px; + } + &:hover { + a { + background-color: rgba(black, 0.1); } } - a, a:hover, a:focus { - padding-right: 10px; - background-color: rgba(black, 0.1); - border-radius: 0; - font-weight: 400; - position: relative; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + &.active { + a { + color: #111; + background-color: #E1E1E1; + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background: #000; + } + } + a, a:hover, a:focus { + background-color: rgba(black, 0.1); + border-radius: 0; + font-weight: 400; + position: relative; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } } } -} -h3 { - font-size: em(20px); -} + h3 { + font-size: em(20px); + } } .channel-settings { -- cgit v1.2.3-1-g7c22