a very good jj gui
style: update application styles
Update CSS for new layout:
- Update App.css with layout styles
- Update index.css with Tailwind and theme variables
+156
-63
+36
-36
apps/desktop/src/styles/App.css
+36
-36
apps/desktop/src/styles/App.css
···
1
1
.container {
2
-
display: flex;
3
-
flex-direction: column;
4
-
align-items: center;
5
-
justify-content: center;
2
+
display: flex;
3
+
flex-direction: column;
4
+
align-items: center;
5
+
justify-content: center;
6
6
}
7
7
8
8
h1 {
9
-
font-size: 3.2em;
10
-
line-height: 1.1;
11
-
margin-bottom: 0.5rem;
9
+
font-size: 3.2em;
10
+
line-height: 1.1;
11
+
margin-bottom: 0.5rem;
12
12
}
13
13
14
14
.row {
15
-
display: flex;
16
-
gap: 0.5rem;
17
-
margin: 1rem 0;
15
+
display: flex;
16
+
gap: 0.5rem;
17
+
margin: 1rem 0;
18
18
}
19
19
20
20
input {
21
-
padding: 0.6em 1.2em;
22
-
font-size: 1em;
23
-
font-weight: 500;
24
-
font-family: inherit;
25
-
background-color: #1a1a1a;
26
-
border: 1px solid transparent;
27
-
cursor: text;
28
-
transition: border-color 0.25s;
29
-
border-radius: 8px;
21
+
padding: 0.6em 1.2em;
22
+
font-size: 1em;
23
+
font-weight: 500;
24
+
font-family: inherit;
25
+
background-color: #1a1a1a;
26
+
border: 1px solid transparent;
27
+
cursor: text;
28
+
transition: border-color 0.25s;
29
+
border-radius: 8px;
30
30
}
31
31
32
32
input:hover {
33
-
border-color: #646cff;
33
+
border-color: #646cff;
34
34
}
35
35
36
36
input:focus,
37
37
input:focus-visible {
38
-
outline: 4px auto -webkit-focus-ring-color;
38
+
outline: 4px auto -webkit-focus-ring-color;
39
39
}
40
40
41
41
button {
42
-
padding: 0.6em 1.2em;
43
-
font-size: 1em;
44
-
font-weight: 500;
45
-
font-family: inherit;
46
-
background-color: #1a1a1a;
47
-
border: 1px solid transparent;
48
-
cursor: pointer;
49
-
transition: border-color 0.25s;
50
-
border-radius: 8px;
42
+
padding: 0.6em 1.2em;
43
+
font-size: 1em;
44
+
font-weight: 500;
45
+
font-family: inherit;
46
+
background-color: #1a1a1a;
47
+
border: 1px solid transparent;
48
+
cursor: pointer;
49
+
transition: border-color 0.25s;
50
+
border-radius: 8px;
51
51
}
52
52
53
53
button:hover {
54
-
border-color: #646cff;
54
+
border-color: #646cff;
55
55
}
56
56
57
57
button:focus,
58
58
button:focus-visible {
59
-
outline: 4px auto -webkit-focus-ring-color;
59
+
outline: 4px auto -webkit-focus-ring-color;
60
60
}
61
61
62
62
@media (prefers-color-scheme: light) {
63
-
input,
64
-
button {
65
-
background-color: #f9f9f9;
66
-
}
63
+
input,
64
+
button {
65
+
background-color: #f9f9f9;
66
+
}
67
67
}
+120
-27
apps/desktop/src/styles/index.css
+120
-27
apps/desktop/src/styles/index.css
···
1
-
:root {
2
-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
-
line-height: 1.5;
4
-
font-weight: 400;
1
+
@import "tailwindcss";
2
+
@import "tw-animate-css";
3
+
@import "shadcn/tailwind.css";
4
+
@import "@fontsource-variable/jetbrains-mono";
5
5
6
-
color-scheme: light dark;
7
-
color: rgba(255, 255, 255, 0.87);
8
-
background-color: #242424;
6
+
@custom-variant dark (&:is(.dark *));
9
7
10
-
font-synthesis: none;
11
-
text-rendering: optimizeLegibility;
12
-
-webkit-font-smoothing: antialiased;
13
-
-moz-osx-font-smoothing: grayscale;
8
+
:root {
9
+
--background: oklch(1 0 0);
10
+
--foreground: oklch(0.147 0.004 49.25);
11
+
--card: oklch(1 0 0);
12
+
--card-foreground: oklch(0.147 0.004 49.25);
13
+
--popover: oklch(1 0 0);
14
+
--popover-foreground: oklch(0.147 0.004 49.25);
15
+
--primary: oklch(0.67 0.16 58);
16
+
--primary-foreground: oklch(0.99 0.02 95);
17
+
--secondary: oklch(0.967 0.001 286.375);
18
+
--secondary-foreground: oklch(0.21 0.006 285.885);
19
+
--muted: oklch(0.97 0.001 106.424);
20
+
--muted-foreground: oklch(0.553 0.013 58.071);
21
+
--accent: oklch(0.97 0.001 106.424);
22
+
--accent-foreground: oklch(0.216 0.006 56.043);
23
+
--destructive: oklch(0.577 0.245 27.325);
24
+
--border: oklch(0.923 0.003 48.717);
25
+
--input: oklch(0.923 0.003 48.717);
26
+
--ring: oklch(0.709 0.01 56.259);
27
+
--chart-1: oklch(0.88 0.15 92);
28
+
--chart-2: oklch(0.77 0.16 70);
29
+
--chart-3: oklch(0.67 0.16 58);
30
+
--chart-4: oklch(0.56 0.15 49);
31
+
--chart-5: oklch(0.47 0.12 46);
32
+
--radius: 0.625rem;
33
+
--sidebar: oklch(0.985 0.001 106.423);
34
+
--sidebar-foreground: oklch(0.147 0.004 49.25);
35
+
--sidebar-primary: oklch(0.67 0.16 58);
36
+
--sidebar-primary-foreground: oklch(0.99 0.02 95);
37
+
--sidebar-accent: oklch(0.97 0.001 106.424);
38
+
--sidebar-accent-foreground: oklch(0.216 0.006 56.043);
39
+
--sidebar-border: oklch(0.923 0.003 48.717);
40
+
--sidebar-ring: oklch(0.709 0.01 56.259);
14
41
}
15
42
16
-
body {
17
-
margin: 0;
18
-
display: flex;
19
-
place-items: center;
20
-
min-width: 320px;
21
-
min-height: 100vh;
43
+
.dark {
44
+
--background: oklch(0.147 0.004 49.25);
45
+
--foreground: oklch(0.985 0.001 106.423);
46
+
--card: oklch(0.216 0.006 56.043);
47
+
--card-foreground: oklch(0.985 0.001 106.423);
48
+
--popover: oklch(0.216 0.006 56.043);
49
+
--popover-foreground: oklch(0.985 0.001 106.423);
50
+
--primary: oklch(0.77 0.16 70);
51
+
--primary-foreground: oklch(0.28 0.07 46);
52
+
--secondary: oklch(0.274 0.006 286.033);
53
+
--secondary-foreground: oklch(0.985 0 0);
54
+
--muted: oklch(0.268 0.007 34.298);
55
+
--muted-foreground: oklch(0.709 0.01 56.259);
56
+
--accent: oklch(0.268 0.007 34.298);
57
+
--accent-foreground: oklch(0.985 0.001 106.423);
58
+
--destructive: oklch(0.704 0.191 22.216);
59
+
--border: oklch(1 0 0 / 10%);
60
+
--input: oklch(1 0 0 / 15%);
61
+
--ring: oklch(0.553 0.013 58.071);
62
+
--chart-1: oklch(0.88 0.15 92);
63
+
--chart-2: oklch(0.77 0.16 70);
64
+
--chart-3: oklch(0.67 0.16 58);
65
+
--chart-4: oklch(0.56 0.15 49);
66
+
--chart-5: oklch(0.47 0.12 46);
67
+
--sidebar: oklch(0.216 0.006 56.043);
68
+
--sidebar-foreground: oklch(0.985 0.001 106.423);
69
+
--sidebar-primary: oklch(0.77 0.16 70);
70
+
--sidebar-primary-foreground: oklch(0.28 0.07 46);
71
+
--sidebar-accent: oklch(0.268 0.007 34.298);
72
+
--sidebar-accent-foreground: oklch(0.985 0.001 106.423);
73
+
--sidebar-border: oklch(1 0 0 / 10%);
74
+
--sidebar-ring: oklch(0.553 0.013 58.071);
22
75
}
23
76
24
-
#root {
25
-
max-width: 1280px;
26
-
margin: 0 auto;
27
-
padding: 2rem;
28
-
text-align: center;
77
+
@theme inline {
78
+
--font-sans: "JetBrains Mono Variable", monospace;
79
+
--color-sidebar-ring: var(--sidebar-ring);
80
+
--color-sidebar-border: var(--sidebar-border);
81
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
82
+
--color-sidebar-accent: var(--sidebar-accent);
83
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
84
+
--color-sidebar-primary: var(--sidebar-primary);
85
+
--color-sidebar-foreground: var(--sidebar-foreground);
86
+
--color-sidebar: var(--sidebar);
87
+
--color-chart-5: var(--chart-5);
88
+
--color-chart-4: var(--chart-4);
89
+
--color-chart-3: var(--chart-3);
90
+
--color-chart-2: var(--chart-2);
91
+
--color-chart-1: var(--chart-1);
92
+
--color-ring: var(--ring);
93
+
--color-input: var(--input);
94
+
--color-border: var(--border);
95
+
--color-destructive: var(--destructive);
96
+
--color-accent-foreground: var(--accent-foreground);
97
+
--color-accent: var(--accent);
98
+
--color-muted-foreground: var(--muted-foreground);
99
+
--color-muted: var(--muted);
100
+
--color-secondary-foreground: var(--secondary-foreground);
101
+
--color-secondary: var(--secondary);
102
+
--color-primary-foreground: var(--primary-foreground);
103
+
--color-primary: var(--primary);
104
+
--color-popover-foreground: var(--popover-foreground);
105
+
--color-popover: var(--popover);
106
+
--color-card-foreground: var(--card-foreground);
107
+
--color-card: var(--card);
108
+
--color-foreground: var(--foreground);
109
+
--color-background: var(--background);
110
+
--radius-sm: calc(var(--radius) - 4px);
111
+
--radius-md: calc(var(--radius) - 2px);
112
+
--radius-lg: var(--radius);
113
+
--radius-xl: calc(var(--radius) + 4px);
114
+
--radius-2xl: calc(var(--radius) + 8px);
115
+
--radius-3xl: calc(var(--radius) + 12px);
116
+
--radius-4xl: calc(var(--radius) + 16px);
29
117
}
30
118
31
-
@media (prefers-color-scheme: light) {
32
-
:root {
33
-
color: #213547;
34
-
background-color: #ffffff;
35
-
}
119
+
@layer base {
120
+
* {
121
+
@apply border-border outline-ring/50;
122
+
}
123
+
body {
124
+
@apply font-sans bg-background text-foreground;
125
+
}
126
+
html {
127
+
@apply font-sans;
128
+
}
36
129
}