cinco/glitch-images
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix webkit input styles

Browse Source
This commit is contained in:
Georg Fischer 2016-08-08 20:20:30 +02:00
parent 9296bb6a63
commit 307ec7b542
2 changed files with 78 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
styles/modules/controls.css
View File

@ -219,26 +219,6 @@ input[type=range]:focus {
outline: none; outline: none;
} }
/*input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: rgba(0, 0, 0, 0.95);
border-radius: 3px;
border: 1px solid #333333;
}
input[type=range]::-webkit-slider-thumb {
border: 0.1px solid rgba(102, 102, 102, 0.5);
height: 10px;
width: 10px;
border-radius: 10px;
margin-top: -4px;
background: #999999;
cursor: pointer;
-webkit-appearance: none;
}*/
input[type='range']:not(*:root) { input[type='range']:not(*:root) {
overflow: hidden; overflow: hidden;
background-color: transparent; background-color: transparent;
@ -249,85 +229,57 @@ input[type=range]::-webkit-slider-runnable-track {
border: none; border: none;
background-color: transparent; background-color: transparent;
position: relative; position: relative;
} background: linear-gradient(
to bottom,
/*track background line, full width*/ rgba(255,255,255,0) 0%,
input[type=range]::-webkit-slider-runnable-track::before { rgba(255,255,255,0) 41.9%,
content: ''; rgba(255,255,255,0.2) 42%,
display: block; rgba(255,255,255,0.2) 58%,
position: absolute; rgba(255,255,255,0) 58.1%,
width: 100%; rgba(255,255,255,0) 100%
height: 4px; );
background-color: rgba(255, 255, 255, 0.2);
left: 0;
top: 50%;
transform: translateY(-50%);
transition: background-color 0.2s;
}
input[type=range]:focus::-webkit-slider-runnable-track::before,
input[type=range]:active::-webkit-slider-runnable-track::before {
background-color: rgba(0, 0, 0, 0.5);
} }
/*slider thumb clickable area*/ /*slider thumb clickable area*/
input[type=range]::-webkit-slider-thumb { input[type=range]::-webkit-slider-thumb {
height: 20px; height: 20px;
width: 20px; width: 20px;
border-radius: 45px; border-radius: 45px;
margin-top: 0;
transition: background-color 0.2s; transition: background-color 0.2s;
background-color: transparent;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
appearance: none;
border: none;
background: radial-gradient(
ellipse at center,
rgba(255,255,255,1) 0%,
rgba(255,255,255,1) 30%,
rgba(255,255,255,0) 33%,
rgba(255,255,255,0) 100%
);
-webkit-appearance: none; -webkit-appearance: none;
border: 1px transparent solid;
} }
input[type=range]:focus::-webkit-slider-thumb, input[type=range]:hover::-webkit-slider-thumb,
input[type=range]:active::-webkit-slider-thumb, input[type=range]:active::-webkit-slider-thumb,
.has-touch input[type=range]:focus::-webkit-slider-thumb, input[type=range]:focus::-webkit-slider-thumb {
.has-touch input[type=range]:active::-webkit-slider-thumb { background: radial-gradient(
background-color: rgba(255, 255, 255, 0.5); ellipse at center,
rgba(255,255,255,1) 0%,
rgba(255,255,255,1) 30%,
rgba(255,255,255,0.2) 33%,
rgba(255,255,255,0.2) 100%
);
border: 1px #fff solid;
} }
.has-touch input[type=range]::-webkit-slider-thumb { .has-touch input[type=range]::-webkit-slider-thumb {
height: 38px; height: 40px;
width: 38px; width: 40px;
background-color: rgba(255, 255, 255, 0.2); top: 2px;
}
/*slider thumb point*/
input[type=range]::-webkit-slider-thumb::before {
content: '';
display: block;
position: absolute;
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 14px;
z-index: 2;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: background-color 0.2s;
}
.has-touch input[type=range]::-webkit-slider-thumb::before {
width: 14px;
height: 14px;
}
/*slider current value track*/
input[type=range]::-webkit-slider-thumb::after {
content: '';
display: block;
position: absolute;
width: 100vw;
height: 3px;
top: 50%;
right: 50%;
transform: translateY(-50%);
background-color: #fff;
} }
input[type=range]::-moz-range-track { input[type=range]::-moz-range-track {
@ -372,9 +324,11 @@ input[type=range]::-moz-range-thumb {
ellipse at center, ellipse at center,
rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%,
rgba(255,255,255,1) 30%, rgba(255,255,255,1) 30%,
rgba(255,255,255,0) 30.1%, rgba(255,255,255,0) 33%,
rgba(255,255,255,0) 100% rgba(255,255,255,0) 100%
); );
border: 1px transparent solid;
} }
input[type=range]::-moz-range-thumb:hover, input[type=range]::-moz-range-thumb:hover,
@ -383,9 +337,11 @@ input[type=range]::-moz-range-thumb:hover,
ellipse at center, ellipse at center,
rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%,
rgba(255,255,255,1) 30%, rgba(255,255,255,1) 30%,
rgba(255,255,255,0.2) 30.1%, rgba(255,255,255,0.2) 33%,
rgba(255,255,255,0.2) 100% rgba(255,255,255,0.2) 100%
); );
border: 1px #fff solid;
} }
input[type=range]:focus::-moz-range-thumb, input[type=range]:focus::-moz-range-thumb,
@ -396,9 +352,11 @@ input[type=range]:active::-moz-range-thumb,
ellipse at center, ellipse at center,
rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%,
rgba(255,255,255,1) 30%, rgba(255,255,255,1) 30%,
rgba(255,255,255,0.5) 30.1%, rgba(255,255,255,0.5) 33%,
rgba(255,255,255,0.5) 100% rgba(255,255,255,0.5) 100%
); );
border: 1px #fff solid;
} }
.has-touch input[type=range]::-moz-range-thumb { .has-touch input[type=range]::-moz-range-thumb {

48
styles/modules/workspace-nav.css
View File

@ -114,23 +114,41 @@ html:not(.has-touch) .fullscreen-button:hover {
background-image: url(../../images/icon/fullscreen-exit.svg); background-image: url(../../images/icon/fullscreen-exit.svg);
} }
.workspace-controls input[type=range]::-webkit-slider-runnable-track::before, .workspace-controls input[type=range]::-webkit-slider-runnable-track {
.has-touch .workspace-controls input[type=range]::-webkit-slider-thumb { background: linear-gradient(
background-color: rgba(0, 0, 0, 0.2); to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 41.9%,
rgba(0, 0, 0, 0.2) 42%,
rgba(0, 0, 0, 0.2) 58%,
rgba(0, 0, 0, 0) 58.1%,
rgba(0, 0, 0, 0) 100%
);
} }
.workspace-controls input[type=range]:focus::-webkit-slider-thumb,
.workspace-controls input[type=range]::-webkit-slider-thumb {
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0 ,1) 0%,
rgba(0, 0, 0 ,1) 30%,
rgba(0, 0, 0 ,0) 33%,
rgba(0, 0, 0 ,0) 100%
);
}
.workspace-controls input[type=range]:hover::-webkit-slider-thumb,
.workspace-controls input[type=range]:active::-webkit-slider-thumb, .workspace-controls input[type=range]:active::-webkit-slider-thumb,
.workspace-controls input[type=range]:focus::-webkit-slider-runnable-track::before, .workspace-controls input[type=range]:focus::-webkit-slider-thumb {
.workspace-controls input[type=range]:active::-webkit-slider-runnable-track::before, background: radial-gradient(
.has-touch .workspace-controls input[type=range]:focus::-webkit-slider-thumb, ellipse at center,
.has-touch .workspace-controls input[type=range]:active::-webkit-slider-thumb { rgba(0, 0, 0, 1) 0%,
background-color: rgba(0, 0, 0, 0.5); rgba(0, 0, 0, 1) 30%,
} rgba(0, 0, 0, 0.2) 33%,
rgba(0, 0, 0, 0.2) 100%
);
.workspace-controls input[type=range]::-webkit-slider-thumb::before, border: 1px #000 solid;
.workspace-controls input[type=range]::-webkit-slider-thumb::after {
background-color: rgba(0, 0, 0, 0.9);
} }
.workspace-controls input[type=range]::-moz-range-track { .workspace-controls input[type=range]::-moz-range-track {
@ -176,6 +194,8 @@ html:not(.has-touch) .fullscreen-button:hover {
rgba(0, 0, 0, 0.2) 30.1%, rgba(0, 0, 0, 0.2) 30.1%,
rgba(0, 0, 0, 0.2) 100% rgba(0, 0, 0, 0.2) 100%
); );
border: 1px #000 solid;
} }
.workspace-controls input[type=range]:focus::-moz-range-thumb, .workspace-controls input[type=range]:focus::-moz-range-thumb,
@ -189,6 +209,8 @@ html:not(.has-touch) .fullscreen-button:hover {
rgba(0, 0, 0, 0.5) 30.1%, rgba(0, 0, 0, 0.5) 30.1%,
rgba(0, 0, 0, 0.5) 100% rgba(0, 0, 0, 0.5) 100%
); );
border: 1px #000 solid;
} }
.workspace-controls input[type=range]::-ms-track { .workspace-controls input[type=range]::-ms-track {