mirror/thelounge
1
0
Fork 0
mirror of https://github.com/thelounge/thelounge.git synced 2026-07-30 22:55:50 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
707d859cd67e9cacc4b8efc2bf6352c0982593bc
thelounge/client/css/style.css
Max Leiter 78cadc5ff1 ircv3: monitor and extended-monitor (#5045) 
Updated version of #4550. Closes #337, closes #872 (#337 can't be fully
addressed — tracking nick changes isn't really possible atm).

<img width="253" height="149" alt="image"
src="https://github.com/user-attachments/assets/8a961868-0aa9-406b-92e2-f9d4858e2d0d"
/>

Away support:
<img width="214" alt="image"
src="https://user-images.githubusercontent.com/8675906/165882385-6f928c8e-5a0b-4502-8bd3-3cd0bd70e0e0.png">

## Summary

Query windows show whether the person behind them is online, and whether
they are away, using
[MONITOR](https://ircv3.net/specs/extensions/monitor) rather than
polling. `Network` keeps the monitor list: queries are registered in
batched `MONITOR +` commands once RPL_ISUPPORT tells us the server
supports it, and one at a time as new query windows open. The limit
advertised in `MONITOR=<n>` is respected, with anything over it waiting
for a slot; `MONITOR=0` means no monitoring at all, a bare `MONITOR`
means no limit. A nick change on a monitored query swaps the target in
place so the query keeps its slot.

[extended-monitor](https://ircv3.net/specs/extensions/extended-monitor)
is requested too, so away, nick, account and chghost updates arrive for
monitored nicks we share no channel with. Away state for people we do
share a channel with comes from a WHO on join.

The indicator is a dot on the query in the sidebar and next to the nick
in the message bubble, with a tooltip and an `img` role so it isn't
colour-only, and it can be turned off under Appearance.

Known limitation: a server that enforces a monitor limit it doesn't
advertise will reject part of a batch with `ERR_MONLISTFULL`; the user
gets a message in the lobby, but the client's own list isn't reconciled
until reconnect.

## Test Plan

- Unit tests for the monitor list: add, case-insensitive dedupe,
queueing at the limit, removal draining the queue, batching, and the
rename path.
- Ran the server against a local IRCd and watched the wire: opening
queries sends `MONITOR + <nick>` each, a reconnect with four open
queries sends a single `MONITOR + bob,carol,dave,mallory`, 730/731 drive
the online/offline state, a rename sends `MONITOR - bob` then `MONITOR +
bob2`, `MONITOR=0` sends nothing at all, and a bare `MONITOR` behaves as
unlimited.
2026-07-22 09:46:58 -07:00

3119 lines
64 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* prettier-ignore comment-empty-line-before */
@import "../../node_modules/normalize.css/normalize.css";
@import "fontawesome.css";
@import "../../node_modules/primer-tooltips/build/build.css";
@import "settings.css";
/* Allow tooltips via data-tooltip instead of aria-label to avoid
duplicating accessible names on wrapper + child elements */
.tooltipped[data-tooltip]::after {
content: attr(data-tooltip);
}
:root {
/* Main text color */
--body-color: #222;
/* Secondary text color, dimmed. Make sure to keep contrast WCAG 2.0 AA compliant on var(--window-bg-color) */
--body-color-muted: #767676;
/* Background color of the whole page */
--body-bg-color: #415364;
/* Main button color. Applies to border, text, and background on hover */
--button-color: #84ce88;
--button-text-color-hover: #fff;
/* Color for sidebar overlay and other things that dim the viewport when something else is on top */
--overlay-bg-color: rgb(0 0 0 / 50%);
/* Links and link-looking buttons */
--link-color: #50a656;
/* Background color of the main window */
--window-bg-color: #fff;
/* Background color of the message input form */
--form-bg-color: #fff;
/* Text color for <h2> and <h3> headings in windows */
--window-heading-color: #6c797a;
/* Color of the date marker, text and separator */
--date-marker-color: rgb(0 107 59 / 50%);
/* Color of the unread message marker, text and separator */
--unread-marker-color: rgb(231 76 60 / 50%);
/* Background and left-border color of highlight messages */
--highlight-bg-color: #efe8dc;
--highlight-border-color: #b08c4f;
/* 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);
}
::placeholder {
color: rgb(0 0 0 / 35%);
opacity: 1; /* fix opacity in Firefox */
}
html {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent; /* remove tap highlight on touch devices */
}
*,
*::before,
*::after {
box-sizing: inherit;
}
input,
button,
select,
textarea {
font: inherit;
color: inherit;
}
img {
vertical-align: middle;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
abbr[title] {
cursor: help;
}
html,
body {
height: 100%;
overscroll-behavior: none; /* prevent overscroll navigation actions */
}
body {
background: var(--body-bg-color);
color: var(--body-color);
font: 16px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
user-select: none;
cursor: default;
touch-action: none;
/**
* Disable pull-to-refresh on mobile that conflicts with scrolling the message list.
* See http://stackoverflow.com/a/29313685/1935861
*/
overflow: hidden; /* iOS Safari requires overflow rather than overflow-y */
}
body.force-no-select * {
user-select: none !important;
}
a,
a:hover,
a:focus {
color: var(--link-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
h1,
h2,
h3 {
font: inherit;
line-height: inherit;
margin: 0;
}
button {
border: none;
background: none;
margin: 0;
outline: none;
padding: 0;
user-select: inherit;
cursor: pointer;
}
code,
pre,
#chat .msg[data-type="monospace_block"] .text,
.irc-monospace,
textarea#user-specified-css-input {
font-family: Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
}
code,
.irc-monospace {
font-size: 13px;
padding: 2px 4px;
color: #e74c3c;
background-color: #f9f2f4;
border-radius: 2px;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.4286;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border-radius: 4px;
}
kbd {
display: inline-block;
font-family: inherit;
line-height: 1em;
min-width: 28px; /* Ensure 1-char keys have the same width */
margin: 0 1px;
padding: 4px 6px;
color: #444;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: white;
background-image: linear-gradient(180deg, rgb(0 0 0 / 5%), transparent);
border: 1px solid #bbb;
border-radius: 4px;
box-shadow: 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc;
}
p {
margin: 0 0 10px;
}
.btn {
border: 2px solid var(--button-color);
border-radius: 3px;
color: var(--button-color);
display: inline-block;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
margin-bottom: 10px;
padding: 9px 17px;
text-transform: uppercase;
transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
word-spacing: 3px;
cursor: pointer; /* This is useful for `<button>` elements */
}
.btn-small {
padding: 5px 13px;
}
.btn:disabled,
.btn:hover,
.btn:focus {
background: var(--button-color);
color: var(--button-text-color-hover);
opacity: 1;
}
.input:focus,
.btn:active,
.btn:focus {
outline: 0;
box-shadow: 0 0 0 3px rgb(132 206 136 / 50%);
}
.btn:active {
opacity: 0.8;
}
.btn:disabled {
opacity: 0.6;
}
.btn-sm {
padding: 4px 8px;
border-width: 1px;
letter-spacing: 0;
word-spacing: 0;
text-transform: none;
}
.container {
padding: 0 15px;
margin-bottom: 20px;
width: 480px;
align-self: center;
touch-action: pan-y;
}
#js-copy-hack,
#loading pre,
#help .container,
#changelog .container,
.header .title,
.header .topic,
#chat .messages {
user-select: text;
cursor: text;
}
#js-copy-hack {
position: absolute;
left: -999999px;
}
#chat #js-copy-hack .msg[data-type="condensed"]:not(.closed) .msg,
#chat #js-copy-hack > .msg {
display: block;
}
.only-copy {
font-size: 0;
opacity: 0;
width: 0.01px; /* Must be non-zero to be the first selected character on Firefox */
display: inline-block;
}
/* Icons */
#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 #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="chghost"] .from::before,
#chat .msg[data-type="action"] .from::before,
#chat .msg[data-type="error"] .from::before,
#chat .msg[data-type="warn"] .from::before,
#chat .msg[data-type="note"] .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,
#chat .msg .msg-actions button::before {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#viewport .lt::before { content: "\f0c9"; /* http://fontawesome.io/icon/bars/ */ }
#viewport .rt::before { content: "\f0c0"; /* https://fontawesome.com/icons/users?style=solid */ }
#chat button.menu::before { content: "\f142"; /* http://fontawesome.io/icon/ellipsis-v/ */ }
#chat button.mentions::before { content: "\f1fa"; /* https://fontawesome.com/icons/at?style=solid */ }
#chat button.search::before { content: "\f002"; /* https://fontawesome.com/icons/search?style=solid */ }
#chat button.close::before { content: "\f00d"; /* https://fontawesome.com/icons/times?style=solid */ }
.context-menu-join::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
.context-menu-user::before { content: "\f007"; /* http://fontawesome.io/icon/user/ */ }
.context-menu-close::before { content: "\f00d"; /* http://fontawesome.io/icon/times/ */ }
.context-menu-list::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
.context-menu-disconnect::before { content: "\f127"; /* https://fontawesome.com/icons/unlink?style=solid */ }
.context-menu-connect::before { content: "\f0c1"; /* https://fontawesome.com/icons/link?style=solid */ }
.context-menu-action-whois::before { content: "\f05a"; /* http://fontawesome.io/icon/info-circle/ */ }
.context-menu-action-ignore::before { content: "\f506"; /* https://fontawesome.com/icons/user-slash?style=solid */ }
.context-menu-action-kick::before { content: "\f05e"; /* http://fontawesome.io/icon/ban/ */ }
.context-menu-action-set-mode::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
.context-menu-action-revoke-mode::before { content: "\f068"; /* http://fontawesome.io/icon/minus/ */ }
.context-menu-network::before { content: "\f233"; /* https://fontawesome.com/icons/server?style=solid */ }
.context-menu-edit::before { content: "\f303"; /* https://fontawesome.com/icons/pencil-alt?style=solid */ }
.context-menu-clear-history::before { content: "\f1f8"; /* https://fontawesome.com/icons/trash?style=solid */ }
.context-menu-mute::before { content: "\f6a9"; /* https://fontawesome.com/v5.15/icons/volume-mute?style=solid */ }
.channel-list-item .not-secure-icon::before {
content: "\f071"; /* https://fontawesome.com/icons/exclamation-triangle?style=solid */
}
.channel-list-item .not-connected-icon::before,
.channel-list-item .parted-channel-icon::before {
content: "\f127"; /* https://fontawesome.com/icons/unlink?style=solid */
}
.context-menu-query::before,
.context-menu-action-query::before,
.channel-list-item[data-type="query"]::before {
content: "\f075"; /* https://fontawesome.com/icons/comment?style=solid */
}
.context-menu-chan::before,
.channel-list-item[data-type="channel"]::before { content: "\f086"; /* http://fontawesome.io/icon/comments/ */ }
.channel-list-item[data-type="special"]::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
.channel-list-item.has-draft:not(.active):not([data-type="lobby"])::before {
content: "\f304"; /* https://fontawesome.com/icons/pen?style=solid */
}
#footer .connect::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
#footer .settings::before { content: "\f013"; /* http://fontawesome.io/icon/cog/ */ }
#footer .help::before { content: "\f059"; /* http://fontawesome.io/icon/question/ */ }
#form #upload::before { content: "\f0c6"; /* https://fontawesome.com/icons/paperclip?style=solid */ }
#form #submit::before { content: "\f1d8"; /* http://fontawesome.io/icon/paper-plane/ */ }
#chat .msg[data-type="away"] .from::before,
#chat .msg[data-type="back"] .from::before {
content: "\f017"; /* https://fontawesome.com/icons/clock?style=solid */
color: #7f8c8d;
}
#help .website-link::before,
#help .documentation-link::before,
#help .report-issue-link::before {
display: inline-block;
margin-right: 5px;
/* These 2 directives are loosely taken from .fa-fw */
width: 1.35em;
text-align: center;
}
#help .website-link::before { content: "\f0ac"; /* http://fontawesome.io/icon/globe/ */ }
#help .documentation-link::before { content: "\f19d"; /* http://fontawesome.io/icon/graduation-cap/ */ }
#help .report-issue-link::before { content: "\f188"; /* http://fontawesome.io/icon/bug/ */ }
#chat .msg[data-type="invite"] .from::before {
content: "\f0e0"; /* https://fontawesome.com/icons/envelope?style=solid */
color: #2ecc40;
}
#chat .msg[data-type="login"] .from::before {
content: "\f007"; /* https://fontawesome.com/icons/user?style=solid */
color: #2ecc40;
}
#chat .msg[data-type="logout"] .from::before {
content: "\f007"; /* https://fontawesome.com/icons/user?style=solid */
color: #ff4136;
}
#chat .msg[data-type="part"] .from::before,
#chat .msg[data-type="quit"] .from::before {
content: "\f2f5"; /* https://fontawesome.com/icons/sign-out-alt?style=solid */
color: #ff4136;
display: inline-block;
transform: rotate(180deg);
}
#chat .msg[data-type="topic"] .from::before {
content: "\f0a1"; /* http://fontawesome.io/icon/bullhorn/ */
color: #2ecc40;
}
#chat .msg[data-type="mode_channel"] .from::before,
#chat .msg[data-type="mode_user"] .from::before,
#chat .msg[data-type="mode"] .from::before {
content: "\f05a"; /* http://fontawesome.io/icon/info-circle/ */
color: #2ecc40;
}
#chat .msg[data-command="motd"] .from::before {
content: "\f02e"; /* https://fontawesome.com/icons/bookmark?style=solid */
color: var(--body-color-muted);
}
#chat .msg[data-command="help"] .from::before {
content: "\f059"; /* https://fontawesome.com/icons/question-circle?style=solid */
color: var(--body-color-muted);
}
#chat .msg[data-command="info"] .from::before {
content: "\f05a"; /* https://fontawesome.com/icons/info-circle?style=solid */
color: var(--body-color-muted);
}
#chat .msg[data-type="ctcp"] .from::before,
#chat .msg[data-type="ctcp_request"] .from::before {
content: "\f15c"; /* https://fontawesome.com/icons/file-alt?style=solid */
color: var(--body-color-muted);
}
#chat .msg[data-type="whois"] .from::before {
content: "\f007"; /* http://fontawesome.io/icon/user/ */
color: #2ecc40;
}
#chat .msg[data-type="nick"] .from::before,
#chat .msg[data-type="chghost"] .from::before {
content: "\f007"; /* http://fontawesome.io/icon/user/ */
color: #2ecc40;
}
#chat .msg[data-type="join"] .from::before {
content: "\f2f6"; /* https://fontawesome.com/icons/sign-in-alt?style=solid */
color: #2ecc40;
}
#chat .msg[data-type="kick"] .from::before {
content: "\f05e"; /* http://fontawesome.io/icon/ban/ */
color: #ff4136;
}
#chat .msg[data-type="raw"] .from::before {
content: "\f101"; /* https://fontawesome.com/icons/angle-double-right?style=solid */
}
#chat .msg.self[data-type="raw"] .from::before {
content: "\f359"; /* https://fontawesome.com/icons/arrow-alt-circle-left?style=solid */
color: #2ecc40;
}
#chat .msg[data-type="action"] .from::before {
content: "\f005"; /* http://fontawesome.io/icon/star/ */
}
#chat .msg[data-type="plugin"] .from::before {
content: "\f1e6"; /* http://fontawesome.io/icon/plug/ */
transform: rotate(45deg);
display: inline-block;
padding: 1px;
}
#chat .msg-statusmsg,
#chat .msg-shown-in-active {
cursor: help;
margin-right: 5px;
}
#chat .msg-statusmsg span::before,
#chat .msg-shown-in-active span::before {
font-size: 10px;
content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
}
#chat .msg-statusmsg {
border-radius: 2px;
padding: 2px 4px;
background-color: #ff9e18;
color: #222;
}
#chat .toggle-button {
display: inline-block;
transition: opacity 0.2s, transform 0.2s;
/* These 2 directives are loosely taken from .fa-fw */
width: 1.35em;
text-align: center;
}
#chat .toggle-button::after {
content: "\f0da"; /* http://fontawesome.io/icon/caret-right/ */
}
#chat .count::before {
color: #cfcfcf;
content: "\f002"; /* http://fontawesome.io/icon/search/ */
position: absolute;
right: 13px;
line-height: 45px;
}
#connect .extra-help::before {
content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */
}
#settings #play::before {
content: "\f028"; /* http://fontawesome.io/icon/volume-up/ */
margin-right: 9px;
}
#image-viewer .previous-image-btn::before {
content: "\f104"; /* http://fontawesome.io/icon/angle-left/ */
}
#image-viewer .next-image-btn::before {
content: "\f105"; /* http://fontawesome.io/icon/angle-right/ */
}
#image-viewer .open-btn::before {
content: "\f35d"; /* https://fontawesome.com/icons/external-link-alt?style=solid */
}
/* End icons */
#app {
height: 100%;
width: 100%;
}
#viewport {
display: flex;
height: 100%;
}
#form button,
.header button,
.reveal-password span {
transition: opacity 0.2s;
}
#form button:hover,
.header button:hover,
.reveal-password span:hover {
opacity: 0.6;
}
#viewport .lt,
#viewport .rt,
#chat button.mentions,
#chat button.search,
#chat button.menu,
#chat button.close {
color: #607992;
display: flex;
font-size: 14px;
line-height: 1;
height: 36px;
width: 36px;
flex-shrink: 0;
}
#viewport .lt::before,
#viewport .rt::before,
#chat button.mentions::before,
#chat button.search::before,
#chat button.menu::before,
#chat button.close::before {
width: 36px;
line-height: 36px; /* Fix alignment in Microsoft Edge */
}
/* Channel list button stays fixed when scrolling... */
#viewport .lt {
position: fixed;
}
/* ... Except on chat windows, relative to include the notification dot */
#viewport #chat .lt {
position: relative;
}
/* Notification dot on the top right corner of the menu icon */
#viewport .lt::after {
content: "";
position: absolute;
top: 9px;
right: 7px;
background-color: #e74c3c;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--window-bg-color);
opacity: 0;
transition: opacity 0.2s;
background-clip: padding-box; /* Fix border-radius bleeding color */
}
#viewport.notified .lt::after {
opacity: 1;
}
#viewport.userlist-open #chat .userlist {
display: flex;
}
#sidebar {
display: none;
flex-direction: column;
width: 220px;
max-height: 100%;
will-change: transform;
color: #b7c5d1; /* same as .channel-list-item color */
}
#viewport.menu-open #sidebar {
display: flex;
}
#sidebar .scrollable-area {
overflow-x: auto;
flex-grow: 1;
touch-action: pan-y;
scrollbar-width: thin;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
#sidebar .logo-container {
text-align: center;
}
#sidebar .logo,
#sidebar .logo-inverted {
height: 45px;
}
#sidebar .logo {
display: none;
}
.channel-list-item,
#sidebar .empty {
font-size: 14px;
}
.channel-list-item {
display: flex;
padding: 8px 14px;
position: relative;
cursor: pointer;
}
/* Channels/queries must be white on hover and active */
#footer button:hover,
#footer button.active,
.channel-list-item:hover,
.channel-list-item.active {
color: #fff;
}
/* All lobbies/channels/queries and footer buttons must have a half-transparent
background on hover (unless active) */
.channel-list-item:hover,
#footer button:hover {
background-color: rgb(48 62 74 / 50%); /* #303e4a x 50% alpha */
}
/* Darker background and default cursor for active channels */
#footer button.active,
.channel-list-item.active {
background-color: #303e4a;
cursor: default;
}
/* Remove background on hovered/active channel when sorting/drag-and-dropping */
.ui-sortable-ghost,
.ui-sortable-dragging .channel-list-item,
.ui-sortable-dragging,
.ui-sortable-dragging:hover,
.ui-sortable-dragging.active,
.ui-sortable-dragging-touch-cue .channel-list-item,
.ui-sortable-dragging-touch-cue,
.ui-sortable-dragging-touch-cue:hover,
.ui-sortable-dragging-touch-cue.active {
background: transparent;
}
.ui-sortable-ghost::after,
.ui-sortable-dragging-touch-cue:not(.ui-sortable-dragging)::after {
background: var(--body-bg-color);
border: 1px dashed #99a2b4;
border-radius: 6px;
content: " ";
display: block;
position: absolute;
left: 10px;
top: 0;
bottom: 0;
right: 10px;
}
.ui-sortable-dragging-touch-cue:not(.ui-sortable-ghost)::after {
background: transparent;
}
#sidebar .network {
position: relative;
margin-bottom: 20px;
touch-action: pan-y;
}
#sidebar .empty {
flex-grow: 1;
line-height: 1.6;
padding: 40px 20px;
text-align: center;
}
.channel-list-item[data-type="lobby"] {
color: #84ce88;
font-size: 15px;
font-weight: bold;
padding-left: 0;
}
.channel-list-item .lobby-wrap {
display: flex;
flex-grow: 1;
overflow: hidden;
}
.channel-list-item[data-type="lobby"]:hover,
.channel-list-item[data-type="lobby"].active {
color: #c0f8c3;
}
.channel-list-item .not-connected-tooltip,
.channel-list-item .not-secure-tooltip,
.channel-list-item .parted-channel-tooltip {
margin: 0 8px;
}
.channel-list-item.not-secure {
color: #f39c12;
}
.channel-list-item.not-secure:hover,
.channel-list-item.not-secure.active {
color: #f8c572;
}
.channel-list-item.not-connected,
.channel-list-item.parted-channel {
color: #e74c3c;
}
.channel-list-item.not-connected:hover,
.channel-list-item.not-connected.active,
.channel-list-item.parted-channel:hover,
.channel-list-item.parted-channel.active {
color: #f1978e;
}
.channel-list-item.is-muted {
opacity: 0.5;
}
.channel-list-item::before {
width: 14px;
margin-right: 12px;
line-height: 18px;
}
/* the status dot is overlaid on the channel speech bubble icon */
.channel-list-item[data-type="query"] > .status-icon {
position: absolute;
left: 23px;
top: 12px;
width: auto;
height: auto;
margin-left: 0;
z-index: 1;
}
.channel-list-item[data-type="query"] > .status-icon span::after {
width: 6px;
height: 6px;
box-shadow: 0 0 0 1.5px var(--body-bg-color);
}
.channel-list-item .name {
position: relative;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
margin-right: 5px;
}
.header .topic,
.channel-list-item .name {
mask-image: linear-gradient(to left, transparent, black 20px);
}
.channel-list-item .badge,
#sidebar .add-channel-tooltip,
.channel-list-item .close-tooltip {
flex-shrink: 0;
line-height: 1;
}
.channel-list-item .badge {
background: rgb(255 255 255 / 6%);
border-radius: 3px;
color: #afb6c0;
font-size: 10px;
padding: 4px 6px;
transition: background-color 0.2s, color 0.2s;
}
.channel-list-item .badge:empty {
display: none;
}
.channel-list-item .badge.highlight {
background: #fff;
color: #49505a;
}
.channel-list-item .close {
width: 18px;
height: 18px;
display: none;
transition: opacity 0.2s, background-color 0.2s;
}
.channel-list-item .close::before {
font-size: 20px;
font-weight: normal;
display: inline-block;
line-height: 16px;
text-align: center;
content: "×";
color: #fff;
}
.channel-list-item.active .close {
opacity: 0.4;
display: unset;
}
.channel-list-item.active .close:hover {
opacity: 1;
}
.channel-list-item[data-type="lobby"] .add-channel {
border-radius: 3px;
width: 18px;
height: 18px;
opacity: 0.4;
transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
}
.channel-list-item[data-type="lobby"] .add-channel::before {
font-size: 20px;
font-weight: normal;
display: inline-block;
line-height: 16px;
text-align: center;
content: "+";
color: #fff;
}
.channel-list-item[data-type="lobby"] .add-channel:hover {
opacity: 1;
}
.channel-list-item[data-type="lobby"] .add-channel.opened {
/* translateZ(0) enables hardware acceleration, this is to avoid jittering when animating */
transform: rotate(45deg) translateZ(0);
}
#sidebar .network .collapse-network {
width: 40px;
opacity: 0.4;
padding-left: 11px;
transition: opacity 0.2s;
flex-shrink: 0;
}
#sidebar .network .collapse-network-icon {
display: block;
width: 20px;
height: 20px;
transition: transform 0.2s;
}
#sidebar .network.collapsed .collapse-network-icon {
transform: rotate(-90deg);
}
#sidebar .network .collapse-network-icon::before {
content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */
color: #fff;
}
#sidebar .collapse-network:hover {
opacity: 1;
}
#footer {
height: 45px;
font-size: 14px;
flex-shrink: 0;
display: flex;
justify-content: center;
}
#footer button {
color: #b7c5d1;
display: inline-block;
width: 45px;
height: 100%;
border-radius: 5px;
}
#footer .help.notified::after {
content: "\f021";
position: absolute;
bottom: 10px;
right: 7px;
padding: 2px;
font-size: 10px;
border-radius: 50%;
color: var(--link-color);
background: var(--body-bg-color);
}
.window li,
.window p,
.window label,
#settings .error {
font-size: 14px;
}
.input {
background-color: white;
border: 1px solid #cdd3da;
border-radius: 2px;
color: #222;
font-size: 14px;
margin: 2px 0;
margin-bottom: 10px;
padding: 0 10px;
transition: border-color 0.2s, box-shadow 0.2s;
width: 100%;
height: 35px;
line-height: 35px;
}
.input:disabled {
background-color: #ddd;
}
.input:not(:disabled):hover,
.input:not(:disabled):focus {
border-color: #84ce88;
}
textarea.input {
resize: vertical;
min-height: 35px;
padding: 6px 10px;
line-height: 1.5;
}
.window {
background: var(--window-bg-color);
display: flex;
flex-direction: column;
flex: 1 1 auto;
position: relative;
overflow-y: auto;
height: 100%;
scrollbar-width: thin;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
#loading,
#chat .chat-view {
/* flexbox does not seem to scroll without doing this */
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.window h1 {
font-size: 36px;
}
.window h2 {
border-bottom: 1px solid currentcolor;
color: var(--window-heading-color);
font-size: 22px;
margin: 30px 0 10px;
padding-bottom: 7px;
}
.window h2 small {
font-size: 16px;
line-height: 30px;
}
.window h3 {
color: var(--window-heading-color);
font-size: 18px;
margin: 20px 0 10px;
}
.header {
align-items: center;
line-height: 45px;
height: 45px;
padding: 0 6px;
display: flex;
flex-shrink: 0;
overflow: hidden;
}
#chat .header {
border-bottom: 1px solid #e7e7e7;
}
.header .title {
font-size: 15px;
padding-left: 6px;
flex-shrink: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topic-container {
position: relative;
flex-grow: 1;
padding-left: 10px;
}
.header .topic {
color: var(--body-color-muted);
margin-left: 8px;
word-break: break-all;
flex-grow: 1;
overflow: hidden;
font-size: 14px;
flex-shrink: 99999999;
min-width: 25px;
}
.header .topic.empty {
min-width: 0;
}
.header .topic-input {
color: inherit;
background: transparent;
border: 1px solid #cdd3da;
border-radius: 2px;
padding-right: 37px;
padding-left: 10px;
width: 100%;
height: 35px;
overflow: hidden;
font-size: 14px;
line-height: normal;
outline: none;
}
.topic-container .save-topic {
position: absolute;
top: 6px;
right: 0;
}
.topic-container .save-topic span {
font-size: 16px;
color: #607992;
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
appearance: none;
}
.topic-container .save-topic span:hover {
opacity: 0.6;
}
#chat {
overflow: hidden;
flex: 1 0 auto;
position: relative;
}
#chat .chat-view {
display: flex;
flex-direction: column;
}
#chat .msg[data-type="condensed"] {
flex-wrap: wrap;
}
#chat .msg[data-type="condensed"] .content {
flex: 1;
}
/* Ensures expanded status messages always take up the full width */
#chat .msg[data-type="condensed"] .msg {
flex-basis: 100%;
}
#chat .condensed-summary .content {
display: block;
cursor: pointer;
user-select: none;
}
#chat .condensed-summary {
display: flex;
}
#chat .condensed-summary .content:hover {
text-decoration: underline;
}
#chat .msg.closed[data-type="condensed"] .msg {
display: none;
}
#chat .condensed-summary .time {
visibility: hidden;
}
#form,
.messages .msg,
.userlist {
font-size: 14px;
line-height: 1.4;
}
#chat .chat-content {
display: flex;
flex-direction: row-reverse;
flex-grow: 1;
overflow: hidden;
position: relative;
}
#chat .chat {
overflow: auto;
overflow-x: hidden;
display: flex;
flex-grow: 1;
flex-direction: column;
scrollbar-width: thin;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
outline: none;
}
#chat .userlist {
border-left: 1px solid #e7e7e7;
width: 180px;
display: none;
flex-direction: column;
flex-shrink: 0;
touch-action: pan-y;
}
/**
* Toggled via JavaScript
*/
#sidebar .join-form {
padding: 0 18px 8px;
}
#sidebar .join-form .input {
display: block;
margin: 5px auto;
}
#sidebar .join-form .btn {
display: block;
width: 100%;
margin: auto;
}
#chat .show-more {
padding: 10px;
padding-top: 15px;
padding-bottom: 0;
width: 100%;
}
#chat .show-more .btn {
width: 100%;
margin: 0;
}
.scroll-down {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 2;
pointer-events: none;
opacity: 0;
transform: translateY(16px);
transition: transform 0.2s, opacity 0.2s;
cursor: pointer;
}
.scroll-down:focus:not(:focus-visible)::before,
.scroll-down:focus:not(:focus-visible)::after {
display: none;
}
.scroll-down-shown {
opacity: 1;
transform: none;
pointer-events: auto;
}
.scroll-down-arrow {
width: 36px;
height: 36px;
line-height: 34px;
border-radius: 50%;
background: var(--window-bg-color);
color: var(--button-color);
border: 2px solid var(--button-color);
text-align: center;
transition: background 0.2s, color 0.2s;
box-shadow: 0 6px 10px 0 rgb(0 0 0 / 15%);
}
.scroll-down:hover .scroll-down-arrow {
background: var(--button-color);
color: var(--button-text-color-hover);
}
.scroll-down-arrow::after {
content: "\f107"; /* https://fontawesome.com/icons/angle-down?style=solid */
}
.userlist-open .chat-view[data-type="channel"] .scroll-down {
right: 196px;
}
#chat .messages {
padding: 10px 0;
touch-action: pan-y;
}
#chat .chat-view:not([data-type="special"]) .messages {
margin-top: auto;
}
#chat .msg {
word-wrap: break-word;
word-break: break-word; /* Webkit-specific */
display: flex;
align-items: flex-start;
position: relative;
}
#chat .msg:has(.reply-context) {
align-items: flex-end;
}
#chat .unread-marker {
position: relative;
text-align: center;
margin: 0 10px;
z-index: 0;
font-weight: bold;
font-size: 12px;
}
#chat .unread-marker::before {
position: absolute;
z-index: -1;
content: "";
left: 0;
right: 0;
top: 50%;
border-top: 1px solid var(--unread-marker-color);
}
#chat .unread-marker-text::before {
content: "New messages";
background-color: var(--window-bg-color);
color: var(--unread-marker-color);
padding: 0 10px;
}
#chat .date-marker {
position: relative;
text-align: center;
margin: 0 10px;
z-index: 0;
font-weight: bold;
font-size: 12px;
}
#chat .date-marker::before {
position: absolute;
z-index: -1;
content: "";
left: 0;
right: 0;
top: 50%;
border-top: 1px solid var(--date-marker-color);
}
#chat .date-marker-text::before {
content: attr(aria-label);
background-color: var(--window-bg-color);
color: var(--date-marker-color);
padding: 0 10px;
}
#chat .time,
#chat .from,
#chat .content {
padding: 3px 0;
flex: 0 0 auto;
}
#chat .time {
color: var(--body-color-muted);
padding-left: 24px;
width: 55px;
font-variant-numeric: tabular-nums;
box-sizing: content-box; /* highlights have a border-left */
}
#chat.time-12h .time,
#chat.time-seconds .time {
width: 75px;
}
#chat.time-seconds.time-12h .time {
width: 90px;
}
#chat .from {
padding-right: 10px;
text-align: right;
width: 134px;
overflow: hidden;
white-space: nowrap;
position: relative;
}
#chat .content {
flex: 1 1 auto;
min-width: 0;
padding-left: 10px;
padding-right: 24px;
border-left: 1px solid #f6f6f6;
overflow: hidden; /* Prevents Zalgo text to expand beyond messages */
text-align: left; /* so RTL text will still be aligned left, not right */
}
#chat .msg[data-type="unhandled"] .from {
color: var(--body-color-muted);
}
#chat .chat-view[data-type="special"] table th {
word-break: normal;
}
/* Parsed nicks and channels */
#chat .user,
.inline-channel {
cursor: pointer;
}
.chat .user:hover,
.inline-channel:hover {
text-decoration: underline;
}
/* Nicknames */
.user {
color: #50a656;
}
.user.color-1 { color: #107ead; }
.user.color-2 { color: #a86500; }
.user.color-3 { color: #008a3c; }
.user.color-4 { color: #e00096; }
.user.color-5 { color: #f0000c; }
.user.color-6 { color: #000094; }
.user.color-7 { color: #006441; }
.user.color-8 { color: #00566e; }
.user.color-9 { color: #e6006b; }
.user.color-10 { color: #0d8766; }
.user.color-11 { color: #006b3b; }
.user.color-12 { color: #00857e; }
.user.color-13 { color: #00465b; }
.user.color-14 { color: #eb005a; }
.user.color-15 { color: #e62600; }
.user.color-16 { color: #0f8546; }
.user.color-17 { color: #e60067; }
.user.color-18 { color: #eb002b; }
.user.color-19 { color: #eb003f; }
.user.color-20 { color: #007a56; }
.user.color-21 { color: #095092; }
.user.color-22 { color: #000bde; }
.user.color-23 { color: #008577; }
.user.color-24 { color: #00367d; }
.user.color-25 { color: #007e9e; }
.user.color-26 { color: #006119; }
.user.color-27 { color: #007ea8; }
.user.color-28 { color: #3c8500; }
.user.color-29 { color: #e6007e; }
.user.color-30 { color: #c75300; }
.user.color-31 { color: #eb0400; }
.user.color-32 { color: #e60082; }
#chat .self .content {
color: var(--body-color-muted);
}
#chat .msg.channel_list_loading .text {
color: #999;
font-style: italic;
padding-left: 20px;
}
#chat .msg.channel_list_truncated .text {
color: #f00;
padding-left: 20px;
}
#chat table.channel-list,
#chat table.ban-list,
#chat table.invite-list,
#chat table.ignore-list {
margin: 5px 10px;
width: calc(100% - 30px);
}
#chat table.channel-list th,
#chat table.ban-list th,
#chat table.invite-list th,
#chat table.ignore-list th,
#chat table.channel-list td,
#chat table.ban-list td,
#chat table.invite-list td {
padding: 5px;
vertical-align: top;
border-bottom: #eee 1px solid;
}
#chat table.channel-list .channel {
width: 80px;
}
#chat table.channel-list .channel,
#chat table.channel-list .topic,
#chat table.ban-list .hostmask,
#chat table.ban-list .banned_by,
#chat table.ban-list .banned_at,
#chat table.ignore-list .hostmask,
#chat table.ignore-list .when {
text-align: left;
}
#chat table.channel-list .users {
text-align: center;
width: 50px;
}
#chat.hide-motd .msg[data-command="motd"] {
display: none !important;
}
#chat .msg[data-type="monospace_block"] .text {
background: #f6f6f6;
display: inline-block;
border-radius: 4px;
padding: 6px;
}
#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="nick"] .content,
#chat .msg[data-type="chghost"] .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: var(--body-color-muted);
}
#chat .msg[data-type="action"] .from,
#chat .msg[data-type="action"] .content,
#chat .msg[data-type="action"] .user {
color: #f39c12;
}
#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: #0074d9;
}
#chat .msg[data-type="notice"] .from .user::before {
content: "Notice: ";
}
#chat .msg[data-type="wallops"] .from .user::before {
content: "Wallops: ";
}
#chat .msg[data-type="error"] .from::before {
content: "\f06a"; /* https://fontawesome.com/icons/circle-exclamation?style=solid */
}
#chat .msg[data-type="error"],
#chat .msg[data-type="error"] .from {
color: #e74c3c;
}
#chat .msg[data-type="warn"] .from::before {
content: "\f071"; /* https://fontawesome.com/icons/triangle-exclamation?style=solid */
}
#chat .msg[data-type="warn"],
#chat .msg[data-type="warn"] .from {
color: #f39c12;
}
#chat .msg[data-type="note"] .from::before {
content: "\f05a"; /* https://fontawesome.com/icons/circle-info?style=solid */
}
#chat .msg[data-type="note"],
#chat .msg[data-type="note"] .from {
color: #3498db;
}
#chat .chat-view[data-type="channel"] .msg.highlight {
background-color: var(--highlight-bg-color);
border-left: 5px solid var(--highlight-border-color);
}
#chat .chat-view[data-type="channel"] .msg.highlight .time {
padding-left: 19px;
color: #696969;
}
#chat .chat-view[data-type="channel"] .msg.highlight .content {
border-left: 1px solid var(--highlight-bg-color);
}
/* Reply context — compact preview above message text, inside .content */
#chat .msg .reply-context {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.8em;
line-height: 1.4;
color: var(--body-color-muted);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
padding: 1px 6px;
margin-bottom: 1px;
border-radius: 3px;
cursor: pointer;
width: fit-content;
max-width: 100%;
}
#chat .msg .reply-context-icon::before {
content: "\f3e5"; /* fa-reply icon */
font: normal normal normal 10px/1 FontAwesome;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #b0b0b0;
}
#chat .msg .reply-context-icon {
flex-shrink: 0;
}
#chat .msg .reply-context:not(.disabled):hover {
background: rgb(0 0 0 / 4%);
color: var(--body-color);
}
#chat .msg .reply-context:not(.disabled):hover .reply-context-icon::before {
color: var(--body-color-muted);
}
#chat .msg .reply-context.disabled {
cursor: default;
opacity: 0.6;
overflow: visible;
}
#chat .msg .reply-context-nick {
font-weight: 700;
flex-shrink: 0;
}
#chat .msg .reply-context-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
#chat .msg .reply-context-text::before {
content: "— ";
}
#chat .msg .reply-context-unknown {
font-style: italic;
}
/* Message actions toolbar — floating overlay, top-right of message */
#chat .msg .msg-actions {
display: flex;
gap: 1px;
position: absolute;
top: -8px;
right: 6px;
background: var(--window-bg-color);
border: 1px solid #d0d0d0;
border-radius: 4px;
padding: 1px;
opacity: 0;
pointer-events: none;
z-index: 1;
box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
transition: opacity 0.1s;
}
#chat .msg:hover .msg-actions,
#chat .msg .msg-actions:focus-within {
opacity: 1;
pointer-events: auto;
}
#chat .msg .msg-actions button {
background: none;
border: none;
border-radius: 3px;
color: var(--body-color-muted);
cursor: pointer;
font-size: 14px;
width: 26px;
height: 24px;
padding: 0;
line-height: 1;
}
#chat .msg .msg-actions button:hover,
#chat .msg .msg-actions button:focus-visible {
background: rgb(0 0 0 / 6%);
color: var(--body-color);
}
#chat .msg .msg-actions button:focus-visible {
outline: 2px solid var(--link-color);
outline-offset: -1px;
}
#chat .msg .msg-action-reply::before {
content: "\f3e5"; /* fa-reply */
}
/* When a reply-context is present, anchor the toolbar to the bottom row
(the actual message) instead of the reply preview above it. */
#chat .msg:has(.reply-context) .msg-actions {
top: auto;
bottom: 0;
}
/* Reply bar above message input */
#form .reply-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 10px;
background: #f0f0f0;
border-bottom: 1px solid #e7e7e7;
font-size: 0.85em;
color: var(--body-color-muted);
width: 100%;
}
#form .reply-bar-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#form .reply-bar-close {
background: none;
border: none;
color: var(--body-color-muted);
cursor: pointer;
font-size: 18px;
line-height: 1;
padding: 0 4px;
flex-shrink: 0;
}
#form .reply-bar-close:hover {
color: var(--body-color);
}
#chat .preview-size {
margin-left: 5px;
user-select: none;
}
#chat .toggle-content.opened .more-caret, /* Expand/Collapse link previews */
#chat .toggle-button.opened, /* Thumbnail toggle */
#chat .msg:not(.closed)[data-type="condensed"] .toggle-button { /* Expanded status message toggle */
transform: rotate(90deg);
}
#chat .preview {
display: flex; /* Fix odd margin added by inline-flex in .toggle-content */
}
#chat .toggle-content {
background: #f6f6f6;
border-radius: 5px;
max-width: 100%;
margin: 0;
margin-top: 6px;
overflow: hidden;
box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
display: inline-flex !important;
align-items: flex-start;
white-space: normal;
}
/* This applies to images of preview-type-image and thumbnails of preview-type-link */
#chat .toggle-content img {
max-width: 100%;
max-height: 128px;
display: block;
cursor: zoom-in;
}
#chat .toggle-content pre.prefetch-error {
padding: 0;
margin: 0;
color: inherit;
background-color: transparent;
}
#chat .toggle-content .prefetch-error {
display: none;
}
#chat .toggle-content.opened .prefetch-error {
display: inline;
}
/* This applies to thumbnails of preview-type-link only */
#chat .toggle-content .thumb {
max-height: 54px;
max-width: 96px;
}
#chat .toggle-type-error,
#chat .toggle-content .toggle-text {
padding: 8px 10px;
}
#chat .toggle-content .toggle-text {
white-space: nowrap;
overflow: hidden;
text-align: initial;
}
#chat .toggle-content.opened .toggle-text {
white-space: normal;
}
#chat .toggle-content .head {
display: flex;
align-items: flex-start;
font-weight: bold;
}
#chat .toggle-type-error,
#chat .toggle-text .body {
color: #717171;
}
#chat .toggle-text a {
color: inherit;
}
#chat .toggle-text .overflowable {
text-overflow: ellipsis;
overflow: hidden;
flex-grow: 1;
}
#chat .toggle-content .more {
color: var(--link-color);
font-weight: normal;
margin-left: 10px;
flex-shrink: 0;
}
#chat .toggle-content .more:hover {
text-decoration: underline;
}
#chat .toggle-content .more::after {
content: " " attr(aria-label);
}
#chat .toggle-content .more-caret {
display: inline-block;
transition: transform 0.2s;
}
#chat .toggle-content .more-caret::before {
content: "\f0da"; /* https://fontawesome.com/icons/caret-right?style=solid */
}
#chat audio {
width: 600px;
max-width: 100%;
}
#chat .toggle-type-video {
max-width: 640px;
}
#chat video {
max-width: 100%;
max-height: 240px;
}
/* Do not display an empty div when there are no previews. Useful for example in
part/quit messages where we don't load previews (adds a blank line otherwise) */
#chat .preview:empty {
display: none;
}
#chat .userlist .count {
background: #fafafa;
height: 45px;
flex-shrink: 0;
position: relative;
}
#chat .userlist .search {
color: var(--body-color);
appearance: none;
border: 0;
background: none;
font: inherit;
outline: 0;
padding: 13px;
padding-right: 30px;
width: 100%;
}
#chat .userlist .names {
flex-grow: 1;
overflow: auto;
overflow-x: hidden;
padding-bottom: 10px;
width: 100%;
touch-action: pan-y;
scrollbar-width: thin;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* Status icon in user list */
#chat .names .user {
display: flex;
align-items: center;
line-height: 1.6;
padding: 0 16px;
white-space: nowrap;
}
#chat .names .status-icon {
width: auto;
height: auto;
margin-left: auto;
margin-right: 0;
}
#chat .user-mode {
margin-bottom: 15px;
}
#chat .user-mode::before {
background: var(--window-bg-color);
color: var(--body-color-muted);
display: block;
font-size: 0.85em;
line-height: 1.6;
padding: 5px 16px;
position: sticky;
top: 0;
z-index: 1;
}
#chat .user-mode.owner::before {
content: "Owners";
}
#chat .user-mode.admin::before {
content: "Administrators";
}
#chat .user-mode.op::before {
content: "Operators";
}
#chat .user-mode.half-op::before {
content: "Half-Operators";
}
#chat .user-mode.voice::before {
content: "Voiced";
}
#chat .user-mode.normal::before {
content: "Users";
}
#chat .user-mode-search::before {
content: "Search Results";
}
.user-bot-indicator {
color: var(--body-color-muted);
font-size: 0.85em;
margin-left: 2px;
}
#loading {
display: flex;
font-size: 14px;
height: 100%;
}
#loading .window {
height: initial;
display: flex;
flex-direction: column;
}
#loading p {
margin-top: 10px;
}
#loading-slow,
#loading-reload {
visibility: hidden;
}
#loading summary {
outline: none;
cursor: pointer;
}
#loading pre {
text-align: left;
white-space: normal;
}
#sign-in .container,
#loading-reload-container,
#loading-status-container {
flex: 1 0 auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#loading-reload-container {
flex-grow: 0;
}
#loading .logo-inverted,
.window .logo-inverted {
display: none; /* In dark themes, inverted logo must be used instead */
}
#sign-in label {
display: block;
margin-top: 10px;
width: 100%;
}
#sign-in .btn {
margin-top: 25px;
}
#sign-in .error {
color: #e74c3c;
margin-top: 1em;
width: 100%;
}
#connect .connect-row {
display: flex;
}
#connect .connect-row > .input,
#connect .connect-row > .input-wrap {
flex-grow: 1;
}
#connect label {
width: 25%;
flex-shrink: 0;
margin-top: 11px;
}
#connect .tls {
width: 100%;
display: block;
margin-top: 6px;
}
#connect .tls input,
#connect input[name="proxyEnabled"] {
margin: 3px 10px 0 0;
}
#connect\:host,
#connect\:proxyHost {
width: 70%;
}
#connect\:port,
#connect\:proxyPort {
width: 25%;
}
#connect\:portseparator,
#connect\:proxyPortSeparator {
width: 5%;
text-align: center;
display: inline-block;
}
#connect .btn {
margin-top: 15px;
width: 100%;
}
#connect .extra-help {
cursor: help;
}
.password-container {
position: relative;
}
.password-container input {
padding-right: 37px;
}
#sign-in .password-container {
width: 100%;
}
#sign-in .password-container .reveal-password {
top: 31px;
}
.password-container .reveal-password {
position: absolute;
top: 2px;
right: 0;
appearance: none;
}
.password-container .reveal-password span {
font-size: 16px;
color: #607992;
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.password-container .reveal-password span::before {
content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
}
.topic-container .save-topic span::before {
content: "\f00c"; /* https://fontawesome.com/icons/check?style=solid */
}
.password-container .reveal-password-visible span::before {
content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */
color: #ff4136;
}
#help .help-version-title {
display: flex;
justify-content: space-between;
}
#help .help-item {
display: table-row;
font-size: 14px;
}
#help .help-item .subject,
#help .help-item .description {
display: table-cell;
padding-bottom: 15px;
}
#help .help-item .subject {
white-space: nowrap;
padding-right: 15px;
}
#help .help-item .subject.gesture {
font-weight: bold;
}
#help .help-item .description p {
margin-bottom: 0;
}
.whois {
display: grid;
grid-template-columns: max-content auto;
margin: 0;
}
.whois dt {
grid-column-start: 1;
margin-right: 20px;
}
.whois dd {
grid-column-start: 2;
}
.changelog-text {
line-height: 1.5;
}
.changelog-text p {
margin-bottom: 16px;
}
.window#changelog h3 {
font-size: 20px;
border-bottom: 1px solid currentcolor;
color: var(--window-heading-color);
margin: 30px 0 10px;
padding-bottom: 7px;
}
.window#chat-container {
/*
Chat has its own scrollbar, so remove the one on parent
This caused a performance issue in Chrome
*/
overflow: hidden;
}
#version-checker {
display: flex;
align-items: center;
padding: 10px;
margin-bottom: 16px;
border-radius: 2px;
transition: color 0.2s, background-color 0.2s;
}
#version-checker p,
#version-checker button {
margin-bottom: 0;
}
#version-checker p {
flex: 1;
padding-top: 6px;
padding-bottom: 6px;
}
#version-checker::before {
margin-left: 6px;
margin-right: 12px;
font-size: 1.2em;
}
#version-checker.loading {
background-color: #d9edf7;
color: #31708f;
}
#version-checker.loading::before {
content: "\f253"; /* https://fontawesome.com/icons/hourglass-end?style=solid */
}
#version-checker.new-version,
#version-checker.new-packages {
color: #8a6d3b;
background-color: #fcf8e3;
}
#version-checker.new-version::before,
#version-checker.new-packages::before {
content: "\f164"; /* https://fontawesome.com/icons/thumbs-up?style=solid */
}
#version-checker.error {
color: #a94442;
background-color: #f2dede;
}
#version-checker.error::before {
content: "\f06a"; /* http://fontawesome.io/icon/exclamation-circle/ */
}
#version-checker.up-to-date {
background-color: #dff0d8;
color: #3c763d;
}
#version-checker.up-to-date::before {
content: "\f00c"; /* http://fontawesome.io/icon/check/ */
}
#upload-progressbar {
background: var(--upload-progressbar-color);
box-shadow: 0 0 10px var(--upload-progressbar-color);
width: 0%;
height: 2px;
visibility: hidden;
position: absolute;
top: -1px; /* put it on top of #form's border */
left: 0;
}
#upload-progressbar.upload-progressbar-visible {
visibility: visible;
transition: 0.3s width ease-in-out;
}
#form {
flex: 0 0 auto;
border: 0;
border-top: 1px solid #e7e7e7;
border-radius: 0;
margin: 0;
padding: 6px 6px 2px;
background: var(--form-bg-color);
display: flex;
align-items: flex-end;
flex-wrap: wrap;
position: relative;
}
#user-visible-error {
font-size: 14px;
line-height: 1.5;
font-weight: 600;
padding: 10px;
word-spacing: 3px;
text-transform: uppercase;
background: #e74c3c;
color: #fff;
text-align: center;
cursor: pointer;
}
#form #nick {
background: #f6f6f6;
color: #666;
font-size: 13px;
margin: 4px;
line-height: 24px;
padding: 0 8px;
border-radius: 2px;
display: none;
}
.public #form #nick {
display: block;
}
#form #input {
background: transparent;
border: none;
font: inherit;
min-height: 19px; /* Required when computing input height at char deletion */
height: 19px;
max-height: 95px; /* min-height/height x number of lines maximum */
line-height: 19px; /* should match height */
outline: none;
margin: 5px;
padding: 0;
resize: none;
flex: 1 0 auto;
align-self: center;
touch-action: pan-y;
}
#form #upload-input {
display: none;
}
#form #upload,
#form #submit {
color: #607992;
font-size: 14px;
height: 32px;
width: 32px;
flex: 0 0 auto;
}
#form #upload[disabled],
#form #submit[disabled] {
opacity: 0.5;
}
#mentions-popup-container,
#context-menu-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: transparent;
}
#context-menu-container.passthrough {
pointer-events: none;
}
#context-menu-container.passthrough > * {
pointer-events: auto;
}
.mentions-popup,
#context-menu,
.textcomplete-menu {
position: absolute;
list-style: none;
margin: 0;
padding: 0 6px;
min-width: 180px;
font-size: 14px;
background-color: #fff;
box-shadow: 0 3px 12px rgb(0 0 0 / 15%);
border: 1px solid rgb(0 0 0 / 15%);
border-radius: 5px;
outline: 0;
}
.context-menu-divider {
height: 1px;
margin: 6px 0;
background-color: rgb(0 0 0 / 10%);
}
.context-menu-item,
.textcomplete-item {
cursor: pointer;
display: block;
padding: 4px 8px;
color: #333;
margin-top: 6px;
margin-bottom: 6px;
line-height: 1.4;
border-radius: 3px;
white-space: nowrap;
}
.context-menu-item.active,
.textcomplete-item:focus,
.textcomplete-item:hover,
.textcomplete-menu .active,
#chat .userlist .user.active {
background-color: rgb(0 0 0 / 10%);
}
.context-menu-item::before,
.textcomplete-item::before {
width: 20px;
display: inline-block;
}
.textcomplete-item a {
color: #333;
}
.textcomplete-item a:hover {
text-decoration: none;
}
.emoji {
font-size: 1.4em;
vertical-align: text-top;
line-height: 1;
}
.textcomplete-item .emoji {
width: 32px;
text-align: center;
}
.textcomplete-item .irc-bg {
display: block;
}
/**
* IRC Message Styling
* Colours are credit to http://clrs.cc/
*/
.irc-fg0 { color: #fff; }
.irc-fg1 { color: #000; }
.irc-fg2 { color: #001f3f; }
.irc-fg3 { color: #2ecc40; }
.irc-fg4 { color: #ff4136; }
.irc-fg5 { color: #85144b; }
.irc-fg6 { color: #b10dc9; }
.irc-fg7 { color: #ff851b; }
.irc-fg8 { color: #ffdc00; }
.irc-fg9 { color: #01ff70; }
.irc-fg10 { color: #39cccc; }
.irc-fg11 { color: #7fdbff; }
.irc-fg12 { color: #0074d9; }
.irc-fg13 { color: #f012be; }
.irc-fg14 { color: #aaa; }
.irc-fg15 { color: #ddd; }
.irc-bg0 { background: #fff; }
.irc-bg1 { background: #000; }
.irc-bg2 { background: #001f3f; }
.irc-bg3 { background: #2ecc40; }
.irc-bg4 { background: #ff4136; }
.irc-bg5 { background: #85144b; }
.irc-bg6 { background: #b10dc9; }
.irc-bg7 { background: #ff851b; }
.irc-bg8 { background: #ffdc00; }
.irc-bg9 { background: #01ff70; }
.irc-bg10 { background: #39cccc; }
.irc-bg11 { background: #7fdbff; }
.irc-bg12 { background: #0074d9; }
.irc-bg13 { background: #f012be; }
.irc-bg14 { background: #aaa; }
.irc-bg15 { background: #ddd; }
/* https://modern.ircdocs.horse/formatting.html#colors-16-98 */
.irc-fg16 { color: #470000; }
.irc-fg17 { color: #472100; }
.irc-fg18 { color: #474700; }
.irc-fg19 { color: #324700; }
.irc-fg20 { color: #004700; }
.irc-fg21 { color: #00472c; }
.irc-fg22 { color: #004747; }
.irc-fg23 { color: #002747; }
.irc-fg24 { color: #000047; }
.irc-fg25 { color: #2e0047; }
.irc-fg26 { color: #470047; }
.irc-fg27 { color: #47002a; }
.irc-fg28 { color: #740000; }
.irc-fg29 { color: #743a00; }
.irc-fg30 { color: #747400; }
.irc-fg31 { color: #517400; }
.irc-fg32 { color: #007400; }
.irc-fg33 { color: #007449; }
.irc-fg34 { color: #007474; }
.irc-fg35 { color: #004074; }
.irc-fg36 { color: #000074; }
.irc-fg37 { color: #4b0074; }
.irc-fg38 { color: #740074; }
.irc-fg39 { color: #740045; }
.irc-fg40 { color: #b50000; }
.irc-fg41 { color: #b56300; }
.irc-fg42 { color: #b5b500; }
.irc-fg43 { color: #7db500; }
.irc-fg44 { color: #00b500; }
.irc-fg45 { color: #00b571; }
.irc-fg46 { color: #00b5b5; }
.irc-fg47 { color: #0063b5; }
.irc-fg48 { color: #0000b5; }
.irc-fg49 { color: #7500b5; }
.irc-fg50 { color: #b500b5; }
.irc-fg51 { color: #b5006b; }
.irc-fg52 { color: #f00; }
.irc-fg53 { color: #ff8c00; }
.irc-fg54 { color: #ff0; }
.irc-fg55 { color: #b2ff00; }
.irc-fg56 { color: #0f0; }
.irc-fg57 { color: #00ffa0; }
.irc-fg58 { color: #0ff; }
.irc-fg59 { color: #008cff; }
.irc-fg60 { color: #00f; }
.irc-fg61 { color: #a500ff; }
.irc-fg62 { color: #f0f; }
.irc-fg63 { color: #ff0098; }
.irc-fg64 { color: #ff5959; }
.irc-fg65 { color: #ffb459; }
.irc-fg66 { color: #ffff71; }
.irc-fg67 { color: #cfff60; }
.irc-fg68 { color: #6fff6f; }
.irc-fg69 { color: #65ffc9; }
.irc-fg70 { color: #6dffff; }
.irc-fg71 { color: #59b4ff; }
.irc-fg72 { color: #5959ff; }
.irc-fg73 { color: #c459ff; }
.irc-fg74 { color: #f6f; }
.irc-fg75 { color: #ff59bc; }
.irc-fg76 { color: #ff9c9c; }
.irc-fg77 { color: #ffd39c; }
.irc-fg78 { color: #ffff9c; }
.irc-fg79 { color: #e2ff9c; }
.irc-fg80 { color: #9cff9c; }
.irc-fg81 { color: #9cffdb; }
.irc-fg82 { color: #9cffff; }
.irc-fg83 { color: #9cd3ff; }
.irc-fg84 { color: #9c9cff; }
.irc-fg85 { color: #dc9cff; }
.irc-fg86 { color: #ff9cff; }
.irc-fg87 { color: #ff94d3; }
.irc-fg88 { color: #000; }
.irc-fg89 { color: #131313; }
.irc-fg90 { color: #282828; }
.irc-fg91 { color: #363636; }
.irc-fg92 { color: #4d4d4d; }
.irc-fg93 { color: #656565; }
.irc-fg94 { color: #818181; }
.irc-fg95 { color: #9f9f9f; }
.irc-fg96 { color: #bcbcbc; }
.irc-fg97 { color: #e2e2e2; }
.irc-fg98 { color: #fff; }
.irc-bg16 { background-color: #470000; }
.irc-bg17 { background-color: #472100; }
.irc-bg18 { background-color: #474700; }
.irc-bg19 { background-color: #324700; }
.irc-bg20 { background-color: #004700; }
.irc-bg21 { background-color: #00472c; }
.irc-bg22 { background-color: #004747; }
.irc-bg23 { background-color: #002747; }
.irc-bg24 { background-color: #000047; }
.irc-bg25 { background-color: #2e0047; }
.irc-bg26 { background-color: #470047; }
.irc-bg27 { background-color: #47002a; }
.irc-bg28 { background-color: #740000; }
.irc-bg29 { background-color: #743a00; }
.irc-bg30 { background-color: #747400; }
.irc-bg31 { background-color: #517400; }
.irc-bg32 { background-color: #007400; }
.irc-bg33 { background-color: #007449; }
.irc-bg34 { background-color: #007474; }
.irc-bg35 { background-color: #004074; }
.irc-bg36 { background-color: #000074; }
.irc-bg37 { background-color: #4b0074; }
.irc-bg38 { background-color: #740074; }
.irc-bg39 { background-color: #740045; }
.irc-bg40 { background-color: #b50000; }
.irc-bg41 { background-color: #b56300; }
.irc-bg42 { background-color: #b5b500; }
.irc-bg43 { background-color: #7db500; }
.irc-bg44 { background-color: #00b500; }
.irc-bg45 { background-color: #00b571; }
.irc-bg46 { background-color: #00b5b5; }
.irc-bg47 { background-color: #0063b5; }
.irc-bg48 { background-color: #0000b5; }
.irc-bg49 { background-color: #7500b5; }
.irc-bg50 { background-color: #b500b5; }
.irc-bg51 { background-color: #b5006b; }
.irc-bg52 { background-color: #f00; }
.irc-bg53 { background-color: #ff8c00; }
.irc-bg54 { background-color: #ff0; }
.irc-bg55 { background-color: #b2ff00; }
.irc-bg56 { background-color: #0f0; }
.irc-bg57 { background-color: #00ffa0; }
.irc-bg58 { background-color: #0ff; }
.irc-bg59 { background-color: #008cff; }
.irc-bg60 { background-color: #00f; }
.irc-bg61 { background-color: #a500ff; }
.irc-bg62 { background-color: #f0f; }
.irc-bg63 { background-color: #ff0098; }
.irc-bg64 { background-color: #ff5959; }
.irc-bg65 { background-color: #ffb459; }
.irc-bg66 { background-color: #ffff71; }
.irc-bg67 { background-color: #cfff60; }
.irc-bg68 { background-color: #6fff6f; }
.irc-bg69 { background-color: #65ffc9; }
.irc-bg70 { background-color: #6dffff; }
.irc-bg71 { background-color: #59b4ff; }
.irc-bg72 { background-color: #5959ff; }
.irc-bg73 { background-color: #c459ff; }
.irc-bg74 { background-color: #f6f; }
.irc-bg75 { background-color: #ff59bc; }
.irc-bg76 { background-color: #ff9c9c; }
.irc-bg77 { background-color: #ffd39c; }
.irc-bg78 { background-color: #ffff9c; }
.irc-bg79 { background-color: #e2ff9c; }
.irc-bg80 { background-color: #9cff9c; }
.irc-bg81 { background-color: #9cffdb; }
.irc-bg82 { background-color: #9cffff; }
.irc-bg83 { background-color: #9cd3ff; }
.irc-bg84 { background-color: #9c9cff; }
.irc-bg85 { background-color: #dc9cff; }
.irc-bg86 { background-color: #ff9cff; }
.irc-bg87 { background-color: #ff94d3; }
.irc-bg88 { background-color: #000; }
.irc-bg89 { background-color: #131313; }
.irc-bg90 { background-color: #282828; }
.irc-bg91 { background-color: #363636; }
.irc-bg92 { background-color: #4d4d4d; }
.irc-bg93 { background-color: #656565; }
.irc-bg94 { background-color: #818181; }
.irc-bg95 { background-color: #9f9f9f; }
.irc-bg96 { background-color: #bcbcbc; }
.irc-bg97 { background-color: #e2e2e2; }
.irc-bg98 { background-color: #fff; }
.irc-bold {
font-weight: bold;
}
.irc-underline {
text-decoration: underline;
}
.irc-strikethrough {
text-decoration: line-through;
}
.irc-underline.irc-strikethrough {
text-decoration: underline line-through;
}
.irc-italic {
font-style: italic;
}
.tooltipped::after {
font-size: 12px;
}
@media (min-width: 480px) {
/* Fade out for long usernames */
#chat .from {
padding-left: 10px;
mask-image: linear-gradient(to left, transparent, black 10px);
}
}
@media (max-width: 768px) {
/**
* TODO Replace this with `@media (hover: hover)` when Firefox supports it
* See:
* - http://stackoverflow.com/a/28058919/1935861
* - http://caniuse.com/#feat=css-media-interaction
* - https://www.w3.org/TR/mediaqueries-4/
* - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
*/
.tooltipped-no-touch:hover::before,
.tooltipped-no-touch:hover::after {
visibility: hidden;
opacity: 0;
}
#sidebar .logo-container {
margin-top: 5px;
}
.channel-list-item,
#sidebar .empty,
.window label,
.header .topic,
#settings .error,
#help .help-item,
#loading,
#context-menu,
#form #input,
.textcomplete-menu,
.messages .msg {
font-size: 15px;
}
#sidebar {
display: flex;
background: var(--body-bg-color);
height: 100%;
position: absolute;
left: -220px;
z-index: 10;
transition: transform 160ms;
transform: translateZ(0);
}
#sidebar-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: var(--overlay-bg-color);
opacity: 0;
visibility: hidden;
transition: opacity 160ms, visibility 160ms;
z-index: 9;
}
#viewport.menu-open #sidebar-overlay {
opacity: 1;
}
#viewport.menu-open #sidebar {
transform: translate3d(220px, 0, 0);
}
#viewport.menu-dragging #sidebar-overlay,
#viewport.menu-dragging #sidebar {
transition: none;
}
#viewport.menu-open #sidebar,
#viewport.menu-dragging #sidebar {
box-shadow: 0 0 25px 0 rgb(0 0 0 / 50%);
}
#viewport.menu-open #sidebar-overlay,
#viewport.menu-dragging #sidebar-overlay {
visibility: visible;
}
/* On mobile display, channel list button stays at the top */
#viewport .lt {
position: relative;
}
#chat .userlist {
background-color: var(--window-bg-color);
height: 100%;
position: absolute;
right: 0;
transform: translateX(180px);
transition: transform 0.2s;
z-index: 1;
}
#viewport.userlist-open #chat .userlist {
transform: translateX(0);
}
#chat .header .title {
padding-left: 6px;
}
#chat .toggle-content .thumb {
max-height: 58px;
max-width: 104px;
}
}
@media (max-width: 479px) {
.container {
max-width: 100%;
margin: 0;
}
#sign-in .btn {
width: 100%;
}
.input {
margin-bottom: 2px;
}
#connect .connect-row {
flex-direction: column;
}
#connect .connect-row > .input,
#connect .connect-row > .input-wrap {
flex-grow: 1;
}
#help .help-version-title {
flex-direction: column;
}
#chat .messages {
display: block;
padding: 5px 0 18px;
}
#chat .msg {
display: block;
padding: 2px 10px;
}
#form {
padding-left: 6px;
}
.typing-indicator {
padding-left: 10px;
padding-right: 10px;
}
#chat .msg[data-type="condensed"] .msg {
padding: 2px 0;
}
#chat .time,
#chat .from,
#chat .content {
border: 0;
display: inline;
padding: 0;
}
#chat .from::after {
/* Add a space because mobile view changes to block display without paddings */
content: " ";
white-space: pre;
}
#chat .chat-view[data-type="channel"] .msg.highlight {
padding-left: 5px;
}
#chat .chat-view[data-type="channel"] .msg.highlight .time {
padding-left: 0;
}
#chat .condensed-summary .time,
#chat .condensed-summary .from {
display: none;
}
#help .help-item .subject {
display: inline-block;
padding-bottom: 4px;
}
#help .help-item .description {
display: block;
}
}
::-webkit-scrollbar {
width: 8px;
background-color: rgb(0 0 0 / 0%);
}
::-webkit-scrollbar:hover {
background-color: rgb(0 0 0 / 9%);
}
::-webkit-scrollbar-thumb:vertical {
background: rgb(0 0 0 / 50%);
border-radius: 100px;
}
::-webkit-scrollbar-thumb:vertical:active {
background: rgb(0 0 0 / 60%);
}
/* Image viewer and drag-and-drop overlay */
#confirm-dialog-overlay,
#upload-overlay,
#image-viewer,
#image-viewer .open-btn,
#image-viewer .close-btn {
/* Vertically and horizontally center stuff */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#confirm-dialog-overlay,
#upload-overlay,
#image-viewer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: var(--overlay-bg-color);
visibility: hidden;
opacity: 0;
transition: opacity 0.2s, visibility 0.2s;
z-index: 999;
user-select: none;
}
#confirm-dialog-overlay.opened,
#upload-overlay.is-dragover,
#image-viewer.opened {
visibility: visible;
opacity: 1;
}
#confirm-dialog-overlay,
#image-viewer {
background: rgb(0 0 0 / 90%);
}
#image-viewer .close-btn,
#image-viewer .open-btn,
#image-viewer .previous-image-btn,
#image-viewer .next-image-btn {
position: fixed;
top: 0;
width: 2em;
font-size: 36px;
color: white;
opacity: 0.6;
transition: 0.2s opacity;
}
#image-viewer .close-btn {
right: 0;
height: 2em;
z-index: 1002;
}
#image-viewer .close-btn::before {
content: "×";
}
#image-viewer .open-btn {
right: 0;
bottom: 0;
top: auto;
height: 2em;
z-index: 1002;
}
#image-viewer .previous-image-btn,
#image-viewer .next-image-btn {
bottom: 0;
z-index: 1001;
}
#image-viewer .previous-image-btn {
left: 0;
}
#image-viewer .next-image-btn {
right: 0;
}
#image-viewer .close-btn:hover,
#image-viewer .previous-image-btn:hover,
#image-viewer .next-image-btn:hover {
opacity: 1;
}
#image-viewer > img {
cursor: grab;
position: absolute;
transform-origin: 50% 50%;
/* Checkered background for transparent images */
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
background-image:
linear-gradient(45deg, #eee 25%, rgb(0 0 0 / 0%) 25%, rgb(0 0 0 / 0%) 75%, #eee 75%, #eee 100%),
linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%, #eee 100%);
}
/* Correctly handle multiple successive whitespace characters.
For example: user has quit ( ===> L O L <=== ) */
#chat .msg[data-type="action"] .content,
#chat .msg[data-type="message"] .content,
#chat .msg[data-type="monospace_block"] .content,
#chat .msg[data-type="notice"] .content,
#chat .ctcp-message,
#chat .part-reason,
#chat .quit-reason,
#chat .new-topic {
white-space: pre-wrap;
}
#chat table.channel-list .topic,
.header .topic {
white-space: nowrap;
}
.chat-view[data-type="search-results"] .search-status {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
Reference in New Issue View Git Blame Copy Permalink