forked from Github/ocrcc-chatbox
finish transitions on dark theme
This commit is contained in:
parent
f5862e8f0a
commit
5e4f96efba
@ -4,7 +4,7 @@
|
||||
<title>Embeddable Chatbox Demo</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<body style="height: 100vh; background: darkgrey;">
|
||||
<p style="font-family:sans-serif; padding: 3rem 5rem;">
|
||||
<a id="bookmarklet">Bookmarklet (drag it to your bookmarks bar)</a>
|
||||
</p>
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user