fluency-v8-components 1.3.4 → 1.3.6

package/src/assets/main.css

@@ -0,0 +1,505 @@
+.dark {
+  background: #121212;
+  color: #cbd5e1;
+}
+
+@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;
+}
+
+@utility report-container {
+  min-height: calc(100vh - 425px);
+  min-width: 80rem;
+}
+
+@utility top-left {
+  align-items: left;
+  justify-content: left;
+}
+
+@utility top-center {
+  align-items: left;
+  justify-content: center;
+}
+
+@utility top-right {
+  align-items: left;
+  justify-content: right;
+}
+
+@utility center-left {
+  align-items: center;
+  justify-content: left;
+}
+
+@utility center-center {
+  align-items: center;
+  justify-content: center;
+}
+
+@utility center-right {
+  align-items: center;
+  justify-content: right;
+}
+
+@utility bottom-left {
+  align-items: end;
+  justify-content: left;
+}
+
+@utility bottom-center {
+  align-items: end;
+  justify-content: center;
+}
+
+@utility bottom-right {
+  align-items: end;
+  justify-content: right;
+}
+
+@utility row {
+  display: flex;
+  flex-direction: row;
+}
+
+@utility col {
+  display: flex;
+  flex-direction: column;
+}
+
+@utility white-bg {
+  @apply bg-white text-gray-900 dark:bg-neutral-800 dark:text-slate-300;
+}
+
+@utility dark-bg {
+  @apply bg-neutral-800 text-slate-300;
+}
+
+@utility std-dark {
+  @apply bg-neutral-800 hover:bg-gray-700 focus-visible:outline-sky-50;
+}
+
+@utility white-bg-hover {
+  @apply cursor-pointer bg-gray-300 focus-visible:outline-gray-300;
+}
+
+@utility dark-bg-hover {
+  @apply cursor-pointer bg-gray-700 focus-visible:outline-gray-700;
+}
+
+@utility input-icon {
+  @apply absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("/OpenSans-VariableFont_wdth,wght.ttf");
+}
+
+@layer utilities {
+  .status-dot {
+    @apply inline-flex items-center rounded-sm mx-2 my-0.5 px-2 py-0.5 font-medium
+  }
+
+  .status-positive {
+    @apply text-green-600 bg-green-600/20 dark:text-green-400 dark:bg-green-400/10
+  }
+
+  .status-negative {
+    @apply text-rose-600 bg-rose-600/20 dark:text-rose-400 dark:bg-rose-400/10
+  }
+
+  .status-warning {
+    @apply text-yellow-600 bg-yellow-600/20 dark:text-yellow-400 dark:bg-yellow-400/10
+  }
+
+  .status-neutral {
+    @apply text-gray-400 bg-gray-400/20 dark:text-gray-200 dark:bg-gray-200/10
+  }
+
+  .page-height {
+    height: calc(100vh - 200px);
+  }
+  .page-height-facet {
+    height: calc(100vh - 330px);
+  }
+  .page-height-search {
+    height: calc(100vh - 255px);
+  }
+}
+
+@layer components {
+  .screen-size {
+    @apply max-w-[1600px];
+  }
+
+  .loading {
+    @apply text-lg font-medium text-teal-700 relative -top-3 dark:text-teal-400
+  }
+
+  .std-btn {
+    @apply inline-flex items-center rounded-lg px-5 py-3 text-sm font-normal text-white;
+  }
+
+  .std-btn:disabled {
+    @apply disabled:opacity-30 disabled:cursor-not-allowed;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .dotted-item {
+    @apply my-2 px-5 py-1 rounded-lg border-2 border-dotted flex flex-row justify-center items-center text-sm hover:opacity-75;
+  }
+
+  .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;
+  }
+
+  .disabled {
+    @apply text-slate-500 dark:text-slate-400 shadow-none cursor-not-allowed focus:ring-gray-300 focus:ring-1;
+  }
+
+  .input-label {
+    @apply absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .std-table-header {
+    @apply py-2 pl-2 pr-3 sm:pl-6 font-medium;
+  }
+
+  .std-table-body {
+    @apply divide-y divide-gray-200 bg-white dark:divide-gray-600 dark:bg-neutral-900;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .image-position-box {
+    @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;
+  }
+
+  .icon-green {
+    @apply text-green-600;
+  }
+
+  .icon-red {
+    @apply text-red-600;
+  }
+
+  .icon-blue {
+    @apply text-blue-600;
+  }
+
+  .icon-skyblue {
+    @apply text-sky-600;
+  }
+
+  .icon-gray {
+    @apply text-gray-500 dark:text-gray-300;
+  }
+
+  .report-bold {
+    @apply font-semibold text-gray-800 dark:text-gray-100
+  }
+  .report-light {
+    @apply text-gray-500 dark:text-gray-400 font-light text-sm
+  }
+  .report-arrow {
+    @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
+  }
+  .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
+  }
+
+  .score-none {
+    @apply text-gray-400
+  }
+  .score-none-bg {
+    @apply bg-gray-400 text-white
+  }
+  .score-low {
+    @apply text-sky-600
+  }
+  .score-low-bg {
+    @apply bg-sky-600 text-white
+  }
+  .score-medium {
+    @apply text-amber-400
+  }
+  .score-medium-bg {
+    @apply bg-amber-400 text-white
+  }
+  .score-serious {
+    @apply text-orange-500
+  }
+  .score-serious-bg {
+    @apply bg-orange-500 text-white
+  }
+  .score-high {
+    @apply text-red-600 dark:text-red-500
+  }
+  .score-high-bg {
+    @apply bg-red-600 dark:bg-red-500 text-white
+  }
+  .score-critical {
+    @apply text-red-900 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
+  }
+  .calendar-spectrum {
+    @apply w-1/6 px-3 py-2 text-sm font-semibold text-white shadow-sm
+  }
+
+  .tab-selected {
+    @apply bg-sky-100 dark:bg-slate-800 text-sky-700 dark:text-sky-100;
+  }
+  .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
+  }
+
+  .menu {
+    @apply relative ml-auto my-2
+  }
+  .menu-button {
+    @apply flex items-center gap-x-1 text-sm font-semibold leading-6
+  }
+  .menu-icon {
+    @apply h-6 shrink-0 hover:font-bold
+  }
+
+  .chat-sender {
+    @apply text-gray-50 bg-[#0084FF] dark:bg-[#1B74E4]
+  }
+  .chat-response {
+    @apply bg-gray-200 dark:bg-slate-700
+  }
+  .chat-bars {
+    @apply relative bg-gray-300 dark:bg-black
+  }
+}
+
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}