diff --git a/public/index.html b/public/index.html
index 061b742..1d1cf09 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
Embeddable Chatbox Demo
-
+
Bookmarklet (drag it to your bookmarks bar)
diff --git a/src/components/_chat.scss b/src/components/_chat.scss
index c27efc7..dfb30e4 100644
--- a/src/components/_chat.scss
+++ b/src/components/_chat.scss
@@ -75,6 +75,7 @@
&:hover {
#open-chatbox-label, .label-icon {
border: 1px solid $dark-color;
+ box-shadow: inset 0px 0px 0px 1px $dark-color;
}
}
@@ -83,6 +84,7 @@
#open-chatbox-label, .label-icon {
border: 1px solid $dark-color;
+ box-shadow: inset 0px 0px 0px 1px $dark-color;
background-color: transparentize($theme-color, 0.15);
}
}
@@ -138,12 +140,12 @@
transition: all 0.2s ease-in-out;
&:hover {
- border: 1px solid $theme-color;
+ box-shadow: inset 0px 0px 0px 1px $dark-color;
}
&:focus {
outline: none;
- border: 1px solid $theme-color;
+ box-shadow: inset 0px 0px 0px 1px $dark-color;
background-color: $theme-light-color;
}
}
@@ -163,12 +165,12 @@
transition: all 0.2s ease-in-out;
&:hover {
- border: 1px solid $theme-color;
+ box-shadow: inset 0px 0px 0px 1px $dark-color;
}
&:focus {
outline: none;
- border: 1px solid $theme-color;
+ box-shadow: inset 0px 0px 0px 1px $dark-color;
background-color: $theme-light-color;
}
}
@@ -188,7 +190,7 @@
transition: all 0.2s ease-in-out;
&:hover {
- border-color: $theme-color;
+ box-shadow: inset 0px 0px 0px 1px $dark-color;
}
&:focus {
@@ -330,9 +332,13 @@
transition: all 0.2s ease-in-out;
border-radius: 10px;
+ &:hover {
+ box-shadow: inset 0px 0px 0px 1px $dark-color;
+ }
+
&:focus {
outline: none;
- border: 1px solid $theme-color;
+ box-shadow: inset 0px 0px 0px 1px $dark-color;
background: $theme-light-color;
}
}
@@ -354,11 +360,13 @@
&:hover {
border: 1px solid $dark-color;
+ box-shadow: inset 0px 0px 0px 1px $dark-color;
}
&:focus {
outline: none;
border: 1px solid $dark-color;
+ box-shadow: inset 0px 0px 0px 1px $dark-color;
background-color: transparentize($theme-color, 0.15);
}
}
diff --git a/src/components/_dark_mode.scss b/src/components/_dark_mode.scss
index 49a13e4..57ea3e0 100644
--- a/src/components/_dark_mode.scss
+++ b/src/components/_dark_mode.scss
@@ -12,10 +12,13 @@
&:hover {
border-color: $theme-color;
+ box-shadow: inset 0px 0px 0px 1px $theme-color;
}
&:focus {
- background: $dark-theme-color;
+ border-color: $theme-color;
+ background: $dark-theme-highlight-color;
+ box-shadow: inset 0px 0px 0px 1px $theme-color;
outline: none;
}
}
@@ -26,10 +29,12 @@
&:hover {
border-color: $theme-color;
+ box-shadow: inset 0px 0px 0px 1px $theme-color;
}
&:focus {
- background: $dark-theme-color;
+ background: $dark-theme-highlight-color;
+ box-shadow: inset 0px 0px 0px 1px $theme-color;
outline: none;
}
}
@@ -76,9 +81,16 @@
color: $light-text-color;
border: 1px solid $white;
- &:focus {
+ &:hover {
border: 1px solid $theme-color;
- background: $dark-theme-color;
+ box-shadow: inset 0px 0px 0px 1px $theme-color;
+ }
+
+ &:focus {
+ outline: none;
+ border: 1px solid $theme-color;
+ box-shadow: inset 0px 0px 0px 1px $theme-color;
+ background: $dark-theme-highlight-color;
}
}
@@ -87,9 +99,21 @@
}
input[type="submit"] {
- background-color: $theme-color;
+ background-color: $dark-theme-color;
color: $light-text-color;
border: 1px solid $white;
+
+ &:hover {
+ border: 1px solid $theme-color;
+ box-shadow: inset 0px 0px 0px 1px $theme-color;
+ }
+
+ &:focus {
+ outline: none;
+ border: 1px solid $theme-color;
+ box-shadow: inset 0px 0px 0px 1px $theme-color;
+ background-color: $dark-theme-highlight-color;
+ }
}
}
diff --git a/src/components/_variables.scss b/src/components/_variables.scss
index e5b8e33..8784eb1 100644
--- a/src/components/_variables.scss
+++ b/src/components/_variables.scss
@@ -22,3 +22,4 @@ $light-background-color: #ffffff;
$light-text-color: #ffffff;
$dark-text-color: #0F1116;
$dark-theme-color: #4F4F4F;
+$dark-theme-highlight-color: #211943;