Custom scrollbar

ONLYOFFICE · Mar 15, 2024 · 4cfda5a · 4cfda5a
1 parent 7408361
commit 4cfda5a
Showing 1 changed file with 73 additions and 4 deletions.
diff --git a/apps/spreadsheeteditor/embed/resources/less/application.less b/apps/spreadsheeteditor/embed/resources/less/application.less
@@ -13,13 +13,83 @@
   }
 
   ul.worksheet-list {
-    margin: 0;
     background-color: #F7F7F7;
     display: flex;
-    padding: 0 0 0 24px;
+    padding: 0;
+    margin: 0;
     white-space: nowrap;
     box-shadow: inset 0 1px 0 #cacaca;
-    flex-wrap: wrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    @media screen and (min--moz-device-pixel-ratio:0) {
+      scrollbar-color: #e8e8e8 #eeeeee;
+      scrollbar-width: thin;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      height: 14px;
+      border: #c0c0c0 1px solid;
+      background-color: #e8e8e8;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' stroke ='rgb(173,173,173)' height='5px'><line y1='2.5' x1='0' y2='2.5' x2='13' stroke-width = '5' stroke-dasharray ='1px' /%3E%3C/svg%3E");
+
+      &:hover {
+        background-color: #c0c0c0;
+      }
+
+      &:active {
+        background-color: #adadad;
+      }
+
+      &:active, &:hover {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' stroke ='rgb(247,247,247)' height='5px'><line y1='2.5' x1='0' y2='2.5' x2='13' stroke-width = '5' stroke-dasharray ='1px' /%3E%3C/svg%3E");
+      }
+    }
+
+    &::-webkit-scrollbar-track {
+      margin: 0 1px;
+    }
+
+    &::-webkit-scrollbar {
+      height: 16px;
+      border-top: #c0c0c0 1px solid;
+      background-color: #eeeeee;
+    }
+
+    &::-webkit-scrollbar-button:single-button {
+      height: 14px;
+      width: 16px;
+      border: #c0c0c0 1px solid;
+      background-color: #f0f0f0;
+      background-position: center;
+      background-repeat: no-repeat;
+
+      &:hover {
+        background-color: #c0c0c0;
+      }
+
+      &:active {
+        background-color: #adadad;
+      }
+
+      &:horizontal:increment {
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges' width='4' height='8px' fill='rgb(173, 173, 173)'><polygon points='0,0 0,7 4,3.5'/></svg>");
+      }
+
+      &:horizontal:increment:hover, &:horizontal:increment:active {
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(247, 247, 247)'><polygon points='0,0 0,7 4,3.5'/></svg>");
+      }
+
+      &:horizontal:decrement {
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='8px' fill='rgb(173, 173, 173)'><polygon points='0,3.5 4,7 4,0'/></svg>");
+      }
+
+      &:horizontal:decrement:hover, &:horizontal:decrement:active {
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges' width='4' height='8px' fill='rgb(247, 247, 247)'><polygon points='0,3.5 4,7 4,0'/></svg>");
+      }
+    }
 
     li {
       display: inline-block;
@@ -28,7 +98,6 @@
       line-height: 24px;
       margin-right: -1px;
       margin-left: 0;
-      border-bottom: 1px solid #cacaca;
       border-right: 1px solid #cacaca;
       border-left: 1px solid #cacaca;
       color: rgba(0, 0, 0, 0.8);