From 05ab7dab7dbe687c3c43f505d960e7a45c25cf7a Mon Sep 17 00:00:00 2001 From: OVSharova Date: Mon, 18 Apr 2022 08:23:41 +0300 Subject: [PATCH] add style for scroll --- .../main/resources/help/de/editor.css | 3 +- .../main/resources/help/en/editor.css | 4 +- .../main/resources/help/es/editor.css | 3 +- .../main/resources/help/fr/editor.css | 3 +- .../main/resources/help/it/editor.css | 3 +- .../main/resources/help/ru/editor.css | 3 +- .../main/resources/help/scroll.css | 116 ++++++++++++++++++ .../main/resources/help/de/editor.css | 3 +- .../main/resources/help/en/editor.css | 3 +- .../main/resources/help/es/editor.css | 3 +- .../main/resources/help/fr/editor.css | 3 +- .../main/resources/help/it/editor.css | 3 +- .../main/resources/help/ru/editor.css | 3 +- .../main/resources/help/scroll.css | 116 ++++++++++++++++++ .../main/resources/help/de/editor.css | 3 +- .../main/resources/help/en/editor.css | 3 +- .../main/resources/help/es/editor.css | 3 +- .../main/resources/help/fr/editor.css | 3 +- .../main/resources/help/it/editor.css | 3 +- .../main/resources/help/ru/editor.css | 3 +- .../main/resources/help/scroll.css | 116 ++++++++++++++++++ 21 files changed, 385 insertions(+), 18 deletions(-) create mode 100644 apps/documenteditor/main/resources/help/scroll.css create mode 100644 apps/presentationeditor/main/resources/help/scroll.css create mode 100644 apps/spreadsheeteditor/main/resources/help/scroll.css diff --git a/apps/documenteditor/main/resources/help/de/editor.css b/apps/documenteditor/main/resources/help/de/editor.css index bdd53336b1..dbcd9606c3 100644 --- a/apps/documenteditor/main/resources/help/de/editor.css +++ b/apps/documenteditor/main/resources/help/de/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/documenteditor/main/resources/help/en/editor.css b/apps/documenteditor/main/resources/help/en/editor.css index ed548dffd1..d59bdafe7d 100644 --- a/apps/documenteditor/main/resources/help/en/editor.css +++ b/apps/documenteditor/main/resources/help/en/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; @@ -11,6 +12,7 @@ text-align: center; vertical-align: middle; } + .cross-reference td{ text-align: center; vertical-align: middle; diff --git a/apps/documenteditor/main/resources/help/es/editor.css b/apps/documenteditor/main/resources/help/es/editor.css index 2133d8370f..429ab5cea8 100644 --- a/apps/documenteditor/main/resources/help/es/editor.css +++ b/apps/documenteditor/main/resources/help/es/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/documenteditor/main/resources/help/fr/editor.css b/apps/documenteditor/main/resources/help/fr/editor.css index 2133d8370f..429ab5cea8 100644 --- a/apps/documenteditor/main/resources/help/fr/editor.css +++ b/apps/documenteditor/main/resources/help/fr/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/documenteditor/main/resources/help/it/editor.css b/apps/documenteditor/main/resources/help/it/editor.css index d05205136d..08402e6b89 100644 --- a/apps/documenteditor/main/resources/help/it/editor.css +++ b/apps/documenteditor/main/resources/help/it/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/documenteditor/main/resources/help/ru/editor.css b/apps/documenteditor/main/resources/help/ru/editor.css index ad8186615c..f4a9216317 100644 --- a/apps/documenteditor/main/resources/help/ru/editor.css +++ b/apps/documenteditor/main/resources/help/ru/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/documenteditor/main/resources/help/scroll.css b/apps/documenteditor/main/resources/help/scroll.css new file mode 100644 index 0000000000..c4ea4bce08 --- /dev/null +++ b/apps/documenteditor/main/resources/help/scroll.css @@ -0,0 +1,116 @@ +html{ + overflow: scroll; + scrollbar-track-color: #eee; + scrollbar-face-color: #f7f7f7; + scrollbar-highlight-color: #eee; + scrollbar-darkshadow-color: #cbcbcb; + scrollbar-arrow-color: #adadad; + scrollbar-color: #f7f7f7 #eee; +} + +::-webkit-scrollbar { + height: 14px; + width: 14px; + background: #eee; +} + +::-webkit-scrollbar-corner { + background: #eee; +} + +/* thimb*/ +::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 0px 1px #cbcbcb; + background: #f7f7f7; + -webkit-border-radius: 0.1ex; + border: #eee 1px solid; + background-position: center; + background-repeat: no-repeat; +} +::-webkit-scrollbar-thumb:hover { + background: #c0c0c0; + background-position: center; + background-repeat: no-repeat; +} +::-webkit-scrollbar-thumb:active { + background: #adadad; + background-position: center; + background-repeat: no-repeat; +} + +::-webkit-scrollbar-thumb:vertical +{ + border-width: 0 2px 0 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='13px' width='4px' fill='rgb(192,192,192)'%3E%3Crect width = '4' height = '1' x='0' y='0'/%3E%3Crect width = '4' height = '1' x='0' y='2'/%3E%3Crect width = '4' height = '1' x='0' y='4'/%3E%3Crect width = '4' height = '1' x='0' y='6'/%3E%3Crect width = '4' height = '1' x='0' y='8'/%3E%3Crect width = '4' height = '1' x='0' y='10'/%3E%3Crect width = '4' height = '1' x='0' y='12'/%3E%3C/svg%3E"); +} +::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:vertical:active +{ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='13px' width='4px' fill='rgb(236,236,236)'%3E%3Crect width = '4' height = '1' x='0' y='0'/%3E%3Crect width = '4' height = '1' x='0' y='2'/%3E%3Crect width = '4' height = '1' x='0' y='4'/%3E%3Crect width = '4' height = '1' x='0' y='6'/%3E%3Crect width = '4' height = '1' x='0' y='8'/%3E%3Crect width = '4' height = '1' x='0' y='10'/%3E%3Crect width = '4' height = '1' x='0' y='12'/%3E%3C/svg%3E"); +} +::-webkit-scrollbar-thumb:horizontal +{ + border-width: 0 0 2px 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='4px' fill='rgb(192,192,192)'%3E%3Crect width = '1' height = '4' y='0' x='0'/%3E%3Crect width = '1' height = '4' y='0' x='2'/%3E%3Crect width = '1' height = '4' y='0' x='4'/%3E%3Crect width = '1' height = '4' y='0' x='6'/%3E%3Crect width = '1' height = '4' y='0' x='8'/%3E%3Crect width = '1' height = '4' y='0' x='10'/%3E%3Crect width = '1' height = '4' y='0' x='12'/%3E%3C/svg%3E"); +} +::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:horizontal:active +{ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='4px' fill='rgb(236,236,236)'%3E%3Crect width = '1' height = '4' y='0' x='0'/%3E%3Crect width = '1' height = '4' y='0' x='2'/%3E%3Crect width = '1' height = '4' y='0' x='4'/%3E%3Crect width = '1' height = '4' y='0' x='6'/%3E%3Crect width = '1' height = '4' y='0' x='8'/%3E%3Crect width = '1' height = '4' y='0' x='10'/%3E%3Crect width = '1' height = '4' y='0' x='12'/%3E%3C/svg%3E"); +} + +/* buttons*/ +::-webkit-scrollbar-button:single-button { + height: 14px; + width: 14px; + box-shadow: inset 0px 0px 0px 1px #cbcbcb; + border: #eee 1px solid; + background-color: #f7f7f7; + background-position: center; + background-repeat: no-repeat; +} + +::-webkit-scrollbar-button:single-button:hover { + background-color: #c0c0c0; + background-position: center; + background-repeat: no-repeat; +} +::-webkit-scrollbar-button:single-button:active { + background-color: #adadad; + background-position: center; + background-repeat: no-repeat; +} + +::-webkit-scrollbar-button:single-button:vertical { + border-right-width: 2px; + border-left-width: 0; +} + +::-webkit-scrollbar-button:single-button:horizontal { + border-bottom-width: 2px; + border-top-width: 0px; +} +::-webkit-scrollbar-button:single-button:vertical:decrement{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:vertical:decrement:hover, ::-webkit-scrollbar-button:single-button:vertical:decrement:active{ + background-image: url("data:image/svg+xml;utf8,"); +} + +::-webkit-scrollbar-button:single-button:vertical:increment{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:vertical:increment:hover, ::-webkit-scrollbar-button:single-button:vertical:increment:active{ + background-image: url("data:image/svg+xml;utf8,"); +} + +::-webkit-scrollbar-button:single-button:horizontal:increment{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:horizontal:increment:hover, ::-webkit-scrollbar-button:single-button:horizontal:increment:active{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:horizontal:decrement{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:horizontal:decrement:hover, ::-webkit-scrollbar-button:single-button:horizontal:decrement:active { + background-image: url("data:image/svg+xml;utf8,"); +} diff --git a/apps/presentationeditor/main/resources/help/de/editor.css b/apps/presentationeditor/main/resources/help/de/editor.css index 3522727c43..9452c3de97 100644 --- a/apps/presentationeditor/main/resources/help/de/editor.css +++ b/apps/presentationeditor/main/resources/help/de/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/presentationeditor/main/resources/help/en/editor.css b/apps/presentationeditor/main/resources/help/en/editor.css index c560e98191..05d886262c 100644 --- a/apps/presentationeditor/main/resources/help/en/editor.css +++ b/apps/presentationeditor/main/resources/help/en/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/presentationeditor/main/resources/help/es/editor.css b/apps/presentationeditor/main/resources/help/es/editor.css index 3522727c43..9452c3de97 100644 --- a/apps/presentationeditor/main/resources/help/es/editor.css +++ b/apps/presentationeditor/main/resources/help/es/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/presentationeditor/main/resources/help/fr/editor.css b/apps/presentationeditor/main/resources/help/fr/editor.css index 7ef863d129..bb845e934e 100644 --- a/apps/presentationeditor/main/resources/help/fr/editor.css +++ b/apps/presentationeditor/main/resources/help/fr/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/presentationeditor/main/resources/help/it/editor.css b/apps/presentationeditor/main/resources/help/it/editor.css index 9df9b6e12f..ae79f29754 100644 --- a/apps/presentationeditor/main/resources/help/it/editor.css +++ b/apps/presentationeditor/main/resources/help/it/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/presentationeditor/main/resources/help/ru/editor.css b/apps/presentationeditor/main/resources/help/ru/editor.css index c560e98191..05d886262c 100644 --- a/apps/presentationeditor/main/resources/help/ru/editor.css +++ b/apps/presentationeditor/main/resources/help/ru/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/presentationeditor/main/resources/help/scroll.css b/apps/presentationeditor/main/resources/help/scroll.css new file mode 100644 index 0000000000..c4ea4bce08 --- /dev/null +++ b/apps/presentationeditor/main/resources/help/scroll.css @@ -0,0 +1,116 @@ +html{ + overflow: scroll; + scrollbar-track-color: #eee; + scrollbar-face-color: #f7f7f7; + scrollbar-highlight-color: #eee; + scrollbar-darkshadow-color: #cbcbcb; + scrollbar-arrow-color: #adadad; + scrollbar-color: #f7f7f7 #eee; +} + +::-webkit-scrollbar { + height: 14px; + width: 14px; + background: #eee; +} + +::-webkit-scrollbar-corner { + background: #eee; +} + +/* thimb*/ +::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 0px 1px #cbcbcb; + background: #f7f7f7; + -webkit-border-radius: 0.1ex; + border: #eee 1px solid; + background-position: center; + background-repeat: no-repeat; +} +::-webkit-scrollbar-thumb:hover { + background: #c0c0c0; + background-position: center; + background-repeat: no-repeat; +} +::-webkit-scrollbar-thumb:active { + background: #adadad; + background-position: center; + background-repeat: no-repeat; +} + +::-webkit-scrollbar-thumb:vertical +{ + border-width: 0 2px 0 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='13px' width='4px' fill='rgb(192,192,192)'%3E%3Crect width = '4' height = '1' x='0' y='0'/%3E%3Crect width = '4' height = '1' x='0' y='2'/%3E%3Crect width = '4' height = '1' x='0' y='4'/%3E%3Crect width = '4' height = '1' x='0' y='6'/%3E%3Crect width = '4' height = '1' x='0' y='8'/%3E%3Crect width = '4' height = '1' x='0' y='10'/%3E%3Crect width = '4' height = '1' x='0' y='12'/%3E%3C/svg%3E"); +} +::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:vertical:active +{ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='13px' width='4px' fill='rgb(236,236,236)'%3E%3Crect width = '4' height = '1' x='0' y='0'/%3E%3Crect width = '4' height = '1' x='0' y='2'/%3E%3Crect width = '4' height = '1' x='0' y='4'/%3E%3Crect width = '4' height = '1' x='0' y='6'/%3E%3Crect width = '4' height = '1' x='0' y='8'/%3E%3Crect width = '4' height = '1' x='0' y='10'/%3E%3Crect width = '4' height = '1' x='0' y='12'/%3E%3C/svg%3E"); +} +::-webkit-scrollbar-thumb:horizontal +{ + border-width: 0 0 2px 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='4px' fill='rgb(192,192,192)'%3E%3Crect width = '1' height = '4' y='0' x='0'/%3E%3Crect width = '1' height = '4' y='0' x='2'/%3E%3Crect width = '1' height = '4' y='0' x='4'/%3E%3Crect width = '1' height = '4' y='0' x='6'/%3E%3Crect width = '1' height = '4' y='0' x='8'/%3E%3Crect width = '1' height = '4' y='0' x='10'/%3E%3Crect width = '1' height = '4' y='0' x='12'/%3E%3C/svg%3E"); +} +::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:horizontal:active +{ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='4px' fill='rgb(236,236,236)'%3E%3Crect width = '1' height = '4' y='0' x='0'/%3E%3Crect width = '1' height = '4' y='0' x='2'/%3E%3Crect width = '1' height = '4' y='0' x='4'/%3E%3Crect width = '1' height = '4' y='0' x='6'/%3E%3Crect width = '1' height = '4' y='0' x='8'/%3E%3Crect width = '1' height = '4' y='0' x='10'/%3E%3Crect width = '1' height = '4' y='0' x='12'/%3E%3C/svg%3E"); +} + +/* buttons*/ +::-webkit-scrollbar-button:single-button { + height: 14px; + width: 14px; + box-shadow: inset 0px 0px 0px 1px #cbcbcb; + border: #eee 1px solid; + background-color: #f7f7f7; + background-position: center; + background-repeat: no-repeat; +} + +::-webkit-scrollbar-button:single-button:hover { + background-color: #c0c0c0; + background-position: center; + background-repeat: no-repeat; +} +::-webkit-scrollbar-button:single-button:active { + background-color: #adadad; + background-position: center; + background-repeat: no-repeat; +} + +::-webkit-scrollbar-button:single-button:vertical { + border-right-width: 2px; + border-left-width: 0; +} + +::-webkit-scrollbar-button:single-button:horizontal { + border-bottom-width: 2px; + border-top-width: 0px; +} +::-webkit-scrollbar-button:single-button:vertical:decrement{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:vertical:decrement:hover, ::-webkit-scrollbar-button:single-button:vertical:decrement:active{ + background-image: url("data:image/svg+xml;utf8,"); +} + +::-webkit-scrollbar-button:single-button:vertical:increment{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:vertical:increment:hover, ::-webkit-scrollbar-button:single-button:vertical:increment:active{ + background-image: url("data:image/svg+xml;utf8,"); +} + +::-webkit-scrollbar-button:single-button:horizontal:increment{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:horizontal:increment:hover, ::-webkit-scrollbar-button:single-button:horizontal:increment:active{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:horizontal:decrement{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:horizontal:decrement:hover, ::-webkit-scrollbar-button:single-button:horizontal:decrement:active { + background-image: url("data:image/svg+xml;utf8,"); +} diff --git a/apps/spreadsheeteditor/main/resources/help/de/editor.css b/apps/spreadsheeteditor/main/resources/help/de/editor.css index 7ef863d129..bb845e934e 100644 --- a/apps/spreadsheeteditor/main/resources/help/de/editor.css +++ b/apps/spreadsheeteditor/main/resources/help/de/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/spreadsheeteditor/main/resources/help/en/editor.css b/apps/spreadsheeteditor/main/resources/help/en/editor.css index c560e98191..05d886262c 100644 --- a/apps/spreadsheeteditor/main/resources/help/en/editor.css +++ b/apps/spreadsheeteditor/main/resources/help/en/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/spreadsheeteditor/main/resources/help/es/editor.css b/apps/spreadsheeteditor/main/resources/help/es/editor.css index 7ef863d129..bb845e934e 100644 --- a/apps/spreadsheeteditor/main/resources/help/es/editor.css +++ b/apps/spreadsheeteditor/main/resources/help/es/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/spreadsheeteditor/main/resources/help/fr/editor.css b/apps/spreadsheeteditor/main/resources/help/fr/editor.css index 3522727c43..9452c3de97 100644 --- a/apps/spreadsheeteditor/main/resources/help/fr/editor.css +++ b/apps/spreadsheeteditor/main/resources/help/fr/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/spreadsheeteditor/main/resources/help/it/editor.css b/apps/spreadsheeteditor/main/resources/help/it/editor.css index 9df9b6e12f..ae79f29754 100644 --- a/apps/spreadsheeteditor/main/resources/help/it/editor.css +++ b/apps/spreadsheeteditor/main/resources/help/it/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/spreadsheeteditor/main/resources/help/ru/editor.css b/apps/spreadsheeteditor/main/resources/help/ru/editor.css index c560e98191..05d886262c 100644 --- a/apps/spreadsheeteditor/main/resources/help/ru/editor.css +++ b/apps/spreadsheeteditor/main/resources/help/ru/editor.css @@ -1,4 +1,5 @@ -body +@import "../scroll.css"; +body { font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; font-size: 12px; diff --git a/apps/spreadsheeteditor/main/resources/help/scroll.css b/apps/spreadsheeteditor/main/resources/help/scroll.css new file mode 100644 index 0000000000..c4ea4bce08 --- /dev/null +++ b/apps/spreadsheeteditor/main/resources/help/scroll.css @@ -0,0 +1,116 @@ +html{ + overflow: scroll; + scrollbar-track-color: #eee; + scrollbar-face-color: #f7f7f7; + scrollbar-highlight-color: #eee; + scrollbar-darkshadow-color: #cbcbcb; + scrollbar-arrow-color: #adadad; + scrollbar-color: #f7f7f7 #eee; +} + +::-webkit-scrollbar { + height: 14px; + width: 14px; + background: #eee; +} + +::-webkit-scrollbar-corner { + background: #eee; +} + +/* thimb*/ +::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 0px 1px #cbcbcb; + background: #f7f7f7; + -webkit-border-radius: 0.1ex; + border: #eee 1px solid; + background-position: center; + background-repeat: no-repeat; +} +::-webkit-scrollbar-thumb:hover { + background: #c0c0c0; + background-position: center; + background-repeat: no-repeat; +} +::-webkit-scrollbar-thumb:active { + background: #adadad; + background-position: center; + background-repeat: no-repeat; +} + +::-webkit-scrollbar-thumb:vertical +{ + border-width: 0 2px 0 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='13px' width='4px' fill='rgb(192,192,192)'%3E%3Crect width = '4' height = '1' x='0' y='0'/%3E%3Crect width = '4' height = '1' x='0' y='2'/%3E%3Crect width = '4' height = '1' x='0' y='4'/%3E%3Crect width = '4' height = '1' x='0' y='6'/%3E%3Crect width = '4' height = '1' x='0' y='8'/%3E%3Crect width = '4' height = '1' x='0' y='10'/%3E%3Crect width = '4' height = '1' x='0' y='12'/%3E%3C/svg%3E"); +} +::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:vertical:active +{ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='13px' width='4px' fill='rgb(236,236,236)'%3E%3Crect width = '4' height = '1' x='0' y='0'/%3E%3Crect width = '4' height = '1' x='0' y='2'/%3E%3Crect width = '4' height = '1' x='0' y='4'/%3E%3Crect width = '4' height = '1' x='0' y='6'/%3E%3Crect width = '4' height = '1' x='0' y='8'/%3E%3Crect width = '4' height = '1' x='0' y='10'/%3E%3Crect width = '4' height = '1' x='0' y='12'/%3E%3C/svg%3E"); +} +::-webkit-scrollbar-thumb:horizontal +{ + border-width: 0 0 2px 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='4px' fill='rgb(192,192,192)'%3E%3Crect width = '1' height = '4' y='0' x='0'/%3E%3Crect width = '1' height = '4' y='0' x='2'/%3E%3Crect width = '1' height = '4' y='0' x='4'/%3E%3Crect width = '1' height = '4' y='0' x='6'/%3E%3Crect width = '1' height = '4' y='0' x='8'/%3E%3Crect width = '1' height = '4' y='0' x='10'/%3E%3Crect width = '1' height = '4' y='0' x='12'/%3E%3C/svg%3E"); +} +::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:horizontal:active +{ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='4px' fill='rgb(236,236,236)'%3E%3Crect width = '1' height = '4' y='0' x='0'/%3E%3Crect width = '1' height = '4' y='0' x='2'/%3E%3Crect width = '1' height = '4' y='0' x='4'/%3E%3Crect width = '1' height = '4' y='0' x='6'/%3E%3Crect width = '1' height = '4' y='0' x='8'/%3E%3Crect width = '1' height = '4' y='0' x='10'/%3E%3Crect width = '1' height = '4' y='0' x='12'/%3E%3C/svg%3E"); +} + +/* buttons*/ +::-webkit-scrollbar-button:single-button { + height: 14px; + width: 14px; + box-shadow: inset 0px 0px 0px 1px #cbcbcb; + border: #eee 1px solid; + background-color: #f7f7f7; + background-position: center; + background-repeat: no-repeat; +} + +::-webkit-scrollbar-button:single-button:hover { + background-color: #c0c0c0; + background-position: center; + background-repeat: no-repeat; +} +::-webkit-scrollbar-button:single-button:active { + background-color: #adadad; + background-position: center; + background-repeat: no-repeat; +} + +::-webkit-scrollbar-button:single-button:vertical { + border-right-width: 2px; + border-left-width: 0; +} + +::-webkit-scrollbar-button:single-button:horizontal { + border-bottom-width: 2px; + border-top-width: 0px; +} +::-webkit-scrollbar-button:single-button:vertical:decrement{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:vertical:decrement:hover, ::-webkit-scrollbar-button:single-button:vertical:decrement:active{ + background-image: url("data:image/svg+xml;utf8,"); +} + +::-webkit-scrollbar-button:single-button:vertical:increment{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:vertical:increment:hover, ::-webkit-scrollbar-button:single-button:vertical:increment:active{ + background-image: url("data:image/svg+xml;utf8,"); +} + +::-webkit-scrollbar-button:single-button:horizontal:increment{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:horizontal:increment:hover, ::-webkit-scrollbar-button:single-button:horizontal:increment:active{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:horizontal:decrement{ + background-image: url("data:image/svg+xml;utf8,"); +} +::-webkit-scrollbar-button:single-button:horizontal:decrement:hover, ::-webkit-scrollbar-button:single-button:horizontal:decrement:active { + background-image: url("data:image/svg+xml;utf8,"); +}