2019-09-17 16:23:49 +02:00
|
|
|
@import "../../node_modules/normalize.css/normalize.css";
|
2018-03-21 13:13:52 +01:00
|
|
|
@import "fontawesome.css";
|
2019-11-02 11:45:41 +01:00
|
|
|
@import "../../node_modules/primer-tooltips/build/build.css";
|
2022-02-24 03:13:28 +01:00
|
|
|
@import "./loading.css";
|
2016-02-17 19:38:42 +01:00
|
|
|
|
2018-04-12 06:52:05 +02:00
|
|
|
:root {
|
2018-04-30 06:57:03 +02:00
|
|
|
/* Main text color */
|
|
|
|
--body-color: #222;
|
|
|
|
|
2018-07-13 06:22:25 +02:00
|
|
|
/* Secondary text color, dimmed. Make sure to keep contrast WCAG 2.0 AA compliant on var(--window-bg-color) */
|
|
|
|
--body-color-muted: #767676;
|
|
|
|
|
2018-04-30 06:57:03 +02:00
|
|
|
/* Background color of the whole page */
|
|
|
|
--body-bg-color: #415364;
|
|
|
|
|
2019-02-18 19:32:41 +01:00
|
|
|
/* Main button color. Applies to border, text, and background on hover */
|
|
|
|
--button-color: #84ce88;
|
|
|
|
--button-text-color-hover: #fff;
|
|
|
|
|
2019-12-04 07:58:23 +01:00
|
|
|
/* Color for sidebar overlay and other things that dim the viewport when something else is on top */
|
2022-02-10 00:27:34 +01:00
|
|
|
--overlay-bg-color: rgb(0 0 0 / 50%);
|
2019-12-04 07:58:23 +01:00
|
|
|
|
2018-04-12 06:52:05 +02:00
|
|
|
/* Links and link-looking buttons */
|
|
|
|
--link-color: #50a656;
|
2018-04-30 06:57:03 +02:00
|
|
|
|
|
|
|
/* Background color of the main window */
|
|
|
|
--window-bg-color: #fff;
|
|
|
|
|
2019-10-14 16:30:35 +02:00
|
|
|
/* Text color for <h2> and <h3> headings in windows */
|
|
|
|
--window-heading-color: #6c797a;
|
|
|
|
|
2018-04-30 06:57:03 +02:00
|
|
|
/* Color of the date marker, text and separator */
|
2022-02-10 00:27:34 +01:00
|
|
|
--date-marker-color: rgb(0 107 59 / 50%);
|
2018-04-30 06:57:03 +02:00
|
|
|
|
|
|
|
/* Color of the unread message marker, text and separator */
|
2022-02-10 00:27:34 +01:00
|
|
|
--unread-marker-color: rgb(231 76 60 / 50%);
|
2018-06-04 06:55:36 +02:00
|
|
|
|
|
|
|
/* Background and left-border color of highlight messages */
|
|
|
|
--highlight-bg-color: #efe8dc;
|
|
|
|
--highlight-border-color: #b08c4f;
|
2019-03-18 01:42:53 +01:00
|
|
|
|
|
|
|
/* 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);
|
2022-02-24 01:40:54 +01:00
|
|
|
|
2022-02-24 03:13:28 +01:00
|
|
|
/* Used to fade out long text via mask-image */
|
|
|
|
--fade-long-text: linear-gradient(to left, transparent, black 15px);
|
2022-02-24 01:40:54 +01:00
|
|
|
|
|
|
|
/* Used for connect, settings, help pages */
|
|
|
|
--page-content-width: 480px;
|
2018-04-12 06:52:05 +02:00
|
|
|
}
|
|
|
|
|
2018-04-14 09:24:39 +02:00
|
|
|
::placeholder {
|
2022-02-10 00:27:34 +01:00
|
|
|
color: rgb(0 0 0 / 35%);
|
2018-04-14 09:24:39 +02:00
|
|
|
opacity: 1; /* fix opacity in Firefox */
|
|
|
|
}
|
|
|
|
|
2019-09-17 16:23:49 +02:00
|
|
|
html {
|
|
|
|
box-sizing: border-box;
|
2019-12-26 12:01:37 +01:00
|
|
|
-webkit-tap-highlight-color: transparent; /* remove tap highlight on touch devices */
|
2019-09-17 16:23:49 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
*,
|
|
|
|
*::before,
|
|
|
|
*::after {
|
|
|
|
box-sizing: inherit;
|
|
|
|
}
|
|
|
|
|
|
|
|
input,
|
|
|
|
button,
|
|
|
|
select,
|
|
|
|
textarea {
|
|
|
|
font: inherit;
|
|
|
|
color: inherit;
|
|
|
|
}
|
|
|
|
|
|
|
|
img {
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
|
|
|
|
abbr[title] {
|
|
|
|
cursor: help;
|
|
|
|
}
|
|
|
|
|
2014-08-15 15:52:14 +02:00
|
|
|
html,
|
|
|
|
body {
|
2017-02-06 13:41:17 +01:00
|
|
|
height: 100%;
|
2018-05-02 13:17:56 +02:00
|
|
|
overscroll-behavior: none; /* prevent overscroll navigation actions */
|
2014-08-15 15:52:14 +02:00
|
|
|
}
|
2016-02-17 19:38:42 +01:00
|
|
|
|
2014-08-15 15:52:14 +02:00
|
|
|
body {
|
2018-04-30 06:57:03 +02:00
|
|
|
background: var(--body-bg-color);
|
|
|
|
color: var(--body-color);
|
2017-09-18 12:32:52 +02:00
|
|
|
font: 16px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
2014-08-15 15:52:14 +02:00
|
|
|
margin: 0;
|
2017-06-16 17:36:05 +02:00
|
|
|
user-select: none;
|
|
|
|
cursor: default;
|
2017-09-14 00:04:03 +02:00
|
|
|
touch-action: none;
|
2017-06-16 17:36:05 +02:00
|
|
|
|
2016-09-19 01:28:27 +02:00
|
|
|
/**
|
|
|
|
* Disable pull-to-refresh on mobile that conflicts with scrolling the message list.
|
|
|
|
* See http://stackoverflow.com/a/29313685/1935861
|
|
|
|
*/
|
2020-03-23 20:15:30 +01:00
|
|
|
overflow: hidden; /* iOS Safari requires overflow rather than overflow-y */
|
2014-08-15 15:52:14 +02:00
|
|
|
}
|
2016-02-17 19:38:42 +01:00
|
|
|
|
2017-09-26 00:06:55 +02:00
|
|
|
a,
|
|
|
|
a:hover,
|
|
|
|
a:focus {
|
2018-04-12 06:52:05 +02:00
|
|
|
color: var(--link-color);
|
2019-09-17 16:23:49 +02:00
|
|
|
text-decoration: none;
|
2017-09-26 00:06:55 +02:00
|
|
|
}
|
|
|
|
|
2014-08-15 15:52:14 +02:00
|
|
|
a:hover {
|
2018-07-05 12:10:10 +02:00
|
|
|
text-decoration: underline;
|
2014-08-15 15:52:14 +02:00
|
|
|
}
|
2016-02-17 19:38:42 +01:00
|
|
|
|
2019-09-17 16:23:49 +02:00
|
|
|
a:focus {
|
|
|
|
outline: thin dotted;
|
|
|
|
outline: 5px auto -webkit-focus-ring-color;
|
|
|
|
outline-offset: -2px;
|
2017-06-10 23:10:42 +02:00
|
|
|
}
|
|
|
|
|
2014-08-15 15:52:14 +02:00
|
|
|
h1,
|
2017-02-28 08:15:34 +01:00
|
|
|
h2,
|
|
|
|
h3 {
|
2014-08-15 15:52:14 +02:00
|
|
|
font: inherit;
|
|
|
|
line-height: inherit;
|
|
|
|
margin: 0;
|
|
|
|
}
|
2016-02-17 19:38:42 +01:00
|
|
|
|
2016-06-22 21:34:10 +02:00
|
|
|
button {
|
2014-08-15 15:52:14 +02:00
|
|
|
border: none;
|
|
|
|
background: none;
|
|
|
|
margin: 0;
|
|
|
|
outline: none;
|
|
|
|
padding: 0;
|
2019-02-12 09:12:15 +01:00
|
|
|
user-select: inherit;
|
2019-12-12 12:20:07 +01:00
|
|
|
cursor: pointer;
|
2014-08-15 15:52:14 +02:00
|
|
|
}
|
2016-02-17 19:38:42 +01:00
|
|
|
|
2017-02-28 08:15:34 +01:00
|
|
|
code,
|
2017-12-23 04:04:41 +01:00
|
|
|
pre,
|
2020-06-29 09:51:17 +02:00
|
|
|
#chat .msg[data-type="monospace_block"] .text,
|
2017-12-03 16:00:35 +01:00
|
|
|
.irc-monospace,
|
2017-09-21 07:59:06 +02:00
|
|
|
textarea#user-specified-css-input {
|
2017-02-28 08:15:34 +01:00
|
|
|
font-family: Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
|
|
|
|
}
|
|
|
|
|
2018-02-03 18:53:33 +01:00
|
|
|
code,
|
|
|
|
.irc-monospace {
|
2018-03-14 03:24:59 +01:00
|
|
|
font-size: 13px;
|
2017-02-28 08:15:34 +01:00
|
|
|
padding: 2px 4px;
|
|
|
|
color: #e74c3c;
|
|
|
|
background-color: #f9f2f4;
|
|
|
|
border-radius: 2px;
|
|
|
|
}
|
|
|
|
|
2017-12-23 04:04:41 +01:00
|
|
|
pre {
|
|
|
|
display: block;
|
|
|
|
padding: 9.5px;
|
|
|
|
margin: 0 0 10px;
|
|
|
|
font-size: 13px;
|
2022-02-10 00:27:34 +01:00
|
|
|
line-height: 1.4286;
|
2017-12-23 04:04:41 +01:00
|
|
|
color: #333;
|
|
|
|
word-break: break-all;
|
|
|
|
word-wrap: break-word;
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
border-radius: 4px;
|
|
|
|
}
|
|
|
|
|
2019-12-12 12:20:07 +01:00
|
|
|
p {
|
|
|
|
margin: 0 0 10px;
|
|
|
|
}
|
|
|
|
|
2014-08-15 15:52:14 +02:00
|
|
|
.btn {
|
2019-02-18 19:32:41 +01:00
|
|
|
border: 2px solid var(--button-color);
|
2014-08-15 15:52:14 +02:00
|
|
|
border-radius: 3px;
|
2019-02-18 19:32:41 +01:00
|
|
|
color: var(--button-color);
|
2014-08-15 15:52:14 +02:00
|
|
|
display: inline-block;
|
2016-08-14 23:28:47 +02:00
|
|
|
font-size: 12px;
|
|
|
|
font-weight: bold;
|
2014-08-15 15:52:14 +02:00
|
|
|
letter-spacing: 1px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
padding: 9px 17px;
|
|
|
|
text-transform: uppercase;
|
2017-12-22 01:16:08 +01:00
|
|
|
transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
|
2014-08-15 15:52:14 +02:00
|
|
|
word-spacing: 3px;
|
2017-07-12 08:54:32 +02:00
|
|
|
cursor: pointer; /* This is useful for `<button>` elements */
|
2014-08-15 15:52:14 +02:00
|
|
|
}
|
2016-02-17 19:38:42 +01:00
|
|
|
|
Improve the version checking part of the changelog feature
- There is no client caching of the changelog/version anymore. Instead, server returns the expiration date of its cache, and that is used by the client as well.
- There is now a "Check now" button on the client that appears when data is stale. This means that info is fetched only once and never refreshed (it was refreshed every hour before) unless the user explicitly wants to check latest version, which in turn is as stale as server info is, i.e. 15 minutes max.
- Button style is shared with the "Join a channel" feature, `.btn-small` (not `.btn-sm` to be explicit that this is not a Bootstrap thing).
- Version checker content is now centralized in the `version_checker` template, instead of being partially in the checker template, partially in the Help template, and partially in the code.
- A "Try again" button lets user attempt to fetch info instead of forcing them to reload the page.
- Use Flexbox to display a nicer version checker: icon is slightly bigger, and button is always aligned on the right.
- Changelog logic has been removed from `lounge.js` and moved into the component file.
- Changelog template is only passed what it needs instead of everything the server gives us.
- Public version now displays version checker, since server is caching things.
- Cleaner code overall.
2017-12-25 00:18:24 +01:00
|
|
|
.btn-small {
|
|
|
|
padding: 5px 13px;
|
|
|
|
}
|
|
|
|
|
2014-08-15 15:52:14 +02:00
|
|
|
.btn:disabled,
|
2017-12-21 19:22:45 +01:00
|
|
|
.btn:hover,
|
|
|
|
.btn:focus {
|
2019-02-18 19:32:41 +01:00
|
|
|
background: var(--button-color);
|
|
|
|
color: var(--button-text-color-hover);
|
2017-07-12 08:54:32 +02:00
|
|
|
opacity: 1;
|
2014-08-15 15:52:14 +02:00
|
|
|
}
|
2016-02-17 19:38:42 +01:00
|
|
|
|
2017-12-22 01:16:08 +01:00
|
|
|
.input:focus,
|
|
|
|
.btn:active,
|
|
|
|
.btn:focus {
|
|
|
|
outline: 0;
|
2022-02-10 00:27:34 +01:00
|
|
|
box-shadow: 0 0 0 3px rgb(132 206 136 / 50%);
|
2017-12-22 01:16:08 +01:00
|
|
|
}
|
|
|
|
|
2014-08-15 15:52:14 +02:00
|
|
|
.btn:active {
|
2017-08-21 08:22:40 +02:00
|
|
|
opacity: 0.8;
|
2014-08-15 15:52:14 +02:00
|
|
|
}
|
2016-02-17 19:38:42 +01:00
|
|
|
|
2014-08-15 15:52:14 +02:00
|
|
|
.btn:disabled {
|
2017-08-21 08:22:40 +02:00
|
|
|
opacity: 0.6;
|
2014-08-15 15:52:14 +02:00
|
|
|
}
|
2016-02-17 19:38:42 +01:00
|
|
|
|
2017-07-13 20:32:18 +02:00
|
|
|
.btn-sm {
|
|
|
|
padding: 4px 8px;
|
|
|
|
border-width: 1px;
|
|
|
|
letter-spacing: 0;
|
|
|
|
word-spacing: 0;
|
|
|
|
text-transform: none;
|
|
|
|
}
|
|
|
|
|
2017-08-26 18:36:18 +02:00
|
|
|
#js-copy-hack,
|
2017-12-16 22:19:51 +01:00
|
|
|
#loading pre,
|
2019-01-19 07:37:26 +01:00
|
|
|
#help .container,
|
|
|
|
#changelog .container,
|
2019-12-04 07:58:23 +01:00
|
|
|
.header .title,
|
|
|
|
.header .topic,
|
2017-06-16 17:36:05 +02:00
|
|
|
#chat .messages {
|
|
|
|
user-select: text;
|
|
|
|
cursor: text;
|
|
|
|
}
|
|
|
|
|
2017-08-26 18:36:18 +02:00
|
|
|
#js-copy-hack {
|
|
|
|
position: absolute;
|
|
|
|
left: -999999px;
|
|
|
|
}
|
|
|
|
|
2019-12-15 12:46:43 +01:00
|
|
|
#chat #js-copy-hack .msg[data-type="condensed"]:not(.closed) .msg,
|
2017-08-26 18:36:18 +02:00
|
|
|
#chat #js-copy-hack > .msg {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
2018-03-10 23:23:43 +01:00
|
|
|
#viewport {
|
|
|
|
display: flex;
|
2014-08-15 15:52:14 +02:00
|
|
|
height: 100%;
|
|
|
|
}
|
2016-02-17 19:38:42 +01:00
|
|
|
|
2017-07-09 03:17:03 +02:00
|
|
|
#form button,
|
2018-03-30 08:07:11 +02:00
|
|
|
.header button,
|
|
|
|
.reveal-password span {
|
2017-08-21 08:22:40 +02:00
|
|
|
transition: opacity 0.2s;
|
2017-07-09 03:17:03 +02:00
|
|
|
}
|
|
|
|
|
2018-04-15 05:02:35 +02:00
|
|
|
#form button:hover,
|
2018-03-30 08:07:11 +02:00
|
|
|
.header button:hover,
|
|
|
|
.reveal-password span:hover {
|
2017-08-21 08:22:40 +02:00
|
|
|
opacity: 0.6;
|
2017-07-09 03:17:03 +02:00
|
|
|
}
|
|
|
|
|
2019-12-11 12:35:18 +01:00
|
|
|
/* Darker background and defualt cursor for active channels */
|
2020-01-02 11:57:36 +01:00
|
|
|
#footer button.active,
|
2019-12-11 12:35:18 +01:00
|
|
|
.channel-list-item.active {
|
2018-03-30 08:07:11 +02:00
|
|
|
background-color: #303e4a;
|
2019-12-11 12:35:18 +01:00
|
|
|
cursor: default;
|
2018-03-30 08:07:11 +02:00
|
|
|
}
|
|
|
|
|
2022-02-24 01:40:54 +01:00
|
|
|
.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;
|
2019-02-26 07:26:45 +01:00
|
|
|
}
|
|
|
|
|
2022-02-24 01:40:54 +01:00
|
|
|
.input:disabled {
|
|
|
|
background-color: #ddd;
|
2018-02-19 12:12:01 +01:00
|
|
|
}
|
|
|
|
|
2022-02-24 01:40:54 +01:00
|
|
|
.input:not(:disabled):hover,
|
|
|
|
.input:not(:disabled):focus {
|
|
|
|
border-color: #84ce88;
|
2018-02-19 12:12:01 +01:00
|
|
|
}
|
|
|
|
|
2022-02-24 01:40:54 +01:00
|
|
|
textarea.input {
|
|
|
|
resize: vertical;
|
|
|
|
min-height: 35px;
|
|
|
|
padding: 6px 10px;
|
|
|
|
line-height: 1.5;
|
2018-02-19 12:12:01 +01:00
|
|
|
}
|
|
|
|
|
2022-02-24 01:40:54 +01:00
|
|
|
/**
|
|
|
|
* Toggled via JavaScript
|
|
|
|
*/
|
|
|
|
.userlist-open .chat-view[data-type="channel"] .scroll-down {
|
|
|
|
right: 196px;
|
2017-12-17 07:14:11 +01:00
|
|
|
}
|
|
|
|
|
2018-04-15 05:02:35 +02:00
|
|
|
/* Parsed nicks and channels */
|
2016-05-15 21:56:48 +02:00
|
|
|
|
2018-04-30 07:03:47 +02:00
|
|
|
#chat .user,
|
2018-04-15 05:02:35 +02:00
|
|
|
.inline-channel {
|
2016-06-22 21:34:10 +02:00
|
|
|
cursor: pointer;
|
2016-05-15 21:56:48 +02:00
|
|
|
}
|
|
|
|
|
2018-04-15 05:02:35 +02:00
|
|
|
.chat .user:hover,
|
|
|
|
.inline-channel:hover {
|
2018-07-05 12:10:10 +02:00
|
|
|
text-decoration: underline;
|
2016-06-22 21:34:10 +02:00
|
|
|
}
|
|
|
|
|
2018-04-15 05:02:35 +02:00
|
|
|
/* Nicknames */
|
2019-12-04 07:58:23 +01:00
|
|
|
.window .logo-inverted {
|
2018-03-11 22:20:51 +01:00
|
|
|
display: none; /* In dark themes, inverted logo must be used instead */
|
2017-10-28 22:50:57 +02:00
|
|
|
}
|
|
|
|
|
2018-05-08 23:40:39 +02:00
|
|
|
.password-container {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
2018-05-10 01:25:17 +02:00
|
|
|
.password-container input {
|
|
|
|
padding-right: 37px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.password-container .reveal-password {
|
|
|
|
position: absolute;
|
|
|
|
top: 2px;
|
2019-12-12 12:20:07 +01:00
|
|
|
right: 0;
|
|
|
|
appearance: none;
|
2018-05-10 01:25:17 +02:00
|
|
|
}
|
|
|
|
|
2018-05-24 21:20:23 +02:00
|
|
|
.password-container .reveal-password span {
|
2018-05-08 01:52:54 +02:00
|
|
|
font-size: 16px;
|
2018-03-30 08:07:11 +02:00
|
|
|
color: #607992;
|
2018-06-19 12:32:15 +02:00
|
|
|
width: 35px;
|
|
|
|
height: 35px;
|
2018-05-24 21:20:23 +02:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
2018-03-30 08:07:11 +02:00
|
|
|
cursor: pointer;
|
2018-05-08 01:52:54 +02:00
|
|
|
}
|
|
|
|
|
2018-05-24 21:20:23 +02:00
|
|
|
.password-container .reveal-password span::before {
|
2018-05-08 23:40:39 +02:00
|
|
|
content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
|
2018-05-08 01:52:54 +02:00
|
|
|
}
|
|
|
|
|
2019-08-11 15:59:06 +02:00
|
|
|
.topic-container .save-topic span::before {
|
|
|
|
content: "\f00c"; /* https://fontawesome.com/icons/check?style=solid */
|
|
|
|
}
|
|
|
|
|
2019-02-18 10:18:32 +01:00
|
|
|
.password-container .reveal-password-visible span::before {
|
2018-05-08 23:40:39 +02:00
|
|
|
content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */
|
2018-05-10 01:25:17 +02:00
|
|
|
color: #ff4136;
|
2016-03-03 17:43:30 +01:00
|
|
|
}
|
|
|
|
|
2019-11-04 10:21:05 +01:00
|
|
|
.mentions-popup,
|
2016-12-11 01:13:26 +01:00
|
|
|
#context-menu,
|
|
|
|
.textcomplete-menu {
|
2016-02-12 12:34:10 +01:00
|
|
|
position: absolute;
|
|
|
|
list-style: none;
|
|
|
|
margin: 0;
|
2019-10-19 23:36:40 +02:00
|
|
|
padding: 0 6px;
|
2018-04-13 17:53:41 +02:00
|
|
|
min-width: 180px;
|
2016-02-12 12:34:10 +01:00
|
|
|
font-size: 14px;
|
|
|
|
background-color: #fff;
|
2022-02-10 00:27:34 +01:00
|
|
|
box-shadow: 0 3px 12px rgb(0 0 0 / 15%);
|
|
|
|
border: 1px solid rgb(0 0 0 / 15%);
|
2019-10-19 23:36:40 +02:00
|
|
|
border-radius: 5px;
|
2019-11-18 21:05:47 +01:00
|
|
|
outline: 0;
|
2016-02-12 12:34:10 +01:00
|
|
|
}
|
|
|
|
|
2016-12-11 01:13:26 +01:00
|
|
|
.context-menu-item,
|
|
|
|
.textcomplete-item {
|
2016-02-12 12:34:10 +01:00
|
|
|
cursor: pointer;
|
|
|
|
display: block;
|
2016-03-20 22:03:39 +01:00
|
|
|
padding: 4px 8px;
|
2016-02-12 12:34:10 +01:00
|
|
|
color: #333;
|
2016-03-20 22:03:39 +01:00
|
|
|
margin-top: 6px;
|
|
|
|
margin-bottom: 6px;
|
2017-08-23 16:19:04 +02:00
|
|
|
line-height: 1.4;
|
2019-10-19 23:36:40 +02:00
|
|
|
border-radius: 3px;
|
2019-11-23 15:26:20 +01:00
|
|
|
white-space: nowrap;
|
2016-02-12 12:34:10 +01:00
|
|
|
}
|
|
|
|
|
2019-11-18 21:05:47 +01:00
|
|
|
.context-menu-item.active,
|
2018-04-22 12:59:01 +02:00
|
|
|
.textcomplete-item:focus,
|
2016-12-11 01:13:26 +01:00
|
|
|
.textcomplete-item:hover,
|
2017-12-16 19:58:56 +01:00
|
|
|
.textcomplete-menu .active,
|
2018-03-04 21:03:11 +01:00
|
|
|
#chat .userlist .user.active {
|
2022-02-10 00:27:34 +01:00
|
|
|
background-color: rgb(0 0 0 / 10%);
|
2016-02-12 12:34:10 +01:00
|
|
|
}
|
|
|
|
|
2017-08-21 08:18:33 +02:00
|
|
|
.context-menu-item::before,
|
|
|
|
.textcomplete-item::before {
|
2016-02-12 12:34:10 +01:00
|
|
|
width: 20px;
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
|
2016-12-11 01:13:26 +01:00
|
|
|
.textcomplete-item a {
|
|
|
|
color: #333;
|
|
|
|
}
|
|
|
|
|
2017-04-25 01:01:24 +02:00
|
|
|
.textcomplete-item a:hover {
|
2018-10-01 16:12:37 +02:00
|
|
|
text-decoration: none;
|
2017-04-25 01:01:24 +02:00
|
|
|
}
|
|
|
|
|
2016-12-11 01:13:26 +01:00
|
|
|
.textcomplete-item .emoji {
|
2017-08-23 16:19:04 +02:00
|
|
|
width: 32px;
|
2016-12-11 01:13:26 +01:00
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
2017-04-30 12:18:21 +02:00
|
|
|
.textcomplete-item .irc-bg {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
2017-12-19 02:59:35 +01:00
|
|
|
.tooltipped::after {
|
|
|
|
font-size: 12px;
|
|
|
|
}
|
|
|
|
|
2014-08-15 15:52:14 +02:00
|
|
|
@media (max-width: 768px) {
|
2016-09-15 05:50:57 +02:00
|
|
|
/**
|
|
|
|
* 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
|
|
|
|
*/
|
2017-08-21 08:18:33 +02:00
|
|
|
.tooltipped-no-touch:hover::before,
|
|
|
|
.tooltipped-no-touch:hover::after {
|
2016-09-15 05:50:57 +02:00
|
|
|
visibility: hidden;
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
2019-12-04 07:58:23 +01:00
|
|
|
.channel-list-item,
|
2017-09-23 03:59:45 +02:00
|
|
|
#sidebar .empty,
|
2019-12-04 07:58:23 +01:00
|
|
|
.window label,
|
|
|
|
.header .topic,
|
2017-09-23 03:59:45 +02:00
|
|
|
#settings .error,
|
|
|
|
#help .help-item,
|
|
|
|
#loading,
|
|
|
|
#context-menu,
|
2017-10-03 06:55:48 +02:00
|
|
|
#form #input,
|
2017-09-23 03:59:45 +02:00
|
|
|
.textcomplete-menu,
|
2017-09-21 08:21:48 +02:00
|
|
|
.messages .msg {
|
2017-09-23 03:59:45 +02:00
|
|
|
font-size: 15px;
|
2017-09-21 08:21:48 +02:00
|
|
|
}
|
2016-06-12 04:16:17 +02:00
|
|
|
}
|
|
|
|
|
2014-09-13 03:03:16 +02:00
|
|
|
@media (max-width: 479px) {
|
2014-09-10 17:56:19 +02:00
|
|
|
.container {
|
2019-12-12 12:20:07 +01:00
|
|
|
max-width: 100%;
|
2018-04-15 00:16:17 +02:00
|
|
|
margin: 0;
|
2014-09-13 03:03:16 +02:00
|
|
|
}
|
2016-02-17 19:38:42 +01:00
|
|
|
|
2018-03-11 22:20:51 +01:00
|
|
|
#sign-in .btn {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
2019-12-04 07:58:23 +01:00
|
|
|
.input {
|
2014-09-13 03:03:16 +02:00
|
|
|
margin-bottom: 2px;
|
2014-09-10 17:56:19 +02:00
|
|
|
}
|
2014-08-15 15:52:14 +02:00
|
|
|
}
|
2014-09-15 19:41:23 +02:00
|
|
|
|
2016-01-18 18:49:23 +01:00
|
|
|
::-webkit-scrollbar {
|
|
|
|
width: 8px;
|
2022-02-10 00:27:34 +01:00
|
|
|
background-color: rgb(0 0 0 / 0%);
|
2016-01-18 18:49:23 +01:00
|
|
|
}
|
2016-02-17 19:38:42 +01:00
|
|
|
|
2016-01-18 18:49:23 +01:00
|
|
|
::-webkit-scrollbar:hover {
|
2022-02-10 00:27:34 +01:00
|
|
|
background-color: rgb(0 0 0 / 9%);
|
2016-01-18 18:49:23 +01:00
|
|
|
}
|
2016-02-17 19:38:42 +01:00
|
|
|
|
2016-01-18 18:49:23 +01:00
|
|
|
::-webkit-scrollbar-thumb:vertical {
|
2022-02-10 00:27:34 +01:00
|
|
|
background: rgb(0 0 0 / 50%);
|
2016-01-18 18:49:23 +01:00
|
|
|
border-radius: 100px;
|
|
|
|
}
|
2016-06-22 22:05:25 +02:00
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb:vertical:active {
|
2022-02-10 00:27:34 +01:00
|
|
|
background: rgb(0 0 0 / 60%);
|
2016-06-22 22:05:25 +02:00
|
|
|
}
|
2017-07-12 08:55:41 +02:00
|
|
|
|
2018-09-03 09:30:05 +02:00
|
|
|
/* Image viewer and drag-and-drop overlay */
|
2017-07-12 08:55:41 +02:00
|
|
|
|
2020-02-25 10:16:05 +01:00
|
|
|
#confirm-dialog-overlay,
|
2018-09-03 09:30:05 +02:00
|
|
|
#upload-overlay,
|
2017-07-12 08:55:41 +02:00
|
|
|
#image-viewer,
|
2019-10-03 15:12:49 +02:00
|
|
|
#image-viewer .open-btn,
|
2017-07-12 08:55:41 +02:00
|
|
|
#image-viewer .close-btn {
|
|
|
|
/* Vertically and horizontally center stuff */
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
2020-02-25 10:16:05 +01:00
|
|
|
#confirm-dialog-overlay,
|
2018-09-03 09:30:05 +02:00
|
|
|
#upload-overlay,
|
2017-07-12 08:55:41 +02:00
|
|
|
#image-viewer {
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
2019-12-04 07:58:23 +01:00
|
|
|
background: var(--overlay-bg-color);
|
2017-07-12 08:55:41 +02:00
|
|
|
visibility: hidden;
|
|
|
|
opacity: 0;
|
2017-08-21 08:22:40 +02:00
|
|
|
transition: opacity 0.2s, visibility 0.2s;
|
2017-07-12 08:55:41 +02:00
|
|
|
z-index: 999;
|
2019-10-03 15:12:49 +02:00
|
|
|
user-select: none;
|
2017-07-12 08:55:41 +02:00
|
|
|
}
|
|
|
|
|
2020-02-25 10:16:05 +01:00
|
|
|
#confirm-dialog-overlay.opened,
|
2019-12-10 15:46:50 +01:00
|
|
|
#upload-overlay.is-dragover,
|
2017-07-24 08:31:12 +02:00
|
|
|
#image-viewer.opened {
|
2017-07-12 08:55:41 +02:00
|
|
|
visibility: visible;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
2020-02-25 10:16:05 +01:00
|
|
|
#confirm-dialog-overlay,
|
2019-12-10 15:46:50 +01:00
|
|
|
#image-viewer {
|
2022-02-10 00:27:34 +01:00
|
|
|
background: rgb(0 0 0 / 90%);
|
2018-09-03 09:30:05 +02:00
|
|
|
}
|