wip

style.css

@@ -85,8 +85,8 @@ CUSTOM STYLE
 
 :root {
   /* https://materialui.co/colors/ */
-  --hue-primary: 65.52;
-  --sat-primary: 20%;
+  --hue-primary: 348.36;
+  --sat-primary: 100.00%;
   --background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
   --background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%);
   --background-secondary: hsl(var(--hue-primary), var(--sat-primary), 90%);
@@ -169,3 +169,90 @@ a {
     font-size: inherit;
   }
 }
+
+button.red {
+  --hue-primary: 4.11;
+  --sat-primary: 89.62%;
+}
+
+button.green {
+  --hue-primary: 87.77;
+  --sat-primary: 50.21%;
+}
+
+button.inactive {
+  --sat-primary: 25%;
+}
+
+button:disabled {
+  --sat-primary: 5%;
+  cursor: no-drop;
+}
+
+button {
+  border: 1px solid hsl(var(--hue-primary), var(--sat-primary), 50%);
+  background-color: hsl(var(--hue-primary), var(--sat-primary), 90%);
+  border-radius: 0.5em;
+  cursor: pointer;
+  padding: .25em .5em;
+}
+
+button:hover {
+  background-color: hsl(var(--hue-primary), var(--sat-primary), 92%);
+}
+
+button:active {
+  background-color: hsl(var(--hue-primary), var(--sat-primary), 94%);
+}
+
+.sound-container {
+  display:flex;
+  flex-flow: row wrap;
+  gap: .5em;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.sound-container button {
+  flex-basis: 31%;
+  height: 4em;
+  width: 100%;
+  position:relative;
+  padding: .5em;
+}
+
+.sound-container button::before {
+  content: '🔊';
+  display: block;
+  position: absolute;
+  top: .25em;
+  left: .25em;
+}
+
+.sound-container button.inactive::before {
+  content: '🔇';
+}
+
+h3 > a {
+  font-weight: normal;
+}
+
+.start {
+  width: 100%;
+  font-weight: bold;
+  font-size: larger;
+  padding: .5em;
+}
+
+table.config td:first-child {
+  text-align: right;
+}
+
+table.config input {
+  width: 100%;
+}
+
+table.config button {
+  width: 100%;
+  margin-top: .5em;
+}