mirror of
https://github.com/thelounge/thelounge.git
synced 2024-06-03 14:22:19 +02:00
1035 lines
18 KiB
CSS
1035 lines
18 KiB
CSS
@import "../../node_modules/normalize.css/normalize.css";
|
||
@import "fontawesome.css";
|
||
@import "../../node_modules/primer-tooltips/build/build.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 <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);
|
||
|
||
/* Used to fade out long text in channel list and topic */
|
||
--fade-long-text: linear-gradient(to left, transparent, black 20px);
|
||
|
||
/* 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 */
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
#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;
|
||
}
|
||
|
||
#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.userlist-open #chat .userlist {
|
||
display: flex;
|
||
}
|
||
|
||
#viewport.menu-open #sidebar {
|
||
display: flex;
|
||
}
|
||
|
||
.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 */
|
||
.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 defualt cursor for active channels */
|
||
#footer button.active,
|
||
.channel-list-item.active {
|
||
background-color: #303e4a;
|
||
cursor: default;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.header {
|
||
line-height: 45px;
|
||
height: 45px;
|
||
padding: 0 6px;
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#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;
|
||
}
|
||
|
||
/**
|
||
* Toggled via JavaScript
|
||
*/
|
||
.userlist-open .chat-view[data-type="channel"] .scroll-down {
|
||
right: 196px;
|
||
}
|
||
|
||
#chat .chat-view:not([data-type="special"]) .messages {
|
||
margin-top: auto;
|
||
}
|
||
|
||
#chat.time-12h .time,
|
||
#chat.time-seconds .time {
|
||
width: 75px;
|
||
}
|
||
|
||
#chat.time-seconds.time-12h .time {
|
||
width: 90px;
|
||
}
|
||
|
||
#chat .msg[data-type="unhandled"] .from {
|
||
color: var(--body-color-muted);
|
||
}
|
||
|
||
/* Parsed nicks and channels */
|
||
|
||
#chat .user,
|
||
.inline-channel {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.chat .user:hover,
|
||
.inline-channel:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Nicknames */
|
||
|
||
#chat .user {
|
||
color: #50a656;
|
||
}
|
||
|
||
#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 .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="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"],
|
||
#chat .msg[data-type="error"] .from {
|
||
color: #e74c3c;
|
||
}
|
||
|
||
#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: 5px;
|
||
color: #696969;
|
||
}
|
||
|
||
#chat .chat-view[data-type="channel"] .msg.highlight .content {
|
||
border-left: 1px solid var(--highlight-bg-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);
|
||
}
|
||
|
||
#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;
|
||
}
|
||
|
||
#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 */
|
||
}
|
||
|
||
#connect .extra-help,
|
||
#settings .extra-help {
|
||
cursor: help;
|
||
}
|
||
|
||
.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 (min-width: var(--page-content-width)) {
|
||
/* 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;
|
||
}
|
||
|
||
#chat .msg {
|
||
display: block;
|
||
padding: 2px 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%);
|
||
}
|