update chooser to latest

Author: possumbilities

src/chooser/css/chooser.css

@@ -12,49 +12,42 @@
 
 .icon-attach.cc-by:before {
     --icon-sprite: var(--cc-by);
-    /* --icon-sprite-size: 2em; */
     margin-right: .2em;
     margin-bottom: -.125em;
 }
 
 .icon-attach.cc-nc:before {
     --icon-sprite: var(--cc-nc);
-    /* --icon-sprite-size: 2em; */
     margin-right: .2em;
     margin-bottom: -.125em;
 }
 
 .icon-attach.cc-nd:before {
     --icon-sprite: var(--cc-nd);
-    /* --icon-sprite-size: 2em; */
     margin-right: .2em;
     margin-bottom: -.125em;
 }
 
 .icon-attach.cc-pd:before {
     --icon-sprite: var(--cc-pd);
-    /* --icon-sprite-size: 2em; */
     margin-right: .2em;
     margin-bottom: -.125em;
 }
 
 .icon-attach.cc-pdm:before {
     --icon-sprite: var(--cc-pdm);
-    /* --icon-sprite-size: 2em; */
     margin-right: .2em;
     margin-bottom: -.125em;
 }
 
 .icon-attach.cc-sa:before {
     --icon-sprite: var(--cc-sa);
-    /* --icon-sprite-size: 2em; */
     margin-right: .2em;
     margin-bottom: -.125em;
 }
 
 .icon-attach.cc-zero:before {
     --icon-sprite: var(--cc-zero);
-    /* --icon-sprite-size: 2em; */
     margin-right: .2em;
     margin-bottom: -.125em;
 }
@@ -75,6 +68,10 @@ dd {
     margin-left: .2em;
 }
 
+dd span {
+    display: block;
+}
+
 ol li:has(.disable) {
     display: none;
 }
@@ -98,7 +95,6 @@ ol li:has(.disable) {
 
 .tool header > .tool-icons {
     order: -1;
-    /* margin: 1.8em 1em 0 0; */
     margin: 0 1em 0 0;
 }
 
@@ -117,7 +113,6 @@ ol li:has(.disable) {
 
 .mark svg {
     display: inline;
-    /* font-size: 1em; */
     width: 1.3em;
     height: 1.3em;
 }
@@ -138,25 +133,24 @@ form#chooser > ol {
 }
 
 form#chooser > ol li {
-counter-increment: chooser-counter;
+    counter-increment: chooser-counter;
 }
 form#chooser > ol li::before {
-position: absolute;
---size: 32px;
-left: calc(-1 * var(--size) - 25px);
-min-height: 2em;
-min-width: 2em;
-padding-top: .4em;
-box-sizing: border-box;
-
-content: counter(chooser-counter);
-font-weight: bold;
-border-radius: 200px;
-background: var(--vocabulary-neutral-color-lighter-gray);
-color: black;
-text-align: center;
-vertical-align: middle;
-
+    position: absolute;
+    --size: 32px;
+    left: calc(-1 * var(--size) - 25px);
+    min-height: 2em;
+    min-width: 2em;
+    padding-top: .4em;
+    box-sizing: border-box;
+
+    content: counter(chooser-counter);
+    font-weight: bold;
+    border-radius: 200px;
+    background: var(--vocabulary-neutral-color-lighter-gray);
+    color: black;
+    text-align: center;
+    vertical-align: middle;
 }
 
 form#chooser legend {
@@ -167,6 +161,50 @@ form#chooser fieldset {
     margin-bottom: 1em;
 }
 
+form#chooser label {
+    font-size: .7em;
+    font-weight: 400;
+}
+
+form#chooser #attribution-details span {
+    display: inline-block;
+    padding: .7em 0;
+
+    font-size: .8em;
+    line-height: 1.3;
+}
+
+form#chooser #attribution-details div {
+    margin-bottom: .5em;
+} 
+
+form#chooser #waive-your-copyright div {
+    margin-bottom: 1em;
+}
+
+form#chooser #attribution-details input {
+    padding: .2em .2em;
+
+    font-size: 1em;
+}
+
+
+form#chooser #atrribution-details input::placeholder {
+    opacity: .5;
+}
+
+aside #empty {
+    min-height: 10em;
+    padding: 2em;
+
+    background: var(--vocabulary-brand-color-soft-turquoise);
+    background: var(--vocabulary-neutral-color-lighter-gray);
+}
+
+aside #empty p {
+    font-size: 1.2em;
+}
+
 #tool-recommendation {
     margin-bottom: 4em;
 
@@ -183,10 +221,6 @@ form#chooser fieldset {
     --underline-background-color: var(--vocabulary-brand-color-soft-turquoise);
 }
 
-#tool-recommendation h2 {
-    /* font-size: 1.8em; */
-}
-
 #tool-recommendation h3 {
     margin: 0;
 
@@ -219,8 +253,11 @@ form#chooser fieldset {
     font-weight: 700;
 }
 
-#mark-your-work {
-    /* border-top: 1px solid var(--vocabulary-neutral-color-lighter-gray); */
+#mark-your-work textarea {
+    min-height: 9em;
+    width: 90%;
+    margin: 1em;
+    box-sizing: border-box;
 }
 
 #mark-your-work p {
@@ -242,10 +279,6 @@ details.medium {
     margin-bottom: 1em;
 }
 
-details.medium:open > summary {
-    /* margin-bottom: 1em; */
-}
-  
 details summary {
     padding: .2em .5em;
 
@@ -257,7 +290,6 @@ details.format summary {
     font-size: 1.3em;
 }
 
-  
 summary:hover {
     cursor: pointer;
 }
@@ -272,11 +304,53 @@ details p {
     font-size: 1em;
 }
 
+details.format footer {
+    display: flex;
+    justify-content: space-between;
+    padding: 1em;
+}
+
+details.format footer label {
+    margin-left: .2em;
+}
+
+details.format footer button {
+    padding: .5em 1em;
+
+    background: #324C7F;
+    color: white;
+    border-radius: 3px;
+    border: none;
+}
+
+details.format footer button:hover {
+    cursor: pointer;
+}
+
 body.chooser-page .content {
     grid-column: 3 / 10;
-
 }
 
+#help {
+    margin-top: 4em;
+ }
+
+ #help details {
+    margin-bottom: 1em;
+ }
+
+ #help ul {
+    font-size: 1em;
+    padding: 0 1em;
+ }
+
+ #help ul li {
+    padding-bottom: .5em;
+ }
+
+ #help dl {
+    padding: 0 1em;
+ }
 
 
 @media (max-width: 705px) {
@@ -285,13 +359,6 @@ body.chooser-page .content {
     }
 }
 
-
-/* debug styles */
-.help {
-    display: none;
-}
-
-
 .panel {
     display: none;
 }