Skip to content

Commit baee6fd

Browse files
deuulcdeuulc
authored
[theme] Add new minimal theme (#499)
1 parent 48c24d1 commit baee6fd

17 files changed

+1633
-0
lines changed

‎themes/Theme-Minimal/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Minimal Theme
2+
3+
I've tried to create a theme that brings content to the front while reducing mental load from UI clutter. It simplifies everything—less color, fewer distractions, more focus. The goal is clarity: a clean, minimal design that keeps what matters in view.
4+
5+
It's still rough around the edges and very much a work in progress. Feedback is welcome!
6+
7+
## Screenshots
8+
<img width="1792" alt="stash--minimal-theme-v0 1--performers" src="https://github.com/user-attachments/assets/9050c621-deb8-4ede-b6ca-f759e89f1519" />
9+
<img width="1792" alt="stash--minimal-theme-v0 1--tags" src="https://github.com/user-attachments/assets/fb562bdc-cf5c-4bd8-ab5e-1ee1147ba068" />
10+
<img width="1792" alt="stash--minimal-theme-v0 1--settings" src="https://github.com/user-attachments/assets/65befac3-74c4-4b6f-a999-8ff0e8e9dc40" />
11+
<img width="1792" alt="stash--minimal-theme-v0 1--scenes" src="https://github.com/user-attachments/assets/05d45f6e-7fb7-4ed8-b2af-5a153bdb3611" />

‎themes/Theme-Minimal/Theme-Minimal.yml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
name: Theme - Minimal
2+
description: Minimal Theme for Stash
3+
version: 0.1
4+
ui:
5+
css:
6+
- index.css
7+
- _theme.css
8+
- _scrollbars.css
9+
- scenes.css
10+
- shared.css
11+
- minimal-custom.css
12+
- settings.css
13+
- player.css
14+
- inputs.css
15+
- modal.css
16+
- stats.css
17+
- markers-wall.css
18+
- popover.css
19+
- studio.css
20+
assets:
21+
/: ./assets
22+
javascript:
23+
- reset-scrollbars.js

‎themes/Theme-Minimal/_scrollbars.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
body ::-webkit-scrollbar {
2+
-webkit-appearance: auto;
3+
height: auto !important;
4+
width: auto !important;
5+
}
6+
7+
body ::-webkit-scrollbar-track {
8+
background: unset;
9+
border-radius: unset;
10+
}
11+
12+
body ::-webkit-scrollbar-thumb {
13+
background: unset;
14+
border-radius: unset;
15+
cursor: unset;
16+
transition: unset;
17+
}
18+
19+
body ::-webkit-scrollbar-thumb:window-inactive {
20+
background: unset;
21+
}
22+
23+
body ::-webkit-scrollbar-thumb:hover {
24+
background: unset;
25+
}

‎themes/Theme-Minimal/_theme.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
@font-face {
2+
font-family: "Outfit";
3+
font-weight: 100 900;
4+
font-display: swap;
5+
src: url("./assets/Outfit-VariableFont_wght.woff2") format("woff2");
6+
}
7+
8+
.light,
9+
.light-theme {
10+
/* Radix-UI Colors: mauve */
11+
--primary-1: #fdfcfd;
12+
--primary-2: #faf9fb;
13+
--primary-3: #f2eff3;
14+
--primary-4: #eae7ec;
15+
--primary-5: #e3dfe6;
16+
--primary-6: #dbd8e0;
17+
--primary-7: #d0cdd7;
18+
--primary-8: #bcbac7;
19+
--primary-9: #8e8c99;
20+
--primary-10: #84828e;
21+
--primary-11: #65636d;
22+
--primary-12: #211f26;
23+
--primary-a1: #55005503;
24+
--primary-a2: #2b005506;
25+
--primary-a3: #30004010;
26+
--primary-a4: #20003618;
27+
--primary-a5: #20003820;
28+
--primary-a6: #14003527;
29+
--primary-a7: #10003332;
30+
--primary-a8: #08003145;
31+
--primary-a9: #05001d73;
32+
--primary-a10: #0500197d;
33+
--primary-a11: #0400119c;
34+
--primary-a12: #020008e0;
35+
36+
/* Radix-UI Colors: green */
37+
--success-1: #fbfefc;
38+
--success-2: #f4fbf6;
39+
--success-3: #e6f6eb;
40+
--success-4: #d6f1df;
41+
--success-5: #c4e8d1;
42+
--success-6: #adddc0;
43+
--success-7: #8eceaa;
44+
--success-8: #5bb98b;
45+
--success-9: #30a46c;
46+
--success-10: #2b9a66;
47+
--success-11: #218358;
48+
--success-12: #193b2d;
49+
50+
/* Radix-UI Colors: red */
51+
--danger-1: #fffcfc;
52+
--danger-2: #fff7f7;
53+
--danger-3: #feebec;
54+
--danger-4: #ffdbdc;
55+
--danger-5: #ffcdce;
56+
--danger-6: #fdbdbe;
57+
--danger-7: #f4a9aa;
58+
--danger-8: #eb8e90;
59+
--danger-9: #e5484d;
60+
--danger-10: #dc3e42;
61+
--danger-11: #ce2c31;
62+
--danger-12: #641723;
63+
}
64+
65+
:root,
66+
.dark,
67+
.dark-theme {
68+
/* Radix-UI Colors: mauve dark */
69+
--primary-1: #121113;
70+
--primary-2: #1a191b;
71+
--primary-3: #232225;
72+
--primary-4: #2b292d;
73+
--primary-5: #323035;
74+
--primary-6: #3c393f;
75+
--primary-7: #49474e;
76+
--primary-8: #625f69;
77+
--primary-9: #6f6d78;
78+
--primary-10: #7c7a85;
79+
--primary-11: #b5b2bc;
80+
--primary-12: #eeeef0;
81+
--primary-a1: #00000000;
82+
--primary-a2: #f5f4f609;
83+
--primary-a3: #ebeaf814;
84+
--primary-a4: #eee5f81d;
85+
--primary-a5: #efe6fe25;
86+
--primary-a6: #f1e6fd30;
87+
--primary-a7: #eee9ff40;
88+
--primary-a8: #eee7ff5d;
89+
--primary-a9: #eae6fd6e;
90+
--primary-a10: #ece9fd7c;
91+
--primary-a11: #f5f1ffb7;
92+
--primary-a12: #fdfdffef;
93+
94+
/* Radix-UI Colors: green dark */
95+
--success-1: #0e1512;
96+
--success-2: #121b17;
97+
--success-3: #132d21;
98+
--success-4: #113b29;
99+
--success-5: #174933;
100+
--success-6: #20573e;
101+
--success-7: #28684a;
102+
--success-8: #2f7c57;
103+
--success-9: #30a46c;
104+
--success-10: #33b074;
105+
--success-11: #3dd68c;
106+
--success-12: #b1f1cb;
107+
108+
/* Radix-UI Colors: red dark */
109+
--danger-1: #191111;
110+
--danger-2: #201314;
111+
--danger-3: #3b1219;
112+
--danger-4: #500f1c;
113+
--danger-5: #611623;
114+
--danger-6: #72232d;
115+
--danger-7: #8c333a;
116+
--danger-8: #b54548;
117+
--danger-9: #e5484d;
118+
--danger-10: #ec5d5e;
119+
--danger-11: #ff9592;
120+
--danger-12: #ffd1d9;
121+
122+
--rating-1-background: rgba(94, 28, 22, 0.5); /* tomato */
123+
--rating-2-background: rgba(86, 40, 0, 0.5); /* orange */
124+
--rating-3-background: rgba(77, 48, 0, 0.5); /* amber */
125+
--rating-4-background: rgba(67, 53, 0, 0.5); /* yellow */
126+
--rating-5-background: rgba(51, 68, 35, 0.5); /* lime */
127+
128+
--black-a1: rgba(0, 0, 0, 0.05);
129+
--black-a2: rgba(0, 0, 0, 0.1);
130+
--black-a3: rgba(0, 0, 0, 0.15);
131+
--black-a4: rgba(0, 0, 0, 0.2);
132+
--black-a5: rgba(0, 0, 0, 0.3);
133+
--black-a6: rgba(0, 0, 0, 0.4);
134+
--black-a7: rgba(0, 0, 0, 0.5);
135+
--black-a8: rgba(0, 0, 0, 0.6);
136+
--black-a9: rgba(0, 0, 0, 0.7);
137+
--black-a10: rgba(0, 0, 0, 0.8);
138+
--black-a11: rgba(0, 0, 0, 0.9);
139+
--black-a12: rgba(0, 0, 0, 0.95);
140+
141+
--text-3xs: 0.5rem; /* 8px */
142+
--text-2xs: 0.625rem; /* 10px */
143+
--text-xs: 0.75rem; /* 12px */
144+
--text-sm: 0.875rem; /* 14px */
145+
--text-base: 1rem; /* 16px */
146+
--text-lg: 1.125rem; /* 18px */
147+
--text-xl: 1.25rem; /* 20px */
148+
--text-2xl: 1.5rem; /* 24px */
149+
--text-3xl: 1.875rem; /* 30px */
150+
--text-4xl: 2.25rem; /* 36px */
151+
--text-5xl: 3rem; /* 48px */
152+
--text-6xl: 3.75rem; /* 60px */
153+
--text-7xl: 4.5rem; /* 72px */
154+
--text-8xl: 6rem; /* 96px */
155+
--text-9xl: 8rem; /* 128px */
156+
157+
--nav-bar-height: 4rem;
158+
}

‎themes/Theme-Minimal/assets/Outfit-VariableFont_wght.woff2‎

43.6 KB
Binary file not shown.

0 commit comments

Comments
 (0)