@import "../../node_modules/normalize.css/normalize.css"; @import "fontawesome.css"; @import "../../node_modules/primer-tooltips/build/build.css"; @import "./loading.css"; :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; /* Text color for

and

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); /* Used to fade out long text via mask-image */ --fade-long-text: linear-gradient(to left, transparent, black 15px); /* Used for connect, settings, help pages */ --page-content-width: 480px; } ::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; } 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 */ } 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; } p { margin: 0 0 10px; } .input:focus { outline: 0; box-shadow: 0 0 0 3px rgb(132 206 136 / 50%); } #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; } #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; } /* Darker background and defualt cursor for active channels */ #footer button.active, .channel-list-item.active { background-color: #303e4a; cursor: default; } .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; } /** * Toggled via JavaScript */ .userlist-open .chat-view[data-type="channel"] .scroll-down { right: 196px; } /* Parsed nicks and channels */ #chat .user, .inline-channel { cursor: pointer; } .chat .user:hover, .inline-channel:hover { text-decoration: underline; } /* Nicknames */ .window .logo-inverted { display: none; /* In dark themes, inverted logo must be used instead */ } .password-container { position: relative; } .password-container input { padding-right: 37px; } .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; } .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-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; } .textcomplete-item .emoji { width: 32px; text-align: center; } .textcomplete-item .irc-bg { display: block; } .tooltipped::after { font-size: 12px; } @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; } .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; } } @media (max-width: 479px) { .container { max-width: 100%; margin: 0; } #sign-in .btn { width: 100%; } .input { margin-bottom: 2px; } } ::-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%); }