fluency-v8-components 1.4.3 → 1.4.5

package/src/assets/main.css

@@ -1,9 +1,49 @@
+@import "tailwindcss";
+@source "../../../fluency-v8-components";
+@source "../../node_modules/vue-tailwind-datepicker";
+@custom-variant dark (&:where(.dark, .dark *));
+@theme {
+  --color-vtd-primary-50: var(--color-sky-50);
+  --color-vtd-primary-100: var(--color-sky-100);
+  --color-vtd-primary-200: var(--color-sky-200);
+  --color-vtd-primary-300: var(--color-sky-300);
+  --color-vtd-primary-400: var(--color-sky-400);
+  --color-vtd-primary-500: var(--color-sky-500);
+  --color-vtd-primary-600: var(--color-sky-600);
+  --color-vtd-primary-700: var(--color-sky-700);
+  --color-vtd-primary-800: var(--color-sky-800);
+  --color-vtd-primary-900: var(--color-sky-900);
+
+  --color-vtd-secondary-50: var(--color-gray-50);
+  --color-vtd-secondary-100: var(--color-gray-100);
+  --color-vtd-secondary-200: var(--color-gray-200);
+  --color-vtd-secondary-300: var(--color-gray-300);
+  --color-vtd-secondary-400: var(--color-gray-400);
+  --color-vtd-secondary-500: var(--color-gray-500);
+  --color-vtd-secondary-600: var(--color-gray-600);
+  --color-vtd-secondary-700: var(--color-gray-700);
+  --color-vtd-secondary-800: var(--color-gray-800);
+  --color-vtd-secondary-900: var(--color-gray-900);
+
+  --page-height: calc(100vh - 200px);
+  --page-height-facet: calc(100vh - 330px);
+  --page-height-search: calc(100vh - 255px);
+}
+
 .dark {
   background: #121212;
   color: #cbd5e1;
 }
 
+.light {
+  background: #ececee;
+  color: #1f2937;
+}
+
 @utility editor-style {
+  scrollbar-color: #e0e7ff #303030;
+  background: #303030;
+  color: #FFFFFF;
   font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
   padding: 10px 5px 10px 5px;
   :focus {
@@ -84,27 +124,201 @@
 }
 
 @utility white-bg {
-  @apply bg-white text-gray-900 dark:bg-neutral-800 dark:text-slate-300;
+  @apply bg-[#f7f7f8] text-gray-900;
+}
+
+@utility white-bg-opacity {
+  @apply bg-[#ececee]/70 dark:bg-[#121212]/70;
+}
+
+@utility white-bg-hover {
+  @apply cursor-pointer std-white-hover focus-visible:outline-gray-300;
 }
 
 @utility dark-bg {
   @apply bg-neutral-800 text-slate-300;
 }
 
+@utility dark-bg-hover {
+  @apply cursor-pointer bg-gray-700 focus-visible:outline-gray-700;
+}
+
+@utility std-light {
+  @apply bg-blue-50;
+}
+
 @utility std-dark {
-  @apply bg-neutral-800 hover:bg-gray-700 focus-visible:outline-sky-50;
+  @apply bg-gray-700;
 }
 
-@utility white-bg-hover {
-  @apply cursor-pointer bg-gray-300 focus-visible:outline-gray-300;
+@utility std-white {
+  @apply bg-white focus-visible:outline-sky-50 dark:bg-black dark:focus-visible:outline-slate-800; 
 }
 
-@utility dark-bg-hover {
-  @apply cursor-pointer bg-gray-700 focus-visible:outline-gray-700;
+@utility std-white-reverse {
+  @apply bg-black focus-visible:outline-sky-50 dark:bg-white dark:focus-visible:outline-slate-800; 
+}
+
+@utility std-white-hover {
+  @apply bg-[#ebf1ff] dark:bg-slate-800;
+}
+
+@utility std-white-border {
+  @apply border-gray-300 dark:border-neutral-600;
+}
+
+@utility std-white-text {
+  @apply text-gray-900 dark:text-gray-200;
+}
+
+@utility std-blue {
+  @apply bg-sky-600 dark:bg-sky-700 focus-visible:outline-sky-300;
+}
+
+@utility std-blue-light {
+  /* light: sky-100 / dark: balanced muted blue-gray */
+  @apply bg-sky-100 dark:bg-[#1e293b] focus-visible:outline-sky-300;
+}
+  
+@utility std-blue-text {
+  @apply text-sky-700 dark:text-sky-300;
+}
+
+@utility std-blue-border {
+  @apply border-sky-600 dark:border-sky-400;
+}
+
+@utility std-blue-hover {
+  @apply bg-sky-500 dark:bg-sky-600;
+}
+
+@utility std-blue-hover-light {
+  /* light: soft sky / dark: deeper slate-blue tone */
+  @apply bg-[#b5e1fb] dark:bg-[#2a3b52];
+}
+
+@utility std-blue-ring {
+  @apply ring-sky-600 dark:ring-sky-400;
+}
+
+
+@utility std-green {
+  @apply bg-green-600 dark:bg-green-700 focus-visible:outline-green-300;
+}
+
+@utility std-green-light {
+  /* light: green-100 / dark: balanced moss tone */
+  @apply bg-green-100 dark:bg-[#1c2d22] focus-visible:outline-green-300;
+}
+
+@utility std-green-text {
+  @apply text-green-700 dark:text-green-300;
+}
+
+@utility std-green-border {
+  @apply border-green-600 dark:border-green-400;
+}
+
+@utility std-green-hover {
+  @apply bg-green-500 dark:bg-green-600;
+}
+
+@utility std-green-hover-light {
+  /* light: mint tone / dark: slightly warmer green-gray */
+  @apply bg-[#b8eec5] dark:bg-[#2a3b2f];
+}
+
+@utility std-green-ring {
+  @apply ring-green-600 dark:ring-green-400;
+}
+
+
+@utility std-red {
+  @apply bg-red-600 dark:bg-red-700 focus-visible:outline-red-300;
+}
+
+@utility std-red-light {
+  /* light: red-100 / dark: muted burgundy */
+  @apply bg-red-100 dark:bg-[#311c1c] focus-visible:outline-red-300;
+}
+
+@utility std-red-text {
+  @apply text-red-700 dark:text-red-300;
 }
 
-@utility input-icon {
-  @apply absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center;
+@utility std-red-border {
+  @apply border-red-600 dark:border-red-400;
+}
+
+@utility std-red-hover {
+  @apply bg-red-500 dark:bg-red-600;
+}
+
+@utility std-red-hover-light {
+  /* light: pale salmon / dark: richer maroon-gray */
+  @apply bg-[#f3b3b3] dark:bg-[#3f2626];
+}
+
+@utility std-red-ring {
+  @apply ring-red-600 dark:ring-red-400;
+}
+
+
+@utility std-yellow {
+  @apply bg-yellow-600 dark:bg-yellow-700 focus-visible:outline-yellow-300;
+}
+
+@utility std-yellow-light {
+  /* light: yellow-100 / dark: muted olive */
+  @apply bg-yellow-100 dark:bg-[#2e2817] focus-visible:outline-yellow-300;
+}
+
+@utility std-yellow-text {
+  @apply text-yellow-600 dark:text-yellow-300;
+}
+
+@utility std-yellow-border {
+  @apply border-yellow-600 dark:border-yellow-400;
+}
+
+@utility std-yellow-hover {
+  @apply bg-yellow-500 dark:bg-yellow-600;
+}
+
+@utility std-yellow-hover-light {
+  /* light: butter yellow / dark: brown-gold accent */
+  @apply bg-[#f8e7a3] dark:bg-[#463b22];
+}
+
+@utility std-yellow-ring {
+  @apply ring-yellow-600 dark:ring-yellow-400;
+}
+
+@utility std-disabled {
+  @apply bg-neutral-200/40 dark:bg-neutral-800/40
+}
+
+@utility std-disabled-text {
+  @apply text-slate-500 dark:text-slate-400
+}
+
+@utility icon-xs {
+  @apply w-3 h-3;
+}
+@utility icon {
+  @apply w-4 h-4;
+}
+@utility icon-md {
+  @apply w-5 h-5;
+}
+@utility icon-lg {
+  @apply w-6 h-6;
+}
+@utility icon-xl {
+  @apply w-8 h-8;
+}
+@utility icon-2xl {
+  @apply w-10 h-10;
 }
 
 @font-face {
@@ -130,7 +344,7 @@
   }
 
   .status-neutral {
-    @apply text-gray-400 bg-gray-400/20 dark:text-gray-200 dark:bg-gray-200/10
+    @apply text-slate-600 bg-slate-600/20 dark:text-slate-400 dark:bg-slate-400/10
   }
 }
 
@@ -138,15 +352,56 @@
   .screen-size {
     @apply max-w-[1600px];
   }
+  .table-desktop {
+    @apply hidden md:block;
+  }
+  .settings-table-desktop {
+    @apply hidden lg:block;
+  }
+  .card-mobile {
+    @apply grid grid-cols-1 gap-x-6 gap-y-4 pt-3 md:hidden;
+  }
+  .settings-card-mobile {
+    @apply grid grid-cols-1 gap-x-6 gap-y-4 pt-3 lg:hidden;
+  }
 
   .loading {
-    @apply text-lg font-medium text-teal-700 relative -top-3 dark:text-teal-400
+    @apply text-lg font-medium relative -top-3 text-sky-400
+  }
+  .loading-animate {
+    @apply animate-ping rounded-full icon-xl relative -top-3 bg-sky-400
+  }
+  .loading-circle {
+    @apply rounded-full icon-xl relative -left-8 -top-3 bg-sky-400
+  }
+  .loading-bounce {
+    @apply icon-md bg-sky-400 rounded-full animate-bounce
+  }
+  .disabled {
+    @apply std-disabled-text! shadow-none cursor-not-allowed focus:ring-gray-300 focus:ring-1;
+  }
+  .tooltip {
+    @apply isolate absolute z-50 inline-block px-3 py-2 text-xs text-black border std-white-border rounded-lg shadow-xs opacity-0 bg-gray-200 dark:bg-slate-800 dark:text-white
+  }
+  .spinner {
+    @apply w-5 h-5 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]
   }
 
   .std-btn {
     @apply inline-flex items-center rounded-lg px-5 py-3 text-sm font-normal text-white;
   }
-
+  .std-btn-white {
+    @apply std-white std-white-text hover:std-white-hover cursor-pointer dark:text-white dark:dark-bg dark:hover:std-dark;
+  }
+  .std-btn-blue {
+    @apply std-blue hover:std-blue-hover cursor-pointer;
+  }
+  .std-btn-green {
+    @apply std-green hover:std-green-hover cursor-pointer;
+  }
+  .std-btn-red {
+    @apply std-red hover:std-red-hover cursor-pointer;
+  }
   .std-btn:disabled {
     @apply disabled:opacity-30 disabled:cursor-not-allowed;
   }
@@ -154,7 +409,6 @@
   .action-btn {
     @apply relative inline-flex items-center px-2 py-2 ring-1 ring-gray-500 dark:ring-gray-300 text-white;
   }
-
   .action-btn:disabled {
     @apply disabled:opacity-30 disabled:cursor-not-allowed;
   }
@@ -162,60 +416,12 @@
   .circle-btn {
     @apply rounded-full p-2 text-white;
   }
-
   .circle-btn:disabled {
     @apply disabled:opacity-30 disabled:cursor-not-allowed;
   }
 
-  .std-white {
-    @apply bg-white hover:bg-sky-50 focus-visible:outline-sky-50;
-  }
-
-  .std-blue {
-    @apply bg-sky-700 hover:bg-sky-500 focus-visible:outline-sky-500;
-  }
-
-  .std-green {
-    @apply bg-green-700 hover:bg-green-500 focus-visible:outline-green-500;
-  }
-
-  .std-red {
-    @apply bg-red-600 hover:bg-red-400 focus-visible:outline-red-400;
-  }
-
-  .checkboxInput {
-    @apply w-4 h-4 rounded-sm border-gray-300 text-sky-600 focus:ring-sky-600;
-  }
-
-  .card {
-    @apply relative flex flex-col gap-x-4 border-b bg-white dark:bg-neutral-800 dark:text-slate-300 border-gray-200 dark:border-neutral-600 p-8 rounded-lg
-  }
-  .card-base {
-    @apply overflow-hidden bg-white shadow-sm sm:rounded-lg;
-  }
-
-  .card-title {
-    @apply text-base font-normal leading-6 text-gray-900;
-  }
-  
-  .card-subtitle {
-    @apply mt-1 max-w-2xl text-sm text-gray-500;
-  }
-
-  .section-title {
-    @apply text-base font-normal leading-6 text-gray-900;
-  }
-
-  .section-subtitle {
-    @apply mt-2 text-sm text-gray-700;
-  }
-
-  .title2 {
-    @apply text-base font-normal leading-6 text-gray-900;
-  }
-
-  .text {
-    @apply mt-2 text-sm text-gray-700;
+  .button-toggle {
+    @apply relative inline-flex items-center px-3 py-1 text-sm font-normal ring-1 ring-inset ring-gray-300 hover:bg-slate-300 focus:z-10;
   }
 
   .dotted-item {
@@ -223,115 +429,83 @@
   }
 
   .input-block {
-    @apply text-sm bg-neutral-100 dark:bg-neutral-700 block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-slate-300 shadow-xs ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-300 sm:leading-6;
+    @apply text-sm std-white-text bg-white dark:bg-neutral-700 block w-full rounded-md border-0 py-1.5 shadow-xs ring-1 ring-inset ring-gray-300 sm:leading-6 focus-within:ring-2 focus-within:ring-inset focus-within:std-blue-ring;
   }
-
-  .disabled {
-    @apply text-slate-500 dark:text-slate-400 shadow-none cursor-not-allowed focus:ring-gray-300 focus:ring-1;
+  .input-icon {
+    @apply absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center;
   }
-
-  .input-label {
-    @apply absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900;
+  .input-dropdown {
+    @apply absolute z-50 mt-1 max-h-56 w-full overflow-auto rounded-md p-1;
   }
-
-  .table-desktop {
-    @apply hidden md:block;
+  .input-dropdown-item {
+    @apply relative cursor-default select-none py-2;
   }
-  .settings-table-desktop {
-    @apply hidden lg:block;
-  }
-
-  .card-mobile {
-    @apply grid grid-cols-1 gap-x-6 gap-y-4 pt-3 md:hidden;
-  }
-  .settings-card-mobile {
-    @apply grid grid-cols-1 gap-x-6 gap-y-4 pt-3 lg:hidden;
+  .input-dropdown-label {
+    @apply block truncate ml-3 font-normal
   }
 
   .std-table {
-    @apply min-w-full divide-y divide-gray-200 bg-gray-50 dark:divide-gray-600 dark:bg-neutral-800 dark:text-slate-300;
+    @apply min-w-full;
   }
-
   .std-table-header {
-    @apply py-2 pl-2 pr-3 sm:pl-6 font-medium;
+    @apply std-light py-2 pl-2 pr-3 font-medium sm:pl-6 dark:dark-bg;
   }
-
   .std-table-body {
-    @apply divide-y divide-gray-200 bg-white dark:divide-gray-600 dark:bg-neutral-900;
+    @apply std-white divide-y divide-gray-300 dark:divide-gray-600 dark:bg-neutral-900;
+  }
+  .std-table-footer {
+    @apply flex items-center justify-between px-4 py-3 sm:px-6 rounded-lg std-light dark:dark-bg;
+  }
+  .std-table-footer-btn {
+    @apply relative inline-flex items-center px-2 py-2 ring-1 ring-inset ring-gray-300;
   }
-
   .table-frame1 {
     @apply my-3 flow-root;
   }
-
   .table-frame3 {
     @apply inline-block min-w-full align-middle;
   }
-
   .table-shadow {
     @apply overflow-hidden shadow-sm ring-1 ring-black/5 sm:rounded-lg;
   }
-
   .table-font {
-    @apply py-2 text-sm font-normal text-gray-900 pl-3 pr-2 dark:text-slate-300;
-  }
-
-  .table-font-first-col {
-    @apply py-2 pl-2 pr-3 text-xs font-medium text-gray-900 sm:pl-6;
-  }
-
-  .table-font-other-cols {
-    @apply px-3 py-2 pl-6 text-xs text-gray-500;
+    @apply std-white-text py-2 text-sm font-normal pl-3 pr-2;
   }
 
   .box {
     @apply border-2 inline-flex rounded-lg m-1 px-4 py-2 text-sm items-center cursor-pointer;
   }
-
   .disabled-box {
-    @apply border-slate-300 bg-neutral-200 text-gray-500 cursor-not-allowed dark:bg-neutral-700 dark:text-gray-400 dark:border-neutral-600;
+    @apply std-disabled std-disabled-text cursor-not-allowed std-white-border;
   }
-
   .blue-box {
-    @apply border-sky-400 bg-sky-200 text-sky-700 transition ease-in-out hover:scale-105 duration-200 hover:bg-sky-100 hover:font-normal dark:border-slate-500 dark:bg-slate-700 dark:text-sky-100 dark:hover:bg-sky-700;
+    @apply std-blue-border std-blue-light std-blue-text transition ease-in-out hover:scale-105 duration-200 hover:font-normal hover:std-blue-hover-light;
   }
-
   .green-box {
-    @apply border-green-600 bg-green-300 text-emerald-800 transition ease-in-out hover:scale-105 duration-200 hover:bg-emerald-200 hover:font-normal dark:border-green-500 dark:bg-green-800 dark:text-green-100 dark:hover:bg-green-700;
+    @apply std-green-border std-green-light std-green-text transition ease-in-out hover:scale-105 duration-200 hover:font-normal hover:std-green-hover-light;
   }
-
   .selected-blue-box {
-    @apply border-sky-300 text-sky-700 bg-cyan-100 font-normal dark:border-sky-600 dark:bg-sky-900 dark:text-sky-200;
+    @apply std-blue-border std-blue-hover-light std-blue-text font-normal brightness-110;
   }
-
   .selected-green-box {
-    @apply border-emerald-500 bg-emerald-100 text-green-900 font-normal cursor-pointer dark:border-emerald-500 dark:bg-emerald-700 dark:text-green-100;
-  }
-
-  .button-toggle {
-    @apply relative inline-flex items-center px-3 py-1 text-sm font-normal ring-1 ring-inset ring-gray-300 hover:bg-slate-300 focus:z-10;
+    @apply std-green-border std-green-hover-light std-green-text font-normal brightness-110;
   }
 
   .chip {
     @apply text-sm font-medium px-2 py-1 rounded-full flex flex-row;
   }
-
   .select-chip {
     @apply px-1 text-sm font-medium rounded-full bg-sky-200 dark:bg-sky-700;
   }
-
   .green-chip {
     @apply bg-green-200 text-green-700 dark:bg-green-800 dark:text-green-300;
   }
-
   .red-chip {
     @apply bg-red-200 text-red-600 dark:bg-red-800 dark:text-red-300;
   }
-
   .yellow-chip {
     @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300;
   }
-
   .blue-chip {
     @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300;
   }
@@ -340,58 +514,18 @@
     @apply border border-gray-400 p-1 m-1 dark:border-white;
   }
 
-  .tooltip {
-    @apply isolate absolute z-50 inline-block px-3 py-2 text-xs text-black bg-gray-100 border border-gray-200 rounded-lg shadow-xs opacity-0 dark:bg-gray-800 dark:text-white
-  }
-
-  .spinner {
-    @apply w-5 h-5 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]
-  }
-
-  .icon-xs {
-    @apply w-3 h-3;
-  }
-
-  .icon {
-    @apply w-4 h-4;
-  }
-
-  .icon-md {
-    @apply w-5 h-5;
-  }
-
-  .icon-lg {
-    @apply w-6 h-6;
-  }
-
-  .icon-xl {
-    @apply w-8 h-8;
-  }
-
-  .icon-2xl {
-    @apply w-10 h-10;
-  }
-
   .icon-yellow {
-    @apply text-yellow-600;
+    @apply std-yellow-text;
   }
-
   .icon-green {
-    @apply text-green-600;
+    @apply std-green-text;
   }
-
   .icon-red {
-    @apply text-red-600;
+    @apply std-red-text;
   }
-
   .icon-blue {
-    @apply text-blue-600;
+    @apply std-blue-text;
   }
-
-  .icon-skyblue {
-    @apply text-sky-600;
-  }
-
   .icon-gray {
     @apply text-gray-500 dark:text-gray-300;
   }
@@ -406,32 +540,44 @@
     @apply -m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-800 dark:text-gray-100 dark:hover:text-gray-400 hover:text-gray-400 mx-0.5
   }
   .report-card-field {
-    @apply text-xs text-gray-500 dark:text-gray-100 leading-6
+    @apply text-xs leading-6 text-gray-800 dark:text-gray-100
   }
   .report-card-grid {
     @apply grid grid-cols-10 gap-x-4 dark:border-neutral-600 px-6
   }
   .report-panel {
-    @apply bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700
+    @apply white-bg border std-white-border dark:bg-slate-800 dark:text-slate-300
+  }
+  .report-completed {
+    @apply border-green-500 bg-green-300 dark:border-green-400 dark:bg-green-800
+  }
+  .report-error {
+    @apply border-red-500 bg-red-300 dark:border-red-400 dark:bg-red-800
+  }
+  .report-running {
+    @apply border-gray-500 bg-gray-300 dark:border-gray-400 dark:bg-gray-600
   }
 
+  .score-inactive {
+    @apply bg-gray-300 text-gray-400 dark:bg-gray-600;
+  }
   .score-none {
-    @apply text-gray-400
+    @apply text-gray-400 dark:text-slate-600
   }
   .score-none-bg {
-    @apply bg-gray-400 text-white
+    @apply bg-gray-400 text-white dark:bg-slate-600
   }
   .score-low {
-    @apply text-sky-600
+    @apply text-sky-500
   }
   .score-low-bg {
-    @apply bg-sky-600 text-white
+    @apply bg-sky-500 text-white
   }
   .score-medium {
-    @apply text-amber-400
+    @apply text-yellow-500
   }
   .score-medium-bg {
-    @apply bg-amber-400 text-white
+    @apply bg-yellow-500 text-white
   }
   .score-serious {
     @apply text-orange-500
@@ -440,42 +586,29 @@
     @apply bg-orange-500 text-white
   }
   .score-high {
-    @apply text-red-600 dark:text-red-500
+    @apply text-red-500
   }
   .score-high-bg {
-    @apply bg-red-600 dark:bg-red-500 text-white
+    @apply bg-red-500 text-white
   }
   .score-critical {
-    @apply text-red-900 dark:text-rose-700
+    @apply text-red-800 dark:text-rose-700
   }
   .score-critical-bg {
-    @apply bg-red-900 dark:bg-rose-700 text-white
-  }
-  .score-warn {
-    @apply text-violet-700 dark:text-violet-500
-  }
-  .score-warn-bg {
-    @apply bg-violet-700 dark:bg-violet-500 text-white
+    @apply bg-red-800 text-white dark:bg-rose-700
   }
   .calendar-spectrum {
     @apply w-1/6 px-3 py-2 text-sm font-semibold text-white shadow-sm
   }
+  .calendar {
+    @apply isolate grid grid-cols-7 gap-px rounded-lg text-sm shadow-sm bg-gray-400 dark:bg-gray-200 ring-1 ring-gray-400 dark:ring-gray-200;
+  }
 
   .tab-selected {
-    @apply bg-sky-100 dark:bg-slate-800 text-sky-700 dark:text-sky-100;
+    @apply std-blue-light std-blue-text;
   }
   .tab-unselected {
-    @apply text-slate-500 dark:text-slate-200 opacity-50;
-  }
-
-  .report-completed {
-    @apply border-green-500 bg-green-200 dark:border-green-400 dark:bg-green-800
-  }
-  .report-error {
-    @apply border-red-500 bg-red-300 dark:border-red-400 dark:bg-red-800
-  }
-  .report-running {
-    @apply border-gray-500 bg-gray-300 dark:border-gray-400 dark:bg-gray-600
+    @apply std-light opacity-80 hover:opacity-90 hover:std-blue-light dark:dark-bg;
   }
 
   .menu {
@@ -485,7 +618,21 @@
     @apply flex items-center gap-x-1 text-sm font-semibold leading-6
   }
   .menu-icon {
-    @apply h-6 shrink-0 hover:font-bold
+    @apply h-6 shrink-0
+  }
+
+  .card {
+    @apply relative flex flex-col gap-x-4 border-b std-white-border std-white p-8 rounded-lg dark:dark-bg 
+  }
+
+  .support-text {
+    @apply flex w-full items-center justify-between space-x-6 p-6;
+  }
+  .support-blocks {
+    @apply grid grid-cols-1 gap-6 lg:grid-cols-2 pt-3;
+  }
+  .support-card {
+    @apply col-span-1 rounded-lg std-light dark:std-dark shadow-sm;
   }
 
   .chat-sender {
@@ -497,6 +644,16 @@
   .chat-bars {
     @apply relative bg-gray-300 dark:bg-black
   }
+
+  .slider-button {
+    @apply absolute z-30 flex items-center justify-center h-full cursor-pointer focus:outline-hidden;
+  }
+  .slider-active {
+    @apply bg-gray-500 dark:bg-gray-200;
+  }
+  .slider-inactive {
+    @apply bg-gray-200 dark:bg-gray-500;
+  }
 }
 
 @layer base {
@@ -504,4 +661,12 @@
   [role="button"]:not(:disabled) {
     cursor: pointer;
   }
-}
+  input[type="checkbox"],
+  input[type="radio"],
+  input[type="range"] {
+    accent-color: #0284c7;
+  }
+  :focus-visible {
+    --tw-ring-color: #0284c7;
+  }
+}