pear-browser/input.css at main · Drache93/pear-browser · 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
@import "tailwindcss";

pear-ctrl[data-platform="darwin"] {
  margin-top: 12px;
  margin-left: 10px;
}

#titlebar {
  -webkit-app-region: drag;
}

[x-cloak] {
  display: none !important;
}

/* Custom scrollbar styling to match pear branding */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background: var(--color-muted);
  border-radius: 12px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-tertiary);
  border-radius: 12px;
  border: 2px solid var(--color-muted);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

::-webkit-scrollbar-corner {
  background: var(--color-muted);
}

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-tertiary) var(--color-muted);
}

@theme {
  /* brand */
  --color-primary: #4caf50; /* Pear Green (mid) */
  --color-primary-foreground: #ffffff;

  --color-secondary: #8bc34a; /* Pear Green (light) */
  --color-secondary-foreground: #0f1f0f;

  --color-accent: #2e7d32; /* Pear Green (dark) */
  --color-accent-foreground: #ffffff;

  --color-tertiary: #42a5f5; /* Warm brown */
  --color-tertiary-foreground: #ffffff;

  /* ui */
  --color-background: #f6f4ee; /* soft beige paper */
  --color-foreground: #212121; /* main text */

  --color-card: #ffffff;
  --color-card-foreground: #212121;

  --color-popover: #ffffff;
  --color-popover-foreground: #212121;

  --color-muted: #eaf3e4; /* very light green tint */
  --color-muted-foreground: #4a4a4a;

  --color-border: #e0e0e0;
  --color-input: #e0e0e0;
  --color-ring: #8bc34a;

  /* feedback */
  --color-destructive: #d32f2f;
  --color-destructive-foreground: #ffffff;

  --shadow-standard: 0 1px 3px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);

  /* modal specific */
  --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}