Swap out style.css
body {
color: blue;
font-family: "Arial", "Arial", "Arial", sans-serif;
font-weight: bold;
margin: 10px;
}
header {
background-color: yellow;
padding: 50px 30px;
}
h1 {
font-size: 150%;
}
h3 {
font-family: "Arial", "Arial", "Arial", "Arial", sans-serif;
font-weight: bold;
}
p {
font-size: 80%;
font-weight: bold;
}
article {
-webkit-column-count: 3;
column-count: 3;
}
p {
margin: 5px;
}
/**
* Text Slider Directive - CSS
**/
.text-size-slider {
line-height: 90%;
font-size: 16px;
position: absolute;
}
.text-size-slider .small-letter,.text-size-slider .big-letter
{
font-weight: normal;
}
.text-size-slider .slider {
-webkit-appearance: none;
margin: 5px 10px;
}
.text-size-slider .slider:focus {
outline: none;
}
.text-size-slider .slider::-webkit-slider-thumb {
border: 1px solid black;
cursor: grab;
-webkit-appearance: none;
background-color: rgba(50, 168, 82, 1);
width: 20px;
height: 20px;
border-radius: 50%;
margin-top: -10px;
}
.text-size-slider .slider::-moz-range-thumb {
border: 1px solid black;
cursor: grab;
-webkit-appearance: none;
background-color: rgba(50, 168, 82, 1);
width: 22px;
height: 22px;
border-radius: 50%;
margin-top: -10px;
}
.text-size-slider .slider::-ms-thumb {
border: 1px solid black;
cursor: pointer;
-webkit-appearance: none;
background-color: rgba(50, 168, 82, 1);
width: 20px;
height: 20px;
border-radius: 50%;
margin-top: -10px;
}
.text-size-slider .slider::-webkit-slider-thumb::before {
content:"GOOD";
display:block;
background:blue !important;
height:25px;
width:25px;
position:absolute;
top:-25px;
left:-12px;
}
.text-size-slider .slider::-webkit-slider-thumb::after {
content:"GOOD";
display:block;
background:orange !important;
height:25px;
width:25px;
position:absolute;
top:-25px;
left:-12px;
}
.text-size-slider .slider::-moz-range-thumb::before {
content:"GOOD";
display:block;
background:rgba(50, 168, 82, 1);
height:25px;
width:25px;
position:absolute;
top:-25px;
left:-12px;
}
.pointer {
vertical-align:bottom;
height: 50px;
width: 50px;
border-radius:25px 25px 0 25px;
background-color:rgba(50, 168, 82, 1);
display:block;
transform: rotate(90deg);
position:absolute;
top: -49px;
margin-left:19px;
color: white;
}
.pointer span {
display: inline-block;
transform: rotate(-90deg);
margin-left:15px;
margin-top: 19px;
color: black;
}
.text-size-slider .slider::-webkit-slider-runnable-track {
width: 110%;
height: 4px;
cursor: grab;
border: 1px;
}
.text-size-slider .slider::-ms-track {
width: 110%;
height: 4px;
cursor: pointer;
background: purple;
border: 1px;
}
.text-size-slider .slider::-moz-range-track {
width: 110%;
height: 4px;
cursor: grab;
background-color: #ccc;
border: 1px;
}
.text-size-slider .slider::-moz-range-progress {
background-color: rgba(50, 168, 82, 1);
height: 4px;
}
.text-size-slider .slider::-webkit-progress-value {
background-color: pink;
}{
background-color: rgba(50, 168, 82, 1);
}
@-moz-document url-prefix() { .pointer { top: -50px; } }
.text-size-slider .slider::-ms-fill-lower {
background: purple;
border-radius: 0;
}
.text-size-slider .slider::-ms-fill-upper {
background: white;
border-radius: 0;
}
.text-size-slider .slider{
-webkit-appearance: none;
-moz-apperance: none;
height: 5px;
background-image: -webkit-gradient( linear, right top, left top, color-stop(0.10, #ccc), color-stop(0.10, #ccc) );
}
.text-size-slider .slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
background-color: #F1F1F1;
border: 2px solid #B9B9B9;
height: 25px;
width: 25px;
}