The Lounge - BlackStuff

/*
BlackStuff (eahm)
cp BlackStuff.css /usr/lib/thelounge/node_modules/thelounge/public/themes/
systemctl restart thelounge.service
*/

/* @import 'default.css'; */
@import 'morning.css';

/* Main font, also best for ASCII */
@import url('https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack.css');

/* Main fonts, also best for ASCII */
/*
@import url('https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/dejavu-mono@4.5.4/400.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/juliamono/0.045/juliamono-regular.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/cascadia-mono@4.2.1/400.css');
*/
/* Extra fonts */
/*
@import url(//db.onlinewebfonts.com/c/1db29588408eadbd4406aae9238555eb?family=Consolas);
@import url(//db.onlinewebfonts.com/c/440785c689da19fbbdb1346932c8c029?family=Monaco);
@import url(//db.onlinewebfonts.com/c/9f94dc20bb2a09c15241d3a880b7ad01?family=Menlo);
@import url('https://cdn.jsdelivr.net/npm/meslo@1.0.0/meslo.css');
@import url('https://cdn.jsdelivr.net/npm/@typopro/web-liberation@3.7.5/TypoPRO-LiberationMono-Regular.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/noto-mono@4.5.3/400.css');
@import url('https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@typopro/web-office-code-pro@3.7.5/TypoPRO-OfficeCodePro.css');
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
@import url('http://fonts.cdnfonts.com/css/code-new-roman-2');
@import url("https://cdn.jsdelivr.net/npm/@fontsource/mononoki@4.5.3/400.css");
@import url('https://cdn.jsdelivr.net/npm/comic-mono@0.0.1/index.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/iosevka@4.5.4/400.css');
@import url('https://fonts.googleapis.com/css2?family=Recursive:CRSV,MONO@0,1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO@0.25,0,1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO@0.5,0,1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO@0.75,0,1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO@1,0,1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO@0..1,0,1&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/unifont@4.5.5/400.css');
@import url('https://unpkg.com/fixedsys-css/css/fixedsys.css');
@import url(//db.onlinewebfonts.com/c/13c63232af298878387142e0da62c96f?family=Fixedsys+Excelsior+3.01);
@import url('https://fonts.cdnfonts.com/css/fixedsys-62');
@import url(//db.onlinewebfonts.com/c/53dc764fd0dbbb3140b7909afd437722?family=Chicago);
*/

body {
/* Add an extra letter to the font name, or delete the font line, to disable it and enable the next one in the list */
    font-family:
    'Consolas',
    'Monaco',
    'Hack',
    'Menlo',
    monospace;
/* Main fonts, also best for ASCII */
/*
    font-family:
    'Hack',
    'DejaVu Mono',
    'JuliaMono',
    'JetBrains Mono',
    'Noto Sans Mono',
    'Roboto Mono',
    'IBM Plex Mono',
    'Cascadia Mono';
*/
/* Extra fonts */
/*
    'Consolas',
    'Cascadia Mono',
    'Monaco',
    'Hack',
    'Menlo',
    'Meslo',
    'TypoPRO Liberation Mono',
    'Noto Mono',
    'Oxygen Mono',
    'TypoPRO Office Code Pro',
    'Fira Mono',
    'Ubuntu Mono',
    'Code New Roman',
    'Mononoki',
    'Comic Mono',
    'Iosevka',
    'Recursive',
    'Unifont',
    'Fixedsys',
    'Fixedsys Excelsior 3.01',
    'Fixedsys 62',
    'Chicago',
    monospace;
*/
}

/* Font size and spacing */
.msg,
.names,
.name,
.search,
.mentions-popup,
.channel,
.scrollable-area,
.msg,
.opt,
/*.input,*/
/*.input-wrap,*/
/*.topic*/
/*.title*/
.tls,
.btn,
#form {
    font-size: normal !important; /* Default is 14px. For Fixedsys use 16px */
    line-height: normal !important; /* 1.2 instead of normal for extra line spacing, may break ASCIIs */
}

/* Whole HTML document font settings */
/*
html * {
    font-size: 14px;
    line-height: normal;
    font-family: Hack;
}
*/

/*
My colors:
Orange: #FC7F00 (252, 127, 0)
Blue: #0080C0 (0, 128, 192)
Gray: #D2D2D2 (220, 220, 220)
*/

:root {
    /* Main text color */
    --body-color: #D2D2D2;
    /* Secondary text color, dimmed. Make sure to keep contrast WCAG 2.0 AA compliant on var(--window-bg-color) */
    --body-color-muted: #D2D2D2;
    /* Background color of the whole page */
    --body-bg-color: #000;
    /* Main button color. Applies to border, text, and background on hover */
    --button-color: #0080C0;
    --button-text-color-hover: #FFF;
    --button-color-muted: #0080C0;
    /* Color for sidebar overlay and other things that dim the viewport when something else is on top */
    --overlay-bg-color: rgba(0, 0, 0, 0.5);
    /* Links and link-looking buttons */
    --link-color: #77ABD9;
    /* Background color of the main window */
    --window-bg-color: #000;
    /* Text color for <h2> and <h3> headings in windows */
    --window-heading-color: #D2D2D2;
    /* Color of the date marker, text and separator */
    --date-marker-color: #202020;
    /* Color of the unread message marker, text and separator */
    --unread-marker-color: #404040;
    /* Background and left-border color of highlight messages */
    --highlight-bg-color: #101010;
    --highlight-border-color: #FC7F00;
    /* Color of the progress bar that appears as a file is being uploaded to the server. Defaults to button color */
    --upload-progressbar-color: var(--button-color);
    --border-color: #202020;
    --search-background: #101010;
}

/* mIRC Colors */
/*
 * 0, White: #FFF (255,255,255)
 * 1, Black: #000 (0,0,0)
 * 2, Blue: #00007F (0,0,127)
 * 4, Green: #009300 (0,147,0)
 * 5, Red: #FF0000 (255,0,0)
 * 6, Brown: #7F0000 (127,0,0)
 * 7, Magenta: #9C009C (156,0,156)
 * 8, Orange: #FC7F00 (252,127,0)
 * 9, Yellow: #FFFF00 (255,255,0)
 * 10, Light Green: #00FC00 (0,252,0)
 * 11, Cyan: #009393 (0,147,147)
 * 12, Light Cyan: #00FFFF (0,255,255)
 * 13, Light Blue: #0000FC (0,0,252)
 * 14, Pink: #FF00FF (255,0,255)
 * 15, Grey: #7F7F7F (127,127,127)
 * 16, Light Grey: #D2D2D2 (210,210,210)
*/

/* Chat message color */
#chat .message {
    color: #D2D2D2;
}

/* Action (/me) symbol, msg and colors */
#chat .msg[data-type="action"] .from::before {
    content: "*";
}
#chat .msg[data-type="action"] .from,
#chat .msg[data-type="action"] .content {
    color: #D2D2D2;
    font-style: italic;
}

/* Msg highlight color */
/*
#chat .msg.highlight .content {
    color: #FC7F00;
}
*/

/* Timestamp font size */
/*
#chat-container #chat .msg .time {
    font-size: 13px;
    color: #7F7F7F;
}
*/

/* Timestamp color */
#chat .time {
    color: #7F7F7F !important;
}

/* Hide timestamp */
/*
#chat-container #chat .msg .time {
    display: none;
}
*/

/* Bold nicks */
/*
#chat .user {
    font-weight: bold;
}
*/

/* Userlist count form */
#chat .userlist .count {
    background-color: #000;
}

/* User Modes */
#chat .user-mode.owner::before {
    content: "~";
    color: #FFFF00;
}

#chat .user-mode.admin::before {
    content: "&";
    color: #9C009C;
}

#chat .user-mode.op::before {
    content: "@";
    color: #FF0000;
}

#chat .user-mode.half-op::before {
    content: "%";
    color: #FC7F00;
}

#chat .user-mode.voice::before {
    content: "+";
    color: #009300;
}

#chat .user-mode.normal::before {
    content: "-";
    color: #7F7F7F;
}

/* Editbox form and border color */
#form {
    background-color: #000;
    border-top: 1px solid var(--border-color);
}

/* Own nick/s color/s */
#chat.colored-nicks .user.color-19 {
    color: #FC7F00;
}

/* Own nick message color */
/*
#chat .msg.self .user {
    color: #FC7F00;
}
*/

/* Bigger custom CSS field */
textarea#user-specified-css-input {
    height: 800px;
}

/* Adjust message spacing/density */
#chat .time,
#chat .from,
#chat .content {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Compact sidebar */
#sidebar .networks {
    padding: 5px 0;
}

#sidebar .network {
    margin-bottom: 5px;
}

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

/* Thinner channel sidebar */
#sidebar {
    width: 150px;
}

/* Smaller spacing sidebar channels */
#sidebar .channel-list-item {
    padding: .2em;
}

/* Sidebar network spacing */
#sidebar .network .collapse-network {
    padding-left: 0;
    width: 26px;
}

/* Jump to search box background color */
/*
#sidebar .jump-to-input {
    background-color: #000
}
*/

/* Hide "Jump to..." input box */
.jump-to-input {
    display: none;
}

/* Thinner user list */
#chat .userlist {
    width: 150px;
}

/* Wrap nicks with chevrons */
#chat .msg[data-type="message"] .from .user::before {
    content: "<";
    color: #7F7F7F;
}
#chat .msg[data-type="message"] .from .user::after {
    content: ">";
    color: #7F7F7F;
}

/* Settings and forms colors */
body,
.input {
    background: var(--body-bg-color);
}

.input {
    border: 1px solid var(--border-color);
    color: var(--body-color);
}

/* Server button colors */
/*
.channel-list-item[data-type="lobby"] {
    color: var(--button-color);
}
*/

/* Server button hover/active colors */
/*
.channel-list-item[data-type="lobby"]:hover,
.channel-list-item[data-type="lobby"].active {
    color: var(--button-color-muted);
}
*/

/* Buttons/icons color/s */
#viewport .lt::before,
#viewport .rt::before,
#chat button.mentions::before,
#chat button.close::before,
#chat button.menu::before,
#chat button.search::before,
.channel-list-item::before,
#footer .icon,
#chat .count::before,
#connect .extra-help,
#settings .extra-help,
#settings #play::before,
#settings .settings-menu .icon::before,
#form #upload::before,
#form #submit::before,
#chat .msg[data-type="away"] .from::before,
#chat .msg[data-type="back"] .from::before,
#chat .msg[data-type="invite"] .from::before,
#chat .msg[data-type="join"] .from::before,
#chat .msg[data-type="kick"] .from::before,
#chat .msg[data-type="login"] .from::before,
#chat .msg[data-type="logout"] .from::before,
#chat .msg[data-type="part"] .from::before,
#chat .msg[data-type="quit"] .from::before,
#chat .msg[data-type="topic"] .from::before,
#chat .msg[data-type="mode_channel"] .from::before,
#chat .msg[data-type="mode_user"] .from::before,
#chat .msg[data-type="mode"] .from::before,
#chat .msg[data-command="motd"] .from::before,
#chat .msg[data-command="help"] .from::before,
#chat .msg[data-command="info"] .from::before,
#chat .msg[data-type="ctcp"] .from::before,
#chat .msg[data-type="ctcp_request"] .from::before,
#chat .msg[data-type="whois"] .from::before,
#chat .msg[data-type="nick"] .from::before,
#chat .msg[data-type="action"] .from::before,
#chat .msg[data-type="plugin"] .from::before,
#chat .msg[data-type="raw"] .from::before,
#chat .msg-statusmsg span::before,
#chat .msg-shown-in-active span::before,
#chat .toggle-button::after,
#chat .toggle-content .more-caret::before,
#chat .scroll-down-arrow::after,
#chat .topic-container .save-topic span::before,
#version-checker::before,
.context-menu-item::before,
#help .website-link::before,
#help .documentation-link::before,
#help .report-issue-link::before,
#image-viewer .previous-image-btn::before,
#image-viewer .next-image-btn::before,
#image-viewer .open-btn::before,
.channel-list-item .not-secure-icon::before,
.channel-list-item .not-connected-icon::before,
.channel-list-item .parted-channel-icon::before,
.jump-to-input::before,
.password-container .reveal-password span,
#sidebar .collapse-network-icon::before {
    color: #7F7F7F; /*var(--button-color);*/ /*#0080C0*/
}

/* Status Messages Color */
#chat .msg[data-type="condensed"] .content,
#chat .msg[data-type="away"] .content,
#chat .msg[data-type="back"] .content,
#chat .msg[data-type="join"] .content,
#chat .msg[data-type="kick"] .content,
#chat .msg[data-type="mode"] .content,
#chat .msg[data-type="mode_channel"] .content,
#chat .msg[data-type="mode_user"] .content,
#chat .msg[data-type="nick"] .content,
#chat .msg[data-type=login] .content,
#chat .msg[data-type="part"] .content,
#chat .msg[data-type="quit"] .content,
#chat .msg[data-type="topic"] .content,
#chat .msg[data-type="topic_set_by"] .content {
    color: #0080C0; /*#7F7F7F*/
}

/* Action Messages Color */
/*
#chat .msg[data-type="action"] .from,
#chat .msg[data-type="action"] .content,
#chat .msg[data-type="action"] .user {
    color: #9C009C;
}
*/

/* Notices and Wallops Color */
/*
#chat .msg[data-type="notice"] .time,
#chat .msg[data-type="wallops"] .time,
#chat .msg[data-type="notice"] .content,
#chat .msg[data-type="wallops"] .content,
#chat .msg[data-type="notice"] .user,
#chat .msg[data-type="wallops"] .user {
    color: #7F7F7F;
}
*/

/* Monospace Block Color */
/*
#chat .msg[data-type="monospace_block"] .text {
    background: #D2D2D2;
    display: inline-block;
    border-radius: 4px;
    padding: 6px;
}
/*

/* Hide Non Secure Connection Icon, orange is non secure and green is secure */
.channel-list-item .not-secure-icon::before {
    display:none
}

/* Badge highlight color*/
/*
.channel-list-item .badge.highlight {
    background: var(--button-color);
    color: #FFF;
}
*/

.btn:active,
.btn:focus,
.input:focus {
    outline: 0;
    box-shadow: 0 0 0 1px rgba(0, 128, 192, 0.5);
}

.input:not(:disabled):focus,
.input:not(:disabled):hover {
    border-color: var(--button-color);
}

::placeholder {
    color: #7F7F7F;
}

/* Logo area */
#sidebar .logo-container {
    display: none;
}

/* Search Form */
form.message-search input {
    background: inherit;
    color: inherit;
}

#chat form.message-search button {
    color: #D2D2D2;
}

form.message-search input::placeholder {
    color: var(--body-color-muted);
}

/* Chat header border color*/
#chat .header {
    border-bottom: 1px solid var(--border-color);
}

/* Channel list border and color */
#sidebar {
    border-right: 1px solid var(--border-color);
}

/* Useerlist count background color */
#chat .userlist .count {
    background: inherit;
}

/* Userlist border color */
#chat .userlist,
#chat .content {
    border-left: 1px solid var(--border-color);
}

/* Topic Header Color */
/*
.header .topic {
    color: #7F7F7F;
}
*/

/* Code text and color */
code,
.irc-monospace {
    background-color: var(--border-color);
}

pre {
    background-color: #F5F5F5;
}

/* Scrollbar settings and color */
::-webkit-scrollbar:hover {
    background-color: #000;
}

::-webkit-scrollbar-thumb:vertical {
    background-color: #101010;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:vertical:active {
    background-color: #121212;
}

/* Visited links color */
a:visited {
    color: #9B59B6;
}

/* Channel list table channel width */
#chat table.channel-list .channel {
    width: 200px;
}

/* Indent */
#chat .from {
    width: auto; /* Default width is 133px. Set auto to disable it */
    padding-left: 0px;
    padding-right: 0px;
    -webkit-mask-image: none;
}
#chat .content {
    border: 0;
}

/* No divider line */
#chat .from {
    padding-right: 0px;
    -webkit-mask-image: none;
}
#chat .content {
    border: 0;
}

/* Hide unread counters in sidebar, just show a highlight indicator */
/* Do not touch this */
/*.channel-list-item .badge { text-indent: -9999px; background: 0;  height: 10px; width: 10px; border-radius: 50%; margin: auto; padding: 0;}*/
/* Replace the #xxxxxx bit with the color that you want if there are unread messages. */
/*.channel-list-item .badge { background-color: #FC7F00;}*/
/* Replace the #xxxxxx bit with the color that you want if you were mentioned */
/*.channel-list-item .badge.highlight { background-color: #FC7F00;}*/

/* For mobile users/phones: */
@media only screen
  and (min-device-width: 240px)
  and (max-device-width: 4000px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

body {
    font-family:
    'Hack';
}

#chat .from {
    width: auto;
    padding-left: 0px;
    padding-right: 0px;
    -webkit-mask-image: none;
}
#chat .content {
    border: 0;
}

.msg {
    font-size: 10px !important;
    line-height: normal !important;
}

#chat-container #chat .msg .time {
    font-size: 8px;
}

/* Indent */
#chat .from {
    width: auto; /* Default width is 133px. Set auto to disable it */
    padding-left: 0px;
    padding-right: 0px;
    -webkit-mask-image: none;
}
#chat .content {
    border: 0;
}

/* Visited links color */
a:visited {
    color: #9B59B6;
}
}

/* For mobile users/phones: */
@media only screen
  and (min-device-width: 240px)
  and (max-device-width: 4000px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

body {
    font-family:
    'Hack';
}

#chat .from {
    width: auto;
    padding-left: 0px;
    padding-right: 5px;
    -webkit-mask-image: none;
}
#chat .content {
    border: 0;
}

.msg {
    font-size: 10px !important;
    line-height: normal !important;
}

#chat-container #chat .msg .time {
    font-size: 8px;
}

/* Indent */
#chat .from {
    width: auto;
    padding-left: 0px;
    padding-right: 0px;
    -webkit-mask-image: none;
}
#chat .content {
    border: 0;
}

/* Visited links color */
a:visited {
    color: #9B59B6;
}
}

/* Official IRC Colors, taken from https://modern.ircdocs.horse/formatting.html#colors */
/*
#chat.colored-nicks .user.color-1{
    color:#00B571
}
#chat.colored-nicks .user.color-2{
    color:#B2FF00
}
#chat.colored-nicks .user.color-3{
    color:#00FFFF
}
#chat.colored-nicks .user.color-4{
    color:#FF5959
}
#chat.colored-nicks .user.color-5{
    color:#FFFF71
}
#chat.colored-nicks .user.color-6{
    color:#FF66FF
}
#chat.colored-nicks .user.color-7{
    color:#FFD39C
}
#chat.colored-nicks .user.color-8{
    color:#FF94D3
}
#chat.colored-nicks .user.color-9{
    color:#00B5B5
}
#chat.colored-nicks .user.color-10{
    color:#CFFF60
}
#chat.colored-nicks .user.color-11{
    color:#6FFF6F
}
#chat.colored-nicks .user.color-12{
    color:#59B4FF
}
#chat.colored-nicks .user.color-13{
    color:#FF59BC
}
#chat.colored-nicks .user.color-14{
    color:#E2FF9C
}
#chat.colored-nicks .user.color-15{
    color:#9CFF9C
}
#chat.colored-nicks .user.color-16{
    color:#9CFFDB
}
#chat.colored-nicks .user.color-17{
    color:#FF9C9C
}
#chat.colored-nicks .user.color-18{
    color:#FFFF9C
}
#chat.colored-nicks .user.color-19{
    color:#FC7F00
}
#chat.colored-nicks .user.color-20{
    color:#9CFFFF
}
#chat.colored-nicks .user.color-21{
    color:#9C9CFF
}
#chat.colored-nicks .user.color-22{
    color:#FF9CFF
}
#chat.colored-nicks .user.color-23{
    color:#9CD3FF
}
#chat.colored-nicks .user.color-24{
    color:#FFB459
}
#chat.colored-nicks .user.color-25{
    color:#00FFA0
}
#chat.colored-nicks .user.color-26{
    color:#C459FF
}
#chat.colored-nicks .user.color-27{
    color:#6DFFFF
}
#chat.colored-nicks .user.color-28{
    color:#0063B5
}
#chat.colored-nicks .user.color-29{
    color:#DC9CFF
}
#chat.colored-nicks .user.color-30{
    color:#65FFC9
}
#chat.colored-nicks .user.color-31{
    color:#FF0098
}
#chat.colored-nicks .user.color-32{
    color:#B5B500
}
*/