diff --git a/s/krautchan.css b/s/krautchan.css index 8d51e00..3a982f8 100644 --- a/s/krautchan.css +++ b/s/krautchan.css @@ -114,4 +114,126 @@ code { padding-bottom: 5px; font-weight: bold; background: #aaaacc; +} + +.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large { + background: #eeeeee; + color: #3535cb; + border-radius: 0; +} + +.plyr--video .plyr__controls { + position: absolute; + left: 0; + right: 0; + bottom: 0; + z-index: 2; + padding: 0px 0px 0px; + background: rgb(238, 238, 238); + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + color: #3535cb; + transition: opacity .3s cubic-bezier(0.12, 0.63, 0.25, 1); +} + +span.plyr__time--current { + color: #000; +} + +.plyr__progress--played, .plyr__volume--display { + z-index: 1; + color: #3535cb; + background: 0 0; + transition: none; +} + +.plyr--video .plyr__progress--buffer { + color: rgb(49, 51, 112); +} + +.plyr--video .plyr__progress--buffer, .plyr--video .plyr__volume--display { + background: rgb(170, 170, 204); +} + +.plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover { + background: #3535cb; + color: #eeeeee; + border-radius: 0; +} + +.plyr input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: -4px; + position: relative; + height: 16px; + width: 16px; + background: #eeeeee; + border: 2px solid #3535cb; + border-radius: 100%; + transition: background .2s ease,border .2s ease,transform .2s ease; + box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15); + box-sizing: border-box; +} + +.plyr input[type=range]:active::-webkit-slider-thumb { + background: #eeeeee; + border-color: #3535cb; + transform: scale(1.25) +} + +.plyr__controls button { + position: relative; + display: inline-block; + -ms-flex-negative: 0; + flex-shrink: 0; + overflow: visible; + vertical-align: middle; + padding: 7px; + border: 0; + background: 0 0; + border-radius: 0px; + cursor: pointer; + transition: background .3s ease,color .3s ease,opacity .3s ease; + color: inherit; +} + +/* Feuerfick */ +.plyr input[type="range"]::-moz-range-thumb { + position: relative; + height: 16px; + width: 16px; + background: #eeeeee; + border: 2px solid #3535cb; + border-radius: 100%; + transition: background .2s ease, border .2s ease, transform .2s ease; + box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .15); + box-sizing: border-box; +} + +.plyr input[type=range]:active::-moz-range-thumb { + background: #eeeeee; + border-color: #3535cb; + transform: scale(1.25) +} + +/* Audio */ +.plyr--audio .plyr__controls { + padding: 0; + border-radius: inherit; + background: #eeeeee; + border: 0; + color: #3333cc; + width: 300px; + padding-right: 5; + height: 32px; +} + +.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large { + background: #3535cb; + color: #eeeeee; + border-radius: 0; +} + +.plyr--audio .plyr__progress--buffer, .plyr--audio .plyr__volume--display { + background: rgb(170, 170, 204); } \ No newline at end of file