From e4a15076f458be1416de25b2c45578975b914de5 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Wed, 23 Sep 2015 10:12:40 -0400 Subject: Implement UI theme colors. --- web/sass-files/sass/partials/_base.scss | 7 +- web/sass-files/sass/partials/_colorpicker.scss | 251 ++++++++++++++++++++++ web/sass-files/sass/partials/_headers.scss | 4 + web/sass-files/sass/partials/_modal.scss | 10 + web/sass-files/sass/partials/_post.scss | 2 +- web/sass-files/sass/partials/_search.scss | 1 + web/sass-files/sass/partials/_settings.scss | 30 +++ web/sass-files/sass/partials/_sidebar--left.scss | 6 + web/sass-files/sass/partials/_sidebar--right.scss | 11 +- 9 files changed, 313 insertions(+), 9 deletions(-) create mode 100644 web/sass-files/sass/partials/_colorpicker.scss (limited to 'web/sass-files/sass/partials') diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index cdc2152e9..592d5e62e 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -40,14 +40,11 @@ b, strong { a { word-break: break-word; -} - -a.theme { color: $primary-color; } -div.theme { - background-color: $primary-color; +a:focus, a:hover { + color: $primary-color; } .tooltip { diff --git a/web/sass-files/sass/partials/_colorpicker.scss b/web/sass-files/sass/partials/_colorpicker.scss new file mode 100644 index 000000000..431f9d8d0 --- /dev/null +++ b/web/sass-files/sass/partials/_colorpicker.scss @@ -0,0 +1,251 @@ +/*! + * Bootstrap Colorpicker + * http://mjolnic.github.io/bootstrap-colorpicker/ + * + * Originally written by (c) 2012 Stefan Petre + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0.txt + * + */ + +.colorpicker-saturation { + float: left; + width: 100px; + height: 100px; + cursor: crosshair; + background-image: url("../images/bootstrap-colorpicker/saturation.png"); +} + +.colorpicker-saturation i { + position: absolute; + top: 0; + left: 0; + display: block; + width: 5px; + height: 5px; + margin: -4px 0 0 -4px; + border: 1px solid #000; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.colorpicker-saturation i b { + display: block; + width: 5px; + height: 5px; + border: 1px solid #fff; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.colorpicker-hue, +.colorpicker-alpha { + float: left; + width: 15px; + height: 100px; + margin-bottom: 4px; + margin-left: 4px; + cursor: row-resize; +} + +.colorpicker-hue i, +.colorpicker-alpha i { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + height: 1px; + margin-top: -1px; + background: #000; + border-top: 1px solid #fff; +} + +.colorpicker-hue { + background-image: url("../images/bootstrap-colorpicker/hue.png"); +} + +.colorpicker-alpha { + display: none; + background-image: url("../images/bootstrap-colorpicker/alpha.png"); +} + +.colorpicker-saturation, +.colorpicker-hue, +.colorpicker-alpha { + background-size: contain; +} + +.colorpicker { + top: 0; + left: 0; + z-index: 2500; + min-width: 130px; + padding: 4px; + margin-top: 1px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + *zoom: 1; +} + +.colorpicker:before, +.colorpicker:after { + display: table; + line-height: 0; + content: ""; +} + +.colorpicker:after { + clear: both; +} + +.colorpicker:before { + position: absolute; + top: -7px; + left: 6px; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; +} + +.colorpicker:after { + position: absolute; + top: -6px; + left: 7px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #ffffff; + border-left: 6px solid transparent; + content: ''; +} + +.colorpicker div { + position: relative; +} + +.colorpicker.colorpicker-with-alpha { + min-width: 140px; +} + +.colorpicker.colorpicker-with-alpha .colorpicker-alpha { + display: block; +} + +.colorpicker-color { + height: 10px; + margin-top: 5px; + clear: both; + background-image: url("../images/bootstrap-colorpicker/alpha.png"); + background-position: 0 100%; +} + +.colorpicker-color div { + height: 10px; +} + +.colorpicker-selectors { + display: none; + height: 10px; + margin-top: 5px; + clear: both; +} + +.colorpicker-selectors i { + float: left; + width: 10px; + height: 10px; + cursor: pointer; +} + +.colorpicker-selectors i + i { + margin-left: 3px; +} + +.colorpicker-element .input-group-addon i, +.colorpicker-element .add-on i { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: text-top; + cursor: pointer; +} + +.colorpicker.colorpicker-inline { + position: relative; + z-index: auto; + display: inline-block; + float: none; +} + +.colorpicker.colorpicker-horizontal { + width: 110px; + height: auto; + min-width: 110px; +} + +.colorpicker.colorpicker-horizontal .colorpicker-saturation { + margin-bottom: 4px; +} + +.colorpicker.colorpicker-horizontal .colorpicker-color { + width: 100px; +} + +.colorpicker.colorpicker-horizontal .colorpicker-hue, +.colorpicker.colorpicker-horizontal .colorpicker-alpha { + float: left; + width: 100px; + height: 15px; + margin-bottom: 4px; + margin-left: 0; + cursor: col-resize; +} + +.colorpicker.colorpicker-horizontal .colorpicker-hue i, +.colorpicker.colorpicker-horizontal .colorpicker-alpha i { + position: absolute; + top: 0; + left: 0; + display: block; + width: 1px; + height: 15px; + margin-top: 0; + background: #ffffff; + border: none; +} + +.colorpicker.colorpicker-horizontal .colorpicker-hue { + background-image: url("../images/bootstrap-colorpicker/hue-horizontal.png"); +} + +.colorpicker.colorpicker-horizontal .colorpicker-alpha { + background-image: url("../images/bootstrap-colorpicker/alpha-horizontal.png"); +} + +.colorpicker.colorpicker-hidden { + display: none; +} + +.colorpicker.colorpicker-visible { + display: block; +} + +.colorpicker-inline.colorpicker-visible { + display: inline-block; +} + +.colorpicker-right:before { + right: 6px; + left: auto; +} + +.colorpicker-right:after { + right: 7px; + left: auto; +} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index 702f0fd60..a20d1f48b 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -231,6 +231,10 @@ width: 45px; color: #999; cursor: pointer; + .fa { + margin-left: 3px; + font-size: 16px; + } } &.alt { margin: 0; diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index a046cd904..38e9b4174 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -8,6 +8,16 @@ @include opacity(0.7); } } + a, a:focus, a:hover { + color: #2389D7; + } + .btn.btn-primary { + background: #4285f4; + &:hover, &:focus, &:active { + background: $primary-color--hover; + color: #fff; + } + } .info__label { font-weight: 600; text-align: right; diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 6940cf2fb..d4f02cf4b 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -275,7 +275,7 @@ body.ios { &.current--user { .post-body { @include border-radius(4px); - background: #f5f5f5; + background: rgba(#000, 0.05); } } &.post--comment { diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss index 9ae41ebb0..9abdd40da 100644 --- a/web/sass-files/sass/partials/_search.scss +++ b/web/sass-files/sass/partials/_search.scss @@ -107,4 +107,5 @@ .search-highlight.theme, .search-highlight { background-color: #FFF2BB; + color: #333; } diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index 2b59a943b..8dcd8f35c 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -79,6 +79,36 @@ } } + .appearance-section { + .premade-themes { + .theme-label { + font-weight: 400; + margin-top: 5px; + } + img { + border: 3px solid transparent; + } + .active { + img { + border-color: $primary-color; + } + } + } + .custom-label { + font-weight: normal; + font-size: 13px; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 0; + } + .radio { + label { + font-weight: 600; + } + } + } + .section-title { margin-bottom: 5px; font-weight: 600; diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index 94583b153..6a418e270 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -16,6 +16,12 @@ overflow-y: auto; max-width: 200px; width: 200px; + a { + color: #262626 !important; + &:hover, &:focus { + background: #f5f5f5 !important; + } + } } .search__form { margin: 0; diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss index d02a92448..b37dbf421 100644 --- a/web/sass-files/sass/partials/_sidebar--right.scss +++ b/web/sass-files/sass/partials/_sidebar--right.scss @@ -51,9 +51,10 @@ margin: 11px 0 0 0; width: 22px; height: 22px; - background: url("../images/closeSidebar.png"); - @include background-size(100% 100%); opacity: 0.5; + font-size: 22px; + line-height: 0; + background: none; float: right; outline: none; border: none; @@ -61,11 +62,15 @@ &:hover, &:active { opacity: 0.8; } + i { + position: relative; + top: -2px; + } } .sidebar--right__header { font-size: 1em; text-transform: uppercase; - color: #444; + color: inherit; height: 44px; padding: 0 1em; line-height: 44px; -- cgit v1.2.3-1-g7c22