From 6549c1aa043250b9d02684a6771dba5746d4f8ab Mon Sep 17 00:00:00 2001 From: Donald Hanson Date: Mon, 20 Aug 2018 21:20:43 -0700 Subject: [PATCH] css scrollbar color --- example/codeKeyframes.css | 2 +- src/scss/style.scss | 48 +++++++++++++++++++++++++++++++++++---- 2 files changed, 44 insertions(+), 6 deletions(-) diff --git a/example/codeKeyframes.css b/example/codeKeyframes.css index d0ca29d..2847843 100644 --- a/example/codeKeyframes.css +++ b/example/codeKeyframes.css @@ -1 +1 @@ -#ckf-editor{background-color:#222;position:fixed;bottom:0;left:0;width:100%;font-family:monaco, monospace;-webkit-font-smoothing:antialiased}#ckf-editor .ckf-label{position:absolute;bottom:100%;left:0;font-size:10px;background-color:inherit;color:#fff;padding:0 5px 0 2px}#ckf-editor #ckf-waveform{height:150px}#ckf-editor #ckf-waveform:focus,#ckf-editor #ckf-waveform:active{outline:none;background-color:#282828}#ckf-editor #ckf-waveform>wave{height:150px !important}#ckf-editor #ckf-waveform>wave canvas{height:100px !important}#ckf-editor.closed #ckf-waveform{height:70px}#ckf-editor.closed #ckf-waveform>wave{height:70px !important}#ckf-editor.closed #ckf-waveform>wave canvas{height:50px !important}#ckf-editor.closed region{display:none}#ckf-editor region.wavesurfer-region{background-color:transparent !important;border-left:2px solid #fff;cursor:pointer}#ckf-editor region.wavesurfer-region:after{content:'';display:block;position:absolute;bottom:0;left:0;cursor:pointer;width:0;height:0;border-style:solid;border-width:30px 0 0 30px;border-color:transparent transparent transparent #fff}#ckf-editor region.wavesurfer-region.active{border-left:2px solid violet}#ckf-editor region.wavesurfer-region.active:after{border-color:transparent transparent transparent violet}#ckf-editor .code-form{display:-webkit-box;display:-ms-flexbox;display:flex}#ckf-editor textarea#code{width:100%;resize:none;background-color:#222;padding:10px;font-family:monospace;color:#fff}#ckf-editor textarea#code:focus,#ckf-editor textarea#code:active{outline:none;background-color:#333}#ckf-editor textarea#code.error{color:#ff6666}#ckf-editor .controls a{color:#fff;text-decoration:none;background-color:#333;display:block;text-align:center;padding:10px;text-transform:uppercase;border-bottom:1px solid #ccc;font-size:10px;width:140px} +#ckf-editor{background-color:#222;position:fixed;bottom:0;left:0;width:100%;font-family:monaco, monospace;-webkit-font-smoothing:antialiased}#ckf-editor .ckf-label{position:absolute;bottom:100%;left:0;font-size:10px;background-color:inherit;color:#fff;padding:0 5px 0 2px}#ckf-editor #ckf-waveform{height:150px}#ckf-editor #ckf-waveform:focus,#ckf-editor #ckf-waveform:active{outline:none;background-color:#282828}#ckf-editor #ckf-waveform>wave{height:150px !important}#ckf-editor #ckf-waveform>wave canvas{height:100px !important}#ckf-editor.closed #ckf-waveform{height:50px}#ckf-editor.closed #ckf-waveform>wave{height:50px !important}#ckf-editor.closed #ckf-waveform>wave canvas{height:30px !important}#ckf-editor.closed region{display:none}#ckf-editor region.wavesurfer-region{background-color:transparent !important;border-left:2px solid #fff;cursor:pointer}#ckf-editor region.wavesurfer-region:after{content:'';display:block;position:absolute;bottom:0;left:0;cursor:pointer;width:0;height:0;border-style:solid;border-width:30px 0 0 30px;border-color:transparent transparent transparent #fff}#ckf-editor region.wavesurfer-region.active{border-left:2px solid violet}#ckf-editor region.wavesurfer-region.active:after{border-color:transparent transparent transparent violet}#ckf-editor .code-form{display:-webkit-box;display:-ms-flexbox;display:flex}#ckf-editor textarea#code{width:100%;resize:none;background-color:#222;padding:10px;font-family:monospace;color:#fff}#ckf-editor textarea#code:focus,#ckf-editor textarea#code:active{outline:none;background-color:#333}#ckf-editor textarea#code.error{color:#ff6666}#ckf-editor .controls{border-top:1px solid #666}#ckf-editor .controls a{color:#fff;text-decoration:none;background-color:#222;display:block;text-align:center;padding:10px;text-transform:uppercase;border-bottom:1px solid #666;font-size:10px;width:140px}#ckf-editor .controls a:hover{background-color:#2a2a2a}#ckf-editor ::-webkit-scrollbar{width:10px;height:10px}#ckf-editor ::-webkit-scrollbar-button{width:0px;height:0px}#ckf-editor ::-webkit-scrollbar-thumb{background:#666;border:0;border-radius:0px}#ckf-editor ::-webkit-scrollbar-thumb:hover{background:#999}#ckf-editor ::-webkit-scrollbar-thumb:active{background:#ccc}#ckf-editor ::-webkit-scrollbar-track{background:#333;border:0;border-radius:0px}#ckf-editor ::-webkit-scrollbar-track:hover{background:#333}#ckf-editor ::-webkit-scrollbar-track:active{background:#333}#ckf-editor ::-webkit-scrollbar-corner{background:transparent} diff --git a/src/scss/style.scss b/src/scss/style.scss index 519589f..58e7ca0 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -36,13 +36,13 @@ &.closed{ #ckf-waveform{ - height: 70px; + height: 50px; >wave{ - height: 70px!important; + height: 50px!important; canvas{ - height: 50px!important; + height: 30px!important; } } } @@ -100,17 +100,55 @@ } .controls{ + border-top: 1px solid #666; a{ color:#fff; text-decoration: none; - background-color: #333; + background-color: #222; display: block; text-align: center; padding: 10px; text-transform: uppercase; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid #666; font-size: 10px; width: 140px; + &:hover{ + background-color: #2a2a2a; + } } } + + ::-webkit-scrollbar { + width: 10px; + height: 10px; + } + ::-webkit-scrollbar-button { + width: 0px; + height: 0px; + } + ::-webkit-scrollbar-thumb { + background: #666; + border: 0; + border-radius: 0px; + } + ::-webkit-scrollbar-thumb:hover { + background: #999; + } + ::-webkit-scrollbar-thumb:active { + background: #ccc; + } + ::-webkit-scrollbar-track { + background: #333; + border: 0; + border-radius: 0px; + } + ::-webkit-scrollbar-track:hover { + background: #333; + } + ::-webkit-scrollbar-track:active { + background: #333; + } + ::-webkit-scrollbar-corner { + background: transparent; + } } \ No newline at end of file