From b665770bf1aec5a9fcc885fe96b5ef038e478048 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Fri, 15 Mar 2013 16:07:45 -0400 Subject: [PATCH] Custom scrollbars. Fixes #1047 --- css/app.css | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/css/app.css b/css/app.css index a596cd1de..1cf3ba871 100644 --- a/css/app.css +++ b/css/app.css @@ -2019,3 +2019,62 @@ a.success-action { 0% { opacity:0; max-height: 0; padding-top: 0; padding-bottom: 0;} 100% { opacity:1; max-height: 160px; top-bottom: 20px; padding-bottom: 20px;} } + +/* Scrollbars + ----------------------------------------------------- */ +::-webkit-scrollbar { + height: 16px; + overflow: visible; + width: 16px; +} +::-webkit-scrollbar-button { + height: 0; + width: 0; +} +::-webkit-scrollbar-track { + background-clip: padding-box; + border: solid transparent; + border-width: 0 0 0 4px; +} +::-webkit-scrollbar-track:horizontal { + border-width: 4px 0 0 +} +::-webkit-scrollbar-track:hover { + background-color: rgba(0,0,0,.05); + box-shadow: inset 1px 0 0 rgba(0,0,0,.1); +} +::-webkit-scrollbar-track:horizontal:hover { + box-shadow: inset 0 1px 0 rgba(0,0,0,.1) +} +::-webkit-scrollbar-track:active { + background-color: rgba(0,0,0,.05); + box-shadow: inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07); +} +::-webkit-scrollbar-track:horizontal:active { + box-shadow: inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07) +} +::-webkit-scrollbar-thumb { + background-color: rgba(0,0,0,.2); + background-clip: padding-box; + border: solid transparent; + border-width: 1px 1px 1px 6px; + min-height: 28px; + padding: 100px 0 0; + box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07); +} +::-webkit-scrollbar-thumb:horizontal { + border-width: 6px 1px 1px; + padding: 0 0 0 100px; + box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.07); +} +::-webkit-scrollbar-thumb:hover { + background-color: rgba(0,0,0,.4); + box-shadow: inset 1px 1px 1px rgba(0,0,0,.25); +} +::-webkit-scrollbar-thumb:active { + background-color: rgba(0,0,0,0.5); + box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35); +} +::-webkit-scrollbar-corner { + background: transparent +}