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);
+ }
+ }
+ }
+ }
+ }
+
+}