diff --git a/src/styles/_scrollbars.scss b/src/styles/_scrollbars.scss new file mode 100644 index 00000000..f81178ed --- /dev/null +++ b/src/styles/_scrollbars.scss @@ -0,0 +1,31 @@ + +// Chrome +::-webkit-scrollbar { + width: $scrollbar-height; + height: $scrollbar-height; +} + +::-webkit-scrollbar-track { + background: $scrollbar-track-color; + border-radius: 10px; +} + +::-webkit-scrollbar-thumb { + border-radius: 10px; + background: $scrollbar-thumb-color; + -webkit-transition: background-color $transition; + -moz-transition: background-color $transition; + -ms-transition: background-color $transition; + -o-transition: background-color $transition; + transition: background-color $transition; + + &:hover { + background: $scrollbar-hover-color; + } +} + +// Firefox +*{ + scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color; + scrollbar-width: thin; +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 89f9f3a5..c53124b8 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -36,4 +36,9 @@ $multiselect-dark: #35495e; $multiselect-border: #e8e8e8; $multiselect-highlight: $green; $multiselect-highlight-negative: $red; -$multiselect-disabled: darken(#fff, 40); \ No newline at end of file +$multiselect-disabled: darken(#fff, 40); + +$scrollbar-height: 8px; +$scrollbar-track-color: lighten($dark, 65); +$scrollbar-thumb-color: lighten($dark, 40); +$scrollbar-hover-color: lighten($dark, 30); \ No newline at end of file diff --git a/src/styles/scrollbars.scss b/src/styles/scrollbars.scss deleted file mode 100644 index 0ef4dbcc..00000000 --- a/src/styles/scrollbars.scss +++ /dev/null @@ -1,14 +0,0 @@ -// -//::-webkit-scrollbar { -// width: 8px; -//} -// -//::-webkit-scrollbar-track { -// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -// border-radius: 10px; -//} -// -//::-webkit-scrollbar-thumb { -// border-radius: 10px; -// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); -//} diff --git a/todo.md b/todo.md index ba589dca..c3778570 100644 --- a/todo.md +++ b/todo.md @@ -34,9 +34,9 @@ * [x] Google fonts raus (sollen von lokal geladen werden) * [x] Ladeanimationen erst nach 100ms anzeigen, sonst wird das überflüssigerweise angezeigt * [x] Btns für Teams und neuer Namespace nach oben in die Leiste verschieben +* [x] Fancy Scrollbars * [ ] Card-like overview of all lists with the first 3-5 tasks, undone first * [ ] Be able to collapse all lists in a namespace by clicking on the menu entry -* [ ] Fancy Scrollbars ## Funktionales