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

Merge pull request #3574 from thelounge/xpaw/normalize.css

Browse Source 
Remove bootstrap.css, use flexbox
This commit is contained in:
Pavel Djundik 2019-12-14 22:37:37 +02:00 committed by GitHub
commit ead372e6e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 694 additions and 1887 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/MessageList.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div ref="chat" class="chat" tabindex="-1"> <div ref="chat" class="chat" tabindex="-1">
<div :class="['show-more', {show: channel.moreHistoryAvailable}]"> <div v-show="channel.moreHistoryAvailable" class="show-more">
<button <button
ref="loadMoreButton" ref="loadMoreButton"
:disabled="channel.historyLoading || !$store.state.isConnected" :disabled="channel.historyLoading || !$store.state.isConnected"

73
client/components/NetworkForm.vue
View File

@ -4,8 +4,6 @@
<SidebarToggle /> <SidebarToggle />
</div> </div>
<form class="container" method="post" action="" @submit.prevent="onSubmit"> <form class="container" method="post" action="" @submit.prevent="onSubmit">
<div class="row">
<div class="col-sm-12">
<h1 class="title"> <h1 class="title">
<template v-if="defaults.uuid"> <template v-if="defaults.uuid">
<input type="hidden" name="uuid" :value="defaults.uuid" /> <input type="hidden" name="uuid" :value="defaults.uuid" />
@ -15,22 +13,14 @@
<template v-if="config.public">The Lounge - </template> <template v-if="config.public">The Lounge - </template>
Connect Connect
<template v-if="!config.displayNetwork"> <template v-if="!config.displayNetwork">
<template v-if="config.lockNetwork"> <template v-if="config.lockNetwork"> to {{ defaults.name }} </template>
to {{ defaults.name }}
</template>
</template> </template>
</template> </template>
</h1> </h1>
</div>
<template v-if="config.displayNetwork"> <template v-if="config.displayNetwork">
<div>
<div class="col-sm-12">
<h2>Network settings</h2> <h2>Network settings</h2>
</div> <div class="connect-row">
<div class="col-sm-3">
<label for="connect:name">Name</label> <label for="connect:name">Name</label>
</div>
<div class="col-sm-9">
<input <input
id="connect:name" id="connect:name"
class="input" class="input"
@ -39,10 +29,9 @@
maxlength="100" maxlength="100"
/> />
</div> </div>
<div class="col-sm-3"> <div class="connect-row">
<label for="connect:host">Server</label> <label for="connect:host">Server</label>
</div> <div class="input-wrap">
<div class="col-sm-6 col-xs-8">
<input <input
id="connect:host" id="connect:host"
class="input" class="input"
@ -53,10 +42,9 @@
required required
:disabled="config.lockNetwork ? true : false" :disabled="config.lockNetwork ? true : false"
/> />
</div> <span id="connect:portseparator">:</span>
<div class="col-sm-3 col-xs-4">
<div class="port">
<input <input
id="connect:port"
class="input" class="input"
type="number" type="number"
min="1" min="1"
@ -68,8 +56,9 @@
/> />
</div> </div>
</div> </div>
<div class="clearfix" /> <div class="connect-row">
<div class="col-sm-9 col-sm-offset-3"> <label></label>
<div class="input-wrap">
<label class="tls"> <label class="tls">
<input <input
type="checkbox" type="checkbox"
@ -79,8 +68,6 @@
/> />
Use secure connection (TLS) Use secure connection (TLS)
</label> </label>
</div>
<div class="col-sm-9 col-sm-offset-3">
<label class="tls"> <label class="tls">
<input <input
type="checkbox" type="checkbox"
@ -91,16 +78,12 @@
Only allow trusted certificates Only allow trusted certificates
</label> </label>
</div> </div>
<div class="clearfix" />
</div> </div>
</template> </template>
<div class="col-sm-12">
<h2>User preferences</h2> <h2>User preferences</h2>
</div> <div class="connect-row">
<div class="col-sm-3">
<label for="connect:nick">Nick</label> <label for="connect:nick">Nick</label>
</div>
<div class="col-sm-9">
<input <input
id="connect:nick" id="connect:nick"
class="input nick" class="input nick"
@ -112,10 +95,8 @@
/> />
</div> </div>
<template v-if="!config.useHexIp"> <template v-if="!config.useHexIp">
<div class="col-sm-3"> <div class="connect-row">
<label for="connect:username">Username</label> <label for="connect:username">Username</label>
</div>
<div class="col-sm-9">
<input <input
id="connect:username" id="connect:username"
ref="usernameInput" ref="usernameInput"
@ -126,11 +107,9 @@
/> />
</div> </div>
</template> </template>
<div class="col-sm-3"> <div class="connect-row">
<label for="connect:password">Password</label> <label for="connect:password">Password</label>
</div> <RevealPassword v-slot:default="slotProps" class="input-wrap password-container">
<div class="col-sm-9 password-container">
<RevealPassword v-slot:default="slotProps">
<input <input
id="connect:password" id="connect:password"
v-model="defaults.password" v-model="defaults.password"
@ -141,10 +120,8 @@
/> />
</RevealPassword> </RevealPassword>
</div> </div>
<div class="col-sm-3"> <div class="connect-row">
<label for="connect:realname">Real name</label> <label for="connect:realname">Real name</label>
</div>
<div class="col-sm-9">
<input <input
id="connect:realname" id="connect:realname"
class="input" class="input"
@ -154,10 +131,8 @@
/> />
</div> </div>
<template v-if="defaults.uuid"> <template v-if="defaults.uuid">
<div class="col-sm-3"> <div class="connect-row">
<label for="connect:commands">Commands</label> <label for="connect:commands">Commands</label>
</div>
<div class="col-sm-9">
<textarea <textarea
id="connect:commands" id="connect:commands"
class="input" class="input"
@ -166,31 +141,23 @@
:value="defaults.commands ? defaults.commands.join('\n') : ''" :value="defaults.commands ? defaults.commands.join('\n') : ''"
/> />
</div> </div>
<div class="col-sm-9 col-sm-offset-3"> <div>
<button type="submit" class="btn" :disabled="disabled ? true : false"> <button type="submit" class="btn" :disabled="disabled ? true : false">
Save Save
</button> </button>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="col-sm-3"> <div class="connect-row">
<label for="connect:channels">Channels</label> <label for="connect:channels">Channels</label>
<input id="connect:channels" class="input" name="join" :value="defaults.join" />
</div> </div>
<div class="col-sm-9"> <div>
<input
id="connect:channels"
class="input"
name="join"
:value="defaults.join"
/>
</div>
<div class="col-sm-9 col-sm-offset-3">
<button type="submit" class="btn" :disabled="disabled ? true : false"> <button type="submit" class="btn" :disabled="disabled ? true : false">
Connect Connect
</button> </button>
</div> </div>
</template> </template>
</div>
</form> </form>
</div> </div>
</template> </template>

32
client/components/Session.vue
View File

@ -1,14 +1,6 @@
<template> <template>
<p> <div class="session-item">
<button class="btn pull-right remove-session" @click.prevent="signOut"> <div class="session-item-info">
<template v-if="session.current">
Sign out
</template>
<template v-else>
Revoke
</template>
</button>
<strong>{{ session.agent }}</strong> <strong>{{ session.agent }}</strong>
<a :href="'https://ipinfo.io/' + session.ip" target="_blank" rel="noopener">{{ <a :href="'https://ipinfo.io/' + session.ip" target="_blank" rel="noopener">{{
@ -16,15 +8,21 @@
}}</a> }}</a>
<template v-if="!session.current"> <template v-if="!session.current">
<br /> <p v-if="session.active">
<template v-if="session.active">
<em>Currently active</em> <em>Currently active</em>
</template>
<template v-else>
Last used on <time>{{ session.lastUse | localetime }}</time>
</template>
</template>
</p> </p>
<p v-else>
Last used on <time>{{ session.lastUse | localetime }}</time>
</p>
</template>
</div>
<div class="session-item-btn">
<button class="btn" @click.prevent="signOut">
<template v-if="session.current">Sign out</template>
<template v-else>Revoke</template>
</button>
</div>
</div>
</template> </template>
<script> <script>

6
client/components/Windows/Help.vue
View File

@ -6,15 +6,15 @@
<div class="container"> <div class="container">
<h1 class="title">Help</h1> <h1 class="title">Help</h1>
<h2> <h2 class="help-version-title">
<small class="pull-right"> <span>About The Lounge</span>
<small>
v{{ $store.state.serverConfiguration.version }} (<router-link v{{ $store.state.serverConfiguration.version }} (<router-link
id="view-changelog" id="view-changelog"
to="/changelog" to="/changelog"
>release notes</router-link >release notes</router-link
>) >)
</small> </small>
About The Lounge
</h2> </h2>
<div class="about"> <div class="about">

128
client/components/Windows/Settings.vue
View File

@ -6,8 +6,7 @@
<form ref="settingsForm" class="container" @change="onChange" @submit.prevent> <form ref="settingsForm" class="container" @change="onChange" @submit.prevent>
<h1 class="title">Settings</h1> <h1 class="title">Settings</h1>
<div class="row"> <div>
<div class="col-sm-6">
<label class="opt"> <label class="opt">
<input <input
:checked="$store.state.settings.advanced" :checked="$store.state.settings.advanced"
@ -17,10 +16,8 @@
Advanced settings Advanced settings
</label> </label>
</div> </div>
</div>
<div class="row"> <div v-if="canRegisterProtocol || hasInstallPromptEvent">
<div v-if="canRegisterProtocol || hasInstallPromptEvent" class="col-sm-12">
<h2>Native app</h2> <h2>Native app</h2>
<button <button
v-if="hasInstallPromptEvent" v-if="hasInstallPromptEvent"
@ -40,24 +37,8 @@
</button> </button>
</div> </div>
<div <div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
v-if=" <h2>Settings synchronisation</h2>
!$store.state.serverConfiguration.public && $store.state.settings.advanced
"
class="col-sm-12"
>
<h2>
Settings synchronisation
<span
class="tooltipped tooltipped-n tooltipped-no-delay"
aria-label="Note: This is an experimental feature and may change in future releases."
>
<button
class="extra-experimental"
aria-label="Note: This is an experimental feature and may change in future releases."
/>
</span>
</h2>
<label class="opt"> <label class="opt">
<input <input
:checked="$store.state.settings.syncSettings" :checked="$store.state.settings.syncSettings"
@ -69,8 +50,8 @@
<template v-if="!$store.state.settings.syncSettings"> <template v-if="!$store.state.settings.syncSettings">
<div v-if="$store.state.serverHasSettings" class="settings-sync-panel"> <div v-if="$store.state.serverHasSettings" class="settings-sync-panel">
<p> <p>
<strong>Warning:</strong> Checking this box will override the <strong>Warning:</strong> Checking this box will override the settings
settings of this client with those stored on the server. of this client with those stored on the server.
</p> </p>
<p> <p>
Use the button below to enable synchronization, and override any Use the button below to enable synchronization, and override any
@ -82,24 +63,22 @@
</div> </div>
<div v-else class="settings-sync-panel"> <div v-else class="settings-sync-panel">
<p> <p>
<strong>Warning:</strong> No settings have been synced before. <strong>Warning:</strong> No settings have been synced before. Enabling
Enabling this will sync all settings of this client as the base for this will sync all settings of this client as the base for other
other clients. clients.
</p> </p>
</div> </div>
</template> </template>
</div> </div>
<div class="col-sm-12">
<h2>Messages</h2> <h2>Messages</h2>
</div> <div>
<div class="col-sm-6">
<label class="opt"> <label class="opt">
<input :checked="$store.state.settings.motd" type="checkbox" name="motd" /> <input :checked="$store.state.settings.motd" type="checkbox" name="motd" />
Show <abbr title="Message Of The Day">MOTD</abbr> Show <abbr title="Message Of The Day">MOTD</abbr>
</label> </label>
</div> </div>
<div class="col-sm-6"> <div>
<label class="opt"> <label class="opt">
<input <input
:checked="$store.state.settings.showSeconds" :checked="$store.state.settings.showSeconds"
@ -109,7 +88,7 @@
Show seconds in timestamp Show seconds in timestamp
</label> </label>
</div> </div>
<div v-if="$store.state.settings.advanced" class="col-sm-12"> <div v-if="$store.state.settings.advanced">
<h2>Automatic away message</h2> <h2>Automatic away message</h2>
<label class="opt"> <label class="opt">
@ -124,7 +103,6 @@
/> />
</label> </label>
</div> </div>
<div class="col-sm-12">
<h2> <h2>
Status messages Status messages
<span <span
@ -137,8 +115,7 @@
/> />
</span> </span>
</h2> </h2>
</div> <div>
<div class="col-sm-12">
<label class="opt"> <label class="opt">
<input <input
:checked="$store.state.settings.statusMessages === 'shown'" :checked="$store.state.settings.statusMessages === 'shown'"
@ -167,10 +144,8 @@
Hide all status messages Hide all status messages
</label> </label>
</div> </div>
<div class="col-sm-12">
<h2>Visual Aids</h2> <h2>Visual Aids</h2>
</div> <div>
<div class="col-sm-12">
<label class="opt"> <label class="opt">
<input <input
:checked="$store.state.settings.coloredNicks" :checked="$store.state.settings.coloredNicks"
@ -188,7 +163,7 @@
Enable autocomplete Enable autocomplete
</label> </label>
</div> </div>
<div v-if="$store.state.settings.advanced" class="col-sm-12"> <div v-if="$store.state.settings.advanced">
<label class="opt"> <label class="opt">
<label for="nickPostfix" class="sr-only"> <label for="nickPostfix" class="sr-only">
Nick autocomplete postfix (e.g. <code>, </code>) Nick autocomplete postfix (e.g. <code>, </code>)
@ -204,10 +179,8 @@
</label> </label>
</div> </div>
<div class="col-sm-12">
<h2>Theme</h2> <h2>Theme</h2>
</div> <div>
<div class="col-sm-12">
<label for="theme-select" class="sr-only">Theme</label> <label for="theme-select" class="sr-only">Theme</label>
<select <select
id="theme-select" id="theme-select"
@ -226,10 +199,8 @@
</div> </div>
<template v-if="$store.state.serverConfiguration.prefetch"> <template v-if="$store.state.serverConfiguration.prefetch">
<div class="col-sm-12">
<h2>Link previews</h2> <h2>Link previews</h2>
</div> <div>
<div class="col-sm-6">
<label class="opt"> <label class="opt">
<input <input
:checked="$store.state.settings.media" :checked="$store.state.settings.media"
@ -239,7 +210,7 @@
Auto-expand media Auto-expand media
</label> </label>
</div> </div>
<div class="col-sm-6"> <div>
<label class="opt"> <label class="opt">
<input <input
:checked="$store.state.settings.links" :checked="$store.state.settings.links"
@ -252,10 +223,8 @@
</template> </template>
<template v-if="!$store.state.serverConfiguration.public"> <template v-if="!$store.state.serverConfiguration.public">
<div class="col-sm-12">
<h2>Push Notifications</h2> <h2>Push Notifications</h2>
</div> <div>
<div class="col-sm-12">
<button <button
id="pushNotifications" id="pushNotifications"
type="button" type="button"
@ -277,23 +246,18 @@
</template> </template>
</button> </button>
<div v-if="$store.state.pushNotificationState === 'nohttps'" class="error"> <div v-if="$store.state.pushNotificationState === 'nohttps'" class="error">
<strong>Warning</strong>: Push notifications are only supported over <strong>Warning</strong>: Push notifications are only supported over HTTPS
HTTPS connections. connections.
</div> </div>
<div <div v-if="$store.state.pushNotificationState === 'unsupported'" class="error">
v-if="$store.state.pushNotificationState === 'unsupported'"
class="error"
>
<strong>Warning</strong>: <strong>Warning</strong>:
<span>Push notifications are not supported by your browser.</span> <span>Push notifications are not supported by your browser.</span>
</div> </div>
</div> </div>
</template> </template>
<div class="col-sm-12">
<h2>Browser Notifications</h2> <h2>Browser Notifications</h2>
</div> <div>
<div class="col-sm-12">
<label class="opt"> <label class="opt">
<input <input
id="desktopNotifications" id="desktopNotifications"
@ -306,8 +270,7 @@
v-if="$store.state.desktopNotificationState === 'unsupported'" v-if="$store.state.desktopNotificationState === 'unsupported'"
class="error" class="error"
> >
<strong>Warning</strong>: Notifications are not supported by your <strong>Warning</strong>: Notifications are not supported by your browser.
browser.
</div> </div>
<div <div
v-if="$store.state.desktopNotificationState === 'blocked'" v-if="$store.state.desktopNotificationState === 'blocked'"
@ -318,7 +281,7 @@
</div> </div>
</label> </label>
</div> </div>
<div class="col-sm-12"> <div>
<label class="opt"> <label class="opt">
<input <input
:checked="$store.state.settings.notification" :checked="$store.state.settings.notification"
@ -328,13 +291,13 @@
Enable notification sound Enable notification sound
</label> </label>
</div> </div>
<div class="col-sm-12"> <div>
<div class="opt"> <div class="opt">
<button id="play" @click.prevent="playNotification">Play sound</button> <button id="play" @click.prevent="playNotification">Play sound</button>
</div> </div>
</div> </div>
<div v-if="$store.state.settings.advanced" class="col-sm-12"> <div v-if="$store.state.settings.advanced">
<label class="opt"> <label class="opt">
<input <input
:checked="$store.state.settings.notifyAllMessages" :checked="$store.state.settings.notifyAllMessages"
@ -345,7 +308,7 @@
</label> </label>
</div> </div>
<div v-if="$store.state.settings.advanced" class="col-sm-12"> <div v-if="$store.state.settings.advanced">
<label class="opt"> <label class="opt">
<label for="highlights" class="sr-only"> <label for="highlights" class="sr-only">
Custom highlights (comma-separated keywords) Custom highlights (comma-separated keywords)
@ -368,10 +331,8 @@
" "
id="change-password" id="change-password"
> >
<div class="col-sm-12">
<h2>Change password</h2> <h2>Change password</h2>
</div> <div class="password-container">
<div class="col-sm-12 password-container">
<label for="old_password_input" class="sr-only"> <label for="old_password_input" class="sr-only">
Enter current password Enter current password
</label> </label>
@ -385,7 +346,7 @@
/> />
</RevealPassword> </RevealPassword>
</div> </div>
<div class="col-sm-12 password-container"> <div class="password-container">
<label for="new_password_input" class="sr-only"> <label for="new_password_input" class="sr-only">
Enter desired new password Enter desired new password
</label> </label>
@ -399,7 +360,7 @@
/> />
</RevealPassword> </RevealPassword>
</div> </div>
<div class="col-sm-12 password-container"> <div class="password-container">
<label for="verify_password_input" class="sr-only"> <label for="verify_password_input" class="sr-only">
Repeat new password Repeat new password
</label> </label>
@ -415,27 +376,25 @@
</div> </div>
<div <div
v-if="passwordChangeStatus && passwordChangeStatus.success" v-if="passwordChangeStatus && passwordChangeStatus.success"
class="col-sm-12 feedback success" class="feedback success"
> >
Successfully updated your password Successfully updated your password
</div> </div>
<div <div
v-else-if="passwordChangeStatus && passwordChangeStatus.error" v-else-if="passwordChangeStatus && passwordChangeStatus.error"
class="col-sm-12 feedback error" class="feedback error"
> >
{{ passwordErrors[passwordChangeStatus.error] }} {{ passwordErrors[passwordChangeStatus.error] }}
</div> </div>
<div class="col-sm-12"> <div>
<button type="submit" class="btn" @click.prevent="changePassword"> <button type="submit" class="btn" @click.prevent="changePassword">
Change password Change password
</button> </button>
</div> </div>
</div> </div>
<div v-if="$store.state.settings.advanced" class="col-sm-12"> <div v-if="$store.state.settings.advanced">
<h2>Custom Stylesheet</h2> <h2>Custom Stylesheet</h2>
</div>
<div v-if="$store.state.settings.advanced" class="col-sm-12">
<label for="user-specified-css-input" class="sr-only"> <label for="user-specified-css-input" class="sr-only">
Custom stylesheet. You can override any style with CSS here. Custom stylesheet. You can override any style with CSS here.
</label> </label>
@ -447,30 +406,27 @@
placeholder="/* You can override any style with CSS here */" placeholder="/* You can override any style with CSS here */"
/> />
</div> </div>
</div>
<div v-if="!$store.state.serverConfiguration.public" class="session-list"> <div v-if="!$store.state.serverConfiguration.public" class="session-list">
<h2>Sessions</h2> <h2>Sessions</h2>
<h3>Current session</h3> <h3>Current session</h3>
<div v-if="$store.getters.currentSession" id="session-current"> <Session
<Session :session="$store.getters.currentSession" /> v-if="$store.getters.currentSession"
</div> :session="$store.getters.currentSession"
/>
<h3>Other sessions</h3> <h3>Other sessions</h3>
<div id="session-list"> <p v-if="$store.state.sessions.length === 0">Loading…</p>
<p v-if="$store.state.sessions.length == 0">Loading…</p> <p v-else-if="$store.getters.otherSessions.length === 0">
<p v-else-if="$store.getters.otherSessions.length == 0">
<em>You are not currently logged in to any other device.</em> <em>You are not currently logged in to any other device.</em>
</p> </p>
<template v-else>
<Session <Session
v-for="session in $store.getters.otherSessions" v-for="session in $store.getters.otherSessions"
v-else
:key="session.token" :key="session.token"
:session="session" :session="session"
/> />
</template>
</div>
</div> </div>
</form> </form>
</div> </div>

1189
client/css/bootstrap.css vendored
View File

File diff suppressed because it is too large Load Diff

173
client/css/style.css
View File

@ -1,5 +1,5 @@
@import "../../node_modules/normalize.css/normalize.css";
@import "fontawesome.css"; @import "fontawesome.css";
@import "bootstrap.css";
@import "../../node_modules/primer-tooltips/build/build.css"; @import "../../node_modules/primer-tooltips/build/build.css";
:root { :root {
@ -47,6 +47,43 @@
opacity: 1; /* fix opacity in Firefox */ opacity: 1; /* fix opacity in Firefox */
} }
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
input,
button,
select,
textarea {
font: inherit;
color: inherit;
}
img {
vertical-align: middle;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
abbr[title] {
cursor: help;
}
html, html,
body { body {
height: 100%; height: 100%;
@ -73,22 +110,17 @@ a,
a:hover, a:hover,
a:focus { a:focus {
color: var(--link-color); color: var(--link-color);
text-decoration: none;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
/** a:focus {
* From Normalize. See https://github.com/thelounge/thelounge/pull/1217 outline: thin dotted;
* 1. Remove the bottom border in Chrome 57- and Firefox 39-. outline: 5px auto -webkit-focus-ring-color;
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. outline-offset: -2px;
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
} }
h1, h1,
@ -106,6 +138,7 @@ button {
outline: none; outline: none;
padding: 0; padding: 0;
user-select: inherit; user-select: inherit;
cursor: pointer;
} }
code, code,
@ -155,6 +188,10 @@ kbd {
box-shadow: 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc; box-shadow: 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc;
} }
p {
margin: 0 0 10px;
}
.btn { .btn {
border: 2px solid var(--button-color); border: 2px solid var(--button-color);
border-radius: 3px; border-radius: 3px;
@ -207,8 +244,10 @@ kbd {
} }
.container { .container {
padding: 0 15px;
margin-bottom: 20px; margin-bottom: 20px;
max-width: 480px; width: 480px;
align-self: center;
touch-action: pan-y; touch-action: pan-y;
} }
@ -247,7 +286,6 @@ kbd {
.channel-list-item::before, .channel-list-item::before,
#footer .icon, #footer .icon,
#chat .count::before, #chat .count::before,
#settings .extra-experimental,
#settings .extra-help, #settings .extra-help,
#settings #play::before, #settings #play::before,
#form #upload::before, #form #upload::before,
@ -357,12 +395,19 @@ kbd {
#help .documentation-link::before { content: "\f19d"; /* http://fontawesome.io/icon/graduation-cap/ */ } #help .documentation-link::before { content: "\f19d"; /* http://fontawesome.io/icon/graduation-cap/ */ }
#help .report-issue-link::before { content: "\f188"; /* http://fontawesome.io/icon/bug/ */ } #help .report-issue-link::before { content: "\f188"; /* http://fontawesome.io/icon/bug/ */ }
.session-list strong { .session-list .session-item {
display: block; display: flex;
font-size: 14px;
} }
.session-list p { .session-list .session-item-info {
margin-bottom: 10px; display: flex;
flex-direction: column;
flex-grow: 1;
}
.session-list .session-item-btn {
flex-shrink: 0;
} }
#chat .invite .from::before { #chat .invite .from::before {
@ -461,10 +506,6 @@ kbd {
line-height: 45px; line-height: 45px;
} }
#settings .extra-experimental::before {
content: "\f0c3"; /* https://fontawesome.com/icons/flask?style=solid */
}
#settings .extra-help::before { #settings .extra-help::before {
content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */ content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */
} }
@ -881,9 +922,10 @@ background on hover (unless active) */
border-color: #84ce88; border-color: #84ce88;
} }
#user-specified-css-input { textarea.input {
resize: vertical; resize: vertical;
height: 10em; height: 100px;
min-height: 35px;
padding: 6px 10px; padding: 6px 10px;
line-height: 1.5; line-height: 1.5;
} }
@ -924,7 +966,7 @@ background on hover (unless active) */
} }
.window h2 small { .window h2 small {
color: inherit; font-size: 16px;
line-height: 30px; line-height: 30px;
} }
@ -1110,7 +1152,6 @@ background on hover (unless active) */
padding-top: 15px; padding-top: 15px;
padding-bottom: 0; padding-bottom: 0;
width: 100%; width: 100%;
display: none;
} }
#chat .show-more .btn { #chat .show-more .btn {
@ -1205,10 +1246,6 @@ background on hover (unless active) */
padding: 0 10px; padding: 0 10px;
} }
#chat .unread-marker:last-child {
display: none;
}
#chat .date-marker { #chat .date-marker {
position: relative; position: relative;
text-align: center; text-align: center;
@ -1733,30 +1770,48 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
width: 100%; width: 100%;
} }
#connect .connect-row {
display: flex;
}
#connect .connect-row > .input,
#connect .connect-row > .input-wrap {
flex-grow: 1;
}
#connect label { #connect label {
display: block; width: 25%;
flex-shrink: 0;
margin-top: 11px; margin-top: 11px;
} }
#connect .port::before {
content: ":";
margin: 9px 0 0 -17px;
position: absolute;
}
#connect .tls { #connect .tls {
float: left; width: 100%;
display: block;
margin-top: 6px; margin-top: 6px;
} }
#connect .tls input { #connect .tls input {
float: left;
margin: 3px 10px 0 0; margin: 3px 10px 0 0;
} }
#connect\:host {
width: 70%;
}
#connect\:port {
width: 25%;
}
#connect\:portseparator {
width: 5%;
text-align: center;
display: inline-block;
}
#connect .btn { #connect .btn {
float: left; margin-left: 25%;
margin-top: 30px; margin-top: 15px;
} }
#settings .settings-sync-panel { #settings .settings-sync-panel {
@ -1797,16 +1852,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
margin-right: 6px; margin-right: 6px;
} }
#settings .extra-experimental {
color: #84ce88;
}
#settings .extra-experimental,
#settings .extra-help { #settings .extra-help {
cursor: help; cursor: help;
} }
#settings .extra-experimental,
#settings h2 .extra-help { #settings h2 .extra-help {
font-size: 0.8em; font-size: 0.8em;
} }
@ -1853,13 +1902,13 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#sign-in .password-container .reveal-password { #sign-in .password-container .reveal-password {
top: 31px; top: 31px;
right: 0;
} }
.password-container .reveal-password { .password-container .reveal-password {
position: absolute; position: absolute;
top: 2px; top: 2px;
right: 15px; right: 0;
appearance: none;
} }
.password-container .reveal-password span { .password-container .reveal-password span {
@ -1887,6 +1936,11 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
color: #ff4136; color: #ff4136;
} }
#help .help-version-title {
display: flex;
justify-content: space-between;
}
#help .help-item { #help .help-item {
display: table-row; display: table-row;
font-size: 14px; font-size: 14px;
@ -2522,6 +2576,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
@media (max-width: 479px) { @media (max-width: 479px) {
.container { .container {
max-width: 100%;
margin: 0; margin: 0;
} }
@ -2529,14 +2584,28 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
width: 100%; width: 100%;
} }
#connect .tls {
margin: 20px 0;
}
.input { .input {
margin-bottom: 2px; margin-bottom: 2px;
} }
#connect .connect-row {
flex-direction: column;
}
#connect .connect-row > .input,
#connect .connect-row > .input-wrap {
flex-grow: 1;
}
#connect .btn {
margin-left: 0;
width: 100%;
}
#help .help-version-title {
flex-direction: column;
}
#chat .messages { #chat .messages {
display: block; display: block;
padding: 5px 0; padding: 5px 0;

1
package.json
View File

@ -96,6 +96,7 @@
"mocha": "6.2.2", "mocha": "6.2.2",
"mochapack": "1.1.13", "mochapack": "1.1.13",
"mousetrap": "1.6.3", "mousetrap": "1.6.3",
"normalize.css": "8.0.1",
"npm-run-all": "4.1.5", "npm-run-all": "4.1.5",
"nyc": "14.1.1", "nyc": "14.1.1",
"postcss-import": "12.0.1", "postcss-import": "12.0.1",

5
yarn.lock
View File

@ -5835,6 +5835,11 @@ normalize-url@^4.1.0:
resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129" resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ== integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
normalize.css@8.0.1:
version "8.0.1"
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
npm-bundled@^1.0.1: npm-bundled@^1.0.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b" resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"