wip: review form style with Aurelie

umap/static/umap/base.css

@@ -159,6 +159,51 @@ input[type="range"] {
 input[type="checkbox"] {
     margin: 0 5px;
     vertical-align: middle;
+    appearance: none;
+}
+input[type="checkbox"]:after {
+    display: inline-block;
+    content: ' ';
+    width: 12px;
+    height: 12px;
+    border: 1px solid var(--color-lightGray);
+    cursor: pointer;
+    text-align: center;
+    font-size: 1.3rem;
+    line-height: 1rem;
+}
+input[type=checkbox]:checked:after {
+    background-color: var(--color-lightCyan);
+    content: '✓';
+}
+label input[type="radio"] {
+    appearance: none;
+    margin-right: 10px;
+}
+input[type="radio"]:after {
+    display: inline-block;
+    content: ' ';
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 1px solid var(--color-lightGray);
+    cursor: pointer;
+    text-align: center;
+    font-size: 1.3rem;
+    line-height: 1rem;
+    vertical-align: bottom;
+}
+label input[type="radio"]:checked:after {
+    background-color: var(--color-lightCyan);
+    content: '•';
+    font-size: 3rem;
+    line-height: 1.1rem;
+    color: var(--color-darkGray);
+}
+
+input[data-modified=true] {
+    background-color: var(--color-lightCyan);
+    border: 1px solid var(--color-darkGray);
 }
 textarea {
     height: inherit;
@@ -263,9 +308,6 @@ input[type="checkbox"] + label {
     display: inline;
     padding: 0 14px;
 }
-label input[type="radio"] {
-    margin-right: 10px;
-}
 select + .error,
 input + .error {
     display: block;
@@ -328,20 +370,19 @@ fieldset legend {
 }
 [data-badge]:after {
     position: absolute;
-    right: -8px;
-    top: -8px;
+    right: -6px;
+    top: -6px;
     min-width: 8px;
     min-height: 8px;
     line-height: 8px;
     padding: 2px;
     font-weight: bold;
-    background-color: var(--color-flashyGreen);
+    background-color: var(--color-accent);
     color: var(--color-darkBlue);
     text-align: center;
     font-size: .75rem;
     border-radius: 50%;
     content: attr(data-badge);
-    border: solid .5px var(--color-darkBlue);
 }
 
 /* Switch */
@@ -401,11 +442,16 @@ input.switch:checked:empty ~ label:after {
 }
 .dark input.switch:checked ~ label:before,
 input.switch:checked ~ label:before {
-    background-color: #215d9c;
+    background-color: var(--color-lightCyan);
+    border: 1px solid var(--color-lightGray);
+    color: var(--color-darkGray);
     content: "ON";
     text-indent: 0.7em;
     text-align: left;
     font-weight: bold;
+.dark input.switch:checked ~ label:before {
+    border: none;
+}
 }
 input.switch:checked ~ label:after {
     margin-left: 3em;
@@ -451,9 +497,9 @@ input.switch:checked ~ label:after {
     background-color: #2c3233;
 }
 .umap-multiplechoice input[type='radio']:checked + label {
-    background-color: #215d9c;
+    background-color: var(--color-lightCyan);
     box-shadow: inset 0 0 6px 0px #2c3233;
-    color: #ededed;
+    color: var(--color-darkGray);
 }
 .inheritable .header,
 .inheritable {

umap/static/umap/vars.css

@@ -5,9 +5,12 @@
     --color-lightGray: #ddd;
     --color-darkGray: #323737;
     --color-light: white;
-    --color-flashyGreen: #b9f5d2;
+    --color-limeGreen: #b9f5d2;
+    --color-brightCyan: #46ece6;
+    --color-lightCyan: #d4fbf9;
 
     --background-color: var(--color-light);
+    --color-accent: var(--color-brightCyan);
 
     /* Buttons. */
     --button-primary-background: var(--color-waterMint);