Merge branch 'css-fixes'
This commit is contained in:
Georg Fischer
commit
62003a985f
@ -219,26 +219,6 @@ input[type=range]:focus {
|
||||
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) {
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
@ -249,85 +229,57 @@ input[type=range]::-webkit-slider-runnable-track {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*track background line, full width*/
|
||||
input[type=range]::-webkit-slider-runnable-track::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 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);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255,255,255,0) 0%,
|
||||
rgba(255,255,255,0) 41.9%,
|
||||
rgba(255,255,255,0.2) 42%,
|
||||
rgba(255,255,255,0.2) 58%,
|
||||
rgba(255,255,255,0) 58.1%,
|
||||
rgba(255,255,255,0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/*slider thumb clickable area*/
|
||||
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 45px;
|
||||
margin-top: 0;
|
||||
transition: background-color 0.2s;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
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;
|
||||
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,
|
||||
.has-touch input[type=range]:focus::-webkit-slider-thumb,
|
||||
.has-touch input[type=range]:active::-webkit-slider-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
input[type=range]:focus::-webkit-slider-thumb {
|
||||
background: radial-gradient(
|
||||
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 {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/*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;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-track {
|
||||
@ -372,9 +324,11 @@ input[type=range]::-moz-range-thumb {
|
||||
ellipse at center,
|
||||
rgba(255,255,255,1) 0%,
|
||||
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%
|
||||
);
|
||||
|
||||
border: 1px transparent solid;
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-thumb:hover,
|
||||
@ -383,9 +337,11 @@ input[type=range]::-moz-range-thumb:hover,
|
||||
ellipse at center,
|
||||
rgba(255,255,255,1) 0%,
|
||||
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%
|
||||
);
|
||||
|
||||
border: 1px #fff solid;
|
||||
}
|
||||
|
||||
input[type=range]:focus::-moz-range-thumb,
|
||||
@ -396,9 +352,11 @@ input[type=range]:active::-moz-range-thumb,
|
||||
ellipse at center,
|
||||
rgba(255,255,255,1) 0%,
|
||||
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%
|
||||
);
|
||||
|
||||
border: 1px #fff solid;
|
||||
}
|
||||
|
||||
.has-touch input[type=range]::-moz-range-thumb {
|
||||
|
||||
@ -114,23 +114,41 @@ html:not(.has-touch) .fullscreen-button:hover {
|
||||
background-image: url(../../images/icon/fullscreen-exit.svg);
|
||||
}
|
||||
|
||||
.workspace-controls input[type=range]::-webkit-slider-runnable-track::before,
|
||||
.has-touch .workspace-controls input[type=range]::-webkit-slider-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
.workspace-controls input[type=range]::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(
|
||||
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]:focus::-webkit-slider-runnable-track::before,
|
||||
.workspace-controls input[type=range]:active::-webkit-slider-runnable-track::before,
|
||||
.has-touch .workspace-controls input[type=range]:focus::-webkit-slider-thumb,
|
||||
.has-touch .workspace-controls input[type=range]:active::-webkit-slider-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.workspace-controls input[type=range]:focus::-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.2) 33%,
|
||||
rgba(0, 0, 0, 0.2) 100%
|
||||
);
|
||||
|
||||
.workspace-controls input[type=range]::-webkit-slider-thumb::before,
|
||||
.workspace-controls input[type=range]::-webkit-slider-thumb::after {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
border: 1px #000 solid;
|
||||
}
|
||||
|
||||
.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) 100%
|
||||
);
|
||||
|
||||
border: 1px #000 solid;
|
||||
}
|
||||
|
||||
.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) 100%
|
||||
);
|
||||
|
||||
border: 1px #000 solid;
|
||||
}
|
||||
|
||||
.workspace-controls input[type=range]::-ms-track {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user