thelounge-theme-newnet/theme.css

/*!
 * Newnet
 *
 * URL: https://github.com/newnetirc/lounge-theme-newnet
 * License: MIT
 * forked by deepend
 */

/* Import the Martian Mono font */
@import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;500;600;700&display=swap');

* {
    font-family: 'Martian Mono', monospace;
    font-size: 16px; /* Match base font size with Newnet site */
}

/* General Colors and Backgrounds */
:root {
    --body-bg-color: #121212; /* Website background color */
    --window-bg-color: #1b1b1b; /* Section backgrounds on the website */
    --body-color: #f0f0f0; /* General text color */
    --body-color-muted: #666666; /* Muted text, for less emphasis */
    --link-color: #00ffcc; /* Neon color for links */
    --unread-marker-color: #00ffcc; /* Neon color */
    --date-marker-color: #00ffcc; /* Use neon color for consistency */
    --highlight-bg-color: #1b1b1b; /* Slightly darker than the body background */
    --highlight-border-color: #00ffcc; /* Neon color for border */
    --background-light-color: #1b1b1b; /* Background for highlighted items */
    --overlay-bg-color: rgba(0, 0, 0, 0.8); /* Dark overlay for modals or menus */
}

/* Adjust Scrollbars */
::-webkit-scrollbar-thumb:vertical {
    background: #00ffcc;
}
::-webkit-scrollbar-thumb:vertical:hover {
    background: #00ffcc;
}
::-webkit-scrollbar-thumb:vertical:active {
    background: #00ffcc;
}

html {
    scrollbar-color: #00ffcc #1b1b1b;
    scrollbar-width: thin;
    font-size: 16px; /* Match base font size with Newnet site */
}

/* Hide Logos */
#loading .logo,
.logo-container,
.window .logo,
#loading .logo-inverted,
.window .logo-inverted {
    display: none;
}

#sidebar .logo-inverted {
    height: 35px;
}

/* User Interface Elements */
.irc-monospace,
pre,
code,
kbd {
    color: #f0f0f0;
    background-color: #1b1b1b;
    border-color: #00ffcc;
    box-shadow: none;
    text-shadow: none;
    font-size: 1rem; /* Match font size with general text */
}

#context-menu,
.textcomplete-menu {
    border: 0;
    background-color: #1b1b1b;
    color: #f0f0f0;
}

.context-menu-item,
.textcomplete-item a {
    color: #f0f0f0;
}

/* Sidebar and Navigation */
#sidebar {
    background-color: #1b1b1b;
}

#sidebar .network,
#sidebar .network-placeholder {
    margin-bottom: 1em;
    color: #00ffcc;
}

#sidebar .channel-list-item[data-type="query"]::before,
#sidebar .channel-list-item[data-type="channel"]::before {
    content: "";
}

.channel-list-item.active {
    background-color: #121212;
}

/* Input, Forms, and Buttons */
#input,
#form .input,
#form,
#chat .userlist .count {
    background-color: #1b1b1b;
    color: #f0f0f0;
}

#chat .show-more .btn {
    background: #1b1b1b;
    color: #00ffcc;
    border: 2px solid #00ffcc;
    border-radius: 0;
    text-transform: uppercase;
    transition: background 0.3s ease;
    font-size: 1rem; /* Match font size with general text */
}

#chat .show-more .btn:hover {
    background-color: #00ffcc;
    color: #121212;
    box-shadow: 0px 0px 20px #00ffcc, 0px 0px 30px #00ffcc, 0px 0px 40px #00ffcc;
}

.btn-reconnect {
    background: #1b1b1b; /* Updated to match the rest of the buttons */
    color: #00ffcc;
    border: 2px solid #00ffcc;
    border-radius: 0;
    margin: 0;
    text-transform: uppercase;
    transition: background 0.3s ease;
    padding: 10px 30px;
}

.btn-reconnect:hover {
    background-color: #00ffcc;
    color: #121212;
    box-shadow: 0px 0px 20px #00ffcc, 0px 0px 30px #00ffcc, 0px 0px 40px #00ffcc;
}

/* General button styles */
.btn {
    background-color: #1b1b1b;
    color: #00ffcc;
    border: 2px solid #00ffcc;
    text-transform: uppercase;
    transition: all 0.3s ease;
    padding: 10px 30px;
    font-size: 1rem; /* Match font size with the rest of the site */
    cursor: pointer;
}

.btn:hover {
    background-color: #00ffcc;
    color: #121212; /* Ensure the text color remains black on hover */
    box-shadow: 0px 0px 20px #00ffcc, 0px 0px 30px #00ffcc, 0px 0px 40px #00ffcc;
}

/* Footer */
#footer {
    height: 43px;
    line-height: 43px;
    background-color: #1b1b1b;
    border-top: 2px solid #00ffcc;
    color: #f0f0f0;
}

/* Chat Window and Messages */
#loading,
#chat .userlist,
.window,
body {
    background-color: #121212;
    color: #f0f0f0;
    font-size: 1rem; /* Match font size with Newnet site */
}

#chat .self {
    background: linear-gradient(to right, #1b1b1b 5px, #121212 5px);
}

/* Highlighted Messages */
#chat .chat-view[data-type="channel"] .highlight .toggle-content {
    background-color: #1b1b1b;
}

#chat .msg[data-type="motd"] .text,
#chat .toggle-content {
    background-color: #1b1b1b;
}

#chat .toggle-content,
#chat .toggle-text .body,
#chat .toggle-type-error {
    color: #666666;
}

/* Color Adjustments for IRC Nicks */
.irc-fg2 { color: #00ffcc; }
.irc-fg5 { color: #00ffcc; }
.irc-fg6 { color: #00ffcc; }
.irc-fg12 { color: #00ffcc; }

/* Mobile Adjustments */
@media (max-width: 479px) {
    #chat .msg[data-type="message"] .from .user::before {
        content: "<";
    }
    #chat .msg[data-type="message"] .from .user::after {
        content: ">";
    }
}