react-resizable-panels/index.css at main · febug/react-resizable-panels · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
@source "node_modules/react-lib-tools";

@import "tailwindcss";
@import "react-lib-tools/styles.css";

@theme {
  --color-background-gradient-1: var(--color-fuchsia-500);
  --color-background-gradient-2: var(--color-violet-500);
  --color-background-gradient-3: var(--color-fuchsia-700);
  --color-common-question-header: var(--color-fuchsia-300);
  --color-focus-1: var(--color-sky-300);
  --color-focus-2: var(--color-sky-400);
  --color-focus-3: var(--color-sky-600);

  /*
   * Opaque separator/gridline colors (white at 20%, 35%, and 50% over the page background);
   * translucent colors would look brighter where row and column gridlines overlap
   */
  --color-separator: #3f3846;
  --color-separator-hover: #635d69;
  --color-separator-active: #87838c;
}

/*
 * Workspace demo: elements of tabsets with tabs on the left or right
 * (every element within a tabset has a data-tab-placement attribute), and the content of their tabs
 */
@custom-variant tabs-vertical {
  &:is([data-tab-placement="left"], [data-tab-placement="right"]) {
    @slot;
  }
  [data-tab]:is([data-tab-placement="left"], [data-tab-placement="right"]) & {
    @slot;
  }
}

/* The colors above are chosen for the dark theme */
@media (prefers-color-scheme: light) {
  :root {
    --color-common-question-header: var(--color-fuchsia-700);

    /* Ink (slate-900) at 20%, 35%, and 50% over white */
    --color-separator: #cfd1d4;
    --color-separator-hover: #abaeb4;
    --color-separator-active: #878b94;
  }
}

/* Pages shown in iframes (e.g. the drag between copies of the app demo) are transparent, so the iframe's background shows through */
[data-embed] #root {
  background: none;
}