Skip to content

Enhanced buttons on play screen, theming, settings, and more #172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ingoau merged 26 commits into from
Mar 31, 2025
Merged

Enhanced buttons on play screen, theming, settings, and more #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
492a722
move trigger to sidebar
ingoau Mar 30, 2025
80ba193
fix issue
ingoau Mar 30, 2025
e66b224
add logo color changing
ingoau Mar 30, 2025
ce2359f
fix too long title
ingoau Mar 30, 2025
5ad099e
add icons
ingoau Mar 30, 2025
88521fc
add some settings
ingoau Mar 30, 2025
ebceb3e
redesign buttons
ingoau Mar 30, 2025
0862555
add icon to refresh icon
ingoau Mar 30, 2025
c973471
add reload action
ingoau Mar 30, 2025
0792839
rename state.ts
ingoau Mar 30, 2025
fdf7c15
start adding state
ingoau Mar 30, 2025
6f6f866
add settings open binding
ingoau Mar 30, 2025
b04301d
add settings button
ingoau Mar 30, 2025
7997855
fix stupid issue
ingoau Mar 30, 2025
a405592
add settings to command
ingoau Mar 30, 2025
ba54836
add themes
ingoau Mar 30, 2025
d76deb8
add theme selector
ingoau Mar 30, 2025
8627229
add theme element
ingoau Mar 30, 2025
991096b
add comment
ingoau Mar 30, 2025
1a335f5
add more theme
ingoau Mar 30, 2025
b9325bb
add style and fix some stuff
ingoau Mar 30, 2025
cf3d274
fix issue with logo
ingoau Mar 30, 2025
c18ee95
add sidebar colors to zinc light
ingoau Mar 30, 2025
f02adde
add black theme
ingoau Mar 30, 2025
3dfb9cf
add some more themes
ingoau Mar 30, 2025
7a5704f
add discalimer
ingoau Mar 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
285 changes: 284 additions & 1 deletion src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@plugin "@tailwindcss/typography";

@layer base {
:root {
/* :root {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
Expand Down Expand Up @@ -63,6 +63,289 @@
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
} */
:root {
--radius: 0.5rem;
}

body:has(#theme.shadcn-zinc-light) {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 72.22% 50.59%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--sidebar-background: var(--primary-foreground);
--sidebar-foreground: var(--primary);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--primary-foreground);
--sidebar-accent: var(--accent);
--sidebar-accent-foreground: var(--accent-foreground);
--sidebar-border: var(--border);
--sidebar-ring: var(--ring);
}

body:has(#theme.shadcn-zinc-dark) {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--sidebar-background: var(--primary-foreground);
--sidebar-foreground: var(--primary);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--primary-foreground);
--sidebar-accent: var(--accent);
--sidebar-accent-foreground: var(--accent-foreground);
--sidebar-border: var(--border);
--sidebar-ring: var(--ring);
}

body:has(#theme.black) {
--background: 0 0% 0%;
--foreground: 0 0% 100%;
--card: 0 0% 0%;
--card-foreground: 0 0% 100%;
--popover: 0 0% 0%;
--popover-foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 0 0% 0%;
--secondary: 0 0% 0%;
--secondary-foreground: 0 0% 100%;
--muted: 0 0% 0%;
--muted-foreground: 0 0% 100%;
--accent: 0 0% 100%;
--accent-foreground: 0 0% 0%;
--destructive: 0 0% 100%;
--destructive-foreground: 0 0% 0%;
--border: 0 0% 100%;
--input: 0 0% 100%;
--ring: 0 0% 100%;
--sidebar-background: var(--primary-foreground);
--sidebar-foreground: var(--primary);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--primary-foreground);
--sidebar-accent: var(--accent);
--sidebar-accent-foreground: var(--accent-foreground);
--sidebar-border: var(--border);
--sidebar-ring: var(--ring);
}

body:has(#theme.catppuccin-latte) {
--background: 220 23.076923191547394% 94.90196108818054%; /* base */
--foreground: 234 16.022099554538727% 35.49019694328308%; /* text */

--muted: 223 15.909090638160706% 82.74509906768799%; /* surface0 */
--muted-foreground: 233 12.796208262443542% 41.372549533843994%; /* subtext1 */

--popover: 220 23.076923191547394% 94.90196108818054%; /* base */
--popover-foreground: 234 16.022099554538727% 35.49019694328308%; /* text */

--card: 220 23.076923191547394% 94.90196108818054%; /* base */
--card-foreground: 234 16.022099554538727% 35.49019694328308%; /* text */

--border: 225 13.55932205915451% 76.86274647712708%; /* surface1 */
--input: 225 13.55932205915451% 76.86274647712708%; /* surface1 */

--primary: 266 85.04672646522522% 58.03921818733215%; /* accent - Mauve */
--primary-foreground: 220 23.076923191547394% 94.90196108818054%; /* base */

--secondary: 223 15.909090638160706% 82.74509906768799%; /* surface0 */
--secondary-foreground: 234 16.022099554538727% 35.49019694328308%; /* text */

--accent: 223 15.909090638160706% 82.74509906768799%; /* surface0 */
--accent-foreground: 234 16.022099554538727% 35.49019694328308%; /* text */

--destructive: 347 86.66666746139526% 44.11764740943909%; /* red */
--destructive-foreground: 220 21.95121943950653% 91.96078181266785%; /* mantle */

--ring: 234 16.022099554538727% 35.49019694328308%; /* text */

--chart-1: 347 86.66666746139526% 44.11764740943909%; /* red */
--chart-2: 183 73.86363744735718% 34.50980484485626%; /* teal */
--chart-3: 220 91.4893627166748% 53.921568393707275%; /* blue */
--chart-4: 35 76.98412537574768% 49.41176474094391%; /* yellow */
--chart-5: 109 57.63546824455261% 39.803922176361084%; /* green */

--sidebar-background: var(--primary-foreground);
--sidebar-foreground: var(--primary);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--primary-foreground);
--sidebar-accent: var(--accent);
--sidebar-accent-foreground: var(--accent-foreground);
--sidebar-border: var(--border);
--sidebar-ring: var(--ring);
}

body:has(#theme.catppuccin-frappe) {
--background: 229 18.644067645072937% 23.137255012989044%; /* base */
--foreground: 227 70.14925479888916% 86.86274290084839%; /* text */

--muted: 230 15.584415197372437% 30.19607961177826%; /* surface0 */
--muted-foreground: 227 43.689319491386414% 79.8039197921753%; /* subtext1 */

--popover: 229 18.644067645072937% 23.137255012989044%; /* base */
--popover-foreground: 227 70.14925479888916% 86.86274290084839%; /* text */

--card: 229 18.644067645072937% 23.137255012989044%; /* base */
--card-foreground: 227 70.14925479888916% 86.86274290084839%; /* text */

--border: 227 14.73684161901474% 37.254902720451355%; /* surface1 */
--input: 227 14.73684161901474% 37.254902720451355%; /* surface1 */

--primary: 277 59.01639461517334% 76.07843279838562%; /* accent - Mauve */
--primary-foreground: 229 18.644067645072937% 23.137255012989044%; /* base */

--secondary: 230 15.584415197372437% 30.19607961177826%; /* surface0 */
--secondary-foreground: 227 70.14925479888916% 86.86274290084839%; /* text */

--accent: 230 15.584415197372437% 30.19607961177826%; /* surface0 */
--accent-foreground: 227 70.14925479888916% 86.86274290084839%; /* text */

--destructive: 359 67.78523325920105% 70.78431248664856%; /* red */
--destructive-foreground: 231 18.81188154220581% 19.80392187833786%; /* mantle */

--ring: 227 70.14925479888916% 86.86274290084839%; /* text */

--radius: 0.5rem;

--chart-1: 359 67.78523325920105% 70.78431248664856%; /* red */
--chart-2: 172 39.22652006149292% 64.50980305671692%; /* teal */
--chart-3: 222 74.24242496490479% 74.11764860153198%; /* blue */
--chart-4: 40 62.043797969818115% 73.13725352287292%; /* yellow */
--chart-5: 96 43.90243887901306% 67.84313917160034%; /* green */

--sidebar-background: var(--primary-foreground);
--sidebar-foreground: var(--primary);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--primary-foreground);
--sidebar-accent: var(--accent);
--sidebar-accent-foreground: var(--accent-foreground);
--sidebar-border: var(--border);
--sidebar-ring: var(--ring);
}

body:has(#theme.catppuccin-macchiato) {
--background: 232 23.404255509376526% 18.431372940540314%; /* base */
--foreground: 227 68.2539701461792% 87.64705657958984%; /* text */

--muted: 230 18.796992301940918% 26.07843279838562%; /* surface0 */
--muted-foreground: 228 39.21568691730499% 80.0000011920929%; /* subtext1 */

--popover: 232 23.404255509376526% 18.431372940540314%; /* base */
--popover-foreground: 227 68.2539701461792% 87.64705657958984%; /* text */

--card: 232 23.404255509376526% 18.431372940540314%; /* base */
--card-foreground: 227 68.2539701461792% 87.64705657958984%; /* text */

--border: 231 15.606936812400818% 33.92156958580017%; /* surface1 */
--input: 231 15.606936812400818% 33.92156958580017%; /* surface1 */

--primary: 267 82.69230723381042% 79.60784435272217%; /* accent - Mauve */
--primary-foreground: 232 23.404255509376526% 18.431372940540314%; /* base */

--secondary: 230 18.796992301940918% 26.07843279838562%; /* surface0 */
--secondary-foreground: 227 68.2539701461792% 87.64705657958984%; /* text */

--accent: 230 18.796992301940918% 26.07843279838562%; /* surface0 */
--accent-foreground: 227 68.2539701461792% 87.64705657958984%; /* text */

--destructive: 351 73.9130437374115% 72.9411780834198%; /* red */
--destructive-foreground: 233 23.076923191547394% 15.294118225574493%; /* mantle */

--ring: 227 68.2539701461792% 87.64705657958984%; /* text */

--radius: 0.5rem;

--chart-1: 351 73.9130437374115% 72.9411780834198%; /* red */
--chart-2: 171 46.83544337749481% 69.01960968971252%; /* teal */
--chart-3: 220 82.8125% 74.90196228027344%; /* blue */
--chart-4: 40 69.91150379180908% 77.84313559532166%; /* yellow */
--chart-5: 105 48.25174808502197% 71.96078300476074%; /* green */

--sidebar-background: var(--primary-foreground);
--sidebar-foreground: var(--primary);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--primary-foreground);
--sidebar-accent: var(--accent);
--sidebar-accent-foreground: var(--accent-foreground);
--sidebar-border: var(--border);
--sidebar-ring: var(--ring);
}

body:has(#theme.catppuccin-mocha) {
--background: 240 21.052631735801697% 14.901961386203766%; /* base */
--foreground: 226 63.93442749977112% 88.03921341896057%; /* text */

--muted: 237 16.239316761493683% 22.94117659330368%; /* surface0 */
--muted-foreground: 227 35.29411852359772% 80.0000011920929%; /* subtext1 */

--popover: 240 21.052631735801697% 14.901961386203766%; /* base */
--popover-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */

--card: 240 21.052631735801697% 14.901961386203766%; /* base */
--card-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */

--border: 234 13.20754736661911% 31.176471710205078%; /* surface1 */
--input: 234 13.20754736661911% 31.176471710205078%; /* surface1 */

--primary: 267 83.50515365600586% 80.98039031028748%; /* accent - Mauve */
--primary-foreground: 240 21.052631735801697% 14.901961386203766%; /* base */

--secondary: 237 16.239316761493683% 22.94117659330368%; /* surface0 */
--secondary-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */

--accent: 237 16.239316761493683% 22.94117659330368%; /* surface0 */
--accent-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */

--destructive: 343 81.25% 74.90196228027344%; /* red */
--destructive-foreground: 240 21.311475336551666% 11.96078434586525%; /* mantle */

--ring: 226 63.93442749977112% 88.03921341896057%; /* text */

--radius: 0.5rem;

--chart-1: 343 81.25% 74.90196228027344%; /* red */
--chart-2: 170 57.35294222831726% 73.33333492279053%; /* teal */
--chart-3: 217 91.86992049217224% 75.88235139846802%; /* blue */
--chart-4: 41 86.04651093482971% 83.13725590705872%; /* yellow */
--chart-5: 115 54.09836173057556% 76.07843279838562%; /* green */

--sidebar-background: var(--primary-foreground);
--sidebar-foreground: var(--primary);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--primary-foreground);
--sidebar-accent: var(--accent);
--sidebar-accent-foreground: var(--accent-foreground);
--sidebar-border: var(--border);
--sidebar-ring: var(--ring);
}
}

Expand Down
Loading