Update css, make generic

inventory/static/inventory/css/cell.css

@@ -2,7 +2,27 @@ tr {
     height: 75px;
 }
 
-.cell .title {
+.compartments {
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.cell {
+    flex-grow: 1;
+    display: inline-block;
+    position: relative;
+}
+
+.cell:nth-child(2n) {
+    background-color: #f8f8f8;
+}
+
+.title {
     display: inline;
 }
 
@@ -41,3 +61,11 @@ tr {
 .missing-link {
     color: #c00000;
 }
+
+.cell-buttons {
+    visibility: hidden;
+}
+
+.cell:hover .cell-buttons {
+    visibility: visible;
+}

inventory/static/inventory/css/main.css

@@ -2,14 +2,36 @@ body {
     font-family: sans-serif;
 }
 
-table {
+table.attribute-list {
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+
+table.attribute-list td {
+    border-color: #808080;
+    border-width: 1px;
+    border-style: solid;
+    padding: 10px;
+}
+
+table.attribute-list th {
+    text-align: left;
+    font-weight: 800;
+    padding: 10px;
+
+    border-color: #808080;
+    border-width: 1px;
+    border-style: solid;
+}
+
+table.box {
     width: 100%;
     border-collapse: collapse;
     table-layout: fixed;
 }
 
 
-td {
+table.box td {
     text-align: center;
 
     border-color: #d0d0d0;
@@ -18,7 +40,7 @@ td {
     position: relative;
 }
 
-th {
+table.box th {
     text-align: center;
     font-weight: 800;
     padding: 20px;
@@ -32,6 +54,18 @@ h1 {
     margin-top: 20px;
 }
 
+h1 .small {
+    font-size: 12pt;
+    font-weight: normal;
+    color: #808080;
+}
+
+h2 .small {
+    font-size: 12pt;
+    font-weight: normal;
+    color: #808080;
+}
+
 main {
     margin: auto;
 }
@@ -60,19 +94,17 @@ main {
     }
 }
 
-
+.icon {
-.missing {
+    display: inline-block;
-    visibility: hidden;
+    margin-right: 10px;
+    width: 18px;
+    height: 18px;
+    position: relative;
+    top: 2px;
 }
 
-td:hover .missing {
+h2 .icon {
-    visibility: visible;
+    width: 25px;
-}
+    height: 25px;
-
+    top: 3px;
-.edit {
-    display: none;
-}
-
-td:hover .edit {
-    display: inline;
 }