too many changes

button.scss

@@ -30,6 +30,7 @@ button, input[type="submit"], input[type="button"], label.button, a.button {
 
     &:hover, &:focus {
         background: var(--button-colored-background-hover);
+        color: var(--text-on-background-color-2);
     }
 }
 

image.scss

@@ -59,3 +59,37 @@ img {
         }
     }
 }
+
+.gallery {
+    max-width: 80%;
+    margin: 0 auto;
+
+    input {
+        display: none;
+
+        &+img {
+            display: none;
+        }
+
+        &:checked+img {
+            display: block;
+            margin: 0 auto;
+            max-width: 100%;
+            max-height: 100%;
+            width: auto;
+            height: auto;
+        }
+    }
+
+    .thumbs img {
+        width: 100px;
+        height: 100px;
+        margin: .3rem;
+        border: 1px solid #ccc;
+    }
+
+    label {
+        float: left;
+        cursor: pointer;
+    }
+}

styles.css

@@ -3410,6 +3410,29 @@ img.bordered {
       background-clip: content-box;
       background: linear-gradient(-45deg, red 50%, transparent 0); }
 
+.gallery {
+  max-width: 80%;
+  margin: 0 auto; }
+  .gallery input {
+    display: none; }
+    .gallery input + img {
+      display: none; }
+    .gallery input:checked + img {
+      display: block;
+      margin: 0 auto;
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto; }
+  .gallery .thumbs img {
+    width: 100px;
+    height: 100px;
+    margin: .3rem;
+    border: 1px solid #ccc; }
+  .gallery label {
+    float: left;
+    cursor: pointer; }
+
 input, select, textarea, .textarea, option {
   font-family: var(--font-family);
   font-weight: 300; }
@@ -3640,12 +3663,10 @@ input[type="file"] {
   box-sizing: border-box; }
 
 input::placeholder {
+  font-family: 'FontAwesome', serif;
   color: var(--input-icon-color);
   opacity: 0.5; }
 
-input::placeholder {
-  font-family: 'FontAwesome', serif; }
-
 textarea:invalid, input:invalid {
   transition: all 0.5s;
   border-color: #f00; }
@@ -4126,7 +4147,8 @@ button, input[type="submit"], input[type="button"], label.button, a.button {
   button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, label.button::-moz-focus-inner, a.button::-moz-focus-inner {
     border: 0; }
   button:hover, button:focus, input[type="submit"]:hover, input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:focus, label.button:hover, label.button:focus, a.button:hover, a.button:focus {
-    background: var(--button-colored-background-hover); }
+    background: var(--button-colored-background-hover);
+    color: var(--text-on-background-color-2); }
 
 button.save, .button.save, input[type="submit"].save {
   color: rgba(0, 0, 0, 0.75);
@@ -4798,28 +4820,16 @@ table.list td {
 @media screen and (max-width: 600px) {
   table.table {
     display: table;
-    table-layout: fixed;
+    width: 100%; }
-    width: 100%;
-    border: 0; }
     table.table thead {
       display: none; }
     table.table tbody tr {
       height: auto;
       display: block;
       margin-bottom: .625em; }
-      table.table tbody tr td:last-child {
-        border-bottom: 1px solid var(--box-border); }
-      table.table tbody tr:last-child td {
-        border-bottom: none; }
-        table.table tbody tr:last-child td:last-child {
-          border-bottom: 1px solid var(--box-border); }
     table.table tbody td {
-      border-left: 1px solid var(--box-border);
+      display: flex;
-      border-right: 1px solid var(--box-border);
-      display: block;
       font-size: .8rem;
-      text-align: right;
-      position: relative;
       height: 2rem;
       line-height: 2rem;
       text-overflow: ellipsis;
@@ -4827,7 +4837,6 @@ table.list td {
       max-width: 100%; }
       table.table tbody td:before {
         content: attr(data-label);
-        float: left;
         margin-right: 10px;
         font-weight: bold; }
     table.table tfoot {

table.scss

@@ -192,9 +192,7 @@ table.list {
 @media screen and (max-width: 600px) {
     table.table {
         display: table;
-        table-layout: fixed;
         width: 100%;
-        border: 0;
 
         thead {
             display: none;
@@ -205,27 +203,11 @@ table.list {
                 height: auto;
                 display: block;
                 margin-bottom: .625em;
-
-                td:last-child {
-                    border-bottom: 1px solid var(--box-border);
-                }
-
-                &:last-child td {
-                    border-bottom: none;
-
-                    &:last-child {
-                        border-bottom: 1px solid var(--box-border);
-                    }
-                }
             }
 
             td {
-                border-left: 1px solid var(--box-border);
+                display: flex;
-                border-right: 1px solid var(--box-border);
-                display: block;
                 font-size: .8rem;
-                text-align: right;
-                position: relative;
                 height: 2rem;
                 line-height: 2rem;
                 text-overflow: ellipsis;
@@ -234,7 +216,6 @@ table.list {
 
                 &:before {
                     content: attr(data-label);
-                    float: left;
                     margin-right: 10px;
                     font-weight: bold;
                 }