From e63ec8ab8a4e88d5a86eabb3e635ca3fc11fd4e4 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Tue, 17 May 2022 04:07:59 +0300
Subject: [PATCH] add style for scroll

---
 apps/common/main/resources/less/scroller.less | 130 +++++++++++++++++-
 1 file changed, 129 insertions(+), 1 deletion(-)

diff --git a/apps/common/main/resources/less/scroller.less b/apps/common/main/resources/less/scroller.less
index 8a8b76869..2cc12151a 100644
--- a/apps/common/main/resources/less/scroller.less
+++ b/apps/common/main/resources/less/scroller.less
@@ -151,4 +151,132 @@
         background-color: transparent !important;
         opacity: 1 !important;
     }
-}
\ No newline at end of file
+}
+
+textarea,.brouse-scroll {
+    @background-svg-fill: #999;
+    @background-svg-fill-hover: #404040;
+    overflow-y: auto;
+
+    scrollbar-color: @background-toolbar @canvas-background;  //mozila
+    /*explorer*/
+    scrollbar-track-color:  @canvas-background;
+    scrollbar-face-color: @background-toolbar-ie;
+    scrollbar-arrow-color:  @canvas-scroll-thumb-hover-ie;
+    scrollbar-base-color: @border-toolbar-ie;
+    /*------------------------------------*/
+
+    .inline-svg-code( @code ) {
+        @-svg-code: escape(~'<?xml version="1.0" ?>@{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(~'<svg xmlns="http://www.w3.org/2000/svg" height="14px" fill ="@{color}" width="@{width}px"><rect width = "@{width}"  height = "1" x="0" y="0"/><rect width = "@{width}"  height = "1" x="0" y="2"/><rect width = "@{width}"  height = "1" x="0" y="4"/><rect width = "@{width}"  height = "1" x="0" y="6"/><rect width = "@{width}"  height = "1" x="0" y="8"/><rect width = "@{width}"  height = "1" x="0" y="10"/><rect width = "@{width}"  height = "1" x="0" y="12"/></svg>');
+        background-image: @-inline-svg-url;
+    }
+    .img-scroll-x(@color,@height) {
+        .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" height="14px" fill ="@{color}" width="@{height}px"><rect width = "@{height}"  height = "1" y="0" x="0"/><rect width = "@{height}"  height = "1" y="0" x="2"/><rect width = "@{height}"  height = "1" y="0" x="4"/><rect width = "@{height}"  height = "1" y="0" x="6"/><rect width = "@{height}"  height = "1" y="0" x="8"/><rect width = "@{height}"  height = "1" y="0" x="10"/><rect width = "@{height}"  height = "1" y="0" x="12"/></svg>');
+        background-image: @-inline-svg-url;
+    }
+    .arrow-top(@color){
+        .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="4px" fill="@{color}"><polygon points="4,0 0,4 8,4"/></svg>');
+        background-image: @-inline-svg-url;
+    }
+    .arrow-down(@color){
+        .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="4px" fill="@{color}"><polygon points="4,4 0,0 8,0"/></svg>');
+        background-image: @-inline-svg-url;
+    }
+    .arrow-right(@color){
+        .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="4px" height="8px" fill="@{color}"><polygon points="0,0 0,8 4,4"/></svg>');
+        background-image: @-inline-svg-url;
+    }
+    .arrow-left(@color){
+        .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="4px" height="8px" fill="@{color}"><polygon points="0,4 4,8 4,0"/></svg>');
+        background-image: @-inline-svg-url;
+    }
+
+    cursor: auto;
+
+    &::-webkit-scrollbar {
+        cursor: default;
+        height: 14px;
+        width: 14px;
+        background-color: @canvas-background;
+        -o-transition: background-color .2s linear;
+        -webkit-transition: background-color .2s linear;
+        -moz-transition: background-color .2s linear;
+        transition: background-color .2s linear;
+    }
+    &::-webkit-scrollbar-corner{
+        background-color: @canvas-background;
+    }
+
+    &::-webkit-scrollbar-thumb, &::-webkit-scrollbar-button {
+        cursor: default;
+        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 {
+        &:vertical {
+            .img-scroll-y(@background-svg-fill,5);
+            &:hover {
+                .img-scroll-y(@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:decrement {
+            .arrow-top(@background-svg-fill);
+            &:hover {
+                .arrow-top(@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);
+            }
+        }
+    }
+}
+