Implement UI theme colors.

9 files changed, 313 insertions, 9 deletions

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;