initial development checkpoint 4

server/css/base_style.css

@@ -2,8 +2,9 @@
     --yellow-gradient: linear-gradient(45deg, #ffe88d, #fff8b7);
     --yellow-gradient-bright: linear-gradient(45deg, #ffeba1, #fffacb);
     --blue-gradient-subtle: linear-gradient(45deg, #e7ebff, #e7efff);
-    --blue-gradient-glassy: linear-gradient(45deg, #fff9, #fff9);
+    --blue-glassy: #fff9;
     --red-gradient: linear-gradient(45deg, #ffd2cc, #ffcccc);
+    --magical: linear-gradient(45deg, #e0f2ff, #e4fff0, #eee0ff);
 }
 
 * {
@@ -34,11 +35,9 @@ header .top-half, header .lower-half {
     text-align: center;
 }
 
-header .top-half {
-    margin-bottom: 12px;
-}
-
-header .lower-half input {
+header .top-half,
+header .lower-half input
+{
     margin-bottom: 12px;
 }
 
@@ -58,7 +57,10 @@ header .lower-half a.generic-button,
 header .lower-half a.sub-button,
 main * a.sub-button,
 main * a.scary-button,
-main a.return-button
+main a.return-button,
+main a.delete-button,
+main a.cancel-button,
+main a.magic-button
 {
     text-decoration: none;
     border-radius: 15px;
@@ -67,9 +69,7 @@ main a.return-button
     font-weight: 700;
     margin: 4px;
     margin-top: 0;
-    padding: 10px;
-    padding-left: 20px;
-    padding-right: 20px;
+    padding: 10px 20px 10px 20px;
     display: inline-block;
 }
 
@@ -83,7 +83,8 @@ header .lower-half a.generic-button:hover {
 
 header .lower-half a.sub-button,
 main * a.sub-button,
-main a.return-button
+main a.return-button,
+main a.cancel-button
 {
     border: 1px solid #000;
 }
@@ -97,26 +98,45 @@ main * div.controls
     justify-content: end;
 }
 
-main * a.sub-button {
-}
-
-main * a.scary-button
+main * a.scary-button,
+main a.delete-button
 {
     background: var(--red-gradient);
     color: #500;
 }
 
+
+main a.magic-button
+{
+    background: var(--magical);
+    /*
+    animation-name: magic-ani;
+    animation-duration: 6s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    */
+}
+
 main .test-short,
 main .question-short,
-main .response-option
+main .response-option,
+main .piece-of-stats
 {
     padding: 20px;
-    background: var(--blue-gradient-glassy);
+    background: var(--blue-glassy);
     margin-bottom: 16px;
     border-radius: 14px;
     vertical-align: middle;
 }
 
+main .piece-of-stats .header
+{
+    display: block;
+    font-size: 16pt;
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+
 main .test-short a.test-link,
 main .question-short a.question-link {
     display: block;
@@ -151,6 +171,52 @@ main * .sub-title {
     margin-top: 12px;
 }
 
+main form label
+{
+    display: block;
+    margin-bottom: 10px;
+    font-size: 12pt;
+}
+
+main form input,
+header .lower-half form input
+{
+    display: block;
+    border-radius: 20px;
+    padding: 12px 30px 12px 30px;
+    font-size: 15pt;
+    width: 90%;
+    margin: auto;
+    border: 1px solid #fff;
+    transition-duration: 300ms;
+}
+
+main form input:focus,
+header .lower-half form input:focus
+{
+    outline: none;
+    border: 1px solid;
+    transition-duration: 300ms;
+}
+
+
+main form input[type=submit]
+{
+    width: auto;
+    border: none;
+    border-radius: 20px;
+    padding: 12px 30px 12px 30px;
+    background: var(--yellow-gradient);
+    font-weight: 600;
+    font-size: 15pt;
+}
+
+main form input[type=submit]:hover
+{
+    cursor: pointer;
+    background: var(--yellow-gradient-bright);
+}
+
 main * .response-option-short-list
 {
     margin-top: 12px;
@@ -166,7 +232,8 @@ main * .response-option-short
     font-weight: 500;
 }
 
-main .response-option a.response-option-mark {
+main .response-option a.response-option-mark
+{
     font-size: 16pt;
     text-decoration: none;
     display: inline-block;
@@ -183,8 +250,24 @@ main .return-button-centerer
     display: grid;
 }
 
-main a.return-button
+main a.return-button,
+main a.delete-button,
+main a.cancel-button
 {
     margin: auto;
     margin-bottom: 15px;
 }
+
+header .lower-half form input
+{
+    transition-duration: 300ms;
+
+@keyframes magic-ani
+{
+    0% {
+        filter: hue-rotate(0deg);
+    }
+    100% {
+        filter: hue-rotate(360deg);
+    } 
+}