Major makeover

app/app.vue

@@ -5,12 +5,24 @@ import Footer from "~/components/Footer.vue";
 
 <template>
   <Toast position="top-right" />
-  <NuxtLoadingIndicator />
+  <NuxtLoadingIndicator color="var(--p-primary-color)" />
   <MenuHeader />
   <NuxtLayout>
-    <NuxtPage />
+    <main class="page-content">
+      <NuxtPage />
+    </main>
   </NuxtLayout>
   <Footer />
 </template>
 
-<style lang="scss"></style>
+<style>
+.page-content {
+  padding: var(--page-padding-y) var(--page-padding-x);
+}
+
+@media (max-width: 768px) {
+  .page-content {
+    padding: 1rem;
+  }
+}
+</style>

app/assets/css/elements.css

@@ -1,23 +1,18 @@
+/* Restore heading/paragraph defaults that Tailwind preflight removes */
 h1 {
     display: block;
     font-size: 2em;
     margin-block-start: 0.67em;
     margin-block-end: 0.67em;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
     font-weight: bold;
-    unicode-bidi: isolate;
 }
 
 h2 {
     display: block;
     font-size: 1.5em;
     margin-block-start: 0.83em;
     margin-block-end: 0.83em;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
     font-weight: bold;
-    unicode-bidi: isolate;
 }
 
 p {
@@ -27,42 +22,31 @@ p {
     margin-block-end: 1em;
 }
 
+/* PrimeVue component overrides */
 .p-card .p-card-title {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: 700;
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.01em;
 }
 
 .p-menubar {
-    margin-bottom: 1rem;
+    margin-bottom: 0;
 }
 
-a {
-    color: -webkit-link;
+/* Non-PrimeVue links */
+a:not(.p-button):not([class*="p-"]) {
+    color: var(--p-primary-color);
     cursor: pointer;
     text-decoration: underline;
 }
 
-button {
-    appearance: auto;
-    text-rendering: auto;
-    color: buttontext;
-    letter-spacing: normal;
-    word-spacing: normal;
-    line-height: normal;
-    text-transform: none;
-    text-indent: 0;
-    text-shadow: none;
+/* Global tooltip constraints prevent overflow on short tooltips */
+.p-tooltip {
+    max-width: none !important;
+}
+
+.p-tooltip-text {
+    width: auto !important;
     display: inline-block;
-    text-align: center;
-    cursor: default;
-    box-sizing: border-box;
-    background-color: buttonface;
-    margin: 0;
-    padding-block: 1px;
-    padding-inline: 6px;
-    border-width: 2px;
-    border-style: outset;
-    border-color: buttonborder;
-    border-image: initial;
 }

app/assets/css/main.css

@@ -1 +1,17 @@
-@import "tailwindcss";
+@import "tailwindcss";
+
+html {
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+:root {
+    --page-padding-x: 0.75rem;
+    --page-padding-y: 1.5rem;
+
+    /* PrimeVue runtime tokens — overridden by PrimeVue at hydration; declared here for IDE resolution */
+    --p-primary-color: #ea580c;
+    --p-text-muted-color: #64748b;
+}

app/assets/css/preferences.css

@@ -1,16 +1,18 @@
 .settings-field {
     display: flex;
     justify-content: space-between;
+    align-items: flex-start;
+    gap: 1rem;
 }
 
 .settings-description-title {
-    font-weight: bold;
-    padding-bottom: 1em;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
 }
 
 .setting-description-text {
-    font-size: 0.85em;
-    color: gray;
+    font-size: 0.875rem;
+    color: var(--p-text-muted-color);
 }
 
 .settings-control {
@@ -22,15 +24,15 @@
 .preferences-update-btn {
     display: flex;
     justify-content: flex-end;
-    margin-top: 1em;
+    margin-top: 1rem;
 }
 
 .preferences-dialog-header .p-dialog-header {
-    padding-bottom: 0
+    padding-bottom: 0;
 }
 
 .autostart-interval-input {
     min-width: unset;
-    height: 2.5em;
-    width: 8em;
+    height: 2.5rem;
+    width: 8rem;
 }

app/assets/css/table.css

@@ -1,15 +1,16 @@
 .table-header-row {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     width: 100%;
-    margin-bottom: 1em;
-    margin-top: 2em;
+    margin-bottom: 1rem;
+    gap: 1rem;
 }
 
 .search-bar {
     display: flex;
     width: 50%;
-    justify-content: left;
+    gap: 0.5rem;
 }
 
 .refresh-switch {
@@ -23,6 +24,6 @@
 }
 
 .rounded-table {
-    border-radius: 12px;
+    border-radius: 0.75rem;
     overflow: hidden;
-}
+}

app/assets/primevue/flame-preset.ts

@@ -37,7 +37,7 @@ export const Flame = definePreset(Lara, {
       light: {
         surface: {
           0: "#ffffff",
-          50: "#fff3ea", // Warm ash background
+          50: "#fff8f2", // Warm parchment background
           100: "{slate.100}",
           200: "{slate.200}", // Borders
           300: "{slate.300}",
@@ -59,19 +59,27 @@ export const Flame = definePreset(Lara, {
         },
       },
       dark: {
+        // Stone palette: warm charcoal undertones vs slate's cold blue-grey
         surface: {
           0: "#ffffff",
-          50: "{slate.50}",
-          100: "{slate.100}",
-          200: "{slate.200}",
-          300: "{slate.300}",
-          400: "{slate.400}",
-          500: "{slate.500}",
-          600: "{slate.600}",
-          700: "{slate.700}",
-          800: "{slate.800}",
-          900: "{slate.900}",
-          950: "{slate.950}",
+          50: "{stone.50}",
+          100: "{stone.100}",
+          200: "{stone.200}",
+          300: "{stone.300}",
+          400: "{stone.400}",
+          500: "{stone.500}",
+          600: "{stone.600}",
+          700: "{stone.700}",
+          800: "{stone.800}",
+          900: "{stone.900}",
+          950: "{stone.950}",
+        },
+        primary: {
+          color: "{orange.400}",
+          contrastColor: "{stone.950}",
+          hoverColor: "{orange.300}",
+          activeColor: "{orange.200}",
+          accentColor: "{orange.600}",
         },
       },
     },

app/components/Footer.vue

@@ -32,17 +32,16 @@ const pkgVersion = config.public.version;
 
 <style lang="scss" scoped>
 .page-footer {
-  padding: 5px 0 5px 0;
-  margin: 20px auto;
-  color: #aeb2b7;
+  padding: 0.625rem 0;
+  color: var(--p-text-muted-color);
   background: var(--p-menubar-background);
-  border: 1px solid var(--p-menubar-border-color);
+  border-top: 1px solid var(--p-menubar-border-color);
 }
 
 .footer-row {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  padding: 2px 10px 2px 10px;
+  padding: 0 var(--page-padding-x);
 }
 
 .copyright {

app/components/TableRowMetadata.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <Card style="border: solid">
+  <Card class="metadata-card">
     <template #title>Additional Metadata</template>
     <template #content>
       <p v-for="(value, key) in props.rowMetadata" :key="key">
@@ -19,4 +19,8 @@ const props = defineProps({
   </Card>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.metadata-card {
+  border: 1px solid var(--p-surface-200);
+}
+</style>