65 lines
2.1 KiB
CSS
65 lines
2.1 KiB
CSS
|
|
/* inspired by https://codepen.io/wildbeard/pen/eZZPZr */
|
|
|
|
|
|
|
|
input[type="radio"] {
|
|
display: none;
|
|
}
|
|
input[type="radio"]:checked + label span { transform: scale(1.25); }
|
|
|
|
input[type="radio"]:checked + label .gra { border: 2px solid #ffffff;}
|
|
input[type="radio"]:checked + label .red { border: 2px solid #ffffff;}
|
|
input[type="radio"]:checked + label .ora { border: 2px solid #ffffff;}
|
|
input[type="radio"]:checked + label .gre { border: 2px solid #ffffff;}
|
|
input[type="radio"]:checked + label .blu { border: 2px solid #ffffff;}
|
|
input[type="radio"]:checked + label .pin { border: 2px solid #ffffff;}
|
|
input[type="radio"]:checked + label .vio { border: 2px solid #ffffff;}
|
|
input[type="radio"]:checked + label .bla { border: 2px solid #ffffff;}
|
|
|
|
label {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
}
|
|
label:hover span {
|
|
/* transform: scale(1.25); */
|
|
}
|
|
label span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform .2s ease-in-out;
|
|
}
|
|
|
|
/* grey, red, orange, green, blue, pink, violet, black */
|
|
label span.gra { background: #7a7a7a;}
|
|
label span.red { background: #DB2828;}
|
|
label span.ora { background: #F2711C;}
|
|
label span.gre { background: #21BA45;}
|
|
label span.blu { background: #2185D0;}
|
|
label span.pin { background: #E03997;}
|
|
label span.vio { background: #8840FF;}
|
|
label span.bla { background: #000000;}
|
|
|
|
.row_accent0 {border-left: 10px solid #696969; }
|
|
.row_accent1 {border-left: 10px solid rgb(114, 38, 38); }
|
|
.row_accent2 {border-left: 10px solid rgb(117, 70, 38); }
|
|
.row_accent3 {border-left: 10px solid rgb(42, 107, 57); }
|
|
.row_accent4 {border-left: 10px solid rgb(41, 87, 122); }
|
|
.row_accent5 {border-left: 10px solid rgb(124, 57, 95); }
|
|
.row_accent6 {border-left: 10px solid rgb(91, 67, 129); }
|
|
.row_accent7 {border-left: 10px solid #181818; }
|
|
.row_accentExtras {border-left: 10px solid #acacac; }
|
|
|
|
.accent_{
|
|
background-color: rgba(255,255,255,0.05);
|
|
border: 0px solid yellow;
|
|
width:100%;
|
|
padding:10px;
|
|
margin-bottom:15px;
|
|
border-left: 12px solid white;
|
|
box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
|
} |