github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/styles/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.theme-steampipe-default {
  /* Control colors */
  --color-alert: #da1e28;
  --color-alert-animate: rgba(218, 30, 40, 0.8); /* #e7525a */
  --color-alert-light: rgba(218, 30, 40, 0.3);
  --color-alert-inverse: theme("colors.white");
  --color-orange: #ff832b;
  --color-orange-inverse: theme("colors.white");
  --color-severity: #c9a00c;
  --color-ok: #198038;
  --color-ok-animate: rgba(25, 128, 56, 0.8); /* #27ca58 */
  --color-ok-inverse: theme("colors.white");
  --color-info: #3185fc;
  --color-info-animate: rgba(49, 133, 252, 0.8); /* #64a3fc */
  --color-info-inverse: theme("colors.white");
  --color-skip: theme("colors.gray.400");
  --color-skip-animate: rgba(156, 163, 175, 0.8); /* #b4bac3 */
  --color-skip-inverse: theme("colors.white");

  /* Primary colors */
  --color-success: #0070f3;
  --color-error: #e00;
  --color-warning: #f9a825;
  --color-dashboard: rgb(243 244 246);
  --color-dashboard-panel: #fff;
  --color-foreground: #000;
  --color-foreground-light: #515151;
  --color-foreground-lighter: #666;
  --color-foreground-lightest: #ccc;
  --color-link: #2645c5;
  --color-black-scale-1: #fafafa;
  --color-black-scale-2: #eaeaea;
  --color-black-scale-3: #d3d3d3;
  --color-black-scale-4: #888;
  --color-black-scale-5: #666;
  --color-black-scale-6: #444;
  --color-black-scale-7: #333;
  --color-black-scale-8: #111;
  --color-secondary: var(--color-black-scale-5);

  /* General colors */
  --color-divide: theme("colors.gray.100");
  --color-nav: #fafbfc;
  --color-nav-border: #dee2e6;

  /* Visual colors */
  --color-danger: rgb(238, 0, 0);

  /* Borders */
  --color-table-border: theme("colors.gray.200");
  --color-table-divide: var(--color-dashboard);
  --color-table-head: var(--color-black-scale-6);
  --color-table-alternating-row: #fcfcfc;
}

.theme-steampipe-dark {
  /* Control colors */
  --color-alert: #f83741;
  --color-alert-animate: rgba(248, 55, 65, 0.8);
  --color-alert-light: rgba(250, 77, 86, 0.3);
  --color-alert-inverse: theme("colors.white");
  --color-orange: #ff832b;
  --color-orange-inverse: theme("colors.white");
  --color-severity: #bd960b;
  --color-ok: #24a148;
  --color-ok-animate: rgba(36, 161, 72, 0.8);
  --color-ok-inverse: theme("colors.white");
  --color-info: #4589ff;
  --color-info-animate: rgba(69, 137, 255, 0.8);
  --color-info-inverse: theme("colors.white");
  --color-skip: theme("colors.gray.400");
  --color-skip-animate: rgba(156, 163, 175, 0.8); /* #b4bac3 */
  --color-skip-inverse: theme("colors.white");

  /* Primary colors */
  --color-success: #0070f3;
  --color-error: red;
  --color-warning: #f9a825;
  --color-dashboard: #1e2329;
  --color-dashboard-panel: #262b32; /* #2d333b;*/ /*var(--color-black-scale-1);*/
  --color-foreground: #fff;
  --color-foreground-light: #ccc;
  --color-foreground-lighter: #888;
  --color-foreground-lightest: #626262;
  --color-link: #809fff;
  --color-black-scale-1: #222;
  --color-black-scale-2: #333;
  --color-black-scale-3: #444;
  --color-black-scale-4: #757575;
  --color-black-scale-5: #888;
  --color-black-scale-6: #999;
  --color-black-scale-7: #eaeaea;
  --color-black-scale-8: #fafafa;
  --color-secondary: var(--color-black-scale-5);

  /* General colors */
  --color-divide: var(--color-black-scale-2);
  --color-nav: var(--color-dashboard);
  --color-nav-border: #333;

  /* Visual colors */
  --color-danger: rgb(255, 0, 0);

  /* Borders */
  --color-table-border: theme("colors.gray.700");
  --color-table-divide: var(--color-black-scale-2);
  --color-table-head: var(--color-black-scale-6);
  --color-table-alternating-row: #23282f;
}

@layer base {
  html {
    font-size: 14px;
  }

  [type="text"] {
    background-color: var(--color-dashboard-panel);
  }
}

@layer components {
  /* Base */
  .link {
    @apply no-underline cursor-pointer outline-none;
  }

  .link-highlight {
    @apply link text-link;
  }

  h1 {
    @apply text-3xl font-bold;
  }

  h2 {
    @apply text-2xl font-semibold;
  }

  h3 {
    @apply text-xl mt-1 font-semibold;
  }
}

.sb-show-main.sb-main-padded {
  padding: 0;
}

.subtle-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.summary-chart-error-animate {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color-alert),
    var(--color-alert) 0.5rem,
    var(--color-alert-animate) 0.5rem,
    var(--color-alert-animate) 1.25rem
  );
  background-size: 200% 200%;
  animation: barberpole 10s linear infinite;
}

.summary-chart-alarm-animate {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color-alert-animate),
    var(--color-alert-animate) 0.5rem,
    var(--color-alert) 0.5rem,
    var(--color-alert) 1.25rem
  );
  background-size: 200% 200%;
  animation: barberpole 10s linear infinite;
}

.summary-chart-ok-animate {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color-ok-animate),
    var(--color-ok-animate) 0.5rem,
    var(--color-ok) 0.5rem,
    var(--color-ok) 1.25rem
  );
  background-size: 200% 200%;
  animation: barberpole 10s linear infinite;
}

.summary-chart-info-animate {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color-info-animate),
    var(--color-info-animate) 0.5rem,
    var(--color-info) 0.5rem,
    var(--color-info) 1.25rem
  );
  background-size: 200% 200%;
  animation: barberpole 10s linear infinite;
}

.summary-chart-skip-animate {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color-skip-animate),
    var(--color-skip-animate) 0.5rem,
    var(--color-skip) 0.5rem,
    var(--color-skip) 1.25rem
  );
  background-size: 200% 200%;
  animation: barberpole 10s linear infinite;
}

.dashboard-loading-animate {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color-skip-animate),
    var(--color-skip-animate) 0.5rem,
    var(--color-skip) 0.5rem,
    var(--color-skip) 1.25rem
  );
  background-size: 200% 200%;
  animation: barberpole 10s linear infinite;
}

.react-flow__handle {
  display: none;
}

@keyframes barberpole {
  100% {
    background-position: 100% 100%;
  }
}

@keyframes ping {
  75%,
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

@media print {
  #root {
    -webkit-print-color-adjust: exact;
  }

  div {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  canvas.chart-canvas {
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
    height: auto !important;
    width: auto !important;
  }
}