thelounge-theme-mininapse/mininapse.css

A dark, minimal theme for thelounge

/*
thelounge-theme-mininapse
A dark theme for TheLounge IRC client

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

Authors:
- MiniDigger: https://github.com/MiniDigger
- fnutt: https://github.com/fnutt
*/
@import 'default.css';

:root {
    --body-color: #c5c1c1;
    --dim-color: #999;
    --link-color: #ef4657;
    --window-bg-color: #282525;
    --body-bg-color: #282525;
    --active-bg-color: #333030;
    --dark-bg-color: #0003;
    --date-marker-color: #84ce88;
    --unread-marker-color: #84ce88;
    --highlight-bg-color: #f58383;
    --highlight-border-color: #ef4657;
    --overlay-bg-color: rgba(0, 0, 0, 0.7);
    --upload-progressbar-color: #ef4657;
}

/* <editor-fold desc="hide bot spam"> */
#chat .msg[data-from="travis-ci"] .toggle-button,
#chat .msg[data-from="MiniBot"] .toggle-button,
#chat .msg[data-from="Wendy"] .toggle-button,
#chat .msg[data-from="github-status"] .toggle-button {
    transform: rotate(90deg);
}

#chat .msg[data-from="travis-ci"] .toggle-button.opened,
#chat .msg[data-from="MiniBot"] .toggle-button.opened,
#chat .msg[data-from="Wendy"] .toggle-button.opened,
#chat .msg[data-from="github-status"] .toggle-button.opened {
    transform: rotate(0deg);
}

#chat .msg[data-from="travis-ci"] .toggle-content,
#chat .msg[data-from="MiniBot"] .toggle-content,
#chat .msg[data-from="Wendy"] .toggle-content,
#chat .msg[data-from="github-status"] .toggle-content {
    display: inline-flex !important;
}

#chat .msg[data-from="travis-ci"] .toggle-content.show,
#chat .msg[data-from="MiniBot"] .toggle-content.show,
#chat .msg[data-from="Wendy"] .toggle-content.show,
#chat .msg[data-from="github-status"] .toggle-content.show {
    display: none !important;
}

/* </editor-fold> */

/* <editor-fold desc="nick colors"> */
#chat.colored-nicks .user.color-1,
#chat.colored-nicks .user.color-17 {
    color: #ef4657;
}

#chat.colored-nicks .user.color-2,
#chat.colored-nicks .user.color-18 {
    color: #ff93a4;
}

#chat.colored-nicks .user.color-3,
#chat.colored-nicks .user.color-19 {
    color: #ffb03b;
}

#chat.colored-nicks .user.color-4,
#chat.colored-nicks .user.color-20 {
    color: #cc7d08;
}

#chat.colored-nicks .user.color-5,
#chat.colored-nicks .user.color-21 {
    color: #ffd34e;
}

#chat.colored-nicks .user.color-6,
#chat.colored-nicks .user.color-22 {
    color: #cca01b;
}

#chat.colored-nicks .user.color-7,
#chat.colored-nicks .user.color-23 {
    color: #acf046;
}

#chat.colored-nicks .user.color-8,
#chat.colored-nicks .user.color-24 {
    color: #d5f572;
}

#chat.colored-nicks .user.color-9,
#chat.colored-nicks .user.color-25 {
    color: #499e8d;
}

#chat.colored-nicks .user.color-10,
#chat.colored-nicks .user.color-26 {
    color: #b5ffe1;
}

#chat.colored-nicks .user.color-11,
#chat.colored-nicks .user.color-27 {
    color: #35a7ff;
}

#chat.colored-nicks .user.color-12,
#chat.colored-nicks .user.color-28 {
    color: #91a6ff;
}

#chat.colored-nicks .user.color-13,
#chat.colored-nicks .user.color-29 {
    color: #8a46f0;
}

#chat.colored-nicks .user.color-14,
#chat.colored-nicks .user.color-30 {
    color: #ff88dc;
}

#chat.colored-nicks .user.color-15,
#chat.colored-nicks .user.color-31 {
    color: #bd8d46;
}

#chat.colored-nicks .user.color-16,
#chat.colored-nicks .user.color-32 {
    color: #f0c079;
}

/* </editor-fold> */

/* Borders */
#chat .content,
#chat .header,
#chat .user-mode::before,
#chat .userlist {
    border-color: var(--window-bg-color);
}

/* Button colors */
#viewport .lt,
#viewport .rt,
#chat button.menu,
#chat .count::before,
#form #submit,
#footer button,
#chat button.mentions::before,
#chat form.message-search button {
    color: var(--link-color);
}

.btn {
    border-color: var(--link-color);
    color: var(--link-color);
}

.btn:disabled,
.btn:focus,
.btn:hover {
    background: var(--link-color);
    color: var(--body-color);
}

#viewport .lt:hover,
#viewport .rt:hover,
#chat button.menu:hover,
#form #submit:hover {
    color: var(--highlight-bg-color);
}

/* Active/hover */
.channel-list-item:hover,
.context-menu-item:focus,
.textcomplete-item:focus,
.context-menu-item:hover,
.textcomplete-item:hover,
.textcomplete-menu .active,
#chat .userlist .user.active,
#sidebar .active,
#sidebar .active:hover,
#footer button.active,
#footer button:hover {
    background-color: var(--active-bg-color);
}

/* Network-/channel list sidebar */
#sidebar {
    width: 170px;
}

@media (max-width: 768px) {
    #sidebar {
        width: 200px;
    }
}

.channel-list-item,
#sidebar .empty {
    color: var(--body-color);
}

.channel-list-item,
#sidebar .chan-placeholder {
    padding-bottom: 3px;
    padding-top: 3px;
}

#sidebar .network,
#sidebar .network-placeholder {
    margin-bottom: 3px;
}

#sidebar .network .collapse-network-icon::before {
    color: var(--highlight-border-color);
}

#sidebar .network .collapse-network {
    width: 35px;
    opacity: 100;
}

#sidebar .logo-container,
.channel-list-item::before,
#sidebar .channel-list-item[data-type="lobby"] .add-channel:not(.opened),
.not-secure-tooltip,
.not-secure-icon {
    display: none;
}

#sidebar .channel-list-item[data-type="lobby"],
#sidebar .not-secure .channel-list-item[data-type="lobby"] {
    color: var(--highlight-border-color);
}

.channel-list-item[data-type="lobby"].active,
.channel-list-item[data-type="lobby"] .lobby-wrap:hover,
.not-secure .channel-list-item[data-type="lobby"].active,
.not-secure .channel-list-item[data-type="lobby"] .lobby-wrap:hover {
    color: var(--highlight-bg-color);
}

.jump-to-input .input,
.jump-to-input::before {
    color: var(--link-color);
    background-color: var(--window-bg-color);
}

/* Search messages pull request
https://github.com/thelounge/thelounge/pull/3664 */
form.message-search input {
    background-color: var(--window-bg-color);
}

/* User list sidebar */
#chat .user-mode {
    padding: 8px 0 0;
    margin-bottom: 0;
}

#chat .userlist .count {
    background: var(--body-bg-color);
}

/* Inputs */
.input,
.input:hover,
input,
#form,
#chat .userlist .search {
    color: var(--body-color);
    background-color: var(--window-bg-color);
    border-color: var(--dim-color) !important;
}

.btn:active,
.btn:focus,
.input:focus {
    border-color: rgba(0, 0, 0, 0) !important;
    box-shadow: 0 0 0 1.5px var(--highlight-border-color);
}

.input::placeholder,
input::placeholder,
textarea::placeholder,
#chat .userlist .search::placeholder {
    color: var(--dim-color) !important;
}

#form {
    border: none;
}

#user-specified-css-input {
    height: 400px;
}

.password-container .reveal-password span,
#settings .extra-help,
#settings .extra-experimental {
    color: var(--highlight-border-color);
}

/* Windows */
.window {
    box-shadow: none;
}

.window h2 {
    color: var(--body-color);
}

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

.textcomplete-menu,
#context-menu {
    background-color: var(--body-bg-color);
}

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

/* Channels */
#chat .chat-view[data-type=channel] .msg.highlight {
    background: var(--body-bg-color);
    border-left: 5px solid var(--highlight-border-color);
}

#chat .chat-view[data-type=channel] .msg.highlight .content {
    border-left: none;
}

#chat .self {
    background: linear-gradient(to right, var(--date-marker-color) 5px, var(--body-bg-color) 5px);
}

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

.irc-monospace,
code {
    color: var(--body-bg-color);
    font-weight: bold;
}

#chat .chat-view .notice .user,
#chat .notice .content,
#chat .notice .time,
.irc-fg2,
#chat .msg[data-type=notice] .content,
#chat .msg[data-type=notice] .time,
#chat .msg[data-type=notice] .user,
#chat .msg[data-type=notice] .from .user::before {
    color: var(--link-color) !important;
}

#chat .toggle-content {
    background: var(--body-bg-color);
    box-shadow: none;
}

#chat .toggle-text a {
    color: var(--body-color);
}

.header .topic {
    color: var(--body-color);
}

/* previous source */
.previous-source .from {
    visibility: hidden;
}

.previous-source[data-from="DiscordBot"] .time,
.previous-source:hover .time {
    visibility: visible;
}

@media (max-width: 479px) {
    #chat .previous-source .from,
    #chat .previous-source .time {
        visibility: visible;
    }
}

/* MOTD */
#chat .msg[data-type=monospace_block] .text {
    color: var(--highlight-border-color);
    background-color: var(--dark-bg-color);
}

#chat .msg[data-command=motd] .from::before {
    color: var(--highlight-border-color);
}

/* Scroll down button */
.scroll-down-arrow {
    border-color: var(--highlight-border-color);
    background-color: var(--highlight-border-color);
    color: white;
}

.scroll-down:hover .scroll-down-arrow {
    background-color: var(--highlight-bg-color);
}

.scroll-down-number {
    background-color: var(--highlight-border-color);
    color: white;
}

/* Channel list */
#chat table.channel-list td {
    color: var(--body-color);
}

/* Fileuploading */
#form #submit,
#form #upload {
    color: var(--highlight-border-color);
}

/* Image viewer */
#image-viewer.opened {
    -webkit-backdrop-filter: blur(2px); /* edge combat, no ff or IE, sorry guys */
    backdrop-filter: blur(2px);
}

/* Mentions popup */
.mentions-popup .msg .content {
    background-color: var(--dark-bg-color);
}