Improve form buttons styling

Close #34

nummi/main/static/main/css/form.css

@@ -186,33 +186,33 @@ form {
   }
   .buttons {
     grid-column: 1 / -1;
-    display: grid;
+    line-height: 2rem;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    input,
-    grid-auto-rows: 1fr;
+    a {
-    gap: 0.5rem;
-    align-items: center;
-
-    input {
       font: inherit;
-      line-height: 1.5;
-      border-radius: var(--radius);
-      padding: 0 var(--gap);
       cursor: pointer;
+      padding: 0 var(--gap);
+      border: var(--gray) 1px solid;
+      margin-right: 0.5rem;
+      margin-bottom: 0.5rem;
+      color: inherit;
 
       &:hover {
         text-decoration: underline;
       }
-      &[type="submit"] {
+    }
-        border: 0.1rem solid var(--green);
+
-        background: var(--green-1);
+    input[type="submit"] {
-      }
+      background: var(--green-1);
-      &[type="reset"] {
+      border-color: var(--green);
-        border: 0.1rem solid var(--red);
+    }
-        background: var(--red-1);
+    input[type="reset"] {
-      }
+      background: var(--bg-1);
     }
     a.del {
       color: var(--red);
+      border-color: var(--red);
+      border-style: dashed;
     }
   }
 }

nummi/main/static/main/css/main.css

@@ -24,7 +24,7 @@
   --bg-inv: var(--theme-1);
   --text-inv: #ffffffde;
 
-  --bg-01: #f0f0f0;
+  --bg-1: #f0f0f0;
 
   --text-green: #296629;
   --text-link: var(--text-green);
@@ -118,7 +118,7 @@ nav {
   top: 0;
   overflow-y: auto;
 
-  background: var(--bg-01);
+  background: var(--bg-1);
   line-height: 2rem;
 
   h1 img {
@@ -240,7 +240,7 @@ footer {
       color: var(--bg);
     }
     &.white {
-      background: var(--bg-01);
+      background: var(--bg-1);
     }
     border-radius: var(--radius);
     height: 1.5em;
@@ -283,7 +283,7 @@ ul.messages {
   list-style-type: none;
   margin: 0;
   margin-bottom: var(--gap);
-  background: var(--bg-01);
+  background: var(--bg-1);
   padding: 0;
 
   li {

nummi/main/static/main/css/table.css

@@ -1,5 +1,4 @@
-.table,
+.table {
-form {
   overflow-x: auto;
   width: 100%;
 }
@@ -17,7 +16,7 @@ table {
     width: 1ch;
   }
   thead tr:not(.new) {
-    background: var(--bg-01);
+    background: var(--bg-1);
   }
   tr {
     border: 1px solid var(--gray);