add custon light/black scrollbar style
This commit is contained in:
Audric Ackermann
parent
55c4963772
commit
f3a51cf2a6
|
|
@ -130,15 +130,4 @@ button.emoji {
|
|||
.ep-slide {
|
||||
background-color: $blue;
|
||||
}
|
||||
.ep ::-webkit-scrollbar {
|
||||
// matches what is set in _global.scss; needs !important to override emoji panel CSS
|
||||
width: 9px !important;
|
||||
}
|
||||
.ep ::-webkit-scrollbar-thumb {
|
||||
background: $color-light-35;
|
||||
|
||||
&:hover {
|
||||
background: $color-light-45;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,26 +16,26 @@ body {
|
|||
color: $color-light-90;
|
||||
}
|
||||
|
||||
// scrollbars
|
||||
::-webkit-scrollbar {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $color-light-35;
|
||||
border: 2px solid $color-white;
|
||||
@include themify($themes) {
|
||||
background: themed('scrollBarThumb');
|
||||
border: solid 2px themed('textColorOpposite');
|
||||
|
||||
&:hover {
|
||||
background: $color-light-45;
|
||||
&:hover {
|
||||
background: $color-light-45;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: $color-white;
|
||||
::-webkit-scrollbar-track {
|
||||
@include themify($themes) {
|
||||
background: themed('scrollBarTrack');
|
||||
}
|
||||
}
|
||||
|
||||
audio {
|
||||
|
|
@ -644,14 +644,6 @@ $loading-height: 16px;
|
|||
padding: 0;
|
||||
background: inherit;
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $color-dark-85;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 2px solid $color-dark-85;
|
||||
}
|
||||
|
||||
.step-body {
|
||||
width: 80%;
|
||||
min-width: 100px;
|
||||
|
|
|
|||
|
|
@ -79,14 +79,6 @@
|
|||
}
|
||||
|
||||
.gutter {
|
||||
::-webkit-scrollbar-track {
|
||||
background: $color-dark-85;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 2px solid $color-dark-85;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ textarea {
|
|||
|
||||
&.green {
|
||||
@include themify($themes) {
|
||||
@include transparent-background(themed('accent'));
|
||||
@include transparent-background(themed('buttonGreen'));
|
||||
}
|
||||
}
|
||||
&.white {
|
||||
|
|
|
|||
|
|
@ -145,6 +145,7 @@ $session-compose-margin: 20px;
|
|||
align-items: center;
|
||||
height: $main-view-header-height;
|
||||
padding-right: 7px;
|
||||
transition: $session-transition-duration;
|
||||
|
||||
.session-button {
|
||||
margin-left: auto;
|
||||
|
|
@ -189,8 +190,9 @@ $session-compose-margin: 20px;
|
|||
}
|
||||
|
||||
&-overlay {
|
||||
background: linear-gradient(180deg, #171717 0%, $session-background 100%);
|
||||
box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.5);
|
||||
@include themify($themes) {
|
||||
background: themed('leftpaneOverlayBackground');
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
|
@ -217,8 +219,10 @@ $session-compose-margin: 20px;
|
|||
|
||||
.green-border {
|
||||
position: absolute;
|
||||
color: $session-color-green;
|
||||
background-color: $session-color-green;
|
||||
@include themify($themes) {
|
||||
color: themed('accent');
|
||||
background-color: themed('accent');
|
||||
}
|
||||
height: 5px;
|
||||
left: -10px;
|
||||
right: -10px;
|
||||
|
|
|
|||
|
|
@ -126,21 +126,27 @@ h1 {
|
|||
|
||||
h2 {
|
||||
@include session-h-title;
|
||||
color: $session-color-white;
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include session-h-title;
|
||||
color: $session-color-white;
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
font-size: 18px;
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include session-h-title;
|
||||
color: $session-color-white;
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -193,35 +193,8 @@ body.dark-theme {
|
|||
}
|
||||
}
|
||||
|
||||
.emoji-panel-container {
|
||||
.ep ::-webkit-scrollbar-thumb {
|
||||
background: $color-dark-55;
|
||||
|
||||
&:hover {
|
||||
background: $color-dark-30;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// _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 {
|
||||
background-color: $color-gray-95;
|
||||
}
|
||||
|
|
@ -427,14 +400,6 @@ body.dark-theme {
|
|||
|
||||
.gutter {
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ $themes: (
|
|||
modalBorder: #212121,
|
||||
fakeChatBubbleBackground: #f5f5f5,
|
||||
fakeChatBubbleText: #000,
|
||||
navigationBarBackground: #fcfcfc,
|
||||
newConversationButtonShadow: hsl(151, 89%, 26%),
|
||||
// text
|
||||
textColor: #000,
|
||||
|
|
@ -27,6 +26,7 @@ $themes: (
|
|||
// buttons
|
||||
backgroundPrimary: #272726,
|
||||
foregroundPrimary: #fff,
|
||||
buttonGreen: #272726,
|
||||
// conversation view
|
||||
messageSelected:
|
||||
linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)),
|
||||
|
|
@ -40,6 +40,10 @@ $themes: (
|
|||
conversationItemSelected: #f0f0f0,
|
||||
clickableHovered: #dfdfdf,
|
||||
borderActionPanel: 1px solid #f1f1f1,
|
||||
leftpaneOverlayBackground: #fff,
|
||||
// scrollbars
|
||||
scrollBarTrack: #fcfcfc,
|
||||
scrollBarThumb: #474646,
|
||||
),
|
||||
dark: (
|
||||
accent: #00f782,
|
||||
|
|
@ -56,7 +60,6 @@ $themes: (
|
|||
modalBorder: #212121,
|
||||
fakeChatBubbleBackground: #3f4146,
|
||||
fakeChatBubbleText: #000,
|
||||
navigationBarBackground: #161616,
|
||||
newConversationButtonShadow: #077c44,
|
||||
// text
|
||||
textColor: #fff,
|
||||
|
|
@ -67,6 +70,7 @@ $themes: (
|
|||
// buttons
|
||||
backgroundPrimary: #474646,
|
||||
foregroundPrimary: #fff,
|
||||
buttonGreen: #00f782,
|
||||
// conversation view
|
||||
messageSelected:
|
||||
linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)),
|
||||
|
|
@ -80,6 +84,10 @@ $themes: (
|
|||
conversationItemSelected: #404040,
|
||||
clickableHovered: #414347,
|
||||
borderActionPanel: none,
|
||||
leftpaneOverlayBackground: linear-gradient(180deg, #171717 0%, #121212 100%),
|
||||
// scrollbars
|
||||
scrollBarTrack: #1b1b1b,
|
||||
scrollBarThumb: #474646,
|
||||
),
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue