diff --git a/apps/common/main/resources/less/scroller.less b/apps/common/main/resources/less/scroller.less index 2cc12151a..af315d3db 100644 --- a/apps/common/main/resources/less/scroller.less +++ b/apps/common/main/resources/less/scroller.less @@ -153,10 +153,42 @@ } } + + +.inline-svg-code( @code ) { + @-svg-code: escape(~'@{code}'); + @-inline-svg-code: ~'data:image/svg+xml,@{-svg-code}'; + @-inline-svg-url: ~"url('@{-inline-svg-code}')"; +} +.img-scroll-y(@color,@width) { + .inline-svg-code(~''); + background-image: @-inline-svg-url; +} +.img-scroll-x(@color,@height) { + .inline-svg-code(~''); + background-image: @-inline-svg-url; +} +.arrow-top(@color){ + .inline-svg-code(~''); + background-image: @-inline-svg-url; +} +.arrow-down(@color){ + .inline-svg-code(~''); + background-image: @-inline-svg-url; +} +.arrow-right(@color){ + .inline-svg-code(~''); + background-image: @-inline-svg-url; +} +.arrow-left(@color){ + .inline-svg-code(~''); + background-image: @-inline-svg-url; +} + textarea,.brouse-scroll { - @background-svg-fill: #999; - @background-svg-fill-hover: #404040; - overflow-y: auto; + @background-svg-fill: #adadad; + @background-svg-fill-hover: #f7f7f7; + overflow: auto; scrollbar-color: @background-toolbar @canvas-background; //mozila /*explorer*/ @@ -166,36 +198,6 @@ textarea,.brouse-scroll { scrollbar-base-color: @border-toolbar-ie; /*------------------------------------*/ - .inline-svg-code( @code ) { - @-svg-code: escape(~'@{code}'); - @-inline-svg-code: ~'data:image/svg+xml,@{-svg-code}'; - @-inline-svg-url: ~"url('@{-inline-svg-code}')"; - } - .img-scroll-y(@color,@width) { - .inline-svg-code(~''); - background-image: @-inline-svg-url; - } - .img-scroll-x(@color,@height) { - .inline-svg-code(~''); - background-image: @-inline-svg-url; - } - .arrow-top(@color){ - .inline-svg-code(~''); - background-image: @-inline-svg-url; - } - .arrow-down(@color){ - .inline-svg-code(~''); - background-image: @-inline-svg-url; - } - .arrow-right(@color){ - .inline-svg-code(~''); - background-image: @-inline-svg-url; - } - .arrow-left(@color){ - .inline-svg-code(~''); - background-image: @-inline-svg-url; - } - cursor: auto; &::-webkit-scrollbar { @@ -217,25 +219,17 @@ textarea,.brouse-scroll { box-shadow: inset 0px 0px 0px 1px @border-toolbar; border-right: @scaled-one-px-value solid @canvas-background; -webkit-border-radius: 0.2ex; - background-position: center; - background-repeat: no-repeat; background-color: @background-toolbar; - -o-transition: background-color .2s linear; - -webkit-transition: background-color .2s linear; - -moz-transition: background-color .2s linear; - transition: background-color .2s linear; background-position: center; background-repeat: no-repeat; &:hover { background-color: @canvas-scroll-thumb-hover; box-shadow: inset 0px 0px 0px 1px @canvas-scroll-thumb-border-hover; - } &:active { background-color: var(--canvas-scroll-thumb-pressed); - //box-shadow: inset 0px 0px 0px 1px @canvas-scroll-thumb-border-hover; } } &::-webkit-scrollbar-thumb { @@ -245,38 +239,108 @@ textarea,.brouse-scroll { .img-scroll-y(@background-svg-fill-hover, 5); } } + &:horizontal { + .img-scroll-x(@background-svg-fill,5); + &:hover { + .img-scroll-x(@background-svg-fill-hover, 5); + } + } } &::-webkit-scrollbar-button { height: 14px; width: 14px; border: @scaled-one-px-value solid @canvas-background; - border-width: 1px 1px 1px 0; + &:vertical { + border-left-width: 0; + height: 15px; + &:decrement { + .arrow-top(@background-svg-fill); + &:hover { + .arrow-top(@background-svg-fill-hover); + } + } + &:increment { + .arrow-down(@background-svg-fill); + &:hover { + .arrow-down(@background-svg-fill-hover); + } + } + } + &:horizontal { + border-top-width: 0; + width: 15px; + &:decrement { + .arrow-left(@background-svg-fill); - &:vertical:decrement { - .arrow-top(@background-svg-fill); - &:hover { - .arrow-top(@background-svg-fill-hover); + &:hover { + .arrow-left(@background-svg-fill-hover); + } } - } - &:vertical:increment { - .arrow-down(@background-svg-fill); - &:hover { - .arrow-down(@background-svg-fill-hover); - } - } - &:horizontal:decrement{ - .arrow-left(@background-svg-fill); - &:hover { - .arrow-left(@background-svg-fill-hover); - } - } - &:horizontal:increment{ - .arrow-right(@background-svg-fill); - &:hover { - .arrow-right(@background-svg-fill-hover); + &:increment { + .arrow-right(@background-svg-fill); + + &:hover { + .arrow-right(@background-svg-fill-hover); + } } } } } +.theme-dark{ + textarea,.brouse-scroll + { + @background-svg-fill: #999; + @background-svg-fill-hover: #404040; + + &::-webkit-scrollbar-thumb { + &:vertical { + .img-scroll-y(@background-svg-fill,5); + &:hover { + .img-scroll-y(@background-svg-fill-hover, 5); + } + } + &:horizontal { + .img-scroll-x(@background-svg-fill,5); + &:hover { + .img-scroll-x(@background-svg-fill-hover, 5); + } + } + } + + &::-webkit-scrollbar-button { + &:vertical { + &:decrement { + .arrow-top(@background-svg-fill); + &:hover { + .arrow-top(@background-svg-fill-hover); + } + } + &:increment { + .arrow-down(@background-svg-fill); + &:hover { + .arrow-down(@background-svg-fill-hover); + } + } + } + + &:horizontal { + &:decrement { + .arrow-left(@background-svg-fill); + &:hover { + .arrow-left(@background-svg-fill-hover); + } + } + &:horizontal:increment { + .arrow-right(@background-svg-fill); + + &:hover { + .arrow-right(@background-svg-fill-hover); + } + } + } + } + } + +}