Differences From
Artifact [f40a20016f]:
602 602 }
603 603 form {
604 604 margin: 0.15in 0;
605 605 > p:first-child { margin-top: 0; }
606 606 > p:last-child { margin-bottom: 0; }
607 607 .elem {
608 608 margin: 0.1in 0;
609 - label { display:block; font-weight: bold; padding: 0.03in 0; }
610 - .txtbox {
609 + > label,summary { display:block; font-weight: bold; padding: 0.03in 0; }
610 + > .txtbox {
611 611 @extend %serif;
612 612 box-sizing: border-box;
613 613 padding: 0.08in 0.1in;
614 614 border: 1px solid black;
615 615 background: tone(-55%);
616 616 }
617 - input, textarea, .txtbox {
617 + > input, textarea, .txtbox {
618 618 display: block;
619 619 width: 100%;
620 620 }
621 - textarea { resize: vertical; min-height: 2in; }
621 + > textarea { resize: vertical; min-height: 2in; }
622 622 }
623 - :is(.elem,.elem-group) + %button { margin-left: 50%; width: 50%; }
623 + body.conf & > %button { margin-left: 50%; width: 50%; }
624 624 .elem-group {
625 625 display: flex;
626 626 flex-flow: row;
627 627 > .elem {
628 628 flex-shrink: 1;
629 629 flex-grow: 1;
630 630 margin-left: 0.1in;
................................................................................
767 767 text-align: center;
768 768 padding: 0.3em 0;
769 769 margin: 0.2em 0.1em;
770 770 cursor: default;
771 771 }
772 772 }
773 773
774 -:is(%button, a[href]).neg { --co: 60 }
774 +:is(%button, a[href]).neg { --co: 30 }
775 775 :is(%button, a[href]).pos { --co: -30 }
776 +
777 +.pick-list {
778 + display: flex;
779 + flex-flow: row wrap;
780 + padding: 0.1in;
781 + background-color: tone(-50%);
782 + border: 1px solid tone(-53%);
783 + border-top: 1px solid tone(-57%);
784 + border-bottom: 1px solid tone(-45%);
785 + margin: 0.3em 0;
786 + details & { border: none; background: none; }
787 + > input[type="radio"], > input[type="checkbox"] {
788 + display: none;
789 + &+label {
790 + display: block;
791 + flex-grow: 1;
792 + padding: 0.08in 0.05in;
793 + margin: 0.03in;
794 + flex-basis: 15%;
795 + cursor: pointer;
796 + transition: 0.3s;
797 + text-align: center;
798 + border: 1px solid transparent;
799 + text-shadow: 1px 1px black;
800 + color: otone(15%);
801 + border-radius: 4px;
802 + &:nth-child(7n+1) { --co: -10 } //silly hack
803 + &:nth-child(7n+2) { --co: -35 }
804 + &:nth-child(7n+3) { --co: -20 }
805 + &:nth-child(7n+4) { --co: -50 }
806 + &:nth-child(7n+5) { --co: -40 }
807 + &:nth-child(7n+6) { --co: -5 }
808 + &:nth-child(7n+7) { --co: -25 }
809 + }
810 + &+label:hover {
811 + background-color: otone(-35%);
812 + color: white;
813 + }
814 + &:checked+label {
815 + border-top: 1px solid otone(-10%);
816 + border-bottom: 1px solid otone(-50%);
817 + background: linear-gradient(to bottom, otone(-25%,-0.2), otone(-28%,-0.4) 35%, otone(-30%,-0.7));
818 + color: white;
819 + box-shadow: 0 0 0 1px tone(-60%);
820 + &:hover {
821 + border-top: 1px solid otone(10%);
822 + border-bottom: 1px solid otone(-60%);
823 + font-weight: bold;
824 + }
825 + }
826 + }
827 +}
828 +
829 +details {
830 + //border: 1px solid tone(-60%);
831 + border-top: 1px solid tone(-40%);
832 + border-bottom: 1px solid tone(-60%);
833 + border-radius: 3px;
834 + padding: 0.05in 0.3in;
835 + margin: 0.08in 0;
836 + // background: linear-gradient(to top, tone(-55%), tone(-50%));
837 + background: tone(-50%);
838 + & > summary {
839 + display: block;
840 + margin: 0 -0.25in;
841 + cursor: pointer;
842 + user-select: none;
843 + text-decoration: underline;
844 + text-decoration-color: tone(10%,-0.5);
845 + text-underline-offset: 0.1em;
846 + text-shadow: 1px 1px black;
847 + font-weight: normal;
848 +
849 + &:hover {
850 + color: white;
851 + text-decoration-color: tone(10%,-0.1);
852 + }
853 + &::marker { display: none; }
854 + &::-webkit-details-marker { display: none; }
855 + &::before {
856 + display: inline-block;
857 + content: '➤';
858 + padding: 0 0.3em;
859 + color: tone(-30%);
860 + transition: 0.4s;
861 + }
862 + }
863 + &[open] {
864 + // background: linear-gradient(to bottom, tone(-55%), tone(-50%));
865 + border-bottom: 1px solid tone(-40%);
866 + border-top: 1px solid tone(-60%);
867 + > summary {
868 + font-weight: bold;
869 + &::before {
870 + transform: rotate(90deg) scale(1.1);
871 + color: tone(-20%);
872 + text-shadow: 0 0 8px tone(-30%);
873 + }
874 + }
875 + }
876 +}