thelounge-theme-nightfall/theme.css

A simple and eye-friendly dark theme for The Lounge

/* Root Variables */
:root {
  --body-bg-color: #0d0d0d;
  --body-bg-color-muted: #161616;
  --window-bg-color: #121212;
  --body-color: #ccc;
  --body-color-muted: #aaa;
  --button-color: #bbb;
  --button-text-color-hover: #222;
  --window-heading-color: #bbb;
  --date-marker-color: #89b9f8; 
  --unread-marker-color: #7fcaff;
  --highlight-bg-color: #222;
  --highlight-border-color: #666;
  --link-color: #8dd7ff;
}

/* Typography & Placeholders */
::placeholder,
#chat .count::before,
form.message-search input::placeholder {
  color: var(--body-color-muted);
  opacity: 0.75;
}

/* Buttons & Inputs */
.btn:active, .btn:focus, .input:focus {
  box-shadow: 0 0 0 3px #444;
}

#form {
  border-radius: 10px;
  margin: 0 10px 10px;
  border: 1px solid #333;
}

#form #submit, #form #upload {
  color: var(--button-color);
}

input[type="search"]::-webkit-search-cancel-button {
  filter: invert(50%);
}

/* Chat Window & Messages */
#chat .toggle-text a {
  color: var(--body-color);
}

#chat .toggle-content {
  background: #262626;
}

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

/* Default user Color */
.user { color: #aac6ff; }

/* User Colors */
.user.color-1 { color: #f7adf7; }
.user.color-2 { color: #abf99f; }
.user.color-3 { color: #86efdc; }
.user.color-4 { color: #c890eb; }
.user.color-5 { color: #f9a4b3; }
.user.color-6 { color: #f7999a; }
.user.color-7 { color: #f497b9; }
.user.color-8 { color: #f9a9d7; }
.user.color-9 { color: #85a7e3; }
.user.color-10 { color: #a8b8ff; }
.user.color-11 { color: #b695fc; }
.user.color-12 { color: #f4aead; }
.user.color-13 { color: #fc7cb1; }
.user.color-14 { color: #ff72e0; }
.user.color-15 { color: #8cb6ea; }
.user.color-16 { color: #f9857c; }
.user.color-17 { color: #ed9b82; }
.user.color-18 { color: #8df484; }
.user.color-19 { color: #ffcce3; }
.user.color-20 { color: #efcc81; }
.user.color-21 { color: #92a2ed; }
.user.color-22 { color: #f4d484; }
.user.color-23 { color: #97ea70; }
.user.color-24 { color: #fcbbba; }
.user.color-25 { color: #eef975; }
.user.color-26 { color: #c7ff93; }
.user.color-27 { color: #ffade1; }
.user.color-28 { color: #98ecf2; }
.user.color-29 { color: #91a2f5; }
.user.color-30 { color: #b19aea; }
.user.color-31 { color: #f2a4eb; }
.user.color-32 { color: #85f27d; }

/* IRC Colors */
.irc-fg2 { color: #0074d9; }
.irc-fg22 { color: #1abc9c; }
.irc-fg5 { color: #e969a7; }
.irc-fg12 { color: #50a8ff; }

/* Footer & Channel List */
#footer { margin-bottom: 10px; }

#footer button:hover, .channel-list-item:hover, #footer button.active, .channel-list-item.active {
  background-color: #262626;
}

.channel-list-item {
  padding: 5px 15px;
  font-size: 14px;
}

.channel-list-item[data-type="lobby"] {
  color: #5a90c8;
}

.channel-list-item[data-type="lobby"].active, .channel-list-item[data-type="lobby"]:hover {
  color: #9fd1ff;
}

span.not-secure-icon { color: #e3c567; }

#footer button.active, #footer button:hover, .channel-list-item.active, .channel-list-item:hover {
  color: #d4d4d4;
}

.jump-to-input .input { background: var(--body-bg-color-muted); }

/* Context Menu & Popups */
.context-menu-item, .textcomplete-item {
  color: #d4d4d4;
}

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

#chat .msg[data-type="monospace_block"] .text, #context-menu, .mentions-popup,
.textcomplete-menu, #chat .userlist .count, form.message-search input,
#connect input, #settings input, #settings textarea, #settings select, #form, #chat .userlist .search {
  background: var(--body-bg-color-muted);
}

#settings input, #settings textarea, #settings select { color: var(--body-color) }

#connect input { color: var(--body-color); }

#chat .header, #chat .userlist, .input:not(:disabled):focus, #chat .content, .input:not(:disabled):hover {
  border-color: #333;
}

/* Icons & Buttons */
#chat button.close, #chat button.mentions, #chat button.menu, #chat button.search,
#viewport .lt, #viewport .rt, #chat form.message-search button {
  color: var(--button-color);
}

#chat button.close:hover, #chat button.mentions:hover, #chat button.menu:hover, #chat button.search:hover,
#viewport .lt:hover, #viewport .rt:hover, #chat form.message-search button:hover, #form button:hover {
  opacity: 1;
  background: #262626;
  border-radius: 5px;
}

#chat-container ::-moz-placeholder, #chat-container ::-webkit-input-placeholder,
#chat-container :-ms-input-placeholder {
  color: var(--body-color-muted);
  opacity: 0.75;
}

.password-container .reveal-password span {
  color: var(--body-color);
}

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

/* Mobile Support */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    #form { margin: 5px 10px 25px; }
    #footer { margin-bottom: 25px; }
  }

  @media (display-mode: standalone) and (max-width: 480px) {
    #chat .chat-view[data-type="search-results"] .messages { 
      margin-bottom: 25px;
    }
  }

  @media (display-mode: standalone) and (orientation: landscape), 
  (display-mode: standalone) and (orientation: portrait) and (min-width: 640px),
  (display-mode: browser) and (min-width: 640px) and (orientation: landscape) {
    #chat .chat-view[data-type="search-results"] .messages { 
      margin-bottom: 15px;
    }
  }

  @media (display-mode: browser) and (min-width: 640px) {
    #form, #footer { margin-bottom: 25px; }
  }
}