thelounge-theme-zenburn/zenburn.css

Dark & low-contrast theme for The Lounge, based on the Vim's Zenburn color scheme

/*
Zenburn theme for The Lounge.
Based on the Morning Theme by Riku Rouvila

Installation instructions can be found here
https://thelounge.chat/docs/server/configuration.html#theme

Author: JP Smith
GitHub: https://github.com/japesinator
*/

/*
BACKGROUND #3f3f3f
INPUT BACKGROUND #434443
PRIMARY #dcdccc
SECONDARY #d2d39b
BORDERS #333333
QUIT #bc6c4c
*/

:root {
  --body-color: #dcdccc;
  --window-bg-color: #3f3f3f;
  --link-color: #8c8cbc;
  --unread-marker-color: #dfaf8f;
  --date-marker-color: #97ea70;
  --highlight-bg-color: #2b2b2b;
  --highlight-border-color: #6f6f6f;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(120, 120, 120, 0.4);
}

html {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body {
  background: #2b2b2b;
  color: var(--body-color);
}

#loading .logo,
#windows .logo {
  display: none;
}

#loading .logo-inverted,
#windows .logo-inverted {
  display: inline-block;
}

#settings,
#sign-in,
#connect .title {
  color: #88b090;
}

#settings,
#sign-in,
#connect .opt {
  color: var(--body-color);
}

#sidebar {
  background: #2b2b2b;
}

#sidebar .channel-list-item.active {
  background-color: #333 !important;
}

#sidebar .channel-list-item:hover {
  background-color: rgba(51, 51, 51, 0.5); /* Same as #333 but with opacity */
}

#footer {
  background: #333;
  border-top: 1px solid #000;
}

#chat .userlist .count {
  background-color: #434443;
}

#chat .userlist .search {
  color: #88b090;
  padding: 15px 16px;
}

/* Borders */
#chat .content,
#windows .header,
#chat .header,
#chat .user-mode::before,
#chat .userlist {
  border-color: #333;
}

/* User list */
#chat .user-mode {
  color: var(--body-color);
}

#chat .userlist .user.active {
  background-color: #333;
}

/* Nicknames */
#chat .user {
  color: #bc8cbc;
}

#chat.colored-nicks .user.color-1 { color: #f7adf7; }
#chat.colored-nicks .user.color-2 { color: #abf99f; }
#chat.colored-nicks .user.color-3 { color: #86efdc; }
#chat.colored-nicks .user.color-4 { color: #ca95ec; }
#chat.colored-nicks .user.color-5 { color: #f9a4b3; }
#chat.colored-nicks .user.color-6 { color: #f7999a; }
#chat.colored-nicks .user.color-7 { color: #f497b9; }
#chat.colored-nicks .user.color-8 { color: #f9a9d7; }
#chat.colored-nicks .user.color-9 { color: #8babe5; }
#chat.colored-nicks .user.color-10 { color: #a8b8ff; }
#chat.colored-nicks .user.color-11 { color: #b999fc; }
#chat.colored-nicks .user.color-12 { color: #f4aead; }
#chat.colored-nicks .user.color-13 { color: #fc82b5; }
#chat.colored-nicks .user.color-14 { color: #ff77e1; }
#chat.colored-nicks .user.color-15 { color: #8cb6ea; }
#chat.colored-nicks .user.color-16 { color: #f98a81; }
#chat.colored-nicks .user.color-17 { color: #ed9b82; }
#chat.colored-nicks .user.color-18 { color: #8df484; }
#chat.colored-nicks .user.color-19 { color: #ffcce3; }
#chat.colored-nicks .user.color-20 { color: #efcc81; }
#chat.colored-nicks .user.color-21 { color: #96a6ee; }
#chat.colored-nicks .user.color-22 { color: #f4d484; }
#chat.colored-nicks .user.color-23 { color: #97ea70; }
#chat.colored-nicks .user.color-24 { color: #fcbbba; }
#chat.colored-nicks .user.color-25 { color: #eef975; }
#chat.colored-nicks .user.color-26 { color: #c7ff93; }
#chat.colored-nicks .user.color-27 { color: #ffade1; }
#chat.colored-nicks .user.color-28 { color: #98ecf2; }
#chat.colored-nicks .user.color-29 { color: #95a5f5; }
#chat.colored-nicks .user.color-30 { color: #b49eea; }
#chat.colored-nicks .user.color-31 { color: #f2a4eb; }
#chat.colored-nicks .user.color-32 { color: #85f27d; }

/* Increase contrast of some IRC colors */
.irc-fg2 { color: #1b94ff; }
.irc-fg5 { color: #e969a7; }
.irc-fg12 { color: #6fb7ff; }

/* Message form */
#form {
  background: #333;
  border-color: #101010;
}

#windows #form .input {
  background-color: #434443 !important;
  border-color: #101010 !important;
  color: var(--body-color) !important;
}

#upload-progressbar {
  background: #84ce88;
}

#form #nick {
  background: #101010;
  color: var(--body-color);
}

/* Buttons */
#chat .show-more-button {
  background: #434443;
  border-color: #101010;
  color: var(--body-color);
}

#chat .show-more-button:hover {
  color: #fff;
}

#windows #chat .header {
  color: #d2d39b !important;
}

#form #submit,
#form #upload,
.header button {
  color: #ccc !important;
}

#form #submit:hover {
  opacity: 1;
}

#footer button:hover {
  background-color: #3f3f3f;
  border-radius: 0;
}

/* Setup text colors */

#chat .message {
  color: var(--body-color);
}

#chat .self .content {
  color: #d2d39b;
}

#chat .unhandled .from {
  color: #aaa;
}

#chat .msg[data-type="notice"] .time,
#chat .msg[data-type="notice"] .content,
#chat .chat-view .msg[data-type="notice"] .user {
  color: #bde0f3 !important;
}

#chat .msg[data-type="error"],
#chat .msg[data-type="error"] .from,
#chat .msg.highlight,
#chat .msg.highlight .from,
#chat .msg.highlight .text {
  color: #bc6c4c;
}

#chat .msg[data-type="quit"] .time,
#chat .msg[data-type="quit"] .from button {
  color: #bc6c9c !important;
}

#chat .msg[data-type="topic"] {
  color: var(--body-color);
}

#chat .msg[data-type="join"] .time,
#chat .msg[data-type="join"] .from button {
  color: #8cd0d3 !important;
}

#chat table.channel-list td {
  color: #ccc;
}

#viewport #chat table td,
#viewport #chat table th {
  border-bottom-color: rgba(51, 51, 51);
}

code,
.irc-monospace {
  background: #333;
  color: var(--body-color);
}

kbd {
  color: #eee;
  text-shadow: 0 -1px 0 #000;
  border-color: #000;
  background-color: #333;
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), transparent);
  box-shadow: 0 2px 0 #000, inset 0 1px 1px #777, inset 0 -1px 3px #222;
}

#chat .msg[data-type="motd"] .text,
#chat .msg[data-type="monospace_block"] .text {
  background: #333;
}

#chat .msg[data-type="topic"] .from::before,
#chat .msg[data-type="mode"] .from::before,
#chat .msg[data-type="nick"] .from::before,
#chat .msg[data-type="join"] .from::before {
  color: #97ea70;
}

#chat .msg[data-type="part"] .from::before,
#chat .msg[data-type="kick"] .from::before,
#chat .msg[data-type="quit"] .from::before {
  color: #f37e69;
}

/* Previews */

#chat .toggle-content {
  background: #333;
  color: var(--body-color);
}

#chat .toggle-content .body {
  color: #d2d39b;
}

/* Form elements */

#chat-container ::-moz-placeholder {
  color: #d2d39b;
  opacity: 0.5;
}

#chat-container ::-webkit-input-placeholder {
  color: #d2d39b;
  opacity: 0.5;
}

#chat-container :-ms-input-placeholder {
  color: #d2d39b;
  opacity: 0.5;
}

/* Context menus */

#context-menu,
.textcomplete-menu {
  background-color: #3f3f3f;
}

.context-menu-item,
.textcomplete-item {
  color: var(--body-color);
}

.textcomplete-item a {
  color: inherit !important;
}

#chat .userlist .user.active,
.context-menu-item:focus,
.context-menu-item:hover,
.textcomplete-item:focus,
.textcomplete-item:hover,
.textcomplete-menu .active {
  background-color: #333;
}