supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3553 from thelounge/richrd/css-refactoring

Browse Source 
Refactor some CSS styling
This commit is contained in:
Pavel Djundik 2019-12-10 14:52:18 +02:00 committed by GitHub
commit 2a84d8239b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 119 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/components/App.vue
View File

@ -2,9 +2,7 @@
<div id="viewport" :class="viewportClasses" role="tablist"> <div id="viewport" :class="viewportClasses" role="tablist">
<Sidebar v-if="$store.state.appLoaded" :overlay="$refs.overlay" /> <Sidebar v-if="$store.state.appLoaded" :overlay="$refs.overlay" />
<div id="sidebar-overlay" ref="overlay" @click="$store.commit('sidebarOpen', false)" /> <div id="sidebar-overlay" ref="overlay" @click="$store.commit('sidebarOpen', false)" />
<article id="windows"> <router-view ref="window"></router-view>
<router-view ref="window"></router-view>
</article>
<ImageViewer ref="imageViewer" /> <ImageViewer ref="imageViewer" />
<ContextMenu ref="contextMenu" /> <ContextMenu ref="contextMenu" />
<div id="upload-overlay"></div> <div id="upload-overlay"></div>

4
client/components/ChannelWrapper.vue
View File

@ -4,8 +4,7 @@
v-if="isChannelVisible" v-if="isChannelVisible"
ref="element" ref="element"
:class="[ :class="[
'chan', 'channel-list-item',
channel.type,
{active: activeChannel && channel === activeChannel.channel}, {active: activeChannel && channel === activeChannel.channel},
{'parted-channel': channel.type === 'channel' && channel.state === 0}, {'parted-channel': channel.type === 'channel' && channel.state === 0},
{'has-draft': channel.pendingMessage}, {'has-draft': channel.pendingMessage},
@ -13,6 +12,7 @@
:aria-label="getAriaLabel()" :aria-label="getAriaLabel()"
:title="getAriaLabel()" :title="getAriaLabel()"
:data-name="channel.name" :data-name="channel.name"
:data-type="channel.type"
:aria-controls="'#chan-' + channel.id" :aria-controls="'#chan-' + channel.id"
:aria-selected="activeChannel && channel === activeChannel.channel" :aria-selected="activeChannel && channel === activeChannel.channel"
:style="channel.closed ? {transition: 'none', opacity: 0.4} : null" :style="channel.closed ? {transition: 'none', opacity: 0.4} : null"

4
client/components/Chat.vue
View File

@ -10,7 +10,8 @@
> >
<div <div
:id="'chan-' + channel.id" :id="'chan-' + channel.id"
:class="[channel.type, 'chan', 'active']" class="chat-view"
:data-type="channel.type"
:aria-label="channel.name" :aria-label="channel.name"
role="tabpanel" role="tabpanel"
> >
@ -88,7 +89,6 @@
> >
{{ this.$store.state.currentUserVisibleError }} {{ this.$store.state.currentUserVisibleError }}
</div> </div>
<span id="upload-progressbar" />
<ChatInput :network="network" :channel="channel" /> <ChatInput :network="network" :channel="channel" />
</div> </div>
</template> </template>

1
client/components/ChatInput.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<form id="form" method="post" action="" @submit.prevent="onSubmit"> <form id="form" method="post" action="" @submit.prevent="onSubmit">
<span id="upload-progressbar" />
<span id="nick">{{ network.nick }}</span> <span id="nick">{{ network.nick }}</span>
<textarea <textarea
id="input" id="input"

2
client/components/NetworkList.vue
View File

@ -42,7 +42,7 @@
/> />
<Draggable <Draggable
draggable=".chan" draggable=".channel-list-item"
ghost-class="ui-sortable-ghost" ghost-class="ui-sortable-ghost"
drag-class="ui-sortable-dragged" drag-class="ui-sortable-dragged"
:group="network.uuid" :group="network.uuid"

194
client/css/style.css
View File

@ -16,6 +16,9 @@
--button-color: #84ce88; --button-color: #84ce88;
--button-text-color-hover: #fff; --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: rgba(0, 0, 0, 0.5);
/* Links and link-looking buttons */ /* Links and link-looking buttons */
--link-color: #50a656; --link-color: #50a656;
@ -213,8 +216,8 @@ kbd {
#loading pre, #loading pre,
#help .container, #help .container,
#changelog .container, #changelog .container,
#windows .header .title, .header .title,
#windows .header .topic, .header .topic,
#chat .messages { #chat .messages {
user-select: text; user-select: text;
cursor: text; cursor: text;
@ -241,7 +244,7 @@ kbd {
#viewport .lt::before, #viewport .lt::before,
#viewport .rt::before, #viewport .rt::before,
#chat button.menu::before, #chat button.menu::before,
#sidebar .chan::before, .channel-list-item::before,
#footer .icon, #footer .icon,
#chat .count::before, #chat .count::before,
#settings .extra-experimental, #settings .extra-experimental,
@ -317,14 +320,14 @@ kbd {
.context-menu-query::before, .context-menu-query::before,
.context-menu-action-query::before, .context-menu-action-query::before,
#sidebar .chan.query::before { content: "\f075"; /* https://fontawesome.com/icons/comment?style=solid */ } .channel-list-item[data-type="query"]::before { content: "\f075"; /* https://fontawesome.com/icons/comment?style=solid */ }
.context-menu-chan::before, .context-menu-chan::before,
#sidebar .chan.channel::before { content: "\f086"; /* http://fontawesome.io/icon/comments/ */ } .channel-list-item[data-type="channel"]::before { content: "\f086"; /* http://fontawesome.io/icon/comments/ */ }
#sidebar .chan.special::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ } .channel-list-item[data-type="special"]::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
#sidebar .chan.has-draft:not(.active):not(.lobby)::before { content: "\f304"; /* https://fontawesome.com/icons/pen?style=solid */ } .channel-list-item.has-draft:not(.active)::before { content: "\f304"; /* https://fontawesome.com/icons/pen?style=solid */ }
#footer .connect::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ } #footer .connect::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
#footer .settings::before { content: "\f013"; /* http://fontawesome.io/icon/cog/ */ } #footer .settings::before { content: "\f013"; /* http://fontawesome.io/icon/cog/ */ }
@ -490,11 +493,6 @@ kbd {
height: 100%; height: 100%;
} }
#windows {
flex: 1 0 auto;
position: relative;
}
#form button, #form button,
.header button, .header button,
.reveal-password span { .reveal-password span {
@ -595,13 +593,13 @@ kbd {
display: none; display: none;
} }
#sidebar .chan, .channel-list-item,
#sidebar .empty { #sidebar .empty {
color: #b7c5d1; color: #b7c5d1;
font-size: 14px; font-size: 14px;
} }
#sidebar .chan { .channel-list-item {
display: flex; display: flex;
padding: 8px 14px; padding: 8px 14px;
position: relative; position: relative;
@ -610,14 +608,15 @@ kbd {
/* All sidebar buttons and channels/queries must be white on hover and active */ /* All sidebar buttons and channels/queries must be white on hover and active */
#sidebar button:hover, #sidebar button:hover,
#sidebar .chan:hover, .channel-list-item:hover,
.channel-list-item .active,
#sidebar .active { #sidebar .active {
color: #fff; color: #fff;
} }
/* All lobbies/channels/queries and footer buttons must have a half-transparent /* All lobbies/channels/queries and footer buttons must have a half-transparent
background on hover (unless active) */ background on hover (unless active) */
#sidebar .chan:hover, .channel-list-item:hover,
#footer button:hover { #footer button:hover {
background-color: rgba(48, 62, 74, 0.5); /* #303e4a x 50% alpha */ background-color: rgba(48, 62, 74, 0.5); /* #303e4a x 50% alpha */
} }
@ -629,10 +628,10 @@ background on hover (unless active) */
} }
/* Remove background on hovered/active channel when sorting/drag-and-dropping */ /* Remove background on hovered/active channel when sorting/drag-and-dropping */
#sidebar .chan.ui-sortable-dragged, #sidebar .channel-list-item.ui-sortable-dragged,
#sidebar .ui-sortable-dragged .chan, #sidebar .ui-sortable-dragged .channel-list-item,
#sidebar .ui-sortable-active .chan:hover, #sidebar .ui-sortable-active .channel-list-item:hover,
#sidebar .ui-sortable-active .chan.active { #sidebar .ui-sortable-active .channel-list-item.active {
background: transparent; background: transparent;
} }
@ -666,58 +665,58 @@ background on hover (unless active) */
text-align: center; text-align: center;
} }
#sidebar .chan.lobby { .channel-list-item[data-type="lobby"] {
color: #84ce88; color: #84ce88;
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
padding-left: 0; padding-left: 0;
} }
#sidebar .lobby-wrap { .channel-list-item .lobby-wrap {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
} }
#sidebar .chan.lobby .lobby-wrap:hover, .channel-list-item[data-type="lobby"] .lobby-wrap:hover,
#sidebar .chan.lobby.active { .channel-list-item[data-type="lobby"].active {
color: #c0f8c3; color: #c0f8c3;
} }
#sidebar .not-connected-tooltip, .channel-list-item .not-connected-tooltip,
#sidebar .not-secure-tooltip, .channel-list-item .not-secure-tooltip,
#sidebar .parted-channel-tooltip { .channel-list-item .parted-channel-tooltip {
margin: 0 8px; margin: 0 8px;
} }
#sidebar .not-secure .chan.lobby { #sidebar .not-secure .channel-list-item[data-type="lobby"] {
color: #f39c12; color: #f39c12;
} }
#sidebar .not-secure .chan.lobby .lobby-wrap:hover, #sidebar .not-secure .channel-list-item[data-type="lobby"] .lobby-wrap:hover,
#sidebar .not-secure .chan.lobby.active { #sidebar .not-secure .channel-list-item[data-type="lobby"].active {
color: #f8c572; color: #f8c572;
} }
#sidebar .not-connected .chan.lobby, #sidebar .not-connected .channel-list-item[data-type="lobby"],
#sidebar .parted-channel { .channel-list-item.parted-channel {
color: #e74c3c; color: #e74c3c;
} }
#sidebar .not-connected .chan.lobby .lobby-wrap:hover, #sidebar .not-connected .channel-list-item[data-type="lobby"] .lobby-wrap:hover,
#sidebar .not-connected .chan.lobby.active, #sidebar .not-connected .channel-list-item[data-type="lobby"].active,
#sidebar .parted-channel:hover, .channel-list-item.parted-channel:hover,
#sidebar .parted-channel.active { .channel-list-item.parted-channel.active {
color: #f1978e; color: #f1978e;
} }
#sidebar .chan::before { .channel-list-item::before {
width: 14px; width: 14px;
margin-right: 12px; margin-right: 12px;
line-height: 18px; line-height: 18px;
} }
#sidebar .chan .name { .channel-list-item .name {
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
@ -725,14 +724,14 @@ background on hover (unless active) */
margin-right: 5px; margin-right: 5px;
} }
#windows .header .topic, .header .topic,
#sidebar .chan .name { .channel-list-item .name {
mask-image: linear-gradient(to left, transparent, black 20px); mask-image: linear-gradient(to left, transparent, black 20px);
} }
#sidebar .badge, #sidebar .badge,
#sidebar .add-channel-tooltip, #sidebar .add-channel-tooltip,
#sidebar .close-tooltip { .channel-list-item .close-tooltip {
flex-shrink: 0; flex-shrink: 0;
line-height: 1; line-height: 1;
} }
@ -755,14 +754,14 @@ background on hover (unless active) */
color: #49505a; color: #49505a;
} }
#sidebar .close { .channel-list-item .close {
width: 18px; width: 18px;
height: 18px; height: 18px;
display: none; display: none;
transition: opacity 0.2s, background-color 0.2s; transition: opacity 0.2s, background-color 0.2s;
} }
#sidebar .close::before { .channel-list-item .close::before {
font-size: 20px; font-size: 20px;
font-weight: normal; font-weight: normal;
display: inline-block; display: inline-block;
@ -772,7 +771,7 @@ background on hover (unless active) */
color: #fff; color: #fff;
} }
#sidebar .lobby .add-channel { .channel-list-item[data-type="lobby"] .add-channel {
border-radius: 3px; border-radius: 3px;
width: 18px; width: 18px;
height: 18px; height: 18px;
@ -780,7 +779,7 @@ background on hover (unless active) */
transition: opacity 0.2s, background-color 0.2s, transform 0.2s; transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
} }
#sidebar .lobby .add-channel::before { .channel-list-item[data-type="lobby"] .add-channel::before {
font-size: 20px; font-size: 20px;
font-weight: normal; font-weight: normal;
display: inline-block; display: inline-block;
@ -790,11 +789,11 @@ background on hover (unless active) */
color: #fff; color: #fff;
} }
#sidebar .lobby .add-channel:hover { .channel-list-item[data-type="lobby"] .add-channel:hover {
opacity: 1; opacity: 1;
} }
#sidebar .lobby .add-channel.opened { .channel-list-item[data-type="lobby"] .add-channel.opened {
/* translateZ(0) enables hardware acceleration, this is to avoid jittering when animating */ /* translateZ(0) enables hardware acceleration, this is to avoid jittering when animating */
transform: rotate(45deg) translateZ(0); transform: rotate(45deg) translateZ(0);
} }
@ -826,16 +825,16 @@ background on hover (unless active) */
opacity: 1; opacity: 1;
} }
#sidebar .chan.active { .channel-list-item.active {
cursor: default; cursor: default;
} }
#sidebar .chan.active .close { .channel-list-item.active .close {
opacity: 0.4; opacity: 0.4;
display: unset; display: unset;
} }
#sidebar .chan.active .close:hover { .channel-list-item.active .close:hover {
opacity: 1; opacity: 1;
} }
@ -855,9 +854,9 @@ background on hover (unless active) */
border-radius: 5px; border-radius: 5px;
} }
#windows li, .window li,
#windows p, .window p,
#windows label, .window label,
#settings .error { #settings .error {
font-size: 14px; font-size: 14px;
} }
@ -897,6 +896,8 @@ background on hover (unless active) */
background: var(--window-bg-color); background: var(--window-bg-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 0 auto;
position: relative;
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
scrollbar-width: thin; scrollbar-width: thin;
@ -904,8 +905,8 @@ background on hover (unless active) */
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
#chat .chan, #loading,
.window { #chat .chat-view {
/* flexbox does not seem to scroll without doing this */ /* flexbox does not seem to scroll without doing this */
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -914,11 +915,11 @@ background on hover (unless active) */
top: 0; top: 0;
} }
#windows .window h1 { .window h1 {
font-size: 36px; font-size: 36px;
} }
#windows .window h2 { .window h2 {
border-bottom: 1px solid currentColor; border-bottom: 1px solid currentColor;
color: var(--window-heading-color); color: var(--window-heading-color);
font-size: 22px; font-size: 22px;
@ -926,18 +927,18 @@ background on hover (unless active) */
padding-bottom: 7px; padding-bottom: 7px;
} }
#windows .window h2 small { .window h2 small {
color: inherit; color: inherit;
line-height: 30px; line-height: 30px;
} }
#windows .window h3 { .window h3 {
color: var(--window-heading-color); color: var(--window-heading-color);
font-size: 18px; font-size: 18px;
margin: 20px 0 10px; margin: 20px 0 10px;
} }
#windows .header { .header {
line-height: 45px; line-height: 45px;
height: 45px; height: 45px;
padding: 0 6px; padding: 0 6px;
@ -946,11 +947,11 @@ background on hover (unless active) */
overflow: hidden; overflow: hidden;
} }
#windows #chat .header { #chat .header {
border-bottom: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7;
} }
#windows .header .title { .header .title {
font-size: 15px; font-size: 15px;
padding-left: 6px; padding-left: 6px;
flex-shrink: 0; flex-shrink: 0;
@ -962,7 +963,7 @@ background on hover (unless active) */
padding-left: 10px; padding-left: 10px;
} }
#windows .header .topic { .header .topic {
color: var(--body-color-muted); color: var(--body-color-muted);
margin-left: 8px; margin-left: 8px;
word-break: break-all; word-break: break-all;
@ -971,7 +972,7 @@ background on hover (unless active) */
font-size: 14px; font-size: 14px;
} }
#windows .header .topic-input { .header .topic-input {
color: inherit; color: inherit;
background: transparent; background: transparent;
border: 1px solid #cdd3da; border: 1px solid #cdd3da;
@ -1012,13 +1013,9 @@ background on hover (unless active) */
position: relative; position: relative;
} }
#chat .chan { #chat .chat-view {
display: none;
flex-direction: column;
}
#chat .chan.active {
display: flex; display: flex;
flex-direction: column;
} }
#chat .condensed { #chat .condensed {
@ -1056,7 +1053,7 @@ background on hover (unless active) */
visibility: hidden; visibility: hidden;
} }
#windows #form, #form,
.messages .msg, .messages .msg,
.userlist { .userlist {
font-size: 14px; font-size: 14px;
@ -1165,7 +1162,7 @@ background on hover (unless active) */
content: "\f107"; /* https://fontawesome.com/icons/angle-down?style=solid */ content: "\f107"; /* https://fontawesome.com/icons/angle-down?style=solid */
} }
.userlist-open .channel .scroll-down { .userlist-open .chat-view[data-type="channel"] .scroll-down {
right: 196px; right: 196px;
} }
@ -1174,7 +1171,7 @@ background on hover (unless active) */
touch-action: pan-y; touch-action: pan-y;
} }
#chat .chan:not(.special) .messages { #chat .chat-view:not([data-type="special"]) .messages {
margin-top: auto; margin-top: auto;
} }
@ -1283,7 +1280,7 @@ background on hover (unless active) */
color: var(--body-color-muted); color: var(--body-color-muted);
} }
#chat .special table th { #chat .chat-view[data-type="special"] table th {
word-break: normal; word-break: normal;
} }
@ -1367,8 +1364,7 @@ background on hover (unless active) */
#chat table.ignore-list th, #chat table.ignore-list th,
#chat table.channel-list td, #chat table.channel-list td,
#chat table.ban-list td, #chat table.ban-list td,
#chat table.invite-list td, #chat table.invite-list td {
#chat.table.ignore-list td {
padding: 5px; padding: 5px;
vertical-align: top; vertical-align: top;
border-bottom: #eee 1px solid; border-bottom: #eee 1px solid;
@ -1426,7 +1422,7 @@ background on hover (unless active) */
#chat .notice .time, #chat .notice .time,
#chat .notice .content, #chat .notice .content,
#chat .chan .notice .user { #chat .chat-view .notice .user {
color: #0074d9 !important; color: #0074d9 !important;
} }
@ -1439,22 +1435,22 @@ background on hover (unless active) */
color: #e74c3c; color: #e74c3c;
} }
#chat .channel .msg.highlight { #chat .chat-view[data-type="channel"] .msg.highlight {
background-color: var(--highlight-bg-color); background-color: var(--highlight-bg-color);
border-left: 5px solid var(--highlight-border-color); border-left: 5px solid var(--highlight-border-color);
} }
#chat .channel .msg.highlight .time { #chat .chat-view[data-type="channel"] .msg.highlight .time {
padding-left: 5px; padding-left: 5px;
width: 50px; width: 50px;
color: #696969; color: #696969;
} }
#chat.show-seconds .channel .msg.highlight .time { #chat.show-seconds .chat-view[data-type="channel"] .msg.highlight .time {
width: 70px; width: 70px;
} }
#chat .channel .msg.highlight .content { #chat .chat-view[data-type="channel"] .msg.highlight .content {
border-left: 1px solid var(--highlight-bg-color); border-left: 1px solid var(--highlight-bg-color);
} }
@ -1675,6 +1671,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
} }
#loading { #loading {
display: flex;
font-size: 14px; font-size: 14px;
height: 100%; height: 100%;
} }
@ -1683,10 +1680,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
height: initial; height: initial;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
bottom: 5px;
left: 5px;
right: 5px;
top: 5px;
} }
#loading p { #loading p {
@ -1724,7 +1717,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
} }
#loading .logo-inverted, #loading .logo-inverted,
#windows .logo-inverted { .window .logo-inverted {
display: none; /* In dark themes, inverted logo must be used instead */ display: none; /* In dark themes, inverted logo must be used instead */
} }
@ -2019,6 +2012,9 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
width: 0%; width: 0%;
height: 2px; height: 2px;
visibility: hidden; visibility: hidden;
position: absolute;
top: -1px; /* put it on top of #form's border */
left: 0;
} }
#upload-progressbar.upload-progressbar-visible { #upload-progressbar.upload-progressbar-visible {
@ -2036,6 +2032,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
background: white; background: white;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
position: relative;
} }
#user-visible-error { #user-visible-error {
@ -2439,10 +2436,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
} }
#sidebar button, #sidebar button,
#sidebar .chan, .channel-list-item,
#sidebar .empty, #sidebar .empty,
#windows label, .window label,
#windows .header .topic, .header .topic,
#settings .error, #settings .error,
#help .help-item, #help .help-item,
#loading, #loading,
@ -2470,7 +2467,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: rgba(0, 0, 0, 0.5); background: var(--overlay-bg-color);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: opacity 160ms, visibility 160ms; transition: opacity 160ms, visibility 160ms;
@ -2500,11 +2497,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
visibility: visible; visibility: visible;
} }
#viewport .lt,
#viewport .channel .rt {
display: flex;
}
/* On mobile display, channel list button stays at the top */ /* On mobile display, channel list button stays at the top */
#viewport .lt { #viewport .lt {
position: relative; position: relative;
@ -2546,7 +2538,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
margin: 20px 0; margin: 20px 0;
} }
#windows .input { .input {
margin-bottom: 2px; margin-bottom: 2px;
} }
@ -2578,11 +2570,11 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
white-space: pre; white-space: pre;
} }
#chat .channel .msg.highlight { #chat .chat-view[data-type="channel"] .msg.highlight {
padding-left: 5px; padding-left: 5px;
} }
#chat .channel .msg.highlight .time { #chat .chat-view[data-type="channel"] .msg.highlight .time {
padding-left: 0; padding-left: 0;
} }
@ -2639,7 +2631,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: black; background: var(--overlay-bg-color);
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity 0.2s, visibility 0.2s; transition: opacity 0.2s, visibility 0.2s;
@ -2654,7 +2646,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#upload-overlay.is-dragover { #upload-overlay.is-dragover {
visibility: visible; visibility: visible;
opacity: 0.3; opacity: 1;
} }
#image-viewer .close-btn, #image-viewer .close-btn,
@ -2724,7 +2716,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
/* Correctly handle multiple successive whitespace characters. /* Correctly handle multiple successive whitespace characters.
For example: user has quit ( ===> L O L <=== ) */ For example: user has quit ( ===> L O L <=== ) */
#windows .header .topic, .header .topic,
#chat .message .content, #chat .message .content,
#chat .motd .content, #chat .motd .content,
#chat .notice .content, #chat .notice .content,

6
client/js/keybinds.js
View File

@ -98,7 +98,9 @@ function jumpToChannel(targetChannel) {
switchToChannel(targetChannel); switchToChannel(targetChannel);
scrollIntoViewNicely( scrollIntoViewNicely(
document.querySelector(`#sidebar .chan[aria-controls="#chan-${targetChannel.id}"]`) document.querySelector(
`#sidebar .channel-list-item[aria-controls="#chan-${targetChannel.id}"]`
)
); );
} }
@ -152,7 +154,7 @@ document.addEventListener("keydown", (e) => {
// Redirect pagedown/pageup keys to messages container so it scrolls // Redirect pagedown/pageup keys to messages container so it scrolls
if (e.which === 33 || e.which === 34) { if (e.which === 33 || e.which === 34) {
const chat = document.querySelector("#windows .chan.active .chat"); const chat = document.querySelector("#windows .chat-content .chat");
if (chat) { if (chat) {
chat.focus(); chat.focus();

2
client/js/vue.js
View File

@ -32,7 +32,7 @@ const vueApp = new Vue({
closeChannel(channel) { closeChannel(channel) {
if (channel.type === "lobby") { if (channel.type === "lobby") {
const el = document.querySelector( const el = document.querySelector(
`#sidebar .chan[aria-controls="#chan-${channel.id}"]` `#sidebar .channel-list-item[aria-controls="#chan-${channel.id}"]`
); );
const rect = el.getBoundingClientRect(); const rect = el.getBoundingClientRect();
const event = new MouseEvent("click", { const event = new MouseEvent("click", {

10
client/themes/default.css
View File

@ -1,3 +1,7 @@
#loading .window {
margin: 5px;
}
#viewport { #viewport {
padding: 5px; padding: 5px;
} }
@ -12,6 +16,10 @@
} }
@media (max-width: 768px) { @media (max-width: 768px) {
#loading .window {
margin: 0;
}
#viewport, #viewport,
#viewport.menu-open { #viewport.menu-open {
padding: 0; padding: 0;
@ -21,7 +29,7 @@
border-radius: 0; border-radius: 0;
} }
#windows .window { .window {
border-radius: 0; border-radius: 0;
} }
} }

10
client/themes/morning.css
View File

@ -16,17 +16,17 @@ body {
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05); scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);
} }
#chat .channel .msg.highlight .time { #chat .chat-view[data-type="channel"] .msg.highlight .time {
color: white; color: white;
} }
#loading .logo, #loading .logo,
#windows .logo { .window .logo {
display: none; display: none;
} }
#loading .logo-inverted, #loading .logo-inverted,
#windows .logo-inverted { .window .logo-inverted {
display: inline-block; display: inline-block;
} }
@ -40,7 +40,7 @@ body {
/* Borders */ /* Borders */
#chat .content, #chat .content,
#windows #chat .header, #chat .header,
#chat .user-mode::before, #chat .user-mode::before,
#chat .userlist { #chat .userlist {
border-color: #28333d; border-color: #28333d;
@ -106,7 +106,7 @@ body {
color: #f3f3f3; color: #f3f3f3;
} }
#windows .window { .window {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.75); box-shadow: 0 0 25px rgba(0, 0, 0, 0.75);
} }