mirror of
https://github.com/thelounge/thelounge.git
synced 2024-06-26 09:10:11 +02:00
more progress
This commit is contained in:
Max Leiter
parent
4763ebbb28
commit
9082086ede
|
|
@ -117,6 +117,29 @@
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
.header {
|
||||
line-height: 45px;
|
||||
height: 45px;
|
||||
padding: 0 6px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#form,
|
||||
.messages .msg,
|
||||
.userlist {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
/* Correctly handle multiple successive whitespace characters.
|
||||
For example: user has quit ( ===> L O L <=== ) */
|
||||
|
||||
|
|
@ -132,6 +155,44 @@
|
|||
#chat table.channel-list .topic {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,20 @@
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
.channel-list-item {
|
||||
display: flex;
|
||||
padding: 8px 14px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Channels/queries must be white on hover and active */
|
||||
.channel-list-item:hover,
|
||||
.channel-list-item.active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.channel-list-item .not-connected-tooltip,
|
||||
.channel-list-item .not-secure-tooltip,
|
||||
.channel-list-item .parted-channel-tooltip {
|
||||
|
|
|
|||
|
|
@ -64,6 +64,10 @@
|
|||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
#viewport.userlist-open #chat .userlist {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#chat .userlist .count {
|
||||
background: #fafafa;
|
||||
height: 45px;
|
||||
|
|
@ -140,6 +144,22 @@
|
|||
#chat .user-mode.normal::before {
|
||||
content: "Users";
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import {filter as fuzzyFilter} from "fuzzy";
|
||||
|
|
|
|||
|
|
@ -38,6 +38,78 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#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%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Mousetrap from "mousetrap";
|
||||
import eventbus from "../js/eventbus";
|
||||
|
|
|
|||
|
|
@ -254,6 +254,18 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
|||
#chat .preview:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chat .toggle-content.opened .more-caret, /* Expand/Collapse link previews */
|
||||
#chat .toggle-button.opened /* Thumbnail toggle */ {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#chat .toggle-content .thumb {
|
||||
max-height: 58px;
|
||||
max-width: 104px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import eventbus from "../js/eventbus";
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
<span class="preview-size">({{ previewSize }})</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.preview-size {
|
||||
margin-left: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import friendlysize from "../js/helpers/friendlysize";
|
||||
|
||||
|
|
|
|||
|
|
@ -95,6 +95,19 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#chat .chat-view[data-type="channel"] .msg.highlight {
|
||||
background-color: var(--highlight-bg-color);
|
||||
border-left: 5px solid var(--highlight-border-color);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const constants = require("../js/constants");
|
||||
import localetime from "../js/helpers/localetime";
|
||||
|
|
|
|||
|
|
@ -17,6 +17,58 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#chat .msg:not(.closed)[data-type="condensed"] .toggle-button {
|
||||
/* Expanded status message toggle */
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
#chat .msg[data-type="condensed"] {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#chat .msg[data-type="condensed"] .content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
/* Ensures expanded status messages always take up the full width */
|
||||
.msg[data-type="condensed"] /deep/ .msg {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
#chat .msg[data-type="condensed"] /deep/ .msg {
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
#chat .condensed-summary .time,
|
||||
#chat .condensed-summary .from {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const constants = require("../js/constants");
|
||||
import Message from "./Message.vue";
|
||||
|
|
|
|||
|
|
@ -484,6 +484,21 @@ input[name="proxyEnabled"] {
|
|||
#connect\:proxyEnabled[type="checkbox"]:is(:checked) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#connect .extra-help {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
#connect .connect-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#connect .connect-row > .input,
|
||||
#connect .connect-row > .input-wrap {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -235,6 +235,11 @@
|
|||
line-height: 1.6;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body.force-no-select * {
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
/deep/ .channel-list-item .badge {
|
||||
|
|
|
|||
|
|
@ -109,6 +109,19 @@
|
|||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import collapseNetwork from "../js/helpers/collapseNetwork";
|
||||
|
|
|
|||
|
|
@ -89,6 +89,10 @@
|
|||
color: #b7c5d1; /* same as .channel-list-item color */
|
||||
}
|
||||
|
||||
#viewport.menu-open #sidebar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#sidebar .scrollable-area {
|
||||
overflow-x: auto;
|
||||
flex-grow: 1;
|
||||
|
|
@ -143,6 +147,23 @@
|
|||
color: var(--link-color);
|
||||
background: var(--body-bg-color);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#sidebar .logo-container {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
display: flex;
|
||||
background: var(--body-bg-color);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: -220px;
|
||||
z-index: 10;
|
||||
transition: transform 160ms;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import NetworkList from "./NetworkList.vue";
|
||||
|
|
|
|||
|
|
@ -32,6 +32,13 @@
|
|||
#viewport.notified .lt::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* On mobile display, channel list button stays at the top */
|
||||
#viewport .lt {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -896,6 +896,21 @@ kbd {
|
|||
border-radius: 4px;
|
||||
box-shadow: 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc;
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
#help .help-item .subject {
|
||||
display: inline-block;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
#help .help-item .description {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#help .help-version-title {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -621,6 +621,10 @@ textarea#user-specified-css-input {
|
|||
color: #e74c3c;
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
#settings .extra-help {
|
||||
cursor: help;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -87,6 +87,12 @@ label {
|
|||
.password-container .reveal-password {
|
||||
top: 31px;
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
#sign-in .btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
/*
|
||||
* The search results page is currently a basic copy of the chat page,
|
||||
* so certain styles are here instead of in each component.
|
||||
*/
|
||||
|
||||
#chat {
|
||||
overflow: hidden;
|
||||
flex: 1 0 auto;
|
||||
|
|
@ -50,3 +55,45 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#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.time-12h .time,
|
||||
#chat.time-seconds .time {
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
#chat.time-seconds.time-12h .time {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
#chat .messages {
|
||||
display: block;
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#chat .header .title {
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,14 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#chat .user {
|
||||
color: #50a656;
|
||||
}
|
||||
|
||||
#chat .self .content {
|
||||
color: var(--body-color-muted);
|
||||
}
|
||||
|
||||
#chat .time {
|
||||
color: var(--body-color-muted);
|
||||
padding-left: 10px;
|
||||
|
|
@ -40,3 +48,108 @@
|
|||
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="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="monospace_block"] .text {
|
||||
background: #f6f6f6;
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#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 .time {
|
||||
padding-left: 5px;
|
||||
color: #696969;
|
||||
}
|
||||
|
||||
#chat .chat-view[data-type="channel"] .msg.highlight .content {
|
||||
border-left: 1px solid var(--highlight-bg-color);
|
||||
}
|
||||
|
||||
#chat .chat-view:not([data-type="special"]) .messages {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
#chat .msg[data-type="unhandled"] .from {
|
||||
color: var(--body-color-muted);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* Fade out for long usernames */
|
||||
#chat .from {
|
||||
padding-left: 10px;
|
||||
mask-image: var(--fade-long-text);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
#chat .msg {
|
||||
display: block;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
49
client/css/loading.css
Normal file
49
client/css/loading.css
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
|
||||
#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 */
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
@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 */
|
||||
|
|
@ -41,8 +42,8 @@
|
|||
/* 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 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;
|
||||
|
|
@ -102,10 +103,6 @@ body {
|
|||
overflow: hidden; /* iOS Safari requires overflow rather than overflow-y */
|
||||
}
|
||||
|
||||
body.force-no-select * {
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
|
|
@ -247,13 +244,6 @@ p {
|
|||
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%;
|
||||
|
|
@ -271,39 +261,6 @@ p {
|
|||
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 {
|
||||
|
|
@ -311,19 +268,6 @@ background on hover (unless active) */
|
|||
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;
|
||||
|
|
@ -355,77 +299,6 @@ textarea.input {
|
|||
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
|
||||
*/
|
||||
|
|
@ -433,23 +306,6 @@ textarea.input {
|
|||
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,
|
||||
|
|
@ -463,154 +319,10 @@ textarea.input {
|
|||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
|
@ -714,14 +426,6 @@ textarea.input {
|
|||
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
|
||||
|
|
@ -737,10 +441,6 @@ textarea.input {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
#sidebar .logo-container {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.channel-list-item,
|
||||
#sidebar .empty,
|
||||
.window label,
|
||||
|
|
@ -754,81 +454,6 @@ textarea.input {
|
|||
.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) {
|
||||
|
|
@ -844,69 +469,6 @@ textarea.input {
|
|||
.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 {
|
||||
|
|
@ -968,67 +530,3 @@ textarea.input {
|
|||
#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%);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue