.qr-holder{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.qr-code{
background: #fff;
padding: 20px;
margin: auto;
}
.note{
font-size: 0.7em;
}
.copy{
display: none;
height: 30px;
width: 30px;
color: #000;
margin: 0;
margin-bottom: -30px;
margin-left: auto;
z-index: 3;
cursor: pointer;
border-radius: 3px;
box-sizing: border-box;
background: rgba(255,255,255,0.7);
padding: 3px;
}
.qr-holder:hover .copy{
display: block;
}
.copy:hover{
background: rgba(255,255,255,1);
}
.copy img{
width: 10px;
}
.range {
opacity: 0.3;
display: none;
color: #000;
background: #fff;
height: 2rem;
width: 55%;
min-width: 250px;
border-radius: 5rem;
box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.3);
align-items: center;
justify-content: center;
}
.qr-holder:hover .range {
opacity: 0.9;
}
input[type="range"] {
-webkit-appearance: none;
width: 80%;
height: 100%;
background: transparent;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #fff;
margin-top: -5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 60%;
height: 9px;
background: #bdbdbd;
border-radius: 3rem;
transition: all 0.5s;
cursor: pointer;
}
input[type="range"]:hover::-webkit-slider-runnable-track {
background: var(--cmap-blue);
}
input[type="range"]::-ms-track {
width: 60%;
cursor: pointer;
height: 9px;
transition: all 0.5s;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
input[type="range"]::-ms-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: #fff;
margin-top: -5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
input[type="range"]::-ms-fill-lower {
background: #bdbdbd;
border-radius: 3rem;
}
input[type="range"]:focus::-ms-fill-lower {
background: var(--cmap-blue);
}
input[type="range"]::-ms-fill-upper {
background: #bdbdbd;
border-radius: 3rem;
}
input[type="range"]:focus::-ms-fill-upper {
background: var(--cmap-blue);
}
input[type="range"]::-moz-range-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: #fff;
margin-top: -5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
input[type="range"]::-moz-range-track {
width: 60%;
height: 9px;
background: #bdbdbd;
border-radius: 3rem;
transition: all 0.5s;
cursor: pointer;
}
input[type="range"]:hover::-moz-range-track {
background: var(--cmap-blue);
}
Click to animate
- +