Skip to content

Commit 5f9c051

Browse files
lazueelazuee
authored
Added version-two theme
1 parent e7610b1 commit 5f9c051

File tree

1 file changed

+393
-0
lines changed

1 file changed

+393
-0
lines changed

Diff for: ‎discord/themes/version-two/import.css

+393
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,393 @@
1+
@import url("https://github.com/lazuee/css-snippets/raw/main/discord/sidebar-notice/import.css");
2+
3+
[class="container_a4d4d9"] {
4+
--space: 12px;
5+
--border-radius: 1.2rem;
6+
--bg-tertiary: 30, 31, 34;
7+
--header: 48px;
8+
--header-thumbnail: calc(135px + var(--header));
9+
--notice-margin-top: calc(183px + var(--space));
10+
--notice-margin-left: 1px;
11+
--notice-background: var(--background-tertiary);
12+
13+
display: flex;
14+
height: 100%;
15+
justify-content: space-between;
16+
width: 100%;
17+
18+
>nav {
19+
height: 100%;
20+
overflow-y: visible;
21+
width: 72px;
22+
23+
>ul {
24+
--server-nav-i: 1;
25+
--top-margin: calc((56px + ((56px * var(--server-nav-i)) - 56px)) + var(--space));
26+
--nav-height: calc(100% - ((var(--top-margin)) + ((56px * 2) + (53px + (var(--space) * 2)))));
27+
28+
height: var(--nav-height);
29+
margin-top: var(--top-margin);
30+
31+
&:before,
32+
&:after {
33+
content: "";
34+
height: 32px;
35+
pointer-events: none;
36+
position: absolute;
37+
user-select: none;
38+
width: 72px;
39+
z-index: 3;
40+
}
41+
42+
&:before {
43+
background: linear-gradient(180deg, rgba(var(--bg-tertiary), 1) 1%, rgba(var(--bg-tertiary), 0.946297268907563) 13%, rgba(var(--bg-tertiary), 0.7950367647058824) 55%, rgba(var(--bg-tertiary), 0) 93%);
44+
top: 0;
45+
}
46+
47+
&:after {
48+
background: linear-gradient(0deg, rgba(var(--bg-tertiary), 1) 1%, rgba(var(--bg-tertiary), 0.946297268907563) 13%, rgba(var(--bg-tertiary), 0.7950367647058824) 55%, rgba(var(--bg-tertiary), 0) 93%);
49+
bottom: 0;
50+
}
51+
52+
>.unreadMentionsIndicatorTop_fea3ef:before,
53+
>.unreadMentionsIndicatorBottom_fea3ef:before {
54+
background: var(--background-secondary);
55+
content: "";
56+
height: 1px;
57+
left: 0;
58+
position: absolute;
59+
width: 100%;
60+
}
61+
62+
>.unreadMentionsIndicatorTop_fea3ef:before {
63+
top: 0;
64+
}
65+
66+
>.unreadMentionsIndicatorBottom_fea3ef:before {
67+
bottom: 0;
68+
}
69+
70+
>.scroller_fea3ef {
71+
padding: 0;
72+
scroll-behavior: smooth;
73+
scroll-padding: 32px 0;
74+
scroll-snap-type: y mandatory;
75+
76+
&:before,
77+
&:after {
78+
content: "";
79+
display: block;
80+
height: 72px;
81+
left: 0;
82+
position: relative;
83+
width: 72px;
84+
}
85+
86+
>div:not([aria-label="Servers"], :has(> [class="guildSeparator_d0c57e"])) {
87+
background: rgba(var(--bg-tertiary), 1);
88+
background: transparent;
89+
position: fixed;
90+
z-index: 4;
91+
}
92+
93+
>div:nth-child(1) {
94+
top: var(--space);
95+
}
96+
97+
>div:has([aria-label="Download Apps"]) {
98+
display: none;
99+
}
100+
101+
>div:has([aria-label="Explore Discoverable Servers"]) {
102+
bottom: calc(53px + ((var(--space) * 2)) - 8px);
103+
}
104+
105+
>div:has([aria-label="Add a Server"]) {
106+
bottom: calc(53px + ((var(--space) * 2) - 8px) + 56px);
107+
}
108+
109+
>div:has(> [class="guildSeparator_d0c57e"]) {
110+
>* {
111+
background: transparent;
112+
height: 0px;
113+
}
114+
115+
&:nth-last-child(3):not(:has([aria-label="Download Apps"]))>* {
116+
height: 0px;
117+
}
118+
}
119+
120+
>div[aria-label="Servers"] {
121+
position: relative;
122+
scroll-snap-align: start;
123+
scroll-snap-type: y mandatory;
124+
}
125+
}
126+
}
127+
128+
>ul:has(.scroller_fea3ef > div:nth-child(2) .pill_f36a5a) {
129+
--server-nav-i: 2;
130+
131+
>.scroller_fea3ef>div:nth-child(2) {
132+
top: calc(56px + var(--space));
133+
}
134+
}
135+
136+
>ul:has(.scroller_fea3ef > div:nth-child(3) .pill_f36a5a) {
137+
--server-nav-i: 3;
138+
139+
>.scroller_fea3ef>div:nth-child(3) {
140+
top: calc((56px * 2) + var(--space));
141+
}
142+
}
143+
144+
>ul:has(.scroller_fea3ef > div:nth-child(4) .pill_f36a5a) {
145+
--server-nav-i: 4;
146+
147+
>.scroller_fea3ef>div:nth-child(4) {
148+
top: calc((56px * 3) + var(--space));
149+
}
150+
}
151+
152+
>ul:has(.scroller_fea3ef > div:nth-child(5) .pill_f36a5a) {
153+
--server-nav-i: 5;
154+
155+
>.scroller_fea3ef>div:nth-child(5) {
156+
top: calc((56px * 4) + var(--space));
157+
}
158+
}
159+
}
160+
161+
>.base_a4d4d9 {
162+
overflow: visible;
163+
width: calc(100% - 72px);
164+
165+
>div.notice_be03aa {
166+
border-bottom: none;
167+
168+
&:before {
169+
box-shadow: none;
170+
}
171+
172+
&:after {
173+
left: 0px;
174+
position: absolute;
175+
width: 100%;
176+
}
177+
}
178+
179+
>[class="content_a4d4d9"] {
180+
margin: var(--space) 0;
181+
position: relative;
182+
183+
>* {
184+
border-radius: var(--border-radius);
185+
overflow: hidden;
186+
}
187+
188+
>main,
189+
>[class*="shop_"],
190+
>[class*="applicationStore_"],
191+
>[class="pageWrapper_a3a4ce"],
192+
>[class*="chat_"] {
193+
border: 1px solid var(--background-modifier-accent);
194+
display: flex;
195+
margin: 0 var(--space);
196+
min-width: 0px;
197+
198+
>[class="content_a7d72e"]:before,
199+
>[class="tabBody_c2739c"]:before {
200+
box-shadow: none;
201+
}
202+
}
203+
204+
>[class*="chat_"] {
205+
206+
:is(main, section)[class^=chatContent]>form,
207+
form>div[class^=submitContainer] {
208+
padding: 0px;
209+
210+
&:has([class="animation_faf5ab"]):before {
211+
align-items: center;
212+
appearance: none;
213+
background: var(--bg-overlay-3, var(--channeltextarea-background));
214+
box-sizing: border-box;
215+
color: var(--channel-text-area-placeholder);
216+
content: "You must complete a few more steps before you can talk.";
217+
cursor: not-allowed;
218+
display: flex;
219+
font-size: 1rem;
220+
font-weight: 400;
221+
height: 52px;
222+
left: 0;
223+
line-height: 1.375rem;
224+
overflow: hidden;
225+
padding-left: 16px;
226+
pointer-events: none;
227+
position: absolute;
228+
text-overflow: ellipsis;
229+
top: 0;
230+
user-select: none;
231+
white-space: nowrap;
232+
width: 100%;
233+
z-index: 10;
234+
}
235+
236+
>div>div[class^=channelTextArea] {
237+
margin: 0px !important;
238+
239+
>div[class^=scrollableContainer] {
240+
border-radius: 0px;
241+
min-height: 49px;
242+
padding-top: 4px;
243+
}
244+
}
245+
246+
>div {
247+
border-radius: 0px;
248+
margin-bottom: 0px;
249+
}
250+
251+
>div[class^=typing] {
252+
background-color: var(--channeltextarea-background);
253+
border-radius: 8px 8px 0px 0px;
254+
margin-left: auto;
255+
padding-left: 2px;
256+
padding-right: 9px;
257+
position: absolute;
258+
right: calc(var(--custom-index-scrollbar-margin) * 2 + var(--custom-index-scrollbar-width));
259+
top: -24px;
260+
width: fit-content;
261+
}
262+
263+
&::after {
264+
display: none;
265+
}
266+
267+
>div>div>div[class^=attachedBars] {
268+
min-height: unset !important;
269+
padding-bottom: 4px;
270+
}
271+
}
272+
273+
div[class^=jumpToPresentBar] {
274+
background-color: var(--channeltextarea-background);
275+
border-radius: 0px 8px 0px 0px;
276+
left: 0;
277+
right: unset;
278+
279+
>button[class^=barButtonMain] {
280+
display: none;
281+
flex: 0 0 auto;
282+
}
283+
}
284+
}
285+
286+
>.sidebar_a4d4d9 {
287+
background: transparent;
288+
border: 1.3px solid var(--background-modifier-accent);
289+
margin: 0 0 calc(53px + var(--space)) 0;
290+
291+
>nav,
292+
>nav>.thin_eed6a8 {
293+
background: transparent;
294+
}
295+
296+
>nav {
297+
.thin_eed6a8 {
298+
pointer-events: none;
299+
300+
&::-webkit-scrollbar {
301+
display: none;
302+
}
303+
304+
&::-webkit-scrollbar-track {
305+
background-color: var(--scrollbar-thin-track);
306+
border: 2px solid var(--scrollbar-thin-track);
307+
}
308+
309+
&::-webkit-scrollbar-thumb {
310+
background-clip: padding-box;
311+
background-color: var(--scrollbar-thin-thumb);
312+
border: 2px solid transparent;
313+
border-radius: 4px;
314+
min-height: 40px;
315+
}
316+
317+
>ul {
318+
.container_c75f85:after {
319+
left: 0px;
320+
}
321+
322+
>.sectionDivider_c43953 {
323+
margin-left: 0px;
324+
}
325+
}
326+
}
327+
328+
>div:has([class="animatedContainer_fd6364"]) {
329+
background: var(--background-tertiary);
330+
display: flex;
331+
flex-direction: column-reverse;
332+
height: var(--header-thumbnail);
333+
overflow: hidden;
334+
position: absolute;
335+
width: 240px;
336+
z-index: 3;
337+
338+
>div {
339+
box-shadow: none;
340+
opacity: 1 !important;
341+
pointer-events: none;
342+
transform: translateY(0px) !important;
343+
344+
>div {
345+
transform: translateY(0px) scale(1) !important;
346+
}
347+
}
348+
}
349+
350+
>div:has([class*="channelNotice_"])>div {
351+
margin: 16px 0px 0;
352+
padding: 0 16px 16px;
353+
}
354+
355+
>[class="searchBar_f0963d"] {
356+
padding: 3px 16px 4px;
357+
}
358+
359+
div:not(:has([class="animatedContainer_fd6364"]))>[class="header_fd6364"] {
360+
padding: 15px 16px 16px;
361+
}
362+
363+
>[class="searchBar_f0963d"],
364+
>div>[class="header_fd6364"] {
365+
border-bottom: 1.3px solid var(--background-modifier-accent);
366+
box-shadow: none;
367+
}
368+
}
369+
370+
>section {
371+
>[class*="wrapper_"]>div {
372+
border-top: 1px solid var(--background-modifier-accent);
373+
}
374+
375+
>[class*="container_"] {
376+
background: var(--background-secondary);
377+
border-radius: calc(var(--border-radius) - 4px);
378+
bottom: 0;
379+
justify-content: space-between;
380+
left: calc(-72px + var(--space));
381+
position: absolute;
382+
width: calc(296px - var(--space));
383+
z-index: 999;
384+
}
385+
}
386+
}
387+
}
388+
}
389+
}
390+
391+
.accountProfilePopoutWrapper_b2ca13 {
392+
left: -6px;
393+
}

0 commit comments

Comments
 (0)