GameBanana shows no ads to members. Sign up now!
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] (danialz@pm.me)

        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 9mo
  • - Updated the code to match with the Dark Theme (CSUI) [Frost] theme's code.
Version 1.4.0 10mo Amendment Removal Overhaul2 Tweak6 Version 1.3.0 11mo BugFix Removal Overhaul Tweak5 Version 1.2.0 11mo BugFix4 Addition Amendment7 Overhaul3 Tweak3 Version 1.1.0 1y 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
Sign up to access this!

Embed

Share banner
Image URL
HTML embed code
BB embed code
Markdown embed code

Credits

Original Author
Danial Zahid avatar
Danial Zahid username pic Joined 8y ago
Bug Zapper Ripe Supporter Baldi Manager GoldSrc Manager Moderator
Offline
1,864 points Ranked 21,377th
63 medals 6 legendary 17 rare
  • Submitted 50 Gamefiles Medal icon
  • Submitted 15 Tools Medal icon
  • Submitted 60 Prefabs Medal icon
  • Returned 5000 times Medal icon
  • Became a Ripe Supporter Medal icon
  • Thanked 500 submitters Medal icon
Code
Special Thanks
tom avatar
tom username pic Joined 19y ago
End Boss Ripe Supporter TBS2 Manager Super Admin
Offline
1,326 points Ranked 22,958th
72 medals 13 legendary 10 rare
  • Achieved Super Admin clearance Medal icon
  • 10 years a member Medal icon
  • Thanked 500 submitters Medal icon
  • Submitted 200 Blogs Medal icon
  • Submitted 200 Threads Medal icon
  • Submitted 60 Polls Medal icon
QuickDL material icon class addition
Ring-A-Ding Rampage avatar
Ring-A-Ding Rampage username pic Joined 9y ago
(づ。◕‿‿◕。)づ Ripe Supporter Moderator
Coding
1,162 points Ranked 23,796th
76 medals 11 legendary 20 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
Helped with a few issues
Willian Justen de Vasconcellos
Background image

Submitter

Danial Zahid avatar
Danial Zahid username pic Joined 8y ago
Bug Zapper Ripe Supporter Baldi Manager GoldSrc Manager Moderator
Offline
1,864 points Ranked 21,377th
63 medals 6 legendary 17 rare
  • Submitted 50 Gamefiles Medal icon
  • Submitted 15 Tools Medal icon
  • Submitted 60 Prefabs Medal icon
  • Returned 5000 times Medal icon
  • Became a Ripe Supporter Medal icon
  • Thanked 500 submitters Medal icon
Danial Zahid avatar
Danial Zahid

Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!

Game

Sign up to access this!

Category

Sub-category
UI Themes
Super-category
Cascade Style Sheets

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.

Attributes

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
Danial Zahid avatar

Danial Zahid does commissions on Checkpoint.

View Profile
  • 15
  • 2.2k
  • 13
  • 1y
  • 9mo
  • 9mo

More from Submitter

More UI Themes Scripts