969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
....
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
|
margin: 0.3em 0;
details & { border: none; background: none; }
> input[type="radio"], > input[type="checkbox"] {
display: none;
&+label {
display: block;
flex-grow: 1;
padding: 0.08in 0.05in;
margin: 0.03in;
flex-basis: 15%;
cursor: pointer;
transition: 0.3s;
text-align: center;
border: 1px solid transparent;
text-shadow: 1px 1px black;
color: otone(15%);
border-radius: 4px;
&:nth-child(7n+1) { --co: -10 } //silly hack
&:nth-child(7n+2) { --co: -35 }
&:nth-child(7n+3) { --co: -20 }
&:nth-child(7n+4) { --co: -50 }
&:nth-child(7n+5) { --co: -40 }
&:nth-child(7n+6) { --co: -5 }
&:nth-child(7n+7) { --co: -25 }
................................................................................
border-bottom: 1px solid otone(-50%);
background: linear-gradient(to bottom, otone(-25%,-0.2), otone(-28%,-0.3) 35%, otone(-30%,-0.5));
color: white;
box-shadow: 0 0 0 1px tone(-60%);
&:hover {
border-top: 1px solid otone(10%);
border-bottom: 1px solid otone(-60%);
font-weight: bold;
}
}
}
}
details {
//border: 1px solid tone(-60%);
|
|
<
|
|
>
>
>
>
>
>
>
>
|
|
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
....
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
|
margin: 0.3em 0;
details & { border: none; background: none; }
> input[type="radio"], > input[type="checkbox"] {
display: none;
&+label {
display: block;
flex-grow: 1;
padding: 0.06in 0.05in;
margin: 0.03in;
cursor: pointer;
transition: 0.3s;
text-align: center;
border: 1px solid transparent;
border-radius: 4px;
color: otone(15%);
text-shadow: 1px 1px black,
// transition hints
-0.04ex 0 transparent, 0.04ex 0 transparent,
calc(-0.04ex + 1px) 1px transparent,
calc(0.04ex + 1px) 1px transparent;
&:nth-child(7n+1) { --co: -10 } //silly hack
&:nth-child(7n+2) { --co: -35 }
&:nth-child(7n+3) { --co: -20 }
&:nth-child(7n+4) { --co: -50 }
&:nth-child(7n+5) { --co: -40 }
&:nth-child(7n+6) { --co: -5 }
&:nth-child(7n+7) { --co: -25 }
................................................................................
border-bottom: 1px solid otone(-50%);
background: linear-gradient(to bottom, otone(-25%,-0.2), otone(-28%,-0.3) 35%, otone(-30%,-0.5));
color: white;
box-shadow: 0 0 0 1px tone(-60%);
&:hover {
border-top: 1px solid otone(10%);
border-bottom: 1px solid otone(-60%);
text-shadow: -0.04ex 0 white, 0.04ex 0 white,
calc(-0.04ex + 1px) 1px black,
calc(0.04ex + 1px) 1px black; // fake bold
//font-weight: bold;
}
}
}
}
details {
//border: 1px solid tone(-60%);
|