fl-builder-vars.css 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. :root {
  2. --fl-builder-accent-color: hsla(194, 100%, 41%, 1);
  3. --fl-builder-accent-color-hover: hsla(194, 100%, 37%, 1);
  4. --fl-builder-global-accent-color: #ff9600;
  5. --fl-builder-muted-accent-color: #555D66;
  6. --fl-builder-font-family: system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
  7. --fl-builder-highlight-width: 2px;
  8. --fl-builder-highlight-offset: calc( 0px - ( var(--fl-builder-highlight-width) / 2 ) ); /* Straddles the edge */
  9. --fl-builder-highlight-color: var(--fl-builder-accent-color);
  10. --fl-builder-highlight-color-hover: var(--fl-builder-accent-color-hover);
  11. /* Sizes */
  12. --fl-builder-radius: 6px;
  13. --fl-builder-target-size: 36px;
  14. --fl-builder-min-node-size: 24px;
  15. --fl-builder-panel-width: 320px;
  16. --fl-builder-panel-min-width: 320px;
  17. --fl-builder-panel-max-width: 600px;
  18. --fl-builder-panel-min-height: 500px;
  19. /* Top Bar */
  20. --fl-builder-top-bar-inset: 4px;
  21. --fl-builder-top-bar-height: calc( var(--fl-builder-target-size) + ( var(--fl-builder-top-bar-inset) * 2 ) );
  22. /* Panels & Forms */
  23. --fl-builder-ui-hue: 210;
  24. --fl-builder-input-bg-color: white;
  25. --fl-builder-input-color: black;
  26. --fl-builder-panel-bg-color: hsl( var(--fl-builder-ui-hue), 25%, 99% );
  27. --fl-builder-heading-bg-color: var(--fl-builder-panel-bg-color);
  28. --fl-builder-platter-bg-color: hsl( var(--fl-builder-ui-hue), 30%, 96% );
  29. --fl-builder-outline-color: hsl( var(--fl-builder-ui-hue), 26%, 86% );
  30. --fl-builder-input-shadow: 0 0 0 1px var(--fl-builder-outline-color);
  31. --fl-builder-focus-shadow: inset 0 0 0 1.5px var(--fl-builder-accent-color);
  32. /* Tab dividers */
  33. --fl-builder-divider-color: hsl( var(--fl-builder-ui-hue), 26%, 80% );
  34. --fl-builder-divider-width: 1px;
  35. --fl-builder-selected-color: hsl(194deg 100% 34%) !important;
  36. --fl-builder-dim-color: hsl(var(--fl-builder-ui-hue), 12%, 55%);
  37. }