diff --git a/src/styles/brackets_codemirror_override.less b/src/styles/brackets_codemirror_override.less index 1599ef45329..6cf969e6966 100644 --- a/src/styles/brackets_codemirror_override.less +++ b/src/styles/brackets_codemirror_override.less @@ -120,9 +120,7 @@ background-color: @background-color-3; border-right: none; } - .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { - background-color: #ebebeb; - } + .platform-mac & { .CodeMirror-scrollbar-filler { background-image: url(images/scrollbar-mac-corner.png); @@ -131,6 +129,27 @@ background-image: url(images/scrollbar-mac-bg.png); } } + .platform-win & { + .CodeMirror-scrollbar-filler, + .CodeMirror-gutter-filler { + background-color: @win-scrollbar-track; + height: 12px !important; + } + .CodeMirror-scrollbar-filler { + width: 12px !important; + } + } + .platform-linux & { + .CodeMirror-scrollbar-filler, + .CodeMirror-gutter-filler { + background-color: @background-color-3; + height: 12px !important; + } + .CodeMirror-scrollbar-filler { + width: 12px !important; + } + } + .CodeMirror-linenumber { color: @accent-comment; min-width: 2.5em; diff --git a/src/styles/brackets_scrollbars.less b/src/styles/brackets_scrollbars.less index 31dcbc4cd0c..ef8e62465aa 100644 --- a/src/styles/brackets_scrollbars.less +++ b/src/styles/brackets_scrollbars.less @@ -32,6 +32,7 @@ ::-webkit-scrollbar { width: 9px; height: 9px; + background-color: transparent; } ::-webkit-scrollbar-corner { @@ -85,7 +86,7 @@ ::-webkit-scrollbar-thumb { border-radius: 999px; - box-shadow: 0 0 0 4px @custom-scrollbar-thumb inset; + box-shadow: 0 0 0 4px @linux-scrollbar-thumb inset; border: 2px solid transparent; } @@ -94,6 +95,36 @@ } ::-webkit-scrollbar-thumb:window-inactive { - box-shadow: 0 0 0 5px @custom-scrollbar-thumb-inactive inset; + box-shadow: 0 0 0 5px @linux-scrollbar-thumb-inactive inset; + } +} + +.platform-win { + ::-webkit-scrollbar { + width: 12px; + height: 12px; + background-color: @win-scrollbar-track; + } + + ::-webkit-scrollbar-thumb { + box-shadow: 0 0 0 12px @win-scrollbar-thumb inset; + } + ::-webkit-scrollbar-thumb:hover, + ::-webkit-scrollbar-thumb:focus { + box-shadow: 0 0 0 12px @win-scrollbar-thumb-hover inset; + } + ::-webkit-scrollbar-thumb:active { + box-shadow: 0 0 0 12px @win-scrollbar-thumb-active inset; + } + + ::-webkit-scrollbar-thumb:vertical { + min-height: 20px; + } + ::-webkit-scrollbar-thumb:horizontal { + min-width: 20px; + } + + ::-webkit-scrollbar-corner { + background: none; } } diff --git a/src/styles/brackets_theme_default.less b/src/styles/brackets_theme_default.less index 590c2ff9685..ca5cd7a09a9 100644 --- a/src/styles/brackets_theme_default.less +++ b/src/styles/brackets_theme_default.less @@ -121,8 +121,13 @@ @activeline-bgcolor: #ebefef; /* custom scrollbar colors */ -@custom-scrollbar-thumb: rgba(0, 0, 0, 0.24); -@custom-scrollbar-thumb-inactive: rgba(0, 0, 0, 0.12); +@win-scrollbar-track: rgb(240, 240, 240); +@win-scrollbar-thumb: rgb(206, 206, 206); +@win-scrollbar-thumb-hover: rgb(166, 166, 166); +@win-scrollbar-thumb-active: rgb(96, 96, 96); + +@linux-scrollbar-thumb: rgba(0, 0, 0, 0.24); +@linux-scrollbar-thumb-inactive: rgba(0, 0, 0, 0.12); /* live preview */ @live-preview-sync-error-background: #ff5d99;