Merge pull request #574 from lbryio/v16-scrollbar
Improve scrollbar ( UI / UX )
This commit is contained in:
commit
55f2a4c2cd
5 changed files with 45 additions and 3 deletions
6
ui/dist/themes/dark.css
vendored
6
ui/dist/themes/dark.css
vendored
|
@ -40,10 +40,14 @@
|
|||
--table-item-even: var(--color-bg-alt);
|
||||
--table-item-odd: transparent;
|
||||
|
||||
/* Modla */
|
||||
/* Modal */
|
||||
--modal-overlay-bg: var(--color-dark-overlay);
|
||||
--modal-border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
|
||||
--scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.35);
|
||||
|
||||
/* Divider */
|
||||
--divider: 1px solid rgba(255,255,255, 0.12);
|
||||
}
|
||||
|
|
|
@ -36,10 +36,16 @@ body
|
|||
|
||||
#main-content
|
||||
{
|
||||
padding: $spacing-vertical;
|
||||
margin-top: var(--header-height);
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: overlay;
|
||||
padding: $spacing-vertical;
|
||||
position: absolute;
|
||||
top: var(--header-height);
|
||||
bottom: 0;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
main {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
|
@ -126,6 +126,13 @@ $text-color: #000;
|
|||
--tooltip-color: var(--text-color);
|
||||
--tooltip-border: 1px solid #aaa;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-radius: 10px;
|
||||
--scrollbar-thumb-bg: rgba(0, 0, 0, 0.20);
|
||||
--scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.35);
|
||||
--scrollbar-thumb-active-bg: var(--color-primary);
|
||||
--scrollbar-track-bg: transparent;
|
||||
|
||||
/* Divider */
|
||||
--divider: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
@import "component/_video.scss";
|
||||
@import "component/_pagination.scss";
|
||||
@import "component/_markdown-editor.scss";
|
||||
@import "component/_scrollbar.scss";
|
||||
@import "component/_tabs.scss";
|
||||
@import "page/_developer.scss";
|
||||
@import "page/_show.scss";
|
||||
|
|
24
ui/scss/component/_scrollbar.scss
Normal file
24
ui/scss/component/_scrollbar.scss
Normal file
|
@ -0,0 +1,24 @@
|
|||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar-track-bg);
|
||||
border-radius: var(--scrollbar-radius);
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: var(--scrollbar-radius);
|
||||
background-color: var(--scrollbar-thumb-bg);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--scrollbar-thumb-hover-bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: var(--scrollbar-thumb-active-bg);
|
||||
}
|
Loading…
Add table
Reference in a new issue