webui/src/app.css

/*
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
*/

/* ---------------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Surfaces */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --surface-3: #e9edf2;
  --shell: #171a21;
  --shell-2: #22262f;

  /* Text */
  --text: #1c2027;
  --text-muted: #5c6672;
  --text-faint: #838d99;
  --text-on-shell: #e7eaef;
  --text-on-shell-muted: #9aa3af;
  --text-on-accent: #ffffff;

  /* Lines */
  --border: #dbe0e6;
  --border-strong: #c3ccd6;

  /* Accents */
  --accent: #1f6feb;
  --accent-hover: #1a5fcc;
  --accent-soft: #e8f0fe;
  --accent-text: #1a5fcc;

  --danger: #c62828;
  --danger-soft: #fdecec;
  --success: #1a7f4b;
  --success-soft: #e6f5ec;
  --warn: #9a6400;
  --warn-soft: #fdf3e0;

  /* Shape & depth */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%);
  --shadow: 0 4px 12px rgb(16 24 40 / 8%), 0 1px 3px rgb(16 24 40 / 6%);
  --shadow-lg: 0 16px 40px rgb(16 24 40 / 18%);

  --header-height: 60px;
  --content-width: 1140px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151b;
    --surface: #1a1e26;
    --surface-2: #212630;
    --surface-3: #2a303b;
    --shell: #0e1116;
    --shell-2: #171b22;

    --text: #e6e9ee;
    --text-muted: #a3adba;
    --text-faint: #7c8794;
    --text-on-shell: #e6e9ee;
    --text-on-shell-muted: #98a2af;

    --border: #2c323d;
    --border-strong: #3a4250;

    --accent: #4c94f7;
    --accent-hover: #6aa7f9;
    --accent-soft: #17263c;
    --accent-text: #7db3fb;

    --danger: #f0736b;
    --danger-soft: #2e1a1a;
    --success: #56cc8b;
    --success-soft: #10261b;
    --warn: #e0a34a;
    --warn-soft: #2b2113;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow: 0 4px 14px rgb(0 0 0 / 45%);
    --shadow-lg: 0 18px 44px rgb(0 0 0 / 60%);
  }
}

/* ---------------------------------------------------------------------------
   Reset & base
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

h1 {
  font-size: 1.65rem;
}

h2 {
  font-size: 1.2rem;
}

h3 {
  font-size: 1rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--accent-text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code,
kbd,
.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

hr {
  height: 1px;
  border: 0;
  margin: 1.25rem 0;
  background: var(--border);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

.page {
  flex: 1 0 auto;
  width: 100%;
  padding: 32px 0 56px;
}

.page-head {
  margin-bottom: 24px;
}

.page-head h1 {
  margin-bottom: 4px;
}

.page-head .lede {
  max-width: 68ch;
  margin: 0;
  color: var(--text-muted);
}

.stack > * + * {
  margin-top: 20px;
}

.prose {
  max-width: 72ch;
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.card-head h2,
.card-head h3 {
  margin: 0;
}

.card-head .sub {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.card-body {
  padding: 20px;
}

.card-body > :last-child {
  margin-bottom: 0;
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 550;
  font-size: 0.925rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease,
    color 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  background: var(--surface-2);
  text-decoration: none;
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--text-on-accent);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  color: var(--text-on-accent);
}

.btn-danger {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-soft);
  border-color: var(--danger);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}

.btn-lg {
  padding: 12px 22px;
  font-size: 1rem;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 0.8rem;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.field > label {
  font-weight: 550;
  font-size: 0.9rem;
}

.field .hint {
  font-size: 0.82rem;
  color: var(--text-muted);
}

input[type="text"],
input[type="search"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.925rem;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

input::placeholder {
  color: var(--text-faint);
}

input[type="text"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position: calc(100% - 17px) 51%, calc(100% - 12px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.925rem;
}

/* ---------------------------------------------------------------------------
   Data lists & tables
   --------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.data th {
  position: sticky;
  top: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

table.data td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

table.data tr:last-child td {
  border-bottom: 0;
}

table.data tbody tr:hover {
  background: var(--surface-2);
}

/* ---------------------------------------------------------------------------
   Badges & notices
   --------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge-accent {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.badge-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-success {
  background: var(--success-soft);
  color: var(--success);
}

.badge-warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.muted {
  color: var(--text-muted);
}

.faint {
  color: var(--text-faint);
}

.small {
  font-size: 0.85rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}