inula/packages/inula-code-generator/inula-code-generator-web/frontend/pages/index.css

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

/* Image Scanning animation */
.scanning::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 5px;
  height: 100%;
  background-image: linear-gradient(
    to right,
    rgba(19, 161, 14, 0.2),
    /* Darker matrix green with full transparency */ rgba(19, 161, 14, 0.8)
      /* The same green with 80% opacity */
  );
  animation: scanning 3s ease-in-out infinite;
}

@keyframes scanning {
  0%,
  100% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(340px);
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }
  
  body.dark {
    background-color: black;
  }

  div[role="presentation"].dark {
    background-color: #09090b !important;
  }

  iframe {
    background-color: white !important; 
  }

  .dark {
    --background: 222.2 0% 0%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.excalidraw-modal-container{
  pointer-events: auto;
}

.excalidraw .layer-ui__wrapper__top-right{
  margin-right: 60px;
}
/* 隐藏excalidraw links*/
.dropdown-menu-container .dropdown-menu-group {
  display: none;
}

html{
  height: 100% !important;

}
body{
  height: 100% !important;
}
#root{
  height: 100%;
}
.container{
  padding: 0 !important;
}
#__next{
  height: 100%;
}
:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;

  --color-brand: rgba(0, 108, 255, 1);
  --color-brand-light: rgba(25, 122, 255, 1);
  --color-brand-dark: rgba(0, 96, 229, 1);

  --color-canvas-background: rgba(31, 56, 88, 0.06);

  --color-icon-normal: rgba(31, 56, 88, 0.4);
  --color-icon-hover: rgba(31, 56, 88, 0.3);
  --color-icon-active: rgba(0, 108, 255, 1);
  --color-icon-reverse: rgb(255, 255, 255); 

  --color-line-normal: rgba(255, 255, 255, 0.1);
  --color-line-darken: darken(rgba(255, 255, 255, 0.1), 10%);

  --color-title:rgba(0, 0, 0, 0.8);
  --color-text: rgba(0, 0, 0, 0.6);
  --color-text-dark: darken(@rgba(0, 0, 0, 0.6), 10%);
  --color-text-light: lighten(rgba(0, 0, 0, 0.6), 10%);
  --color-text-reverse: rgba(255, 255, 255, 0.8);
  --color-text-regular: rgba(31, 56, 88, 0.8);

  --color-field-label: rgba(0, 0, 0, 0.4);;
  --color-field-text: rgba(0, 0, 0, 0.6);
  --color-field-placeholder: rgba(31, 56, 88, 0.3);
  --color-field-border: rgba(31, 56, 88, 0.3);
  --color-field-border-hover: rgba(31, 56, 88, 0.4);
  --color-field-border-active: rgba(31, 56, 88, 0.6);
  --color-field-background: rgb(255, 255, 255);

  --color-function-success:rgb(102, 188, 92);
  --color-function-warning: rgb(250, 189, 14);
  --color-function-information: #2e76a6;
  --color-function-error: rgb(240, 70, 49);

  --color-pane-background: rgb(255, 255, 255);
  --color-block-background-normal: rgb(255, 255, 255);
  --color-block-background-light: rgba(31, 56, 88, 0.04);
  --color-block-background-shallow: rgba(31, 56, 88, 0.06);
  --color-block-background-dark: rgba(31, 56, 88, 0.1);
  --color-block-background-disabled: rgba(31, 56, 88, 0.2);
  --color-block-background-deep-dark: #bac3cc;
  --color-layer-mask-background: rgba(0, 0, 0, 0.1);
  --color-layer-tooltip-background: rgba(44,47,51,0.8);

  --pane-title-bg-color: rgba(31,56,88,.04);

}