feat: add service uptime and start style changes (#2831)

web/projects/ui/src/styles.scss

@@ -14,9 +14,9 @@ ul {
 }
 
 hr {
-  height: 0;
-  background: transparent;
-  border-bottom: 1px solid var(--tui-background-neutral-1);
+  height: 1px;
+  background: var(--tui-background-neutral-1);
+  border: none;
 }
 
 :root {
@@ -34,10 +34,29 @@ hr {
   isolation: isolate;
   backdrop-filter: blur(2rem);
   border-radius: 0.375rem;
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  background-position:
+    top left,
+    top right;
 
   // TODO: Theme
-  background: rgb(55 58 63 / 90%);
-  box-shadow: inset 0 1px rgb(255 255 255 / 10%);
+  background-color: color-mix(
+    in hsl,
+    var(--tui-background-base) 90%,
+    transparent
+  );
+  background-image: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.1),
+      transparent
+    ),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
+  box-shadow:
+    0 0.25rem 0.125rem rgba(0, 0, 0, 0.25),
+    0 0 0.5rem rgba(0, 0, 0, 0.3),
+    inset 0 -1px rgba(0, 0, 0, 0.5),
+    inset 0 1px rgba(255, 255, 255, 0.1);
 
   tui-root._mobile & {
     // For tui-tab-bar
@@ -46,29 +65,10 @@ hr {
   }
 }
 
-.g-plaque {
-  @include transition(opacity);
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  filter: url(#round-corners) url(#bevel-light) url(#bevel-dark);
-  font-size: 0;
-  opacity: 0.75;
-
-  &::before {
-    @include transition(clip-path);
-    content: '';
-    position: absolute;
-    inset: 0;
-    clip-path: var(--clip-path);
-    // TODO: Theme
-    background: #333;
-  }
-}
-
 .g-table {
   width: 100%;
   min-width: 40rem;
+  border-spacing: 0;
 
   td,
   th {
@@ -85,44 +85,44 @@ hr {
     background: var(--tui-background-neutral-1);
     font-weight: bold;
   }
-}
 
-tui-root._mobile .g-table {
-  min-width: 0;
+  tui-root._mobile & {
+    min-width: 0;
 
-  thead {
-    display: none;
-  }
+    thead {
+      display: none;
+    }
 
-  tbody {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
+    tbody {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
 
-  tr {
-    position: relative;
-    display: grid;
-    border-radius: var(--tui-radius-l);
-    padding: 0.375rem 0.5rem;
-    // TODO: Theme
-    background: rgba(0, 0, 0, 0.2);
-  }
+    tr {
+      position: relative;
+      display: grid;
+      border-radius: var(--tui-radius-l);
+      padding: 0.375rem 0.5rem;
+      // TODO: Theme
+      background: rgba(0, 0, 0, 0.2);
+    }
 
-  tr:has(:checked) {
-    box-shadow: inset 0 0 0 0.125rem var(--tui-background-accent-1);
-  }
+    tr:has(:checked) {
+      box-shadow: inset 0 0 0 0.125rem var(--tui-background-accent-1);
+    }
 
-  td,
-  th {
-    position: static;
-    height: auto;
-    min-height: 1.5rem;
-    align-content: center;
-    box-shadow: none;
+    td,
+    th {
+      position: static;
+      height: auto;
+      min-height: 1.5rem;
+      align-content: center;
+      box-shadow: none;
 
-    &:not([tuiFade]) {
-      overflow: hidden;
+      &:not([tuiFade]) {
+        overflow: hidden;
+      }
     }
   }
 }
@@ -177,7 +177,7 @@ button.g-action {
   }
 
   &:not(:last-child) {
-    box-shadow: 0 0.51rem 0 -0.5rem;
+    box-shadow: 0 calc(0.5rem + 1px) 0 -0.5rem var(--tui-background-neutral-1);
   }
 }
 
@@ -196,11 +196,6 @@ button.g-action {
   }
 }
 
-.g-hidden-scrollbar {
-  @include scrollbar-hidden;
-  overflow: auto !important;
-}
-
 .g-success {
   color: var(--tui-status-positive) !important;
 }
@@ -225,10 +220,6 @@ svg:not(:root) {
   overflow: auto;
 }
 
-.small-caps {
-  font-variant: all-small-caps;
-}
-
 .g-external-link {
   color: #50c8ff;
 }