Add some styling.

2021-05-16 17:02:57 -07:00
parent 91205fdea9
commit 39764dd4a5
4 changed files with 150 additions and 32 deletions
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -0,0 +1,85 @@
+$off-grey-color: #ededed;
+$off-color: #eef2f9;
+
+body {
+    font-family: sans-serif;
+}
+
+.main {
+    margin: auto;
+    max-width: 1600px;
+}
+
+.split-pane {
+    display: flex;
+    flex-direction: vertical;
+}
+
+.split-elem {
+    flex-grow: 1;
+}
+
+.table-wrapper {
+    border: 1px solid $off-grey-color;
+    padding-top: 0.5rem;
+    padding-bottom: 1rem;
+    border-radius: 0.25rem;
+    display: inline-block;
+    margin-top: 1rem;
+    box-shadow: 0px 0px 5px rgba(grey, 0.1);
+}
+
+.class-table {
+    border-collapse: collapse;
+
+    th, td {
+        padding: 0.5rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    th {
+        text-align: left;
+    }
+
+    tr {
+        transition: background-color 0.2s;
+
+        &:nth-child(2n+3) {
+            background-color: $off-color;
+        }
+
+        &.hoverable:hover {
+            background-color: lighten(yellow, 30%);
+        }
+
+        &.selected {
+            border: 1px dashed black;
+        }
+    }
+}
+
+.feather {
+    vertical-align: middle;
+    height: 1rem;
+}
+
+.button {
+    border: 1px solid black;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+
+    vertical-align: middle;
+
+    &.color-green {
+        background-color: lighten(#5bc275, 30%);
+        border-color: #5bc275;
+        color: darken(#5bc275, 30%);
+    }
+
+    &.color-red {
+        background-color: lighten(#c25b75, 30%);
+        border-color: #c25b75;
+        color: darken(#c25b75, 30%);
+    }
+}