supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity
8a57f90b65
hardlounge/client/css/style.css

2880 lines
60 KiB
CSS
Raw Normal View History

Use normalize.css and remove a lot of unused styles from bootstrap.css
2019-09-17 14:23:49 +00:00
@import "../../node_modules/normalize.css/normalize.css";
Add css-loader
2018-03-21 12:13:52 +00:00
@import "fontawesome.css";
Import primer-tooltips css
2019-11-02 10:45:41 +00:00
@import "../../node_modules/primer-tooltips/build/build.css";
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix color of "More" preview button in Morning
2018-04-12 04:52:05 +00:00
:root {
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
/* Main text color */
--body-color: #222;
Make userlist section titles sticky on scroll
2018-07-13 04:22:25 +00:00
/* Secondary text color, dimmed. Make sure to keep contrast WCAG 2.0 AA compliant on var(--window-bg-color) */
--body-color-muted: #767676;
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
/* Background color of the whole page */
--body-bg-color: #415364;
Use CSS variable for button color
2019-02-18 18:32:41 +00:00
/* Main button color. Applies to border, text, and background on hover */
--button-color: #84ce88;
--button-text-color-hover: #fff;
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
/* 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);
Fix color of "More" preview button in Morning
2018-04-12 04:52:05 +00:00
/* Links and link-looking buttons */
--link-color: #50a656;
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
/* Background color of the main window */
--window-bg-color: #fff;
Increase contrast of headers in windows
2019-10-14 14:30:35 +00:00
/* Text color for <h2> and <h3> headings in windows */
--window-heading-color: #6c797a;
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
/* Color of the date marker, text and separator */
--date-marker-color: rgba(0, 107, 59, 0.5);
/* Color of the unread message marker, text and separator */
--unread-marker-color: rgba(231, 76, 60, 0.5);
Use a combination background + left border for highlight messages
2018-06-04 04:55:36 +00:00
/* Background and left-border color of highlight messages */
--highlight-bg-color: #efe8dc;
--highlight-border-color: #b08c4f;
Style the upload progress bar
2019-03-18 00:42:53 +00:00
/* Color of the progress bar that appears as a file is being uploaded to the server. Defaults to button color */
--upload-progressbar-color: var(--button-color);
Fix color of "More" preview button in Morning
2018-04-12 04:52:05 +00:00
}
Update placeholder rules for modern browsers
2018-04-14 07:24:39 +00:00
::placeholder {
color: rgba(0, 0, 0, 0.35);
opacity: 1; /* fix opacity in Firefox */
}
Use normalize.css and remove a lot of unused styles from bootstrap.css
2019-09-17 14:23:49 +00:00
html {
box-sizing: border-box;
Set `-webkit-tap-highlight-color` to `transparent`
2019-12-26 11:01:37 +00:00
-webkit-tap-highlight-color: transparent; /* remove tap highlight on touch devices */
Use normalize.css and remove a lot of unused styles from bootstrap.css
2019-09-17 14:23:49 +00:00
}
*,
*::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;
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
html,
body {
Fix body height #821 fixed #793, but it appears since then, Chrome has changed the behaviour back to what it was befor ethe fix, so 2.2.0 on Chrome 56+ is even more broken.
2017-02-06 12:41:17 +00:00
height: 100%;
Use overscroll-behavior Ref: https://developers.google.com/web/updates/2017/11/overscroll-behavior
2018-05-02 11:17:56 +00:00
overscroll-behavior: none; /* prevent overscroll navigation actions */
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix responsive interface
2014-08-15 13:52:14 +00:00
body {
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
background: var(--body-bg-color);
color: var(--body-color);
Use native font stack
2017-09-18 10:32:52 +00:00
font: 16px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
Fix responsive interface
2014-08-15 13:52:14 +00:00
margin: 0;
Make everything unselectable by default
2017-06-16 15:36:05 +00:00
user-select: none;
cursor: default;
Add touch-action to more elements - Add touch-action: pan-y to .container, .networks, .sidebar, #form #input - Add touch-action: none to body
2017-09-13 22:04:03 +00:00
touch-action: none;
Make everything unselectable by default
2017-06-16 15:36:05 +00:00
Disable pull-to-refresh on mobile that conflicts with scrolling the message list See http://stackoverflow.com/a/29313685/1935861
2016-09-18 23:28:27 +00:00
/**
* Disable pull-to-refresh on mobile that conflicts with scrolling the message list.
* See http://stackoverflow.com/a/29313685/1935861
*/
Fix body overscroll and overflow on iOS Safari In order to prevent scrolling past the edges of the body (overscroll) in Safari on iOS, the overflow must be hidden (not only overflow-y).
2020-03-23 19:15:30 +00:00
overflow: hidden; /* iOS Safari requires overflow rather than overflow-y */
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix flickering on link hovering, and inconsistencies between chat links and UI links
2017-09-25 22:06:55 +00:00
a,
a:hover,
a:focus {
Fix color of "More" preview button in Morning
2018-04-12 04:52:05 +00:00
color: var(--link-color);
Use normalize.css and remove a lot of unused styles from bootstrap.css
2019-09-17 14:23:49 +00:00
text-decoration: none;
Fix flickering on link hovering, and inconsistencies between chat links and UI links
2017-09-25 22:06:55 +00:00
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
a:hover {
Enable underlines on links
2018-07-05 10:10:10 +00:00
text-decoration: underline;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use normalize.css and remove a lot of unused styles from bootstrap.css
2019-09-17 14:23:49 +00:00
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
Fix MOTD underline in Safari before: https://sr.ht/mdPx.png after: https://sr.ht/h45R.png Basically, safari's user agent CSS applies an underline to <abbr> tags, which bootstrap already does as well (but bootstrap doesn't use text-decoration so it's not overriden).
2017-06-10 21:10:42 +00:00
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
h1,
Add a help window within the app This brings commands and keyboard shortcuts from the website, after a massive overhaul. It comes as part of the big documentation rewrite that I am currently doing. `kbd` design inspiration from GitHub, `code` design inspiration from Bootstrap. This help page is accessible from an icon in the sidebar, near the Settings icon.
2017-02-28 07:15:34 +00:00
h2,
h3 {
Fix responsive interface
2014-08-15 13:52:14 +00:00
font: inherit;
line-height: inherit;
margin: 0;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Change nicks from links to spans everywhere Fixes #338
2016-06-22 19:34:10 +00:00
button {
Fix responsive interface
2014-08-15 13:52:14 +00:00
border: none;
background: none;
margin: 0;
outline: none;
padding: 0;
Fix copying text in Firefox Fixes #3035
2019-02-12 08:12:15 +00:00
user-select: inherit;
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
cursor: pointer;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Add a help window within the app This brings commands and keyboard shortcuts from the website, after a massive overhaul. It comes as part of the big documentation rewrite that I am currently doing. `kbd` design inspiration from GitHub, `code` design inspiration from Bootstrap. This help page is accessible from an icon in the sidebar, near the Settings icon.
2017-02-28 07:15:34 +00:00
code,
Support `pre` blocks in our style We use this in our changelogs. Style for this is straight from Bootstrap 3 minus the border.
2017-12-23 03:04:41 +00:00
pre,
Implement generic monospace blocks for INFO and MOTD numerics Fixes #3961
2020-06-29 07:51:17 +00:00
#chat .msg[data-type="monospace_block"] .text,
#1755 - implement monospace formatting with keybinding, tests, and help section
2017-12-03 15:00:35 +00:00
.irc-monospace,
Use monospace font in custom CSS textarea
2017-09-21 05:59:06 +00:00
textarea#user-specified-css-input {
Add a help window within the app This brings commands and keyboard shortcuts from the website, after a massive overhaul. It comes as part of the big documentation rewrite that I am currently doing. `kbd` design inspiration from GitHub, `code` design inspiration from Bootstrap. This help page is accessible from an icon in the sidebar, near the Settings icon.
2017-02-28 07:15:34 +00:00
font-family: Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
}
Improve monospace formatting in messages This effectively styles it just like to `code` syntax used in the Help window, such as in the list of available commands.
2018-02-03 17:53:33 +00:00
code,
.irc-monospace {
Improve readability and styling of shortcut keys in the Help section
2018-03-14 02:24:59 +00:00
font-size: 13px;
Add a help window within the app This brings commands and keyboard shortcuts from the website, after a massive overhaul. It comes as part of the big documentation rewrite that I am currently doing. `kbd` design inspiration from GitHub, `code` design inspiration from Bootstrap. This help page is accessible from an icon in the sidebar, near the Settings icon.
2017-02-28 07:15:34 +00:00
padding: 2px 4px;
color: #e74c3c;
background-color: #f9f2f4;
border-radius: 2px;
}
Support `pre` blocks in our style We use this in our changelogs. Style for this is straight from Bootstrap 3 minus the border.
2017-12-23 03:04:41 +00:00
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border-radius: 4px;
}
Add a help window within the app This brings commands and keyboard shortcuts from the website, after a massive overhaul. It comes as part of the big documentation rewrite that I am currently doing. `kbd` design inspiration from GitHub, `code` design inspiration from Bootstrap. This help page is accessible from an icon in the sidebar, near the Settings icon.
2017-02-28 07:15:34 +00:00
kbd {
display: inline-block;
Improve readability and styling of shortcut keys in the Help section
2018-03-14 02:24:59 +00:00
font-family: inherit;
line-height: 1em;
min-width: 28px; /* Ensure 1-char keys have the same width */
margin: 0 1px;
padding: 4px 6px;
color: #444;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: white;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.05), transparent);
border: 1px solid #bbb;
border-radius: 4px;
box-shadow: 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc;
Add a help window within the app This brings commands and keyboard shortcuts from the website, after a massive overhaul. It comes as part of the big documentation rewrite that I am currently doing. `kbd` design inspiration from GitHub, `code` design inspiration from Bootstrap. This help page is accessible from an icon in the sidebar, near the Settings icon.
2017-02-28 07:15:34 +00:00
}
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
p {
margin: 0 0 10px;
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
.btn {
Use CSS variable for button color
2019-02-18 18:32:41 +00:00
border: 2px solid var(--button-color);
Fix responsive interface
2014-08-15 13:52:14 +00:00
border-radius: 3px;
Use CSS variable for button color
2019-02-18 18:32:41 +00:00
color: var(--button-color);
Fix responsive interface
2014-08-15 13:52:14 +00:00
display: inline-block;
Remove font family redundancy, fix missed fonts, remove Open Sans
2016-08-14 21:28:47 +00:00
font-size: 12px;
font-weight: bold;
Fix responsive interface
2014-08-15 13:52:14 +00:00
letter-spacing: 1px;
margin-bottom: 10px;
padding: 9px 17px;
text-transform: uppercase;
Do not silence outline of all elements, and add custom outline where possible - Tweak outlines - Consolidate focus shadows between inputs and buttons, apply custom focus to whole page (i.e. on "Join a channel" form), cleanup - Do not add custom outlines on checkboxes/radios as browsers are not doing this too well - Apply hover effect on all inputs, not just in `#windows`
2017-12-22 00:16:08 +00:00
transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
Fix responsive interface
2014-08-15 13:52:14 +00:00
word-spacing: 3px;
Fix some button styling
2017-07-12 06:54:32 +00:00
cursor: pointer; /* This is useful for `<button>` elements */
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Improve the version checking part of the changelog feature - There is no client caching of the changelog/version anymore. Instead, server returns the expiration date of its cache, and that is used by the client as well. - There is now a "Check now" button on the client that appears when data is stale. This means that info is fetched only once and never refreshed (it was refreshed every hour before) unless the user explicitly wants to check latest version, which in turn is as stale as server info is, i.e. 15 minutes max. - Button style is shared with the "Join a channel" feature, `.btn-small` (not `.btn-sm` to be explicit that this is not a Bootstrap thing). - Version checker content is now centralized in the `version_checker` template, instead of being partially in the checker template, partially in the Help template, and partially in the code. - A "Try again" button lets user attempt to fetch info instead of forcing them to reload the page. - Use Flexbox to display a nicer version checker: icon is slightly bigger, and button is always aligned on the right. - Changelog logic has been removed from `lounge.js` and moved into the component file. - Changelog template is only passed what it needs instead of everything the server gives us. - Public version now displays version checker, since server is caching things. - Cleaner code overall.
2017-12-24 23:18:24 +00:00
.btn-small {
padding: 5px 13px;
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
.btn:disabled,
Add visual feedback on focused buttons, for example when tabbing to it
2017-12-21 18:22:45 +00:00
.btn:hover,
.btn:focus {
Use CSS variable for button color
2019-02-18 18:32:41 +00:00
background: var(--button-color);
color: var(--button-text-color-hover);
Fix some button styling
2017-07-12 06:54:32 +00:00
opacity: 1;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Do not silence outline of all elements, and add custom outline where possible - Tweak outlines - Consolidate focus shadows between inputs and buttons, apply custom focus to whole page (i.e. on "Join a channel" form), cleanup - Do not add custom outlines on checkboxes/radios as browsers are not doing this too well - Apply hover effect on all inputs, not just in `#windows`
2017-12-22 00:16:08 +00:00
.input:focus,
.btn:active,
.btn:focus {
outline: 0;
box-shadow: 0 0 0 3px rgba(132, 206, 136, 0.5);
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
.btn:active {
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
opacity: 0.8;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix responsive interface
2014-08-15 13:52:14 +00:00
.btn:disabled {
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
opacity: 0.6;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Add changelog viewing and update checking
2017-07-13 18:32:18 +00:00
.btn-sm {
padding: 4px 8px;
border-width: 1px;
letter-spacing: 0;
word-spacing: 0;
text-transform: none;
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
.container {
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
padding: 0 15px;
Remove header border on non-chat windows and reduce top margin a bit more
2018-04-14 22:16:17 +00:00
margin-bottom: 20px;
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
width: 480px;
align-self: center;
Add touch-action to more elements - Add touch-action: pan-y to .container, .networks, .sidebar, #form #input - Add touch-action: none to body
2017-09-13 22:04:03 +00:00
touch-action: pan-y;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Format messages on copy Fixes #1146
2017-08-26 16:36:18 +00:00
#js-copy-hack,
Improve error page at loading - Display the "Reload page" instantly and not after 5 seconds - Remove stack trace, buggy anyway - Wrap the error details so it does not expand beyond boundaries (scrollbar would not show up either) - Do not show the slow-loading warning on error - Make zeeoe details selectable instead of editable - Label improvements
2017-12-16 21:19:51 +00:00
#loading pre,
Make sure the changelog page is selectable, e.g. for copy-pasting commands
2019-01-19 06:37:26 +00:00
#help .container,
#changelog .container,
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.header .title,
.header .topic,
Make everything unselectable by default
2017-06-16 15:36:05 +00:00
#chat .messages {
user-select: text;
cursor: text;
}
Format messages on copy Fixes #1146
2017-08-26 16:36:18 +00:00
#js-copy-hack {
position: absolute;
left: -999999px;
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat #js-copy-hack .msg[data-type="condensed"]:not(.closed) .msg,
Format messages on copy Fixes #1146
2017-08-26 16:36:18 +00:00
#chat #js-copy-hack > .msg {
display: block;
}
Explicitly place * on actions in DOM
2018-09-25 15:43:46 +00:00
.only-copy {
font-size: 0;
opacity: 0;
width: 0;
}
Improve font icon rendering with font-smoothing This makes all icons look sharper, and reproduces what is applied on the FontAwesome CSS: https://github.com/FortAwesome/Font-Awesome/blob/4213679/css/font-awesome.css#L19-L20
2016-07-12 03:25:42 +00:00
/* Icons */
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#viewport .lt::before,
#viewport .rt::before,
Track mentions and add a window to view them
2019-11-04 09:21:05 +00:00
#chat button.mentions::before,
Add close search button
2021-04-29 23:49:49 +00:00
#chat button.close::before,
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat button.menu::before,
Message search WIP.
2019-12-31 16:21:34 +00:00
#chat button.search::before,
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item::before,
Improve font icon rendering with font-smoothing This makes all icons look sharper, and reproduces what is applied on the FontAwesome CSS: https://github.com/FortAwesome/Font-Awesome/blob/4213679/css/font-awesome.css#L19-L20
2016-07-12 03:25:42 +00:00
#footer .icon,
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .count::before,
Use v-model in network form, auto size commands
2020-04-06 08:42:10 +00:00
#connect .extra-help,
Replace status message abbr with a tooltipped icon
2017-08-05 19:28:05 +00:00
#settings .extra-help,
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#settings #play::before,
Add file uploading support Co-Authored-By: Max Leiter <hello@maxleiter.com> Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-09-03 07:30:05 +00:00
#form #upload::before,
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#form #submit::before,
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="away"] .from::before,
#chat .msg[data-type="back"] .from::before,
#chat .msg[data-type="invite"] .from::before,
#chat .msg[data-type="join"] .from::before,
#chat .msg[data-type="kick"] .from::before,
#chat .msg[data-type="part"] .from::before,
#chat .msg[data-type="quit"] .from::before,
#chat .msg[data-type="topic"] .from::before,
#chat .msg[data-type="mode_channel"] .from::before,
#chat .msg[data-type="mode"] .from::before,
Implement generic monospace blocks for INFO and MOTD numerics Fixes #3961
2020-06-29 07:51:17 +00:00
#chat .msg[data-command="motd"] .from::before,
#chat .msg[data-command="help"] .from::before,
#chat .msg[data-command="info"] .from::before,
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="ctcp"] .from::before,
#chat .msg[data-type="ctcp_request"] .from::before,
#chat .msg[data-type="whois"] .from::before,
#chat .msg[data-type="nick"] .from::before,
#chat .msg[data-type="action"] .from::before,
#chat .msg[data-type="plugin"] .from::before,
#chat .msg[data-type="raw"] .from::before,
Add an indicator to statusmsg messages
2020-04-24 08:46:39 +00:00
#chat .msg-statusmsg span::before,
Show an icon for "show in active" messages
2020-01-05 16:27:34 +00:00
#chat .msg-shown-in-active span::before,
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .toggle-button::after,
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
#chat .toggle-content .more-caret::before,
Add jump-to-bottom arrow when scrolled up
2018-07-18 18:31:51 +00:00
#chat .scroll-down-arrow::after,
add save button to edit topic input field
2019-08-11 13:59:06 +00:00
#chat .topic-container .save-topic span::before,
Improve the version checking part of the changelog feature - There is no client caching of the changelog/version anymore. Instead, server returns the expiration date of its cache, and that is used by the client as well. - There is now a "Check now" button on the client that appears when data is stale. This means that info is fetched only once and never refreshed (it was refreshed every hour before) unless the user explicitly wants to check latest version, which in turn is as stale as server info is, i.e. 15 minutes max. - Button style is shared with the "Join a channel" feature, `.btn-small` (not `.btn-sm` to be explicit that this is not a Bootstrap thing). - Version checker content is now centralized in the `version_checker` template, instead of being partially in the checker template, partially in the Help template, and partially in the code. - A "Try again" button lets user attempt to fetch info instead of forcing them to reload the page. - Use Flexbox to display a nicer version checker: icon is slightly bigger, and button is always aligned on the right. - Changelog logic has been removed from `lounge.js` and moved into the component file. - Changelog template is only passed what it needs instead of everything the server gives us. - Public version now displays version checker, since server is caching things. - Cleaner code overall.
2017-12-24 23:18:24 +00:00
#version-checker::before,
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
.context-menu-item::before,
Improve UI of the About section and changelog viewer - Keep consistent width between the Help page and Changelog (which is already different from other windows 😠) - Add icons to the About links - Make sure `li` elements (i.e. all the lists in changelogs) are consistent in size with rest of the client - Display version and release notes link on the "About The Lounge" header line, smaller, pushed to the right - Check new releases when opening the Help window in order to display it without having to open the release notes. Release notes are being fed to the Changelog page at that moment to avoid fetching twice. - Re-check version/fetch release notes after 24h. Since The Lounge can now run 24/7, reconnect when losing the network, we have to assume an "always-on" usage. - Change icon, animate background color when getting response from GitHub to avoid flashing. - Combine click handlers with our wonderful window management. These were the same handler, even with similar checks (`target` exists, etc.), just in 2 different places. This is necessary for the next item. - Combine "Open release notes" and "Go back to Help" button behaviors with window management handlers. The window management code is gross as ever, and is in desperate need of a refactor, but at least there is no duplicated code for the same behavior + history management. This fixes the "Next" history behavior (however reloading the app while viewing the notes does not load on the notes, but this is a bug for a different PR!). - Added a rule in the history management thingy: if a link we want to add history handling to has an `id`, store that in the state - Added a button to go back to the Help window - Fixed links to releases - Send user to the GitHub issues *list* instead of *new issue form* because if they do not have a GitHub account, they will be redirected to the login page, which is a rather unpleasant experience when you are already confused... - Fixed a bug that would return data about a new release in `latest` even though it is already the `current`. It was showing the current version as "The Lounge v... is now available". - Added https://user-images.githubusercontent.com to the CSP rule when prefetch storage is enabled, because that is where we have stored screenshots in the changelog so far. Meh (we can improve that later if we decide to have a dedicated place for screenshots). - Fetch changelog info even in public mode because users in public mode can access the release notes. They do not see the result of the version checker however.
2017-12-23 03:40:41 +00:00
#help .website-link::before,
#help .documentation-link::before,
#help .report-issue-link::before,
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#image-viewer .previous-image-btn::before,
Make networks collapsable
2018-02-20 08:42:50 +00:00
#image-viewer .next-image-btn::before,
Fancy image interactions in the image viewer Desktop: - Mousewheel to zoom in/out (hold ctrl to move up/down) - If zoomed, drag around with mouse to move Mobile: - Move around with one finger - Change zoom with two fingers
2019-10-03 13:12:49 +00:00
#image-viewer .open-btn::before,
Fix up css refactoring
2019-12-10 14:46:50 +00:00
.channel-list-item .not-secure-icon::before,
.channel-list-item .not-connected-icon::before,
.channel-list-item .parted-channel-icon::before,
Implement jump to channel feature.
2019-11-26 20:50:40 +00:00
.jump-to-input::before,
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
#sidebar .collapse-network-icon::before {
Define icon font only once and fix sizing This commit applies the following across the whole style: - `font` statement is now the same as official FontAwesome CSS - Ensure icons are never italic or bold or that other variants can be applied - Ensure font-size and line-height of icons are inherited from parent - font-family and font-smoothing is now defined only once A few (mostly positive) side effects from these and related changes: - Header icons (main menu, context menu and user list) are now vertically centered! - Same applies to the Send icon, but it's more subtle there - Alignment of the footer icons are shifted a tiny bit - Server window icons are a wee bit bit bigger to match the server name font-size - The "Play sound" icon and text are now both 14px (was 14px / 16px)
2016-07-12 05:47:16 +00:00
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
Improve font icon rendering with font-smoothing This makes all icons look sharper, and reproduces what is applied on the FontAwesome CSS: https://github.com/FortAwesome/Font-Awesome/blob/4213679/css/font-awesome.css#L19-L20
2016-07-12 03:25:42 +00:00
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#viewport .lt::before { content: "\f0c9"; /* http://fontawesome.io/icon/bars/ */ }
Fix CSS issues in Microsoft Edge
2018-05-01 14:10:41 +00:00
#viewport .rt::before { content: "\f0c0"; /* https://fontawesome.com/icons/users?style=solid */ }
#chat button.menu::before { content: "\f142"; /* http://fontawesome.io/icon/ellipsis-v/ */ }
Track mentions and add a window to view them
2019-11-04 09:21:05 +00:00
#chat button.mentions::before { content: "\f1fa"; /* https://fontawesome.com/icons/at?style=solid */ }
Message search WIP.
2019-12-31 16:21:34 +00:00
#chat button.search::before { content: "\f002"; /* https://fontawesome.com/icons/search?style=solid */ }
Add close search button
2021-04-29 23:49:49 +00:00
#chat button.close::before { content: "\f00d"; /* https://fontawesome.com/icons/times?style=solid */ }
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
Add join channel UI via context menu or plus button next to lobbys
2017-12-13 04:52:26 +00:00
.context-menu-join::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
.context-menu-user::before { content: "\f007"; /* http://fontawesome.io/icon/user/ */ }
.context-menu-close::before { content: "\f00d"; /* http://fontawesome.io/icon/times/ */ }
Add 'Channel list' to network context menu
2017-12-06 02:53:13 +00:00
.context-menu-list::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
Fix (dis)connect icons in context menu being reverse of what they should be
2019-03-01 12:23:58 +00:00
.context-menu-disconnect::before { content: "\f127"; /* https://fontawesome.com/icons/unlink?style=solid */ }
.context-menu-connect::before { content: "\f0c1"; /* https://fontawesome.com/icons/link?style=solid */ }
Add whois and conversation as action to user contextmenu Add Op specific actions to contextMenu Show context menu when left clicking user Switch to using data attributes as selectors remove ban as possible action Move `isOpInChannel()` to utils.js Capitalize strings use CSS.escape for `ownNick` use string interpolation properly point to findCurrentNetworkChan Move context menu item actions to command pattern add icons for context menu actions Make list in context menu always list. remove empty lines in style.css use info circle instead of question circle change context menu labels. change contextMenuActions.execute to more explicit method.
2017-11-01 09:16:19 +00:00
.context-menu-action-whois::before { content: "\f05a"; /* http://fontawesome.io/icon/info-circle/ */ }
Add ignore option to contextmenu
2020-11-18 22:57:20 +00:00
.context-menu-action-ignore::before { content: "\f506"; /* https://fontawesome.com/icons/user-slash?style=solid */ }
Add whois and conversation as action to user contextmenu Add Op specific actions to contextMenu Show context menu when left clicking user Switch to using data attributes as selectors remove ban as possible action Move `isOpInChannel()` to utils.js Capitalize strings use CSS.escape for `ownNick` use string interpolation properly point to findCurrentNetworkChan Move context menu item actions to command pattern add icons for context menu actions Make list in context menu always list. remove empty lines in style.css use info circle instead of question circle change context menu labels. change contextMenuActions.execute to more explicit method.
2017-11-01 09:16:19 +00:00
.context-menu-action-kick::before { content: "\f05e"; /* http://fontawesome.io/icon/ban/ */ }
Show give/revoke modes and kick on other modes than +o Fix #3965 Signed-off-by: Mitaka <jin@mitaka.nl>
2020-10-04 20:12:24 +00:00
.context-menu-action-set-mode::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
.context-menu-action-revoke-mode::before { content: "\f068"; /* http://fontawesome.io/icon/minus/ */ }
Allow hiding channel list on desktop Fixes #17
2018-03-13 12:52:23 +00:00
.context-menu-network::before { content: "\f233"; /* https://fontawesome.com/icons/server?style=solid */ }
Remove nick editor
2018-03-16 14:10:28 +00:00
.context-menu-edit::before { content: "\f303"; /* https://fontawesome.com/icons/pencil-alt?style=solid */ }
Add context menu to clear channel history
2020-01-30 08:57:38 +00:00
.context-menu-clear-history::before { content: "\f1f8"; /* https://fontawesome.com/icons/trash?style=solid */ }
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
Fix up css refactoring
2019-12-10 14:46:50 +00:00
.channel-list-item .not-secure-icon::before {
Use warning icon for insecure connections
2018-03-11 19:15:14 +00:00
content: "\f071"; /* https://fontawesome.com/icons/exclamation-triangle?style=solid */
Sync network status and security to client UI Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-02-19 11:12:01 +00:00
}
Fix up css refactoring
2019-12-10 14:46:50 +00:00
.channel-list-item .not-connected-icon::before,
.channel-list-item .parted-channel-icon::before {
Switch to Font Awesome 5
2017-12-08 04:01:58 +00:00
content: "\f127"; /* https://fontawesome.com/icons/unlink?style=solid */
Sync network status and security to client UI Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-02-19 11:12:01 +00:00
}
Use better icons for channel/query list and context menu actions
2017-12-12 05:52:45 +00:00
.context-menu-query::before,
.context-menu-action-query::before,
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item[data-type="query"]::before { content: "\f075"; /* https://fontawesome.com/icons/comment?style=solid */ }
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
Use better icons for channel/query list and context menu actions
2017-12-12 05:52:45 +00:00
.context-menu-chan::before,
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item[data-type="channel"]::before { content: "\f086"; /* http://fontawesome.io/icon/comments/ */ }
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item[data-type="special"]::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
Implement /list Thanks to @xPaw for the base of this code
2016-03-09 20:04:07 +00:00
Don't show draft icon on lobbies.
2019-12-20 09:55:49 +00:00
.channel-list-item.has-draft:not(.active):not([data-type="lobby"])::before { content: "\f304"; /* https://fontawesome.com/icons/pen?style=solid */ }
Show pen icon if channel has a pending message, unless it's the active channel
2019-11-26 22:27:11 +00:00
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#footer .connect::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
#footer .settings::before { content: "\f013"; /* http://fontawesome.io/icon/cog/ */ }
#footer .help::before { content: "\f059"; /* http://fontawesome.io/icon/question/ */ }
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
Add file uploading support Co-Authored-By: Max Leiter <hello@maxleiter.com> Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-09-03 07:30:05 +00:00
#form #upload::before { content: "\f0c6"; /* https://fontawesome.com/icons/paperclip?style=solid */ }
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#form #submit::before { content: "\f1d8"; /* http://fontawesome.io/icon/paper-plane/ */ }
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="away"] .from::before,
#chat .msg[data-type="back"] .from::before {
Switch to Font Awesome 5
2017-12-08 04:01:58 +00:00
content: "\f017"; /* https://fontawesome.com/icons/clock?style=solid */
Use away-notify to show user away status change
2017-07-10 16:01:20 +00:00
color: #7f8c8d;
}
Improve UI of the About section and changelog viewer - Keep consistent width between the Help page and Changelog (which is already different from other windows 😠) - Add icons to the About links - Make sure `li` elements (i.e. all the lists in changelogs) are consistent in size with rest of the client - Display version and release notes link on the "About The Lounge" header line, smaller, pushed to the right - Check new releases when opening the Help window in order to display it without having to open the release notes. Release notes are being fed to the Changelog page at that moment to avoid fetching twice. - Re-check version/fetch release notes after 24h. Since The Lounge can now run 24/7, reconnect when losing the network, we have to assume an "always-on" usage. - Change icon, animate background color when getting response from GitHub to avoid flashing. - Combine click handlers with our wonderful window management. These were the same handler, even with similar checks (`target` exists, etc.), just in 2 different places. This is necessary for the next item. - Combine "Open release notes" and "Go back to Help" button behaviors with window management handlers. The window management code is gross as ever, and is in desperate need of a refactor, but at least there is no duplicated code for the same behavior + history management. This fixes the "Next" history behavior (however reloading the app while viewing the notes does not load on the notes, but this is a bug for a different PR!). - Added a rule in the history management thingy: if a link we want to add history handling to has an `id`, store that in the state - Added a button to go back to the Help window - Fixed links to releases - Send user to the GitHub issues *list* instead of *new issue form* because if they do not have a GitHub account, they will be redirected to the login page, which is a rather unpleasant experience when you are already confused... - Fixed a bug that would return data about a new release in `latest` even though it is already the `current`. It was showing the current version as "The Lounge v... is now available". - Added https://user-images.githubusercontent.com to the CSP rule when prefetch storage is enabled, because that is where we have stored screenshots in the changelog so far. Meh (we can improve that later if we decide to have a dedicated place for screenshots). - Fetch changelog info even in public mode because users in public mode can access the release notes. They do not see the result of the version checker however.
2017-12-23 03:40:41 +00:00
#help .website-link::before,
#help .documentation-link::before,
Render toggle button after links
2018-07-11 11:58:55 +00:00
#help .report-issue-link::before {
Improve UI of the About section and changelog viewer - Keep consistent width between the Help page and Changelog (which is already different from other windows 😠) - Add icons to the About links - Make sure `li` elements (i.e. all the lists in changelogs) are consistent in size with rest of the client - Display version and release notes link on the "About The Lounge" header line, smaller, pushed to the right - Check new releases when opening the Help window in order to display it without having to open the release notes. Release notes are being fed to the Changelog page at that moment to avoid fetching twice. - Re-check version/fetch release notes after 24h. Since The Lounge can now run 24/7, reconnect when losing the network, we have to assume an "always-on" usage. - Change icon, animate background color when getting response from GitHub to avoid flashing. - Combine click handlers with our wonderful window management. These were the same handler, even with similar checks (`target` exists, etc.), just in 2 different places. This is necessary for the next item. - Combine "Open release notes" and "Go back to Help" button behaviors with window management handlers. The window management code is gross as ever, and is in desperate need of a refactor, but at least there is no duplicated code for the same behavior + history management. This fixes the "Next" history behavior (however reloading the app while viewing the notes does not load on the notes, but this is a bug for a different PR!). - Added a rule in the history management thingy: if a link we want to add history handling to has an `id`, store that in the state - Added a button to go back to the Help window - Fixed links to releases - Send user to the GitHub issues *list* instead of *new issue form* because if they do not have a GitHub account, they will be redirected to the login page, which is a rather unpleasant experience when you are already confused... - Fixed a bug that would return data about a new release in `latest` even though it is already the `current`. It was showing the current version as "The Lounge v... is now available". - Added https://user-images.githubusercontent.com to the CSP rule when prefetch storage is enabled, because that is where we have stored screenshots in the changelog so far. Meh (we can improve that later if we decide to have a dedicated place for screenshots). - Fetch changelog info even in public mode because users in public mode can access the release notes. They do not see the result of the version checker however.
2017-12-23 03:40:41 +00:00
display: inline-block;
margin-right: 5px;
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
Improve UI of the About section and changelog viewer - Keep consistent width between the Help page and Changelog (which is already different from other windows 😠) - Add icons to the About links - Make sure `li` elements (i.e. all the lists in changelogs) are consistent in size with rest of the client - Display version and release notes link on the "About The Lounge" header line, smaller, pushed to the right - Check new releases when opening the Help window in order to display it without having to open the release notes. Release notes are being fed to the Changelog page at that moment to avoid fetching twice. - Re-check version/fetch release notes after 24h. Since The Lounge can now run 24/7, reconnect when losing the network, we have to assume an "always-on" usage. - Change icon, animate background color when getting response from GitHub to avoid flashing. - Combine click handlers with our wonderful window management. These were the same handler, even with similar checks (`target` exists, etc.), just in 2 different places. This is necessary for the next item. - Combine "Open release notes" and "Go back to Help" button behaviors with window management handlers. The window management code is gross as ever, and is in desperate need of a refactor, but at least there is no duplicated code for the same behavior + history management. This fixes the "Next" history behavior (however reloading the app while viewing the notes does not load on the notes, but this is a bug for a different PR!). - Added a rule in the history management thingy: if a link we want to add history handling to has an `id`, store that in the state - Added a button to go back to the Help window - Fixed links to releases - Send user to the GitHub issues *list* instead of *new issue form* because if they do not have a GitHub account, they will be redirected to the login page, which is a rather unpleasant experience when you are already confused... - Fixed a bug that would return data about a new release in `latest` even though it is already the `current`. It was showing the current version as "The Lounge v... is now available". - Added https://user-images.githubusercontent.com to the CSP rule when prefetch storage is enabled, because that is where we have stored screenshots in the changelog so far. Meh (we can improve that later if we decide to have a dedicated place for screenshots). - Fetch changelog info even in public mode because users in public mode can access the release notes. They do not see the result of the version checker however.
2017-12-23 03:40:41 +00:00
/* These 2 directives are loosely taken from .fa-fw */
width: 1.35em;
text-align: center;
}
#help .website-link::before { content: "\f0ac"; /* http://fontawesome.io/icon/globe/ */ }
#help .documentation-link::before { content: "\f19d"; /* http://fontawesome.io/icon/graduation-cap/ */ }
#help .report-issue-link::before { content: "\f188"; /* http://fontawesome.io/icon/bug/ */ }
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="invite"] .from::before {
Switch to Font Awesome 5
2017-12-08 04:01:58 +00:00
content: "\f0e0"; /* https://fontawesome.com/icons/envelope?style=solid */
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
color: #2ecc40;
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="part"] .from::before,
#chat .msg[data-type="quit"] .from::before {
Fix join and part icons
2018-03-12 15:37:57 +00:00
content: "\f2f5"; /* https://fontawesome.com/icons/sign-out-alt?style=solid */
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
color: #ff4136;
display: inline-block;
transform: rotate(180deg);
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="topic"] .from::before {
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
content: "\f0a1"; /* http://fontawesome.io/icon/bullhorn/ */
color: #2ecc40;
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="mode_channel"] .from::before,
#chat .msg[data-type="mode"] .from::before {
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
content: "\f05a"; /* http://fontawesome.io/icon/info-circle/ */
color: #2ecc40;
}
Implement generic monospace blocks for INFO and MOTD numerics Fixes #3961
2020-06-29 07:51:17 +00:00
#chat .msg[data-command="motd"] .from::before {
Use monospace font on MOTDs and set an icon
2018-07-16 17:59:45 +00:00
content: "\f02e"; /* https://fontawesome.com/icons/bookmark?style=solid */
Reuse muted color var for unhandled messages, and remove channel list color overrides
2018-07-24 05:11:43 +00:00
color: var(--body-color-muted);
Use monospace font on MOTDs and set an icon
2018-07-16 17:59:45 +00:00
}
Implement generic monospace blocks for INFO and MOTD numerics Fixes #3961
2020-06-29 07:51:17 +00:00
#chat .msg[data-command="help"] .from::before {
content: "\f059"; /* https://fontawesome.com/icons/question-circle?style=solid */
color: var(--body-color-muted);
}
#chat .msg[data-command="info"] .from::before {
content: "\f05a"; /* https://fontawesome.com/icons/info-circle?style=solid */
color: var(--body-color-muted);
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="ctcp"] .from::before,
#chat .msg[data-type="ctcp_request"] .from::before {
Switch to Font Awesome 5
2017-12-08 04:01:58 +00:00
content: "\f15c"; /* https://fontawesome.com/icons/file-alt?style=solid */
Reuse muted color var for unhandled messages, and remove channel list color overrides
2018-07-24 05:11:43 +00:00
color: var(--body-color-muted);
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="whois"] .from::before {
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
content: "\f007"; /* http://fontawesome.io/icon/user/ */
color: #2ecc40;
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="nick"] .from::before {
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
content: "\f007"; /* http://fontawesome.io/icon/user/ */
color: #2ecc40;
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="join"] .from::before {
Fix join and part icons
2018-03-12 15:37:57 +00:00
content: "\f2f6"; /* https://fontawesome.com/icons/sign-in-alt?style=solid */
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
color: #2ecc40;
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="kick"] .from::before {
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
content: "\f05e"; /* http://fontawesome.io/icon/ban/ */
color: #ff4136;
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="raw"] .from::before {
Improve raw messages
2019-07-17 07:34:23 +00:00
content: "\f101"; /* https://fontawesome.com/icons/angle-double-right?style=solid */
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg.self[data-type="raw"] .from::before {
Improve raw messages
2019-07-17 07:34:23 +00:00
content: "\f359"; /* https://fontawesome.com/icons/arrow-alt-circle-left?style=solid */
color: #2ecc40;
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="action"] .from::before {
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
content: "\f005"; /* http://fontawesome.io/icon/star/ */
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="plugin"] .from::before {
Add icon to message
2019-10-22 17:38:13 +00:00
content: "\f1e6"; /* http://fontawesome.io/icon/plug/ */
transform: rotate(45deg);
display: inline-block;
padding: 1px;
}
Add an indicator to statusmsg messages
2020-04-24 08:46:39 +00:00
#chat .msg-statusmsg,
Show an icon for "show in active" messages
2020-01-05 16:27:34 +00:00
#chat .msg-shown-in-active {
cursor: help;
margin-right: 5px;
}
Add an indicator to statusmsg messages
2020-04-24 08:46:39 +00:00
#chat .msg-statusmsg span::before,
Show an icon for "show in active" messages
2020-01-05 16:27:34 +00:00
#chat .msg-shown-in-active span::before {
font-size: 10px;
content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
}
Add an indicator to statusmsg messages
2020-04-24 08:46:39 +00:00
#chat .msg-statusmsg {
border-radius: 2px;
padding: 2px 4px;
background-color: #ff9e18;
color: #222;
}
Move preview toggle buttons next to their respective URLs and switch from ellipsis to caret
2017-07-06 07:35:54 +00:00
#chat .toggle-button {
Update stylelint rules
2017-11-26 12:28:33 +00:00
display: inline-block;
transition: opacity 0.2s, transform 0.2s;
Move preview toggle buttons next to their respective URLs and switch from ellipsis to caret
2017-07-06 07:35:54 +00:00
/* These 2 directives are loosely taken from .fa-fw */
width: 1.35em;
text-align: center;
}
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .toggle-button::after {
Move preview toggle buttons next to their respective URLs and switch from ellipsis to caret
2017-07-06 07:35:54 +00:00
content: "\f0da"; /* http://fontawesome.io/icon/caret-right/ */
}
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .count::before {
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
color: #cfcfcf;
content: "\f002"; /* http://fontawesome.io/icon/search/ */
position: absolute;
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
right: 13px;
line-height: 45px;
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
}
Use v-model in network form, auto size commands
2020-04-06 08:42:10 +00:00
#connect .extra-help::before,
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#settings .extra-help::before {
Replace status message abbr with a tooltipped icon
2017-08-05 19:28:05 +00:00
content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */
}
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#settings #play::before {
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
content: "\f028"; /* http://fontawesome.io/icon/volume-up/ */
margin-right: 9px;
}
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#image-viewer .previous-image-btn::before {
Add Previous/Next cycling buttons to the image viewer
2017-07-23 17:14:27 +00:00
content: "\f104"; /* http://fontawesome.io/icon/angle-left/ */
}
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#image-viewer .next-image-btn::before {
Add Previous/Next cycling buttons to the image viewer
2017-07-23 17:14:27 +00:00
content: "\f105"; /* http://fontawesome.io/icon/angle-right/ */
}
Fancy image interactions in the image viewer Desktop: - Mousewheel to zoom in/out (hold ctrl to move up/down) - If zoomed, drag around with mouse to move Mobile: - Move around with one finger - Change zoom with two fingers
2019-10-03 13:12:49 +00:00
#image-viewer .open-btn::before {
content: "\f35d"; /* https://fontawesome.com/icons/external-link-alt?style=solid */
}
Centralize all icon definitions for better management
2016-07-12 06:11:25 +00:00
/* End icons */
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
#viewport {
display: flex;
Fix responsive interface
2014-08-15 13:52:14 +00:00
height: 100%;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix missing transitions
2017-07-09 01:17:03 +00:00
#form button,
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
.header button,
.reveal-password span {
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
transition: opacity 0.2s;
Fix missing transitions
2017-07-09 01:17:03 +00:00
}
Make "Show older messages" style consistent with other buttons Also store the loading text in a `data` attribute instead of duplicate in template + JS, in order to help with future internationalization
2018-04-15 03:02:35 +00:00
#form button:hover,
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
.header button:hover,
.reveal-password span:hover {
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
opacity: 0.6;
Fix missing transitions
2017-07-09 01:17:03 +00:00
}
Fix sidebar toggle
2014-09-10 21:43:56 +00:00
#viewport .lt,
Add a menu where the Leave button was
2016-03-19 18:20:11 +00:00
#viewport .rt,
Track mentions and add a window to view them
2019-11-04 09:21:05 +00:00
#chat button.mentions,
Message search WIP.
2019-12-31 16:21:34 +00:00
#chat button.search,
Add close search button
2021-04-29 23:49:49 +00:00
#chat button.menu,
#chat button.close {
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
color: #607992;
Refactor channel titles to use flexbox
2018-02-23 21:57:45 +00:00
display: flex;
Define icon font only once and fix sizing This commit applies the following across the whole style: - `font` statement is now the same as official FontAwesome CSS - Ensure icons are never italic or bold or that other variants can be applied - Ensure font-size and line-height of icons are inherited from parent - font-family and font-smoothing is now defined only once A few (mostly positive) side effects from these and related changes: - Header icons (main menu, context menu and user list) are now vertically centered! - Same applies to the Send icon, but it's more subtle there - Alignment of the footer icons are shifted a tiny bit - Server window icons are a wee bit bit bigger to match the server name font-size - The "Play sound" icon and text are now both 14px (was 14px / 16px)
2016-07-12 05:47:16 +00:00
font-size: 14px;
line-height: 1;
Fix sidebar toggle
2014-09-10 21:43:56 +00:00
height: 36px;
Refactor channel titles to use flexbox
2018-02-23 21:57:45 +00:00
width: 36px;
margin-top: 6px;
flex-shrink: 0;
}
#viewport .lt::before,
#viewport .rt::before,
Track mentions and add a window to view them
2019-11-04 09:21:05 +00:00
#chat button.mentions::before,
Message search WIP.
2019-12-31 16:21:34 +00:00
#chat button.search::before,
Add close search button
2021-04-29 23:49:49 +00:00
#chat button.menu::before,
#chat button.close::before {
Fix sidebar toggle
2014-09-10 21:43:56 +00:00
width: 36px;
Fix CSS issues in Microsoft Edge
2018-05-01 14:10:41 +00:00
line-height: 36px; /* Fix alignment in Microsoft Edge */
Fix sidebar toggle
2014-09-10 21:43:56 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Make sure the channel list button stays always visible
2018-04-20 15:05:53 +00:00
/* Channel list button stays fixed when scrolling... */
Add a red dot to the mobile menu icon when being notified On mobile, there is no favicon to toggle, so nothing shows up when a new notification arrives. This commit changes this by adding a marker on the burger menu icon, visible on all channels
2016-07-10 20:38:08 +00:00
#viewport .lt {
Make sure the channel list button stays always visible
2018-04-20 15:05:53 +00:00
position: fixed;
}
/* ... Except on chat windows, relative to include the notification dot */
#viewport #chat .lt {
Add a red dot to the mobile menu icon when being notified On mobile, there is no favicon to toggle, so nothing shows up when a new notification arrives. This commit changes this by adding a marker on the burger menu icon, visible on all channels
2016-07-10 20:38:08 +00:00
position: relative;
}
/* Notification dot on the top right corner of the menu icon */
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#viewport .lt::after {
Add a red dot to the mobile menu icon when being notified On mobile, there is no favicon to toggle, so nothing shows up when a new notification arrives. This commit changes this by adding a marker on the burger menu icon, visible on all channels
2016-07-10 20:38:08 +00:00
content: "";
position: absolute;
top: 9px;
right: 7px;
background-color: #e74c3c;
width: 10px;
height: 10px;
border-radius: 50%;
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
border: 2px solid var(--window-bg-color);
Add a red dot to the mobile menu icon when being notified On mobile, there is no favicon to toggle, so nothing shows up when a new notification arrives. This commit changes this by adding a marker on the burger menu icon, visible on all channels
2016-07-10 20:38:08 +00:00
opacity: 0;
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
transition: opacity 0.2s;
Fix CSS issues in Microsoft Edge
2018-05-01 14:10:41 +00:00
background-clip: padding-box; /* Fix border-radius bleeding color */
Add a red dot to the mobile menu icon when being notified On mobile, there is no favicon to toggle, so nothing shows up when a new notification arrives. This commit changes this by adding a marker on the burger menu icon, visible on all channels
2016-07-10 20:38:08 +00:00
}
Optimized notification dot state
2018-03-08 13:46:05 +00:00
#viewport.notified .lt::after {
Add a red dot to the mobile menu icon when being notified On mobile, there is no favicon to toggle, so nothing shows up when a new notification arrives. This commit changes this by adding a marker on the burger menu icon, visible on all channels
2016-07-10 20:38:08 +00:00
opacity: 1;
}
Make userlist state consistent on mobile and desktop
2018-06-27 07:05:37 +00:00
#viewport.userlist-open #chat .userlist {
display: flex;
Always show right toggle
2014-10-10 19:21:40 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix responsive interface
2014-08-15 13:52:14 +00:00
#sidebar {
Make menu state consistent on desktop and mobile; fix sliding on desktop Fixes #2572
2018-06-28 07:45:40 +00:00
display: none;
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
flex-direction: column;
Fix responsive interface
2014-08-15 13:52:14 +00:00
width: 220px;
Port session list to vue.
2019-03-03 17:47:49 +00:00
max-height: 100%;
Make menu state consistent on desktop and mobile; fix sliding on desktop Fixes #2572
2018-06-28 07:45:40 +00:00
will-change: transform;
Implement jump to channel feature.
2019-11-26 20:50:40 +00:00
color: #b7c5d1; /* same as .channel-list-item color */
Make menu state consistent on desktop and mobile; fix sliding on desktop Fixes #2572
2018-06-28 07:45:40 +00:00
}
#viewport.menu-open #sidebar {
display: flex;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Make sidebar logo scroll with networks, wrap logos in div element
2018-04-14 22:16:03 +00:00
#sidebar .scrollable-area {
overflow-x: auto;
flex-grow: 1;
touch-action: pan-y;
Set scrollbar properties for Firefox 64+ Refs: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color https://drafts.csswg.org/css-scrollbars-1/
2019-01-15 09:38:58 +00:00
scrollbar-width: thin;
Make sidebar logo scroll with networks, wrap logos in div element
2018-04-14 22:16:03 +00:00
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
#sidebar .logo-container {
text-align: center;
}
Add normal version of logo for themes with light sidebars
2018-04-01 23:28:44 +00:00
#sidebar .logo,
#sidebar .logo-inverted {
height: 45px;
}
#sidebar .logo {
display: none;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item,
Reduce message size on mobile and increase a bit UI text
2017-09-23 01:59:45 +00:00
#sidebar .empty {
Fix responsive interface
2014-08-15 13:52:14 +00:00
font-size: 14px;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item {
Fix up sorting channel styling
2019-03-19 13:11:44 +00:00
display: flex;
padding: 8px 14px;
position: relative;
Reduce message size on mobile and increase a bit UI text
2017-09-23 01:59:45 +00:00
cursor: pointer;
}
Remove unnecessary selectors
2019-12-11 11:35:18 +00:00
/* Channels/queries must be white on hover and active */
Fix active styles on footer buttons
2020-01-02 10:57:36 +00:00
#footer button:hover,
#footer button.active,
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item:hover,
Fix up css refactoring
2019-12-10 14:46:50 +00:00
.channel-list-item.active {
Fix responsive interface
2014-08-15 13:52:14 +00:00
color: #fff;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
/* All lobbies/channels/queries and footer buttons must have a half-transparent
background on hover (unless active) */
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item:hover,
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
#footer button:hover {
background-color: rgba(48, 62, 74, 0.5); /* #303e4a x 50% alpha */
}
Remove unnecessary selectors
2019-12-11 11:35:18 +00:00
/* Darker background and defualt cursor for active channels */
Fix active styles on footer buttons
2020-01-02 10:57:36 +00:00
#footer button.active,
Remove unnecessary selectors
2019-12-11 11:35:18 +00:00
.channel-list-item.active {
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
background-color: #303e4a;
Remove unnecessary selectors
2019-12-11 11:35:18 +00:00
cursor: default;
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
}
/* Remove background on hovered/active channel when sorting/drag-and-dropping */
Fix up css refactoring
2019-12-10 14:46:50 +00:00
.ui-sortable-ghost,
.channel-list-item.ui-sortable-dragged,
.ui-sortable-dragged .channel-list-item,
.ui-sortable-active .channel-list-item:hover,
.ui-sortable-active .channel-list-item.active {
Fix up sorting channel styling
2019-03-19 13:11:44 +00:00
background: transparent;
}
Fix up css refactoring
2019-12-10 14:46:50 +00:00
.ui-sortable-ghost::after {
Fix up sorting channel styling
2019-03-19 13:11:44 +00:00
background: var(--body-bg-color);
border: 1px dashed #99a2b4;
border-radius: 6px;
content: " ";
display: block;
position: absolute;
left: 10px;
top: 0;
bottom: 0;
right: 10px;
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
}
Fix up sorting channel styling
2019-03-19 13:11:44 +00:00
#sidebar .network {
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
position: relative;
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
margin-bottom: 20px;
Add touch-action to Messages, Sidebar and User list This commit fixes #1035
2017-09-12 20:50:26 +00:00
touch-action: pan-y;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix responsive interface
2014-08-15 13:52:14 +00:00
#sidebar .empty {
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
flex-grow: 1;
Fix responsive interface
2014-08-15 13:52:14 +00:00
line-height: 1.6;
Reduce message size on mobile and increase a bit UI text
2017-09-23 01:59:45 +00:00
padding: 40px 20px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
text-align: center;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item[data-type="lobby"] {
Fix responsive interface
2014-08-15 13:52:14 +00:00
color: #84ce88;
font-size: 15px;
font-weight: bold;
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
padding-left: 0;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item .lobby-wrap {
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
display: flex;
flex-grow: 1;
Prevent long lobby names pushing badges out of sidebar
2018-06-02 20:01:57 +00:00
overflow: hidden;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix up css refactoring
2019-12-10 14:46:50 +00:00
.channel-list-item[data-type="lobby"]:hover,
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item[data-type="lobby"].active {
Fix responsive interface
2014-08-15 13:52:14 +00:00
color: #c0f8c3;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item .not-connected-tooltip,
.channel-list-item .not-secure-tooltip,
.channel-list-item .parted-channel-tooltip {
Show/Hide parted channel icon/styling using v-if instead of CSS display property
2019-02-26 06:26:45 +00:00
margin: 0 8px;
}
Fix class targeting
2019-12-19 13:22:04 +00:00
.channel-list-item.not-secure {
Sync network status and security to client UI Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-02-19 11:12:01 +00:00
color: #f39c12;
}
Fix class targeting
2019-12-19 13:22:04 +00:00
.channel-list-item.not-secure:hover,
.channel-list-item.not-secure.active {
Sync network status and security to client UI Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-02-19 11:12:01 +00:00
color: #f8c572;
}
Fix class targeting
2019-12-19 13:22:04 +00:00
.channel-list-item.not-connected,
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item.parted-channel {
Sync network status and security to client UI Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-02-19 11:12:01 +00:00
color: #e74c3c;
}
Fix class targeting
2019-12-19 13:22:04 +00:00
.channel-list-item.not-connected:hover,
.channel-list-item.not-connected.active,
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item.parted-channel:hover,
.channel-list-item.parted-channel.active {
Sync network status and security to client UI Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-02-19 11:12:01 +00:00
color: #f1978e;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item::before {
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
width: 14px;
Added colored nicknames (optional)
2014-09-30 18:00:23 +00:00
margin-right: 12px;
Make channel list links clickable on full width, simplify code - Close button and badge are now positioned using the same method. Previously one was float and the other was absolutely positioned. - Increase the close button size to match 2.4.0, as it was made smaller when moving to the native font stack. - Removed link margins on left/right of the channel links, and the `1px` gap between links. - Removed hack/fix for drag-and-drop now made unnecessary
2017-09-23 03:39:06 +00:00
line-height: 18px;
Fade long channel names in sidebar
2016-02-21 01:28:45 +00:00
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item .name {
Fade long channel names in sidebar
2016-02-21 01:28:45 +00:00
position: relative;
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
flex-grow: 1;
Fade long channel names in sidebar
2016-02-21 01:28:45 +00:00
overflow: hidden;
white-space: nowrap;
margin-right: 5px;
Overflow topics with fade instead of ellipsis
2018-03-21 17:28:38 +00:00
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.header .topic,
.channel-list-item .name {
Replace pseudo element gradient fade with mask-image
2018-03-21 17:23:47 +00:00
mask-image: linear-gradient(to left, transparent, black 20px);
Fade long channel names in sidebar
2016-02-21 01:28:45 +00:00
}
Fix up css refactoring
2019-12-10 14:46:50 +00:00
.channel-list-item .badge,
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
#sidebar .add-channel-tooltip,
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item .close-tooltip {
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
flex-shrink: 0;
line-height: 1;
Make channel list links clickable on full width, simplify code - Close button and badge are now positioned using the same method. Previously one was float and the other was absolutely positioned. - Increase the close button size to match 2.4.0, as it was made smaller when moving to the native font stack. - Removed link margins on left/right of the channel links, and the `1px` gap between links. - Removed hack/fix for drag-and-drop now made unnecessary
2017-09-23 03:39:06 +00:00
}
Fix up css refactoring
2019-12-10 14:46:50 +00:00
.channel-list-item .badge {
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
background: rgba(255, 255, 255, 0.06);
Fix responsive interface
2014-08-15 13:52:14 +00:00
border-radius: 3px;
color: #afb6c0;
font-size: 10px;
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
padding: 4px 6px;
Make sure channel list close button is really absent when channel is not selected
2017-10-10 05:46:25 +00:00
transition: background-color 0.2s, color 0.2s;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix up css refactoring
2019-12-10 14:46:50 +00:00
.channel-list-item .badge:empty {
Make channel list links clickable on full width, simplify code - Close button and badge are now positioned using the same method. Previously one was float and the other was absolutely positioned. - Increase the close button size to match 2.4.0, as it was made smaller when moving to the native font stack. - Removed link margins on left/right of the channel links, and the `1px` gap between links. - Removed hack/fix for drag-and-drop now made unnecessary
2017-09-23 03:39:06 +00:00
display: none;
}
Fix up css refactoring
2019-12-10 14:46:50 +00:00
.channel-list-item .badge.highlight {
Fix responsive interface
2014-08-15 13:52:14 +00:00
background: #fff;
color: #49505a;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item .close {
Make channel list links clickable on full width, simplify code - Close button and badge are now positioned using the same method. Previously one was float and the other was absolutely positioned. - Increase the close button size to match 2.4.0, as it was made smaller when moving to the native font stack. - Removed link margins on left/right of the channel links, and the `1px` gap between links. - Removed hack/fix for drag-and-drop now made unnecessary
2017-09-23 03:39:06 +00:00
width: 18px;
height: 18px;
Make sure channel list close button is really absent when channel is not selected
2017-10-10 05:46:25 +00:00
display: none;
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
transition: opacity 0.2s, background-color 0.2s;
Fix #41: Replace close button image
2016-02-15 10:03:37 +00:00
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item .close::before {
Make channel list links clickable on full width, simplify code - Close button and badge are now positioned using the same method. Previously one was float and the other was absolutely positioned. - Increase the close button size to match 2.4.0, as it was made smaller when moving to the native font stack. - Removed link margins on left/right of the channel links, and the `1px` gap between links. - Removed hack/fix for drag-and-drop now made unnecessary
2017-09-23 03:39:06 +00:00
font-size: 20px;
Make sure all close buttons in the sidebar have same weight
2016-03-14 04:35:24 +00:00
font-weight: normal;
Fix #41: Replace close button image
2016-02-15 10:03:37 +00:00
display: inline-block;
Make channel list links clickable on full width, simplify code - Close button and badge are now positioned using the same method. Previously one was float and the other was absolutely positioned. - Increase the close button size to match 2.4.0, as it was made smaller when moving to the native font stack. - Removed link margins on left/right of the channel links, and the `1px` gap between links. - Removed hack/fix for drag-and-drop now made unnecessary
2017-09-23 03:39:06 +00:00
line-height: 16px;
Fix #41: Replace close button image
2016-02-15 10:03:37 +00:00
text-align: center;
content: "×";
color: #fff;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Fix #41: Replace close button image
2016-02-15 10:03:37 +00:00
Remove unnecessary selectors
2019-12-11 11:35:18 +00:00
.channel-list-item.active .close {
opacity: 0.4;
display: unset;
}
.channel-list-item.active .close:hover {
opacity: 1;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item[data-type="lobby"] .add-channel {
Add join channel UI via context menu or plus button next to lobbys
2017-12-13 04:52:26 +00:00
border-radius: 3px;
width: 18px;
height: 18px;
Change content of tooltip and button when opening/closing join channel form
2017-12-21 21:23:22 +00:00
opacity: 0.4;
transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
Add join channel UI via context menu or plus button next to lobbys
2017-12-13 04:52:26 +00:00
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item[data-type="lobby"] .add-channel::before {
Add join channel UI via context menu or plus button next to lobbys
2017-12-13 04:52:26 +00:00
font-size: 20px;
font-weight: normal;
display: inline-block;
line-height: 16px;
text-align: center;
content: "+";
color: #fff;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item[data-type="lobby"] .add-channel:hover {
Add join channel UI via context menu or plus button next to lobbys
2017-12-13 04:52:26 +00:00
opacity: 1;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item[data-type="lobby"] .add-channel.opened {
fix animation jitter when clicking join channel button
2017-12-28 12:46:55 +00:00
/* translateZ(0) enables hardware acceleration, this is to avoid jittering when animating */
transform: rotate(45deg) translateZ(0);
Change content of tooltip and button when opening/closing join channel form
2017-12-21 21:23:22 +00:00
}
Make networks collapsable
2018-02-20 08:42:50 +00:00
#sidebar .network .collapse-network {
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
width: 40px;
Make networks collapsable
2018-02-20 08:42:50 +00:00
opacity: 0.4;
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
padding-left: 11px;
transition: opacity 0.2s;
Fix up css refactoring
2019-12-10 14:46:50 +00:00
flex-shrink: 0;
Make networks collapsable
2018-02-20 08:42:50 +00:00
}
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
#sidebar .network .collapse-network-icon {
display: block;
width: 20px;
height: 20px;
transition: transform 0.2s;
Hide collapse button if no channels
2018-03-02 13:59:45 +00:00
}
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
#sidebar .network.collapsed .collapse-network-icon {
Tweak collapse/expand icon design - Animate the caret similarly to previews and status messages - Tweak margins to center things a bit - Remove unused CSS attributes
2018-03-02 06:08:56 +00:00
transform: rotate(-90deg);
}
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
#sidebar .network .collapse-network-icon::before {
Make networks collapsable
2018-02-20 08:42:50 +00:00
content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */
color: #fff;
}
#sidebar .collapse-network:hover {
opacity: 1;
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
#footer {
Restore padding and height of message input pre-textarea era
2016-08-02 04:33:16 +00:00
height: 45px;
Define icon font only once and fix sizing This commit applies the following across the whole style: - `font` statement is now the same as official FontAwesome CSS - Ensure icons are never italic or bold or that other variants can be applied - Ensure font-size and line-height of icons are inherited from parent - font-family and font-smoothing is now defined only once A few (mostly positive) side effects from these and related changes: - Header icons (main menu, context menu and user list) are now vertically centered! - Same applies to the Send icon, but it's more subtle there - Alignment of the footer icons are shifted a tiny bit - Server window icons are a wee bit bit bigger to match the server name font-size - The "Play sound" icon and text are now both 14px (was 14px / 16px)
2016-07-12 05:47:16 +00:00
font-size: 14px;
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
flex-shrink: 0;
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
display: flex;
justify-content: center;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
#footer button {
color: #b7c5d1;
Fix responsive interface
2014-08-15 13:52:14 +00:00
display: inline-block;
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
width: 45px;
height: 100%;
border-radius: 5px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Display icon in footer when an update is available
2020-01-02 10:55:02 +00:00
#footer .help.notified::after {
content: "\f021";
position: absolute;
bottom: 10px;
right: 7px;
padding: 2px;
font-size: 10px;
border-radius: 50%;
color: var(--link-color);
background: var(--body-bg-color);
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.window li,
.window p,
.window label,
Web Push Notifications
2017-07-10 19:47:03 +00:00
#settings .error {
Added server password to 'Connect' window
2014-09-13 01:03:16 +00:00
font-size: 14px;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Add join channel UI via context menu or plus button next to lobbys
2017-12-13 04:52:26 +00:00
.input {
Make all window form inputs white so selects match text inputs
2016-09-06 05:18:21 +00:00
background-color: white;
Fix responsive interface
2014-08-15 13:52:14 +00:00
border: 1px solid #cdd3da;
Minor changes
2014-08-16 00:05:37 +00:00
border-radius: 2px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
color: #222;
font-size: 14px;
margin: 2px 0;
Added server password to 'Connect' window
2014-09-13 01:03:16 +00:00
margin-bottom: 10px;
Change input sizes to be consistent
2018-06-19 10:32:15 +00:00
padding: 0 10px;
Do not silence outline of all elements, and add custom outline where possible - Tweak outlines - Consolidate focus shadows between inputs and buttons, apply custom focus to whole page (i.e. on "Join a channel" form), cleanup - Do not add custom outlines on checkboxes/radios as browsers are not doing this too well - Apply hover effect on all inputs, not just in `#windows`
2017-12-22 00:16:08 +00:00
transition: border-color 0.2s, box-shadow 0.2s;
Fix responsive interface
2014-08-15 13:52:14 +00:00
width: 100%;
Change input sizes to be consistent
2018-06-19 10:32:15 +00:00
height: 35px;
line-height: 35px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Mute disabled inputs
2017-12-27 20:31:21 +00:00
.input:disabled {
background-color: #ddd;
}
.input:not(:disabled):hover,
.input:not(:disabled):focus {
Do not silence outline of all elements, and add custom outline where possible - Tweak outlines - Consolidate focus shadows between inputs and buttons, apply custom focus to whole page (i.e. on "Join a channel" form), cleanup - Do not add custom outlines on checkboxes/radios as browsers are not doing this too well - Apply hover effect on all inputs, not just in `#windows`
2017-12-22 00:16:08 +00:00
border-color: #84ce88;
Mute disabled inputs
2017-12-27 20:31:21 +00:00
}
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
textarea.input {
Remove javascript scrollbar library, use hover appearing scrollbar instead
2016-06-22 20:05:25 +00:00
resize: vertical;
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
min-height: 35px;
Change input sizes to be consistent
2018-06-19 10:32:15 +00:00
padding: 6px 10px;
line-height: 1.5;
Remove javascript scrollbar library, use hover appearing scrollbar instead
2016-06-22 20:05:25 +00:00
}
Fix loading page styling
2019-02-15 06:40:42 +00:00
.window {
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
background: var(--window-bg-color);
Begin moving windows to Vue
2019-02-18 09:18:32 +00:00
display: flex;
flex-direction: column;
Fix up css refactoring
2019-12-10 14:46:50 +00:00
flex: 1 1 auto;
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
position: relative;
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
overflow-y: auto;
height: 100%;
Set scrollbar properties for Firefox 64+ Refs: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color https://drafts.csswg.org/css-scrollbars-1/
2019-01-15 09:38:58 +00:00
scrollbar-width: thin;
Use overscroll-behavior Ref: https://developers.google.com/web/updates/2017/11/overscroll-behavior
2018-05-02 11:17:56 +00:00
overscroll-behavior: contain;
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
-webkit-overflow-scrolling: touch;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
#loading,
#chat .chat-view {
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
/* flexbox does not seem to scroll without doing this */
Fix responsive interface
2014-08-15 13:52:14 +00:00
position: absolute;
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
bottom: 0;
left: 0;
Fix responsive interface
2014-08-15 13:52:14 +00:00
right: 0;
top: 0;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.window h1 {
Remove font family redundancy, fix missed fonts, remove Open Sans
2016-08-14 21:28:47 +00:00
font-size: 36px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.window h2 {
Increase contrast of headers in windows
2019-10-14 14:30:35 +00:00
border-bottom: 1px solid currentColor;
color: var(--window-heading-color);
Add TLS/SSL support
2014-09-10 15:56:19 +00:00
font-size: 22px;
margin: 30px 0 10px;
padding-bottom: 7px;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.window h2 small {
Remove float from changelog and version link
2019-12-12 11:24:28 +00:00
font-size: 16px;
Improve UI of the About section and changelog viewer - Keep consistent width between the Help page and Changelog (which is already different from other windows 😠) - Add icons to the About links - Make sure `li` elements (i.e. all the lists in changelogs) are consistent in size with rest of the client - Display version and release notes link on the "About The Lounge" header line, smaller, pushed to the right - Check new releases when opening the Help window in order to display it without having to open the release notes. Release notes are being fed to the Changelog page at that moment to avoid fetching twice. - Re-check version/fetch release notes after 24h. Since The Lounge can now run 24/7, reconnect when losing the network, we have to assume an "always-on" usage. - Change icon, animate background color when getting response from GitHub to avoid flashing. - Combine click handlers with our wonderful window management. These were the same handler, even with similar checks (`target` exists, etc.), just in 2 different places. This is necessary for the next item. - Combine "Open release notes" and "Go back to Help" button behaviors with window management handlers. The window management code is gross as ever, and is in desperate need of a refactor, but at least there is no duplicated code for the same behavior + history management. This fixes the "Next" history behavior (however reloading the app while viewing the notes does not load on the notes, but this is a bug for a different PR!). - Added a rule in the history management thingy: if a link we want to add history handling to has an `id`, store that in the state - Added a button to go back to the Help window - Fixed links to releases - Send user to the GitHub issues *list* instead of *new issue form* because if they do not have a GitHub account, they will be redirected to the login page, which is a rather unpleasant experience when you are already confused... - Fixed a bug that would return data about a new release in `latest` even though it is already the `current`. It was showing the current version as "The Lounge v... is now available". - Added https://user-images.githubusercontent.com to the CSP rule when prefetch storage is enabled, because that is where we have stored screenshots in the changelog so far. Meh (we can improve that later if we decide to have a dedicated place for screenshots). - Fetch changelog info even in public mode because users in public mode can access the release notes. They do not see the result of the version checker however.
2017-12-23 03:40:41 +00:00
line-height: 30px;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.window h3 {
Increase contrast of headers in windows
2019-10-14 14:30:35 +00:00
color: var(--window-heading-color);
Add a help window within the app This brings commands and keyboard shortcuts from the website, after a massive overhaul. It comes as part of the big documentation rewrite that I am currently doing. `kbd` design inspiration from GitHub, `code` design inspiration from Bootstrap. This help page is accessible from an icon in the sidebar, near the Settings icon.
2017-02-28 07:15:34 +00:00
font-size: 18px;
margin: 20px 0 10px;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.header {
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
line-height: 45px;
height: 45px;
Refactor channel titles to use flexbox
2018-02-23 21:57:45 +00:00
padding: 0 6px;
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
display: flex;
flex-shrink: 0;
Move escaping of topic and improve UI for long topics - Data should be handled as is and only do the escaping on the view/template or wherever it is used and escaping is necessary. Keeps things simple and the focus of escaping values in the right place. - Remove topic capitalization - For long topics: hide overflow and add a title to topic span - Also, simplify the code a tiny bit.
2015-04-26 22:20:54 +00:00
overflow: hidden;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
#chat .header {
Remove header border on non-chat windows and reduce top margin a bit more
2018-04-14 22:16:17 +00:00
border-bottom: 1px solid #e7e7e7;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.header .title {
Bigger font size
2017-05-09 09:39:15 +00:00
font-size: 15px;
Allow hiding channel list on desktop Fixes #17
2018-03-13 12:52:23 +00:00
padding-left: 6px;
Refactor channel titles to use flexbox
2018-02-23 21:57:45 +00:00
flex-shrink: 0;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
add save button to edit topic input field
2019-08-11 13:59:06 +00:00
.topic-container {
position: relative;
flex-grow: 1;
padding-left: 10px;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.header .topic {
Reuse CSS variable on muted texts (timestamp, self messages, etc.) and improve constrast accessibility #767676 is the lightest gray that passes AA level of WCAG contrast recommendations
2018-07-13 04:23:45 +00:00
color: var(--body-color-muted);
Fix responsive interface
2014-08-15 13:52:14 +00:00
margin-left: 8px;
Fix message and topic text wrapping
2016-03-22 16:04:34 +00:00
word-break: break-all;
Refactor channel titles to use flexbox
2018-02-23 21:57:45 +00:00
flex-grow: 1;
overflow: hidden;
Bring back line-height on messages Was removed in c051b705375c838d189d3dec7aa74c80794bb356, but this affected line height on mobile view due to increased font size
2018-03-02 08:56:55 +00:00
font-size: 14px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.header .topic-input {
make channel topic editable from user interface
2019-08-03 10:09:55 +00:00
color: inherit;
background: transparent;
border: 1px solid #cdd3da;
border-radius: 2px;
add save button to edit topic input field
2019-08-11 13:59:06 +00:00
padding-right: 37px;
padding-left: 10px;
width: 100%;
height: 35px;
make channel topic editable from user interface
2019-08-03 10:09:55 +00:00
overflow: hidden;
font-size: 14px;
Vertically center topic editing input in Safari. (#4325)
2021-10-10 05:23:58 +00:00
line-height: normal;
make channel topic editable from user interface
2019-08-03 10:09:55 +00:00
outline: none;
}
add save button to edit topic input field
2019-08-11 13:59:06 +00:00
.topic-container .save-topic {
position: absolute;
top: 6px;
right: 0;
}
.topic-container .save-topic span {
font-size: 16px;
color: #607992;
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
Fix save button style in topic edit
2019-12-19 13:05:49 +00:00
appearance: none;
add save button to edit topic input field
2019-08-11 13:59:06 +00:00
}
.topic-container .save-topic span:hover {
opacity: 0.6;
}
Fix window layout a bit
2016-07-05 23:23:46 +00:00
#chat {
overflow: hidden;
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
flex: 1 0 auto;
position: relative;
Fix window layout a bit
2016-07-05 23:23:46 +00:00
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
#chat .chat-view {
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
display: flex;
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
flex-direction: column;
Added server password to 'Connect' window
2014-09-13 01:03:16 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="condensed"] {
Condense Joins
2017-06-22 20:08:36 +00:00
flex-wrap: wrap;
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="condensed"] .content {
Move condense caret to the right, animate transition, add hover state (with transition), reuse thumbnail toggle style
2017-08-06 16:35:01 +00:00
flex: 1;
}
Fix expanded status messages not taking up full line width
2017-08-16 00:06:18 +00:00
/* Ensures expanded status messages always take up the full width */
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="condensed"] .msg {
Fix expanded status messages not taking up full line width
2017-08-16 00:06:18 +00:00
flex-basis: 100%;
}
Implement condensed messages option entirely with CSS Fixes #1432
2017-08-30 12:43:31 +00:00
#chat .condensed-summary .content {
display: block;
Move condense caret to the right, animate transition, add hover state (with transition), reuse thumbnail toggle style
2017-08-06 16:35:01 +00:00
cursor: pointer;
Fix text highlighting when clicking on condensed message toggles
2017-11-26 21:55:06 +00:00
user-select: none;
Move condense caret to the right, animate transition, add hover state (with transition), reuse thumbnail toggle style
2017-08-06 16:35:01 +00:00
}
Implement condensed messages option entirely with CSS Fixes #1432
2017-08-30 12:43:31 +00:00
#chat .condensed-summary {
display: flex;
}
Fix hovering condensed messages
2017-09-13 05:36:11 +00:00
#chat .condensed-summary .content:hover {
Change condensed summary hover to an underline
2019-03-25 15:08:22 +00:00
text-decoration: underline;
Condense Joins
2017-06-22 20:08:36 +00:00
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg.closed[data-type="condensed"] .msg {
Condense Joins
2017-06-22 20:08:36 +00:00
display: none;
}
Implement condensed messages option entirely with CSS Fixes #1432
2017-08-30 12:43:31 +00:00
#chat .condensed-summary .time {
Fix time placeholder showing on mobile format for condensed messages As an extra, make sure time placeholder cannot be selected anymore, and do not do an extra call to `tz` helper when time is not relevant/displayed. I tried to entirely remove `time`/`from` blocks, but because of flexbox layout, that broke message alignment...
2017-08-23 00:18:34 +00:00
visibility: hidden;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
#form,
Remove font family redundancy, fix missed fonts, remove Open Sans
2016-08-14 21:28:47 +00:00
.messages .msg,
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
.userlist {
Increase font size on desktops and mobiles
2017-09-21 06:21:48 +00:00
font-size: 14px;
Bring back line-height on messages Was removed in c051b705375c838d189d3dec7aa74c80794bb356, but this affected line height on mobile view due to increased font size
2018-03-02 08:56:55 +00:00
line-height: 1.4;
Added server password to 'Connect' window
2014-09-13 01:03:16 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
#chat .chat-content {
display: flex;
Adjust chat layout so messages directly above input
2021-06-22 04:55:54 +00:00
flex-direction: row-reverse;
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
flex-grow: 1;
Fix chat and userlist not scrolling
2018-03-06 18:01:39 +00:00
overflow: hidden;
Fix user list scroll area expanding behind the message input on mobile
2018-04-16 21:55:22 +00:00
position: relative;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix responsive interface
2014-08-15 13:52:14 +00:00
#chat .chat {
overflow: auto;
Always hide horizontal overflow in chat
2018-03-09 07:31:58 +00:00
overflow-x: hidden;
Align message container to the bottom
2017-12-01 10:41:26 +00:00
display: flex;
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
flex-grow: 1;
Align message container to the bottom
2017-12-01 10:41:26 +00:00
flex-direction: column;
Set scrollbar properties for Firefox 64+ Refs: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color https://drafts.csswg.org/css-scrollbars-1/
2019-01-15 09:38:58 +00:00
scrollbar-width: thin;
Use overscroll-behavior Ref: https://developers.google.com/web/updates/2017/11/overscroll-behavior
2018-05-02 11:17:56 +00:00
overscroll-behavior: contain;
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
-webkit-overflow-scrolling: touch;
Redirect pageup/pagedown without manually animating the scroll
2019-02-13 08:19:29 +00:00
outline: none;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
#chat .userlist {
Fix responsive interface
2014-08-15 13:52:14 +00:00
border-left: 1px solid #e7e7e7;
width: 180px;
Make userlist state consistent on mobile and desktop
2018-06-27 07:05:37 +00:00
display: none;
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
flex-direction: column;
flex-shrink: 0;
Add touch-action to more elements - Add touch-action: pan-y to .container, .networks, .sidebar, #form #input - Add touch-action: none to body
2017-09-13 22:04:03 +00:00
touch-action: pan-y;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Add join channel UI via context menu or plus button next to lobbys
2017-12-13 04:52:26 +00:00
/**
* Toggled via JavaScript
*/
#sidebar .join-form {
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
padding: 0 18px 8px;
Add join channel UI via context menu or plus button next to lobbys
2017-12-13 04:52:26 +00:00
}
#sidebar .join-form .input {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
margin-bottom: 5px;
}
#sidebar .join-form .btn {
display: block;
Cleanup sidebar to use flexbox
2018-03-04 19:02:27 +00:00
width: 100%;
Add join channel UI via context menu or plus button next to lobbys
2017-12-13 04:52:26 +00:00
margin: auto;
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
#chat .show-more {
Fix 'Show More' button
2014-09-28 21:51:24 +00:00
padding: 10px;
Make "Show older messages" style consistent with other buttons Also store the loading text in a `data` attribute instead of duplicate in template + JS, in order to help with future internationalization
2018-04-15 03:02:35 +00:00
padding-top: 15px;
Unread marker MVP
2016-05-13 10:23:05 +00:00
padding-bottom: 0;
Fix responsive interface
2014-08-15 13:52:14 +00:00
width: 100%;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Make "Show older messages" style consistent with other buttons Also store the loading text in a `data` attribute instead of duplicate in template + JS, in order to help with future internationalization
2018-04-15 03:02:35 +00:00
#chat .show-more .btn {
Fix 'Show More' button
2014-09-28 21:51:24 +00:00
width: 100%;
Make "Show older messages" style consistent with other buttons Also store the loading text in a `data` attribute instead of duplicate in template + JS, in order to help with future internationalization
2018-04-15 03:02:35 +00:00
margin: 0;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Add jump-to-bottom arrow when scrolled up
2018-07-18 18:31:51 +00:00
.scroll-down {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 2;
Hide scroll down button entirely with css to fix some issues
2018-09-24 12:47:39 +00:00
pointer-events: none;
opacity: 0;
transform: translateY(16px);
Improve scroll-down button UI
2019-02-18 06:13:32 +00:00
transition: transform 0.2s, opacity 0.2s;
Add jump-to-bottom arrow when scrolled up
2018-07-18 18:31:51 +00:00
cursor: pointer;
}
Hide scroll down button entirely with css to fix some issues
2018-09-24 12:47:39 +00:00
.scroll-down-shown {
opacity: 1;
transform: none;
pointer-events: auto;
}
Add jump-to-bottom arrow when scrolled up
2018-07-18 18:31:51 +00:00
.scroll-down-arrow {
Improve scroll-down button UI
2019-02-18 06:13:32 +00:00
width: 36px;
height: 36px;
line-height: 34px;
Add jump-to-bottom arrow when scrolled up
2018-07-18 18:31:51 +00:00
border-radius: 50%;
Improve scroll-down button UI
2019-02-18 06:13:32 +00:00
background: var(--window-bg-color);
Use CSS variable for button color
2019-02-18 18:32:41 +00:00
color: var(--button-color);
border: 2px solid var(--button-color);
Add jump-to-bottom arrow when scrolled up
2018-07-18 18:31:51 +00:00
text-align: center;
Improve scroll-down button UI
2019-02-18 06:13:32 +00:00
transition: background 0.2s, color 0.2s;
Reduce shadow on scroll-down button
2019-02-18 18:54:25 +00:00
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.15);
Add jump-to-bottom arrow when scrolled up
2018-07-18 18:31:51 +00:00
}
.scroll-down:hover .scroll-down-arrow {
Use CSS variable for button color
2019-02-18 18:32:41 +00:00
background: var(--button-color);
color: var(--button-text-color-hover);
Add jump-to-bottom arrow when scrolled up
2018-07-18 18:31:51 +00:00
}
.scroll-down-arrow::after {
content: "\f107"; /* https://fontawesome.com/icons/angle-down?style=solid */
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.userlist-open .chat-view[data-type="channel"] .scroll-down {
Add jump-to-bottom arrow when scrolled up
2018-07-18 18:31:51 +00:00
right: 196px;
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
#chat .messages {
Fix #111: Simplify message padding
2016-02-27 23:22:52 +00:00
padding: 10px 0;
Add touch-action to Messages, Sidebar and User list This commit fixes #1035
2017-09-12 20:50:26 +00:00
touch-action: pan-y;
Fix UI issues with special channels As a reminder, "special" channels right now are banlists and channel lists. - Remove that bottom margin that was causing things to hide behind the message input. This was probably relevant before the whole UI was flexbox-based and was not removed when switching. - Do not align to bottom on special channels - Hide unread and date markers on special channels - Make sure table headers in special channels are not truncated, which was for example the case with "Users" being broken up ("User" and "s" on 2 different lines)
2017-12-17 06:14:11 +00:00
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
#chat .chat-view:not([data-type="special"]) .messages {
Align message container to the bottom
2017-12-01 10:41:26 +00:00
margin-top: auto;
Fix breaking layout when switching portrait/landscape modes This re-adds the table layout in CSS removed in 3cddbbce6eca34843c7cc4b876a9ecb12602672e, https://github.com/thelounge/lounge/pull/332.
2016-07-10 00:03:41 +00:00
}
#chat .msg {
Improve styling of the unread marker
2016-07-04 21:57:49 +00:00
word-wrap: break-word;
Allow long URLs to break onto next line on Chrome This fixes a bug that displays a horizontal scrollbar and messes up with the layout when URLs (or text) is too long. Fix is Chrome-specific but so is the bug.
2016-08-20 04:23:56 +00:00
word-break: break-word; /* Webkit-specific */
Remove table layout for chat messages (and fix layout issues yet again)
2016-09-04 01:29:48 +00:00
display: flex;
Fix timestamp tooltips not aligning correctly with timestamps
2018-01-23 05:49:17 +00:00
align-items: flex-start;
Remove table layout for chat messages (and fix layout issues yet again)
2016-09-04 01:29:48 +00:00
position: relative;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Improve styling of the unread marker
2016-07-04 21:57:49 +00:00
#chat .unread-marker {
position: relative;
text-align: center;
margin: 0 10px;
Fix unread marker disappearing when opacity set to 1
2016-07-07 05:14:52 +00:00
z-index: 0;
Remove font family redundancy, fix missed fonts, remove Open Sans
2016-08-14 21:28:47 +00:00
font-weight: bold;
font-size: 12px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .unread-marker::before {
Improve styling of the unread marker
2016-07-04 21:57:49 +00:00
position: absolute;
z-index: -1;
content: "";
left: 0;
right: 0;
top: 50%;
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
border-top: 1px solid var(--unread-marker-color);
Improve styling of the unread marker
2016-07-04 21:57:49 +00:00
}
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .unread-marker-text::before {
Improve styling of the unread marker
2016-07-04 21:57:49 +00:00
content: "New messages";
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
background-color: var(--window-bg-color);
color: var(--unread-marker-color);
Improve styling of the unread marker
2016-07-04 21:57:49 +00:00
padding: 0 10px;
Unread marker MVP
2016-05-13 10:23:05 +00:00
}
Add a date seperator
2016-10-03 18:03:19 +00:00
#chat .date-marker {
position: relative;
text-align: center;
margin: 0 10px;
z-index: 0;
font-weight: bold;
font-size: 12px;
}
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .date-marker::before {
Add a date seperator
2016-10-03 18:03:19 +00:00
position: absolute;
z-index: -1;
content: "";
left: 0;
right: 0;
top: 50%;
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
border-top: 1px solid var(--date-marker-color);
Add a date seperator
2016-10-03 18:03:19 +00:00
}
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .date-marker-text::before {
Remove some data attributes
2019-11-20 22:16:58 +00:00
content: attr(aria-label);
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
background-color: var(--window-bg-color);
color: var(--date-marker-color);
Add a date seperator
2016-10-03 18:03:19 +00:00
padding: 0 10px;
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
#chat .time,
#chat .from,
Fix preserved whitespace-related issues for previews by separating them from main text
2017-07-20 05:58:04 +00:00
#chat .content {
Fix some missing parts from recent font changes/resizing - Separate messages by one more pixel: the recent font changes make multiline messages rather hard to differentite from one another. I believe adding 2px looked better, but I knew that would cause riots so I went for a middle ground 😅 - Make previews the same size than messages themselves, and adapt the thumbnail height accordingly - Make the message input font size same as message size
2017-10-03 04:55:48 +00:00
padding: 3px 0;
Remove table layout for chat messages (and fix layout issues yet again)
2016-09-04 01:29:48 +00:00
flex: 0 0 auto;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix responsive interface
2014-08-15 13:52:14 +00:00
#chat .time {
Reuse CSS variable on muted texts (timestamp, self messages, etc.) and improve constrast accessibility #767676 is the lightest gray that passes AA level of WCAG contrast recommendations
2018-07-13 04:23:45 +00:00
color: var(--body-color-muted);
Show seconds in timestamp
2017-05-06 18:44:57 +00:00
padding-left: 10px;
Give chat timestamp a fix width to fix message alignment issues
2017-10-01 05:12:08 +00:00
width: 55px;
Keep timestamps aligned when using a font with variable-width numbers This improves the layout of the timestamps when using the San Francisco font.
2018-07-29 15:15:00 +00:00
font-variant-numeric: tabular-nums;
Fix up time width with AM/PM
2020-02-29 09:51:12 +00:00
box-sizing: content-box; /* highlights have a border-left */
Give chat timestamp a fix width to fix message alignment issues
2017-10-01 05:12:08 +00:00
}
Fix up time width with AM/PM
2020-02-29 09:51:12 +00:00
#chat.time-12h .time,
#chat.time-seconds .time {
Give chat timestamp a fix width to fix message alignment issues
2017-10-01 05:12:08 +00:00
width: 75px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix up time width with AM/PM
2020-02-29 09:51:12 +00:00
#chat.time-seconds.time-12h .time {
width: 90px;
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
#chat .from {
padding-right: 10px;
text-align: right;
Remove table layout for chat messages (and fix layout issues yet again)
2016-09-04 01:29:48 +00:00
width: 134px;
Fade out for long usernames.
2017-05-11 00:17:27 +00:00
overflow: hidden;
white-space: nowrap;
position: relative;
Remove table layout for chat messages (and fix layout issues yet again)
2016-09-04 01:29:48 +00:00
}
Fix preserved whitespace-related issues for previews by separating them from main text
2017-07-20 05:58:04 +00:00
#chat .content {
Remove table layout for chat messages (and fix layout issues yet again)
2016-09-04 01:29:48 +00:00
flex: 1 1 auto;
Fix link previews not truncating correctly
2017-07-22 09:33:49 +00:00
min-width: 0;
Update stylelint rules
2017-11-26 12:28:33 +00:00
padding-left: 10px;
padding-right: 6px;
Fix border after nickname not taking full height Fixes #2054
2018-02-11 17:11:17 +00:00
border-left: 1px solid #f6f6f6;
Allow timestamp tooltips to expand beyond message boundaries
2018-01-23 06:02:37 +00:00
overflow: hidden; /* Prevents Zalgo text to expand beyond messages */
add bidi support to messages, actions, previews etc
2019-08-03 12:35:13 +00:00
text-align: left; /* so RTL text will still be aligned left, not right */
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="unhandled"] .from {
Reuse muted color var for unhandled messages, and remove channel list color overrides
2018-07-24 05:11:43 +00:00
color: var(--body-color-muted);
}
Fix UI issues with special channels As a reminder, "special" channels right now are banlists and channel lists. - Remove that bottom margin that was causing things to hide behind the message input. This was probably relevant before the whole UI was flexbox-based and was not removed when switching. - Do not align to bottom on special channels - Hide unread and date markers on special channels - Make sure table headers in special channels are not truncated, which was for example the case with "Users" being broken up ("User" and "s" on 2 different lines)
2017-12-17 06:14:11 +00:00
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
#chat .chat-view[data-type="special"] table th {
Fix UI issues with special channels As a reminder, "special" channels right now are banlists and channel lists. - Remove that bottom margin that was causing things to hide behind the message input. This was probably relevant before the whole UI was flexbox-based and was not removed when switching. - Do not align to bottom on special channels - Hide unread and date markers on special channels - Make sure table headers in special channels are not truncated, which was for example the case with "Users" being broken up ("User" and "s" on 2 different lines)
2017-12-17 06:14:11 +00:00
word-break: normal;
}
Make "Show older messages" style consistent with other buttons Also store the loading text in a `data` attribute instead of duplicate in template + JS, in order to help with future internationalization
2018-04-15 03:02:35 +00:00
/* Parsed nicks and channels */
Invert no-colors CSS class and rename option This will reset users' preference regarding colored nicknames but it's to make it more specific than just "colors".
2016-05-15 19:56:48 +00:00
Fix mouse cursor on userlist
2018-04-30 05:03:47 +00:00
#chat .user,
Make "Show older messages" style consistent with other buttons Also store the loading text in a `data` attribute instead of duplicate in template + JS, in order to help with future internationalization
2018-04-15 03:02:35 +00:00
.inline-channel {
Change nicks from links to spans everywhere Fixes #338
2016-06-22 19:34:10 +00:00
cursor: pointer;
Invert no-colors CSS class and rename option This will reset users' preference regarding colored nicknames but it's to make it more specific than just "colors".
2016-05-15 19:56:48 +00:00
}
Make "Show older messages" style consistent with other buttons Also store the loading text in a `data` attribute instead of duplicate in template + JS, in order to help with future internationalization
2018-04-15 03:02:35 +00:00
.chat .user:hover,
.inline-channel:hover {
Enable underlines on links
2018-07-05 10:10:10 +00:00
text-decoration: underline;
Change nicks from links to spans everywhere Fixes #338
2016-06-22 19:34:10 +00:00
}
Make "Show older messages" style consistent with other buttons Also store the loading text in a `data` attribute instead of duplicate in template + JS, in order to help with future internationalization
2018-04-15 03:02:35 +00:00
/* Nicknames */
#chat .user {
color: #50a656;
}
Reduce lightness of low contrast nick colors to reach AA level of WCAG 2.0
2018-03-23 05:19:43 +00:00
#chat.colored-nicks .user.color-1 { color: #107ead; }
#chat.colored-nicks .user.color-2 { color: #a86500; }
#chat.colored-nicks .user.color-3 { color: #008a3c; }
#chat.colored-nicks .user.color-4 { color: #e00096; }
#chat.colored-nicks .user.color-5 { color: #f0000c; }
Invert no-colors CSS class and rename option This will reset users' preference regarding colored nicknames but it's to make it more specific than just "colors".
2016-05-15 19:56:48 +00:00
#chat.colored-nicks .user.color-6 { color: #000094; }
#chat.colored-nicks .user.color-7 { color: #006441; }
#chat.colored-nicks .user.color-8 { color: #00566e; }
Reduce lightness of low contrast nick colors to reach AA level of WCAG 2.0
2018-03-23 05:19:43 +00:00
#chat.colored-nicks .user.color-9 { color: #e6006b; }
#chat.colored-nicks .user.color-10 { color: #0d8766; }
Invert no-colors CSS class and rename option This will reset users' preference regarding colored nicknames but it's to make it more specific than just "colors".
2016-05-15 19:56:48 +00:00
#chat.colored-nicks .user.color-11 { color: #006b3b; }
Reduce lightness of low contrast nick colors to reach AA level of WCAG 2.0
2018-03-23 05:19:43 +00:00
#chat.colored-nicks .user.color-12 { color: #00857e; }
Invert no-colors CSS class and rename option This will reset users' preference regarding colored nicknames but it's to make it more specific than just "colors".
2016-05-15 19:56:48 +00:00
#chat.colored-nicks .user.color-13 { color: #00465b; }
Reduce lightness of low contrast nick colors to reach AA level of WCAG 2.0
2018-03-23 05:19:43 +00:00
#chat.colored-nicks .user.color-14 { color: #eb005a; }
#chat.colored-nicks .user.color-15 { color: #e62600; }
#chat.colored-nicks .user.color-16 { color: #0f8546; }
#chat.colored-nicks .user.color-17 { color: #e60067; }
#chat.colored-nicks .user.color-18 { color: #eb002b; }
#chat.colored-nicks .user.color-19 { color: #eb003f; }
Invert no-colors CSS class and rename option This will reset users' preference regarding colored nicknames but it's to make it more specific than just "colors".
2016-05-15 19:56:48 +00:00
#chat.colored-nicks .user.color-20 { color: #007a56; }
#chat.colored-nicks .user.color-21 { color: #095092; }
#chat.colored-nicks .user.color-22 { color: #000bde; }
Reduce lightness of low contrast nick colors to reach AA level of WCAG 2.0
2018-03-23 05:19:43 +00:00
#chat.colored-nicks .user.color-23 { color: #008577; }
Invert no-colors CSS class and rename option This will reset users' preference regarding colored nicknames but it's to make it more specific than just "colors".
2016-05-15 19:56:48 +00:00
#chat.colored-nicks .user.color-24 { color: #00367d; }
Reduce lightness of low contrast nick colors to reach AA level of WCAG 2.0
2018-03-23 05:19:43 +00:00
#chat.colored-nicks .user.color-25 { color: #007e9e; }
Invert no-colors CSS class and rename option This will reset users' preference regarding colored nicknames but it's to make it more specific than just "colors".
2016-05-15 19:56:48 +00:00
#chat.colored-nicks .user.color-26 { color: #006119; }
Reduce lightness of low contrast nick colors to reach AA level of WCAG 2.0
2018-03-23 05:19:43 +00:00
#chat.colored-nicks .user.color-27 { color: #007ea8; }
#chat.colored-nicks .user.color-28 { color: #3c8500; }
#chat.colored-nicks .user.color-29 { color: #e6007e; }
#chat.colored-nicks .user.color-30 { color: #c75300; }
#chat.colored-nicks .user.color-31 { color: #eb0400; }
#chat.colored-nicks .user.color-32 { color: #e60082; }
Replace color generation with CSS classes These colors were built using the current generation function to have similar style.
2016-05-12 06:15:02 +00:00
Remove extra .text span as its no longer needed
2018-09-25 12:09:47 +00:00
#chat .self .content {
Reuse CSS variable on muted texts (timestamp, self messages, etc.) and improve constrast accessibility #767676 is the lightest gray that passes AA level of WCAG contrast recommendations
2018-07-13 04:23:45 +00:00
color: var(--body-color-muted);
Fix bugs
2014-09-14 18:49:42 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Implement /list Thanks to @xPaw for the base of this code
2016-03-09 20:04:07 +00:00
#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;
}
Add support for banlist messages
2017-04-22 12:51:21 +00:00
#chat table.channel-list,
Add support for /ignore, /unignore and /ignorelist commands
2018-03-11 18:17:57 +00:00
#chat table.ban-list,
Implement invite list
2019-04-14 11:44:44 +00:00
#chat table.invite-list,
Add support for /ignore, /unignore and /ignorelist commands
2018-03-11 18:17:57 +00:00
#chat table.ignore-list {
Implement /list Thanks to @xPaw for the base of this code
2016-03-09 20:04:07 +00:00
margin: 5px 10px;
width: calc(100% - 30px);
}
#chat table.channel-list th,
Add support for banlist messages
2017-04-22 12:51:21 +00:00
#chat table.ban-list th,
Implement invite list
2019-04-14 11:44:44 +00:00
#chat table.invite-list th,
Add support for /ignore, /unignore and /ignorelist commands
2018-03-11 18:17:57 +00:00
#chat table.ignore-list th,
Add support for banlist messages
2017-04-22 12:51:21 +00:00
#chat table.channel-list td,
Add support for /ignore, /unignore and /ignorelist commands
2018-03-11 18:17:57 +00:00
#chat table.ban-list td,
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
#chat table.invite-list td {
Implement /list Thanks to @xPaw for the base of this code
2016-03-09 20:04:07 +00:00
padding: 5px;
vertical-align: top;
border-bottom: #eee 1px solid;
}
Improve channels list. - Set fixed width to channel and users column. - Sort by number of users in channel. - Executing /list multiple times wont show multiple tables. - Channel list is not stickied to the bottom. - Limit channels to 500. Scrolling through 1k is very slow on my system.
2017-04-06 16:22:56 +00:00
#chat table.channel-list .channel {
width: 80px;
}
Implement /list Thanks to @xPaw for the base of this code
2016-03-09 20:04:07 +00:00
#chat table.channel-list .channel,
Add support for banlist messages
2017-04-22 12:51:21 +00:00
#chat table.channel-list .topic,
#chat table.ban-list .hostmask,
#chat table.ban-list .banned_by,
Add support for /ignore, /unignore and /ignorelist commands
2018-03-11 18:17:57 +00:00
#chat table.ban-list .banned_at,
#chat table.ignore-list .hostmask,
#chat table.ignore-list .when {
Implement /list Thanks to @xPaw for the base of this code
2016-03-09 20:04:07 +00:00
text-align: left;
}
#chat table.channel-list .users {
text-align: center;
Improve channels list. - Set fixed width to channel and users column. - Sort by number of users in channel. - Executing /list multiple times wont show multiple tables. - Channel list is not stickied to the bottom. - Limit channels to 500. Scrolling through 1k is very slow on my system.
2017-04-06 16:22:56 +00:00
width: 50px;
Implement /list Thanks to @xPaw for the base of this code
2016-03-09 20:04:07 +00:00
}
Implement generic monospace blocks for INFO and MOTD numerics Fixes #3961
2020-06-29 07:51:17 +00:00
#chat.hide-motd .msg[data-command="motd"] {
Added messages show/hide toggles
2014-09-10 20:08:32 +00:00
display: none !important;
}
Handle invite event
2016-02-12 11:24:13 +00:00
Implement generic monospace blocks for INFO and MOTD numerics Fixes #3961
2020-06-29 07:51:17 +00:00
#chat .msg[data-type="monospace_block"] .text {
Use monospace font on MOTDs and set an icon
2018-07-16 17:59:45 +00:00
background: #f6f6f6;
display: inline-block;
border-radius: 4px;
padding: 6px;
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#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 {
Reuse CSS variable on muted texts (timestamp, self messages, etc.) and improve constrast accessibility #767676 is the lightest gray that passes AA level of WCAG contrast recommendations
2018-07-13 04:23:45 +00:00
color: var(--body-color-muted);
Mute join/kick/part/quit/nick actions in color
2016-02-15 09:32:57 +00:00
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="action"] .from,
#chat .msg[data-type="action"] .content,
#chat .msg[data-type="action"] .user {
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
color: #f39c12;
Render user actions separately
2016-01-23 14:39:54 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="notice"] .time,
Differentiate WALLOPS from NOTICE
2021-06-22 10:50:22 +00:00
#chat .msg[data-type="wallops"] .time,
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="notice"] .content,
Differentiate WALLOPS from NOTICE
2021-06-22 10:50:22 +00:00
#chat .msg[data-type="wallops"] .content,
#chat .msg[data-type="notice"] .user,
#chat .msg[data-type="wallops"] .user {
Use data-type on .msg
2019-12-15 11:46:43 +00:00
color: #0074d9;
Render user actions separately
2016-01-23 14:39:54 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="notice"] .from .user::before {
Render user actions separately
2016-01-23 14:39:54 +00:00
content: "Notice: ";
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Render user actions separately
2016-01-23 14:39:54 +00:00
Differentiate WALLOPS from NOTICE
2021-06-22 10:50:22 +00:00
#chat .msg[data-type="wallops"] .from .user::before {
content: "Wallops: ";
}
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="error"],
#chat .msg[data-type="error"] .from {
Use a combination background + left border for highlight messages
2018-06-04 04:55:36 +00:00
color: #e74c3c;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
#chat .chat-view[data-type="channel"] .msg.highlight {
Use a combination background + left border for highlight messages
2018-06-04 04:55:36 +00:00
background-color: var(--highlight-bg-color);
border-left: 5px solid var(--highlight-border-color);
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
#chat .chat-view[data-type="channel"] .msg.highlight .time {
Use a combination background + left border for highlight messages
2018-06-04 04:55:36 +00:00
padding-left: 5px;
color: #696969;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
#chat .chat-view[data-type="channel"] .msg.highlight .content {
Use a combination background + left border for highlight messages
2018-06-04 04:55:36 +00:00
border-left: 1px solid var(--highlight-bg-color);
Mute join/kick/part/quit/nick actions in color
2016-02-15 09:32:57 +00:00
}
Add file size to link preview
2019-08-09 20:20:08 +00:00
#chat .preview-size {
margin-left: 5px;
user-select: none;
}
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
#chat .toggle-content.opened .more-caret, /* Expand/Collapse link previews */
Move condense caret to the right, animate transition, add hover state (with transition), reuse thumbnail toggle style
2017-08-06 16:35:01 +00:00
#chat .toggle-button.opened, /* Thumbnail toggle */
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg:not(.closed)[data-type="condensed"] .toggle-button { /* Expanded status message toggle */
Move preview toggle buttons next to their respective URLs and switch from ellipsis to caret
2017-07-06 07:35:54 +00:00
transform: rotate(90deg);
}
Improve link preview loading
2019-11-25 19:37:51 +00:00
#chat .preview {
display: flex; /* Fix odd margin added by inline-flex in .toggle-content */
}
Added link plugin
2014-09-27 19:17:05 +00:00
#chat .toggle-content {
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
background: #f6f6f6;
border-radius: 5px;
Scrolling now works correctly when loading thumbnails
2014-09-30 21:44:29 +00:00
max-width: 100%;
Fix some missing parts from recent font changes/resizing - Separate messages by one more pixel: the recent font changes make multiline messages rather hard to differentite from one another. I believe adding 2px looked better, but I knew that would cause riots so I went for a middle ground 😅 - Make previews the same size than messages themselves, and adapt the thumbnail height accordingly - Make the message input font size same as message size
2017-10-03 04:55:48 +00:00
margin: 0;
margin-top: 6px;
Improve inline previews for links and images
2016-07-23 03:01:55 +00:00
overflow: hidden;
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
Minor fix for previews
2018-07-10 14:44:50 +00:00
display: inline-flex !important;
align-items: flex-start;
Fix whitespace in previews
2018-09-25 13:28:08 +00:00
white-space: normal;
Added link plugin
2014-09-27 19:17:05 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
/* This applies to images of preview-type-image and thumbnails of preview-type-link */
Added link plugin
2014-09-27 19:17:05 +00:00
#chat .toggle-content img {
max-width: 100%;
Improve inline previews for links and images
2016-07-23 03:01:55 +00:00
max-height: 128px;
Fetch page titles
2014-09-27 20:39:14 +00:00
display: block;
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
cursor: zoom-in;
Fetch page titles
2014-09-27 20:39:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
#chat .toggle-content pre.prefetch-error {
padding: 0;
margin: 0;
color: inherit;
background-color: transparent;
}
#chat .toggle-content .prefetch-error {
Report server errors when preview fetch fails
2018-02-05 08:46:05 +00:00
display: none;
}
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
#chat .toggle-content.opened .prefetch-error {
display: inline;
}
/* This applies to thumbnails of preview-type-link only */
Add thumbnail to toggles when sites have them Displays a small thumbnail above each toggle that comes from either og:image or twitter:image meta tags.
2014-10-12 01:42:30 +00:00
#chat .toggle-content .thumb {
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
max-height: 54px;
max-width: 96px;
Add thumbnail to toggles when sites have them Displays a small thumbnail above each toggle that comes from either og:image or twitter:image meta tags.
2014-10-12 01:42:30 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
#chat .toggle-type-error,
#chat .toggle-content .toggle-text {
padding: 8px 10px;
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
}
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
#chat .toggle-content .toggle-text {
Do not truncate link previews if viewport can fit more text Fixes #1084
2017-07-03 11:43:16 +00:00
white-space: nowrap;
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
overflow: hidden;
add bidi support to messages, actions, previews etc
2019-08-03 12:35:13 +00:00
text-align: initial;
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
}
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
#chat .toggle-content.opened .toggle-text {
white-space: normal;
}
#chat .toggle-content .head {
display: flex;
align-items: flex-start;
font-weight: bold;
Do not truncate link previews if viewport can fit more text Fixes #1084
2017-07-03 11:43:16 +00:00
}
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
#chat .toggle-type-error,
#chat .toggle-text .body {
color: #717171;
}
#chat .toggle-text a {
color: inherit;
}
#chat .toggle-text .overflowable {
Improve inline previews for links and images
2016-07-23 03:01:55 +00:00
text-overflow: ellipsis;
overflow: hidden;
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
flex-grow: 1;
Fetch page titles
2014-09-27 20:39:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
#chat .toggle-content .more {
Fix color of "More" preview button in Morning
2018-04-12 04:52:05 +00:00
color: var(--link-color);
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
font-weight: normal;
margin-left: 10px;
flex-shrink: 0;
Fix link preview title going underneath the user list Also fix the preview description not respecting the ellipsis, and update the image size and margin to nicely align with text.
2017-04-04 06:30:16 +00:00
}
Add hover underline on preview expand button
2018-09-21 08:05:56 +00:00
#chat .toggle-content .more:hover {
text-decoration: underline;
}
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
#chat .toggle-content .more::after {
Restore whitespace between caret and More/Less text in previews
2018-06-10 19:39:39 +00:00
content: " " attr(aria-label);
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
}
#chat .toggle-content .more-caret {
display: inline-block;
transition: transform 0.2s;
}
#chat .toggle-content .more-caret::before {
content: "\f0da"; /* https://fontawesome.com/icons/caret-right?style=solid */
Fetch page titles
2014-09-27 20:39:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Support audio file previews
2017-12-06 22:27:35 +00:00
#chat audio {
width: 600px;
max-width: 100%;
}
Fix video element overflowing on chrome.
2019-12-07 14:11:16 +00:00
#chat .toggle-type-video {
Move video size to css
2017-12-14 11:12:22 +00:00
max-width: 640px;
Fix video element overflowing on chrome.
2019-12-07 14:11:16 +00:00
}
#chat video {
max-width: 100%;
Move video size to css
2017-12-14 11:12:22 +00:00
max-height: 240px;
}
Hide empty preview divs when there are no previews loaded
2017-07-18 04:37:45 +00:00
/* Do not display an empty div when there are no previews. Useful for example in
part/quit messages where we don't load previews (adds a blank line otherwise) */
#chat .preview:empty {
display: none;
}
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
#chat .userlist .count {
Add TLS/SSL support
2014-09-10 15:56:19 +00:00
background: #fafafa;
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
height: 45px;
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
flex-shrink: 0;
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
position: relative;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
#chat .userlist .search {
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
color: var(--body-color);
Fix responsive interface
2014-08-15 13:52:14 +00:00
border: 0;
background: none;
font: inherit;
outline: 0;
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
padding: 13px;
Fix right padding on user list search
2020-01-27 09:43:25 +00:00
padding-right: 30px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
width: 100%;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
#chat .userlist .names {
flex-grow: 1;
Fix responsive interface
2014-08-15 13:52:14 +00:00
overflow: auto;
overflow-x: hidden;
Split users by mode in the sidebar
2014-10-04 19:47:27 +00:00
padding-bottom: 10px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
width: 100%;
Add touch-action to Messages, Sidebar and User list This commit fixes #1035
2017-09-12 20:50:26 +00:00
touch-action: pan-y;
Set scrollbar properties for Firefox 64+ Refs: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color https://drafts.csswg.org/css-scrollbars-1/
2019-01-15 09:38:58 +00:00
scrollbar-width: thin;
Use overscroll-behavior Ref: https://developers.google.com/web/updates/2017/11/overscroll-behavior
2018-05-02 11:17:56 +00:00
overscroll-behavior: contain;
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
-webkit-overflow-scrolling: touch;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Change nicks from links to spans everywhere Fixes #338
2016-06-22 19:34:10 +00:00
#chat .names .user {
Fix responsive interface
2014-08-15 13:52:14 +00:00
display: block;
Minor changes
2014-08-18 23:54:14 +00:00
line-height: 1.6;
Split users by mode in the sidebar
2014-10-04 19:47:27 +00:00
padding: 0 16px;
Fix hyphenated names overflowing (#1667)
2017-10-30 16:01:35 +00:00
white-space: nowrap;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Make userlist section titles sticky on scroll
2018-07-13 04:22:25 +00:00
#chat .user-mode {
margin-bottom: 15px;
}
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .user-mode::before {
Make userlist section titles sticky on scroll
2018-07-13 04:22:25 +00:00
background: var(--window-bg-color);
color: var(--body-color-muted);
Split users by mode in the sidebar
2014-10-04 19:47:27 +00:00
display: block;
Make userlist section titles sticky on scroll
2018-07-13 04:22:25 +00:00
font-size: 0.85em;
Split users by mode in the sidebar
2014-10-04 19:47:27 +00:00
line-height: 1.6;
Make userlist section titles sticky on scroll
2018-07-13 04:22:25 +00:00
padding: 5px 16px;
position: sticky;
top: 0;
Split users by mode in the sidebar
2014-10-04 19:47:27 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .user-mode.owner::before {
Split users by mode in the sidebar
2014-10-04 19:47:27 +00:00
content: "Owners";
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .user-mode.admin::before {
Split users by mode in the sidebar
2014-10-04 19:47:27 +00:00
content: "Administrators";
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .user-mode.op::before {
Split users by mode in the sidebar
2014-10-04 19:47:27 +00:00
content: "Operators";
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .user-mode.half-op::before {
Half-op section in user list is missing title
2014-10-06 16:31:32 +00:00
content: "Half-Operators";
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .user-mode.voice::before {
Split users by mode in the sidebar
2014-10-04 19:47:27 +00:00
content: "Voiced";
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .user-mode.normal::before {
Split users by mode in the sidebar
2014-10-04 19:47:27 +00:00
content: "Users";
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#chat .user-mode-search::before {
Use separate container for search results
2017-01-28 17:37:26 +00:00
content: "Search Results";
}
Channel list rendering with Vue Co-Authored-By: Tim Miller-Williams <timmw@users.noreply.github.com>
2018-07-06 18:15:15 +00:00
#loading {
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
display: flex;
Make style of loading page similar to other pages - Move markup around to make the loading page a window of its own instead of a sub-window of `#chat` - Remove inline styling in loading page - Use same styling than other non-messages windows for title and text - Add a `z-index` to the loading page to hide the message input - Vertically align the sign in page title with all other titles - Make sure all `h1.title`s are bottom-margined consistently and remove negative margin on the Settings page title to align with the Connect page title (Reverting/Improving this should be done at the `h2` level instead)
2016-06-21 05:52:18 +00:00
font-size: 14px;
Fix loading page styling
2019-02-15 06:40:42 +00:00
height: 100%;
}
#loading .window {
height: initial;
Center loading screen
2017-10-28 20:50:57 +00:00
display: flex;
flex-direction: column;
Make style of loading page similar to other pages - Move markup around to make the loading page a window of its own instead of a sub-window of `#chat` - Remove inline styling in loading page - Use same styling than other non-messages windows for title and text - Add a `z-index` to the loading page to hide the message input - Vertically align the sign in page title with all other titles - Make sure all `h1.title`s are bottom-margined consistently and remove negative margin on the Settings page title to align with the Connect page title (Reverting/Improving this should be done at the `h2` level instead)
2016-06-21 05:52:18 +00:00
}
#loading p {
Fix responsive interface
2014-08-15 13:52:14 +00:00
margin-top: 10px;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Improve error page at loading - Display the "Reload page" instantly and not after 5 seconds - Remove stack trace, buggy anyway - Wrap the error details so it does not expand beyond boundaries (scrollbar would not show up either) - Do not show the slow-loading warning on error - Make zeeoe details selectable instead of editable - Label improvements
2017-12-16 21:19:51 +00:00
#loading-slow,
#loading-reload {
Center loading screen
2017-10-28 20:50:57 +00:00
visibility: hidden;
Improve error page at loading - Display the "Reload page" instantly and not after 5 seconds - Remove stack trace, buggy anyway - Wrap the error details so it does not expand beyond boundaries (scrollbar would not show up either) - Do not show the slow-loading warning on error - Make zeeoe details selectable instead of editable - Label improvements
2017-12-16 21:19:51 +00:00
}
#loading summary {
outline: none;
cursor: pointer;
}
#loading pre {
Center loading screen
2017-10-28 20:50:57 +00:00
text-align: left;
Improve error page at loading - Display the "Reload page" instantly and not after 5 seconds - Remove stack trace, buggy anyway - Wrap the error details so it does not expand beyond boundaries (scrollbar would not show up either) - Do not show the slow-loading warning on error - Make zeeoe details selectable instead of editable - Label improvements
2017-12-16 21:19:51 +00:00
white-space: normal;
}
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
#sign-in .container,
Center loading screen
2017-10-28 20:50:57 +00:00
#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;
}
Fix loading disappearing too soon
2018-07-08 08:52:05 +00:00
#loading .logo-inverted,
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.window .logo-inverted {
Add logo to the sign in page
2018-03-11 21:20:51 +00:00
display: none; /* In dark themes, inverted logo must be used instead */
Center loading screen
2017-10-28 20:50:57 +00:00
}
Make style of loading page similar to other pages - Move markup around to make the loading page a window of its own instead of a sub-window of `#chat` - Remove inline styling in loading page - Use same styling than other non-messages windows for title and text - Add a `z-index` to the loading page to hide the message input - Vertically align the sign in page title with all other titles - Make sure all `h1.title`s are bottom-margined consistently and remove negative margin on the Settings page title to align with the Connect page title (Reverting/Improving this should be done at the `h2` level instead)
2016-06-21 05:52:18 +00:00
#sign-in label {
display: block;
margin-top: 10px;
Add logo to the sign in page
2018-03-11 21:20:51 +00:00
width: 100%;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix responsive interface
2014-08-15 13:52:14 +00:00
#sign-in .btn {
margin-top: 25px;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix responsive interface
2014-08-15 13:52:14 +00:00
#sign-in .error {
color: #e74c3c;
margin-top: 1em;
Add logo to the sign in page
2018-03-11 21:20:51 +00:00
width: 100%;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
#connect .connect-row {
display: flex;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
#connect .connect-row > .input,
#connect .connect-row > .input-wrap {
flex-grow: 1;
}
#connect label {
width: 25%;
flex-shrink: 0;
margin-top: 11px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Add TLS/SSL support
2014-09-10 15:56:19 +00:00
#connect .tls {
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
width: 100%;
display: block;
Added server password to 'Connect' window
2014-09-13 01:03:16 +00:00
margin-top: 6px;
Add TLS/SSL support
2014-09-10 15:56:19 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
network: add support for SOCKS (closes #1375)
2021-05-06 00:06:00 +00:00
#connect .tls input,
#connect input[name="proxyEnabled"] {
Add TLS/SSL support
2014-09-10 15:56:19 +00:00
margin: 3px 10px 0 0;
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
network: add support for SOCKS (closes #1375)
2021-05-06 00:06:00 +00:00
#connect\:host,
#connect\:proxyHost {
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
width: 70%;
}
network: add support for SOCKS (closes #1375)
2021-05-06 00:06:00 +00:00
#connect\:port,
#connect\:proxyPort {
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
width: 25%;
}
network: add support for SOCKS (closes #1375)
2021-05-06 00:06:00 +00:00
#connect\:portseparator,
#connect\:proxyPortSeparator {
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
width: 5%;
text-align: center;
display: inline-block;
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
#connect .btn {
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
margin-top: 15px;
Preliminary SASL UI
2020-03-31 08:02:18 +00:00
width: 100%;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Add an explanation why push notifications are not supported on iOS
2020-02-25 18:04:33 +00:00
#settings .apple-push-unsupported,
Make sense out of settings sync and force sync
2019-11-20 17:43:27 +00:00
#settings .settings-sync-panel {
padding: 10px;
margin-bottom: 16px;
border-radius: 2px;
background-color: #d9edf7;
color: #31708f;
}
#settings .settings-sync-panel p:last-child {
margin-bottom: 0;
}
#settings .settings-sync-panel .btn {
color: #007bff;
border-color: #007bff;
margin-bottom: 0;
}
#settings .settings-sync-panel .btn:hover,
#settings .settings-sync-panel .btn:focus {
background-color: #007bff;
color: #fff;
}
#settings .settings-sync-panel .btn:active,
#settings .settings-sync-panel .btn:focus {
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
Offer optional syncing of client settings Write synced settings to localstorage. move settings and webpush init to init.js stub for server sending clientsettings get very basic setting sync working Also update client.config.clientSettings on settings:set Full setting sync with mandatory and excluded sync options Actually check client preferences. Further settings restructuring. Refactor options.js make storage act in a sane manner. Add new parameter to applySetting Do not sync if the setting is stored as a result of syncing General clean up, commenting and restructing. sync from server on checking "sync" offer initial sync Better deal with DOM being ready and instances of inital sync showing Don't try to disable autocompletion when not enabled. Restructure option.js to seperate functions from settings. More consistency in naming options vs settings Switch processSetting and applySetting names reflecting their functionality better. move options init back to configuration. simplify how settings are synced around. move options init after template building. Remove unneeded hasOwnProperty Use global for #theme and only apply theme in applySetting Return when no server side clientsettings excist. Autocompletion options to options.settings Make nocss param in url work again. Actually filter out empty highlight values. Clarify alwaysSync comment. Remove manual step for initial sync change attr to prop in options.js replace unbind with off in autocompletion.js Do not sync settings when the lounge is set to public. fix eslint error Fix merge error Do not show sync warning after page refresh when sync is enabled Move setting sync label in actual label. Improve server setting sync handling performance and failure potential. Don't give impression that the desktop notificiation is off when the browser permission is denied. Refine showing and hiding of notification warnings. rename all setting socket events to singular setting. add experimental note and icon to settingsync. fix css linting error
2017-12-11 19:01:15 +00:00
}
Add an explanation why push notifications are not supported on iOS
2020-02-25 18:04:33 +00:00
#settings .apple-push-unsupported a {
color: inherit;
text-decoration: underline;
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
#settings .opt {
display: block;
Improve UI of expanded/condensed status message selection in client settings
2017-08-06 04:49:22 +00:00
padding: 5px 0 5px 1px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix responsive interface
2014-08-15 13:52:14 +00:00
#settings .opt input {
Improve UI of expanded/condensed status message selection in client settings
2017-08-06 04:49:22 +00:00
margin-right: 6px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use v-model in network form, auto size commands
2020-04-06 08:42:10 +00:00
#connect .extra-help,
Replace status message abbr with a tooltipped icon
2017-08-05 19:28:05 +00:00
#settings .extra-help {
cursor: help;
}
Improve UI of expanded/condensed status message selection in client settings
2017-08-06 04:49:22 +00:00
#settings h2 .extra-help {
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
font-size: 0.8em;
Improve UI of expanded/condensed status message selection in client settings
2017-08-06 04:49:22 +00:00
}
Define icon font only once and fix sizing This commit applies the following across the whole style: - `font` statement is now the same as official FontAwesome CSS - Ensure icons are never italic or bold or that other variants can be applied - Ensure font-size and line-height of icons are inherited from parent - font-family and font-smoothing is now defined only once A few (mostly positive) side effects from these and related changes: - Header icons (main menu, context menu and user list) are now vertically centered! - Same applies to the Send icon, but it's more subtle there - Alignment of the footer icons are shifted a tiny bit - Server window icons are a wee bit bit bigger to match the server name font-size - The "Play sound" icon and text are now both 14px (was 14px / 16px)
2016-07-12 05:47:16 +00:00
#settings #play {
font-size: 14px;
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
transition: opacity 0.2s;
Increase contrast of headers in windows
2019-10-14 14:30:35 +00:00
color: var(--window-heading-color);
Define icon font only once and fix sizing This commit applies the following across the whole style: - `font` statement is now the same as official FontAwesome CSS - Ensure icons are never italic or bold or that other variants can be applied - Ensure font-size and line-height of icons are inherited from parent - font-family and font-smoothing is now defined only once A few (mostly positive) side effects from these and related changes: - Header icons (main menu, context menu and user list) are now vertically centered! - Same applies to the Send icon, but it's more subtle there - Alignment of the footer icons are shifted a tiny bit - Server window icons are a wee bit bit bigger to match the server name font-size - The "Play sound" icon and text are now both 14px (was 14px / 16px)
2016-07-12 05:47:16 +00:00
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
#settings #play:hover {
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
opacity: 0.8;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
frontend password change functionality - refactor clientManager.js to allow configuration parsing as a serparate function. - refactor clientManager.js to add configuration writing function. - add server.js changes to allow for new password-change functionality - add password change ui to "settings" screen - refactor client.js to use new clientManager functionality for saving the configuration files
2016-02-17 00:14:43 +00:00
#settings #change-password .error,
#settings #change-password .success {
margin-bottom: 1em;
}
#settings #change-password .error {
color: #e74c3c;
}
#settings #change-password .success {
color: #2ecc40;
}
Rename badge setting to desktopNotifications Also checks the browser status and display a warning message if it blocks desktop notifications
2016-03-03 16:43:30 +00:00
#settings .error {
color: #e74c3c;
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
margin-top: 0.2em;
Rename badge setting to desktopNotifications Also checks the browser status and display a warning message if it blocks desktop notifications
2016-03-03 16:43:30 +00:00
}
add password toggle to connect and login
2018-05-08 21:40:39 +00:00
.password-container {
position: relative;
}
refactor password visibility toggle feature
2018-05-09 23:25:17 +00:00
.password-container input {
padding-right: 37px;
}
add password toggle to connect and login
2018-05-08 21:40:39 +00:00
#sign-in .password-container {
width: 100%;
}
refactor password visibility toggle feature
2018-05-09 23:25:17 +00:00
#sign-in .password-container .reveal-password {
top: 31px;
}
.password-container .reveal-password {
position: absolute;
top: 2px;
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
right: 0;
appearance: none;
refactor password visibility toggle feature
2018-05-09 23:25:17 +00:00
}
change icon tag
2018-05-24 19:20:23 +00:00
.password-container .reveal-password span {
Add password visibility toggle feature
2018-05-07 23:52:54 +00:00
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
color: #607992;
Change input sizes to be consistent
2018-06-19 10:32:15 +00:00
width: 35px;
height: 35px;
change icon tag
2018-05-24 19:20:23 +00:00
display: flex;
justify-content: center;
align-items: center;
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
cursor: pointer;
Add password visibility toggle feature
2018-05-07 23:52:54 +00:00
}
change icon tag
2018-05-24 19:20:23 +00:00
.password-container .reveal-password span::before {
add password toggle to connect and login
2018-05-08 21:40:39 +00:00
content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
Add password visibility toggle feature
2018-05-07 23:52:54 +00:00
}
add save button to edit topic input field
2019-08-11 13:59:06 +00:00
.topic-container .save-topic span::before {
content: "\f00c"; /* https://fontawesome.com/icons/check?style=solid */
}
Begin moving windows to Vue
2019-02-18 09:18:32 +00:00
.password-container .reveal-password-visible span::before {
add password toggle to connect and login
2018-05-08 21:40:39 +00:00
content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */
refactor password visibility toggle feature
2018-05-09 23:25:17 +00:00
color: #ff4136;
Rename badge setting to desktopNotifications Also checks the browser status and display a warning message if it blocks desktop notifications
2016-03-03 16:43:30 +00:00
}
Remove float from changelog and version link
2019-12-12 11:24:28 +00:00
#help .help-version-title {
display: flex;
justify-content: space-between;
}
Add a help window within the app This brings commands and keyboard shortcuts from the website, after a massive overhaul. It comes as part of the big documentation rewrite that I am currently doing. `kbd` design inspiration from GitHub, `code` design inspiration from Bootstrap. This help page is accessible from an icon in the sidebar, near the Settings icon.
2017-02-28 07:15:34 +00:00
#help .help-item {
display: table-row;
Reduce message size on mobile and increase a bit UI text
2017-09-23 01:59:45 +00:00
font-size: 14px;
}
Add a help window within the app This brings commands and keyboard shortcuts from the website, after a massive overhaul. It comes as part of the big documentation rewrite that I am currently doing. `kbd` design inspiration from GitHub, `code` design inspiration from Bootstrap. This help page is accessible from an icon in the sidebar, near the Settings icon.
2017-02-28 07:15:34 +00:00
#help .help-item .subject,
#help .help-item .description {
display: table-cell;
padding-bottom: 15px;
}
#help .help-item .subject {
white-space: nowrap;
Improve details of emoji/chan/nick/command autocompletion - Make dropdown items match context menu items - Disable transparency on dropdown item links - Clean up help page additions - Better align help page autocompletion characters - Use ES6 features (`const`, arrow functions, method definition shorthands) - Use `Array#filter` instead of `$.map` - Do not display `@` in nick completion *when* only one `@` is used (to be less confusing and more consistent)
2017-04-24 23:01:24 +00:00
padding-right: 15px;
Add a help window within the app This brings commands and keyboard shortcuts from the website, after a massive overhaul. It comes as part of the big documentation rewrite that I am currently doing. `kbd` design inspiration from GitHub, `code` design inspiration from Bootstrap. This help page is accessible from an icon in the sidebar, near the Settings icon.
2017-02-28 07:15:34 +00:00
}
#help .help-item .description p {
margin-bottom: 0;
}
Format whois as a definition list
2017-12-17 14:28:30 +00:00
.whois {
display: grid;
grid-template-columns: max-content auto;
margin: 0;
}
.whois dt {
grid-column-start: 1;
margin-right: 20px;
}
.whois dd {
grid-column-start: 2;
}
Add changelog viewing and update checking
2017-07-13 18:32:18 +00:00
.changelog-text {
line-height: 1.5;
}
.changelog-text p {
margin-bottom: 16px;
}
.window#changelog h3 {
font-size: 20px;
Increase contrast of headers in windows
2019-10-14 14:30:35 +00:00
border-bottom: 1px solid currentColor;
color: var(--window-heading-color);
Add changelog viewing and update checking
2017-07-13 18:32:18 +00:00
margin: 30px 0 10px;
padding-bottom: 7px;
}
Fix layout trashing in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=1063575#c21
2020-07-24 16:06:32 +00:00
.window#chat-container {
/*
Chat has its own scrollbar, so remove the one on parent
This caused a performance issue in Chrome
*/
overflow: hidden;
}
Improve the version checking part of the changelog feature - There is no client caching of the changelog/version anymore. Instead, server returns the expiration date of its cache, and that is used by the client as well. - There is now a "Check now" button on the client that appears when data is stale. This means that info is fetched only once and never refreshed (it was refreshed every hour before) unless the user explicitly wants to check latest version, which in turn is as stale as server info is, i.e. 15 minutes max. - Button style is shared with the "Join a channel" feature, `.btn-small` (not `.btn-sm` to be explicit that this is not a Bootstrap thing). - Version checker content is now centralized in the `version_checker` template, instead of being partially in the checker template, partially in the Help template, and partially in the code. - A "Try again" button lets user attempt to fetch info instead of forcing them to reload the page. - Use Flexbox to display a nicer version checker: icon is slightly bigger, and button is always aligned on the right. - Changelog logic has been removed from `lounge.js` and moved into the component file. - Changelog template is only passed what it needs instead of everything the server gives us. - Public version now displays version checker, since server is caching things. - Cleaner code overall.
2017-12-24 23:18:24 +00:00
#version-checker {
display: flex;
align-items: center;
padding: 10px;
Add changelog viewing and update checking
2017-07-13 18:32:18 +00:00
margin-bottom: 16px;
border-radius: 2px;
Improve the version checking part of the changelog feature - There is no client caching of the changelog/version anymore. Instead, server returns the expiration date of its cache, and that is used by the client as well. - There is now a "Check now" button on the client that appears when data is stale. This means that info is fetched only once and never refreshed (it was refreshed every hour before) unless the user explicitly wants to check latest version, which in turn is as stale as server info is, i.e. 15 minutes max. - Button style is shared with the "Join a channel" feature, `.btn-small` (not `.btn-sm` to be explicit that this is not a Bootstrap thing). - Version checker content is now centralized in the `version_checker` template, instead of being partially in the checker template, partially in the Help template, and partially in the code. - A "Try again" button lets user attempt to fetch info instead of forcing them to reload the page. - Use Flexbox to display a nicer version checker: icon is slightly bigger, and button is always aligned on the right. - Changelog logic has been removed from `lounge.js` and moved into the component file. - Changelog template is only passed what it needs instead of everything the server gives us. - Public version now displays version checker, since server is caching things. - Cleaner code overall.
2017-12-24 23:18:24 +00:00
transition: color 0.2s, background-color 0.2s;
}
#version-checker p,
#version-checker button {
margin-bottom: 0;
}
#version-checker p {
flex: 1;
padding-top: 6px;
padding-bottom: 6px;
}
#version-checker::before {
margin-left: 6px;
margin-right: 12px;
font-size: 1.2em;
}
#version-checker.loading {
Add changelog viewing and update checking
2017-07-13 18:32:18 +00:00
background-color: #d9edf7;
color: #31708f;
}
Improve the version checking part of the changelog feature - There is no client caching of the changelog/version anymore. Instead, server returns the expiration date of its cache, and that is used by the client as well. - There is now a "Check now" button on the client that appears when data is stale. This means that info is fetched only once and never refreshed (it was refreshed every hour before) unless the user explicitly wants to check latest version, which in turn is as stale as server info is, i.e. 15 minutes max. - Button style is shared with the "Join a channel" feature, `.btn-small` (not `.btn-sm` to be explicit that this is not a Bootstrap thing). - Version checker content is now centralized in the `version_checker` template, instead of being partially in the checker template, partially in the Help template, and partially in the code. - A "Try again" button lets user attempt to fetch info instead of forcing them to reload the page. - Use Flexbox to display a nicer version checker: icon is slightly bigger, and button is always aligned on the right. - Changelog logic has been removed from `lounge.js` and moved into the component file. - Changelog template is only passed what it needs instead of everything the server gives us. - Public version now displays version checker, since server is caching things. - Cleaner code overall.
2017-12-24 23:18:24 +00:00
#version-checker.loading::before {
Switch to Font Awesome 5
2017-12-08 04:01:58 +00:00
content: "\f253"; /* https://fontawesome.com/icons/hourglass-end?style=solid */
Add changelog viewing and update checking
2017-07-13 18:32:18 +00:00
}
Add check for outdated packages, and show on the help screen.
2019-07-04 07:41:09 +00:00
#version-checker.new-version,
#version-checker.new-packages {
Improve UI of the About section and changelog viewer - Keep consistent width between the Help page and Changelog (which is already different from other windows 😠) - Add icons to the About links - Make sure `li` elements (i.e. all the lists in changelogs) are consistent in size with rest of the client - Display version and release notes link on the "About The Lounge" header line, smaller, pushed to the right - Check new releases when opening the Help window in order to display it without having to open the release notes. Release notes are being fed to the Changelog page at that moment to avoid fetching twice. - Re-check version/fetch release notes after 24h. Since The Lounge can now run 24/7, reconnect when losing the network, we have to assume an "always-on" usage. - Change icon, animate background color when getting response from GitHub to avoid flashing. - Combine click handlers with our wonderful window management. These were the same handler, even with similar checks (`target` exists, etc.), just in 2 different places. This is necessary for the next item. - Combine "Open release notes" and "Go back to Help" button behaviors with window management handlers. The window management code is gross as ever, and is in desperate need of a refactor, but at least there is no duplicated code for the same behavior + history management. This fixes the "Next" history behavior (however reloading the app while viewing the notes does not load on the notes, but this is a bug for a different PR!). - Added a rule in the history management thingy: if a link we want to add history handling to has an `id`, store that in the state - Added a button to go back to the Help window - Fixed links to releases - Send user to the GitHub issues *list* instead of *new issue form* because if they do not have a GitHub account, they will be redirected to the login page, which is a rather unpleasant experience when you are already confused... - Fixed a bug that would return data about a new release in `latest` even though it is already the `current`. It was showing the current version as "The Lounge v... is now available". - Added https://user-images.githubusercontent.com to the CSP rule when prefetch storage is enabled, because that is where we have stored screenshots in the changelog so far. Meh (we can improve that later if we decide to have a dedicated place for screenshots). - Fetch changelog info even in public mode because users in public mode can access the release notes. They do not see the result of the version checker however.
2017-12-23 03:40:41 +00:00
color: #8a6d3b;
background-color: #fcf8e3;
}
Add check for outdated packages, and show on the help screen.
2019-07-04 07:41:09 +00:00
#version-checker.new-version::before,
#version-checker.new-packages::before {
Switch to Font Awesome 5
2017-12-08 04:01:58 +00:00
content: "\f164"; /* https://fontawesome.com/icons/thumbs-up?style=solid */
Improve UI of the About section and changelog viewer - Keep consistent width between the Help page and Changelog (which is already different from other windows 😠) - Add icons to the About links - Make sure `li` elements (i.e. all the lists in changelogs) are consistent in size with rest of the client - Display version and release notes link on the "About The Lounge" header line, smaller, pushed to the right - Check new releases when opening the Help window in order to display it without having to open the release notes. Release notes are being fed to the Changelog page at that moment to avoid fetching twice. - Re-check version/fetch release notes after 24h. Since The Lounge can now run 24/7, reconnect when losing the network, we have to assume an "always-on" usage. - Change icon, animate background color when getting response from GitHub to avoid flashing. - Combine click handlers with our wonderful window management. These were the same handler, even with similar checks (`target` exists, etc.), just in 2 different places. This is necessary for the next item. - Combine "Open release notes" and "Go back to Help" button behaviors with window management handlers. The window management code is gross as ever, and is in desperate need of a refactor, but at least there is no duplicated code for the same behavior + history management. This fixes the "Next" history behavior (however reloading the app while viewing the notes does not load on the notes, but this is a bug for a different PR!). - Added a rule in the history management thingy: if a link we want to add history handling to has an `id`, store that in the state - Added a button to go back to the Help window - Fixed links to releases - Send user to the GitHub issues *list* instead of *new issue form* because if they do not have a GitHub account, they will be redirected to the login page, which is a rather unpleasant experience when you are already confused... - Fixed a bug that would return data about a new release in `latest` even though it is already the `current`. It was showing the current version as "The Lounge v... is now available". - Added https://user-images.githubusercontent.com to the CSP rule when prefetch storage is enabled, because that is where we have stored screenshots in the changelog so far. Meh (we can improve that later if we decide to have a dedicated place for screenshots). - Fetch changelog info even in public mode because users in public mode can access the release notes. They do not see the result of the version checker however.
2017-12-23 03:40:41 +00:00
}
Improve the version checking part of the changelog feature - There is no client caching of the changelog/version anymore. Instead, server returns the expiration date of its cache, and that is used by the client as well. - There is now a "Check now" button on the client that appears when data is stale. This means that info is fetched only once and never refreshed (it was refreshed every hour before) unless the user explicitly wants to check latest version, which in turn is as stale as server info is, i.e. 15 minutes max. - Button style is shared with the "Join a channel" feature, `.btn-small` (not `.btn-sm` to be explicit that this is not a Bootstrap thing). - Version checker content is now centralized in the `version_checker` template, instead of being partially in the checker template, partially in the Help template, and partially in the code. - A "Try again" button lets user attempt to fetch info instead of forcing them to reload the page. - Use Flexbox to display a nicer version checker: icon is slightly bigger, and button is always aligned on the right. - Changelog logic has been removed from `lounge.js` and moved into the component file. - Changelog template is only passed what it needs instead of everything the server gives us. - Public version now displays version checker, since server is caching things. - Cleaner code overall.
2017-12-24 23:18:24 +00:00
#version-checker.error {
Improve UI of the About section and changelog viewer - Keep consistent width between the Help page and Changelog (which is already different from other windows 😠) - Add icons to the About links - Make sure `li` elements (i.e. all the lists in changelogs) are consistent in size with rest of the client - Display version and release notes link on the "About The Lounge" header line, smaller, pushed to the right - Check new releases when opening the Help window in order to display it without having to open the release notes. Release notes are being fed to the Changelog page at that moment to avoid fetching twice. - Re-check version/fetch release notes after 24h. Since The Lounge can now run 24/7, reconnect when losing the network, we have to assume an "always-on" usage. - Change icon, animate background color when getting response from GitHub to avoid flashing. - Combine click handlers with our wonderful window management. These were the same handler, even with similar checks (`target` exists, etc.), just in 2 different places. This is necessary for the next item. - Combine "Open release notes" and "Go back to Help" button behaviors with window management handlers. The window management code is gross as ever, and is in desperate need of a refactor, but at least there is no duplicated code for the same behavior + history management. This fixes the "Next" history behavior (however reloading the app while viewing the notes does not load on the notes, but this is a bug for a different PR!). - Added a rule in the history management thingy: if a link we want to add history handling to has an `id`, store that in the state - Added a button to go back to the Help window - Fixed links to releases - Send user to the GitHub issues *list* instead of *new issue form* because if they do not have a GitHub account, they will be redirected to the login page, which is a rather unpleasant experience when you are already confused... - Fixed a bug that would return data about a new release in `latest` even though it is already the `current`. It was showing the current version as "The Lounge v... is now available". - Added https://user-images.githubusercontent.com to the CSP rule when prefetch storage is enabled, because that is where we have stored screenshots in the changelog so far. Meh (we can improve that later if we decide to have a dedicated place for screenshots). - Fetch changelog info even in public mode because users in public mode can access the release notes. They do not see the result of the version checker however.
2017-12-23 03:40:41 +00:00
color: #a94442;
background-color: #f2dede;
}
Improve the version checking part of the changelog feature - There is no client caching of the changelog/version anymore. Instead, server returns the expiration date of its cache, and that is used by the client as well. - There is now a "Check now" button on the client that appears when data is stale. This means that info is fetched only once and never refreshed (it was refreshed every hour before) unless the user explicitly wants to check latest version, which in turn is as stale as server info is, i.e. 15 minutes max. - Button style is shared with the "Join a channel" feature, `.btn-small` (not `.btn-sm` to be explicit that this is not a Bootstrap thing). - Version checker content is now centralized in the `version_checker` template, instead of being partially in the checker template, partially in the Help template, and partially in the code. - A "Try again" button lets user attempt to fetch info instead of forcing them to reload the page. - Use Flexbox to display a nicer version checker: icon is slightly bigger, and button is always aligned on the right. - Changelog logic has been removed from `lounge.js` and moved into the component file. - Changelog template is only passed what it needs instead of everything the server gives us. - Public version now displays version checker, since server is caching things. - Cleaner code overall.
2017-12-24 23:18:24 +00:00
#version-checker.error::before {
Improve UI of the About section and changelog viewer - Keep consistent width between the Help page and Changelog (which is already different from other windows 😠) - Add icons to the About links - Make sure `li` elements (i.e. all the lists in changelogs) are consistent in size with rest of the client - Display version and release notes link on the "About The Lounge" header line, smaller, pushed to the right - Check new releases when opening the Help window in order to display it without having to open the release notes. Release notes are being fed to the Changelog page at that moment to avoid fetching twice. - Re-check version/fetch release notes after 24h. Since The Lounge can now run 24/7, reconnect when losing the network, we have to assume an "always-on" usage. - Change icon, animate background color when getting response from GitHub to avoid flashing. - Combine click handlers with our wonderful window management. These were the same handler, even with similar checks (`target` exists, etc.), just in 2 different places. This is necessary for the next item. - Combine "Open release notes" and "Go back to Help" button behaviors with window management handlers. The window management code is gross as ever, and is in desperate need of a refactor, but at least there is no duplicated code for the same behavior + history management. This fixes the "Next" history behavior (however reloading the app while viewing the notes does not load on the notes, but this is a bug for a different PR!). - Added a rule in the history management thingy: if a link we want to add history handling to has an `id`, store that in the state - Added a button to go back to the Help window - Fixed links to releases - Send user to the GitHub issues *list* instead of *new issue form* because if they do not have a GitHub account, they will be redirected to the login page, which is a rather unpleasant experience when you are already confused... - Fixed a bug that would return data about a new release in `latest` even though it is already the `current`. It was showing the current version as "The Lounge v... is now available". - Added https://user-images.githubusercontent.com to the CSP rule when prefetch storage is enabled, because that is where we have stored screenshots in the changelog so far. Meh (we can improve that later if we decide to have a dedicated place for screenshots). - Fetch changelog info even in public mode because users in public mode can access the release notes. They do not see the result of the version checker however.
2017-12-23 03:40:41 +00:00
content: "\f06a"; /* http://fontawesome.io/icon/exclamation-circle/ */
Add changelog viewing and update checking
2017-07-13 18:32:18 +00:00
}
Improve the version checking part of the changelog feature - There is no client caching of the changelog/version anymore. Instead, server returns the expiration date of its cache, and that is used by the client as well. - There is now a "Check now" button on the client that appears when data is stale. This means that info is fetched only once and never refreshed (it was refreshed every hour before) unless the user explicitly wants to check latest version, which in turn is as stale as server info is, i.e. 15 minutes max. - Button style is shared with the "Join a channel" feature, `.btn-small` (not `.btn-sm` to be explicit that this is not a Bootstrap thing). - Version checker content is now centralized in the `version_checker` template, instead of being partially in the checker template, partially in the Help template, and partially in the code. - A "Try again" button lets user attempt to fetch info instead of forcing them to reload the page. - Use Flexbox to display a nicer version checker: icon is slightly bigger, and button is always aligned on the right. - Changelog logic has been removed from `lounge.js` and moved into the component file. - Changelog template is only passed what it needs instead of everything the server gives us. - Public version now displays version checker, since server is caching things. - Cleaner code overall.
2017-12-24 23:18:24 +00:00
#version-checker.up-to-date {
Improve UI of the About section and changelog viewer - Keep consistent width between the Help page and Changelog (which is already different from other windows 😠) - Add icons to the About links - Make sure `li` elements (i.e. all the lists in changelogs) are consistent in size with rest of the client - Display version and release notes link on the "About The Lounge" header line, smaller, pushed to the right - Check new releases when opening the Help window in order to display it without having to open the release notes. Release notes are being fed to the Changelog page at that moment to avoid fetching twice. - Re-check version/fetch release notes after 24h. Since The Lounge can now run 24/7, reconnect when losing the network, we have to assume an "always-on" usage. - Change icon, animate background color when getting response from GitHub to avoid flashing. - Combine click handlers with our wonderful window management. These were the same handler, even with similar checks (`target` exists, etc.), just in 2 different places. This is necessary for the next item. - Combine "Open release notes" and "Go back to Help" button behaviors with window management handlers. The window management code is gross as ever, and is in desperate need of a refactor, but at least there is no duplicated code for the same behavior + history management. This fixes the "Next" history behavior (however reloading the app while viewing the notes does not load on the notes, but this is a bug for a different PR!). - Added a rule in the history management thingy: if a link we want to add history handling to has an `id`, store that in the state - Added a button to go back to the Help window - Fixed links to releases - Send user to the GitHub issues *list* instead of *new issue form* because if they do not have a GitHub account, they will be redirected to the login page, which is a rather unpleasant experience when you are already confused... - Fixed a bug that would return data about a new release in `latest` even though it is already the `current`. It was showing the current version as "The Lounge v... is now available". - Added https://user-images.githubusercontent.com to the CSP rule when prefetch storage is enabled, because that is where we have stored screenshots in the changelog so far. Meh (we can improve that later if we decide to have a dedicated place for screenshots). - Fetch changelog info even in public mode because users in public mode can access the release notes. They do not see the result of the version checker however.
2017-12-23 03:40:41 +00:00
background-color: #dff0d8;
color: #3c763d;
Add changelog viewing and update checking
2017-07-13 18:32:18 +00:00
}
Improve the version checking part of the changelog feature - There is no client caching of the changelog/version anymore. Instead, server returns the expiration date of its cache, and that is used by the client as well. - There is now a "Check now" button on the client that appears when data is stale. This means that info is fetched only once and never refreshed (it was refreshed every hour before) unless the user explicitly wants to check latest version, which in turn is as stale as server info is, i.e. 15 minutes max. - Button style is shared with the "Join a channel" feature, `.btn-small` (not `.btn-sm` to be explicit that this is not a Bootstrap thing). - Version checker content is now centralized in the `version_checker` template, instead of being partially in the checker template, partially in the Help template, and partially in the code. - A "Try again" button lets user attempt to fetch info instead of forcing them to reload the page. - Use Flexbox to display a nicer version checker: icon is slightly bigger, and button is always aligned on the right. - Changelog logic has been removed from `lounge.js` and moved into the component file. - Changelog template is only passed what it needs instead of everything the server gives us. - Public version now displays version checker, since server is caching things. - Cleaner code overall.
2017-12-24 23:18:24 +00:00
#version-checker.up-to-date::before {
Improve UI of the About section and changelog viewer - Keep consistent width between the Help page and Changelog (which is already different from other windows 😠) - Add icons to the About links - Make sure `li` elements (i.e. all the lists in changelogs) are consistent in size with rest of the client - Display version and release notes link on the "About The Lounge" header line, smaller, pushed to the right - Check new releases when opening the Help window in order to display it without having to open the release notes. Release notes are being fed to the Changelog page at that moment to avoid fetching twice. - Re-check version/fetch release notes after 24h. Since The Lounge can now run 24/7, reconnect when losing the network, we have to assume an "always-on" usage. - Change icon, animate background color when getting response from GitHub to avoid flashing. - Combine click handlers with our wonderful window management. These were the same handler, even with similar checks (`target` exists, etc.), just in 2 different places. This is necessary for the next item. - Combine "Open release notes" and "Go back to Help" button behaviors with window management handlers. The window management code is gross as ever, and is in desperate need of a refactor, but at least there is no duplicated code for the same behavior + history management. This fixes the "Next" history behavior (however reloading the app while viewing the notes does not load on the notes, but this is a bug for a different PR!). - Added a rule in the history management thingy: if a link we want to add history handling to has an `id`, store that in the state - Added a button to go back to the Help window - Fixed links to releases - Send user to the GitHub issues *list* instead of *new issue form* because if they do not have a GitHub account, they will be redirected to the login page, which is a rather unpleasant experience when you are already confused... - Fixed a bug that would return data about a new release in `latest` even though it is already the `current`. It was showing the current version as "The Lounge v... is now available". - Added https://user-images.githubusercontent.com to the CSP rule when prefetch storage is enabled, because that is where we have stored screenshots in the changelog so far. Meh (we can improve that later if we decide to have a dedicated place for screenshots). - Fetch changelog info even in public mode because users in public mode can access the release notes. They do not see the result of the version checker however.
2017-12-23 03:40:41 +00:00
content: "\f00c"; /* http://fontawesome.io/icon/check/ */
Add changelog viewing and update checking
2017-07-13 18:32:18 +00:00
}
Add file uploading support Co-Authored-By: Max Leiter <hello@maxleiter.com> Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-09-03 07:30:05 +00:00
#upload-progressbar {
Style the upload progress bar
2019-03-18 00:42:53 +00:00
background: var(--upload-progressbar-color);
box-shadow: 0 0 10px var(--upload-progressbar-color);
Add file uploading support Co-Authored-By: Max Leiter <hello@maxleiter.com> Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-09-03 07:30:05 +00:00
width: 0%;
height: 2px;
Re-implement file uploads with old-school forms Co-Authored-By: Richard Lewis <richrd@users.noreply.github.com>
2019-02-19 15:12:08 +00:00
visibility: hidden;
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
position: absolute;
top: -1px; /* put it on top of #form's border */
left: 0;
Re-implement file uploads with old-school forms Co-Authored-By: Richard Lewis <richrd@users.noreply.github.com>
2019-02-19 15:12:08 +00:00
}
#upload-progressbar.upload-progressbar-visible {
visibility: visible;
transition: 0.3s width ease-in-out;
Add file uploading support Co-Authored-By: Max Leiter <hello@maxleiter.com> Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-09-03 07:30:05 +00:00
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
#form {
Use a textarea instead of an input for channel messages
2016-06-05 02:48:41 +00:00
flex: 0 0 auto;
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
border: 0;
border-top: 1px solid #e7e7e7;
border-radius: 0;
Fix window layout a bit
2016-07-05 23:23:46 +00:00
margin: 0;
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
padding: 6px;
Use a textarea instead of an input for channel messages
2016-06-05 02:48:41 +00:00
background: white;
display: flex;
align-items: flex-end;
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
position: relative;
Added 'Send' button
2014-09-21 15:21:26 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Tweak connection error spacing
2018-10-16 10:21:16 +00:00
#user-visible-error {
font-size: 14px;
line-height: 1.5;
font-weight: 600;
padding: 10px;
Display all the status changes in UI
2017-08-28 15:03:27 +00:00
word-spacing: 3px;
text-transform: uppercase;
background: #e74c3c;
color: #fff;
text-align: center;
Add file uploading support Co-Authored-By: Max Leiter <hello@maxleiter.com> Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-09-03 07:30:05 +00:00
cursor: pointer;
Stop refreshing the page on every socket.io error
2016-12-10 09:33:36 +00:00
}
Show current nick
2014-09-25 23:51:53 +00:00
#form #nick {
background: #f6f6f6;
Change colors
2014-09-27 00:21:14 +00:00
color: #666;
Increase font size on desktops and mobiles
2017-09-21 06:21:48 +00:00
font-size: 13px;
Restore padding and height of message input pre-textarea era
2016-08-02 04:33:16 +00:00
margin: 4px;
Remove nick editor
2018-03-16 14:10:28 +00:00
line-height: 24px;
padding: 0 8px;
Make nick badge editable to set it in the UI
2016-07-29 06:10:29 +00:00
border-radius: 2px;
display: none;
}
Remove nick editor
2018-03-16 14:10:28 +00:00
.public #form #nick {
display: block;
Do not display incorrect nick when switching to a non connected network
2016-04-10 09:08:31 +00:00
}
Show current nick
2014-09-25 23:51:53 +00:00
#form #input {
Use a textarea instead of an input for channel messages
2016-06-05 02:48:41 +00:00
background: transparent;
border: none;
Show current nick
2014-09-25 23:51:53 +00:00
font: inherit;
Fix some missing parts from recent font changes/resizing - Separate messages by one more pixel: the recent font changes make multiline messages rather hard to differentite from one another. I believe adding 2px looked better, but I knew that would cause riots so I went for a middle ground 😅 - Make previews the same size than messages themselves, and adapt the thumbnail height accordingly - Make the message input font size same as message size
2017-10-03 04:55:48 +00:00
min-height: 19px; /* Required when computing input height at char deletion */
height: 19px;
max-height: 95px; /* min-height/height x number of lines maximum */
Fix up textarea growing to avoid rounding issues in Chrome
2019-02-05 21:15:47 +00:00
line-height: 19px; /* should match height */
Show current nick
2014-09-25 23:51:53 +00:00
outline: none;
Use a textarea instead of an input for channel messages
2016-06-05 02:48:41 +00:00
margin: 5px;
padding: 0;
resize: none;
flex: 1 0 auto;
align-self: center;
Add touch-action to more elements - Add touch-action: pan-y to .container, .networks, .sidebar, #form #input - Add touch-action: none to body
2017-09-13 22:04:03 +00:00
touch-action: pan-y;
Show current nick
2014-09-25 23:51:53 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Add file uploading support Co-Authored-By: Max Leiter <hello@maxleiter.com> Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-09-03 07:30:05 +00:00
#form #upload-input {
display: none;
}
#form #upload,
Fix responsive interface
2014-08-15 13:52:14 +00:00
#form #submit {
Revamp default theme a bit
2018-03-30 06:07:11 +00:00
color: #607992;
Define icon font only once and fix sizing This commit applies the following across the whole style: - `font` statement is now the same as official FontAwesome CSS - Ensure icons are never italic or bold or that other variants can be applied - Ensure font-size and line-height of icons are inherited from parent - font-family and font-smoothing is now defined only once A few (mostly positive) side effects from these and related changes: - Header icons (main menu, context menu and user list) are now vertically centered! - Same applies to the Send icon, but it's more subtle there - Alignment of the footer icons are shifted a tiny bit - Server window icons are a wee bit bit bigger to match the server name font-size - The "Play sound" icon and text are now both 14px (was 14px / 16px)
2016-07-12 05:47:16 +00:00
font-size: 14px;
Restore padding and height of message input pre-textarea era
2016-08-02 04:33:16 +00:00
height: 32px;
Remove cycle nicks button Reverts #708. Fixes #869. Fixes #1023.
2017-04-21 18:00:57 +00:00
width: 32px;
Use a textarea instead of an input for channel messages
2016-06-05 02:48:41 +00:00
flex: 0 0 auto;
Use an icon for the Send button
2016-03-11 06:44:09 +00:00
}
Fade buttons when disabled
2018-09-12 19:54:20 +00:00
#form #upload[disabled],
#form #submit[disabled] {
opacity: 0.5;
}
Track mentions and add a window to view them
2019-11-04 09:21:05 +00:00
#mentions-popup-container,
Add context menus
2016-02-12 11:34:10 +00:00
#context-menu-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: transparent;
}
Track mentions and add a window to view them
2019-11-04 09:21:05 +00:00
.mentions-popup,
Add emoji/nick/commands/chan autocomplete
2016-12-11 00:13:26 +00:00
#context-menu,
.textcomplete-menu {
Add context menus
2016-02-12 11:34:10 +00:00
position: absolute;
list-style: none;
margin: 0;
Update context and auto complete menu styles
2019-10-19 21:36:40 +00:00
padding: 0 6px;
add 'op' and 'voice' context menu entries
2018-04-13 15:53:41 +00:00
min-width: 180px;
Add context menus
2016-02-12 11:34:10 +00:00
font-size: 14px;
background-color: #fff;
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(0, 0, 0, 0.15);
Update context and auto complete menu styles
2019-10-19 21:36:40 +00:00
border-radius: 5px;
Improve context menus
2019-11-18 20:05:47 +00:00
outline: 0;
Add context menus
2016-02-12 11:34:10 +00:00
}
Add a specific item divider for the context menu, allowing some margin
2016-03-20 21:03:39 +00:00
.context-menu-divider {
height: 1px;
margin: 6px 0;
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
background-color: rgba(0, 0, 0, 0.1);
Add context menus
2016-02-12 11:34:10 +00:00
}
Add emoji/nick/commands/chan autocomplete
2016-12-11 00:13:26 +00:00
.context-menu-item,
.textcomplete-item {
Add context menus
2016-02-12 11:34:10 +00:00
cursor: pointer;
display: block;
Add a specific item divider for the context menu, allowing some margin
2016-03-20 21:03:39 +00:00
padding: 4px 8px;
Add context menus
2016-02-12 11:34:10 +00:00
color: #333;
Add a specific item divider for the context menu, allowing some margin
2016-03-20 21:03:39 +00:00
margin-top: 6px;
margin-bottom: 6px;
Parse emoji to make them bigger
2017-08-23 14:19:04 +00:00
line-height: 1.4;
Update context and auto complete menu styles
2019-10-19 21:36:40 +00:00
border-radius: 3px;
Fix context menu generation
2019-11-23 14:26:20 +00:00
white-space: nowrap;
Add context menus
2016-02-12 11:34:10 +00:00
}
Improve context menus
2019-11-18 20:05:47 +00:00
.context-menu-item.active,
Make context menus accessible with keyboard
2018-04-22 10:59:01 +00:00
.textcomplete-item:focus,
Add emoji/nick/commands/chan autocomplete
2016-12-11 00:13:26 +00:00
.textcomplete-item:hover,
Allow navigating through userlist results from keyboard
2017-12-16 18:58:56 +00:00
.textcomplete-menu .active,
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
#chat .userlist .user.active {
Update context and auto complete menu styles
2019-10-19 21:36:40 +00:00
background-color: rgba(0, 0, 0, 0.1);
Add context menus
2016-02-12 11:34:10 +00:00
}
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
.context-menu-item::before,
.textcomplete-item::before {
Add context menus
2016-02-12 11:34:10 +00:00
width: 20px;
display: inline-block;
}
Add emoji/nick/commands/chan autocomplete
2016-12-11 00:13:26 +00:00
.textcomplete-item a {
color: #333;
}
Improve details of emoji/chan/nick/command autocompletion - Make dropdown items match context menu items - Disable transparency on dropdown item links - Clean up help page additions - Better align help page autocompletion characters - Use ES6 features (`const`, arrow functions, method definition shorthands) - Use `Array#filter` instead of `$.map` - Do not display `@` in nick completion *when* only one `@` is used (to be less confusing and more consistent)
2017-04-24 23:01:24 +00:00
.textcomplete-item a:hover {
Remove underline from textcomplete dropdown
2018-10-01 14:12:37 +00:00
text-decoration: none;
Improve details of emoji/chan/nick/command autocompletion - Make dropdown items match context menu items - Disable transparency on dropdown item links - Clean up help page additions - Better align help page autocompletion characters - Use ES6 features (`const`, arrow functions, method definition shorthands) - Use `Array#filter` instead of `$.map` - Do not display `@` in nick completion *when* only one `@` is used (to be less confusing and more consistent)
2017-04-24 23:01:24 +00:00
}
Parse emoji to make them bigger
2017-08-23 14:19:04 +00:00
.emoji {
font-size: 1.4em;
Refactor channel titles to use flexbox
2018-02-23 21:57:45 +00:00
vertical-align: text-top;
Parse emoji to make them bigger
2017-08-23 14:19:04 +00:00
line-height: 1;
}
Add emoji/nick/commands/chan autocomplete
2016-12-11 00:13:26 +00:00
.textcomplete-item .emoji {
Parse emoji to make them bigger
2017-08-23 14:19:04 +00:00
width: 32px;
Add emoji/nick/commands/chan autocomplete
2016-12-11 00:13:26 +00:00
text-align: center;
}
Add autocomplete strategy for background colors
2017-04-30 10:18:21 +00:00
.textcomplete-item .irc-bg {
display: block;
}
Added text color
2014-10-10 23:11:57 +00:00
/**
Update styled items class names
2014-12-11 03:35:17 +00:00
* IRC Message Styling
* Colours are credit to http://clrs.cc/
*/
.irc-fg0 { color: #fff; }
.irc-fg1 { color: #000; }
.irc-fg2 { color: #001f3f; }
.irc-fg3 { color: #2ecc40; }
.irc-fg4 { color: #ff4136; }
.irc-fg5 { color: #85144b; }
.irc-fg6 { color: #b10dc9; }
.irc-fg7 { color: #ff851b; }
.irc-fg8 { color: #ffdc00; }
.irc-fg9 { color: #01ff70; }
.irc-fg10 { color: #39cccc; }
.irc-fg11 { color: #7fdbff; }
.irc-fg12 { color: #0074d9; }
.irc-fg13 { color: #f012be; }
.irc-fg14 { color: #aaa; }
.irc-fg15 { color: #ddd; }
.irc-bg0 { background: #fff; }
.irc-bg1 { background: #000; }
.irc-bg2 { background: #001f3f; }
.irc-bg3 { background: #2ecc40; }
.irc-bg4 { background: #ff4136; }
.irc-bg5 { background: #85144b; }
.irc-bg6 { background: #b10dc9; }
.irc-bg7 { background: #ff851b; }
.irc-bg8 { background: #ffdc00; }
.irc-bg9 { background: #01ff70; }
.irc-bg10 { background: #39cccc; }
.irc-bg11 { background: #7fdbff; }
.irc-bg12 { background: #0074d9; }
.irc-bg13 { background: #f012be; }
.irc-bg14 { background: #aaa; }
.irc-bg15 { background: #ddd; }
Added text color
2014-10-10 23:11:57 +00:00
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
/* https://modern.ircdocs.horse/formatting.html#colors-16-98 */
.irc-fg16 { color: #470000; }
.irc-fg17 { color: #472100; }
.irc-fg18 { color: #474700; }
.irc-fg19 { color: #324700; }
.irc-fg20 { color: #004700; }
.irc-fg21 { color: #00472c; }
.irc-fg22 { color: #004747; }
.irc-fg23 { color: #002747; }
.irc-fg24 { color: #000047; }
.irc-fg25 { color: #2e0047; }
.irc-fg26 { color: #470047; }
.irc-fg27 { color: #47002a; }
.irc-fg28 { color: #740000; }
.irc-fg29 { color: #743a00; }
.irc-fg30 { color: #747400; }
.irc-fg31 { color: #517400; }
.irc-fg32 { color: #007400; }
.irc-fg33 { color: #007449; }
.irc-fg34 { color: #007474; }
.irc-fg35 { color: #004074; }
.irc-fg36 { color: #000074; }
.irc-fg37 { color: #4b0074; }
.irc-fg38 { color: #740074; }
.irc-fg39 { color: #740045; }
.irc-fg40 { color: #b50000; }
.irc-fg41 { color: #b56300; }
.irc-fg42 { color: #b5b500; }
.irc-fg43 { color: #7db500; }
.irc-fg44 { color: #00b500; }
.irc-fg45 { color: #00b571; }
.irc-fg46 { color: #00b5b5; }
.irc-fg47 { color: #0063b5; }
.irc-fg48 { color: #0000b5; }
.irc-fg49 { color: #7500b5; }
.irc-fg50 { color: #b500b5; }
.irc-fg51 { color: #b5006b; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-fg52 { color: #f00; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-fg53 { color: #ff8c00; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-fg54 { color: #ff0; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-fg55 { color: #b2ff00; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-fg56 { color: #0f0; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-fg57 { color: #00ffa0; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-fg58 { color: #0ff; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-fg59 { color: #008cff; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-fg60 { color: #00f; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-fg61 { color: #a500ff; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-fg62 { color: #f0f; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-fg63 { color: #ff0098; }
.irc-fg64 { color: #ff5959; }
.irc-fg65 { color: #ffb459; }
.irc-fg66 { color: #ffff71; }
.irc-fg67 { color: #cfff60; }
.irc-fg68 { color: #6fff6f; }
.irc-fg69 { color: #65ffc9; }
.irc-fg70 { color: #6dffff; }
.irc-fg71 { color: #59b4ff; }
.irc-fg72 { color: #5959ff; }
.irc-fg73 { color: #c459ff; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-fg74 { color: #f6f; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-fg75 { color: #ff59bc; }
.irc-fg76 { color: #ff9c9c; }
.irc-fg77 { color: #ffd39c; }
.irc-fg78 { color: #ffff9c; }
.irc-fg79 { color: #e2ff9c; }
.irc-fg80 { color: #9cff9c; }
.irc-fg81 { color: #9cffdb; }
.irc-fg82 { color: #9cffff; }
.irc-fg83 { color: #9cd3ff; }
.irc-fg84 { color: #9c9cff; }
.irc-fg85 { color: #dc9cff; }
.irc-fg86 { color: #ff9cff; }
.irc-fg87 { color: #ff94d3; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-fg88 { color: #000; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-fg89 { color: #131313; }
.irc-fg90 { color: #282828; }
.irc-fg91 { color: #363636; }
.irc-fg92 { color: #4d4d4d; }
.irc-fg93 { color: #656565; }
.irc-fg94 { color: #818181; }
.irc-fg95 { color: #9f9f9f; }
.irc-fg96 { color: #bcbcbc; }
.irc-fg97 { color: #e2e2e2; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-fg98 { color: #fff; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-bg16 { background-color: #470000; }
.irc-bg17 { background-color: #472100; }
.irc-bg18 { background-color: #474700; }
.irc-bg19 { background-color: #324700; }
.irc-bg20 { background-color: #004700; }
.irc-bg21 { background-color: #00472c; }
.irc-bg22 { background-color: #004747; }
.irc-bg23 { background-color: #002747; }
.irc-bg24 { background-color: #000047; }
.irc-bg25 { background-color: #2e0047; }
.irc-bg26 { background-color: #470047; }
.irc-bg27 { background-color: #47002a; }
.irc-bg28 { background-color: #740000; }
.irc-bg29 { background-color: #743a00; }
.irc-bg30 { background-color: #747400; }
.irc-bg31 { background-color: #517400; }
.irc-bg32 { background-color: #007400; }
.irc-bg33 { background-color: #007449; }
.irc-bg34 { background-color: #007474; }
.irc-bg35 { background-color: #004074; }
.irc-bg36 { background-color: #000074; }
.irc-bg37 { background-color: #4b0074; }
.irc-bg38 { background-color: #740074; }
.irc-bg39 { background-color: #740045; }
.irc-bg40 { background-color: #b50000; }
.irc-bg41 { background-color: #b56300; }
.irc-bg42 { background-color: #b5b500; }
.irc-bg43 { background-color: #7db500; }
.irc-bg44 { background-color: #00b500; }
.irc-bg45 { background-color: #00b571; }
.irc-bg46 { background-color: #00b5b5; }
.irc-bg47 { background-color: #0063b5; }
.irc-bg48 { background-color: #0000b5; }
.irc-bg49 { background-color: #7500b5; }
.irc-bg50 { background-color: #b500b5; }
.irc-bg51 { background-color: #b5006b; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-bg52 { background-color: #f00; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-bg53 { background-color: #ff8c00; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-bg54 { background-color: #ff0; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-bg55 { background-color: #b2ff00; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-bg56 { background-color: #0f0; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-bg57 { background-color: #00ffa0; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-bg58 { background-color: #0ff; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-bg59 { background-color: #008cff; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-bg60 { background-color: #00f; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-bg61 { background-color: #a500ff; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-bg62 { background-color: #f0f; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-bg63 { background-color: #ff0098; }
.irc-bg64 { background-color: #ff5959; }
.irc-bg65 { background-color: #ffb459; }
.irc-bg66 { background-color: #ffff71; }
.irc-bg67 { background-color: #cfff60; }
.irc-bg68 { background-color: #6fff6f; }
.irc-bg69 { background-color: #65ffc9; }
.irc-bg70 { background-color: #6dffff; }
.irc-bg71 { background-color: #59b4ff; }
.irc-bg72 { background-color: #5959ff; }
.irc-bg73 { background-color: #c459ff; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-bg74 { background-color: #f6f; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-bg75 { background-color: #ff59bc; }
.irc-bg76 { background-color: #ff9c9c; }
.irc-bg77 { background-color: #ffd39c; }
.irc-bg78 { background-color: #ffff9c; }
.irc-bg79 { background-color: #e2ff9c; }
.irc-bg80 { background-color: #9cff9c; }
.irc-bg81 { background-color: #9cffdb; }
.irc-bg82 { background-color: #9cffff; }
.irc-bg83 { background-color: #9cd3ff; }
.irc-bg84 { background-color: #9c9cff; }
.irc-bg85 { background-color: #dc9cff; }
.irc-bg86 { background-color: #ff9cff; }
.irc-bg87 { background-color: #ff94d3; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-bg88 { background-color: #000; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
.irc-bg89 { background-color: #131313; }
.irc-bg90 { background-color: #282828; }
.irc-bg91 { background-color: #363636; }
.irc-bg92 { background-color: #4d4d4d; }
.irc-bg93 { background-color: #656565; }
.irc-bg94 { background-color: #818181; }
.irc-bg95 { background-color: #9f9f9f; }
.irc-bg96 { background-color: #bcbcbc; }
.irc-bg97 { background-color: #e2e2e2; }
Fix CSS currently failing Stylelint checker
2017-12-28 22:07:08 +00:00
.irc-bg98 { background-color: #fff; }
Add styling for 16-98 colors
2017-12-12 18:14:05 +00:00
:confetti_ball: full mirc colour+style compliance
2014-12-10 11:30:45 +00:00
.irc-bold {
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
font-weight: bold;
:confetti_ball: full mirc colour+style compliance
2014-12-10 11:30:45 +00:00
}
.irc-underline {
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
text-decoration: underline;
:confetti_ball: full mirc colour+style compliance
2014-12-10 11:30:45 +00:00
}
#1754 - implement strikethrough formatting, client keybinding, tests, and help section
2017-12-03 02:52:49 +00:00
.irc-strikethrough {
text-decoration: line-through;
}
Strikethrough and underline support
2018-03-18 19:34:46 +00:00
.irc-underline.irc-strikethrough {
text-decoration: underline line-through;
}
:confetti_ball: full mirc colour+style compliance
2014-12-10 11:30:45 +00:00
.irc-italic {
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
font-style: italic;
:confetti_ball: full mirc colour+style compliance
2014-12-10 11:30:45 +00:00
}
Update to primer on npm, set tooltipped-no-delay for all tooltips
2017-12-19 01:59:35 +00:00
.tooltipped::after {
font-size: 12px;
}
Fade out for long usernames.
2017-05-11 00:17:27 +00:00
@media (min-width: 480px) {
/* Fade out for long usernames */
#chat .from {
padding-left: 10px;
Replace pseudo element gradient fade with mask-image
2018-03-21 17:23:47 +00:00
mask-image: linear-gradient(to left, transparent, black 10px);
Fade out for long usernames.
2017-05-11 00:17:27 +00:00
}
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
@media (max-width: 768px) {
Disable tooltips on mobile to prevent them to stay after clicking
2016-09-15 03:50:57 +00:00
/**
* TODO Replace this with `@media (hover: hover)` when Firefox supports it
* See:
* - http://stackoverflow.com/a/28058919/1935861
* - http://caniuse.com/#feat=css-media-interaction
* - https://www.w3.org/TR/mediaqueries-4/
* - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
*/
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
.tooltipped-no-touch:hover::before,
.tooltipped-no-touch:hover::after {
Disable tooltips on mobile to prevent them to stay after clicking
2016-09-15 03:50:57 +00:00
visibility: hidden;
opacity: 0;
}
Make sidebar logo scroll with networks, wrap logos in div element
2018-04-14 22:16:03 +00:00
#sidebar .logo-container {
margin-top: 5px;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.channel-list-item,
Reduce message size on mobile and increase a bit UI text
2017-09-23 01:59:45 +00:00
#sidebar .empty,
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.window label,
.header .topic,
Reduce message size on mobile and increase a bit UI text
2017-09-23 01:59:45 +00:00
#settings .error,
#help .help-item,
#loading,
#context-menu,
Fix some missing parts from recent font changes/resizing - Separate messages by one more pixel: the recent font changes make multiline messages rather hard to differentite from one another. I believe adding 2px looked better, but I knew that would cause riots so I went for a middle ground 😅 - Make previews the same size than messages themselves, and adapt the thumbnail height accordingly - Make the message input font size same as message size
2017-10-03 04:55:48 +00:00
#form #input,
Reduce message size on mobile and increase a bit UI text
2017-09-23 01:59:45 +00:00
.textcomplete-menu,
Increase font size on desktops and mobiles
2017-09-21 06:21:48 +00:00
.messages .msg {
Reduce message size on mobile and increase a bit UI text
2017-09-23 01:59:45 +00:00
font-size: 15px;
Increase font size on desktops and mobiles
2017-09-21 06:21:48 +00:00
}
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
#sidebar {
Make menu state consistent on desktop and mobile; fix sliding on desktop Fixes #2572
2018-06-28 07:45:40 +00:00
display: flex;
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
background: var(--body-bg-color);
Fix wrongly positioned menu when opening it and switching to landscape This could be reproduced on tablet or large phone (as long as portrait mode shows a collapsible menu and landscape mode shows normal menu) or when resizing the browser on desktop.
2017-09-23 16:21:31 +00:00
height: 100%;
Convert most of the layout to flexbox, make sidebar an overlay
2018-03-10 22:23:43 +00:00
position: absolute;
left: -220px;
Hide scroll down button entirely with css to fix some issues
2018-09-24 12:47:39 +00:00
z-index: 10;
Remove transition on `box-shadow` as it affects performance (and is not _that_ noticeable)
2018-03-18 07:00:49 +00:00
transition: transform 160ms;
Fix wrongly positioned menu when opening it and switching to landscape This could be reproduced on tablet or large phone (as long as portrait mode shows a collapsible menu and landscape mode shows normal menu) or when resizing the browser on desktop.
2017-09-23 16:21:31 +00:00
transform: translateZ(0);
}
Add a semi-opaque overlay when channel list is open on mobile
2018-03-17 07:13:43 +00:00
#sidebar-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
background: var(--overlay-bg-color);
Add a semi-opaque overlay when channel list is open on mobile
2018-03-17 07:13:43 +00:00
opacity: 0;
Fix transitions of sidebar overlay
2018-03-18 01:08:08 +00:00
visibility: hidden;
transition: opacity 160ms, visibility 160ms;
Hide scroll down button entirely with css to fix some issues
2018-09-24 12:47:39 +00:00
z-index: 9;
Add a semi-opaque overlay when channel list is open on mobile
2018-03-17 07:13:43 +00:00
}
#viewport.menu-open #sidebar-overlay {
opacity: 1;
}
Ensure links in chats cannot be opened by accident when closing the channel list
2018-03-17 07:12:30 +00:00
#viewport.menu-open #sidebar {
Fix wrongly positioned menu when opening it and switching to landscape This could be reproduced on tablet or large phone (as long as portrait mode shows a collapsible menu and landscape mode shows normal menu) or when resizing the browser on desktop.
2017-09-23 16:21:31 +00:00
transform: translate3d(220px, 0, 0);
}
Add a semi-opaque overlay when channel list is open on mobile
2018-03-17 07:13:43 +00:00
#viewport.menu-dragging #sidebar-overlay,
Ensure links in chats cannot be opened by accident when closing the channel list
2018-03-17 07:12:30 +00:00
#viewport.menu-dragging #sidebar {
Remove transition on `box-shadow` as it affects performance (and is not _that_ noticeable)
2018-03-18 07:00:49 +00:00
transition: none;
Fix wrongly positioned menu when opening it and switching to landscape This could be reproduced on tablet or large phone (as long as portrait mode shows a collapsible menu and landscape mode shows normal menu) or when resizing the browser on desktop.
2017-09-23 16:21:31 +00:00
}
Add a semi-opaque overlay when channel list is open on mobile
2018-03-17 07:13:43 +00:00
#viewport.menu-open #sidebar,
#viewport.menu-dragging #sidebar {
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
}
Disable scrolling through sidebar overlay
2018-03-17 07:44:42 +00:00
#viewport.menu-open #sidebar-overlay,
#viewport.menu-dragging #sidebar-overlay {
Fix transitions of sidebar overlay
2018-03-18 01:08:08 +00:00
visibility: visible;
Fix wrongly positioned menu when opening it and switching to landscape This could be reproduced on tablet or large phone (as long as portrait mode shows a collapsible menu and landscape mode shows normal menu) or when resizing the browser on desktop.
2017-09-23 16:21:31 +00:00
}
Make sure the channel list button stays always visible
2018-04-20 15:05:53 +00:00
/* On mobile display, channel list button stays at the top */
#viewport .lt {
position: relative;
}
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
#chat .userlist {
Introduce some CSS variables to simplify writing themes that stay close to the default style
2018-04-30 04:57:03 +00:00
background-color: var(--window-bg-color);
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
height: 100%;
position: absolute;
Fix chat layout on small devices when users list is hidden Fixes #1092
2017-04-28 18:58:00 +00:00
right: 0;
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
transform: translateX(180px);
transition: transform 0.2s;
Fix userlist's wrong position on mobile devices
2021-07-03 23:50:51 +00:00
z-index: 1;
Fix chat layout on small devices when users list is hidden Fixes #1092
2017-04-28 18:58:00 +00:00
}
Make userlist state consistent on mobile and desktop
2018-06-27 07:05:37 +00:00
#viewport.userlist-open #chat .userlist {
Cleanup chat/userlist to use flexbox, fix a couple of bugs
2018-03-04 20:03:11 +00:00
transform: translateX(0);
Add touch slideout menu for mobile
2016-06-12 02:16:17 +00:00
}
Refactor channel titles to use flexbox
2018-02-23 21:57:45 +00:00
#chat .header .title {
padding-left: 6px;
}
Improve UI of previews - Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
2018-03-22 05:17:44 +00:00
#chat .toggle-content .thumb {
max-height: 58px;
max-width: 104px;
}
Add touch slideout menu for mobile
2016-06-12 02:16:17 +00:00
}
Added server password to 'Connect' window
2014-09-13 01:03:16 +00:00
@media (max-width: 479px) {
Add TLS/SSL support
2014-09-10 15:56:19 +00:00
.container {
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
max-width: 100%;
Remove header border on non-chat windows and reduce top margin a bit more
2018-04-14 22:16:17 +00:00
margin: 0;
Added server password to 'Connect' window
2014-09-13 01:03:16 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Add logo to the sign in page
2018-03-11 21:20:51 +00:00
#sign-in .btn {
width: 100%;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.input {
Added server password to 'Connect' window
2014-09-13 01:03:16 +00:00
margin-bottom: 2px;
Add TLS/SSL support
2014-09-10 15:56:19 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Style connect window without bootstrap
2019-12-12 11:20:07 +00:00
#connect .connect-row {
flex-direction: column;
}
#connect .connect-row > .input,
#connect .connect-row > .input-wrap {
flex-grow: 1;
}
Remove float from changelog and version link
2019-12-12 11:24:28 +00:00
#help .help-version-title {
flex-direction: column;
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
#chat .messages {
display: block;
Use a combination background + left border for highlight messages
2018-06-04 04:55:36 +00:00
padding: 5px 0;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Fix responsive interface
2014-08-15 13:52:14 +00:00
#chat .msg {
display: block;
Use a combination background + left border for highlight messages
2018-06-04 04:55:36 +00:00
padding: 2px 10px;
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="condensed"] .msg {
Fix extra padding in condensed messages on mobile Fixes #2797
2018-09-24 07:25:20 +00:00
padding: 2px 0;
}
Do not hide timestamps on small viewports
2016-06-03 20:10:32 +00:00
#chat .time,
Fix responsive interface
2014-08-15 13:52:14 +00:00
#chat .from,
Fix preserved whitespace-related issues for previews by separating them from main text
2017-07-20 05:58:04 +00:00
#chat .content {
Fix responsive interface
2014-08-15 13:52:14 +00:00
border: 0;
display: inline;
padding: 0;
}
Unread marker MVP
2016-05-13 10:23:05 +00:00
Enable `preserveWhitespace: false`, add spaces where needed, fix whitespace when copying text
2018-09-26 08:32:38 +00:00
#chat .from::after {
/* Add a space because mobile view changes to block display without paddings */
content: " ";
white-space: pre;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
#chat .chat-view[data-type="channel"] .msg.highlight {
Fix incorrect left padding for highlights on mobile
2018-07-06 06:00:43 +00:00
padding-left: 5px;
}
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
#chat .chat-view[data-type="channel"] .msg.highlight .time {
Use a combination background + left border for highlight messages
2018-06-04 04:55:36 +00:00
padding-left: 0;
}
Add missing time (and icon) of status messages on mobile
2017-12-16 21:11:10 +00:00
#chat .condensed-summary .time,
#chat .condensed-summary .from {
Fix time placeholder showing on mobile format for condensed messages As an extra, make sure time placeholder cannot be selected anymore, and do not do an extra call to `tz` helper when time is not relevant/displayed. I tried to entirely remove `time`/`from` blocks, but because of flexbox layout, that broke message alignment...
2017-08-23 00:18:34 +00:00
display: none;
}
Add a help window within the app This brings commands and keyboard shortcuts from the website, after a massive overhaul. It comes as part of the big documentation rewrite that I am currently doing. `kbd` design inspiration from GitHub, `code` design inspiration from Bootstrap. This help page is accessible from an icon in the sidebar, near the Settings icon.
2017-02-28 07:15:34 +00:00
#help .help-item .subject {
display: inline-block;
padding-bottom: 4px;
}
#help .help-item .description {
display: block;
}
Fix responsive interface
2014-08-15 13:52:14 +00:00
}
Added print CSS style
2014-09-15 17:41:23 +00:00
Nicer scrollbar (webkit only)
2016-01-18 17:49:23 +00:00
::-webkit-scrollbar {
width: 8px;
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
background-color: rgba(0, 0, 0, 0);
Nicer scrollbar (webkit only)
2016-01-18 17:49:23 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Nicer scrollbar (webkit only)
2016-01-18 17:49:23 +00:00
::-webkit-scrollbar:hover {
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
background-color: rgba(0, 0, 0, 0.09);
Nicer scrollbar (webkit only)
2016-01-18 17:49:23 +00:00
}
Update css files to confront stylelint rules
2016-02-17 18:38:42 +00:00
Nicer scrollbar (webkit only)
2016-01-18 17:49:23 +00:00
::-webkit-scrollbar-thumb:vertical {
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
background: rgba(0, 0, 0, 0.5);
Nicer scrollbar (webkit only)
2016-01-18 17:49:23 +00:00
border-radius: 100px;
}
Remove javascript scrollbar library, use hover appearing scrollbar instead
2016-06-22 20:05:25 +00:00
::-webkit-scrollbar-thumb:vertical:active {
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
background: rgba(0, 0, 0, 0.6);
Remove javascript scrollbar library, use hover appearing scrollbar instead
2016-06-22 20:05:25 +00:00
}
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
Add file uploading support Co-Authored-By: Max Leiter <hello@maxleiter.com> Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-09-03 07:30:05 +00:00
/* Image viewer and drag-and-drop overlay */
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
Create a generic confirmation dialog
2020-02-25 09:16:05 +00:00
#confirm-dialog-overlay,
Add file uploading support Co-Authored-By: Max Leiter <hello@maxleiter.com> Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-09-03 07:30:05 +00:00
#upload-overlay,
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
#image-viewer,
Fancy image interactions in the image viewer Desktop: - Mousewheel to zoom in/out (hold ctrl to move up/down) - If zoomed, drag around with mouse to move Mobile: - Move around with one finger - Change zoom with two fingers
2019-10-03 13:12:49 +00:00
#image-viewer .open-btn,
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
#image-viewer .close-btn {
/* Vertically and horizontally center stuff */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Create a generic confirmation dialog
2020-02-25 09:16:05 +00:00
#confirm-dialog-overlay,
Add file uploading support Co-Authored-By: Max Leiter <hello@maxleiter.com> Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-09-03 07:30:05 +00:00
#upload-overlay,
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
#image-viewer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
background: var(--overlay-bg-color);
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
visibility: hidden;
opacity: 0;
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
transition: opacity 0.2s, visibility 0.2s;
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
z-index: 999;
Fancy image interactions in the image viewer Desktop: - Mousewheel to zoom in/out (hold ctrl to move up/down) - If zoomed, drag around with mouse to move Mobile: - Move around with one finger - Change zoom with two fingers
2019-10-03 13:12:49 +00:00
user-select: none;
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
}
Create a generic confirmation dialog
2020-02-25 09:16:05 +00:00
#confirm-dialog-overlay.opened,
Fix up css refactoring
2019-12-10 14:46:50 +00:00
#upload-overlay.is-dragover,
Remove background blur filter/transition when opening the image viewer
2017-07-24 06:31:12 +00:00
#image-viewer.opened {
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
visibility: visible;
opacity: 1;
}
Create a generic confirmation dialog
2020-02-25 09:16:05 +00:00
#confirm-dialog-overlay,
Fix up css refactoring
2019-12-10 14:46:50 +00:00
#image-viewer {
background: rgba(0, 0, 0, 0.9);
Add file uploading support Co-Authored-By: Max Leiter <hello@maxleiter.com> Co-Authored-By: Jérémie Astori <astorije@users.noreply.github.com>
2018-09-03 07:30:05 +00:00
}
Add Previous/Next cycling buttons to the image viewer
2017-07-23 17:14:27 +00:00
#image-viewer .close-btn,
Fancy image interactions in the image viewer Desktop: - Mousewheel to zoom in/out (hold ctrl to move up/down) - If zoomed, drag around with mouse to move Mobile: - Move around with one finger - Change zoom with two fingers
2019-10-03 13:12:49 +00:00
#image-viewer .open-btn,
Add Previous/Next cycling buttons to the image viewer
2017-07-23 17:14:27 +00:00
#image-viewer .previous-image-btn,
#image-viewer .next-image-btn {
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
position: fixed;
top: 0;
width: 2em;
font-size: 36px;
color: white;
Use leading-zero notation to get closer to stylelint standard config
2017-08-21 06:22:40 +00:00
opacity: 0.6;
transition: 0.2s opacity;
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
}
Add Previous/Next cycling buttons to the image viewer
2017-07-23 17:14:27 +00:00
#image-viewer .close-btn {
right: 0;
height: 2em;
z-index: 1002;
}
Use double-colon on pseudo elements to get closer to stylelint standard config
2017-08-21 06:18:33 +00:00
#image-viewer .close-btn::before {
Add Previous/Next cycling buttons to the image viewer
2017-07-23 17:14:27 +00:00
content: "×";
}
Fancy image interactions in the image viewer Desktop: - Mousewheel to zoom in/out (hold ctrl to move up/down) - If zoomed, drag around with mouse to move Mobile: - Move around with one finger - Change zoom with two fingers
2019-10-03 13:12:49 +00:00
#image-viewer .open-btn {
right: 0;
bottom: 0;
top: auto;
height: 2em;
z-index: 1002;
}
Add Previous/Next cycling buttons to the image viewer
2017-07-23 17:14:27 +00:00
#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 {
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
opacity: 1;
}
Fancy image interactions in the image viewer Desktop: - Mousewheel to zoom in/out (hold ctrl to move up/down) - If zoomed, drag around with mouse to move Mobile: - Move around with one finger - Change zoom with two fingers
2019-10-03 13:12:49 +00:00
#image-viewer > img {
cursor: grab;
position: absolute;
transform-origin: 50% 50%;
Checkered background for transparent images in image viewer
2017-09-09 10:02:54 +00:00
/* Checkered background for transparent images */
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
background-image:
linear-gradient(45deg, #eee 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #eee 75%, #eee 100%),
linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%, #eee 100%);
Add an image viewer for thumbnails and image previews
2017-07-12 06:55:41 +00:00
}
Correctly handle multiple successive whitespace characters
2017-07-18 14:24:40 +00:00
/* Correctly handle multiple successive whitespace characters.
For example: user has quit ( ===> L O L <=== ) */
Refactor some CSS selectors.
2019-12-04 06:58:23 +00:00
.header .topic,
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="action"] .content,
#chat .msg[data-type="message"] .content,
Implement generic monospace blocks for INFO and MOTD numerics Fixes #3961
2020-06-29 07:51:17 +00:00
#chat .msg[data-type="monospace_block"] .content,
Use data-type on .msg
2019-12-15 11:46:43 +00:00
#chat .msg[data-type="notice"] .content,
Correctly handle multiple successive whitespace characters
2017-07-18 14:24:40 +00:00
#chat .ctcp-message,
#chat .part-reason,
#chat .quit-reason,
#chat .new-topic,
#chat table.channel-list .topic {
white-space: pre-wrap;
}
Message search WIP.
2019-12-31 16:21:34 +00:00
.chat-view[data-type="search-results"] .search-status {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
Reference in New Issue Copy Permalink