Skip to content

Commit 863706e

Browse files
OliyyOliyy
committed
Added opacity and background support
1 parent 1f4b537 commit 863706e

File tree

1 file changed

+178
-7
lines changed

1 file changed

+178
-7
lines changed

‎theme.css

Lines changed: 178 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
__ __ _ _ _ _____ _ _____ _ _
2+
__ __ _ _ _ _____ _ _____ _ _
33
| \/ | | | (_) | | | __ \ (_) | __ \(_) | |
44
| \ / | __ _| |_ ___ _ __ _ __ _| | | | | | ___ ___ _ __ _ _ __ | | | |_ ___ ___ ___ _ __ __| |
55
| |\/| |/ _` | __/ _ \ '__| |/ _` | | | | | |/ _ \/ __| |/ _` | '_ \ | | | | / __|/ __/ _ \| '__/ _` |
@@ -32,8 +32,8 @@ If anyone has a problem with me using their code just PM me on discord Oliy#0330
3232
/* === COLOR & ELEMENT VARIABLES === */
3333

3434
:root {
35-
--darksecondary: #2d2d2d;
36-
--darkprimary: #222222;
35+
--darksecondary: rgba(0, 0, 0, 0.3);
36+
--darkprimary: rgba(0, 0, 0, 0.3);
3737
--accent: #C62828;
3838
--mention: #5f0faf;
3939
--profilepictureshape: 20%; /* 50% Circle (Default for discord), 20% Rounded Square (Default for theme), 0% Sharp Square */
@@ -49,6 +49,9 @@ If anyone has a problem with me using their code just PM me on discord Oliy#0330
4949
font-family: 'Roboto', sans-serif;
5050
}
5151

52+
53+
54+
5255
@keyframes bg-color {
5356
0% {
5457
background-color: #e74c3c;
@@ -71,6 +74,174 @@ If anyone has a problem with me using their code just PM me on discord Oliy#0330
7174
;
7275
}
7376

77+
/* === BORDER IMAGE === */
78+
79+
body {
80+
background: url("https://cdna.artstation.com/p/assets/images/images/002/279/268/large/alena-aenami-seaside1920.jpg?1459695047") !important;
81+
background-size: cover !important;
82+
background-attachment: fixed !important;
83+
background-position: center !important;
84+
background-repeat: no-repeat !important;
85+
}
86+
87+
.search-bar, .friends-header, .chat>.title-wrap, .chat>.title-wrap>.title, .theme-dark .chat form,
88+
.guild-header, .chat .title-wrap .private-channels .channel:active, .guild-channels .channel-text:active,
89+
.channel-members .member.popout-open, .private-channels .channel.selected, .guild-channels .channel-text.selected,
90+
.theme-dark .messages-wrapper, .guild-channels, .theme-dark .chat .title-wrap,
91+
.theme-dark .chat>.content, .theme-dark .friends-table, .theme-dark .messages-wrapper,
92+
.private-channels, .channel-members, .guilds-wrapper, .channel-members, .channel-textarea, .theme-dark .channel-textarea-inner,
93+
#friends, .account .btn-group, #friends .friends-table .friends-table-header,
94+
#friends .friends-table, .flex-horizontal>.flex-spacer, .chat .messages, .guild-header header,
95+
.friends-table .messages .message-group:not(.has-divider), .messages-wrapper .messages .message-group:not(.has-divider),
96+
#rtc-connection .btn-group, .account .btn-group, .account .btn-mute, .account .btn-deafen, .account .btn-settings,
97+
.channel-textarea, .comment, .scroller .guild-channels, .channels-wrap, .theme-dark .layers, .channel-members-wrap,
98+
.channel-members-wrap .scroller-wrap.fade.dark, .search-bar, .friends-header, .guild-header header, .chat>.title-wrap>.title, .chat .title-wrap,
99+
.chat .messages-wrapper, .chat .messages-wrapper .scroller-wrap, .chat form .typing:hover, .typing .text, .theme-dark .chat .private-channel-call,
100+
.theme-dark .layer, .theme-dark .layers, .theme-light .layer, .theme-light .layers {
101+
background: rgba(0, 0, 0, 0.1) !important;
102+
box-shadow: none;
103+
border-bottom: 0px solid #fff;
104+
border-top: none;
105+
opacity: 1;
106+
}
107+
108+
.channel-textarea-inner textarea, .chat .title-wrap .topic, .theme-dark .search-results-wrap .search-result .hit {
109+
color: rgba(255, 255, 255, 0.8)!important;
110+
}
111+
112+
.theme-dark .chat > .content > .flex-justify-center {
113+
background:transparent;
114+
}
115+
116+
.ui-flex > .flex-nowrap {
117+
background: transparent;
118+
}
119+
120+
.theme-dark .chat .private-channel-call {
121+
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
122+
}
123+
124+
#rtc-connection {
125+
background: rgba(0, 0, 0, 0.3);
126+
border-top: none;
127+
}
128+
129+
#rtc-connection .btn, #rtc-connection .btn-group, #rtc-connection .btn-disconnect {
130+
background: transparent;
131+
border: none;
132+
box-shadow: none;
133+
}
134+
135+
.message-group-blocked {
136+
background: rgba(0, 0, 0, 0.5)!important;
137+
border-color: rgba(0, 0, 0, 0.5)!important;
138+
}
139+
140+
.guild-channels .channel-text:hover, .channel-members .member:hover,
141+
.private-channels .channel:hover, .theme-dark #friends .friends-table .friends-row:hover, .search-results-wrap .scroller-wrap .scroller::-webkit-scrollbar,
142+
.theme-dark .search-results-wrap .scroller-wrap .scroller::-webkit-scrollbar-thumb:active, .theme-dark .search-results-wrap .search-result .hit {
143+
background: rgba(0, 0, 0, 0.4)!important
144+
}
145+
146+
.chat form .typing, .channel-textarea, .account, .search-result.expanded .search-result-message:not(.hit), .search-result .search-result-message:not(.hit),
147+
.theme-dark .search-results-wrap .search-result.expanded .search-result-message.hit, .search-results-wrap,
148+
.search-results-wrap .search-header {
149+
background: rgba(0, 0, 0, 0.3)!important;
150+
}
151+
152+
.theme-dark .search-results-wrap .scroller-wrap .scroller::-webkit-scrollbar-thumb {
153+
background: rgba(225, 225, 225, 0.2) !important;
154+
}
155+
156+
.guild-channels {
157+
background: rgba(0, 0, 0, 0.3)!important;
158+
}
159+
160+
.theme-dark .chat form, .account{
161+
background-color: rgba(0,0,0,0.0);
162+
box-shadow: none;
163+
}
164+
165+
166+
.theme-dark .ui-standard-sidebar-view .content-region, .theme-dark .ui-standard-sidebar-view, .scroller-wrap, .theme-dark .ui-standard-sidebar-view .sidebar-region,
167+
.ui-standard-sidebar-view .content-region .scroller-wrap, .theme-dark .ui-standard-sidebar-view .content-region .scroller, .ui-standard-sidebar-view .content-column.default,
168+
.theme-dark .ui-standard-sidebar-view .content-region {
169+
background: transparent;
170+
}
171+
.theme-dark .ui-standard-sidebar-view .sidebar-region .scroller, .theme-dark .ui-standard-sidebar-view .content-region .scrollbar, .ui-standard-sidebar-view {
172+
background: rgba(0, 0, 0, 0.3);
173+
}
174+
175+
.theme-light .ui-standard-sidebar-view .content-region, .theme-light .ui-standard-sidebar-view, .scroller-wrap, .theme-light .ui-standard-sidebar-view .sidebar-region,
176+
.ui-standard-sidebar-view .content-region .scroller-wrap, .theme-light .ui-standard-sidebar-view .content-region .scroller, .ui-standard-sidebar-view .content-column.default,
177+
.theme-light .ui-standard-sidebar-view .content-region {
178+
background: transparent;
179+
}
180+
.theme-light .ui-tab-bar-item { color: #000; }
181+
.theme-light .ui-form-title { color: #fff; }
182+
.theme-light .ui-standard-sidebar-view .sidebar-region .scroller, .theme-light .ui-standard-sidebar-view .content-region .scrollbar, .ui-standard-sidebar-view {
183+
background: rgba(255, 255, 255, 0.3);
184+
color: #000;
185+
}
186+
187+
/* White Theme Support */
188+
.theme-light .chat form, .theme-light .messages-wrapper, .guild-channels, .theme-light .chat .title-wrap,
189+
.theme-light .chat>.content, .theme-light .friends-table, .theme-light .messages-wrapper,
190+
.theme-light .channel-textarea-inner, .theme-light .layers, .channel-members-wrap,
191+
.theme-light .chat .private-channel-call, .theme-light .layer, .theme-light .layers, .theme-light .layer, .theme-light .layers {
192+
background: transparent!important;
193+
box-shadow: none;
194+
border-bottom: 0px solid #fff;
195+
border-top: none;
196+
opacity: 1;
197+
}
198+
199+
.theme-light .search-results-wrap .search-result .hit { color: rgba(255, 255, 255, 0.8)!important; }
200+
.theme-light .chat .private-channel-call { border-bottom: 1px solid rgba(255, 255, 255, 0.6); }
201+
.message-group .comment .message-text .markup { color: hsla(0,0%,100%,.7) !important; }
202+
.channel-members h2 { color: #fff; }
203+
204+
.theme-light #friends .friends-table .friends-row:hover
205+
.theme-light .search-results-wrap .scroller-wrap .scroller::-webkit-scrollbar-thumb:active, .theme-light .search-results-wrap .search-result .hit {
206+
background: rgba(255, 255, 255, 0.5)!important
207+
}
208+
209+
.theme-light .search-results-wrap .search-result.expanded .search-result-message.hit {
210+
background: rgba(255, 255, 255, 0.2)!important;
211+
}
212+
213+
.theme-light .search-results-wrap .scroller-wrap .scroller::-webkit-scrollbar-thumb { background: rgba(225, 225, 225, 0.3) !important; }
214+
215+
/* Had to rework for the new styles */
216+
.theme-light .chat form, .account{
217+
background-color: rgba(0,0,0,0.0);
218+
box-shadow: none;
219+
}
220+
221+
/* Server members loading */
222+
.theme-dark .channel-members-loading, .theme-dark .channel-members-loading .background,
223+
.theme-light .channel-members-loading, .theme-light .channel-members-loading .background {
224+
background: transparent;
225+
}
226+
227+
.theme-dark .channel-members-wrap > div,
228+
.theme-light .channel-members-wrap > div{
229+
opacity: 0!important; /* display: none; causes performance issues for me */
230+
}
231+
.theme-dark .channel-members-wrap > div:last-child,
232+
.theme-light .channel-members-wrap > div:last-child{
233+
opacity: 1!important;
234+
}
235+
236+
/* Keyframes */
237+
@keyframes opacity {
238+
0% { opacity: 1; }
239+
50% { opacity: .5; }
240+
100% { opacity: 1; }
241+
}
242+
243+
/**/
244+
74245

75246
/* === TEXT AREA & AUTOCOMPLETE POPOUT === */
76247

@@ -282,9 +453,9 @@ If anyone has a problem with me using their code just PM me on discord Oliy#0330
282453
transition: all 0ms
283454
}
284455

285-
.private-channels, .channel-members {
456+
/*.private-channels, .channel-members {
286457
background: #212121!important;
287-
}
458+
}*/
288459

289460
.channel-members {
290461
width: 240px;
@@ -984,9 +1155,9 @@ If anyone has a problem with me using their code just PM me on discord Oliy#0330
9841155
color: var(--accent);
9851156
}
9861157

987-
.theme-dark .chat>.content, .theme-dark .friends-table, .theme-dark .messages-wrapper {
1158+
/*.theme-dark .chat>.content, .theme-dark .friends-table, .theme-dark .messages-wrapper {
9881159
background-color: var(--darksecondary) !important;
989-
}
1160+
}*/
9901161

9911162
.theme-dark .message-group .comment .markup {
9921163
color: hsla(0, 0%, 100%, .7) !important;

0 commit comments

Comments
 (0)