Style scrollbar
This commit is contained in:
parent
d3629e53b3
commit
04e8ebb270
4 changed files with 74 additions and 2 deletions
|
@ -134,6 +134,13 @@ button.emoji {
|
||||||
}
|
}
|
||||||
.ep ::-webkit-scrollbar {
|
.ep ::-webkit-scrollbar {
|
||||||
// matches what is set in _global.scss; needs !important to override emoji panel CSS
|
// matches what is set in _global.scss; needs !important to override emoji panel CSS
|
||||||
width: 10px !important;
|
width: 9px !important;
|
||||||
|
}
|
||||||
|
.ep ::-webkit-scrollbar-thumb {
|
||||||
|
background: $color-light-35;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $color-light-45;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,6 +16,28 @@ body {
|
||||||
color: $color-light-90;
|
color: $color-light-90;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: $color-light-35;
|
||||||
|
border: 2px solid $color-white;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $color-light-45;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
.dark-overlay {
|
.dark-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
|
@ -20,6 +20,15 @@
|
||||||
|
|
||||||
.gutter {
|
.gutter {
|
||||||
background-color: $color-black-008-no-tranparency;
|
background-color: $color-black-008-no-tranparency;
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: $color-black-008-no-tranparency;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
border: 2px solid $color-black-008-no-tranparency;
|
||||||
|
}
|
||||||
|
|
||||||
float: left;
|
float: left;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
.content {
|
.content {
|
||||||
|
|
|
@ -155,7 +155,6 @@ body.dark-theme {
|
||||||
}
|
}
|
||||||
|
|
||||||
// _emoji
|
// _emoji
|
||||||
|
|
||||||
.ep-emojies {
|
.ep-emojies {
|
||||||
background-color: $color-black;
|
background-color: $color-black;
|
||||||
}
|
}
|
||||||
|
@ -170,8 +169,35 @@ body.dark-theme {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.emoji-panel-container {
|
||||||
|
.ep ::-webkit-scrollbar-thumb {
|
||||||
|
background: $color-dark-55;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $color-dark-30;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// _global
|
// _global
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: $color-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: $color-dark-55;
|
||||||
|
border: 2px solid $color-black;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $color-dark-30;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background: $color-black;
|
||||||
|
}
|
||||||
|
|
||||||
.dark-overlay {
|
.dark-overlay {
|
||||||
background-color: $color-black;
|
background-color: $color-black;
|
||||||
}
|
}
|
||||||
|
@ -431,6 +457,14 @@ body.dark-theme {
|
||||||
|
|
||||||
.gutter {
|
.gutter {
|
||||||
background-color: $color-dark-85;
|
background-color: $color-dark-85;
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: $color-dark-85;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
border: 2px solid $color-dark-85;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.network-status-container {
|
.network-status-container {
|
||||||
.network-status {
|
.network-status {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue