Checkpoint

ui/src/components/Layout.scss

@@ -0,0 +1,90 @@
+.layout-container {
+  --layout-gutter: 16px;
+  width: 100%;
+  height: 100vh;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--app-bg);
+  color: var(--app-text);
+}
+
+.layout-navbar {
+  flex: 0 0 auto;
+  background: linear-gradient(
+    135deg,
+    rgba(23, 58, 110, 0.46) 0%,
+    rgba(10, 32, 72, 0.62) 50%,
+    rgba(30, 74, 140, 0.42) 100%
+  );
+  border-bottom: 1px solid rgba(167, 203, 255, 0.35);
+  box-shadow:
+    0 8px 24px rgba(2, 10, 26, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(14px) saturate(140%);
+  -webkit-backdrop-filter: blur(14px) saturate(140%);
+
+  .navbar-brand,
+  .nav-link,
+  .navbar-toggler {
+    color: var(--app-text);
+  }
+
+  .navbar-brand:hover,
+  .nav-link:hover,
+  .nav-link:focus {
+    color: #ffffff;
+  }
+
+  .navbar-toggler {
+    border-color: rgba(255, 255, 255, 0.35);
+  }
+
+  .navbar-toggler-icon {
+    filter: brightness(0) invert(1);
+  }
+
+  .nav-link-custom {
+    color: var(--app-text-muted);
+    transition: color 160ms ease, text-shadow 160ms ease;
+  }
+
+  .nav-link-custom:hover,
+  .nav-link-custom:focus {
+    color: #f3f7ff;
+    text-shadow: 0 0 12px rgba(168, 203, 255, 0.45);
+  }
+
+  .nav-link-custom.active {
+    color: #ffffff;
+    font-weight: 600;
+    text-shadow: 0 0 14px rgba(153, 193, 255, 0.5);
+  }
+}
+
+.main-content {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: var(--app-bg);
+  color: var(--app-text);
+  padding-left: var(--layout-gutter);
+  padding-right: var(--layout-gutter);
+  padding-bottom: var(--layout-gutter);
+}
+.layout-footer {
+  flex: 0 0 auto;
+  padding: 12px var(--layout-gutter);
+  background-color: var(--app-bg);
+  border-top: 1px solid rgba(167, 203, 255, 0.35);
+  text-align: center;
+  font-size: 12px;
+  color: var(--app-text);
+
+  p {
+    margin: 0;
+  }
+}