Browse-Bot/style.css at main · Vertex-Mods/Browse-Bot · 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
53
54
@import "styles/findbar.css";
@import "styles/markdown.css";
@import "styles/urlbar.css";
@import "styles/settings.css";
@import "styles/pseudo-bg.css";

:root {
  /*using fallback colors for zen colors*/
  --browser-primary-color: var(--zen-primary-color, #8ae3be);
  --browser-themed-toolbar-bg: var(--zen-themed-toolbar-bg, #333333);

  --acrylic-bg: light-dark(rgb(250, 250, 250), rgb(24, 24, 27));
  --acrylic-background: rgba(36, 37, 39, 0.6) !important;
  --acrylic-border: 0.5px solid rgba(127, 127, 127, 0.3);
  --acrylic-radius: 8px;
  --acrylic-glass-bg: color-mix(in srgb, var(--acrylic-bg) 40%, transparent 60%);
  --acrylic-glass-border: 1.5px solid
    color-mix(in srgb, var(--browser-primary-color) 20%, transparent 80%);

  --browse-bot-dialog-bg: var(--acrylic-glass-bg);
  --browse-bot-dialog-backdrop-filter: blur(32px) brightness(0.7) saturate(2.5);

  @media -moz-pref("extension.browse-bot.findbar-ai.background-style", "solid") {
    --browse-bot-dialog-bg: var(--acrylic-bg) !important;
    --browse-bot-dialog-backdrop-filter: none !important;
  }

  @media -moz-pref("extension.browse-bot.findbar-ai.background-style", "acrylic") {
    --browse-bot-dialog-bg: var(--acrylic-glass-bg) !important;
    --browse-bot-dialog-backdrop-filter: blur(32px) brightness(0.7) saturate(2.5);
  }

  @media -moz-pref("extension.browse-bot.findbar-ai.background-style", "pseudo") {
    --browse-bot-dialog-bg: transparent !important;
    --browse-bot-dialog-backdrop-filter: none;
  }

  --browse-bot-primary-bg: light-dark(
    color-mix(in srgb, var(--browser-primary-color) 90%, white 10%),
    color-mix(in srgb, var(--browser-primary-color) 70%, black 30%)
  );
  --browse-bot-primary: light-dark(
    color-mix(in srgb, var(--browser-primary-color) 50%, black 50%),
    color-mix(in srgb, var(--browser-primary-color) 50%, white 50%)
  );
  --browse-bot-error: #f31260;
  --browse-bot-error-bg: light-dark(#fdd0df, #610726);
  --browse-bot-success: #17c964;
  --browse-bot-success-bg: light-dark(#d1f4e0, #095028);
  --browse-bot-warning: #f5a524;
  --browse-bot-warning-bg: light-dark(#fdedd3, #62420e);
  --browse-bot-muted: #71717a;
  --browse-bot-muted-bg: light-dark(#f4f4f5, #27272a);
}