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