1 files changed, 41 insertions, 11 deletions

diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
index 185fead..5a70c2d 100644
--- a/src/main/resources/static/style.css
+++ b/src/main/resources/static/style.css
@@ -1,3 +1,21 @@
+:root {
+    --table-border: rgba(96, 96, 96, 1);
+
+    --bg-green: rgb(0, 128, 0);
+    --bg-green-op: rgba(0, 128, 0, .35);
+
+
+    --bg-yellow: rgb(255, 140, 0);
+    --bg-yellow-op: rgba(255, 140, 0, .35);
+
+
+    --bg-red: rgb(255, 0, 0);
+    --bg-red-op: rgba(255, 0, 0, .35);
+
+    --bg-gray: rgb(112, 128, 144);
+    --bg-gray-op: rgba(112, 128, 144, .35);
+}
+
 body {
     margin: 0;
     font-family: sans-serif;
@@ -57,7 +75,7 @@ nav > ul > li:first-of-type {
     display: inline;
 }
 
-.breadcrumps ul li+li:before {
+.breadcrumps ul li + li:before {
     padding: .4rem;
     color: gray;
     content: "/\00a0";
@@ -115,8 +133,8 @@ form.samplecode-input input:focus-visible {
 }
 
 table {
-    border-top: 1px solid lightgray;
-    border-left: 1px solid lightgray;
+    border-top: 1px solid var(--table-border);
+    border-left: 1px solid var(--table-border);
     border-spacing: 0;
     border-radius: 3px;
 
@@ -145,10 +163,10 @@ th {
 }
 
 td, th {
-    padding: .2rem;
+    padding: 0.4rem .2rem;
 
-    border-right: 1px solid lightgray;
-    border-bottom: 1px solid lightgray;
+    border-right: 1px solid var(--table-border);
+    border-bottom: 1px solid var(--table-border);
 
     text-align: left;
     white-space: nowrap;
@@ -160,22 +178,34 @@ td {
 }
 
 td.bg-green, th.bg-green {
-    background: green;
+    background: var(--bg-green);
     color: white;
 }
 
+tr:has(td.bg-green) {
+    background: var(--bg-green-op);
+}
+
 td.bg-yellow, th.bg-yellow {
-    background: darkorange;
+    background: var(--bg-yellow);
     color: white;
 }
 
+tr:has(td.bg-yellow) {
+    background: var(--bg-yellow-op);
+}
+
 td.bg-red, th.bg-red {
-    background: red;
+    background: var(--bg-red);
     color: white;
 }
 
+tr:has(td.bg-red) {
+    background: var(--bg-red-op);
+}
+
 td.bg-gray, th.bg-gray {
-    background: slategray;
+    background: var(--bg-gray);
     color: white;
 }
 
@@ -279,7 +309,7 @@ input.inline:focus-visible {
     padding: 1rem;
     margin: .2rem;
 
-    border: 1px solid lightgray;
+    border: 1px solid var(--table-border);
     border-radius: 3px;
 
     width: calc(100% - 2.4rem - 4px);