Ads keep us online. Without them, we wouldn't exist. We don't have paywalls or sell mods - we never will. But every month we have large bills and running ads is our only way to cover them. Please consider unblocking us. Thank you from GameBanana <3

Dark Theme (CSUI) - A Config Script for GameBanana

501/ 2,933   Truncated 76 kb Raw Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
/*
        # Dark Theme (CSUI)

        [DESCRIPTION]

        A UI theme (custom CSS) for GameBanana website.

        The UI theme is focused on changing the site-wide UI into a darker one (black), as well as tweaking almost all of the aspects of the site.
        -----------------------------

        [DETAILS]
       
        Browsers tested:
       
        * Google Chrome (version 79.0.3945.88 (Official Build) (64-bit))
        * Mozilla Firefox (version 68.0 (64-bit))
        * Opera (version 62.0.3331.72)

        Date released: 2019-07-17
        Last updated: 2019-12-27
        Current version: 1.5.0

        On my portfolio: http://danialzahid.ga/dark-theme-csui-
        On GitHub: https://github.com/DanialZahid/Dark-Theme-CSUI-
        On GameBanana: https://gamebanana.com/scripts/10441
        -----------------------------

        [AUTHORS]

        * Danial Zahid [Code] ([email protected])

        Special thanks to:

        * tom [QuickDL material icon class addition]
        * Ring-A-Ding Rampage [Helped with a few issues]
        * Willian Justen de Vasconcellos [Background image]
        -----------------------------

        [CHANGELOG]

        ## Version 1.5.0 [2019-12-27]

        * Updated the code to match with the Dark Theme (CSUI) [Frost] theme's code.

        ## Version 1.4.0 [2019-11-21]

        * [Changed] Transition duration for most of the elements has been lowered (to 0.15s).
        * [Removed] Low opacity from table cells.
        * [Revamped] SubNavigator and form tabs.
        * [Revamped] Floating header.
        * [Tweaked] Features module on the home page.
        * [Tweaked] Features module on the game section.
        * [Tweaked] Advanced elements tab on the home page (Trending, Classics, and New games toggle module tabs).
        * [Tweaked] Manage pane.
        * [Tweaked] Table header and cell border.
        * [Tweaked] Style of certain triggered elements to match with the rest of the theme.
        * [Miscellaneous] Removed the redundant code.
        * [Miscellaneous] Several other minor changes and bug fixes.

        ## Version 1.3.0 [2019-11-12]

        * [Fixed] Opacity flickering issue on records table.
        * [Removed] Low opacity from the records.
        * [Revamped] Buttons UI.
        * [Tweaked] Member profile > Updates section records.
        * [Tweaked] Member profile > Game Keys section records.
        * [Tweaked] Submission profile > History section.
        * [Tweaked] Records table header and cells border.
        * [Tweaked] Center aligned most of the buttons to match with the rest of the theme.
        * [Miscellaneous] Several other minor changes and bug fixes.

        ## Version 1.2.0 [2019-11-04]

        * [Fixed] Next and previous button icons in the lightbox.
        * [Fixed] Attributes module links color to match with the default UI link color.
        * [Fixed] Uneven margin on the presets in the filters area.
        * [Fixed] Scripts section code viewer UI.
        * [Added] Blue color UI to the stamps form.
        * [Changed] Main background color with an image.
        * [Changed] Add, edit, and reply forms UI color from blue to green. Also, reduced their color alpha a bit.
        * [Changed] Avatar border style (for members with clearance level) to solid.
        * [Changed] Top and side navigator background color as well as their panes color to be more dark.
        * [Changed] Lightbox icon colors from teal to indigo.
        * [Changed] Several module buttons position aligned to center to match with the rest of the UI style.
        * [Changed] Add and edit forms as well as their tabs aligned to center.
        * [Revamped] Modules UI.
        * [Revamped] Subtitle.
        * [Revamped] Record UI in various sections/areas.
        * [Tweaked] Member profile > Stamps Log and Posts sections.
        * [Tweaked] Updates module records UI.
        * [Tweaked] Posts (comments) list.
        * [Miscellaneous] A couple of other tweaks and bug fixes.

        ## Version 1.1.0 [2019-07-24]

        * [Fixed] SubjectShaper style is no longer overridden by the theme.
        * [Fixed] Posts are now left-aligned in the Questions section.
        * [Tweaked] Blockquote styling.
        * [Tweaked] Messages styling in the Alerts and the Activity panes.
        * [Miscellaneous] A few other minor changes.

        ## Version 1.0.0 [2019-07-17]

        * Initial release.

        [LICENSE]

        You are allowed to install this UI theme.

        You are not allowed to:

        1. Redistribute this UI theme on the Internet.
        2. Use this UI theme in your own work (either, published or not).
        3. Modify and publish the modified version of this UI theme on the Internet.
        4. Take or use any components (either, modified or not) of this UI theme and use in your own work (either, published or not).
        5. Take or use any components (either, modified or not) of this UI theme and publish on the Internet.
        6. Use this UI theme or its components for commercial purposes.
        -----------------------------
*/

@import url("https://fonts.googleapis.com/css?family=Arimo|Aldrich|Fira+Mono|Doppio+One&display=swap");
* {
  border-radius: 0 !important;
  filter: none !important;
}

html {
  background: #212121;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--CSUIDBGColor);
}

::-webkit-scrollbar-thumb {
  background: var(--CSUIPurpleColor);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--CSUIWhiteColor);
}

::selection {
  background-color: var(--CSUIPurpleColor);
  color: #fff;
}

#BodyWrapper {
  background: var(--CSUIBodyBG) #212121;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  font-size: var(--CSUIFontSize);
  font-family: var(--CSUITextFF) !important;
  color: var(--CSUITextColor);
  background: var(--CSUIBodyColor);
  text-shadow: var(--CSUIBodyTS);
}

a:hover,
.Linklike:hover,
#SectionAddFormSelectorModule .Content #SelectSectionStep .Column li a:hover div strong,
#SectionAddFormSelectorModule .Content #SelectSectionStep .Column li a:hover div small,
.MainForm fieldset#Category .UberSelect .OptionsWrapper .Options li:hover,
.MainForm fieldset#Attributes .AvailableAttributes h5:hover,
.RichText .TableOfContents ul li:hover,
.AdvancedListSettingsModule > .Content .OrderAndSortControls fieldset legend:hover,
#SectionMatchesModule ul li.Selected a,
#SectionMatchesModule ul li:hover a,
#SectionMatchesModule ul li.Selected a span,
#GameMatchesModule ul li.Selected a span,
#AttributesModule a:hover {
  color: var(--CSUILinkHoverColor) !important;
}

a,
.Linklike,
.RichText .TableOfContents ul li {
  color: var(--CSUILinkColor);
  text-shadow: var(--CSUILinkShadow);
}

#AttributesModule a {
  color: var(--CSUILinkColor) !important;
  text-shadow: var(--CSUILinkShadow) !important;
}

#ContentGrid.HiddenColumnMode.xs row > column.xs-h {
  background: #212121;
  border-left: var(--CSUIDBorder);
}

.PageModule > .Content {
  padding: 10px;
}

#ContentGrid > row > column:not(:first-child) {
  background: initial;
  border: initial;
}

#MasterLog log {
  color: var(--CSUIGreenColor);
  font-weight: bold;
  border: 1px solid var(--CSUIGreenColor);
  font-size: var(--CSUIFontSize);
  background: var(--CSUIDBGColor);
  padding: 5px;
}

#MasterLog log span {
  border: none;
}

#Loader span,
#Loader span:after {
  border-radius: 50% !important;
  width: 22px;
  height: 22px;
}

#Loader.Complete span {
  border-color: var(--CSUIGreenColor);
}

#Loader span {
  border: 3px dashed var(--CSUIRedColor);
}

#Loader.Complete num {
  color: var(--CSUIGreenColor);
}

#Loader num {
  color: var(--CSUIRedColor);
  font-size: 10px;
  text-align: center;
  margin-top: 1px;
}

@media only screen and (min-width: 400px) {
  #PostsListModule_0 > .Content > .Posts > .Post > .PostReplies > .PostsListModule {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
  .PostsListModule .Posts > li .PostReplies.Focussed > .PostsListModule {
    border-left: 1px solid var(--CSUIWhiteColor);
  }
}

.PageModule > h3,
moduleGroup > h3 {
  text-align: center;
  padding: 5px;
  background: var(--CSUICardHeaderBG);
  margin: 0 0 10px 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
fieldset legend {
  font-family: var(--CSUIHFF) !important;
  color: var(--CSUIHColor);
}

h5,
h6,
#TopNav module pane h5,
#SideNav module pane h5 {
  font-size: var(--CSUIH56FontSize);
}

h3,
#SubmissionsListModuleGroup h3 {
  font-size: var(--CSUIH3FontSize) !important;
  text-align: center;
}

h4 {
  font-size: var(--CSUIH4FontSize) !important;
}

#HeadlineWrapper {
  background: transparent;
}

#AlertsNavModule pane .Broadcasts > li,
#ActivityNavModule pane .Broadcasts > li {
  padding: var(--CSUIPanesCardPadding);
  margin: var(--CSUIPanesCardMargin);
  opacity: 0.8;
  border: var(--CSUIPanesCardBorder) !important;
  background: var(--CSUIPanesCardBGColor);
}

#SearchNavModule pane #SearchOptionsForm {
  font-size: var(--CSUISmallFontSize);
  border: 2px solid rgba(156, 204, 101, 0.2) !important;
  box-shadow: inset 3px 3px 5px 0px rgba(0, 0, 0, 0.5) !important;
  border-radius: 0 !important;
  background: var(--CSUITextAreaBGColor) !important;
}

#BuddiesNavModule pane article .ChannelContents > .Messages > .SelfMessage .RichText,
#BuddiesNavModule pane article .ChannelContents > .Messages > .Message .RichText {
  font-size: var(--CSUISmallFontSize) !important;
  background: var(--CSUISLBGColor) !important;
  border-radius: 0 !important;
  border: 0.02px solid rgba(79, 195, 247, 0.5) !important;
}

#BananaNavModule pane article ul li a {
  font-size: var(--CSUISmallFontSize);
  border-radius: 0;
  padding: 5px;
  background: var(--CSUISLBGColor);
  border: 1px solid rgba(79, 195, 247, 0.5);
  font-family: var(--CSUIHFF) !important;
}

#TopNav,
#SideNav,
#PageFooter {
  background: var(--CSUITopSideFooterColor);
}

#TopNav module.Selected icon,
#TopNav module.Selected widget,
#SideNav module.Selected icon,
#SideNav module.Selected widget {
  background: var(--CSUIPanesBGColor);
}

#PersonalNavModule pane .Column1 .Identity,
#PersonalNavModule pane column:nth-child(1) .Identity {
  background: rgba(158, 158, 158, 0.1);
  border: 1px solid rgba(158, 158, 158, 0.2);
}

#AlertsNavModule pane .Broadcasts .Unseen,
#ActivityNavModule pane .Broadcasts .Unseen,
#UnseenBroadcastsModule {
  color: var(--CSUIWhiteColor);
  background: var(--CSUINotCardBGColor);
  border: var(--CSUINotCardBorder) !important;
}

#SideNav > wrapper module.HasUpdates icon,
#TopNav #StatsNavModule.PointsGained widget,
#TopNav #StatsNavModule.PointsGained icon,
#SideNav #StatsNavModule.PointsGained widget,
#SideNav #StatsNavModule.PointsGained icon {
  background: var(--CSUIGreenColor);
  border-color: var(--CSUIGreenColor);
}

#TopNav #StatsNavModule.PointsLost widget,
#TopNav #StatsNavModule.PointsLost icon,
#SideNav #StatsNavModule.PointsLost widget,
#SideNav #StatsNavModule.PointsLost icon {
  background: var(--CSUIRedColor);
  border-color: var(--CSUIRedColor);
}

#AlertsNavModule pane .Controls .MarkAllAsSeen:hover span,
#ActivityNavModule pane .Controls .MarkAllAsSeen:hover span,
#AlertsNavModule pane .Broadcasts .Unseen .BroadcastStatusWrapper:hover span,
#ActivityNavModule pane .Broadcasts .Unseen .BroadcastStatusWrapper:hover span {
  background: var(--CSUIGreenColor);
}

#AlertsNavModule pane .Controls .MarkAllAsSeen span,
#ActivityNavModule pane .Controls .MarkAllAsSeen span,
#AlertsNavModule pane .Broadcasts .Unseen .BroadcastStatusWrapper span,
#ActivityNavModule pane .Broadcasts .Unseen .BroadcastStatusWrapper span {
  background: rgba(156, 204, 101, 0.4);
  border: 2px solid var(--CSUIGreenColor);
}

#TopNav #StatsNavModule pane column:first-child stat rank,
#TopNav #StatsNavModule pane column:first-child stat itemCount,
#SideNav #StatsNavModule pane column:first-child stat rank,
#SideNav #StatsNavModule pane column:first-child stat itemCount {
  font-size: var(--CSUIH4FontSize);
}

#AlertsNavModule pane .Controls .PageNumber,
#ActivityNavModule pane .Controls .PageNumber {
  padding: 5px;
  color: var(--CSUIGreyColor);
  font-size: var(--CSUISmallFontSize);
}

#AlertsNavModule pane .Broadcasts > li .Messages li,
#ActivityNavModule pane .Broadcasts > li .Messages li {
  padding: 5px;
  border-top: 1px solid rgba(158, 158, 158, 0.3);
  font-size: var(--CSUISmallFontSize);
}

#SearchNavModule #SearchForm input[type=text] {
  color: var(--CSUIWhiteColor);
  font-size: var(--CSUIFontSize);
  font-family: var(--CSUIMonoFF) !important;
}

#MessagesNavModule pane #BuddyChatPromoColumn {
  background: var(--CSUIDBGColor);
  border-radius: 0;
  font-size: var(--CSUISmallFontSize);
}

#ManageNavModule pane .PaneTabs .Selected, #ManageNavModule pane .Panes .Pane.Selected {
  background: #9e9e9e4d !important;
}

#ManageNavModule pane .Panes {
  background: 0;
  padding: 0;
}

#ManageNavModule ul.PaneTabs {
  padding: 0;
}

#MessagesNavModule pane #LatestPmsColumn li {
  border-bottom: 1px solid rgba(158, 158, 158, 0.3);
}

#BuddiesNavModule pane article .ChannelContents > .Messages > .Message small {
  color: var(--CSUIGreyColor);
  font-size: 10px;
}

#BuddiesNavModule pane article #BuddyChatInitiators li.Unseen:after {
  background: var(--CSUIGreenColor);
}

#TopNav module.HasUpdates widget {
  background: var(--CSUIGreenColor);
  border: 1px solid var(--CSUIGreenColor);
}

#TopNav module pane, #SideNav module pane {
  background: var(--CSUIPanesBGColor);
  border: var(--CSUIPanesBorder);
}

#SideNav > wrapper module pane header:after {
  bottom: 0px;
  background: none;
  border-bottom: 3px solid #000000;
}

#NavOptionsNavModule pane textarea {
  font-size: var(--CSUISmallFontSize);
  font-family: var(--CSUIMonoFF);
  color: var(--CSUIGreenColor);
}

#BuddiesNavModule pane header {
  background: initial;
  border: initial;
}

#BuddiesNavModule pane article .ChannelContents > .Messages {
  background: var(--CSUIDBGColor);
}

#BuddiesNavModule pane button:hover {
  color: var(--CSUIWhiteColor) !important;
  opacity: 1 !important;
}

#SearchNavModule pane #SearchOptionsForm form_extension label span {
  font-family: var(--CSUIMonoFF);
}

#SearchNavModule #SearchForm button {
  transition: opacity 0.15s ease-in-out !important;
  margin-left: 10px;
}

#BananaNavModule pane article ul li a:hover {
  background: var(--CSUISLBGColor);
}

body[data-_sSideNavMode=Collapsed] #SideNav.Expanded {
  width: 500px;
}
 

Updates

Version 1.5.0 2y
  • - Updated the code to match with the Dark Theme (CSUI) [Frost] theme's code.
Version 1.4.0 2y Amendment Removal Overhaul2 Tweak6 Version 1.3.0 2y BugFix Removal Overhaul Tweak5 Version 1.2.0 2y BugFix4 Addition Amendment7 Overhaul3 Tweak3 Version 1.1.0 2y BugFix2 Tweak2

Description

The UI theme is focused on changing the site-wide UI into a darker one (black), as well as tweaking almost all of the aspects of the site.

Details

Browsers Tested

  • Google Chrome (version 79.0.3945.88 (Official Build) (64-bit))
  • Mozilla Firefox (version 68.0 (64-bit))
  • Opera (version 62.0.3331.72)

Date released: 2019-07-17
Last updated: 2019-12-27
Current version: 1.5.0

On my portfolio
On GitHub
On GameBanana

Video

Watch on Streamable.

Variants

Check out its variant Dark Theme (CSUI) [Frost] as well.

Danial Zahid
2019-07-17
  • demoman tf2 avatar
    demoman tf2 Joined 2y ago
    Offline
    203 points Ranked 66,488th
    2y
    smooth n simple
    • Thanks x 1
    not so funny walter
    URL to post:
  • Kapitan Grigoriy avatar
    Kapitan Grigoriy Joined 4y ago
    Offline
    1,898 points Ranked 22,280th
    9 medals 1 rare
    • Returned 1000 times Medal icon
    • One month a member Medal icon
    • 6 months a member Medal icon
    • 1 year a member Medal icon
    • 2 years a member Medal icon
    • Returned 100 times Medal icon
    2y
    This is excellent. Super job.
    • Thanks x 1
    I'm going to B-hop my way out
    URL to post:
  • JMXremix avatar
    JMXremix username pic Joined 4y ago
    CS1.6 Manager
    Low Honor
    The Wolverines Flag Affiliation: The Wolverines
    17,942 points Ranked 384th
    40 medals 2 legendary 8 rare
    • Returned 5000 times Medal icon
    • Submitted 50 Maps Medal icon
    • Returned 1000 times Medal icon
    • Submitted 20 Maps Medal icon
    • 10 submissions featured Medal icon
    • Achieved Game Manager clearance Medal icon
    JMXremix avatar
    JMXremix
    The Wolverines Flag
    Affiliation
    The Wolverines
    2y
    Mind if I edit that a bit for a studio uber?
    For outlaws, by outlaws avatar
    Mantra
    For outlaws, by outlaws
    URL to post:
  • Tan-X avatar
    Tan-X username pic Joined 3y ago
    Learning
    Unforgotten Flag Affiliation: Unforgotten
    683 points Ranked 46,883rd
    21 medals 1 legendary 4 rare
    • 2019 Top Contributor Medal icon
    • 10 submissions featured Medal icon
    • Received thanks 50 times Medal icon
    • Returned 1000 times Medal icon
    • Thanked 50 submitters Medal icon
    • Became a Studio Leader Medal icon
    Tan-X avatar
    Tan-X
    Unforgotten Flag
    Affiliation
    Unforgotten
    2y
    I'm speechless.

    Can anyone tell me how to say:
     "This is so awesome!!! I like it a lot! Thanks a bunch for this flawless theme.. :)"

    Please tell me how to say that soon.
    XD
    • Thanks x 1
    • Agree x 1
    my mantra
    URL to post:
  • Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage username pic Joined 10y ago
    (づ。◕‿‿◕。)づ Ripe Supporter Admin
    Brooding
    613 points Ranked 48,493rd
    87 medals 14 legendary 25 rare
    • Submitted 60 Sprites Medal icon
    • Thanked 500 submitters Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2015 Medal icon
    • Submitted 100 Skins Medal icon
    • Reached 100 subscribers Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
    Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage
    (づ。◕‿‿◕。)づ
    2y
    csui?
    પેરાબોલ્ટ
    URL to post:
  • ViperL33T avatar
    ViperL33T username pic Joined 5y ago
    Away
    4,743 points Ranked 1,860th
    33 medals 1 legendary 6 rare
    • Returned 5000 times Medal icon
    • Returned 1000 times Medal icon
    • 10 submissions featured Medal icon
    • Received thanks 50 times Medal icon
    • Thanked 50 submitters Medal icon
    • Reached 50 subscribers Medal icon
    2y 2y

    A 15 minute video showcasing a theme?!

    Holy fucking shit, I see you put a shit ton of effort into it. I'll be switching from your previous Dark theme to this one, much cleaner and slick looking!

    15 mins yo, wtf
    Againts the grain
    URL to post:
  • Bobito Pawner avatar
    Bobito Pawner username pic Joined 11y ago
    Offline
    1,854 points Ranked 22,479th
    43 medals 6 legendary 12 rare
    • 2017 Top Contributor Medal icon
    • Submitted 100 Skins Medal icon
    • 30 submissions featured Medal icon
    • Reached 100 subscribers Medal icon
    • 2019 Top Contributor Medal icon
    • 10 years a member Medal icon
    2y
    Is it saved on the account or is it cached on the browser? I mean when I install the theme, will it still be there when I open my account on GB? (meaning no need to reinstall)
    Preserving The Word avatar
    Mantra
    Preserving The Word
    URL to post: