Created
January 10, 2017 06:38
-
-
Save zhoufenfens/288e60cd9a3d12aa952eb104f28afd92 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* set the width and height */ | |
::-webkit-scrollbar { | |
width: 14px; | |
height: 6px; | |
} | |
/* turn on the buttons at the top */ | |
::-webkit-scrollbar-button:start{ | |
display: block; | |
} | |
/* turn off the buttons at the bottom */ | |
::-webkit-scrollbar-button:end{ | |
display: none | |
} | |
::-webkit-scrollbar-track-piece { | |
background-color: transparent; | |
-webkit-border-radius: 6px; | |
} | |
::-webkit-scrollbar-thumb:vertical { | |
height: 50px; | |
background-color: #666; | |
-webkit-border-radius: 6px; | |
} | |
::-webkit-scrollbar-thumb:horizontal { | |
width: 50px; | |
background-color: #666; | |
-webkit-border-radius: 3px; | |
} | |
::-webkit-scrollbar-corner { | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/corner.png); | |
background-repeat: no-repeat; | |
} | |
::-webkit-scrollbar-corner:window-inactive { | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/corner-inactive.png); | |
} | |
::-webkit-resizer { | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/resizer.png); | |
background-repeat: no-repeat; | |
background-position: bottom right; | |
} | |
::-webkit-resizer:window-inactive { | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/resizer-inactive.png); | |
} | |
::-webkit-scrollbar-track-piece:disabled { | |
display: none !important; | |
} | |
::-webkit-scrollbar-button:disabled { | |
display: none !important; | |
} | |
::-webkit-scrollbar-track:disabled { | |
margin: 6px; | |
} | |
::-webkit-scrollbar:vertical { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button.png) 2 0 2 0; | |
border-color: transparent; | |
border-width: 2px 0; | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background.png); | |
background-repeat: repeat-y; | |
} | |
::-webkit-scrollbar:vertical:corner-present { | |
border-bottom-width: 0; | |
} | |
::-webkit-scrollbar-track:vertical:disabled:corner-present { | |
margin-bottom: 5px; | |
} | |
::-webkit-scrollbar:vertical:window-inactive { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-inactive.png) 2 0 2 0; | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background-inactive.png); | |
} | |
::-webkit-scrollbar-thumb:vertical { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb.png) 13 0 13 0; | |
border-color: transparent; | |
border-width: 13px 0; | |
min-height: 20px; | |
} | |
::-webkit-scrollbar-thumb:vertical:hover { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb-hover.png) 13 0 13 0; | |
} | |
::-webkit-scrollbar-thumb:vertical:active { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb-active.png) 13 0 13 0; | |
} | |
::-webkit-scrollbar-thumb:vertical:window-inactive { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb-inactive.png) 13 0 13 0; | |
} | |
::-webkit-scrollbar-track-piece:vertical:start:no-button, | |
::-webkit-scrollbar-track-piece:vertical:start { | |
margin-top: 6px; | |
} | |
::-webkit-scrollbar-track-piece:vertical:end:no-button, | |
::-webkit-scrollbar-track-piece:vertical:end { | |
margin-bottom: 6px; | |
} | |
::-webkit-scrollbar-track-piece:vertical:end:no-button:corner-present, | |
::-webkit-scrollbar-track-piece:vertical:end:corner-present { | |
margin-bottom: 5px; | |
} | |
::-webkit-scrollbar-track-piece:vertical:start:single-button, | |
::-webkit-scrollbar-track-piece:vertical:start:double-button, | |
::-webkit-scrollbar-track-piece:vertical:start { | |
margin-top: -6px; | |
} | |
::-webkit-scrollbar-track-piece:vertical:end:single-button, | |
::-webkit-scrollbar-track-piece:vertical:end:double-button, | |
::-webkit-scrollbar-track-piece:vertical:end { | |
margin-bottom: -6px; | |
} | |
::-webkit-scrollbar-track:vertical:disabled { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-disabled.png) 13 0 13 0; | |
border-color: transparent; | |
border-width: 13px 0; | |
} | |
::-webkit-scrollbar-track-piece:vertical:decrement { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track.png) 13 0 13 0; | |
border-color: transparent; | |
border-width: 13px 0 0 0; | |
} | |
::-webkit-scrollbar-track-piece:vertical:decrement:hover { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-hover.png) 13 0 13 0; | |
} | |
::-webkit-scrollbar-track-piece:vertical:decrement:active { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-active.png) 13 0 13 0; | |
} | |
::-webkit-scrollbar-track-piece:vertical:increment { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track.png) 13 0 13 0; | |
border-color: transparent; | |
border-width: 0 0 13px 0; | |
} | |
::-webkit-scrollbar-track-piece:vertical:increment:hover { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-hover.png) 13 0 13 0; | |
} | |
::-webkit-scrollbar-track-piece:vertical:increment:active { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-active.png) 13 0 13 0; | |
} | |
::-webkit-scrollbar-button:vertical { | |
height: 20px; | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button.png) 2 0 2 0; | |
border-color: transparent; | |
border-width: 2px 0; | |
} | |
::-webkit-scrollbar-button:vertical:decrement { | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(resources/vertical-button-background.png); | |
background-repeat: no-repeat, repeat-y; | |
background-position: 3px 3px, 0 0; | |
} | |
::-webkit-scrollbar-button:vertical:decrement:hover { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-hover.png) 2 0 2 0; | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-hover.png); | |
} | |
::-webkit-scrollbar-button:vertical:decrement:active { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-active.png) 2 0 2 0; | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-active.png); | |
} | |
::-webkit-scrollbar-button:vertical:decrement:window-inactive { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-inactive.png) 2 0 2 0; | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-inactive.png); | |
} | |
::-webkit-scrollbar-button:vertical:increment { | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(resources/vertical-button-background.png); | |
background-repeat: no-repeat, repeat-y; | |
background-position: 3px 8px, 0 0; | |
} | |
::-webkit-scrollbar-button:vertical:increment:hover { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-hover.png) 2 0 2 0; | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(resources/vertical-button-background-hover.png); | |
} | |
::-webkit-scrollbar-button:vertical:increment:active { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-active.png) 2 0 2 0; | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(resources/vertical-button-background-active.png); | |
} | |
::-webkit-scrollbar-button:vertical:increment:window-inactive { | |
-webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-inactive.png) 2 0 2 0; | |
background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(resources/vertical-button-background-inactive.png); | |
} | |
::-webkit-scrollbar-button:double-button:vertical:start:decrement, | |
::-webkit-scrollbar-button:vertical:start:decrement, | |
{ | |
height: 14px; | |
border-bottom-width: 0; | |
background-position: 3px 3px, 0 0; | |
} | |
::-webkit-scrollbar-button:double-button:vertical:start:increment, | |
::-webkit-scrollbar-button:vertical:start:increment{ | |
background-position: 3px 4px, 0 0; | |
} | |
::-webkit-scrollbar-button:double-button:vertical:end:decrement, | |
{ | |
background-position: 3px 8px, 0 0; | |
} | |
::-webkit-scrollbar-button:double-button:vertical:end:increment { | |
height: 14px; | |
border-top-width: 0; | |
background-position: 3px 4px, 0 0; | |
} | |
::-webkit-scrollbar-button:vertical:end:increment:corner-present { | |
border-bottom-width: 0; | |
height: 19px; | |
} | |
::-webkit-scrollbar-button:double-button:vertical:end:increment:corner-present, | |
::-webkit-scrollbar-button:vertical:end:increment:corner-present { | |
height: 13px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment