Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
zulip/web/styles/zulip.css

3615 lines
92 KiB
CSS
Raw Normal View History

css: Scroll on `html` instead of `.app`.
2023-05-20 16:30:21 +02:00
html {
stylelint: Fix declaration-block-no-redundant-longhand-properties. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-11-09 00:35:32 +01:00
overflow: hidden scroll;
css: Scroll on `html` instead of `.app`.
2023-05-20 16:30:21 +02:00
overscroll-behavior-y: none;
overlays: Stop document from occupying the extra scrollbar width. When overlay / modal is displayed, scrollbar is hidden due to the disabled scrolling on `html`. Reduce width of fixed elements that will be visible in background and `html` so that they don't occupy that extra space. Also, I was over-thinking how we can get the scrollbar width. The moment we allowed scrolling on `html`, it was easy to get the scrollbar width.
2023-05-27 18:36:43 +02:00
width: calc(100% - var(--disabled-scrollbar-width));
css: Scroll on `html` instead of `.app`.
2023-05-20 16:30:21 +02:00
}
Fix code format for CSS selectors with commas. This change basically does s/,<space>/,<cr>/. (imported from commit 4ab295d0dbc24de6baa29908c2d6a469f35492f3)
2013-08-23 07:31:38 +02:00
body,
html {
Overflow scroll on app instead of body (imported from commit 2be63b16afe212e95e983745eaa0bc5dc8e1397e)
2014-01-15 20:13:41 +01:00
height: 100%;
Add "touch-action: manipulation" for less tap delay. This is a google recommendation to remove the 300ms tap delay on mobile web.
2017-07-31 20:03:54 +02:00
touch-action: manipulation;
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
}
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
.column-middle,
#main_div {
background-color: var(--color-background);
}
templates: Make the Loading… message more robust. Don’t hide it until both CSS and JS have loaded. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-09-20 06:43:04 +02:00
#app-loading.loaded {
Make app less shocking when CSS fails to load. We now have a stand-in message that says "Loading CSS...", which only gets hidden once the CSS loads. This is a better user experience than seeing completely unformatted Zulip HTML on the page. The message is set to fill the whole page, and it's cleared once zulip.css gets loaded. (imported from commit 613fe3d6a39197aabfeb63823b7fad75834bb9eb)
2013-11-25 23:05:08 +01:00
display: none !important; /* We are now loaded, by definition. */
}
Implement portions of Waseem's new UI. This is mostly working; things that need to be implemented: - Ask users for their Real Name - Personal replies need skinning - Miscl UI changes to match mockups (imported from commit 3638cf5ec2ba2306004ba6db6fa4c25c47f76517)
2012-09-10 20:31:53 +02:00
body {
overlays: Stop document from occupying the extra scrollbar width. When overlay / modal is displayed, scrollbar is hidden due to the disabled scrolling on `html`. Reduce width of fixed elements that will be visible in background and `html` so that they don't occupy that extra space. Also, I was over-thinking how we can get the scrollbar width. The moment we allowed scrolling on `html`, it was easy to get the scrollbar width.
2023-05-27 18:36:43 +02:00
width: 100%;
styles: Globally set font-size and a unitless line-height. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-06-11 23:14:08 +02:00
font-size: 14px;
line-height: calc(20 / 14);
css: Use variable font when using Source Sans 3. This is to overcome the limitations of previous static font, which didn't allow us to use various font widths.
2023-03-27 12:47:59 +02:00
font-family: "Source Sans 3 VF", sans-serif;
css: Use 75% white as default text color.
2023-05-13 08:28:23 +02:00
color: var(--color-text-default);
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
background-color: var(--color-background);
css: Remove unnecessary 'prefixed-transition' mixin. The `transition` property does not need prefixing. In fact, very few properties need that nowadays. So remove it to simplify the code. This is strictly a refactor with no style change intended. Many of these styles shouldn't have been prefixed even if needed. The prefixes exist exactly because the implementations might differ from the incoming standard. Looking at the supported browsers: https://caniuse.com/#search=transition We see that this property has had mainstream support from 2012 and was supported on Firefox in 2006 !!!
2019-04-14 15:21:40 +02:00
transition: background-color 200ms linear;
scroll_bar: Use a CSS class to toggle fluid layout.
2023-05-28 11:51:00 +02:00
css: Fix fluid_layout_width setting. 0457f6807c9c1e925a7e5b0704685fcc0d97c936 seems to have accidentally inverted the setting; we also clean up duplicate declarations of this 1400px value.
2023-05-29 07:03:33 +02:00
/* Implementation for fluid layout width setting. */
.header-main,
.app .app-main,
#compose-container {
max-width: 1400px;
}
scroll_bar: Use a CSS class to toggle fluid layout.
2023-05-28 11:51:00 +02:00
&.fluid_layout_width {
.header-main,
.app .app-main,
#compose-container {
css: Fix fluid_layout_width setting. 0457f6807c9c1e925a7e5b0704685fcc0d97c936 seems to have accidentally inverted the setting; we also clean up duplicate declarations of this 1400px value.
2023-05-29 07:03:33 +02:00
max-width: inherit;
scroll_bar: Use a CSS class to toggle fluid layout.
2023-05-28 11:51:00 +02:00
}
}
Add light blue background color on narrow (imported from commit a007bdc48c802b36fa5185ed9d153503298150fc)
2013-07-17 00:52:18 +02:00
}
dark_theme: Declare color-scheme CSS property. This allows the browser to select a more appropriate color for the browser scrollbars, for example. https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-11-25 22:06:11 +01:00
:root {
color-scheme: light;
css: Use variables for colors used to display message time. This makes color changes easy to review and maintain in the codebase. This is also an attempt towards removing dark_theme.css as we will only need to override color variables for these elements in `body.dark-theme` in zulip.css without need of overriding colors for any specific elements.
2022-08-04 14:13:31 +02:00
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
/*
This is the header, aka the navbar.
*/
--header-height: 40px;
stylelint: Fix at-rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-06 03:31:58 +01:00
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
/*
At 600px, the header starts taking up more than 5%
of the screen. We make it shorter to leave more space
to see the rest of the app. */
@media (height < $short_navbar_cutoff_height) {
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
--header-height: 30px;
}
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
/*
Height of the search box, which appears in the header.
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
On very short screens, the search box's height becomes
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
the height of its parent (i.e. the header height).
*/
--search-box-height: 28px;
navbar: Set search-container width in CSS vars.
2023-09-27 19:23:05 +02:00
--search-box-width: 150px;
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
@media (height < $short_navbar_cutoff_height) {
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
--search-box-height: var(--header-height);
}
navbar: Set search-container width in CSS vars.
2023-09-27 19:23:05 +02:00
@media (width < $md_min) {
--search-box-width: 40px;
}
navbar_alerts: Adjust app based on navbar height.
2023-05-21 20:52:46 +02:00
/*
Since #navbar_alerts_wrapper can take variable height depending upon
window width / language, we sync its height in navbar_alerts.js
*/
--navbar-alerts-wrapper-height: 0px;
--navbar-fixed-height: calc(
var(--header-height) + var(--navbar-alerts-wrapper-height)
);
navbar: Explicitly calculate offset from title and search. A separate `margin-right:` declaration helps keep the calculation and intention more readable.
2023-09-27 19:37:37 +02:00
/* Keep content from colliding with the search box. */
--navbar-content-righthand-offset: 5px;
navbar_alerts: Adjust app based on navbar height.
2023-05-21 20:52:46 +02:00
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
/*
We have a 10px gutter below the header,
which often needs to be respected by both
the elements above it and below it on
the y-axis, due to absolute positioning.
*/
--header-padding-bottom: 10px;
/*
Our sidebars (and anything that top-align
with them) go beneath the header.
*/
--left-sidebar-collapse-widget-gutter: 10px;
--left-sidebar-width: 270px;
--right-sidebar-width: 250px;
left_sidebar: Place unread count right of All DMs icon. Also set a CSS variable for header-icon widths in the left sidebar. Fixes: #27559
2023-11-15 17:53:34 +01:00
--left-sidebar-header-icon-width: 15px;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
message_grid: Share same message grid with me-messages.
2023-06-14 20:40:08 +02:00
/*
me_message: Center first line with center of avatar. This commit also demonstrates how precise line-heights contribute to a design: by matching the line-height on the avatar's grid area to the dimensions of the square avatar image, it's possible to center the first line of text (me-messages, in this case) with a non-text element.
2023-06-30 19:27:06 +02:00
Message box elements and values.
message_grid: Share same message grid with me-messages.
2023-06-14 20:40:08 +02:00
*/
me_message: Center first line with center of avatar. This commit also demonstrates how precise line-heights contribute to a design: by matching the line-height on the avatar's grid area to the dimensions of the square avatar image, it's possible to center the first line of text (me-messages, in this case) with a non-text element.
2023-06-30 19:27:06 +02:00
--message-box-avatar-width: 35px;
--message-box-avatar-height: var(--message-box-avatar-width);
message_grid: Share same message grid with me-messages.
2023-06-14 20:40:08 +02:00
--message-box-line-height: 1.214;
icons: Add microlayout for new icons. This, along with the preceding commits, fixes #25903.
2023-07-17 22:43:21 +02:00
--message-box-icon-width: 26px;
--message-box-icon-height: 25px;
message_grid: Share same message grid with me-messages.
2023-06-14 20:40:08 +02:00
reactions: Redesign reaction button colors and style. See CZO discussion: https://chat.zulip.org/#narrow/stream/9-issues/topic/Reactions.20background.20color/near/1632171 Also: https://github.com/zulip/zulip/pull/26580#issuecomment-1705734770 Co-Authored-By: Vlad Korobov <terpimost@gmail.com>
2023-08-28 18:27:46 +02:00
/*
Reaction container UI scaling.
*/
--scale-message-reaction-active: 0.96;
css: Fix unread marker leaking through message header.
2023-05-12 10:56:55 +02:00
/*
Left position of unread marker. Only needs to be tracked if it is negative so that
it doesn't leak through message header.
*/
--unread-marker-left: -1px;
compose_box: Correct topic input-box height. While this commit achieves what the subject advertises (fixing the input box's height to match the recipient drop-down), but it does so by relying heavily on flexbox's behavior to manage the height of the elements and vertical centering, where necessary, rather than positioning hacks or vertical padding. This commit also removes some additional styles that do not make sense (e.g., `min-width: 0`) or that need not be set.
2023-05-25 18:09:39 +02:00
/*
Compose-recipient box minimum height. Used in a flexbox context to
allow elements like DM pills to stack without breaking out of their
flex item.
*/
--compose-recipient-box-min-height: 30.5px;
overlays: Stop document from occupying the extra scrollbar width. When overlay / modal is displayed, scrollbar is hidden due to the disabled scrolling on `html`. Reduce width of fixed elements that will be visible in background and `html` so that they don't occupy that extra space. Also, I was over-thinking how we can get the scrollbar width. The moment we allowed scrolling on `html`, it was easy to get the scrollbar width.
2023-05-27 18:36:43 +02:00
/*
Width to be reserved for document scrollbar when scrolling is disabled.
Using `scrollbar-gutter` would be more appropriate but doesn't has wide
support and doesn't work for `fixed` elements.
*/
--disabled-scrollbar-width: 0px;
scroll_bar: Fix overlapping right sidebar and browser scrollbars. Fixes #25779 We move the simplebar scroll on the right sidebar to a little left when there is an overlay scrollbar present so that user can drag either of them.
2023-05-29 13:31:58 +02:00
/*
Right offset of simplebar scrollbar for `.column-right` when browser has
overlay scrollbars which don't occupy any space. Currently only
known to present on Mac (all browsers) and Firefox (all OS?). This seems
more than enough to differentiate right sidebar scrollbar and browser
scrollbar even if the browser scrollbar is wider.
*/
--browser-overlay-scrollbar-width: 10px;
recent view: Rename topics to conversations in code comments.
2023-09-06 23:04:07 +02:00
/* This is a rough estimate for height occupied by Recent Conversations filters.
recent_conversation: Make all topics visible with compose open. Fixes #25751
2023-05-29 20:59:27 +02:00
We expect `resize.js` to update this once UI is initialized. */
--recent-topics-filters-height: 50px;
stream_settings: Fix scroll at max-height. Simplebar seems unaware of the `max-height: 1000px` on `.subscriptions-container`, and therefore does not properly provide a scrollbar when it's needed. This commit adds a `max-height` to the stream Simplebar container, ensuring that otherwise hidden content that Simplebar believes to be visible can be scrolled to. Finally, rather than rely on magic numbers or math done in comments, this commit establishes CSS variables for all relevant modal-element heights, doing the math inline using CSS calc(). Fixes #26107.
2023-06-23 22:28:29 +02:00
/* Overlay heights for streams modal */
css: Rename CSS variables for heights in subscriptions overlay. The CSS variables for heights in subscriptions overlay uses "modal" word but we actually use overlays for subscriptions UI, so this commit renames those variables to better names.
2023-10-16 18:22:03 +02:00
--overlay-container-height: 95vh;
--overlay-container-max-height: 1000px;
stream_settings: Fix scroll at max-height. Simplebar seems unaware of the `max-height: 1000px` on `.subscriptions-container`, and therefore does not properly provide a scrollbar when it's needed. This commit adds a `max-height` to the stream Simplebar container, ensuring that otherwise hidden content that Simplebar believes to be visible can be scrolled to. Finally, rather than rely on magic numbers or math done in comments, this commit establishes CSS variables for all relevant modal-element heights, doing the math inline using CSS calc(). Fixes #26107.
2023-06-23 22:28:29 +02:00
/* .subscriptions-header */
css: Rename CSS variables for heights in subscriptions overlay. The CSS variables for heights in subscriptions overlay uses "modal" word but we actually use overlays for subscriptions UI, so this commit renames those variables to better names.
2023-10-16 18:22:03 +02:00
--subscriptions-overlay-header-height: 45px;
stream_settings: Fix scroll at max-height. Simplebar seems unaware of the `max-height: 1000px` on `.subscriptions-container`, and therefore does not properly provide a scrollbar when it's needed. This commit adds a `max-height` to the stream Simplebar container, ensuring that otherwise hidden content that Simplebar believes to be visible can be scrolled to. Finally, rather than rely on magic numbers or math done in comments, this commit establishes CSS variables for all relevant modal-element heights, doing the math inline using CSS calc(). Fixes #26107.
2023-06-23 22:28:29 +02:00
/* .display-type */
css: Rename CSS variables for heights in subscriptions overlay. The CSS variables for heights in subscriptions overlay uses "modal" word but we actually use overlays for subscriptions UI, so this commit renames those variables to better names.
2023-10-16 18:22:03 +02:00
--subscriptions-overlay-display-type-height: 44px;
settings: Rename modal-footer class. We only use "modal-footer" class in stream and user group creation forms which is actually not a modal, so this commit renames the class to a better name "settings-sticky-footer".
2023-10-12 07:38:37 +02:00
/* .settings-sticky-footer */
css: Rename CSS variables for heights in subscriptions overlay. The CSS variables for heights in subscriptions overlay uses "modal" word but we actually use overlays for subscriptions UI, so this commit renames those variables to better names.
2023-10-16 18:22:03 +02:00
--subscriptions-overlay-sticky-footer-height: 60px;
stream_settings: Fix scroll at max-height. Simplebar seems unaware of the `max-height: 1000px` on `.subscriptions-container`, and therefore does not properly provide a scrollbar when it's needed. This commit adds a `max-height` to the stream Simplebar container, ensuring that otherwise hidden content that Simplebar believes to be visible can be scrolled to. Finally, rather than rely on magic numbers or math done in comments, this commit establishes CSS variables for all relevant modal-element heights, doing the math inline using CSS calc(). Fixes #26107.
2023-06-23 22:28:29 +02:00
css: Use a variable to track bottom_whitespace height. Since we want the same space in recent topics to display the compose box without overlapping with any other topics, it makes sense to use a common variable.
2023-05-30 20:31:39 +02:00
/*
Maximum height of the compose box when it is not in expanded state. This
is equal to the height of `#bottom_whitespace`. We expect resize.js to
replace it with its pixel calculation since even if `vh` has great support,
it can change depending on browser / OS on mobile devices.
*/
--max-unexpanded-compose-height: 40vh;
stream_settings_ui: Avoid two scrollbars. Fixes #26823 Fixes user card not displayed on last item in the subscribers list. This was happening because there wan not enough space below the user name for the popover to be displayed (as far as I understand this). Regardless of the fix above, this seems like a nice change.
2023-10-09 22:39:13 +02:00
/*
Maximum height of the subscribers list in stream settings so that
it doesn't cause the container to have a second scrollbar.
This value will be overridden when stream settings is opened.
*/
--stream-subscriber-list-max-height: 100%;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
/* Colors used across the app */
css: Integrate color vars into specific areas.
2023-06-08 16:03:33 +02:00
--color-date: hsl(0deg 0% 15% / 75%);
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
--color-background-private-message-header: hsl(46deg 35% 93%);
--color-background-private-message-content: hsl(45deg 20% 96%);
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
--color-background-stream-message-content: hsl(0deg 0% 100%);
css: Darken light theme message feed borders. This was a design bug caused by Figma's grey background. https://chat.zulip.org/#narrow/stream/101-design/topic/UI.20redesign.3A.20background/near/1567435
2023-05-12 01:04:26 +02:00
--color-message-list-border: hsl(0deg 0% 0% / 16%);
--color-message-header-contents-border: hsl(0deg 0% 0% / 10%);
css: Increase border opacity for message header and content.
2023-05-08 20:31:18 +02:00
--color-private-message-header-border: hsl(0deg 0% 0% / 10%);
css: Change border-bottom color for message header.
2023-05-15 07:17:56 +02:00
--color-message-header-contents-border-bottom: hsl(0deg 0% 0% / 5%);
--color-private-message-header-border-bottom: hsl(0deg 0% 0% / 7%);
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
--color-message-header-icon-non-interactive: hsl(0deg 0% 0% / 30%);
--color-message-header-icon-interactive: hsl(0deg 0% 0%);
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
--color-background: hsl(0deg 0% 94%);
css: Rename variable name. This will be used in other widgets too.
2023-08-16 06:17:00 +02:00
--color-background-widget-input: hsl(0deg 0% 100%);
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
--color-background-navbar: hsl(0deg 0% 97%);
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
--color-background-active-narrow-filter: hsl(202deg 56% 91%);
--color-background-hover-narrow-filter: hsl(120deg 12.3% 71.4% / 38%);
--color-navbar-bottom-border: hsl(0deg 0% 80%);
css: Color tweaks.
2023-05-13 08:30:13 +02:00
--color-unread-marker: hsl(217deg 64% 59%);
left_sidebar: Place a dark-mode color for masked unreads.
2023-11-29 20:15:44 +01:00
--color-masked-unread-marker: hsl(0deg 0% 80%);
css: Dim color of failed message sent icons.
2023-05-14 14:39:06 +02:00
--color-failed-message-send-icon: hsl(3.88deg 98.84% 66.27%);
settings: Fix narrow-screen background color, use color variable. Fixes #25708.
2023-05-23 19:45:04 +02:00
--color-background-modal: hsl(0deg 0% 98%);
topic_list: Add an icon and update the color for "Followed" topics. This commit adds the follow icon to the right end (before the three-dot menu icon) of the topic list item for followed topics. The icon replaces '@' instead of showing both the '@' and "Follow" icons in the case of unread mentions, as users don't care if they are following a topic if they've got unread mentions there. In a muted stream, the text color of followed topics in the topic list is set to be similar to that of unmuted topics. The reason is that the followed topic has a tier of interest above being unmuted, so it shouldn't stay faded in the topic list.
2023-08-25 16:07:32 +02:00
--color-unmuted-or-followed-topic-list-item: hsl(0deg 0% 20%);
css: Assign a variable to focus underline color of recent view.
2023-09-12 13:01:36 +02:00
--color-outline-focus: hsl(215deg 47% 50%);
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
--color-background-search: hsl(0deg 0% 100%);
--color-background-search-option-hover: hsl(0deg 0% 94%);
--color-search-box-hover-shadow: hsl(0deg 0% 0% / 10%);
--color-search-shadow-wide: hsl(0deg 0% 0% / 25%);
--color-search-shadow-tight: hsl(0deg 0% 0% / 10%);
--color-search-dropdown-top-border: hsla(0deg 0% 0% / 10%);
navbar: Add user avatar icon for personal_menu dropdown. This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
2023-07-17 17:26:24 +02:00
--color-background-image-loader: hsl(0deg 0% 0% / 10%);
personal_menu: Add tippy personal_menu dropdown. Add a personal menu dropdown that opens on clicking user avatar icon in navbar added in previous commit. The args passed to render_personal_menu() in onShow() are returned by get_personal_menu_content_context() in popover_menus_data.js so that they can be unit tested. Additionally, added CSS to get a custom arrow for dropdown menu. Added a `?` hotkey in keyboard shortcuts option in personal_menu dropdown in a style similar to our tooltip's hotkey by adding ? in a span with class .tooltip-hotkey-hint and adding some CSS. Fixes part of #22802.
2023-07-17 18:01:16 +02:00
--color-icon-purple: hsl(240deg 35% 60%);
--color-background-dropdown-menu: hsl(0deg 0% 100%);
--color-border-popover-menu: hsl(0deg 0% 0% / 10%);
--color-hotkey-hint: hsl(227deg 78% 59%);
--color-background-hover-dropdown-menu: hsl(220deg 12% 5% / 5%);
--color-background-active-dropdown-menu: hsl(220deg 12% 5% / 7%);
--color-border-dropdown-menu: hsl(0deg 0% 0% / 40%);
--color-border-personal-menu-avatar: hsl(0deg 0% 0% / 10%);
refactor: Make variable for unread counter's background colors. This is Prep commit that introduces 2 new CSS variable `--color-background-unread-counter` and `--color-background-unread-counter-popover-menu` that has value `hsl(105deg 2% 50% / 50%)` in dark theme and `hsl(105deg 2% 50%)` in light theme for unread counter and `hsl(200deg 100% 40%)` for unread counter in popover menus to match its blue theme.
2023-10-02 19:19:10 +02:00
--color-background-unread-counter: hsl(105deg 2% 50%);
left_sidebar: Align no-alpha variable for light mode unreads.
2023-11-04 01:01:59 +01:00
/* There's no alpha channel here, but this keeps
the variable names in line. */
--color-background-unread-counter-no-alpha: var(
--color-background-unread-counter
);
left_sidebar: Handle condensed icon unread states.
2023-10-12 19:10:12 +02:00
--color-background-unread-counter-dot: var(
--color-background-unread-counter
);
refactor: Make variable for unread counter's background colors. This is Prep commit that introduces 2 new CSS variable `--color-background-unread-counter` and `--color-background-unread-counter-popover-menu` that has value `hsl(105deg 2% 50% / 50%)` in dark theme and `hsl(105deg 2% 50%)` in light theme for unread counter and `hsl(200deg 100% 40%)` for unread counter in popover menus to match its blue theme.
2023-10-02 19:19:10 +02:00
--color-background-unread-counter-popover-menu: hsl(200deg 100% 40%);
left_sidebar: Add a 3-dot menu to condensed views. Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
2023-10-16 21:21:44 +02:00
--color-border-unread-counter: var(--color-background-unread-counter);
--color-border-unread-counter-popover-menu: inherit;
css: Use CSS variables for the color values of tab-picker. Use CSS variables for the color values of left sidebar topic popover, tab-picker widget to change the visibility policy.
2023-10-16 18:01:34 +02:00
--color-background-tab-picker-container: hsl(0deg 0% 0% / 7%);
css: Improve the css of icon-based tab picker used in topic popover. Remove the solid outline around hovered tabs. Minor tweaks in height and padding for tabs.
2023-10-08 21:10:35 +02:00
--color-background-tab-picker-selected-tab: hsl(0deg 0% 100%);
css: Use CSS variables for the color values of tab-picker. Use CSS variables for the color values of left sidebar topic popover, tab-picker widget to change the visibility policy.
2023-10-16 18:01:34 +02:00
--color-outline-tab-picker-tab-option: hsl(0deg 0% 0% / 30%);
css: Improve the css of icon-based tab picker used in topic popover. Remove the solid outline around hovered tabs. Minor tweaks in height and padding for tabs.
2023-10-08 21:10:35 +02:00
--color-background-tab-picker-tab-option-hover: hsl(0deg 0% 100% / 60%);
css: Set tippy-arrow color same as background in light theme.
2023-11-23 08:53:22 +01:00
--color-background-popover: hsl(0deg 0% 100%);
UI redesign: more-less message interaction. This commit encompasses the following changes: * Replace the [More...] link with a button titled "Show more". * Replace the [Show Less...] link with a button titled "Show less". * Add various on-hover interactions to the buttons. * In the condensed view, add fading to the bottom of the message to visually communicate that the message is truncated. * Update /help/ description. Fixes #22801. Co-authored-by: Evy Kassirer <evy.kassirer@gmail.com>
2023-04-08 15:19:10 +02:00
compose: Present Start new topic button adjacent the reply button. Fixes: #24889. Co-Authored-By: Daniil Fadeev <shameondev@gmail.com>
2023-10-05 18:09:38 +02:00
/* Compose box colors */
compose_box: Implement redesigned send-button styles.
2023-11-02 16:26:32 +01:00
--color-compose-send-button-icon-color: hsl(0deg 0% 100%);
compose_box: Restore purple color to Send button.
2023-11-10 20:19:26 +01:00
--color-compose-send-button-background: hsl(240deg 96% 68%);
--color-compose-send-button-background-interactive: hsl(240deg 41% 50%);
compose_box: Implement redesigned send-button styles.
2023-11-02 16:26:32 +01:00
--color-compose-send-button-focus-border: hsl(232deg 20% 10%);
--color-compose-send-button-focus-shadow: hsl(230deg 100% 20%);
compose_box: Rename message-control-button to send-control-button.
2023-11-14 15:46:37 +01:00
--color-compose-send-control-button: hsl(240deg 30% 50% / 80%);
--color-compose-send-control-button-background: transparent;
--color-compose-send-control-button-interactive: hsl(240deg 30% 50%);
--color-compose-send-control-button-background-interactive: hsl(
compose_box: Implement redesigned vdots-button styles.
2023-11-02 19:07:32 +01:00
240deg 100% 30% / 5%
);
compose_box: Rename message-control-button to send-control-button.
2023-11-14 15:46:37 +01:00
--color-compose-send-control-button-focus-shadow: var(
compose_box: Implement redesigned vdots-button styles.
2023-11-02 19:07:32 +01:00
--color-compose-send-button-focus-shadow
);
compose: Present Start new topic button adjacent the reply button. Fixes: #24889. Co-Authored-By: Daniil Fadeev <shameondev@gmail.com>
2023-10-05 18:09:38 +02:00
--color-compose-collapsed-reply-button-area-background: hsl(0deg 0% 100%);
--color-compose-collapsed-reply-button-area-background-interactive: var(
--color-compose-collapsed-reply-button-area-background
);
--color-compose-collapsed-reply-button-area-border: hsl(0deg 0% 80%);
--color-compose-collapsed-reply-button-area-border-interactive: hsl(
0deg 0% 60%
);
--color-compose-embedded-button-text-color: hsl(231deg 20% 55%);
--color-compose-embedded-button-text-color-hover: hsl(231deg 20% 30%);
--color-compose-embedded-button-background: transparent;
--color-compose-embedded-button-background-hover: hsl(
231deg 100% 90% / 50%
);
css: Separate out text colors.
2023-05-12 12:20:12 +02:00
/* Text colors */
css: Use 75% white as default text color.
2023-05-13 08:28:23 +02:00
--color-text-default: hsl(0deg 0% 20%);
css: Explicitly set text-message color. This commit darkens the text-message color in the light theme to the HSL equivalent of a dark gray (#262626). This is the first time in the Zulip codebase where one CSS custom property is set to another: the dark theme preserves its use of `--color-text-default` in this way, but can be adjusted independently of the reset of the theme in the future by setting a different color value on `--color-text-message-default`. Related reading on this technique: https://css-tricks.com/a-complete-guide-to-custom-properties/#aa-properties-as-properties Fixes a part of #22022.
2023-06-08 16:25:14 +02:00
--color-text-message-default: hsl(0deg 0% 15%);
css: Color tweaks.
2023-05-13 08:30:13 +02:00
--color-text-message-view-header: hsl(0deg 0% 20% / 100%);
css: Separate out text colors.
2023-05-12 12:20:12 +02:00
--color-text-message-header: hsl(0deg 0% 15%);
--color-text-dropdown-input: hsl(0deg 0% 13.33%);
css: Change mention text and background colors.
2023-05-17 05:00:57 +02:00
--color-text-self-direct-mention: hsl(240deg 52% 45% / 100%);
--color-text-self-group-mention: hsl(183deg 52% 26% / 100%);
UI redesign: more-less message interaction. This commit encompasses the following changes: * Replace the [More...] link with a button titled "Show more". * Replace the [Show Less...] link with a button titled "Show less". * Add various on-hover interactions to the buttons. * In the condensed view, add fading to the bottom of the message to visually communicate that the message is truncated. * Update /help/ description. Fixes #22801. Co-authored-by: Evy Kassirer <evy.kassirer@gmail.com>
2023-04-08 15:19:10 +02:00
--color-text-show-more-less-button: hsl(240deg 52% 53%);
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
--color-text-search: hsl(0deg 0% 35%);
--color-text-search-hover: hsl(0deg 0% 0%);
--color-text-search-placeholder: hsl(0deg 0% 50%);
personal_menu: Add tippy personal_menu dropdown. Add a personal menu dropdown that opens on clicking user avatar icon in navbar added in previous commit. The args passed to render_personal_menu() in onShow() are returned by get_personal_menu_content_context() in popover_menus_data.js so that they can be unit tested. Additionally, added CSS to get a custom arrow for dropdown menu. Added a `?` hotkey in keyboard shortcuts option in personal_menu dropdown in a style similar to our tooltip's hotkey by adding ? in a span with class .tooltip-hotkey-hint and adding some CSS. Fixes part of #22802.
2023-07-17 18:01:16 +02:00
--color-text-dropdown-menu: hsl(0deg 0% 15%);
--color-text-full-name: hsl(0deg 0% 15%);
--color-text-item: hsl(0deg 0% 40%);
personal_menu: Add different colors for status text.
2023-11-01 07:09:03 +01:00
--color-text-personal-menu-no-status: hsl(0deg 0% 50%);
--color-text-personal-menu-some-status: hsl(0deg 0% 40%);
sidebars: Express heading colors as CSS variables.
2023-11-08 19:21:17 +01:00
--color-text-sidebar-heading: hsl(0deg 0% 43%);
css: Separate mention pill colors.
2023-05-17 04:11:18 +02:00
bot_icon: Adjust bot-icon color for light and dark modes.
2023-06-16 19:31:01 +02:00
/* Icon colors */
--color-icon-bot: hsl(180deg 8% 65% / 100%);
icons: Implement monochrome colors and scaled active state.
2023-07-17 22:35:29 +02:00
--color-message-action-visible: hsl(216deg 43% 20% / 50%);
--color-message-action-interactive: hsl(216deg 43% 20% / 100%);
icons: Implement new gold star color and states. This not only introduces a new gold color that works across light and dark modes, but it also separates out the hover and focus- visible styles for stars--regardless of whether a star has been filled or not.
2023-08-17 21:34:27 +02:00
--color-message-star-action: hsl(41deg 100% 47% / 100%);
icons: Express global filter icons as colors.
2023-09-15 18:20:00 +02:00
/* The gray on the filter icons is the same as
what's set on ul.filters, but with 70% opacity. */
left_sidebar: Refactor left_sidebar.hbs structures for readability. This commit renames the classes and IDs in the views area (formerly global filters) to a set of flexible values all prefixed in some way with `left-sidebar-navigation`. This is meant to make the styles and structures in the area more readable, while also keeping things flexible into the future as this area's elements change. Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
2023-10-10 21:00:28 +02:00
--color-left-sidebar-navigation-icon: hsl(0deg 0% 20% / 70%);
vdots: Simplify colors in streamlined selectors on left sidebar. This expresses the colors for vdots icons in just three variations, all as CSS variables. The colors are all derived from the existing design, and the dots colors in the streams/topics area was used as as reference. The only visual change here, then, is to the global filters area, whose vdots were the outliers prior to this change. The three variations are: 1. hint: for touchscreens where a :hover state is not available 2. visible: for all screens when a parent element is highlighted 3. hover: for when the vdots themselves are hovered The selectors have been streamlined to use the .sidebar-menu-icon utility class, and the hover-within-a-hover color on vdots is expressed more directly, eliminating the need for selector-specificity busting via !important. Fixes: #20600
2023-09-15 18:29:22 +02:00
--color-vdots-hint: hsl(0deg 0% 0% / 30%);
--color-vdots-visible: hsl(0deg 0% 0% / 53%);
--color-vdots-hover: hsl(0deg 0% 0%);
left_sidebar: Add a 3-dot menu to condensed views. Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
2023-10-16 21:21:44 +02:00
--color-left-sidebar-header-vdots-visible: var(
--color-left-sidebar-navigation-icon
);
css: Use CSS variables for the color values of tab-picker. Use CSS variables for the color values of left sidebar topic popover, tab-picker widget to change the visibility policy.
2023-10-16 18:01:34 +02:00
--color-tab-picker-icon: hsl(200deg 100% 40%);
bot_icon: Adjust bot-icon color for light and dark modes.
2023-06-16 19:31:01 +02:00
reactions: Unify stream and DM colors, express as CSS vars.
2023-08-25 17:32:19 +02:00
/* Reaction container colors */
reactions: Redesign reaction button colors and style. See CZO discussion: https://chat.zulip.org/#narrow/stream/9-issues/topic/Reactions.20background.20color/near/1632171 Also: https://github.com/zulip/zulip/pull/26580#issuecomment-1705734770 Co-Authored-By: Vlad Korobov <terpimost@gmail.com>
2023-08-28 18:27:46 +02:00
--color-message-reaction-border: hsl(0deg 0% 0% / 12%);
--color-message-reaction-border-reacted: hsl(0deg 0% 0% / 40%);
--color-message-reaction-background: hsl(0deg 0% 100%);
--color-message-reaction-background-reacted: hsl(0deg 0% 100%);
--color-message-reaction-background-hover: hsl(210deg 30% 96%);
--color-message-reaction-shadow-inner: hsl(210deg 50% 50% / 15%);
--color-message-reaction-text: hsl(210deg 20% 25% / 100%);
--color-message-reaction-text-reacted: hsl(210deg 20% 20% / 100%);
--color-message-reaction-button-text: hsl(210deg 20% 20% / 60%);
--color-message-reaction-button-text-hover: var(
--color-message-reaction-text
);
--color-message-reaction-button-background: inherit;
--color-message-reaction-button-background-hover: var(
--color-message-reaction-background
);
--color-message-reaction-button-border: transparent;
--color-message-reaction-button-border-hover: var(
--color-message-reaction-border
);
--font-weight-message-reaction: 600;
reactions: Unify stream and DM colors, express as CSS vars.
2023-08-25 17:32:19 +02:00
css: Fix prettier error and reorganize some colors.
2023-07-25 03:06:25 +02:00
/* Message feed loading indicator colors */
--color-zulip-logo: hsl(0deg 0% 0% / 34%);
--color-zulip-logo-loading: hsl(0deg 0% 27%);
recent view: Add button to fetch more conversations. We add a new timerender format for this context, where there's plenty of space. Fixes: #18461
2023-10-04 19:07:01 +02:00
--color-recent-view-loading-spinner: hsl(0deg 0% 27%);
css: Fix prettier error and reorganize some colors.
2023-07-25 03:06:25 +02:00
--color-zulip-logo-z: hsl(0deg 0% 100%);
/* Message collapsing/condensing button colors */
--color-show-more-less-button-background: hsl(240deg 44% 56% / 8%);
--color-show-more-less-button-background-hover: hsl(240deg 44% 56% / 15%);
--color-show-more-less-button-background-active: hsl(240deg 44% 56% / 20%);
css: Separate mention pill colors.
2023-05-17 04:11:18 +02:00
/* Mention pill colors */
--color-background-direct-mention: hsl(240deg 52% 95%);
--color-background-group-mention: hsl(180deg 40% 94%);
css: Change mention text and background colors.
2023-05-17 05:00:57 +02:00
--color-background-text-direct-mention: hsl(240deg 70% 70% / 20%);
--color-background-text-hover-direct-mention: hsl(240deg 70% 70% / 30%);
--color-background-text-group-mention: hsl(183deg 60% 45% / 18%);
--color-background-text-hover-group-mention: hsl(183deg 60% 45% / 30%);
inbox: Add new narrow.
2023-08-09 07:23:30 +02:00
/* Inbox view constants - Values from Figma design */
--height-inbox-search: 26px;
--width-inbox-search: 346px;
inbox: Add dropdown to filter topics. Fixes #27522 Replace `Include muted` checkbox with a dropdown to filter displayed topics. Also, adds a new filter to display only followed topics.
2023-11-05 07:56:09 +01:00
--width-inbox-filters-dropdown: 150px;
inbox: Improve look of empty inbox view.
2023-10-20 13:09:34 +02:00
--color-background-inbox-no-unreads-illustration: hsl(147deg 57% 25%);
inbox: Use app background color. Search input still has the same background color.
2023-10-17 07:26:38 +02:00
--color-background-inbox: var(--color-background);
inbox: Change hover / focus styles of search box. This is to make search box less noticeable when focus is given / taken away from it.
2023-10-05 14:26:45 +02:00
--color-icon-search-inbox: hsl(0deg 0% 0%);
--color-inbox-search-text: hsl(0deg 0% 0%);
--color-border-inbox-search: hsl(229.09deg 21.57% 10% / 30%);
--color-border-inbox-search-hover: hsl(229.09deg 21.57% 10% / 60%);
compose_actions: Warn callers if msg_type is not defined.
2023-10-17 07:54:53 +02:00
--color-background-inbox-search: hsl(0deg 0% 100%);
inbox: Use app background color. Search input still has the same background color.
2023-10-17 07:26:38 +02:00
--color-background-inbox-search-hover: hsl(0deg 0% 100%);
--color-background-inbox-search-focus: hsl(0deg 0% 100%);
inbox: Change hover / focus styles of search box. This is to make search box less noticeable when focus is given / taken away from it.
2023-10-05 14:26:45 +02:00
--color-border-inbox-search-focus: hsl(229.09deg 21.57% 10% / 80%);
--color-box-shadow-inbox-search-focus: hsl(228deg 9.8% 20% / 30%);
inbox: Add new narrow.
2023-08-09 07:23:30 +02:00
--color-background-inbox-row: hsl(0deg 0% 100%);
--color-background-inbox-row-hover: linear-gradient(
0deg,
hsl(0deg 0% 0% / 5%) 0%,
hsl(0deg 0% 0% / 5%) 100%
),
hsl(0deg 0% 100%);
--color-background-btn-inbox-selected: hsl(0deg 0% 0% / 5%);
--color-background-btn-inbox-focus: hsl(0deg 0% 80%);
inbox: Add icon in search box to clear any text.
2023-10-05 15:22:07 +02:00
--color-icons-inbox: hsl(0deg 0% 0%);
--color-background-icon-close-hover: hsl(0deg 0% 0% / 5%);
css: Add box-shadow to navbar dropdown menu as per figma design.
2023-10-13 12:03:50 +02:00
/* Navbar dropdown menu constants - Values from Figma design */
--box-shadow-navbar-dropdown-menu: 0 2.78px 4.11px 0 hsl(0deg 0% 0% / 6%),
0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 7%),
0 8.438px 13.9271px 0 hsl(0deg 0% 0% / 8%),
0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 9%),
0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 9%),
0 41px 80px 0 hsl(0deg 0% 0% / 13%);
gear_menu: Migrate to use tippy.
2023-10-13 12:51:35 +02:00
--box-shadow-gear-menu: 0 2.7798px 4.1129px 0 hsl(0deg 0% 0% / 10%),
0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 9%),
0 8.4377px 13.9271px 0 hsl(0deg 0% 0% / 11%),
0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%),
0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%),
0 41px 80px 0 hsl(0deg 0% 0% / 20%);
--color-navbar-icon: hsl(240deg 20% 50%);
--color-gear-menu-lighter-text: hsl(0deg 0% 40%);
--color-gear-menu-blue-text: hsl(217deg 100% 50%);
header-button: Add background effects to different states.
2023-10-19 19:23:10 +02:00
--color-header-button-hover: hsl(0deg 0% 0% / 5%);
navbar: Correct for alpha background on unread dot's border. This is a case where the use of alpha channels in HSL color values shows its limits. The use of an alpha channel is necessary for the background elements for the top navbar elements, because they sit over the top of the navbar's bottom border (actually an inset shaddow). However, it's impossible to use the alpha-channel based color on elements like the unread dot, where the border actually sits on top of the element itself--meaning that the effect would be a larger dot with an imperceptibly darker ring around it. What this commit does is use a technique suggested by Anders Kaseorg for using CSS's `color-mix()` functional notation to calculate an opaque version of the alpha color for use on elements that do not or cannot directly take the color with the alpha channel. See CZO discussion: https://chat.zulip.org/#narrow/stream/6-frontend/topic/alphas.20in.20color.20definitions/near/1670102
2023-10-26 19:16:08 +02:00
/* This is a technique for directing CSS to do
the color mixing ordinarily handled by the
alpha channel in hsl(); here, the alpha value
is omitted from the hsl() syntax and instead
used as the percentage for mixing over top of
the navbar background. This is needed so that
elements like the unread-count dot can make
use of the color, but neither compound alpha
values or apply alpha values over different
colors, such as the background color on the
unread dot.
The second color value aligns with
--color-background-navbar. We use the value
directly so that this gets compiled down to
an rgb() value by PostCSS Preset Env. */
--color-header-button-hover-no-alpha: color-mix(
in srgb,
hsl(0deg 0% 0%) 5%,
hsl(0deg 0% 97%)
);
header-button: Add background effects to different states.
2023-10-19 19:23:10 +02:00
--color-header-button-focus: hsl(0deg 0% 0% / 8%);
navbar: Correct for alpha background on unread dot's border. This is a case where the use of alpha channels in HSL color values shows its limits. The use of an alpha channel is necessary for the background elements for the top navbar elements, because they sit over the top of the navbar's bottom border (actually an inset shaddow). However, it's impossible to use the alpha-channel based color on elements like the unread dot, where the border actually sits on top of the element itself--meaning that the effect would be a larger dot with an imperceptibly darker ring around it. What this commit does is use a technique suggested by Anders Kaseorg for using CSS's `color-mix()` functional notation to calculate an opaque version of the alpha color for use on elements that do not or cannot directly take the color with the alpha channel. See CZO discussion: https://chat.zulip.org/#narrow/stream/6-frontend/topic/alphas.20in.20color.20definitions/near/1670102
2023-10-26 19:16:08 +02:00
/* The second color value aligns with
--color-background-navbar */
--color-header-button-focus-no-alpha: color-mix(
in srgb,
hsl(0deg 0% 0%) 8%,
hsl(0deg 0% 97%)
);
css: Fix dark theme hover color for copy invite link. Extracted colors into variables and used them inside the id to solve the specificity issue.
2023-10-22 14:23:15 +02:00
--color-fill-hover-copy-icon: hsl(200deg 100% 40%);
--color-fill-user-invite-copy-icon: hsl(0deg 0% 46.7%);
settings-ui: Change `<select>` style using custom chevron-down icon. Align the `dropdown-widget` and `<select>` UIs. Removed default `<select>` tag styles with `appearance: none` css. Added custom chevron-down icon with `background-image` attribute to the `<select>` tag. The svg icon is used in a CSS variable with a data URI. The CSS variable is used to set different colors for dark and light theme. Tweaked by tabbott to scope selectors appropriately and also delete a 10px font-size in one settings dropdown widget. Fixes #26859.
2023-11-06 10:45:30 +01:00
--icon-chevron-down: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z' fill='%23333333'/%3E%3C/svg%3E%0A");
modal_buttons: Make exit button colors in to CSS variables.
2023-11-15 00:08:18 +01:00
/* Button colors on modals and message editing. */
css: Fix modal exit button colors not working on billing pages. This was due to color variables not being accessible as `zulip.css` is not a file we import on billing page.
2023-11-30 02:34:59 +01:00
/* Don't define light theme colors for modal here
since the modal is also used on billing pages and
this file is not imported on billing pages. */
css: Use variables for colors used to display message time. This makes color changes easy to review and maintain in the codebase. This is also an attempt towards removing dark_theme.css as we will only need to override color variables for these elements in `body.dark-theme` in zulip.css without need of overriding colors for any specific elements.
2022-08-04 14:13:31 +02:00
}
styles: Fix dark-theme mixin in zulip.css. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-06 03:45:31 +01:00
%dark-theme {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
--color-date: hsl(0deg 0% 100% / 75%);
css: Use less saturated colors for PMs.
2023-04-24 21:21:59 +02:00
--color-background-private-message-header: hsl(46deg 15% 20%);
css: Color tweaks.
2023-05-13 08:30:13 +02:00
--color-background-private-message-content: hsl(46deg 7% 16%);
--color-background-stream-message-content: hsl(0deg 0% 15%);
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
--color-message-header-icon-non-interactive: hsl(0deg 0% 100% / 30%);
--color-message-header-icon-interactive: hsl(0deg 0% 100%);
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
--color-message-header-contents-border: hsl(0deg 0% 0% / 60%);
css: Increase border opacity for message header and content.
2023-05-08 20:31:18 +02:00
--color-private-message-header-border: hsl(0deg 0% 0% / 48%);
css: Change border-bottom color for message header.
2023-05-15 07:17:56 +02:00
--color-message-header-contents-border-bottom: hsl(0deg 0% 0% / 50%);
--color-private-message-header-border-bottom: hsl(0deg 0% 0% / 37%);
css: Color tweaks.
2023-05-13 08:30:13 +02:00
--color-message-list-border: hsl(0deg 0% 0% / 40%);
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
--color-background: hsl(0deg 0% 11%);
css: Rename variable name. This will be used in other widgets too.
2023-08-16 06:17:00 +02:00
--color-background-widget-input: hsl(225deg 6% 10%);
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
--color-background-navbar: hsl(0deg 0% 13%);
--color-background-active-narrow-filter: hsl(200deg 17% 18%);
--color-background-hover-narrow-filter: hsl(136deg 25% 73% / 20%);
--color-navbar-bottom-border: hsl(0deg 0% 0% / 60%);
css: Color tweaks.
2023-05-13 08:30:13 +02:00
--color-unread-marker: hsl(217deg 64% 59%);
left_sidebar: Place a dark-mode color for masked unreads.
2023-11-29 20:15:44 +01:00
--color-masked-unread-marker: hsl(0deg 0% 30%);
settings: Fix narrow-screen background color, use color variable. Fixes #25708.
2023-05-23 19:45:04 +02:00
--color-background-modal: hsl(212deg 28% 18%);
topic_list: Add an icon and update the color for "Followed" topics. This commit adds the follow icon to the right end (before the three-dot menu icon) of the topic list item for followed topics. The icon replaces '@' instead of showing both the '@' and "Follow" icons in the case of unread mentions, as users don't care if they are following a topic if they've got unread mentions there. In a muted stream, the text color of followed topics in the topic list is set to be similar to that of unmuted topics. The reason is that the followed topic has a tier of interest above being unmuted, so it shouldn't stay faded in the topic list.
2023-08-25 16:07:32 +02:00
--color-unmuted-or-followed-topic-list-item: hsl(236deg 33% 90%);
inline_topic_edit: Fix spinner not visible in the dark mode. A spinner is shown when the request is in progress for inline topic edit. Earlier, the spinner was not visible in the dark theme. This commit makes it visible by setting a different fill color in the dark theme.
2023-09-16 10:48:22 +02:00
--color-recipient-bar-controls-spinner: hsl(0deg 0% 100%);
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
--color-background-search: hsl(0deg 0% 20%);
--color-background-search-option-hover: hsl(0deg 0% 30%);
--color-search-box-hover-shadow: hsl(0deg 0% 0% / 30%);
--color-search-dropdown-top-border: hsla(0deg 0% 0% / 35%);
navbar: Add user avatar icon for personal_menu dropdown. This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
2023-07-17 17:26:24 +02:00
--color-background-image-loader: hsl(0deg 0% 100% / 10%);
personal_menu: Add tippy personal_menu dropdown. Add a personal menu dropdown that opens on clicking user avatar icon in navbar added in previous commit. The args passed to render_personal_menu() in onShow() are returned by get_personal_menu_content_context() in popover_menus_data.js so that they can be unit tested. Additionally, added CSS to get a custom arrow for dropdown menu. Added a `?` hotkey in keyboard shortcuts option in personal_menu dropdown in a style similar to our tooltip's hotkey by adding ? in a span with class .tooltip-hotkey-hint and adding some CSS. Fixes part of #22802.
2023-07-17 18:01:16 +02:00
--color-background-dropdown-menu: hsl(0deg 0% 17%);
--color-border-popover-menu: hsl(0deg 0% 0% / 40%);
--color-hotkey-hint: hsl(225deg 100% 84%);
--color-background-hover-dropdown-menu: hsl(220deg 12% 95% / 5%);
--color-background-active-dropdown-menu: hsl(220deg 12% 95% / 7%);
--color-border-dropdown-menu: hsl(0deg 0% 0%);
--color-border-personal-menu-avatar: hsl(0deg 0% 100% / 20%);
refactor: Make variable for unread counter's background colors. This is Prep commit that introduces 2 new CSS variable `--color-background-unread-counter` and `--color-background-unread-counter-popover-menu` that has value `hsl(105deg 2% 50% / 50%)` in dark theme and `hsl(105deg 2% 50%)` in light theme for unread counter and `hsl(200deg 100% 40%)` for unread counter in popover menus to match its blue theme.
2023-10-02 19:19:10 +02:00
--color-background-unread-counter: hsl(105deg 2% 50% / 50%);
left_sidebar: Display dark-mode condensed unreads without alpha.
2023-11-03 15:52:59 +01:00
/* When unreads are hovered on the condensed
views, they should not have an alpha.
The second color aligns with dark mode's
--color-background. We use the value
directly so that this gets compiled down to
an rgb() value by PostCSS Preset Env. */
--color-background-unread-counter-no-alpha: color-mix(
in srgb,
hsl(105deg 2% 50%) 50%,
hsl(0deg 0% 11%)
);
left_sidebar: Handle condensed icon unread states.
2023-10-12 19:10:12 +02:00
--color-background-unread-counter-dot: hsl(105deg 2% 50% / 90%);
refactor: Make variable for unread counter's background colors. This is Prep commit that introduces 2 new CSS variable `--color-background-unread-counter` and `--color-background-unread-counter-popover-menu` that has value `hsl(105deg 2% 50% / 50%)` in dark theme and `hsl(105deg 2% 50%)` in light theme for unread counter and `hsl(200deg 100% 40%)` for unread counter in popover menus to match its blue theme.
2023-10-02 19:19:10 +02:00
--color-background-unread-counter-popover-menu: hsl(105deg 2% 50% / 50%);
left_sidebar: Add a 3-dot menu to condensed views. Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
2023-10-16 21:21:44 +02:00
--color-border-unread-counter: hsl(105deg 2% 50%);
--color-border-unread-counter-popover-menu: var(
--color-border-unread-counter
);
css: Use CSS variables for the color values of tab-picker. Use CSS variables for the color values of left sidebar topic popover, tab-picker widget to change the visibility policy.
2023-10-16 18:01:34 +02:00
--color-background-tab-picker-container: hsl(0deg 0% 0% / 30%);
css: Improve the css of icon-based tab picker used in topic popover. Remove the solid outline around hovered tabs. Minor tweaks in height and padding for tabs.
2023-10-08 21:10:35 +02:00
--color-background-tab-picker-selected-tab: hsl(0deg 0% 100% / 7%);
css: Use CSS variables for the color values of tab-picker. Use CSS variables for the color values of left sidebar topic popover, tab-picker widget to change the visibility policy.
2023-10-16 18:01:34 +02:00
--color-outline-tab-picker-tab-option: hsl(0deg 0% 100% / 12%);
css: Improve the css of icon-based tab picker used in topic popover. Remove the solid outline around hovered tabs. Minor tweaks in height and padding for tabs.
2023-10-08 21:10:35 +02:00
--color-background-tab-picker-tab-option-hover: hsl(0deg 0% 100% / 5%);
UI redesign: more-less message interaction. This commit encompasses the following changes: * Replace the [More...] link with a button titled "Show more". * Replace the [Show Less...] link with a button titled "Show less". * Add various on-hover interactions to the buttons. * In the condensed view, add fading to the bottom of the message to visually communicate that the message is truncated. * Update /help/ description. Fixes #22801. Co-authored-by: Evy Kassirer <evy.kassirer@gmail.com>
2023-04-08 15:19:10 +02:00
compose: Present Start new topic button adjacent the reply button. Fixes: #24889. Co-Authored-By: Daniil Fadeev <shameondev@gmail.com>
2023-10-05 18:09:38 +02:00
/* Compose box colors */
compose_box: Implement redesigned send-button styles.
2023-11-02 16:26:32 +01:00
--color-compose-send-button-focus-shadow: hsl(0deg 0% 100% / 80%);
compose_box: Rename message-control-button to send-control-button.
2023-11-14 15:46:37 +01:00
--color-compose-send-control-button: hsl(240deg 30% 70%);
--color-compose-send-control-button-background: transparent;
--color-compose-send-control-button-interactive: var(
--color-compose-send-control-button
compose_box: Implement redesigned vdots-button styles.
2023-11-02 19:07:32 +01:00
);
compose_box: Rename message-control-button to send-control-button.
2023-11-14 15:46:37 +01:00
--color-compose-send-control-button-background-interactive: hsl(
compose_box: Implement redesigned vdots-button styles.
2023-11-02 19:07:32 +01:00
235deg 100% 70% / 11%
);
compose_box: Rename message-control-button to send-control-button.
2023-11-14 15:46:37 +01:00
--color-compose-send-control-button-focus-shadow: var(
compose_box: Implement redesigned vdots-button styles.
2023-11-02 19:07:32 +01:00
--color-compose-send-button-focus-shadow
);
compose: Present Start new topic button adjacent the reply button. Fixes: #24889. Co-Authored-By: Daniil Fadeev <shameondev@gmail.com>
2023-10-05 18:09:38 +02:00
--color-compose-collapsed-reply-button-area-background: hsl(
0deg 0% 0% / 20%
);
--color-compose-collapsed-reply-button-area-background-interactive: hsl(
0deg 0% 0% / 15%
);
--color-compose-collapsed-reply-button-area-border: hsl(0deg 0% 0% / 60%);
--color-compose-collapsed-reply-button-area-border-interactive: var(
--color-compose-collapsed-reply-button-area-border
);
--color-compose-embedded-button-text-color: hsl(231deg 30% 65%);
--color-compose-embedded-button-text-color-hover: hsl(231deg 30% 70%);
--color-compose-embedded-button-background: transparent;
--color-compose-embedded-button-background-hover: hsl(
235deg 100% 70% / 11%
);
css: Set tippy-arrow color same as background in light theme.
2023-11-23 08:53:22 +01:00
--color-background-popover: hsl(212deg 32% 14%);
compose: Present Start new topic button adjacent the reply button. Fixes: #24889. Co-Authored-By: Daniil Fadeev <shameondev@gmail.com>
2023-10-05 18:09:38 +02:00
css: Separate out text colors.
2023-05-12 12:20:12 +02:00
/* Text colors */
css: Use 75% white as default text color.
2023-05-13 08:28:23 +02:00
--color-text-default: hsl(0deg 0% 100% / 75%);
css: Explicitly set text-message color. This commit darkens the text-message color in the light theme to the HSL equivalent of a dark gray (#262626). This is the first time in the Zulip codebase where one CSS custom property is set to another: the dark theme preserves its use of `--color-text-default` in this way, but can be adjusted independently of the reset of the theme in the future by setting a different color value on `--color-text-message-default`. Related reading on this technique: https://css-tricks.com/a-complete-guide-to-custom-properties/#aa-properties-as-properties Fixes a part of #22022.
2023-06-08 16:25:14 +02:00
/* Unlike the light theme, the dark theme renders message
text in the default color. */
--color-text-message-default: var(--color-text-default);
css: Color tweaks.
2023-05-13 08:30:13 +02:00
--color-text-message-view-header: hsl(0deg 0% 100% / 80%);
--color-text-message-header: hsl(0deg 0% 100% / 80%);
--color-text-sender-name: hsl(0deg 0% 100% / 85%);
css: Separate out text colors.
2023-05-12 12:20:12 +02:00
--color-text-dropdown-input: hsl(0deg 0% 95%);
css: Change mention text and background colors.
2023-05-17 05:00:57 +02:00
--color-text-other-mention: hsl(0deg 0% 100% / 80%);
--color-text-self-direct-mention: hsl(240deg 100% 88% / 100%);
--color-text-self-group-mention: hsl(184deg 52% 63% / 100%);
UI redesign: more-less message interaction. This commit encompasses the following changes: * Replace the [More...] link with a button titled "Show more". * Replace the [Show Less...] link with a button titled "Show less". * Add various on-hover interactions to the buttons. * In the condensed view, add fading to the bottom of the message to visually communicate that the message is truncated. * Update /help/ description. Fixes #22801. Co-authored-by: Evy Kassirer <evy.kassirer@gmail.com>
2023-04-08 15:19:10 +02:00
--color-text-show-more-less-button: hsl(240deg 30% 65%);
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
--color-text-search: hsl(0deg 0% 100% / 75%);
--color-text-search-hover: hsl(0deg 0% 100%);
--color-text-search-placeholder: hsl(0deg 0% 100% / 50%);
personal_menu: Add tippy personal_menu dropdown. Add a personal menu dropdown that opens on clicking user avatar icon in navbar added in previous commit. The args passed to render_personal_menu() in onShow() are returned by get_personal_menu_content_context() in popover_menus_data.js so that they can be unit tested. Additionally, added CSS to get a custom arrow for dropdown menu. Added a `?` hotkey in keyboard shortcuts option in personal_menu dropdown in a style similar to our tooltip's hotkey by adding ? in a span with class .tooltip-hotkey-hint and adding some CSS. Fixes part of #22802.
2023-07-17 18:01:16 +02:00
--color-text-dropdown-menu: hsl(0deg 0% 100% / 80%);
--color-text-full-name: hsl(0deg 0% 100%);
--color-text-item: hsl(0deg 0% 50%);
personal_menu: Add different colors for status text.
2023-11-01 07:09:03 +01:00
--color-text-personal-menu-no-status: hsl(0deg 0% 100% 35%);
--color-text-personal-menu-some-status: hsl(0deg 0% 100% 50%);
sidebars: Express heading colors as CSS variables.
2023-11-08 19:21:17 +01:00
/* 75% opacity of --color-text-default against --color-background.
We use color-mix here to avoid defining a separate, compounding
`opacity` property, and also to preserve a record of the
relationship of the color of sidebar headings to other colors. */
--color-text-sidebar-heading: color-mix(
in srgb,
hsl(0deg 0% 75%) 75%,
hsl(0deg 0% 11%)
);
css: Separate mention pill colors.
2023-05-17 04:11:18 +02:00
bot_icon: Adjust bot-icon color for light and dark modes.
2023-06-16 19:31:01 +02:00
/* Icon colors */
--color-icon-bot: hsl(180deg 5% 50% / 100%);
icons: Implement monochrome colors and scaled active state.
2023-07-17 22:35:29 +02:00
--color-message-action-visible: hsl(217deg 41% 90% / 50%);
--color-message-action-interactive: hsl(217deg 41% 90% / 100%);
left_sidebar: Refactor left_sidebar.hbs structures for readability. This commit renames the classes and IDs in the views area (formerly global filters) to a set of flexible values all prefixed in some way with `left-sidebar-navigation`. This is meant to make the styles and structures in the area more readable, while also keeping things flexible into the future as this area's elements change. Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
2023-10-10 21:00:28 +02:00
--color-left-sidebar-navigation-icon: hsl(0deg 0% 100% / 56%);
vdots: Simplify colors in streamlined selectors on left sidebar. This expresses the colors for vdots icons in just three variations, all as CSS variables. The colors are all derived from the existing design, and the dots colors in the streams/topics area was used as as reference. The only visual change here, then, is to the global filters area, whose vdots were the outliers prior to this change. The three variations are: 1. hint: for touchscreens where a :hover state is not available 2. visible: for all screens when a parent element is highlighted 3. hover: for when the vdots themselves are hovered The selectors have been streamlined to use the .sidebar-menu-icon utility class, and the hover-within-a-hover color on vdots is expressed more directly, eliminating the need for selector-specificity busting via !important. Fixes: #20600
2023-09-15 18:29:22 +02:00
--color-vdots-hint: hsl(0deg 0% 100% / 30%);
--color-vdots-visible: hsl(236deg 33% 80%);
--color-vdots-hover: hsl(0deg 0% 100%);
left_sidebar: Add a 3-dot menu to condensed views. Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
2023-10-16 21:21:44 +02:00
--color-left-sidebar-header-vdots-visible: var(
--color-left-sidebar-navigation-icon
);
css: Use CSS variables for the color values of tab-picker. Use CSS variables for the color values of left sidebar topic popover, tab-picker widget to change the visibility policy.
2023-10-16 18:01:34 +02:00
--color-tab-picker-icon: hsl(0deg 0% 80%);
bot_icon: Adjust bot-icon color for light and dark modes.
2023-06-16 19:31:01 +02:00
reactions: Unify stream and DM colors, express as CSS vars.
2023-08-25 17:32:19 +02:00
/* Reaction container colors */
reactions: Redesign reaction button colors and style. See CZO discussion: https://chat.zulip.org/#narrow/stream/9-issues/topic/Reactions.20background.20color/near/1632171 Also: https://github.com/zulip/zulip/pull/26580#issuecomment-1705734770 Co-Authored-By: Vlad Korobov <terpimost@gmail.com>
2023-08-28 18:27:46 +02:00
--color-message-reaction-border: hsl(0deg 0% 100% / 15%);
--color-message-reaction-border-reacted: hsl(0deg 0% 100% / 50%);
--color-message-reaction-background: hsl(0deg 0% 0% / 30%);
--color-message-reaction-background-reacted: hsl(0deg 0% 0% / 80%);
--color-message-reaction-background-hover: hsl(0deg 0% 100% / 10%);
/* No shadow in dark mode. */
--color-message-reaction-shadow-inner: transparent;
--color-message-reaction-text: hsl(0deg 0% 100% / 75%);
--color-message-reaction-text-reacted: hsl(0deg 0% 100% / 85%);
--color-message-reaction-button-text: var(--color-message-reaction-text);
--color-message-reaction-button-text-hover: var(
--color-message-reaction-text-reacted
reactions: Express reaction button colors as CSS vars.
2023-08-25 17:58:20 +02:00
);
reactions: Redesign reaction button colors and style. See CZO discussion: https://chat.zulip.org/#narrow/stream/9-issues/topic/Reactions.20background.20color/near/1632171 Also: https://github.com/zulip/zulip/pull/26580#issuecomment-1705734770 Co-Authored-By: Vlad Korobov <terpimost@gmail.com>
2023-08-28 18:27:46 +02:00
--color-message-reaction-button-background: inherit;
reactions: Express reaction button colors as CSS vars.
2023-08-25 17:58:20 +02:00
--color-message-reaction-button-background-hover: var(
reactions: Redesign reaction button colors and style. See CZO discussion: https://chat.zulip.org/#narrow/stream/9-issues/topic/Reactions.20background.20color/near/1632171 Also: https://github.com/zulip/zulip/pull/26580#issuecomment-1705734770 Co-Authored-By: Vlad Korobov <terpimost@gmail.com>
2023-08-28 18:27:46 +02:00
--color-message-reaction-background-hover
reactions: Express reaction button colors as CSS vars.
2023-08-25 17:58:20 +02:00
);
reactions: Redesign reaction button colors and style. See CZO discussion: https://chat.zulip.org/#narrow/stream/9-issues/topic/Reactions.20background.20color/near/1632171 Also: https://github.com/zulip/zulip/pull/26580#issuecomment-1705734770 Co-Authored-By: Vlad Korobov <terpimost@gmail.com>
2023-08-28 18:27:46 +02:00
--color-message-reaction-button-border: transparent;
reactions: Express reaction button colors as CSS vars.
2023-08-25 17:58:20 +02:00
--color-message-reaction-button-border-hover: var(
reactions: Redesign reaction button colors and style. See CZO discussion: https://chat.zulip.org/#narrow/stream/9-issues/topic/Reactions.20background.20color/near/1632171 Also: https://github.com/zulip/zulip/pull/26580#issuecomment-1705734770 Co-Authored-By: Vlad Korobov <terpimost@gmail.com>
2023-08-28 18:27:46 +02:00
--color-message-reaction-border
reactions: Express reaction button colors as CSS vars.
2023-08-25 17:58:20 +02:00
);
reactions: Redesign reaction button colors and style. See CZO discussion: https://chat.zulip.org/#narrow/stream/9-issues/topic/Reactions.20background.20color/near/1632171 Also: https://github.com/zulip/zulip/pull/26580#issuecomment-1705734770 Co-Authored-By: Vlad Korobov <terpimost@gmail.com>
2023-08-28 18:27:46 +02:00
--font-weight-message-reaction: 550;
reactions: Unify stream and DM colors, express as CSS vars.
2023-08-25 17:32:19 +02:00
css: Fix prettier error and reorganize some colors.
2023-07-25 03:06:25 +02:00
/* Message feed loading indicator colors */
--color-zulip-logo: hsl(0deg 0% 100% / 50%);
--color-zulip-logo-loading: hsl(0deg 0% 100%);
recent view: Add button to fetch more conversations. We add a new timerender format for this context, where there's plenty of space. Fixes: #18461
2023-10-04 19:07:01 +02:00
--color-recent-view-loading-spinner: hsl(0deg 0% 100% / 60%);
css: Fix prettier error and reorganize some colors.
2023-07-25 03:06:25 +02:00
--color-zulip-logo-z: hsl(214deg 27% 18%);
/* Message collapsing/condensing button colors */
--color-show-more-less-button-background: hsla(240deg 44% 56% / 15%);
--color-show-more-less-button-background-hover: hsl(240deg 44% 56% / 25%);
--color-show-more-less-button-background-active: hsl(240deg 44% 56% / 15%);
css: Separate mention pill colors.
2023-05-17 04:11:18 +02:00
/* Mention pill colors */
--color-background-direct-mention: hsl(240deg 13% 20%);
--color-background-group-mention: hsl(180deg 13% 15%);
css: Change mention text and background colors.
2023-05-17 05:00:57 +02:00
--color-background-text-direct-mention: hsl(240deg 52% 60% / 25%);
--color-background-text-hover-direct-mention: hsl(240deg 52% 60% / 45%);
--color-background-text-group-mention: hsl(183deg 52% 40% / 20%);
--color-background-text-hover-group-mention: hsl(183deg 52% 40% / 30%);
inbox: Add new narrow.
2023-08-09 07:23:30 +02:00
/* Inbox view */
inbox: Use app background color. Search input still has the same background color.
2023-10-17 07:26:38 +02:00
--color-background-inbox: var(--color-background);
inbox: Improve look of empty inbox view.
2023-10-20 13:09:34 +02:00
--color-background-inbox-no-unreads-illustration: hsl(147deg 40% 55%);
inbox: Change hover / focus styles of search box. This is to make search box less noticeable when focus is given / taken away from it.
2023-10-05 14:26:45 +02:00
--color-icon-search-inbox: hsl(0deg 0% 100%);
--color-inbox-search-text: hsl(0deg 0% 95%);
--color-border-inbox-search: hsl(0deg 0% 100% / 20%);
--color-border-inbox-search-hover: hsl(0deg 0% 100% / 40%);
inbox: Use app background color. Search input still has the same background color.
2023-10-17 07:26:38 +02:00
--color-background-inbox-search: hsl(225deg 6% 10%);
inbox: Change hover / focus styles of search box. This is to make search box less noticeable when focus is given / taken away from it.
2023-10-05 14:26:45 +02:00
--color-background-inbox-search-hover: hsl(225deg 6% 8%);
--color-background-inbox-search-focus: hsl(225deg 6% 7%);
--color-border-inbox-search-focus: hsl(0deg 0% 100% / 50%);
--color-box-shadow-inbox-search-focus: hsl(0deg 0% 100% / 40%);
inbox: Add new narrow.
2023-08-09 07:23:30 +02:00
--color-background-inbox-row: hsl(0deg 0% 14%);
--color-background-inbox-row-hover: linear-gradient(
0deg,
hsl(0deg 0% 100% / 5%) 0%,
hsl(0deg 0% 100% / 5%) 100%
),
hsl(0deg 0% 14.12%);
--color-background-btn-inbox-selected: hsl(0deg 0% 100% / 5%);
--color-background-btn-inbox-focus: hsl(0deg 0% 20%);
inbox: Add icon in search box to clear any text.
2023-10-05 15:22:07 +02:00
--color-icons-inbox: hsl(0deg 0% 100%);
--color-background-icon-close-hover: hsl(0deg 0% 100% / 5%);
css: Add box-shadow to navbar dropdown menu as per figma design.
2023-10-13 12:03:50 +02:00
/* Navbar dropdown menu constants - Values from Figma design */
--box-shadow-navbar-dropdown-menu: 0 2.78px 4.12px 0 hsl(0deg 0% 0% / 10%),
0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 9%),
0 8.4377px 13.9271px 0 hsl(0deg 0% 0% / 11%),
0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%),
0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%),
0 41px 80px 0 hsl(0deg 0% 0% / 20%);
gear_menu: Migrate to use tippy.
2023-10-13 12:51:35 +02:00
--color-navbar-icon: hsl(240deg 35% 60%);
--color-gear-menu-lighter-text: hsl(0deg 0% 50%);
--color-gear-menu-blue-text: hsl(217deg 100% 65%);
header-button: Add background effects to different states.
2023-10-19 19:23:10 +02:00
--color-header-button-hover: hsl(0deg 0% 100% / 4%);
navbar: Correct for alpha background on unread dot's border. This is a case where the use of alpha channels in HSL color values shows its limits. The use of an alpha channel is necessary for the background elements for the top navbar elements, because they sit over the top of the navbar's bottom border (actually an inset shaddow). However, it's impossible to use the alpha-channel based color on elements like the unread dot, where the border actually sits on top of the element itself--meaning that the effect would be a larger dot with an imperceptibly darker ring around it. What this commit does is use a technique suggested by Anders Kaseorg for using CSS's `color-mix()` functional notation to calculate an opaque version of the alpha color for use on elements that do not or cannot directly take the color with the alpha channel. See CZO discussion: https://chat.zulip.org/#narrow/stream/6-frontend/topic/alphas.20in.20color.20definitions/near/1670102
2023-10-26 19:16:08 +02:00
/* The second color value aligns with
--color-background-navbar */
--color-header-button-hover-no-alpha: color-mix(
in srgb,
hsl(0deg 0% 100%) 4%,
hsl(0deg 0% 13%)
);
header-button: Add background effects to different states.
2023-10-19 19:23:10 +02:00
--color-header-button-focus: hsl(0deg 0% 100% / 7%);
navbar: Correct for alpha background on unread dot's border. This is a case where the use of alpha channels in HSL color values shows its limits. The use of an alpha channel is necessary for the background elements for the top navbar elements, because they sit over the top of the navbar's bottom border (actually an inset shaddow). However, it's impossible to use the alpha-channel based color on elements like the unread dot, where the border actually sits on top of the element itself--meaning that the effect would be a larger dot with an imperceptibly darker ring around it. What this commit does is use a technique suggested by Anders Kaseorg for using CSS's `color-mix()` functional notation to calculate an opaque version of the alpha color for use on elements that do not or cannot directly take the color with the alpha channel. See CZO discussion: https://chat.zulip.org/#narrow/stream/6-frontend/topic/alphas.20in.20color.20definitions/near/1670102
2023-10-26 19:16:08 +02:00
/* The second color value aligns with
--color-background-navbar */
--color-header-button-focus-no-alpha: color-mix(
in srgb,
hsl(0deg 0% 100%) 7%,
hsl(0deg 0% 13%)
);
css: Fix dark theme hover color for copy invite link. Extracted colors into variables and used them inside the id to solve the specificity issue.
2023-10-22 14:23:15 +02:00
--color-fill-user-invite-copy-icon: hsl(236deg 33% 90%);
settings-ui: Change `<select>` style using custom chevron-down icon. Align the `dropdown-widget` and `<select>` UIs. Removed default `<select>` tag styles with `appearance: none` css. Added custom chevron-down icon with `background-image` attribute to the `<select>` tag. The svg icon is used in a CSS variable with a data URI. The CSS variable is used to set different colors for dark and light theme. Tweaked by tabbott to scope selectors appropriately and also delete a 10px font-size in one settings dropdown widget. Fixes #26859.
2023-11-06 10:45:30 +01:00
--icon-chevron-down: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z' fill='%23FFFFFFBF'/%3E%3C/svg%3E%0A");
modal_buttons: Make exit button colors in to CSS variables.
2023-11-15 00:08:18 +01:00
/* Button colors on modals and message editing. */
--color-exit-button-text: hsl(0deg 0% 100%);
--color-exit-button-border: hsl(0deg 0% 0% / 60%);
--color-exit-button-background: hsl(211deg 29% 14%);
--color-exit-button-background-interactive: hsl(211deg 29% 17%);
css: Use variables for colors used to display message time. This makes color changes easy to review and maintain in the codebase. This is also an attempt towards removing dark_theme.css as we will only need to override color variables for these elements in `body.dark-theme` in zulip.css without need of overriding colors for any specific elements.
2022-08-04 14:13:31 +02:00
}
css: Isolate dark theme to screen only. The primary motivation for this change is to default to the light theme when printing.
2023-07-28 16:34:01 +02:00
@media screen {
:root.dark-theme {
@extend %dark-theme;
}
styles: Fix dark-theme mixin in zulip.css. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-06 03:45:31 +01:00
}
css: Isolate dark theme to screen only. The primary motivation for this change is to default to the light theme when printing.
2023-07-28 16:34:01 +02:00
@media screen and (prefers-color-scheme: dark) {
css: Use variables for colors used to display message time. This makes color changes easy to review and maintain in the codebase. This is also an attempt towards removing dark_theme.css as we will only need to override color variables for these elements in `body.dark-theme` in zulip.css without need of overriding colors for any specific elements.
2022-08-04 14:13:31 +02:00
:root.color-scheme-automatic {
styles: Fix dark-theme mixin in zulip.css. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-06 03:45:31 +01:00
@extend %dark-theme;
css: Use variables for colors used to display message time. This makes color changes easy to review and maintain in the codebase. This is also an attempt towards removing dark_theme.css as we will only need to override color variables for these elements in `body.dark-theme` in zulip.css without need of overriding colors for any specific elements.
2022-08-04 14:13:31 +02:00
}
dark_theme: Declare color-scheme CSS property. This allows the browser to select a more appropriate color for the browser scrollbars, for example. https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-11-25 22:06:11 +01:00
}
Fix code format for CSS selectors with commas. This change basically does s/,<space>/,<cr>/. (imported from commit 4ab295d0dbc24de6baa29908c2d6a469f35492f3)
2013-08-23 07:31:38 +02:00
input,
button,
select,
textarea {
css: Use variable font when using Source Sans 3. This is to overcome the limitations of previous static font, which didn't allow us to use various font widths.
2023-03-27 12:47:59 +02:00
font-family: "Source Sans 3 VF", sans-serif;
css: Use default font size for buttons and dropdowns.
2021-06-12 01:13:12 +02:00
/* Disable bootstrap size CSS; we want to use our default font size on
body for input elements. */
Switched to Source Sans Pro as the base font for the app and made a number of other cosmetic changes. What changed: * Vector icons swapped in for the left sidebar buttons and filters * Lighter font weight in the stream filters list * Round color swatches in the stream filters list, with an inner shadow * Tighter line height in the individual messages in the message pane * Fixed button widths in the left sidebar (so the buttons are equal in width) (imported from commit 337dc4a3d8e29945cfc8cfb9524ac76a7b038ad8)
2013-05-07 19:32:12 +02:00
line-height: normal;
css: Use default font size for buttons and dropdowns.
2021-06-12 01:13:12 +02:00
font-size: inherit;
Switched to Source Sans Pro as the base font for the app and made a number of other cosmetic changes. What changed: * Vector icons swapped in for the left sidebar buttons and filters * Lighter font weight in the stream filters list * Round color swatches in the stream filters list, with an inner shadow * Tighter line height in the individual messages in the message pane * Fixed button widths in the left sidebar (so the buttons are equal in width) (imported from commit 337dc4a3d8e29945cfc8cfb9524ac76a7b038ad8)
2013-05-07 19:32:12 +02:00
}
Update Source Sans to include all available glyphs, and fix the block quote thin font issue. (imported from commit c9c82268ac08d3b603021b35c1075118a02b06eb)
2013-05-14 21:11:22 +02:00
blockquote p {
font-weight: normal;
}
Make all "a"s have cursor: pointer by default. In specific, this solves the problem of the links in the stream "right-click menu" not having the little hand icon, uncovered in our last usability study. But even better, it also sets a more sane default -- if you're an "a" and you *don't* want the hand, you have to explicitly remove it. (imported from commit 38c0b42f3b7fd5b2b3dff99e8c4c4a2e8aa62833)
2013-06-05 22:43:07 +02:00
a {
cursor: pointer;
css: Use SCSS nesting in zulip.scss for `a`.
2020-05-19 12:09:07 +02:00
&.message_label_clickable:hover {
cursor: pointer;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(200deg 100% 40%);
css: Use SCSS nesting in zulip.scss for `a`.
2020-05-19 12:09:07 +02:00
}
css: Reorder zulip.scss to put `a` alongside.
2020-05-19 12:08:23 +02:00
}
css: Don't use `Monaco` font for <code>. bootstrap sets <code> to use `Monaco` font by default. We don't want to use this font since some characters are not clearly readable like `()` appearing as `0`. Hence, we use Menlo font by default if available. Since `Monaco` font is only installed in macOS by default, this mostly affected mac users.
2020-09-18 20:00:21 +02:00
code,
pre {
styles: Use Source Code Pro as our monospace font. Fixes #15993. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-03 04:01:40 +02:00
font-family: "Source Code Pro", monospace;
css: Don't use `Monaco` font for <code>. bootstrap sets <code> to use `Monaco` font by default. We don't want to use this font since some characters are not clearly readable like `()` appearing as `0`. Hence, we use Menlo font by default if available. Since `Monaco` font is only installed in macOS by default, this mostly affected mac users.
2020-09-18 20:00:21 +02:00
}
hotkeys: Add lightbox image feed with controls. This adds an image feed that you can scroll through with hotkeys in the lightbox. The left and right arrow keys along with the left and right arrows will go to the prev/next image, and clicking on an image will also take a user to that image.
2017-03-19 01:51:20 +01:00
.no-select {
styles: Replace Sass with PostCSS. It’s about as fast as node-sass (faster, according to their benchmarks) and more flexible. Autoprefixer is neat: we can now go delete all our -moz-, -webkit-, etc. lines and have them autogenerated as necessary based on .browserslistrc. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-08-27 01:23:48 +02:00
user-select: none;
hotkeys: Add lightbox image feed with controls. This adds an image feed that you can scroll through with hotkeys in the lightbox. The left and right arrow keys along with the left and right arrows will go to the prev/next image, and clicking on an image will also take a user to that image.
2017-03-19 01:51:20 +01:00
}
css: Allow the bot API key to be selected on all browsers. The problem that prompted this PR is that I couldn't select the API key of a bot in chrome to copy it, but I could on Firefox. Using the `auto` proerty value to override the `user-select` property of a parent does not seem to be compatible with all browsers.
2018-01-11 11:19:32 +01:00
.text-select {
styles: Replace Sass with PostCSS. It’s about as fast as node-sass (faster, according to their benchmarks) and more flexible. Autoprefixer is neat: we can now go delete all our -moz-, -webkit-, etc. lines and have them autogenerated as necessary based on .browserslistrc. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-08-27 01:23:48 +02:00
user-select: text;
css: Allow the bot API key to be selected on all browsers. The problem that prompted this PR is that I couldn't select the API key of a bot in chrome to copy it, but I could on Firefox. Using the `auto` proerty value to override the `user-select` property of a parent does not seem to be compatible with all browsers.
2018-01-11 11:19:32 +01:00
}
Add notification for muting with unmute option. This adds a support a notification at the top of the screen that alerts a user they’ve muted a stream and gives them the option to unmute if it was an accident. The notification disappears automatically after 4s, but if a user moves their mouse over the notification, the timer resets to 2s after the user moves their mouse off the notification, to make it easy for users to read the full message and decide what to do.
2016-08-27 01:47:30 +02:00
p.n-margin {
styles: Fix shorthand-property-no-redundant-values. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-11-05 03:33:16 +01:00
margin: 10px 0 0;
Add notification for muting with unmute option. This adds a support a notification at the top of the screen that alerts a user they’ve muted a stream and gives them the option to unmute if it was an accident. The notification disappears automatically after 4s, but if a user moves their mouse over the notification, the timer resets to 2s after the user moves their mouse off the notification, to make it easy for users to read the full message and decide what to do.
2016-08-27 01:47:30 +02:00
}
.small-line-height {
line-height: 1.1;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-clear {
clear: both;
}
.no-margin {
margin: 0;
}
messages: Show banner when message history is limited. This communicates to users clearly about the situation when the history_limited flag is set by the backend (because message history was cutoff).
2018-10-01 20:27:22 +02:00
.history-limited-box {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(16deg 60% 45%);
border: 1px solid hsl(16deg 60% 45%);
box-shadow: 0 0 2px hsl(16deg 60% 45%);
search: Advertise the ability to search shared history. When a user performs a search that might contain historical public streams messages that the user has access to (but doesn't because we're searching the user's own personal history), we add a notice above the first search result to let the user know that not all messages may have been searched. Fixes #12036.
2019-08-13 21:03:48 +02:00
}
.all-messages-search-caution {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border: 1px solid hsl(192deg 19% 75% / 20%);
box-shadow: 0 0 2px hsl(192deg 19% 75% / 20%);
search: Advertise the ability to search shared history. When a user performs a search that might contain historical public streams messages that the user has access to (but doesn't because we're searching the user's own personal history), we add a notice above the first search result to let the user know that not all messages may have been searched. Fixes #12036.
2019-08-13 21:03:48 +02:00
}
.history-limited-box,
.all-messages-search-caution {
border-radius: 4px;
messages: Show banner when message history is limited. This communicates to users clearly about the situation when the history_limited flag is set by the backend (because message history was cutoff).
2018-10-01 20:27:22 +02:00
display: none;
font-size: 16px;
margin: 0 auto 12px;
padding: 5px;
css: Visual fixes to message feed notice. Fixes #23273 Removed height restriction to allow the box to grow when text wraps to the next line. Aligned wrapped lines to the text in the first line instead of the icon.
2022-10-29 05:42:47 +02:00
/* Difference should be 16px to accommodate the icon. */
/* This emulates hanging indent. */
padding-left: 26px;
text-indent: -10px;
styles: Fix stylelint rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-16 21:57:26 +02:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& i {
message visibility: Make stylistic improvements to history-limited-box.
2018-12-14 01:45:32 +01:00
margin: 0 3px 0 1px;
}
styles: Fix stylelint rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-16 21:57:26 +02:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& p {
messages: Show banner when message history is limited. This communicates to users clearly about the situation when the history_limited flag is set by the backend (because message history was cutoff).
2018-10-01 20:27:22 +02:00
margin: 0;
message visibility: Make stylistic improvements to history-limited-box.
2018-12-14 01:45:32 +01:00
padding: 4px;
messages: Show banner when message history is limited. This communicates to users clearly about the situation when the history_limited flag is set by the backend (because message history was cutoff).
2018-10-01 20:27:22 +02:00
}
}
message view: Show indicator while fetching new messages. We already have a loading indicator for fetching older messages. Thus it makes sense to implement the same for displaying newer messages. We set the display of `bottom-messages-logo` to none, to prevent displaying two loading indicators during the initial message load. Fixes #15060.
2020-05-26 16:27:06 +02:00
.bottom-messages-logo {
display: none;
}
unread_ops: Let server do the mark as unread for us. Previous algorithm was not correct if we didn't have full data for the current narrow loaded from the server. #23512 adds the support to mark messages in a narrow unread after a give message_id. Added a new alert banner to indicate loading and success states of an ongoing request. This is useful when requests can take a long time to complete.
2022-11-16 10:50:35 +01:00
.alert-zulip-logo,
message view: Show indicator while fetching new messages. We already have a loading indicator for fetching older messages. Thus it makes sense to implement the same for displaying newer messages. We set the display of `bottom-messages-logo` to none, to prevent displaying two loading indicators during the initial message load. Fixes #15060.
2020-05-26 16:27:06 +02:00
.top-messages-logo,
.bottom-messages-logo {
Add logo to the top of the message feed. Add the Zulip logo to the top of the messages feed to show that there are no more messages to load, or that it is loading more (if the spinner is still around).
2017-01-05 22:22:21 +01:00
width: 24px;
height: 24px;
Position top-messages-logo statically. This should make no visible changes. Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2018-07-08 09:13:47 +02:00
margin: 0 auto 12px;
Add logo to the top of the message feed. Add the Zulip logo to the top of the messages feed to show that there are no more messages to load, or that it is loading more (if the spinner is still around).
2017-01-05 22:22:21 +01:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& svg {
& circle {
message feed: Change color of zulip logo at top of feed.
2023-06-29 19:56:21 +02:00
fill: var(--color-zulip-logo);
stroke: var(--color-zulip-logo);
css: Use SCSS nesting in zulip.scss for `.top-messages-logo`.
2020-05-16 12:25:29 +02:00
}
dark-mode: Refactor top-of-messages logo to have CSS styles. This changes the fill and stroke styles to be in CSS rather than inlined in the SVG, making it easier to change and override elsewhere.
2017-11-30 01:01:51 +01:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& path {
message feed: Change color of zulip logo at top of feed.
2023-06-29 19:56:21 +02:00
fill: var(--color-zulip-logo-z);
stroke: var(--color-zulip-logo-z);
css: Use SCSS nesting in zulip.scss for `.top-messages-logo`.
2020-05-16 12:25:29 +02:00
}
}
message feed: Change color of zulip logo at top of feed.
2023-06-29 19:56:21 +02:00
&.loading circle {
fill: var(--color-zulip-logo-loading);
stroke: var(--color-zulip-logo-loading);
}
dark-mode: Refactor top-of-messages logo to have CSS styles. This changes the fill and stroke styles to be in CSS rather than inlined in the SVG, making it easier to change and override elsewhere.
2017-11-30 01:01:51 +01:00
}
css: Move `10px` navbar bottom padding above message header. This is a more natural place for this extra padding than below the navbar. Padding below navbar was primarily needed to hide the message content above the sticky header while scrolling the message feed. We are still able to do with this change without partially hiding the loading message indicator. Fixes #25159
2023-04-28 18:07:06 +02:00
.top-messages-logo {
/* Since padding under message header is not transparent
we need to position it below the padding. */
padding-top: var(--header-padding-bottom);
margin-bottom: 0;
css: Fix loading spinner position for messages loading indicator.
2023-04-29 12:17:12 +02:00
/* To fit the logo inside the spinner. */
position: relative;
top: -2px;
css: Move `10px` navbar bottom padding above message header. This is a more natural place for this extra padding than below the navbar. Padding below navbar was primarily needed to hide the message content above the sticky header while scrolling the message feed. We are still able to do with this change without partially hiding the loading message indicator. Fixes #25159
2023-04-28 18:07:06 +02:00
}
feedback_widget: Don't use non-optimal animation properties. Animating `box-shadow` and `top` is slow since the browser drops frames when animating them. We can fix it by using `will-change` property but it is just better to not animate them and instead use transform.
2023-05-24 08:12:18 +02:00
/* See https://web.dev/animations-guide/#triggers before adding any funny animation properties here. */
@keyframes feedback-slide-in {
from {
transform: translateY(-120%);
opacity: 0;
}
to {
transform: translateY(50px);
opacity: 1;
}
}
@keyframes feedback-slide-out {
from {
transform: translateY(50px);
opacity: 1;
}
to {
transform: translateY(-120%);
opacity: 0;
}
}
muting: Use more generic markup for undo-mute popup. This makes everything generic except for the main message given to the user.
2018-12-20 19:48:37 +01:00
#feedback_container {
Add notification for muting with unmute option. This adds a support a notification at the top of the screen that alerts a user they’ve muted a stream and gives them the option to unmute if it was an accident. The notification disappears automatically after 4s, but if a user moves their mouse over the notification, the timer resets to 2s after the user moves their mouse off the notification, to make it easy for users to read the full message and decide what to do.
2016-08-27 01:47:30 +02:00
display: none;
feedback_widget: Don't use non-optimal animation properties. Animating `box-shadow` and `top` is slow since the browser drops frames when animating them. We can fix it by using `will-change` property but it is just better to not animate them and instead use transform.
2023-05-24 08:12:18 +02:00
position: fixed;
Add notification for muting with unmute option. This adds a support a notification at the top of the screen that alerts a user they’ve muted a stream and gives them the option to unmute if it was an accident. The notification disappears automatically after 4s, but if a user moves their mouse over the notification, the timer resets to 2s after the user moves their mouse off the notification, to make it easy for users to read the full message and decide what to do.
2016-08-27 01:47:30 +02:00
width: 400px;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
top: 0;
Add notification for muting with unmute option. This adds a support a notification at the top of the screen that alerts a user they’ve muted a stream and gives them the option to unmute if it was an accident. The notification disappears automatically after 4s, but if a user moves their mouse over the notification, the timer resets to 2s after the user moves their mouse off the notification, to make it easy for users to read the full message and decide what to do.
2016-08-27 01:47:30 +02:00
left: calc(50vw - 220px);
padding: 15px;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background-color: hsl(0deg 0% 98%);
Add notification for muting with unmute option. This adds a support a notification at the top of the screen that alerts a user they’ve muted a stream and gives them the option to unmute if it was an accident. The notification disappears automatically after 4s, but if a user moves their mouse over the notification, the timer resets to 2s after the user moves their mouse off the notification, to make it easy for users to read the full message and decide what to do.
2016-08-27 01:47:30 +02:00
border-radius: 5px;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
box-shadow: 0 0 30px hsl(0deg 0% 0% / 25%);
lightbox: Fix Z-Index for Proper Ordering. This fixes the z-index of the lightbox overlay, which previously appeared behind the header, and the muting notification to be above everything else on the page.
2016-10-28 22:50:56 +02:00
z-index: 110;
Add notification for muting with unmute option. This adds a support a notification at the top of the screen that alerts a user they’ve muted a stream and gives them the option to unmute if it was an accident. The notification disappears automatically after 4s, but if a user moves their mouse over the notification, the timer resets to 2s after the user moves their mouse off the notification, to make it easy for users to read the full message and decide what to do.
2016-08-27 01:47:30 +02:00
feedback_widget: Don't use non-optimal animation properties. Animating `box-shadow` and `top` is slow since the browser drops frames when animating them. We can fix it by using `will-change` property but it is just better to not animate them and instead use transform.
2023-05-24 08:12:18 +02:00
&.show-feedback-container {
display: block;
animation: feedback-slide-in 0.6s forwards;
}
Add notification for muting with unmute option. This adds a support a notification at the top of the screen that alerts a user they’ve muted a stream and gives them the option to unmute if it was an accident. The notification disappears automatically after 4s, but if a user moves their mouse over the notification, the timer resets to 2s after the user moves their mouse off the notification, to make it easy for users to read the full message and decide what to do.
2016-08-27 01:47:30 +02:00
feedback_widget: Don't use non-optimal animation properties. Animating `box-shadow` and `top` is slow since the browser drops frames when animating them. We can fix it by using `will-change` property but it is just better to not animate them and instead use transform.
2023-05-24 08:12:18 +02:00
&.slide-out-feedback-container {
animation: feedback-slide-out 0.6s;
css: Use SCSS nesting in zulip.scss for `#feedback_container`.
2020-05-16 12:28:05 +02:00
}
Add notification for muting with unmute option. This adds a support a notification at the top of the screen that alerts a user they’ve muted a stream and gives them the option to unmute if it was an accident. The notification disappears automatically after 4s, but if a user moves their mouse over the notification, the timer resets to 2s after the user moves their mouse off the notification, to make it easy for users to read the full message and decide what to do.
2016-08-27 01:47:30 +02:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& h3 {
css: Use SCSS nesting in zulip.scss for `#feedback_container`.
2020-05-16 12:28:05 +02:00
font-size: 16pt;
margin-top: 2px;
}
Add notification for muting with unmute option. This adds a support a notification at the top of the screen that alerts a user they’ve muted a stream and gives them the option to unmute if it was an accident. The notification disappears automatically after 4s, but if a user moves their mouse over the notification, the timer resets to 2s after the user moves their mouse off the notification, to make it easy for users to read the full message and decide what to do.
2016-08-27 01:47:30 +02:00
css: Use SCSS nesting in zulip.scss for `#feedback_container`.
2020-05-16 12:28:05 +02:00
.exit-me {
UI: Fix x button alignment in feedback widget.
2021-07-31 23:44:26 +02:00
font-size: 20pt;
css: Use SCSS nesting in zulip.scss for `#feedback_container`.
2020-05-16 12:28:05 +02:00
font-weight: 200;
UI: Fix x button alignment in feedback widget.
2021-07-31 23:44:26 +02:00
margin: 0 0 0 10px;
css: Use SCSS nesting in zulip.scss for `#feedback_container`.
2020-05-16 12:28:05 +02:00
cursor: pointer;
}
css: Reorder zulip.scss to put `#feeback_container` alongside.
2020-05-16 12:31:55 +02:00
}
message-edit: Fade in message on update. When a message update comes back from the server and replaces an old message, it should fade in. There are two components to the fade: 1. The message fades in from opacity: 0 => 1. 2. The "edited" text will transform from X: -10 => X: 0.
2017-04-13 22:33:26 +02:00
.fade-in-message {
animation-name: fadeInMessage;
animation-duration: 1s;
animation-iteration-count: 1;
css: Use SCSS nesting in zulip.scss for `.fade-in-message`.
2020-05-16 12:43:31 +02:00
.message_edit_notice {
animation-name: fadeInEditNotice;
animation-duration: 1s;
animation-iteration-count: 1;
}
message-edit: Fade in message on update. When a message update comes back from the server and replaces an old message, it should fade in. There are two components to the fade: 1. The message fades in from opacity: 0 => 1. 2. The "edited" text will transform from X: -10 => X: 0.
2017-04-13 22:33:26 +02:00
}
message_view: Show edit history when EDITED notice is clicked. Open the edit history of a message when a user clicks on it's EDITED notice. Also, added on-hover darkening for the EDITED notice. Resolves #12615.
2019-08-04 19:38:28 +02:00
.message_edit_notice_hover:hover {
styles: Format CSS with Prettier. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-04 23:58:56 +02:00
opacity: 1;
message_view: Show edit history when EDITED notice is clicked. Open the edit history of a message when a user clicks on it's EDITED notice. Also, added on-hover darkening for the EDITED notice. Resolves #12615.
2019-08-04 19:38:28 +02:00
}
css: Scroll on `html` instead of `.app`.
2023-05-20 16:30:21 +02:00
#navbar-fixed-container {
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
position: fixed;
css: Scroll on `html` instead of `.app`.
2023-05-20 16:30:21 +02:00
top: 0;
z-index: 102;
overlays: Stop document from occupying the extra scrollbar width. When overlay / modal is displayed, scrollbar is hidden due to the disabled scrolling on `html`. Reduce width of fixed elements that will be visible in background and `html` so that they don't occupy that extra space. Also, I was over-thinking how we can get the scrollbar width. The moment we allowed scrolling on `html`, it was easy to get the scrollbar width.
2023-05-27 18:36:43 +02:00
}
/* Adjust width of any fixed / absolute positioned elements that might be visible in
the background when a overlay / modal is open. */
#navbar-fixed-container,
#compose {
width: calc(100% - var(--disabled-scrollbar-width));
css: Scroll on `html` instead of `.app`.
2023-05-20 16:30:21 +02:00
}
.header {
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
width: 100%;
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
height: var(--header-height);
floating_recipient_bar: Replace with sticky header.
2022-12-19 09:16:05 +01:00
/* Since the headers are sticky, we need non-transparent background. */
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
background-color: var(--color-background);
css: Fix gap between header and sticky header at some zoom level.
2023-05-17 07:40:15 +02:00
/* Add 1px box-shadow below header so that if there is a gap between sticky header
and header at some zoom level, it is covered by this */
box-shadow: 0 1px 0 0 var(--color-background);
css: Add explicit padding below the navbar. We have always intended to have 10px of whitespace below the navbar, and this enforces it directly and explicitly in the CSS. Note that the three major panels still should have a margin of 50px, which is equal to the safe outer height of the header (40px + 10px).
2019-02-07 23:36:08 +01:00
}
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
#navbar-middle .column-middle-inner,
navbar: Fix regression where navbar didn't extend all the way. Followup to d0c1668399fd773bef7b569069dc2146e3c79a8a
2023-06-14 07:49:16 +02:00
.header,
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
#message_view_header {
background-color: var(--color-background-navbar);
box-shadow: inset 0 -1px 0 var(--color-navbar-bottom-border);
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
}
refactor: Rename `panels.js` to `navbar_alerts.js` as it better explains it.
2021-05-17 10:01:02 +02:00
#navbar_alerts_wrapper {
notifications: Prompt user to enable desktop notifications. This is a two-step notifications process that will ask a user to enable notifications and if they click exit give them three options: 1. Enable notifications. 2. Ask later. 3. Never ask on this computer again. The first two are self-explanatory (ask later = next session it asks again). The third is captured and stored in localStorage and a check is done on page load to see whether or not notifications should be displayed. Commit modified heavily by Brock Whittaker <brock@zulipchat.com>. Fixes #1189.
2017-09-23 11:27:18 +02:00
font-size: 1rem;
navbar_alerts: Fix close button position. Fixes the position of close button in navbar alerts which seemed to be shifted towards the bottom and wasn't visible completely.
2020-08-25 10:02:47 +02:00
position: relative;
notifications: Prompt user to enable desktop notifications. This is a two-step notifications process that will ask a user to enable notifications and if they click exit give them three options: 1. Enable notifications. 2. Ask later. 3. Never ask on this computer again. The first two are self-explanatory (ask later = next session it asks again). The third is captured and stored in localStorage and a check is done on page load to see whether or not notifications should be displayed. Commit modified heavily by Brock Whittaker <brock@zulipchat.com>. Fixes #1189.
2017-09-23 11:27:18 +02:00
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
.alert {
navbar_alerts: Replace HTML template with handlebars architecture. This moves this block of HTML templates, which are dynamically rendered with some user data, to be managed by the frontend handlebars template system. This migration involves only displaying active alerts in the DOM, and thus we no longer need navbar_alerts to have display: none by default.
2021-06-05 11:16:17 +02:00
/* Since alerts are only rendered into the DOM when they are first
displayed, display: block is the right default for this setting. */
display: block;
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
margin: 0;
padding-top: 12px;
padding-bottom: 12px;
notifications: Prompt user to enable desktop notifications. This is a two-step notifications process that will ask a user to enable notifications and if they click exit give them three options: 1. Enable notifications. 2. Ask later. 3. Never ask on this computer again. The first two are self-explanatory (ask later = next session it asks again). The third is captured and stored in localStorage and a check is done on page load to see whether or not notifications should be displayed. Commit modified heavily by Brock Whittaker <brock@zulipchat.com>. Fixes #1189.
2017-09-23 11:27:18 +02:00
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
border: none;
border-radius: 0;
notifications: Prompt user to enable desktop notifications. This is a two-step notifications process that will ask a user to enable notifications and if they click exit give them three options: 1. Enable notifications. 2. Ask later. 3. Never ask on this computer again. The first two are self-explanatory (ask later = next session it asks again). The third is captured and stored in localStorage and a check is done on page load to see whether or not notifications should be displayed. Commit modified heavily by Brock Whittaker <brock@zulipchat.com>. Fixes #1189.
2017-09-23 11:27:18 +02:00
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
text-align: center;
text-shadow: none;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 100%);
notifications: Prompt user to enable desktop notifications. This is a two-step notifications process that will ask a user to enable notifications and if they click exit give them three options: 1. Enable notifications. 2. Ask later. 3. Never ask on this computer again. The first two are self-explanatory (ask later = next session it asks again). The third is captured and stored in localStorage and a check is done on page load to see whether or not notifications should be displayed. Commit modified heavily by Brock Whittaker <brock@zulipchat.com>. Fixes #1189.
2017-09-23 11:27:18 +02:00
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
&.alert-info {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background-color: hsl(170deg 46% 54%);
notifications: Prompt user to enable desktop notifications. This is a two-step notifications process that will ask a user to enable notifications and if they click exit give them three options: 1. Enable notifications. 2. Ask later. 3. Never ask on this computer again. The first two are self-explanatory (ask later = next session it asks again). The third is captured and stored in localStorage and a check is done on page load to see whether or not notifications should be displayed. Commit modified heavily by Brock Whittaker <brock@zulipchat.com>. Fixes #1189.
2017-09-23 11:27:18 +02:00
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
&.red {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background-color: hsl(0deg 46% 54%);
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
}
}
panels: Give admins a red warning banner when email isn't configured. Also refactor the "panels"/banner code to be a bit clearer about how it's supposed to generically work, using [data-process] as a uniquely identifying marker. Fixes: #8166. [greg: rebased and squashed a series of fixup commits.]
2018-01-26 22:10:30 +01:00
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
.close {
line-height: 24px;
navbar_alerts: Fix close button position. Fixes the position of close button in navbar alerts which seemed to be shifted towards the bottom and wasn't visible completely.
2020-08-25 10:02:47 +02:00
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
}
notifications: Prompt user to enable desktop notifications. This is a two-step notifications process that will ask a user to enable notifications and if they click exit give them three options: 1. Enable notifications. 2. Ask later. 3. Never ask on this computer again. The first two are self-explanatory (ask later = next session it asks again). The third is captured and stored in localStorage and a check is done on page load to see whether or not notifications should be displayed. Commit modified heavily by Brock Whittaker <brock@zulipchat.com>. Fixes #1189.
2017-09-23 11:27:18 +02:00
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
.alert-link {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(169deg 100% 88%);
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
font-weight: 600;
}
notifications: Prompt user to enable desktop notifications. This is a two-step notifications process that will ask a user to enable notifications and if they click exit give them three options: 1. Enable notifications. 2. Ask later. 3. Never ask on this computer again. The first two are self-explanatory (ask later = next session it asks again). The third is captured and stored in localStorage and a check is done on page load to see whether or not notifications should be displayed. Commit modified heavily by Brock Whittaker <brock@zulipchat.com>. Fixes #1189.
2017-09-23 11:27:18 +02:00
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
&.red .alert-link {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 100% 88%);
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
}
panels: Give admins a red warning banner when email isn't configured. Also refactor the "panels"/banner code to be a bit clearer about how it's supposed to generically work, using [data-process] as a uniquely identifying marker. Fixes: #8166. [greg: rebased and squashed a series of fixup commits.]
2018-01-26 22:10:30 +01:00
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
.buttons .alert-link {
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
margin: 0 5px;
css: Use SCSS nesting in zulip.scss for `#panels`.
2020-05-16 12:46:32 +02:00
}
}
notifications: Prompt user to enable desktop notifications. This is a two-step notifications process that will ask a user to enable notifications and if they click exit give them three options: 1. Enable notifications. 2. Ask later. 3. Never ask on this computer again. The first two are self-explanatory (ask later = next session it asks again). The third is captured and stored in localStorage and a check is done on page load to see whether or not notifications should be displayed. Commit modified heavily by Brock Whittaker <brock@zulipchat.com>. Fixes #1189.
2017-09-23 11:27:18 +02:00
}
recent: Rename .recent_topics_container.
2023-09-06 23:40:00 +02:00
.recent_view_container #recent_view_table {
navbar_alerts: Adjust app based on navbar height.
2023-05-21 20:52:46 +02:00
margin-top: var(--navbar-fixed-height);
}
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
.app {
uploads: Extend drag and drop upload area to blank areas after sidebars. To extend the drag and drop upload area to blank areas after sidebars, we now detect the drag/drop event on the entire ".app" division. We also change replace `width` and `height` css properties with `min-width` and `min-height` properties respectively, to make sure that the ".app" div spans the entire width and height of the viewport. Fixes: #27550.
2023-11-04 22:43:10 +01:00
min-width: 100%;
min-height: 100%;
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
z-index: 99;
}
Fix code format for CSS selectors with commas. This change basically does s/,<space>/,<cr>/. (imported from commit 4ab295d0dbc24de6baa29908c2d6a469f35492f3)
2013-08-23 07:31:38 +02:00
.app-main,
.header-main {
Move crumbbar to header and change visual appearance (imported from commit 435e3b46b615f6c496be10b7d170ed3e4201787d)
2014-01-08 16:12:22 +01:00
width: 100%;
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
min-width: 950px;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
margin: 0 auto;
padding: 0;
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
position: relative;
}
scroll_bar: Fix overlapping right sidebar and browser scrollbars. Fixes #25779 We move the simplebar scroll on the right sidebar to a little left when there is an overlay scrollbar present so that user can drag either of them.
2023-05-29 13:31:58 +02:00
body.has-overlay-scrollbar {
/* Move simplebar scrollbar to the left so that
browser scrollbar doesn't overlap with it. */
.column-right .simplebar-track.simplebar-vertical {
right: var(--browser-overlay-scrollbar-width);
}
}
popover_menus: Create an API to render popovers as a centered overlay. This commit lets us render popovers centered on the screen with a background overlay. It's the same thing we did with Bootstrap popovers, but optimized for use with Tippy.
2023-08-25 11:06:23 +02:00
/* Styles for popovers rendered as an overlay at the
center of the screen, primarily used in mobile sizes. */
#popover-overlay-background {
position: fixed;
inset: 0;
/* Needs to be higher than the 105 for div.overlay so that the
emoji picker can render on top of the user status picker. */
z-index: 106;
background-color: hsl(0deg 0% 0% / 70%);
}
Fix code format for CSS selectors with commas. This change basically does s/,<space>/,<cr>/. (imported from commit 4ab295d0dbc24de6baa29908c2d6a469f35492f3)
2013-08-23 07:31:38 +02:00
.column-right {
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
width: var(--right-sidebar-width);
max-width: var(--right-sidebar-width);
Move crumbbar to header and change visual appearance (imported from commit 435e3b46b615f6c496be10b7d170ed3e4201787d)
2014-01-08 16:12:22 +01:00
position: absolute;
css: Extract variables for the widths of the sidebars.
2021-04-30 20:11:03 +02:00
right: 0;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
top: 0;
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
.spectator_login_buttons {
display: flex;
justify-content: space-evenly;
position: absolute;
help_menu: Extract help items from gear menu into a separate popover. Fixes #27202
2023-10-21 13:57:36 +02:00
top: 8px;
/* gear menu + help menu width (40px * 2) */
right: 80px;
/* width of right column - width of gear icon - right margin of column-right (250px - 40px - 40px -7px) */
width: 163px;
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
@media (width < $xl_min) or (height < $short_navbar_cutoff_height) {
spectator sign in buttons: Use media queries instead of hide-xl.
2023-11-26 21:29:46 +01:00
display: none;
}
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& a {
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
font-size: calc(16em / 14);
font-weight: 600;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 20%);
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
&:hover {
text-decoration: none;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 0%);
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
}
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& i {
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
margin-right: 3px;
}
}
.divider {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 88%);
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
font-size: 20px;
line-height: 1;
}
}
.spectator_narrow_login_button {
position: absolute;
top: 0;
right: 0;
navbar: Add user avatar icon for personal_menu dropdown. This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
2023-07-17 17:26:24 +02:00
height: var(--header-height);
width: var(--header-height);
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border-left: 1px solid hsl(0deg 0% 88%);
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
@media (width >= $xl_min) and (height >= 600px) {
spectator sign in buttons: Use media queries instead of hide-xl.
2023-11-26 21:29:46 +01:00
display: none;
}
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
.login_button {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
opacity: 0.5;
&:hover {
opacity: 1;
text-decoration: none;
}
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& i {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 20%);
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
font-size: 1.6em;
}
}
}
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
}
css: Extract variables for the widths of the sidebars.
2021-04-30 20:11:03 +02:00
.column-left {
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
width: var(--left-sidebar-width);
max-width: var(--left-sidebar-width);
Move crumbbar to header and change visual appearance (imported from commit 435e3b46b615f6c496be10b7d170ed3e4201787d)
2014-01-08 16:12:22 +01:00
position: absolute;
css: Extract variables for the widths of the sidebars.
2021-04-30 20:11:03 +02:00
left: 0;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
top: 0;
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
}
navbar_alerts: Adjust app based on navbar height.
2023-05-21 20:52:46 +02:00
#message_feed_container,
.column-left .left-sidebar,
.column-right .right-sidebar {
padding-top: calc(
var(--navbar-fixed-height) + var(--header-padding-bottom)
);
}
css: Reorder zulip.scss to put `.app-main` alongside.
2020-05-16 12:54:44 +02:00
.app-main {
height: 100%;
min-height: 100%;
css: Use SCSS nesting in zulip.scss for `.app-main`.
2020-05-16 12:56:11 +02:00
.column-left .left-sidebar,
.column-right .right-sidebar {
position: fixed;
z-index: 100;
}
Modify crumbbar style to look like an arrowbar Also: * Change fixed element positioning and fix bugs * Move settings dropdown back to the right and add left padding to left sidebar (imported from commit fcf903b59617687f94618a01ce7544b69f408130)
2014-01-09 16:58:51 +01:00
css: Use SCSS nesting in zulip.scss for `.app-main`.
2020-05-16 12:56:11 +02:00
.column-left .left-sidebar {
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
width: var(--left-sidebar-width);
padding-left: var(--left-sidebar-collapse-widget-gutter);
css: Use SCSS nesting in zulip.scss for `.app-main`.
2020-05-16 12:56:11 +02:00
}
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
css: Use SCSS nesting in zulip.scss for `.app-main`.
2020-05-16 12:56:11 +02:00
.column-right .right-sidebar {
padding-left: 10px;
width: 240px;
}
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
css: Use SCSS nesting in zulip.scss for `.app-main`.
2020-05-16 12:56:11 +02:00
.column-middle {
min-height: 100%;
floating_recipient_bar: Replace with sticky header.
2022-12-19 09:16:05 +01:00
/* We need `overflow-y: visible` for sticky headers to work. */
css: Use SCSS nesting in zulip.scss for `.app-main`.
2020-05-16 12:56:11 +02:00
}
Redesign styles for message pane (imported from commit 394249d58f1cc3b976b432bbc421b99510e7fff9)
2014-01-31 21:36:31 +01:00
}
css: Extract variables for the widths of the sidebars.
2021-04-30 20:11:03 +02:00
.column-middle,
layout: Introduce a #compose-content div. This should make it more intuitive to add new elements to the compose box (such as banners), and it also makes it a bit more clear for styling purposes that the same geometry happens whether the compose box is open or the buttons are visible. I lifted the #compose_container div into the server template. It's not totally clear to me why we need both #compose and #compose_container, but there are some scary comments about 1400px that made me too timid to address that quirk. In passing I removed a clearly redundant click handler.
2021-06-10 16:52:29 +02:00
#compose-content {
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
margin-right: var(--right-sidebar-width);
pm_section: Create collapsible private messages section. This commit introduces the change of rendering private messages section as collapsible, whose data-fetching logic came with zulip#21357. We now have separated out `Private messages` from `top_left_corner` section and shifted it below the `global_filters` in a different separate section along with stream list with common scroll bar in left-sidebar. The new PM section will be opened by-default on loading the page and will have a toggle-icon in its header, clicking on which makes the section collapse/expand accordingly. In default view, only recent 5 PM threads would be shown and would append the active conversation as the 6th one at last if not present in those 5, similar to how topics list work. In PM section with unreads, a maximum of 8 conversations would be shown and rest of them would be hidden behind the 'more conversations' li-item, clicking on which takes to the zoomedIn view of PM section where all the present PM threads would be visible and rest of the sections of left-sidebar will get collapsed. Fixes #20870. Co-authored-by: Aman Agrawal <amanagr@zulip.com>
2022-09-13 13:15:57 +02:00
margin-left: calc(
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
var(--left-sidebar-width) + var(--left-sidebar-collapse-widget-gutter)
pm_section: Create collapsible private messages section. This commit introduces the change of rendering private messages section as collapsible, whose data-fetching logic came with zulip#21357. We now have separated out `Private messages` from `top_left_corner` section and shifted it below the `global_filters` in a different separate section along with stream list with common scroll bar in left-sidebar. The new PM section will be opened by-default on loading the page and will have a toggle-icon in its header, clicking on which makes the section collapse/expand accordingly. In default view, only recent 5 PM threads would be shown and would append the active conversation as the 6th one at last if not present in those 5, similar to how topics list work. In PM section with unreads, a maximum of 8 conversations would be shown and rest of them would be hidden behind the 'more conversations' li-item, clicking on which takes to the zoomedIn view of PM section where all the present PM threads would be visible and rest of the sections of left-sidebar will get collapsed. Fixes #20870. Co-authored-by: Aman Agrawal <amanagr@zulip.com>
2022-09-13 13:15:57 +02:00
);
Modify crumbbar style to look like an arrowbar Also: * Change fixed element positioning and fix bugs * Move settings dropdown back to the right and add left padding to left sidebar (imported from commit fcf903b59617687f94618a01ce7544b69f408130)
2014-01-09 16:58:51 +01:00
position: relative;
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
}
Fix code format for CSS selectors with commas. This change basically does s/,<space>/,<cr>/. (imported from commit 4ab295d0dbc24de6baa29908c2d6a469f35492f3)
2013-08-23 07:31:38 +02:00
textarea,
input {
css: Use variable font when using Source Sans 3. This is to overcome the limitations of previous static font, which didn't allow us to use various font widths.
2023-03-27 12:47:59 +02:00
font-family: "Source Sans 3 VF", sans-serif;
Set input/textarea font to match the rest of the page (imported from commit 69b7d6399e6db46dc5a4f777395e3cd636427023)
2012-10-24 23:16:43 +02:00
}
Make various UI elements look and work better when the font size changes (imported from commit 0229aaf059941892eaaa16fb20a807015136a7ca)
2013-02-13 23:23:26 +01:00
/* Override Bootstrap's fixed sizes for various elements */
Fix code format for CSS selectors with commas. This change basically does s/,<space>/,<cr>/. (imported from commit 4ab295d0dbc24de6baa29908c2d6a469f35492f3)
2013-08-23 07:31:38 +02:00
textarea,
label {
tools/css: Trim whitespace around CSS values.
2017-03-14 16:36:22 +01:00
font-size: inherit;
Make various UI elements look and work better when the font size changes (imported from commit 0229aaf059941892eaaa16fb20a807015136a7ca)
2013-02-13 23:23:26 +01:00
line-height: inherit;
}
styles: Make focus outline work reliably. For a:focus Bootstrap sets the following rules: outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; Firefox does not know -webkit-focus-ring-color and falls back to the previous rule, making the outline invisible in darkmode. Chromium has a bug[1] that makes outline: auto invisible when focussing elements programmatically (which we do for the up & down arrow keys). [1]: https://bugs.chromium.org/p/chromium/issues/detail?id=1105822 Fixes #15768.
2020-07-15 11:12:05 +02:00
/* Bootstrap's focus outline uses -webkit-focus-ring-color which doesn't exist in Firefox */
css: Set standard outline color for focusable elements. Fixes #19198 We set blue outline color in day mode and light gray outline colour in night mode. This removes the different outline colours users in different platforms / desktop app.
2021-07-13 08:15:05 +02:00
a:not(:active):focus,
button:focus,
.new-style label.checkbox input[type="checkbox"]:focus ~ span,
i.fa:focus,
icons: Improve hover, focus states and target areas.
2023-07-19 19:08:38 +02:00
i.zulip-icon:focus-visible,
compose_control_menu: Allow to enter press to open the menu. Make `compose_control_menu_wrapper` clickable and allow tab focus on it. Disable tab focus on `compose_control_menu` icon. Fix outline for `compose_control_menu_wrapper`. Extend out custom outline property to all `[role="button"]` elements.
2022-03-08 07:22:44 +01:00
[role="button"]:focus {
css: Assign a variable to focus underline color of recent view.
2023-09-12 13:01:36 +02:00
outline: 2px solid var(--color-outline-focus);
styles: Rename .scss files back to .css. css-loader@4 broke @import statements referencing files with extensions other than .css, unless those @import statements are compiled away by another loader. Upstream is more interested in arguing that such @import statements are semantically incorrect than applying the one line fix. https://github.com/webpack-contrib/css-loader/issues/1164 Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 22:23:01 +02:00
/* TODO: change solid to auto once the Chromium bug #1105822 is fixed */
styles: Make focus outline work reliably. For a:focus Bootstrap sets the following rules: outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; Firefox does not know -webkit-focus-ring-color and falls back to the previous rule, making the outline invisible in darkmode. Chromium has a bug[1] that makes outline: auto invisible when focussing elements programmatically (which we do for the up & down arrow keys). [1]: https://bugs.chromium.org/p/chromium/issues/detail?id=1105822 Fixes #15768.
2020-07-15 11:12:05 +02:00
}
Make various UI elements look and work better when the font size changes (imported from commit 0229aaf059941892eaaa16fb20a807015136a7ca)
2013-02-13 23:23:26 +01:00
/* List of text-like input types taken from Bootstrap */
css: Use SCSS nesting in zulip.scss for `input`.
2020-05-16 12:58:43 +02:00
input {
&[type="text"],
&[type="password"],
&[type="datetime"],
&[type="datetime-local"],
&[type="date"],
&[type="month"],
&[type="time"],
&[type="week"],
&[type="number"],
&[type="email"],
&[type="url"],
&[type="search"],
&[type="tel"],
&[type="color"] {
font-size: inherit;
height: 1.4em;
}
Make various UI elements look and work better when the font size changes (imported from commit 0229aaf059941892eaaa16fb20a807015136a7ca)
2013-02-13 23:23:26 +01:00
}
Fix code format for CSS selectors with commas. This change basically does s/,<space>/,<cr>/. (imported from commit 4ab295d0dbc24de6baa29908c2d6a469f35492f3)
2013-08-23 07:31:38 +02:00
li,
.table th,
.table td {
Make various UI elements look and work better when the font size changes (imported from commit 0229aaf059941892eaaa16fb20a807015136a7ca)
2013-02-13 23:23:26 +01:00
line-height: inherit;
}
.btn {
tools/css: Trim whitespace around CSS values.
2017-03-14 16:36:22 +01:00
font-size: inherit;
height: auto;
Switched to Source Sans Pro as the base font for the app and made a number of other cosmetic changes. What changed: * Vector icons swapped in for the left sidebar buttons and filters * Lighter font weight in the stream filters list * Round color swatches in the stream filters list, with an inner shadow * Tighter line height in the individual messages in the message pane * Fixed button widths in the left sidebar (so the buttons are equal in width) (imported from commit 337dc4a3d8e29945cfc8cfb9524ac76a7b038ad8)
2013-05-07 19:32:12 +02:00
line-height: 100%;
Make various UI elements look and work better when the font size changes (imported from commit 0229aaf059941892eaaa16fb20a807015136a7ca)
2013-02-13 23:23:26 +01:00
}
css: Extract copy_button_base from copy_codeblock class. The base class will contain common styling which is used by both copy_codeblock and copy_message buttons. This sets us up nicely for following commit(s) which aims to unify the two button styling.
2020-08-27 16:41:30 +02:00
/* Classes which style copy buttons */
.copy_button_base {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
outline-color: hsl(0deg 0% 73%);
css: Extract copy_button_base from copy_codeblock class. The base class will contain common styling which is used by both copy_codeblock and copy_message buttons. This sets us up nicely for following commit(s) which aims to unify the two button styling.
2020-08-27 16:41:30 +02:00
height: 18px;
width: 10px;
styles: Fix shorthand-property-no-redundant-values. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-11-05 03:33:16 +01:00
padding: 6px;
css: Extract copy_button_base from copy_codeblock class. The base class will contain common styling which is used by both copy_codeblock and copy_message buttons. This sets us up nicely for following commit(s) which aims to unify the two button styling.
2020-08-27 16:41:30 +02:00
display: block;
/* The below two avoids the padded element from displaying
docs: Fix many spelling mistakes. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-02-08 00:13:33 +01:00
its own border and background color */
css: Extract copy_button_base from copy_codeblock class. The base class will contain common styling which is used by both copy_codeblock and copy_message buttons. This sets us up nicely for following commit(s) which aims to unify the two button styling.
2020-08-27 16:41:30 +02:00
border: none;
background-clip: content-box;
css: Refactor copy_message button to use copy_button_base class styling. Z-index is added to the base class. This doesn't affect copy_code_button in any way. Attributes dropped/changed: - background-color - Base class on-hover property is now used. - height, width, padding is now the base classes. We can also remove the TODO now.
2020-08-28 04:13:23 +02:00
/* The z-index here ensures that the copy-message
icon is clickable and is needed because of reduced
opacity of readonly textarea */
z-index: 2;
css: Extract copy_button_base from copy_codeblock class. The base class will contain common styling which is used by both copy_codeblock and copy_message buttons. This sets us up nicely for following commit(s) which aims to unify the two button styling.
2020-08-27 16:41:30 +02:00
&:hover svg path {
css: Fix dark theme hover color for copy invite link. Extracted colors into variables and used them inside the id to solve the specificity issue.
2023-10-22 14:23:15 +02:00
fill: var(--color-fill-hover-copy-icon);
css: Extract copy_button_base from copy_codeblock class. The base class will contain common styling which is used by both copy_codeblock and copy_message buttons. This sets us up nicely for following commit(s) which aims to unify the two button styling.
2020-08-27 16:41:30 +02:00
}
}
css: Refactor copy_message button to use copy_button_base class styling. Z-index is added to the base class. This doesn't affect copy_code_button in any way. Attributes dropped/changed: - background-color - Base class on-hover property is now used. - height, width, padding is now the base classes. We can also remove the TODO now.
2020-08-28 04:13:23 +02:00
.copy_message {
copy_message_button: Use `div` HTML tag instead of `button`. For some reason, browser is treating clicking on the button as submitting the form, which results in the page getting redirected to the same page with an additional empty query `?` in the URL.
2023-03-18 11:20:58 +01:00
float: right;
message_edit: Added copy to clipboard button. A copy-to-clipboard button is added over message-edit textarea. Closes #3239.
2017-01-17 20:51:30 +01:00
position: relative;
copy_message_button: Use `div` HTML tag instead of `button`. For some reason, browser is treating clicking on the button as submitting the form, which results in the page getting redirected to the same page with an additional empty query `?` in the URL.
2023-03-18 11:20:58 +01:00
cursor: pointer;
top: 30px;
/* To make sure the svg doesn't occupy any vertical space. */
margin-top: -30px;
right: 2px;
padding-top: 2px;
#clipboard_image {
margin: 0;
}
message_edit: Added copy to clipboard button. A copy-to-clipboard button is added over message-edit textarea. Closes #3239.
2017-01-17 20:51:30 +01:00
}
invite: Add Copy-to-Clipboard button for multiuse links. A convenient copy-to-clipboard button was added in the Invite users to Zulip modal, to make it slightly more convenient to share the generated links. The formatting is extracted to a template to make i18n and variable substitution simpler. Tweaked by tabbott significantly to simplify JS, HTML, and CSS. Fixes #16442.
2020-10-13 18:17:20 +02:00
#copy_generated_invite_link {
position: relative;
margin-right: -32px;
margin-top: -1px;
invites: Handle long invite URL overflow properly. Fixes #19764.
2021-09-28 21:57:50 +02:00
padding: 6px 3px 6px 13px;
bootstrap: Remove bootstrap CSS for pull-right class. We use pull-right class for copy button with the multi-use invite link only and this commit adds CSS for that specific element. This commit then removes the bootstrap CSS for pull-right class and also removes pull-right class from the copy button since it is no longer required.
2023-06-16 18:54:31 +02:00
float: right;
invites: Remove odd box-shadow for invite link clipboard svg.
2021-01-25 03:33:29 +01:00
/* This property nullifies the box-shadow rendered by .btn class */
&:active {
box-shadow: none;
}
css: Fix dark theme hover color for copy invite link. Extracted colors into variables and used them inside the id to solve the specificity issue.
2023-10-22 14:23:15 +02:00
& path {
fill: var(--color-fill-user-invite-copy-icon);
}
&:hover svg path {
fill: var(--color-fill-hover-copy-icon);
}
invite: Add Copy-to-Clipboard button for multiuse links. A convenient copy-to-clipboard button was added in the Invite users to Zulip modal, to make it slightly more convenient to share the generated links. The formatting is extracted to a template to make i18n and variable substitution simpler. Tweaked by tabbott significantly to simplify JS, HTML, and CSS. Fixes #16442.
2020-10-13 18:17:20 +02:00
}
message_edit: Modify css for hover over 'Copy' button. Replace background-image of copy button with an image and change color on hover.
2017-03-26 12:15:50 +02:00
#clipboard_image {
message_edit: Replace image tag with inline SVG tag for clipboard image.
2017-04-06 15:57:50 +02:00
margin-top: -5px;
margin-left: -8px;
}
Adding an "Attach files" button to the message composition pane. Changes include: * New markup for the button in compose.html * A hidden file input field in compose.html * Added reference to the file input field in filedrop initialization in compose.js * A feature test and a click event binding for the "Attach files" button in ui.js * New paperclip icon reference in fonts.css * New general hidden display classes in zephyr.css * New composition pane button classes in zephyr.css Fixes to the "Attach files" button commit e673bda... Changes include: * Fixed the feature test for (new XMLHttpRequest).upload so it works in Firefox. * Renamed .button to .message-control-button * Removed stray newlines (imported from commit c1f0834b74fd7120ec27db64ec380ffb3fa34633)
2013-04-24 00:40:47 +02:00
/* Classes for hiding and showing controls */
.notdisplayed {
display: none !important;
}
.notvisible {
visibility: hidden !important;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
width: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
height: 0 !important;
Modified the "notvisible" CSS class to account for edge cases. In particular, I added absolute positioning and hidden overflow, which ensures that if an element has a persistent min-width (like a file input field apparently does), it doesn't affect its parent. (imported from commit 72e7a5bee2775fb6f229899ba849292eee76aa4a)
2013-04-25 23:08:05 +02:00
overflow: hidden !important;
position: absolute !important;
Adding an "Attach files" button to the message composition pane. Changes include: * New markup for the button in compose.html * A hidden file input field in compose.html * Added reference to the file input field in filedrop initialization in compose.js * A feature test and a click event binding for the "Attach files" button in ui.js * New paperclip icon reference in fonts.css * New general hidden display classes in zephyr.css * New composition pane button classes in zephyr.css Fixes to the "Attach files" button commit e673bda... Changes include: * Fixed the feature test for (new XMLHttpRequest).upload so it works in Firefox. * Renamed .button to .message-control-button * Removed stray newlines (imported from commit c1f0834b74fd7120ec27db64ec380ffb3fa34633)
2013-04-24 00:40:47 +02:00
}
Make various UI elements look and work better when the font size changes (imported from commit 0229aaf059941892eaaa16fb20a807015136a7ca)
2013-02-13 23:23:26 +01:00
Modify message box layout and spacing. * Modify the narrow icon in FontAwesome to make it better align to the pixel grid and display well on Windows+Chrome. * Move the message controls to the right * Hide the message info icon until the message is hovered / selected * Switch the star to a gray version * Increase the size of the gravatar * Adjust the spacing * Add the right-side message pointer * Fix private message background colors and mention colors * Modify star count test to account for new stars * Bug fixes for stream subscription messages and other miscellanea. (imported from commit 3d3d9de7e03f3658c5c78b492051b2b7f795487d)
2013-05-21 17:47:44 +02:00
/* Lighter strong */
strong {
font-weight: 600;
}
Tweak code block examples (imported from commit 4790e217320ad2dae0b85216321b11755b0ba88c)
2012-11-29 18:38:18 +01:00
.preserve_spaces {
white-space: pre-wrap;
}
spectrum: Remove the box-sizing attribute on input. This removes the `box-sizing` attribute on the spectrum input that was causing the characters to overflow the bounds of the padding, which would cut off things like the bottom of a “g” or the top of an “f”. Fixes: #6361.
2017-09-26 19:52:18 +02:00
.sp-input {
width: calc(100% - 14px);
box-sizing: initial !important;
}
Cleanup whitespace in CSS (imported from commit ffd0d4715977b1655ee9df84db4fe014d67216bf)
2012-11-02 22:19:12 +01:00
.logout {
white-space: nowrap;
}
Condense name and email when we have a very narrow window. When the window is narrow, vertical space (particularly in our navigation menu) is at a premium, so let's be more parsimonious. (imported from commit 72628827bc108f4d9f2d47a11c48e0e772b769d4)
2012-10-12 05:10:48 +02:00
css: Use SCSS nesting in zulip.scss for `.tooltip`.
2020-05-16 13:09:26 +02:00
.tooltip {
&.in {
font-size: 12px;
line-height: 1.3;
Make tooltips more legible. This makes the JavaScript tooltips more legible by increasing the font size and decreasing the line-height, while also increasing the opacity of the tooltip from 0.8 => 1.
2017-09-16 01:51:59 +02:00
css: Use SCSS nesting in zulip.scss for `.tooltip`.
2020-05-16 13:09:26 +02:00
opacity: 1;
Make tooltips more legible. This makes the JavaScript tooltips more legible by increasing the font size and decreasing the line-height, while also increasing the opacity of the tooltip from 0.8 => 1.
2017-09-16 01:51:59 +02:00
css: Use SCSS nesting in zulip.scss for `.tooltip`.
2020-05-16 13:09:26 +02:00
&.left {
margin-left: -12px;
margin-top: 3px;
}
}
Make tooltips more legible. This makes the JavaScript tooltips more legible by increasing the font size and decreasing the line-height, while also increasing the opacity of the tooltip from 0.8 => 1.
2017-09-16 01:51:59 +02:00
css: Use SCSS nesting in zulip.scss for `.tooltip`.
2020-05-16 13:09:26 +02:00
.tooltip-inner {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background-color: hsl(0deg 0% 7% / 80%);
css: Use SCSS nesting in zulip.scss for `.tooltip`.
2020-05-16 13:09:26 +02:00
padding: 3px 5px;
}
tooltip: Hide tooltip for touch events on touch-enabled devices. Fixes #16674. The commit hides the tooltip for touch events on touch enabled device. Touch events trigger both click and hover action, leaving the hover action sustained until next click. Hence it is better to hide the tooltip to avoid the clutter in UI.
2020-12-17 13:20:39 +01:00
/*
Since hover and click are activated together on touchscreen
devices, the hover state persists until the next click, creating
awkward UI where the tooltip sticks around forever :(.
To resolve this, we just hide the tooltip for touch-events on
touch-enabled devices resolving the above problem. This means
that tooltips will never appear on touchscreen devices, but that's
docs: Fix a few typos in documentation.
2021-12-28 18:36:59 +01:00
probably a reasonable tradeoff here.
tooltip: Hide tooltip for touch events on touch-enabled devices. Fixes #16674. The commit hides the tooltip for touch events on touch enabled device. Touch events trigger both click and hover action, leaving the hover action sustained until next click. Hence it is better to hide the tooltip to avoid the clutter in UI.
2020-12-17 13:20:39 +01:00
Source: https://drafts.csswg.org/mediaqueries-4/#mf-interaction
*/
@media (hover: none) {
visibility: hidden !important;
}
Make tooltips more legible. This makes the JavaScript tooltips more legible by increasing the font size and decreasing the line-height, while also increasing the opacity of the tooltip from 0.8 => 1.
2017-09-16 01:51:59 +02:00
}
user status: Add JS tooltips for Buddy List and PM List. Hovering over user names (and user circles for PM List) now displays Name, Status Message and Last online time in a js tooltip. Hovering over group names displays the names of all group members. Unavailable users are shown as "Last active: Today". Hovering on a user circle in the Buddy List results in a js tooltip with Active/Idle/Offline/Unavailable for green/orange/white/white-with-line. Resolves #11607.
2019-08-04 14:57:32 +02:00
.buddy_list_tooltip_content {
text-align: left;
right sidebar: Add word-wrap property in tooltips. This prevents the overflow of tooltips on hovering over buddy list. Fixes #21119.
2022-02-16 21:59:38 +01:00
word-wrap: break-word;
style: Fix overflow of text. Fixes: #27282
2023-11-04 19:15:09 +01:00
max-width: 280px;
user status: Add JS tooltips for Buddy List and PM List. Hovering over user names (and user circles for PM List) now displays Name, Status Message and Last online time in a js tooltip. Hovering over group names displays the names of all group members. Unavailable users are shown as "Last active: Today". Hovering on a user circle in the Buddy List results in a js tooltip with Active/Idle/Offline/Unavailable for green/orange/white/white-with-line. Resolves #11607.
2019-08-04 14:57:32 +02:00
}
message_header: Add support to follow topic from the message header bar. This commit replaces the mute/unmute topic button in the message header bar with a button that allows the user to set the visibility_policy of the topic to muted, unmuted, followed or inherit. The button in the message header bar has an icon corresponding to the current visibility policy of the topic. In a muted stream: A click on the button opens a popover with 'Mute', 'Default', 'Unmute', and 'Follow' options. In a not muted stream: A click on the button opens a popover with 'Mute', 'Default', and 'Follow' options. 'Unmute' option is available only when the visibility_policy is set to 'Unmute'. The current visibility_policy of the topic is highlighted in the popover.
2023-07-25 17:21:20 +02:00
#change_visibility_policy_button_tooltip {
text-align: center;
}
Make the left sidebar and right sidebar more consistent. Addresses Trac #1500. (imported from commit ad59d6f78042ce89a99ad60c7c34f67144e9c776)
2013-08-12 23:05:20 +02:00
.narrow-filter {
display: block;
Fix overflow in stream list and clean up dropdown toggle. This fixes Trac #1328. (imported from commit 497147d71c529d0fcfdcb9199c850823b1a4778d)
2013-06-12 21:25:49 +02:00
position: relative;
}
styles: Rename .scss files back to .css. css-loader@4 broke @import statements referencing files with extensions other than .css, unless those @import statements are compiled away by another loader. Upstream is more interested in arguing that such @import statements are semantically incorrect than applying the one line fix. https://github.com/webpack-contrib/css-loader/issues/1164 Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 22:23:01 +02:00
/* .dropdown-menu from v2.3.2
+ https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d
basic idea of this fix is to remove decorations from :hover and apply them only
on :focus. */
scss: Copy dropdown-menu css to zulip.scss and apply fix. This commit starts to bring back our changes to bootstrap files. We try to move these changes to zulip.scss as much as possible. We are starting with bootstrap.css. Apply fix in commit 7a3a3be. Changes before 7a3a3be that were not to be added. These mostly involve moving files around and hence are not relevant. 441e429 5e2c493 89ed444 8f1cee0 1490ae1
2020-08-14 16:04:42 +02:00
.typeahead-menu {
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& li {
& a {
scss: Copy dropdown-menu css to zulip.scss and apply fix. This commit starts to bring back our changes to bootstrap files. We try to move these changes to zulip.scss as much as possible. We are starting with bootstrap.css. Apply fix in commit 7a3a3be. Changes before 7a3a3be that were not to be added. These mostly involve moving files around and hence are not relevant. 441e429 5e2c493 89ed444 8f1cee0 1490ae1
2020-08-14 16:04:42 +02:00
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 20%);
scss: Copy dropdown-menu css to zulip.scss and apply fix. This commit starts to bring back our changes to bootstrap files. We try to move these changes to zulip.scss as much as possible. We are starting with bootstrap.css. Apply fix in commit 7a3a3be. Changes before 7a3a3be that were not to be added. These mostly involve moving files around and hence are not relevant. 441e429 5e2c493 89ed444 8f1cee0 1490ae1
2020-08-14 16:04:42 +02:00
white-space: nowrap;
&:hover {
text-decoration: none;
}
&:focus {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 100%);
scss: Copy dropdown-menu css to zulip.scss and apply fix. This commit starts to bring back our changes to bootstrap files. We try to move these changes to zulip.scss as much as possible. We are starting with bootstrap.css. Apply fix in commit 7a3a3be. Changes before 7a3a3be that were not to be added. These mostly involve moving files around and hence are not relevant. 441e429 5e2c493 89ed444 8f1cee0 1490ae1
2020-08-14 16:04:42 +02:00
text-decoration: none;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background-color: hsl(200deg 100% 38%);
scss: Copy dropdown-menu css to zulip.scss and apply fix. This commit starts to bring back our changes to bootstrap files. We try to move these changes to zulip.scss as much as possible. We are starting with bootstrap.css. Apply fix in commit 7a3a3be. Changes before 7a3a3be that were not to be added. These mostly involve moving files around and hence are not relevant. 441e429 5e2c493 89ed444 8f1cee0 1490ae1
2020-08-14 16:04:42 +02:00
background-image: linear-gradient(
to bottom,
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
hsl(200deg 100% 40%),
hsl(200deg 100% 35%)
scss: Copy dropdown-menu css to zulip.scss and apply fix. This commit starts to bring back our changes to bootstrap files. We try to move these changes to zulip.scss as much as possible. We are starting with bootstrap.css. Apply fix in commit 7a3a3be. Changes before 7a3a3be that were not to be added. These mostly involve moving files around and hence are not relevant. 441e429 5e2c493 89ed444 8f1cee0 1490ae1
2020-08-14 16:04:42 +02:00
);
}
search_suggestion: Show profile pictures in autocomplete suggestions. Because the typeahead.js list items are currently just text, a user's full name and avatar should be displayed in `input_pill`. To use `input_pill`, a separate Handlebars partial view was created to provide a mandatory container (`<div class="pill-container">`) for `input_pill` and a flex container (`<div class="search_list_item">`) for vertically aligning the text. The description of each suggestion (i.e `description_html`) is rendered as raw HTML, so every special character (e.g. whitespace) should be HTML-escaped. This enables highlighting the substring in each search suggestion that matches the query. Fixes: #20267
2021-12-06 23:44:26 +01:00
compose: Add user presence circles in mention and pm typeahead. This commit addresses the problem of user's status visibility to some extent. It adds presence circles, like we have in buddy_list to the typeahead suggestions that are given for mentioning users in messages. Tweaked by tabbott to adjust vertical alignment of group mentions as well. Testing for the changes is done manually in the developement server, and also by updating frontend tests to address these changes. Fixes: #17138
2021-02-26 09:24:04 +01:00
/* styles defined for user_circle here only deal with positioning of user_presence_circle
docs: Fix a few typos in documentation.
2021-12-28 18:36:59 +01:00
in typeahead list in order to ensure they are rendered correctly in in all screen sizes.
compose: Add user presence circles in mention and pm typeahead. This commit addresses the problem of user's status visibility to some extent. It adds presence circles, like we have in buddy_list to the typeahead suggestions that are given for mentioning users in messages. Tweaked by tabbott to adjust vertical alignment of group mentions as well. Testing for the changes is done manually in the developement server, and also by updating frontend tests to address these changes. Fixes: #17138
2021-02-26 09:24:04 +01:00
Most of the style rules related to color, gradient etc. which are generally common throughout
the app are defined in user_circles.css and are not overridden here. */
.user_circle {
width: 8px;
height: 8px;
margin: 0 5px 0 -6px;
position: relative;
top: 6px;
compose: Fix spacing of presence circles in typeahead. This commit increases spacing between presence circles and user avatar in typeahead suggestions. These changes were discussed in #design>Presence.
2021-03-10 22:06:39 +01:00
right: 8px;
compose: Add user presence circles in mention and pm typeahead. This commit addresses the problem of user's status visibility to some extent. It adds presence circles, like we have in buddy_list to the typeahead suggestions that are given for mentioning users in messages. Tweaked by tabbott to adjust vertical alignment of group mentions as well. Testing for the changes is done manually in the developement server, and also by updating frontend tests to address these changes. Fixes: #17138
2021-02-26 09:24:04 +01:00
display: inline-block;
}
scss: Copy dropdown-menu css to zulip.scss and apply fix. This commit starts to bring back our changes to bootstrap files. We try to move these changes to zulip.scss as much as possible. We are starting with bootstrap.css. Apply fix in commit 7a3a3be. Changes before 7a3a3be that were not to be added. These mostly involve moving files around and hence are not relevant. 441e429 5e2c493 89ed444 8f1cee0 1490ae1
2020-08-14 16:04:42 +02:00
}
}
.active > a {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 100%);
scss: Copy dropdown-menu css to zulip.scss and apply fix. This commit starts to bring back our changes to bootstrap files. We try to move these changes to zulip.scss as much as possible. We are starting with bootstrap.css. Apply fix in commit 7a3a3be. Changes before 7a3a3be that were not to be added. These mostly involve moving files around and hence are not relevant. 441e429 5e2c493 89ed444 8f1cee0 1490ae1
2020-08-14 16:04:42 +02:00
text-decoration: none;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background-color: hsl(200deg 100% 38%);
scss: Copy dropdown-menu css to zulip.scss and apply fix. This commit starts to bring back our changes to bootstrap files. We try to move these changes to zulip.scss as much as possible. We are starting with bootstrap.css. Apply fix in commit 7a3a3be. Changes before 7a3a3be that were not to be added. These mostly involve moving files around and hence are not relevant. 441e429 5e2c493 89ed444 8f1cee0 1490ae1
2020-08-14 16:04:42 +02:00
background-image: linear-gradient(
to bottom,
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
hsl(200deg 100% 40%),
hsl(200deg 100% 35%)
scss: Copy dropdown-menu css to zulip.scss and apply fix. This commit starts to bring back our changes to bootstrap files. We try to move these changes to zulip.scss as much as possible. We are starting with bootstrap.css. Apply fix in commit 7a3a3be. Changes before 7a3a3be that were not to be added. These mostly involve moving files around and hence are not relevant. 441e429 5e2c493 89ed444 8f1cee0 1490ae1
2020-08-14 16:04:42 +02:00
);
outline: 0;
compose: Add user presence circles in mention and pm typeahead. This commit addresses the problem of user's status visibility to some extent. It adds presence circles, like we have in buddy_list to the typeahead suggestions that are given for mentioning users in messages. Tweaked by tabbott to adjust vertical alignment of group mentions as well. Testing for the changes is done manually in the developement server, and also by updating frontend tests to address these changes. Fixes: #17138
2021-02-26 09:24:04 +01:00
.user_circle_empty {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border-color: hsl(0deg 0% 25%);
compose: Add user presence circles in mention and pm typeahead. This commit addresses the problem of user's status visibility to some extent. It adds presence circles, like we have in buddy_list to the typeahead suggestions that are given for mentioning users in messages. Tweaked by tabbott to adjust vertical alignment of group mentions as well. Testing for the changes is done manually in the developement server, and also by updating frontend tests to address these changes. Fixes: #17138
2021-02-26 09:24:04 +01:00
}
scss: Copy dropdown-menu css to zulip.scss and apply fix. This commit starts to bring back our changes to bootstrap files. We try to move these changes to zulip.scss as much as possible. We are starting with bootstrap.css. Apply fix in commit 7a3a3be. Changes before 7a3a3be that were not to be added. These mostly involve moving files around and hence are not relevant. 441e429 5e2c493 89ed444 8f1cee0 1490ae1
2020-08-14 16:04:42 +02:00
}
.active > a:hover {
text-decoration: none;
}
}
scss: Re-apply 04df44f91ffb7bba25cfbe3d10548e5e36e80f19. We move 04df44f91ffb7bba25cfbe3d10548e5e36e80f19 to zulip.scss and apply it there.
2020-08-25 13:34:02 +02:00
/* Copied from bootstrap 2.1.1 CSS for dropdown-menu li > a:focus */
li.actual-dropdown-menu > a:focus {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 100%);
scss: Re-apply 04df44f91ffb7bba25cfbe3d10548e5e36e80f19. We move 04df44f91ffb7bba25cfbe3d10548e5e36e80f19 to zulip.scss and apply it there.
2020-08-25 13:34:02 +02:00
text-decoration: none;
styles: Fix some invalid CSS. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-02 07:02:28 +01:00
background-color: transparent;
scss: Re-apply 04df44f91ffb7bba25cfbe3d10548e5e36e80f19. We move 04df44f91ffb7bba25cfbe3d10548e5e36e80f19 to zulip.scss and apply it there.
2020-08-25 13:34:02 +02:00
background-image: none;
filter: none;
outline: 0;
}
Align labels next to Font Awesome icons Fixes Trac #1700 (imported from commit 24fbc27e0d78e5f4863523740dae51853b0fdc8e)
2013-08-16 21:08:43 +02:00
li.actual-dropdown-menu i {
/* In gear menu, make icons the same width so labels line up. */
display: inline-block;
width: 14px;
navbar: Center icons in gear-menu. This centers the icons in the gear menu so they are naturally in line and centered.
2017-02-01 03:04:10 +01:00
text-align: center;
navbar: Add margin between icons and text.
2017-02-01 03:09:43 +01:00
margin-right: 3px;
Implement label counts for stream messages. (imported from commit 45d3d5ba8c2be3ebed8385fb714044ac9419f3c2)
2013-02-12 20:41:01 +01:00
}
Vertically align the pointer. (imported from commit 5ba1586eb1576439b4f0665cf85ba1f59a197c23)
2012-09-10 21:14:01 +02:00
td.pointer {
vertical-align: top;
...but add the padding only on the top. (imported from commit 2459b639d40aaac44d71a8f754481f90348e72ac)
2012-09-10 21:16:17 +02:00
padding-top: 10px;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background-color: hsl(0deg 0% 100%);
Long class and instance names get auto-abbreviated. This required some serious retooling of the table, and some thinking about the interactions between table-layout: fixed and colspan. And some of it is still a little magic-number-y. (Like that 97% width on zephyr_compose_box -- without it, the stream compose box looks weird in Chrome, but not Firefox.) (imported from commit 20c426ad2dae5efa3107890b28976a957bb3d1e3)
2012-10-02 20:47:01 +02:00
}
Show fade effect in left pane for new mentions. This also changes the color for the blink effect when you get private messages. For simplicity sake, we use the same color for private messages and mentions. (imported from commit 46b0f7af1dccefe575004e7676990e5c854a3dcc)
2013-05-31 19:07:59 +02:00
.new_messages {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background-color: hsl(194deg 53% 79%);
Show fade effect in left pane for new mentions. This also changes the color for the blink effect when you get private messages. For simplicity sake, we use the same color for private messages and mentions. (imported from commit 46b0f7af1dccefe575004e7676990e5c854a3dcc)
2013-05-31 19:07:59 +02:00
}
Fix code format for CSS selectors with commas. This change basically does s/,<space>/,<cr>/. (imported from commit 4ab295d0dbc24de6baa29908c2d6a469f35492f3)
2013-08-23 07:31:38 +02:00
.new_messages,
.new_messages_fadeout {
css: Remove unnecessary 'prefixed-transition' mixin. The `transition` property does not need prefixing. In fact, very few properties need that nowadays. So remove it to simplify the code. This is strictly a refactor with no style change intended. Many of these styles shouldn't have been prefixed even if needed. The prefixes exist exactly because the implementations might differ from the incoming standard. Looking at the supported browsers: https://caniuse.com/#search=transition We see that this property has had mainstream support from 2012 and was supported on Firefox in 2006 !!!
2019-04-14 15:21:40 +02:00
transition: all 3s ease-in-out;
Animate "Private messages" when new private messages come in. Set the background behind "Private messages" to green whenever a user's unread count goes up for private messages. Remove the background after 3s. Advanced browsers will fade the green in and out over 6s (3s up, 3s down). (imported from commit 80ed9661d9eec1d697f3259854037d7e145615cd)
2013-05-16 23:40:07 +02:00
}
css: Reorder zulip.scss to put `.sender-status` alongside.
2020-05-16 13:55:40 +02:00
.sender-status {
display: inline-block;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
margin: 8px 0 8px -3px;
css: Reorder zulip.scss to put `.sender-status` alongside.
2020-05-16 13:55:40 +02:00
/* this normalizes the margin of the emoji reactions with normal messages. */
padding-bottom: 5px;
vertical-align: middle;
css: Remove duplicate specifications of default font size. These unnecessary references to 14px font size complicate any effort to adjust the font size in Zulip.
2021-06-11 23:01:11 +02:00
css: Reorder zulip.scss to put `.sender-status` alongside.
2020-05-16 13:55:40 +02:00
position: relative;
max-width: calc(100% - 50px);
css: Use SCSS nesting in zulip.scss for `.sender-status`.
2020-05-16 13:56:31 +02:00
.message_edit_notice {
message_feed: Fix alignment of EDITED notices in /me message. Fixes part of #23101.
2022-10-06 08:57:05 +02:00
vertical-align: middle;
css: Use SCSS nesting in zulip.scss for `.sender-status`.
2020-05-16 13:56:31 +02:00
}
message_edit: Fix vertical alignment of input area in /me messages. Fixes #23101.
2022-10-06 09:10:57 +02:00
&.sender-status-edit {
/* Hackery to place the textarea for the message edit form nicely
for /me messages. */
vertical-align: top;
line-height: 0;
status-message: Add margin-top to sender info to avoid overlap. Earlier, the sender info would overlap with the edit compose area because of another class applying "margin-top" to keep the sender info properly aligned when the message is not being edited. However, that "margin-top" had to be changed when the edit compose is opened. This commits adds that "margin-top" to sender info to make sure that it doesn't overlap with the edit compose area.
2023-05-01 18:01:26 +02:00
margin-top: 4px !important;
message_edit: Fix vertical alignment of input area in /me messages. Fixes #23101.
2022-10-06 09:10:57 +02:00
.message_edit_notice {
line-height: 0;
}
}
Fix placement of EDITED in one line status messages. Fixes #836.
2016-06-01 19:57:04 +02:00
}
Redesign styles for message pane (imported from commit 394249d58f1cc3b976b432bbc421b99510e7fff9)
2014-01-31 21:36:31 +01:00
.message_edit_notice {
font-size: 10px;
dark-mode: Change edit notice medium grey to translucent. This changes the font color from a medium grey to the base font color plus an opacity of half.
2017-11-30 22:35:07 +01:00
opacity: 0.5;
styles: Replace Sass with PostCSS. It’s about as fast as node-sass (faster, according to their benchmarks) and more flexible. Autoprefixer is neat: we can now go delete all our -moz-, -webkit-, etc. lines and have them autogenerated as necessary based on .browserslistrc. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-08-27 01:23:48 +02:00
user-select: none;
css: Improve EDITED styling for non-English languages. In some non-English languages, including Russian, the translation of EDITED does not properly fit. The best solution is probably something bigger or having translators abbreviate this string, but it's worth at least this minimal change to fix extremely ugly overlap behavior for this widget. Actual CSS written by Greg Price.
2021-09-16 21:53:09 +02:00
white-space: nowrap;
styles: Add overflow: hidden fallback for overflow: clip. overflow: clip is missing in Safari < 16. https://caniuse.com/css-overflow Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-12-25 05:58:13 +01:00
overflow-x: hidden;
css: Improve EDITED styling for non-English languages. In some non-English languages, including Russian, the translation of EDITED does not properly fit. The best solution is probably something bigger or having translators abbreviate this string, but it's worth at least this minimal change to fix extremely ugly overlap behavior for this widget. Actual CSS written by Greg Price.
2021-09-16 21:53:09 +02:00
overflow-x: clip;
Redesign styles for message pane (imported from commit 394249d58f1cc3b976b432bbc421b99510e7fff9)
2014-01-31 21:36:31 +01:00
}
css: Remove blue color, underline and transition effect from msg time. This looks most likely a regression. Added `.messagebox-content` to move priority of color set by us on `.messsage_time` above others.
2022-08-04 14:19:26 +02:00
.messagebox-content .message_time {
Move timestamps to the right (imported from commit 1fb3e726b32065755cf1ff28e1371bc75609450e)
2014-03-10 16:11:34 +01:00
display: block;
time: Increase font-size to 13px. This is an effort to better unify the size of the timestamp text with the redesigned hover controls. CZO discussion: https://chat.zulip.org/#narrow/stream/6-frontend/topic/redesigned.20hover.20icons.20.2326283/near/1621756
2023-08-09 19:32:38 +02:00
font-size: 13px;
message_time: Lighten font-weight to 350. The tabular figures in Source Sans 3 place a foot on the 1, and overall just feel visually a little heavier than their proportional counterparts. To compensate for that, this takes advantage of the variable-font properties of Source Sans 3 to subtly drop the weight to keep the timestamp readable but not in fierce competition with the message area.
2023-08-24 17:39:00 +02:00
font-weight: 350;
css: Change look of date and time in message list. Fixes #21752.
2022-08-04 15:35:52 +02:00
text-align: right;
css: Increase opacity for grey elements. The message timestamp and a few settings elements looked off with the new 25% off white dark theme font color.
2023-05-17 01:52:19 +02:00
opacity: 0.8;
css: Color tweaks.
2023-05-13 08:30:13 +02:00
color: var(--color-text-default);
css: Change look of date and time in message list. Fixes #21752.
2022-08-04 15:35:52 +02:00
letter-spacing: 0.02em;
css: Remove blue color, underline and transition effect from msg time. This looks most likely a regression. Added `.messagebox-content` to move priority of color set by us on `.messsage_time` above others.
2022-08-04 14:19:26 +02:00
/* Disable blue link styling for the message timestamp link. */
&:hover {
text-decoration: none;
time: Align :hover color with message controls.
2023-07-24 21:31:13 +02:00
color: var(--color-message-action-interactive);
css: Remove blue color, underline and transition effect from msg time. This looks most likely a regression. Added `.messagebox-content` to move priority of color set by us on `.messsage_time` above others.
2022-08-04 14:19:26 +02:00
}
Implement new unread marker style as background for timestamp (imported from commit e7782d98216f77f6a018c4c01e88aa57eb05144e)
2014-02-07 00:50:23 +01:00
}
messages: Add spinner for messages sent on slow connections. At times, it might get confusing for users who are on slow connections if their messages has not been sent even after 5s. Including a spinner that will only show up after 5 seconds has elapsed will keep user informed about their slow connection. 5s is set as minimum time because showing up a spinner before than might be distracting for users on normal connections. Fixes: #19328.
2023-03-17 19:54:09 +01:00
.messagebox-content .slow-send-spinner {
display: block;
font-size: 12px;
text-align: right;
css: Increase opacity for grey elements. The message timestamp and a few settings elements looked off with the new 25% off white dark theme font color.
2023-05-17 01:52:19 +02:00
opacity: 0.8;
css: Color tweaks.
2023-05-13 08:30:13 +02:00
color: var(--color-text-default);
messages: Add spinner for messages sent on slow connections. At times, it might get confusing for users who are on slow connections if their messages has not been sent even after 5s. Including a spinner that will only show up after 5 seconds has elapsed will keep user informed about their slow connection. 5s is set as minimum time because showing up a spinner before than might be distracting for users on normal connections. Fixes: #19328.
2023-03-17 19:54:09 +01:00
animation: rotate 1s infinite linear;
}
Move timestamps to the right (imported from commit 1fb3e726b32065755cf1ff28e1371bc75609450e)
2014-03-10 16:11:34 +01:00
.status-time {
top: 8px !important;
Fix issues with message editing and status message layouts (imported from commit 3ec5c6ccf6c20a6c102075887b6ff36afc613bdd)
2014-01-31 23:52:18 +01:00
}
Modify message box layout and spacing. * Modify the narrow icon in FontAwesome to make it better align to the pixel grid and display well on Windows+Chrome. * Move the message controls to the right * Hide the message info icon until the message is hovered / selected * Switch the star to a gray version * Increase the size of the gravatar * Adjust the spacing * Add the right-side message pointer * Fix private message background colors and mention colors * Modify star count test to account for new stars * Bug fixes for stream subscription messages and other miscellanea. (imported from commit 3d3d9de7e03f3658c5c78b492051b2b7f795487d)
2013-05-21 17:47:44 +02:00
.message_controls {
icons: Add microlayout for new icons. This, along with the preceding commits, fixes #25903.
2023-07-17 22:43:21 +02:00
display: flex;
align-items: baseline;
icons: Implement monochrome colors and scaled active state.
2023-07-17 22:35:29 +02:00
font-size: 16px;
styles: Rename .scss files back to .css. css-loader@4 broke @import statements referencing files with extensions other than .css, unless those @import statements are compiled away by another loader. Upstream is more interested in arguing that such @import statements are semantically incorrect than applying the one line fix. https://github.com/webpack-contrib/css-loader/issues/1164 Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 22:23:01 +02:00
/* This is a bit tricky; we need to reserve space for the message
controls even when the message isn't hovered, so that hover
doesn't disturb the layout. Usually that would be just
visibility: hidden, but that cannot be animated, so we set
opacity as well, which can be animated. */
message_controls: Don't set css properties for all `div`s in it. This tends to behave badly when we add new elements which don't want these properties.
2021-04-14 09:24:35 +02:00
.message_control_button {
css: Use SCSS nesting for message_controls region.
2019-03-19 21:17:48 +01:00
opacity: 0;
message_controls: Prevent clicks via visibility & not pointer-events. Previously, the message controls had a bug where they would trigger on mobile with a single tap over the area they occupy when visible. This is wrong because a user would expect to first see the controls and only trigger them once they are visible (with a second tap). The above bug is caused by the fact that we were using "opacity: 0" on ".message_controls > div" to hide the controls and "opacity: 1" on ".messagebox &:hover .message_controls > div" to show the controls on hover, however, this would not effect the click action because "opacity". So we used "pointer-events: none;" and "pointer-events: all;" with the hopes that it would prevented the above bug, but in practice, it didn't. (the most probable explanation being that tapping the message_control area would cause the "&:hover" rule to trigger and change the "pointer-event" to "all" before it could prevent the click trigger, But that explanation is just conjecture.) This commit replaces both "pointer-events" attributes with "visibility: hidden" and "visibility: visible" respectively. The result being that the message_controls behave identically to before, except without the above bug. The addition to the ".has_actions_popover .info" selector is important because without it, we would regress on issue #3172. Trivia: An alternate approach to using "opacity" is to set the "display" attribute to "none", however, using "display" prevents the transition from animating (which is probably why we were using opacity here in the first place). "visibility" does not prevent the transition from animating. History: The "pointer-events" attribute was introduced in 4d5aa3ddc9e603d2216738f3dffa59ec09ffd830 and it replaced prior code which relied on the "visibility" attribute... But it seems PR #3792 was mostly focused on improving the positioning through removal of `display: none`, but introduced opacity to make the animations work rather than visibility as the replacement solution, which requires the pointer-events hack and resulted in the bug described here. Fixes the second bug described in #13642.
2020-06-20 11:11:58 +02:00
visibility: hidden;
css: Use SCSS nesting for message_controls region.
2019-03-19 21:17:48 +01:00
transition: all 0.2s ease;
icons: Add microlayout for new icons. This, along with the preceding commits, fixes #25903.
2023-07-17 22:43:21 +02:00
width: var(--message-box-icon-width);
height: var(--message-box-icon-height);
message_controls: Make click area for icons more uniform. Previously user have to click pixel perfect on the message controls icons to achieve the click action. This commit will uniformly increases the click target area for the icons. Tweaked by tabbott to avoid some weird glitches.
2020-07-04 02:13:10 +02:00
text-align: center;
icons: Implement monochrome colors and scaled active state.
2023-07-17 22:35:29 +02:00
color: var(--color-message-action-visible);
message_controls: Make click area for icons more uniform. Previously user have to click pixel perfect on the message controls icons to achieve the click action. This commit will uniformly increases the click target area for the icons. Tweaked by tabbott to avoid some weird glitches.
2020-07-04 02:13:10 +02:00
emoji: Migrate popover from Bootstrap to Tippy. Fixes part of #23632.
2023-08-25 12:19:43 +02:00
& i {
message_controls: Make click area for icons more uniform. Previously user have to click pixel perfect on the message controls icons to achieve the click action. This commit will uniformly increases the click target area for the icons. Tweaked by tabbott to avoid some weird glitches.
2020-07-04 02:13:10 +02:00
vertical-align: middle;
icons: Improve hover, focus states and target areas.
2023-07-19 19:08:38 +02:00
/* TODO: Math for these values, possibly with variables.
In short, the icon body is 16px square; the current
area for the icon is 26px wide by 25px tall, so these
values ensure a 26px x 25px clickable area for the icon. */
padding: 2.5px 3px;
&:active {
transform: scale(0.92);
transform-origin: center;
outline: 0;
transition: unset;
}
icons: Implement monochrome colors and scaled active state.
2023-07-17 22:35:29 +02:00
icons: Display focused icons only without default outline. The :focus-visible selector is more appropriate here, as that enables browsers to determine whether focus should be displayed or not. That's generally the case with keyboard-achieved focus, but pointers and fingers generally do not need focus to be displayed. By not displaying a different icon color on simple :focus, this will also ensure that star icons behave predictably when hovered or focused via keyboard in both starred and unstarred states.
2023-08-17 21:30:41 +02:00
&:focus {
/* Remove the outline but do not color on focus;
focus-visible is more appropriate for the color
changes, as it only applies color when focus
is achieved from a keyboard or other pointerless
device. */
outline: 0;
}
icons: Improve hover, focus states and target areas.
2023-07-19 19:08:38 +02:00
&:hover,
&:focus-visible {
outline: 0;
color: var(--color-message-action-interactive);
}
icons: Implement new gold star color and states. This not only introduces a new gold color that works across light and dark modes, but it also separates out the hover and focus- visible styles for stars--regardless of whether a star has been filled or not.
2023-08-17 21:34:27 +02:00
/* Separate hover colors for stars */
&.star:hover,
&.star:focus-visible {
color: var(--color-message-star-action);
}
icons: Implement monochrome colors and scaled active state.
2023-07-17 22:35:29 +02:00
}
icons: Size vdots icon for greater prominence.
2023-07-26 17:49:15 +02:00
.zulip-icon-more-vertical {
/* Increase visual prominence of the vdots. */
font-size: 21px;
}
css: Use SCSS nesting for message_controls region.
2019-03-19 21:17:48 +01:00
}
Restyle and refactor .message_controls for better UX. This refactors the .message_controls to stop relying on absolute positioning and strange CSS, and throws them inline. This also restyles so they hang to the right of the time which is now always present. Fixes: #3761.
2017-02-23 23:33:57 +01:00
tippy: Append tooltips to the parent of the `reference`. This allows us to hide tooltips automatically when the parent container is hidden while tooltip is active. In an overlay, when a tooltip is active and `esc` is pressed, the tooltip will remain active without this commit. This has side effects of some properties of parent applying to tooltips if property is directly set to `div`. Through manual testing, only area where this was found was fixed.
2021-04-10 19:20:51 +02:00
/* Tooltips should not follow the width restrictions of their parent element. */
[data-tippy-root] {
width: max-content;
word-wrap: unset;
}
read_receipts: Add support for displaying read receipts. Adds an API endpoint for accessing read receipts for other users, as well as a modal UI for displaying that information. Enables the previously merged privacy settings UI for managing whether a user makes read receipts data available to other users. Documentation is pending, and we'll likely want to link to the documentation with help_settings_link once it is complete. Fixes #3618. Co-authored-by: Tim Abbott <tabbott@zulip.com>
2021-06-16 21:15:47 +02:00
> .view_read_receipts {
font-size: 14px;
height: 16px;
&:hover {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(200deg 100% 40%);
read_receipts: Add support for displaying read receipts. Adds an API endpoint for accessing read receipts for other users, as well as a modal UI for displaying that information. Enables the previously merged privacy settings UI for managing whether a user makes read receipts data available to other users. Documentation is pending, and we'll likely want to link to the documentation with help_settings_link once it is complete. Fixes #3618. Co-authored-by: Tim Abbott <tabbott@zulip.com>
2021-06-16 21:15:47 +02:00
}
}
css: Deduplicate CSS for message_control_button elements. Each copy set the same 3 properties, with the actions menu relying on the terribly named "info" class for its copy.
2021-06-12 00:00:45 +02:00
.edit_content {
icons: Add microlayout for new icons. This, along with the preceding commits, fixes #25903.
2023-07-17 22:43:21 +02:00
/* Icons for editing content are determined on message hover;
we set an empty `.edit_content` to have 0 height in order to
preserve the layout of the other icons prior to any hovering. */
&:empty {
height: 0;
}
css: Deduplicate CSS for message_control_button elements. Each copy set the same 3 properties, with the actions menu relying on the terribly named "info" class for its copy.
2021-06-12 00:00:45 +02:00
&:hover {
cursor: pointer;
}
}
css: Use SCSS nesting for message_controls region.
2019-03-19 21:17:48 +01:00
&.sender-status-controls {
message_feed: Fix /me message alignment of message actions. These were apparently no longer aligned with the timestamp. Fixes #23101.
2022-10-06 08:21:37 +02:00
top: 8px;
css: Use SCSS nesting for message_controls region.
2019-03-19 21:17:48 +01:00
}
css: Limit message_failed class to inside message_controls. This is mostly for readability.
2019-03-19 21:19:47 +01:00
.message_failed {
css: Fix sizing and height of message_failed error icons. Inspired by work by Dominik Gryboś in #11479.
2019-03-19 21:25:44 +01:00
display: inline-flex;
justify-content: space-between;
css: Limit message_failed class to inside message_controls. This is mostly for readability.
2019-03-19 21:19:47 +01:00
cursor: pointer;
position: relative;
style: Fix the vertical alignment in message controls. This commit adds vertical-align: middle to .message_failed in zulip.css which was necessary as the alignment of .message_failed wasn't matching with rest of the message controls like .edit_content. This makes the look of the message controls better that they don't look shifted. Follow up #17666
2021-03-19 00:11:44 +01:00
vertical-align: middle;
css: Use grid layout for messages. Using grid layout moves us away from fixed widths and position for items where possible, which will make it easier to make messagebox changes without breaking formatting. Visual changes expected in this commit: - When the action buttons overlap the message content, it will no longer visually overlap but completely cut off the content — which is good, but means the messages can’t be as wide on narrow width views. There’s a slight improvement to this in an upcoming commit. Also removes the `last_message` CSS, which was busted due to the `last_message` calculation not correctly being updated for new messages arriving, and didn't improve styling.
2022-12-09 10:13:09 +01:00
padding-left: 2px;
css: Limit message_failed class to inside message_controls. This is mostly for readability.
2019-03-19 21:19:47 +01:00
css: Don't render message failed buttons. We used to make message failed button (retry / cancel) invisible when the message is successfully send instead of not rendering them. This resulted in them being accessible via keyboard when they are not visible. I couldn't find a reason for retry and cancel buttons to use `visibility` to be hidden instead of just being not rendered via `display: none`.
2023-01-19 08:34:22 +01:00
&.hide {
display: none;
}
css: Limit message_failed class to inside message_controls. This is mostly for readability.
2019-03-19 21:19:47 +01:00
.rotating {
display: inline-block;
message_failed: Hide focus rectangle while animating. The focus rectangle would spin along with the arrows, which looked bad. We do want to allow focus rectangles on this element for keyboard interaction, so we just disable the focus rectangle during the animation. Fixes #24110.
2023-01-19 19:40:27 +01:00
outline: none;
css: Limit message_failed class to inside message_controls. This is mostly for readability.
2019-03-19 21:19:47 +01:00
animation: rotate 1s infinite linear;
}
message view: Show failed message icon tooltips similar to other icons. We had tooltips bound to failed message action icons, because of slightly different html structure for these action buttons as compared to other message action buttons. There were some minor problems due to this. First there was difference of delay in which we show other normal action button tooltips. Second we had to add extra checks to handle tooltip content for these buttons in tippyjs module. This is fixed by having same html structure for failed message buttons as for other message action buttons.
2021-07-17 15:00:38 +02:00
.failed_message_action {
opacity: 1 !important;
scheduled_message_overlay: Add a failed delivery indicator. Fixes #25501
2023-05-13 10:50:52 +02:00
color: var(--color-failed-message-send-icon);
message view: Show failed message icon tooltips similar to other icons. We had tooltips bound to failed message action icons, because of slightly different html structure for these action buttons as compared to other message action buttons. There were some minor problems due to this. First there was difference of delay in which we show other normal action button tooltips. Second we had to add extra checks to handle tooltip content for these buttons in tippyjs module. This is fixed by having same html structure for failed message buttons as for other message action buttons.
2021-07-17 15:00:38 +02:00
font-weight: bold;
css: Use grid layout for messages. Using grid layout moves us away from fixed widths and position for items where possible, which will make it easier to make messagebox changes without breaking formatting. Visual changes expected in this commit: - When the action buttons overlap the message content, it will no longer visually overlap but completely cut off the content — which is good, but means the messages can’t be as wide on narrow width views. There’s a slight improvement to this in an upcoming commit. Also removes the `last_message` CSS, which was busted due to the `last_message` calculation not correctly being updated for new messages arriving, and didn't improve styling.
2022-12-09 10:13:09 +01:00
padding: 1px;
message view: Show failed message icon tooltips similar to other icons. We had tooltips bound to failed message action icons, because of slightly different html structure for these action buttons as compared to other message action buttons. There were some minor problems due to this. First there was difference of delay in which we show other normal action button tooltips. Second we had to add extra checks to handle tooltip content for these buttons in tippyjs module. This is fixed by having same html structure for failed message buttons as for other message action buttons.
2021-07-17 15:00:38 +02:00
}
message_controls: Inherit visibility from `.message_failed`. Previously, there was a bug where a failed message would only show the `.message_failed` icons on hover, the intent was for them to always be visible if a message failed to send. The cause of the above bug was that in e7b1de8ace45c91034b535df8d8ab7f96c885a04 we modified the html structure of the icons such that each icon was inside its own div, which possessed the `message_control_button` class, and both such divs were inside a `.message_failed` div. The unintended consequence of this change was that the rule `.message_controls .message_control_button` would apply `visibility: hidden` to the icons. Hence, this commit explicitly sets the visibility of `.message_failed .message_control_button` to `inherit`.
2021-12-12 14:32:32 +01:00
.message_control_button {
visibility: inherit;
}
css: Limit message_failed class to inside message_controls. This is mostly for readability.
2019-03-19 21:19:47 +01:00
}
message-controls: Use <i> tag for starred message icon. Throughout the codebase we use <i> tag for icons. This commit will add <i> tag inside the starred message div and fa classes are now used with this <i> tag. The starred message div is now consistent with other message_controls divs. Tweaked by tabbott to use the name star_container for better readability.
2020-07-03 17:49:19 +02:00
.star_container {
&:not(.empty-star) {
icons: Implement monochrome colors and scaled active state.
2023-07-17 22:35:29 +02:00
/* Color, opacity, and visibility, as though the message is hovered. */
icons: Implement new gold star color and states. This not only introduces a new gold color that works across light and dark modes, but it also separates out the hover and focus- visible styles for stars--regardless of whether a star has been filled or not.
2023-08-17 21:34:27 +02:00
color: var(--color-message-star-action);
icons: Implement monochrome colors and scaled active state.
2023-07-17 22:35:29 +02:00
opacity: 1;
message-controls: Use <i> tag for starred message icon. Throughout the codebase we use <i> tag for icons. This commit will add <i> tag inside the starred message div and fa classes are now used with this <i> tag. The starred message div is now consistent with other message_controls divs. Tweaked by tabbott to use the name star_container for better readability.
2020-07-03 17:49:19 +02:00
visibility: visible !important;
}
}
Restyle and refactor .message_controls for better UX. This refactors the .message_controls to stop relying on absolute positioning and strange CSS, and throws them inline. This also restyles so they hang to the right of the time which is now always present. Fixes: #3761.
2017-02-23 23:33:57 +01:00
}
css: Use SCSS nesting for message_controls region.
2019-03-19 21:17:48 +01:00
.star {
&:hover {
cursor: pointer;
}
Restyle and refactor .message_controls for better UX. This refactors the .message_controls to stop relying on absolute positioning and strange CSS, and throws them inline. This also restyles so they hang to the right of the time which is now always present. Fixes: #3761.
2017-02-23 23:33:57 +01:00
}
Attempt at making stream names more prominent when skimming. Known issues: * Narrowing links sort of broken * "S/H" is a terrible selector (imported from commit 14d309b55dfaa4c4bc5cb1310a111a46f2fb7e20)
2012-10-17 22:03:00 +02:00
.message_header {
Restyle compose window slightly. (imported from commit 390dcdfade8ceab5d20b29271a79476d74bb2525)
2012-09-27 21:34:15 +02:00
vertical-align: middle;
tools/css: Trim whitespace around CSS values.
2017-03-14 16:36:22 +01:00
text-align: left;
Make various UI elements look and work better when the font size changes (imported from commit 0229aaf059941892eaaa16fb20a807015136a7ca)
2013-02-13 23:23:26 +01:00
/* We can overflow-y if the font size gets big */
tools/css: Trim whitespace around CSS values.
2017-03-14 16:36:22 +01:00
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
font-size: calc(15em / 14);
line-height: 120%;
Fix unread markers and selection border (imported from commit 275f4f7d95c7842bfbfd5c47509b19275bba254e)
2014-02-21 19:40:13 +01:00
position: relative;
z-index: 0;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
background-color: var(--color-background);
.message-header-contents {
display: flex;
align-items: center;
justify-content: space-between;
height: 28px;
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
border: 1px solid var(--color-message-header-contents-border);
css: Change border-bottom color for message header.
2023-05-15 07:17:56 +02:00
border-bottom-color: var(--color-message-header-contents-border-bottom);
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
border-radius: 7px 7px 0 0;
}
&.message_header_stream {
/* Add box shadow to hide message border (first one) and message
selected box shadow (second one) that are visible
due to top borders of sticky recipient bar being curved. */
dependencies: Upgrade JavaScript dependencies. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 23:08:07 +02:00
box-shadow:
-1px -5px 0 5px var(--color-background),
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
1px -5px 0 0 var(--color-background);
& a.message_label_clickable {
color: var(--color-text-message-header);
&:hover {
color: var(--color-text-message-header) !important;
text-decoration: none;
}
}
.stream_topic_separator {
line-height: 0;
color: var(--color-message-header-icon-non-interactive);
position: relative;
top: 0.5px;
}
.stream_topic {
display: inline-block;
padding: 5px 6px 5px 2px;
height: 17px;
line-height: 17px;
overflow: hidden;
text-overflow: ellipsis;
.message_label_clickable.narrows_by_topic {
position: relative;
top: 0.5px;
message_header: Abbreviate topic names in all overlays. Fixes #25353
2023-05-02 17:44:22 +02:00
overflow: hidden;
text-overflow: ellipsis;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
}
}
stream_privacy: Use new lock and hashtag icons. This commit doesn't modify the lock and hashtag icon in settings.
2023-04-08 02:49:01 +02:00
.stream-privacy i {
font-size: 15px;
&.zulip-icon-globe,
&.zulip-icon-hashtag {
position: relative;
top: -0.5px;
}
}
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
}
Transition from tables to divs for the message list. This breaks our casperjs tests. (imported from commit c63181c73a24eed4a80bfa56966d1f0871c5edb2)
2013-12-09 20:15:33 +01:00
}
css: Rename .message_list to .message-feed.
2023-08-14 20:32:53 +02:00
.message-feed {
css: Use SCSS nesting in zulip.scss for `.message_list`.
2020-05-16 14:31:55 +02:00
.recipient_row {
css: Move `10px` navbar bottom padding above message header. This is a more natural place for this extra padding than below the navbar. Padding below navbar was primarily needed to hide the message content above the sticky header while scrolling the message feed. We are still able to do with this change without partially hiding the loading message indicator. Fixes #25159
2023-04-28 18:07:06 +02:00
/* Browser overlaps extra top padding of message header and
the bottom border message if this margin is not present. */
margin-bottom: 1px;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
border-radius: 5px;
.message_row:last-of-type {
border-radius: 0 0 7px 7px;
border-bottom: 1px solid var(--color-message-list-border);
.unread-marker-fill {
border-radius: 0 0 0 7px;
height: calc(100% - 2px);
}
.messagebox {
border-radius: 0 0 7px 7px;
message_row: Use equal top/bottom padding in message content. We had the `3px 0 1px` padding before migration to use grid, then I switched it to use `4px 0 1px` since we were planning to use blue box border which seemed to have helped that case. Since we switched to using outline for blue box, it makes sense to just use equal padding.
2023-05-23 04:37:50 +02:00
padding-bottom: 4px;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
}
}
.message_header + .message_row {
.messagebox {
padding-top: 5px;
}
}
css: Use SCSS nesting in zulip.scss for `.message_list`.
2020-05-16 14:31:55 +02:00
}
css: Reorder zulip.scss to put `.message_list` alongside.
2020-05-16 14:30:24 +02:00
floating_recipient_bar: Replace with sticky header.
2022-12-19 09:16:05 +01:00
.message_header {
position: sticky;
navbar_alerts: Adjust app based on navbar height.
2023-05-21 20:52:46 +02:00
top: var(--navbar-fixed-height);
css: Fix date row overlapping with message header. When there was an unread message below date row, the date row overlaps with the message header. This was a result of #23538 not adjusting the message header z-index along with the z-index of date row.
2023-05-01 17:47:04 +02:00
/* Needs to be higher than the z-index of date_row. */
z-index: 4;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
box-shadow: 0 -1px 0 0 var(--color-background);
css: Move message header padding to the element with border. Apply border and top margin on the same element so that browser has no way to introduce a gap between them.
2023-05-17 07:11:09 +02:00
.message-header-contents {
margin-top: var(--header-padding-bottom);
}
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
&.sticky_header {
css: Fix unread marker leaking through message header.
2023-05-12 10:56:55 +02:00
box-shadow: var(--unread-marker-left) 0 0 0 var(--color-background);
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
.recipient_row_date {
display: block;
}
}
css: Use SCSS nesting in zulip.scss for `.floating_recipient`.
2020-05-16 15:58:09 +02:00
}
css: Reorder zulip.scss to put `.floating_recipient` alongside.
2020-05-16 15:56:28 +02:00
}
Switch message pane headers to new design (imported from commit f640641553779450f9d9d15e5586ef38e068367b)
2014-01-15 17:11:37 +01:00
.stream_label {
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
display: flex;
align-items: center;
gap: 5px;
padding: 5px 2px 5px 10px;
Restyle subject editing form (imported from commit f2093939fa8069b73e7c785a4dd835eab4c825cd)
2014-01-17 16:11:18 +01:00
height: 17px;
line-height: 17px;
Switch message pane headers to new design (imported from commit f640641553779450f9d9d15e5586ef38e068367b)
2014-01-15 17:11:37 +01:00
position: relative;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
top: 0.5px;
Switch message pane headers to new design (imported from commit f640641553779450f9d9d15e5586ef38e068367b)
2014-01-15 17:11:37 +01:00
text-decoration: none;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
font-weight: 600;
overflow: hidden;
Restyle subject editing form (imported from commit f2093939fa8069b73e7c785a4dd835eab4c825cd)
2014-01-17 16:11:18 +01:00
recipient_row: Generalize class name for icon in recipient_row.
2021-11-19 18:56:24 +01:00
.recipient-row-stream-icon {
css: Use SCSS nesting in zulip.scss for `.stream_label`.
2020-05-16 16:00:24 +02:00
font-size: 12px;
icons: Replace fa-globe icon with a custom globe icon.
2022-03-01 11:25:40 +01:00
line-height: 12px;
}
.zulip-icon.zulip-icon-globe {
position: relative;
top: 1px;
css: Use SCSS nesting in zulip.scss for `.stream_label`.
2020-05-16 16:00:24 +02:00
}
Switch message pane headers to new design (imported from commit f640641553779450f9d9d15e5586ef38e068367b)
2014-01-15 17:11:37 +01:00
css: Use SCSS nesting in zulip.scss for `.stream_label`.
2020-05-16 16:00:24 +02:00
&:hover {
text-decoration: none;
}
Revert "Make recipient bar styling more compact and clean." This reverts commit 8e2d9b8f680254f1df3a5a6e07e89c7213cf6d39. This adds the arrows back to the recipient bars because even though it's not our end state, it looks better than the boxy design that we had in between.
2018-02-16 01:47:38 +01:00
stream_privacy: Use new lock and hashtag icons. This commit doesn't modify the lock and hashtag icon in settings.
2023-04-08 02:49:01 +02:00
.stream-privacy {
min-width: unset;
width: 16px;
height: 16px;
Revert "Make recipient bar styling more compact and clean." This reverts commit 8e2d9b8f680254f1df3a5a6e07e89c7213cf6d39. This adds the arrows back to the recipient bars because even though it's not our end state, it looks better than the boxy design that we had in between.
2018-02-16 01:47:38 +01:00
stream_privacy: Use new lock and hashtag icons. This commit doesn't modify the lock and hashtag icon in settings.
2023-04-08 02:49:01 +02:00
.hashtag {
padding-right: 0;
&::after {
font-size: 16px;
}
}
}
Restyle subject editing form (imported from commit f2093939fa8069b73e7c785a4dd835eab4c825cd)
2014-01-17 16:11:18 +01:00
}
message_header: Fix overlap on mobile with flex. Previously .recipient_row_date was positioned absolutely, allowing it to overlap with the topic name on narrow screens. This can be solved by using flexbox. To implement the empty space between the bar controls and the date on wider screens we move the date outside of the bar controls (which also makes more sense semantically since the date isn't a control). Fixes #15501.
2020-07-06 15:56:45 +02:00
.recipient_bar_controls {
icons: Change mute icon from bell to speaker. This icon is more standard, and lets us use a speaker icon for other applications. Fixes #21751
2022-04-21 17:31:34 +02:00
display: flex;
message_header: Fix overlap on mobile with flex. Previously .recipient_row_date was positioned absolutely, allowing it to overlap with the topic name on narrow screens. This can be solved by using flexbox. To implement the empty space between the bar controls and the date on wider screens we move the date outside of the bar controls (which also makes more sense semantically since the date isn't a control). Fixes #15501.
2020-07-06 15:56:45 +02:00
flex-grow: 1;
icons: Change mute icon from bell to speaker. This icon is more standard, and lets us use a speaker icon for other applications. Fixes #21751
2022-04-21 17:31:34 +02:00
align-items: center;
message_header: Add support to follow topic from the message header bar. This commit replaces the mute/unmute topic button in the message header bar with a button that allows the user to set the visibility_policy of the topic to muted, unmuted, followed or inherit. The button in the message header bar has an icon corresponding to the current visibility policy of the topic. In a muted stream: A click on the button opens a popover with 'Mute', 'Default', 'Unmute', and 'Follow' options. In a not muted stream: A click on the button opens a popover with 'Mute', 'Default', and 'Follow' options. 'Unmute' option is available only when the visibility_policy is set to 'Unmute'. The current visibility_policy of the topic is highlighted in the popover.
2023-07-25 17:21:20 +02:00
message_feed: Vertically align link icon in recipient bar.
2023-11-17 16:26:05 +01:00
.external-topic-link {
/* Vertically center the external link
icon inside its containing anchor. */
display: flex;
align-items: center;
}
message_header: Add support to follow topic from the message header bar. This commit replaces the mute/unmute topic button in the message header bar with a button that allows the user to set the visibility_policy of the topic to muted, unmuted, followed or inherit. The button in the message header bar has an icon corresponding to the current visibility policy of the topic. In a muted stream: A click on the button opens a popover with 'Mute', 'Default', 'Unmute', and 'Follow' options. In a not muted stream: A click on the button opens a popover with 'Mute', 'Default', and 'Follow' options. 'Unmute' option is available only when the visibility_policy is set to 'Unmute'. The current visibility_policy of the topic is highlighted in the popover.
2023-07-25 17:21:20 +02:00
.change_visibility_policy {
cursor: pointer;
i {
controls: Present bell icon as a block. This gives better positioning control over this icon, while not inviting the side-effects and headaches of introducing another flexbox.
2023-08-22 16:55:39 +02:00
display: block;
message_header: Add support to follow topic from the message header bar. This commit replaces the mute/unmute topic button in the message header bar with a button that allows the user to set the visibility_policy of the topic to muted, unmuted, followed or inherit. The button in the message header bar has an icon corresponding to the current visibility policy of the topic. In a muted stream: A click on the button opens a popover with 'Mute', 'Default', 'Unmute', and 'Follow' options. In a not muted stream: A click on the button opens a popover with 'Mute', 'Default', and 'Follow' options. 'Unmute' option is available only when the visibility_policy is set to 'Unmute'. The current visibility_policy of the topic is highlighted in the popover.
2023-07-25 17:21:20 +02:00
}
}
message_header: Fix overlap on mobile with flex. Previously .recipient_row_date was positioned absolutely, allowing it to overlap with the topic name on narrow screens. This can be solved by using flexbox. To implement the empty space between the bar controls and the date on wider screens we move the date outside of the bar controls (which also makes more sense semantically since the date isn't a control). Fixes #15501.
2020-07-06 15:56:45 +02:00
}
Add Date Headers to Floating Bar and Message Headers. This adds the date of a block of messages to the floating recipient bar along with message headers of blocks that are the first of a particular day.
2016-08-18 22:18:33 +02:00
message_header: Fix overlap on mobile with flex. Previously .recipient_row_date was positioned absolutely, allowing it to overlap with the topic name on narrow screens. This can be solved by using flexbox. To implement the empty space between the bar controls and the date on wider screens we move the date outside of the bar controls (which also makes more sense semantically since the date isn't a control). Fixes #15501.
2020-07-06 15:56:45 +02:00
.recipient_row_date {
css: Change look of date and time in message list. Fixes #21752.
2022-08-04 15:35:52 +02:00
color: var(--color-date);
font-size: calc(12em / 14);
padding: 0 10px;
text-align: right;
display: flex;
align-items: center;
font-style: normal;
Add Date Headers to Floating Bar and Message Headers. This adds the date of a block of messages to the floating recipient bar along with message headers of blocks that are the first of a particular day.
2016-08-18 22:18:33 +02:00
font-weight: 600;
css: Change look of date and time in message list. Fixes #21752.
2022-08-04 15:35:52 +02:00
line-height: 17px; /* identical to box height, or 131% */
letter-spacing: 0.04em;
text-transform: uppercase;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
padding-top: 1px;
Add Date Headers to Floating Bar and Message Headers. This adds the date of a block of messages to the floating recipient bar along with message headers of blocks that are the first of a particular day.
2016-08-18 22:18:33 +02:00
message_list: Rename confusing hide-date CSS class. The previous hide-date CSS class had a semantic meaning of "this recipient row has the same date as the previous one"; since we're now having logic read that value, it's worth giving it a semantic name that makes that code easier to understand.
2023-03-21 20:20:33 +01:00
/* Display the date when unchanged only for sticky headers. */
&.recipient_row_date_unchanged {
display: none;
.sticky_header & {
display: block;
}
}
message_list: Fix duplicate date headers at the top of message feed. Hide the date on date separator when it is above a sticky header; see the comments for the full algorithm.
2023-02-28 19:53:32 +01:00
&.hide-date-separator-header {
css: Use SCSS nesting in zulip.scss for `.recipient_row_date`.
2020-05-16 16:01:27 +02:00
display: none;
}
Add Date Headers to Floating Bar and Message Headers. This adds the date of a block of messages to the floating recipient bar along with message headers of blocks that are the first of a particular day.
2016-08-18 22:18:33 +02:00
}
msg_recipient_bar: Add spacing between recipient_bar icons. Fixes the problem of recipient_bar_icons being too close to each other. To improve spacing between them, classes are added, namely recipient_bar_icon_link (for link icon) and reciepient_bar_icon (for other icons). CSS for spacing these classes correctly, using padding-left and padding-right, has been added zulip.scss Manually tested for cases with single and multiple links present. Fixes #14364.
2020-04-01 20:00:43 +02:00
.recipient_bar_icon {
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
color: var(--color-message-header-icon-interactive);
opacity: 0.2;
padding-left: 6px;
padding-right: 6px;
&:hover {
opacity: 0.4 !important;
actions: Show pointer on bell icon.
2023-08-23 21:12:17 +02:00
cursor: pointer;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
}
msg_recipient_bar: Add spacing between recipient_bar icons. Fixes the problem of recipient_bar_icons being too close to each other. To improve spacing between them, classes are added, namely recipient_bar_icon_link (for link icon) and reciepient_bar_icon (for other icons). CSS for spacing these classes correctly, using padding-left and padding-right, has been added zulip.scss Manually tested for cases with single and multiple links present. Fixes #14364.
2020-04-01 20:00:43 +02:00
}
Hide text for the > icon so that copy paste captures it Addresses Trac #1296 (imported from commit 650672b971f18b4e1bfb185987768b55504ee1e8)
2013-07-17 22:53:07 +02:00
.copy-paste-text {
/* Hide the text that we want copy paste to capture */
position: absolute;
text-indent: -99999px;
float: left;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
width: 0;
Hide text for the > icon so that copy paste captures it Addresses Trac #1296 (imported from commit 650672b971f18b4e1bfb185987768b55504ee1e8)
2013-07-17 22:53:07 +02:00
}
Animate/rotate the retry spinner while retrying local send after failure (imported from commit 13daa2b956baecb8e30fbc5807bcd969eb46a653)
2014-01-03 20:39:12 +01:00
@keyframes rotate {
Clean zulip.css to use 4 space indents.
2017-03-18 23:49:11 +01:00
from {
transform: rotate(0deg);
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
Clean zulip.css to use 4 space indents.
2017-03-18 23:49:11 +01:00
to {
transform: rotate(359deg);
}
Animate/rotate the retry spinner while retrying local send after failure (imported from commit 13daa2b956baecb8e30fbc5807bcd969eb46a653)
2014-01-03 20:39:12 +01:00
}
message-edit: Fade in message on update. When a message update comes back from the server and replaces an old message, it should fade in. There are two components to the fade: 1. The message fades in from opacity: 0 => 1. 2. The "edited" text will transform from X: -10 => X: 0.
2017-04-13 22:33:26 +02:00
@keyframes fadeInMessage {
0% {
opacity: 0;
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
message-edit: Fade in message on update. When a message update comes back from the server and replaces an old message, it should fade in. There are two components to the fade: 1. The message fades in from opacity: 0 => 1. 2. The "edited" text will transform from X: -10 => X: 0.
2017-04-13 22:33:26 +02:00
100% {
opacity: 1;
}
}
@keyframes fadeInEditNotice {
0% {
transform: translateX(-10px);
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
message-edit: Fade in message on update. When a message update comes back from the server and replaces an old message, it should fade in. There are two components to the fade: 1. The message fades in from opacity: 0 => 1. 2. The "edited" text will transform from X: -10 => X: 0.
2017-04-13 22:33:26 +02:00
100% {
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
transform: translateX(0);
message-edit: Fade in message on update. When a message update comes back from the server and replaces an old message, it should fade in. There are two components to the fade: 1. The message fades in from opacity: 0 => 1. 2. The "edited" text will transform from X: -10 => X: 0.
2017-04-13 22:33:26 +02:00
}
}
css: Use SCSS nesting for `.message_header_private_message`.
2020-05-16 16:19:36 +02:00
.message_header_private_message {
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
/* This is required for box-shadow appear above the message content. */
z-index: 1;
dependencies: Upgrade JavaScript dependencies. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 23:08:07 +02:00
box-shadow:
-1px -5px 0 5px var(--color-background),
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
1px -5px 0 0 var(--color-background);
background-color: var(--color-background);
.message-header-contents {
css: Increase border opacity for message header and content.
2023-05-08 20:31:18 +02:00
border-color: var(--color-private-message-header-border);
css: Change border-bottom color for message header.
2023-05-15 07:17:56 +02:00
border-bottom-color: var(--color-private-message-header-border-bottom);
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
background-color: var(--color-background-private-message-header);
}
floating_recipient_bar: Replace with sticky header.
2022-12-19 09:16:05 +01:00
css: Use SCSS nesting for `.message_header_private_message`.
2020-05-16 16:19:36 +02:00
.message_label_clickable {
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
display: flex;
padding: 5px 0 5px 10px;
font-weight: 600;
css: Use SCSS nesting for `.message_header_private_message`.
2020-05-16 16:19:36 +02:00
height: 17px;
line-height: 17px;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
color: var(--color-text-message-header);
Change a number of CSS properties to address various bugs. This mostly applies to the previous two commits. In principle, this could be teased out and merged into them, but the hassle here doesn't totally seem to be worth it. (imported from commit ee2469ca3762c50c6db49b93eec02b32589eafe3)
2013-06-27 08:49:38 +02:00
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
&:hover {
color: var(--color-text-message-header) !important;
text-decoration: none;
}
Removing shadow artifacts from composition area (imported from commit f957f26f60d2aedcb106e555b9558c8363cf9d61)
2013-07-18 21:30:37 +02:00
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
.private_message_header_icon {
font-size: 15px;
position: relative;
top: 1px;
width: 16px;
height: 16px;
}
message_headers: Abbrevate direct message recipient names. Abbrevated DM recipient names in message feeds, Drafts and Scheduled messages overlays by wrapping recipient names in span with class private_message_header_name and applying `overflow: hidden` and `text-overflow: ellipsis` CSS to it. Fixes #25353
2023-05-02 17:53:32 +02:00
.private_message_header_name {
overflow: hidden;
text-overflow: ellipsis;
}
css: Use SCSS nesting for `.message_header_private_message`.
2020-05-16 16:19:36 +02:00
}
New selection highlight style (imported from commit b23e8ddc08af131f74964ba7562eb071eaeb0a64)
2013-07-17 20:52:19 +02:00
}
css: Add background color for date row. The logic to avoid first unread message with a date row to not have an unread marker works purely based on `z-index` and seems to be working nicely. This avoids a bug where the background color of the date row of the first unread message is different from others.
2023-04-15 08:17:40 +02:00
.message_row.private-message {
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
background-color: var(--color-background-private-message-content);
css: Use SCSS nesting in zulip.scss for `.private-message`.
2020-05-16 16:23:28 +02:00
.date_row {
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
background-color: var(--color-background-private-message-content);
}
Change a number of CSS properties to address various bugs. This mostly applies to the previous two commits. In principle, this could be teased out and merged into them, but the hassle here doesn't totally seem to be worth it. (imported from commit ee2469ca3762c50c6db49b93eec02b32589eafe3)
2013-06-27 08:49:38 +02:00
}
css: Use SCSS nesting in zulip.scss for `.selected_message`.
2020-05-17 04:28:41 +02:00
.selected_message {
.messagebox-content {
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
/* We add an outline and shift it inside the message so that without
any vertical padding changes, we can have the outline surrounding
the message without overflowing the boundary of the message in any case. */
css: Increase constrast for blue box.
2023-05-11 21:46:11 +02:00
outline: 1px solid hsl(217deg 64% 59%);
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
border-radius: 5px;
outline-offset: -1px;
css: Use SCSS nesting in zulip.scss for `.selected_message`.
2020-05-17 04:28:41 +02:00
}
Add left side color bar (imported from commit cdba90d3a4e693838338b0a93cae38a741aa28c4)
2014-02-24 19:30:22 +01:00
}
Fix whitespace in CSS code (imported from commit 4b323781a0ef9ef63cd57ada3df8d50985b3f71c)
2013-07-22 20:08:53 +02:00
Change the layout of the message boxes in the message pane and make other message-related adjustments. Specifically: * Leave the avatar image as inline and round it. * Move timestamp to the left column. * Replace the "Info" link with a permanent info sign. * Move the pointer bar to the left. * Remove borders * Change selection background colors, and PM colors. * Introduce the "narrowing" icon into our FontAwesome set. * Modify the tests to account for the new "narrowing" icon and fixed a bug in star-finding. * Clean up CSS and add a more prominent color to private messages (imported from commit 8a8d6de8acccc52c0d16f5d1ce31aabdc72c88c8)
2013-05-10 22:48:02 +02:00
.message_sender {
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& i.zulip-icon.zulip-icon-bot {
css: Use SCSS nesting in zulip.scss for `.message_sender`.
2020-05-17 04:58:44 +02:00
font-size: 12px;
}
css: Reorder zulip.scss to put `.message_sender` alongside.
2020-05-17 04:57:44 +02:00
}
Rename zephyr_sender_{name,email} to just sender_*. (imported from commit 9bfa197a391e5dbdabf616244afb3634cdab1921)
2012-10-09 23:58:24 +02:00
.sender_name {
css: Display status emoji along with overflowing sender names. Even if sender name overflows the available space, we should show status emoji along with sender name by hiding the overflowing part of sender name.
2023-09-30 12:56:04 +02:00
display: inline-flex;
Make right side chevrons visible, lighten usernames, adjust stream list scrolling speed (imported from commit 8068bdf1ae7fd817fda36d7e32ea94e850ab5675)
2014-03-01 05:01:24 +01:00
font-weight: 700;
css: Color tweaks.
2023-05-13 08:30:13 +02:00
color: var(--color-text-sender-name);
css: Display status emoji along with overflowing sender names. Even if sender name overflows the available space, we should show status emoji along with sender name by hiding the overflowing part of sender name.
2023-09-30 12:56:04 +02:00
column-gap: 3px;
.sender_name_text {
overflow: hidden;
white-space: nowrap;
users: Add ellipsis only on names and show the indicator always. We now show the guest indicator even for long names and only truncate the names in right sidebar and the message feed.
2023-09-21 11:25:45 +02:00
display: inline-flex;
.user-name {
overflow: hidden;
text-overflow: ellipsis;
}
css: Display status emoji along with overflowing sender names. Even if sender name overflows the available space, we should show status emoji along with sender name by hiding the overflowing part of sender name.
2023-09-30 12:56:04 +02:00
}
css: Color tweaks.
2023-05-13 08:30:13 +02:00
}
css: Use SCSS nesting in zulip.scss for `.sender_name_hovered`.
2020-05-17 05:00:44 +02:00
.sender_name_hovered {
me_messages: Clean up unused .sender_name-in-status class.
2023-07-13 21:28:44 +02:00
.sender_name {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(200deg 100% 40%);
css: Use SCSS nesting in zulip.scss for `.sender_name_hovered`.
2020-05-17 05:00:44 +02:00
}
Modify message box layout and spacing. * Modify the narrow icon in FontAwesome to make it better align to the pixel grid and display well on Windows+Chrome. * Move the message controls to the right * Hide the message info icon until the message is hovered / selected * Switch the star to a gray version * Increase the size of the gravatar * Adjust the spacing * Add the right-side message pointer * Fix private message background colors and mention colors * Modify star count test to account for new stars * Bug fixes for stream subscription messages and other miscellanea. (imported from commit 3d3d9de7e03f3658c5c78b492051b2b7f795487d)
2013-05-21 17:47:44 +02:00
}
css: Deduplicate CSS for .always_visible_topic_edit.
2022-03-04 21:53:28 +01:00
.always_visible_topic_edit,
recent-topics: Mark as read using unread counters in Recent topics. The PR changes the following behaviors and UI: 1. Removes the checkmark button to mark the topic as read in "Recent Topics". 2. Make the unread messages counter be the button for marking all messages in the topic as read. The unread messages counter is made clickable and tooltip is set to "Mark as read". In "recent_topic_row.hbs", remove the checkmark button and add classes and attributes to ".unread_counter" to give it desirable behaviour on clicking. In "zulip.css" set "opacity: 0.7" for ".on_hover_topic_read". In "recent_topics.css" we set the background-color of unread counter to hsl(105, 2%, 50%) to decrease fading of unread counter. Fixes: #21654
2022-04-22 00:49:05 +02:00
.on_hover_topic_read,
recipient_row: Use unmute icon for topics in muted stream. Updated mute_or_unmute_topic to take visibility policy as parameter and set topic visibility_policy to the passed visibility_policy. In zulip.css, updated CSS to set opacity as per visibility_policy. Updated click handlers for recipient_row mute/unmute icons to work as per stream. Fixes #25124
2023-04-22 23:00:26 +02:00
.stream_unmuted.on_hover_topic_unmute,
.stream_muted.on_hover_topic_mute {
message_view: Add support for unmuting of topic from its recipient bar. Earlier, a user can only mute a topic from its recipient bar but can't unmute it from there (and in fact we displayed an option to mute even if the topic was already muted!). This commit fixes that bug and allows a user also to unmute the topic from its recipient bar. There are two core issues here; * We did not have code, an icon, etc. for the "already muted" case in the recipient bar logic at all. * We did not rerender messages in !excludes_muted_topics views when muting state changed. See: 660475bd0cda520eea86a0e3bcfeedc5245ed352 for background on when we started only rerendering the streams with excludes_muted_topics after muting changes. Rerendering of newly muted topics are important for live rendering if a user is narrowed to that topic itself, which are essentially all excludes_muted_topics narrows anyway. Hence, now, we rerender by calling the `rerender` function for muted topics (which is done just before we update the items for muting via the function: `update_items_for_topic_muting`). Tweaked by tabbott to add comments explaining the reasoning and long-term plans. Fixes #15223.
2021-04-30 07:44:43 +02:00
opacity: 0.7;
&:hover {
cursor: pointer;
opacity: 1;
}
}
css: Fix hover color for "Edit topic" icon in recipient bars. Previously, this had different hover behavior from the adjacent elements, which seems like a bug. The CSS for this component is shared with Recent Topics; we migrate the styling for on_hover_topic_read for consistency. Fixes #21273.
2022-03-01 07:07:28 +01:00
.on_hover_topic_edit,
recipient bars: Make unresolve topic CSS match resolve topic. This avoids showing a highlighted checkmark for resolve topics, which looks weird given that the topic name itself contains a "resolve topic" checkmark.
2021-07-13 18:12:02 +02:00
.on_hover_topic_unresolve,
message_view: Add resolve topic button in message recipient bar. Now, one can (un)resolve the topic from 2 places: 1. Stream popovers. 2. Message recipient bars. Fixes: #18988.
2021-06-27 09:16:03 +02:00
.on_hover_topic_resolve,
recipient_row: Use unmute icon for topics in muted stream. Updated mute_or_unmute_topic to take visibility policy as parameter and set topic visibility_policy to the passed visibility_policy. In zulip.css, updated CSS to set opacity as per visibility_policy. Updated click handlers for recipient_row mute/unmute icons to work as per stream. Fixes #25124
2023-04-22 23:00:26 +02:00
.stream_unmuted.on_hover_topic_mute,
.stream_muted.on_hover_topic_unmute {
message_view: Add support for unmuting of topic from its recipient bar. Earlier, a user can only mute a topic from its recipient bar but can't unmute it from there (and in fact we displayed an option to mute even if the topic was already muted!). This commit fixes that bug and allows a user also to unmute the topic from its recipient bar. There are two core issues here; * We did not have code, an icon, etc. for the "already muted" case in the recipient bar logic at all. * We did not rerender messages in !excludes_muted_topics views when muting state changed. See: 660475bd0cda520eea86a0e3bcfeedc5245ed352 for background on when we started only rerendering the streams with excludes_muted_topics after muting changes. Rerendering of newly muted topics are important for live rendering if a user is narrowed to that topic itself, which are essentially all excludes_muted_topics narrows anyway. Hence, now, we rerender by calling the `rerender` function for muted topics (which is done just before we update the items for muting via the function: `update_items_for_topic_muting`). Tweaked by tabbott to add comments explaining the reasoning and long-term plans. Fixes #15223.
2021-04-30 07:44:43 +02:00
opacity: 0.2;
styles: Fix stylelint rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-16 21:57:26 +02:00
message_view: Add support for unmuting of topic from its recipient bar. Earlier, a user can only mute a topic from its recipient bar but can't unmute it from there (and in fact we displayed an option to mute even if the topic was already muted!). This commit fixes that bug and allows a user also to unmute the topic from its recipient bar. There are two core issues here; * We did not have code, an icon, etc. for the "already muted" case in the recipient bar logic at all. * We did not rerender messages in !excludes_muted_topics views when muting state changed. See: 660475bd0cda520eea86a0e3bcfeedc5245ed352 for background on when we started only rerendering the streams with excludes_muted_topics after muting changes. Rerendering of newly muted topics are important for live rendering if a user is narrowed to that topic itself, which are essentially all excludes_muted_topics narrows anyway. Hence, now, we rerender by calling the `rerender` function for muted topics (which is done just before we update the items for muting via the function: `update_items_for_topic_muting`). Tweaked by tabbott to add comments explaining the reasoning and long-term plans. Fixes #15223.
2021-04-30 07:44:43 +02:00
&:hover {
cursor: pointer;
opacity: 0.7;
}
}
message feed: Show the 3-dots icon while actions popover is open. This commit enables the 3-dot menu to be visible while the associated actions popover is open using the fact that the 'has_actions_popover' class is attached to the message with an open popover. This approach solves the bug without any additional JavaScript code. Fixes part of #23157
2022-10-21 14:22:47 +02:00
/* Make the action icon on the message row
always visible while the popover is open */
.has_actions_popover .actions_hover {
visibility: visible !important;
pointer-events: all !important;
opacity: 1 !important;
popovers: Avoid focus outline on \vdots when actions popover is open. Now that we show the \vdots icon while the actions popover is open, there's a weird looking behavior where a focus outline appears around the \vdots icon, only if you clicked on the icon itself, not its square containing click arrow. Disable this unintended behavior, which disrupts the otherwise simulated state where focus is in the popover (but no row is focused).
2022-10-24 19:47:56 +02:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& i:focus {
popovers: Avoid focus outline on \vdots when actions popover is open. Now that we show the \vdots icon while the actions popover is open, there's a weird looking behavior where a focus outline appears around the \vdots icon, only if you clicked on the icon itself, not its square containing click arrow. Disable this unintended behavior, which disrupts the otherwise simulated state where focus is in the popover (but no row is focused).
2022-10-24 19:47:56 +02:00
/* Avoid displaying a focus outline outside the popover on the \vdots
icon when opened via the mouse. */
outline: 0 !important;
}
message feed: Show the 3-dots icon while actions popover is open. This commit enables the 3-dot menu to be visible while the associated actions popover is open using the fact that the 'has_actions_popover' class is attached to the message with an open popover. This approach solves the bug without any additional JavaScript code. Fixes part of #23157
2022-10-21 14:22:47 +02:00
}
messagebox: Remove on-message-row-hover controls visible rules. Date separator exists inside the message_row, which causes the message controls to be visible even when hovering on date separator. These two rules are redundant and cause this buggy action. Other rules handle the behaviour of message controls being visible on message box hover. Hence these can be removed.
2019-02-17 15:51:49 +01:00
.has_actions_popover .info {
Restyle and refactor .message_controls for better UX. This refactors the .message_controls to stop relying on absolute positioning and strange CSS, and throws them inline. This also restyles so they hang to the right of the time which is now always present. Fixes: #3761.
2017-02-23 23:33:57 +01:00
opacity: 1;
message_controls: Prevent clicks via visibility & not pointer-events. Previously, the message controls had a bug where they would trigger on mobile with a single tap over the area they occupy when visible. This is wrong because a user would expect to first see the controls and only trigger them once they are visible (with a second tap). The above bug is caused by the fact that we were using "opacity: 0" on ".message_controls > div" to hide the controls and "opacity: 1" on ".messagebox &:hover .message_controls > div" to show the controls on hover, however, this would not effect the click action because "opacity". So we used "pointer-events: none;" and "pointer-events: all;" with the hopes that it would prevented the above bug, but in practice, it didn't. (the most probable explanation being that tapping the message_control area would cause the "&:hover" rule to trigger and change the "pointer-event" to "all" before it could prevent the click trigger, But that explanation is just conjecture.) This commit replaces both "pointer-events" attributes with "visibility: hidden" and "visibility: visible" respectively. The result being that the message_controls behave identically to before, except without the above bug. The addition to the ".has_actions_popover .info" selector is important because without it, we would regress on issue #3172. Trivia: An alternate approach to using "opacity" is to set the "display" attribute to "none", however, using "display" prevents the transition from animating (which is probably why we were using opacity here in the first place). "visibility" does not prevent the transition from animating. History: The "pointer-events" attribute was introduced in 4d5aa3ddc9e603d2216738f3dffa59ec09ffd830 and it replaced prior code which relied on the "visibility" attribute... But it seems PR #3792 was mostly focused on improving the positioning through removal of `display: none`, but introduced opacity to make the animations work rather than visibility as the replacement solution, which requires the pointer-events hack and resulted in the bug described here. Fixes the second bug described in #13642.
2020-06-20 11:11:58 +02:00
visibility: visible;
Show a button for editing messages when the user hovers over them. Addresses Trac #1691. Currently enabled only for staging and customer7.invalid. (imported from commit 181e31adbac113bf62709b171d978c3074c8a799)
2013-08-15 23:43:16 +02:00
}
Display whether a message is historical in the actions popover. I made this a smaller font size since it's kinda a footnote. (imported from commit 2ad561e9fd1434d5dd19fa8c947fbc5185d71586)
2013-04-04 17:25:05 +02:00
.small {
font-size: 80%;
}
Document how our desktop notifications work. (imported from commit 991d7541283d7d8d17836f5322abb0da780eba25)
2013-07-15 23:50:53 +02:00
.tiny {
font-size: 60%;
}
css: Rename settings forgot password CSS class. "info" in not a sensible name for a broadly used CSS class.
2021-06-11 23:36:38 +02:00
.settings-forgot-password {
Move edit button to underneath message timestamp. This moves the edit button to underneath the timestamp such that when you hover over a message now the timestamp hides itself and the edit button appears (if editing is allowed). Fixes #1733 and other annoying issues with this field.
2016-11-09 01:26:15 +01:00
display: inline-block;
position: relative;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 73%);
change_password: Migrate modal to dialog_widget.
2021-07-22 17:50:43 +02:00
bottom: 4px;
Move edit button to underneath message timestamp. This moves the edit button to underneath the timestamp such that when you hover over a message now the timestamp hides itself and the edit button appears (if editing is allowed). Fixes #1733 and other annoying issues with this field.
2016-11-09 01:26:15 +01:00
}
css: Rename .message_table to .message-list.
2023-08-14 20:51:37 +02:00
div.message-list {
Add a different pointer style with an icon in the colorbar. (imported from commit 31e1a309b58800db90a9acdd19faba643df6f6e8)
2013-06-22 00:21:55 +02:00
border-collapse: separate;
Right-align zephyr table within its div (imported from commit 59365d0ef466bf08fe1cf9ddcac5558579962c84)
2012-09-11 19:42:06 +02:00
margin-left: auto;
Reimplement collapsing, for realsies this time. We no longer break random things! Its pretty grand, actually. This reworks and reverts commit fbadd6e854722e41cccd2535748ee47f4efd657b. Conflicts: zephyr/static/js/zephyr.js (imported from commit 534a120290855d3bf2cf979ac174267c2d07bf68)
2012-09-13 22:00:11 +02:00
display: none;
Long class and instance names get auto-abbreviated. This required some serious retooling of the table, and some thinking about the interactions between table-layout: fixed and colspan. And some of it is still a little magic-number-y. (Like that 97% width on zephyr_compose_box -- without it, the stream compose box looks weird in Chrome, but not Firefox.) (imported from commit 20c426ad2dae5efa3107890b28976a957bb3d1e3)
2012-10-02 20:47:01 +02:00
width: 100%;
}
css: Rename .focused_table to .focused-message-list.
2023-08-16 17:47:06 +02:00
div.focused-message-list {
Fix the overflowing message pane issue. (imported from commit 07f73e7a8d13792220f3ca08f50c21eb12d454b6)
2014-01-06 16:24:26 +01:00
display: block;
Use fixed table layout (imported from commit 12eb4882b03e6cf4b633334481a82da70b868ce1)
2012-09-11 17:56:34 +02:00
}
css: Reorder zulip.scss to put `.message_content` alongside.
2020-05-19 12:20:55 +02:00
.rtl {
direction: rtl;
}
Tweak edit box CSS to fit better * line-height of 18px, same as messages you're not editing * width of 100%, so word wrapping is more similar * smaller margins (imported from commit 81fc4628e0485f66615df90504462465e5805e91)
2013-07-16 23:40:01 +02:00
.message_edit_content {
line-height: 18px;
stylesheets: Fix coding style to comply with stylistic rules.
2018-07-27 00:58:50 +02:00
resize: vertical !important;
Add cleanup for resize listeners on message editing. I changed the watch_manual_resize function to return the listener functions it creates, and then these are used to remove the event listeners before the edit box is hidden.
2017-04-26 04:30:35 +02:00
max-height: 24em;
Tweak edit box CSS to fit better * line-height of 18px, same as messages you're not editing * width of 100%, so word wrapping is more similar * smaller margins (imported from commit 81fc4628e0485f66615df90504462465e5805e91)
2013-07-16 23:40:01 +02:00
}
Restyle subject editing form (imported from commit f2093939fa8069b73e7c785a4dd835eab4c825cd)
2014-01-17 16:11:18 +01:00
Add realm setting to time-limit editing of message content. This is controlled through the admin tab and a new field in the Realms table. Notes: * The admin tab setting takes a value in minutes, whereas the backend stores it in seconds. * This setting is unused when allow_message_editing is false. * There is some generosity in how the limit is enforced. For instance, if the user sees the hovering edit button, we ensure they have at least 5 seconds to click it, and if the user gets to the message edit form, we ensure they have at least 10 seconds to make the edit, by relaxing the limit. * This commit also includes a countdown timer in the message edit form. Resolves #903.
2016-07-08 02:25:55 +02:00
.message_edit_countdown_timer {
text-align: right;
display: inline;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 63%);
message_edit: Disable save btn after edit time limit Fixes #25413. The old code was disabling the save button wrong by using `.addClass("disabled")` instead of `prop()`. Added tooltip for the disabled save button as per issue #25413 and changed "Times up!" color to red. The textbox readonly logic was changed to no longer becoming readonly. Reason being there are edge cases involving the compose buttons such that simply marking the textbox as readonly is not sufficient. E.g. using the compose buttons after readonly still modifies the content. One solution might be to just hide the compose buttons visually. However, there are edge cases for that too. If preview mode was previously active, then perhaps that state needs to be reverted. If any modal is open, such as the emoji picker, then that needs to be closed. Solving these edge cases doesn't improve the user experience. Keeping the textbox editable allows an easier way for user to copy the text and don't have weird cases.
2023-05-07 08:38:36 +02:00
&.expired {
color: hsl(4deg 58% 33%);
}
Add realm setting to time-limit editing of message content. This is controlled through the admin tab and a new field in the Realms table. Notes: * The admin tab setting takes a value in minutes, whereas the backend stores it in seconds. * This setting is unused when allow_message_editing is false. * There is some generosity in how the limit is enforced. For instance, if the user sees the hovering edit button, we ensure they have at least 5 seconds to click it, and if the user gets to the message edit form, we ensure they have at least 10 seconds to make the edit, by relaxing the limit. * This commit also includes a countdown timer in the message edit form. Resolves #903.
2016-07-08 02:25:55 +02:00
}
message_edit: Remove Bootstrap cruft from message edit form. * Remove likely useless use of `controls` Bootstrap class. * Remove outer control-group elements, which just added 10px bottom margin, and were always used with .no-margin, which removed that margin :). * Rename message-edit-timer-control-group to message-edit-timer, since it isn't a control-group.
2022-08-07 06:57:14 +02:00
.message-edit-timer {
Add realm setting to time-limit editing of message content. This is controlled through the admin tab and a new field in the Realms table. Notes: * The admin tab setting takes a value in minutes, whereas the backend stores it in seconds. * This setting is unused when allow_message_editing is false. * There is some generosity in how the limit is enforced. For instance, if the user sees the hovering edit button, we ensure they have at least 5 seconds to click it, and if the user gets to the message edit form, we ensure they have at least 10 seconds to make the edit, by relaxing the limit. * This commit also includes a countdown timer in the message edit form. Resolves #903.
2016-07-08 02:25:55 +02:00
display: none;
message_edit: Add styles for Save and Cancel buttons.
2023-11-15 00:23:08 +01:00
/* Center vertically relative to
buttons. */
align-self: center;
message_edit: Build basic multi-line layout for message editing.
2023-11-14 22:07:19 +01:00
/* Use flexbox to position to far right of
the Save and Cancel buttons. */
margin-left: auto;
styles: Fix compose options hidden when editing. Fix an issue that when a message is being edited, sometimes compose options are hidden if there is no time limit. Also, move the options further from the time limit to make them more noticeable. Fix #11056.
2018-12-16 21:53:15 +01:00
}
.message-edit-feature-group {
message_edit: Build basic multi-line layout for message editing.
2023-11-14 22:07:19 +01:00
display: flex;
margin: 0;
message_edit: Display Formatting button as "Help". Match the compose change b245e1e49a9b33d6016c09a7cc76a6bd500e414f.
2020-10-02 07:42:00 +02:00
align-items: baseline;
Add realm setting to time-limit editing of message content. This is controlled through the admin tab and a new field in the Realms table. Notes: * The admin tab setting takes a value in minutes, whereas the backend stores it in seconds. * This setting is unused when allow_message_editing is false. * There is some generosity in how the limit is enforced. For instance, if the user sees the hovering edit button, we ensure they have at least 5 seconds to click it, and if the user gets to the message edit form, we ensure they have at least 10 seconds to make the edit, by relaxing the limit. * This commit also includes a countdown timer in the message edit form. Resolves #903.
2016-07-08 02:25:55 +02:00
}
message_edit: Show loading indicator inside the button. We now show loading indicator inside the 'save' button instead of hiding the buttons to show the loading indicator. Both the save and clear buttons are disabled when the request is processing. We do not change color of the buttons just change the cursor to indicate that button are disabled and nothing happens on clicking them. The reason for disabling the cancel button is that it is actually not possible to cancel the action once loading has started, so it is actually better to disable it only such that users are not confused. This commit adds a wrapper div element around the button because we wanted to add two css properties to the button- 'pointer-events: none' such that nothing happens on click and 'cursor: not-allowed' to indicate that buttons are disabled. But these boht styles cannot be added to same element because 'pointer-events: none' overrides the 'cursor: not-allowed' style and normal cursor is visible. That's why we add a wrapper to add 'cursor: not-allowed' style to it and add 'pointer-events: none' to the button.
2021-07-03 19:18:57 +02:00
.message_edit_save .loader {
display: none;
vertical-align: top;
position: relative;
height: 28px;
margin-top: -10px;
top: 6px;
width: 30px;
}
.edit-controls {
.btn-wrapper {
cursor: not-allowed;
}
styles: Fix stylelint rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-16 21:57:26 +02:00
message_edit: Show loading indicator inside the button. We now show loading indicator inside the 'save' button instead of hiding the buttons to show the loading indicator. Both the save and clear buttons are disabled when the request is processing. We do not change color of the buttons just change the cursor to indicate that button are disabled and nothing happens on clicking them. The reason for disabling the cancel button is that it is actually not possible to cancel the action once loading has started, so it is actually better to disable it only such that users are not confused. This commit adds a wrapper div element around the button because we wanted to add two css properties to the button- 'pointer-events: none' such that nothing happens on click and 'cursor: not-allowed' to indicate that buttons are disabled. But these boht styles cannot be added to same element because 'pointer-events: none' overrides the 'cursor: not-allowed' style and normal cursor is visible. That's why we add a wrapper to add 'cursor: not-allowed' style to it and add 'pointer-events: none' to the button.
2021-07-03 19:18:57 +02:00
.disable-btn {
pointer-events: none;
}
}
Restyle subject editing form (imported from commit f2093939fa8069b73e7c785a4dd835eab4c825cd)
2014-01-17 16:11:18 +01:00
.topic_edit {
display: none;
line-height: 22px;
styles: Fix stylelint rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-16 21:57:26 +02:00
message_edit: Show error message if error edit fails. Message_edit.js had a bug where if the inline topic_edit failed, it would not show an error because it attempted to make a look up for the message_id as though it were a message row edit, which would not work. That was changed in a refactor, which made it apparent that there was no error being rendered at all. This commit corrects it by rendering the error, it also adds some styling to ensure the error message is displayed inline and it makes a change to the template so the error is rendered before the spinner.
2020-04-13 12:39:50 +02:00
.alert {
display: inline-block;
margin: 0;
padding: 0 10px;
line-height: 17px;
}
Restyle subject editing form (imported from commit f2093939fa8069b73e7c785a4dd835eab4c825cd)
2014-01-17 16:11:18 +01:00
}
topic_edit: Rename `inline_topic_edit` to `move_messages_edit_topic`. In move_topic modal, Renamed inline_topic_edit to move_messages_edit_topic to be more specific selector as inline_topic_edit is also used in message header. Additionally, Removed id inline_topic_edit as it was only used in zulip.css instead used `.inline_topic_edit` selector as that element also have class with same name inline_topic_edit. Fixes #24805
2023-04-18 17:24:55 +02:00
.inline_topic_edit {
Fix message topic edit CSS. This fixes the overflowing issues, the broken styling of the topic edit input box, and makes it somewhat more responsive. Fixes: #1270.
2016-08-26 21:36:10 +02:00
margin-bottom: 5px;
css: Add width property to CSS for #inline_topic_edit element. This commit adds width property to CSS for "#inline_topic_edit" element in zulip.css to set it to 206px, as we will be removing the bootstrap CSS for it in further commits.
2023-03-27 11:15:16 +02:00
width: 206px;
Fix message topic edit CSS. This fixes the overflowing issues, the broken styling of the topic edit input box, and makes it somewhat more responsive. Fixes: #1270.
2016-08-26 21:36:10 +02:00
css: Use SCSS nesting in zulip.scss for `#inline_topic_edit`.
2020-05-19 12:24:12 +02:00
&.header-v {
height: 18px;
display: inline-block;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
padding: 0 3px;
css: Use SCSS nesting in zulip.scss for `#inline_topic_edit`.
2020-05-19 12:24:12 +02:00
vertical-align: baseline;
line-height: 0px;
box-shadow: none;
css: Re-add bootstrap CSS for inline topic edit input. This commit re-adds the required bootstrap CSS rules for inline topic edit input to the specific selector in zulip.css. This is a prep commit for removing bootstrap CSS for text type inputs.
2023-06-20 09:18:35 +02:00
color: hsl(0deg 0% 33%);
border-radius: 4px;
border: 1px solid hsl(0deg 0% 80%);
dependencies: Upgrade JavaScript dependencies. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 23:08:07 +02:00
transition:
border linear 0.2s,
box-shadow linear 0.2s;
css: Re-add bootstrap CSS for inline topic edit input. This commit re-adds the required bootstrap CSS rules for inline topic edit input to the specific selector in zulip.css. This is a prep commit for removing bootstrap CSS for text type inputs.
2023-06-20 09:18:35 +02:00
&:focus {
border-color: hsl(206deg 80% 62% / 80%);
outline: 0;
dependencies: Upgrade JavaScript dependencies. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 23:08:07 +02:00
box-shadow:
inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
css: Re-add bootstrap CSS for inline topic edit input. This commit re-adds the required bootstrap CSS rules for inline topic edit input to the specific selector in zulip.css. This is a prep commit for removing bootstrap CSS for text type inputs.
2023-06-20 09:18:35 +02:00
0 0 8px hsl(206deg 80% 62% / 60%);
}
css: Use SCSS nesting in zulip.scss for `#inline_topic_edit`.
2020-05-19 12:24:12 +02:00
}
css: Reorder zulip.scss to put `#inline_topic_edit` alongside.
2020-05-19 12:23:34 +02:00
}
message_edit: Show stream color bar alongside stream select. * Stream bar color logic is borrwoed from compose stream bar. * Use flex containers to align elements and automatically set their height to be same, them automatically filling the stream color bar height to be the height of the select box. * Use flex-wrap to wrap the propagate selector when out of space. * To make sure stream select box and stream color box are closest possible, select box has been moved under stream color box.
2020-05-12 11:02:13 +02:00
#message_edit_topic {
css: Clean up message edit form CSS somewhat. * Remove Bootstrap `form-horizontal` class and !important override required by it. * Standardize on 10px bottom margins; this fixes subtle bugs in some sizes.
2022-08-07 06:50:48 +02:00
margin: 0 5px 10px 0;
message_edit: Add support for changing stream of a message. * This feature is currently only visible to admins. * Locally echoed messages are also updated. * Add UI for editing stream if user is admin. * Show propagate mode selector if either stream or topic changed.
2020-05-06 12:07:34 +02:00
}
message_edit: Show stream color bar alongside stream select. * Stream bar color logic is borrwoed from compose stream bar. * Use flex containers to align elements and automatically set their height to be same, them automatically filling the stream color bar height to be the height of the select box. * Use flex-wrap to wrap the propagate selector when out of space. * To make sure stream select box and stream color box are closest possible, select box has been moved under stream color box.
2020-05-12 11:02:13 +02:00
.message_edit_header {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
topic_edit: Rename `inline_topic_edit` to `move_messages_edit_topic`. In move_topic modal, Renamed inline_topic_edit to move_messages_edit_topic to be more specific selector as inline_topic_edit is also used in message header. Additionally, Removed id inline_topic_edit as it was only used in zulip.css instead used `.inline_topic_edit` selector as that element also have class with same name inline_topic_edit. Fixes #24805
2023-04-18 17:24:55 +02:00
.inline_topic_edit:focus,
Restyle subject editing form (imported from commit f2093939fa8069b73e7c785a4dd835eab4c825cd)
2014-01-17 16:11:18 +01:00
#message_edit_topic:focus {
outline: none;
}
modal: Add bootstrap CSS rules for select elements in modal. This commit adds bootstrap CSS rules used for select elements used in different modals in modal.css. This change is done so we can safely remove select CSS rules from bootstrap.css as a part of our process to remove bootstrap. This commit also changes the CSS for propagate mode select element in "Move messages" modal to use ID as selector instead of class such that the width property can be overridden correctly.
2022-12-25 11:42:44 +01:00
#move_topic_modal select {
message_edit: Set width to auto for propagate mode dropdown. This commit sets the width to auto for propagate mode dropdown in the move message modal such that width is enough to fit all the options.
2022-10-07 09:51:59 +02:00
width: auto;
css: Clean up message edit form CSS somewhat. * Remove Bootstrap `form-horizontal` class and !important override required by it. * Standardize on 10px bottom margins; this fixes subtle bugs in some sizes.
2022-08-07 06:50:48 +02:00
margin-bottom: 10px;
Fix message topic edit CSS. This fixes the overflowing issues, the broken styling of the topic edit input box, and makes it somewhat more responsive. Fixes: #1270.
2016-08-26 21:36:10 +02:00
max-width: 100%;
Add a checkbox that propagates topic edits to subsequent messages. Trac #1348 (imported from commit 28e2a8cb3ecda5ec50d17501f4ccbd8644212065)
2013-09-03 22:07:59 +02:00
}
Tweak class/instance display, esp. for long names (imported from commit e8b73f2f772e18ea72fbbfb68107659d0b9adb8c)
2012-09-11 19:06:07 +02:00
move_topic_to_stream: Add option to disable breadcrumb messages. Option to disable breadcrumb messages were given in both message edit form and topic edit stream popover. User now has the option to select which stream to send the notification of stream edit of a topic via checkboxes in the UI.
2020-06-03 16:44:57 +02:00
.topic_move_breadcrumb_messages,
.message_edit_breadcrumb_messages {
message_edit: Swap propagate_mode with checkboxes in message edit form. Previously, we had you select where to send notifications before specifying which messages you're moving, which seems like the wrong decision hierarchy. Fixes #19973.
2021-10-15 15:52:35 +02:00
margin: 0 5px 5px 0;
move_topic_to_stream: Add option to disable breadcrumb messages. Option to disable breadcrumb messages were given in both message edit form and topic edit stream popover. User now has the option to select which stream to send the notification of stream edit of a topic via checkboxes in the UI.
2020-06-03 16:44:57 +02:00
align-self: center;
msg_edit_form: Show checkboxes in separate lines if present.
2020-07-06 10:36:31 +02:00
width: 100%;
msg_edit: Don't show checkbox label in next line.
2020-09-28 07:37:12 +02:00
white-space: nowrap;
move_topic_to_stream: Add option to disable breadcrumb messages. Option to disable breadcrumb messages were given in both message edit form and topic edit stream popover. User now has the option to select which stream to send the notification of stream edit of a topic via checkboxes in the UI.
2020-06-03 16:44:57 +02:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& label.checkbox {
message_edit: Expand breadcrumb checkbox spacing in topic edit UI. For background, the .topic_move_breadcrumb_messages and .message_edit_breadcrumb_message classes is applied to these checkboxes. We add margin-top of 10px to the second checkbox to space them appropriately. Additionally, we can remove some unnecessary complexity from the template/CSS. With a tweak from tabbott to remove the break-row logic as well. Fixes #19947.
2021-10-12 00:32:27 +02:00
/* Place the checkboxes on their own lines. */
display: block;
styles: Fix stylelint rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-16 21:57:26 +02:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& input {
move_topic_to_stream: Add option to disable breadcrumb messages. Option to disable breadcrumb messages were given in both message edit form and topic edit stream popover. User now has the option to select which stream to send the notification of stream edit of a topic via checkboxes in the UI.
2020-06-03 16:44:57 +02:00
margin: 0;
vertical-align: baseline;
}
message_edit: Expand breadcrumb checkbox spacing in topic edit UI. For background, the .topic_move_breadcrumb_messages and .message_edit_breadcrumb_message classes is applied to these checkboxes. We add margin-top of 10px to the second checkbox to space them appropriately. Additionally, we can remove some unnecessary complexity from the template/CSS. With a tweak from tabbott to remove the break-row logic as well. Fixes #19947.
2021-10-12 00:32:27 +02:00
& + label.checkbox {
margin-top: 10px;
}
move_topic_to_stream: Add option to disable breadcrumb messages. Option to disable breadcrumb messages were given in both message edit form and topic edit stream popover. User now has the option to select which stream to send the notification of stream edit of a topic via checkboxes in the UI.
2020-06-03 16:44:57 +02:00
}
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& label {
move_topic_to_stream: Add option to disable breadcrumb messages. Option to disable breadcrumb messages were given in both message edit form and topic edit stream popover. User now has the option to select which stream to send the notification of stream edit of a topic via checkboxes in the UI.
2020-06-03 16:44:57 +02:00
display: inline-block;
margin-right: 10px;
}
}
message_edit: Swap propagate_mode with checkboxes in message edit form. Previously, we had you select where to send notifications before specifying which messages you're moving, which seems like the wrong decision hierarchy. Fixes #19973.
2021-10-15 15:52:35 +02:00
.message_edit_breadcrumb_messages {
css: Clean up message edit form CSS somewhat. * Remove Bootstrap `form-horizontal` class and !important override required by it. * Standardize on 10px bottom margins; this fixes subtle bugs in some sizes.
2022-08-07 06:50:48 +02:00
margin-bottom: 10px;
message_edit: Swap propagate_mode with checkboxes in message edit form. Previously, we had you select where to send notifications before specifying which messages you're moving, which seems like the wrong decision hierarchy. Fixes #19973.
2021-10-15 15:52:35 +02:00
}
Automatically condense long messages Addresses Trac #747. (imported from commit 4ddf2d8773023805650f04924be62da2d0fe826e)
2013-03-13 22:47:38 +01:00
.message_length_controller {
UI redesign: more-less message interaction. This commit encompasses the following changes: * Replace the [More...] link with a button titled "Show more". * Replace the [Show Less...] link with a button titled "Show less". * Add various on-hover interactions to the buttons. * In the condensed view, add fading to the bottom of the message to visually communicate that the message is truncated. * Update /help/ description. Fixes #22801. Co-authored-by: Evy Kassirer <evy.kassirer@gmail.com>
2023-04-08 15:19:10 +02:00
.message_length_toggle {
display: none;
width: 100%;
height: 24px;
margin-bottom: 4px;
color: var(--color-text-show-more-less-button);
background-color: var(--color-show-more-less-button-background);
border-radius: 4px;
border: none;
outline: none;
font-variant: all-small-caps;
Center the message condenser messages with respect to the message body Previously it was centered with respect to its enclosing div, which looked slightly off. (imported from commit 3878f162d3eb50ce85cae7054102095069aa60c8)
2013-03-20 23:08:39 +01:00
UI redesign: more-less message interaction. This commit encompasses the following changes: * Replace the [More...] link with a button titled "Show more". * Replace the [Show Less...] link with a button titled "Show less". * Add various on-hover interactions to the buttons. * In the condensed view, add fading to the bottom of the message to visually communicate that the message is truncated. * Update /help/ description. Fixes #22801. Co-authored-by: Evy Kassirer <evy.kassirer@gmail.com>
2023-04-08 15:19:10 +02:00
&:hover {
background-color: var(
--color-show-more-less-button-background-hover
);
}
Automatically condense long messages Addresses Trac #747. (imported from commit 4ddf2d8773023805650f04924be62da2d0fe826e)
2013-03-13 22:47:38 +01:00
UI redesign: more-less message interaction. This commit encompasses the following changes: * Replace the [More...] link with a button titled "Show more". * Replace the [Show Less...] link with a button titled "Show less". * Add various on-hover interactions to the buttons. * In the condensed view, add fading to the bottom of the message to visually communicate that the message is truncated. * Update /help/ description. Fixes #22801. Co-authored-by: Evy Kassirer <evy.kassirer@gmail.com>
2023-04-08 15:19:10 +02:00
&:active {
background-color: var(
--color-show-more-less-button-background-active
);
scale: 0.98;
}
css: Use SCSS nesting in zulip.scss for `.message_length_controller`.
2020-05-19 12:26:01 +02:00
}
Automatically condense long messages Addresses Trac #747. (imported from commit 4ddf2d8773023805650f04924be62da2d0fe826e)
2013-03-13 22:47:38 +01:00
}
Clean up CSS (imported from commit 406a0de68e43ae5538289ddd1358b03ee91813c2)
2012-09-24 22:28:02 +02:00
.bookend {
bookend: Switch whitespace from padding to margin. This creates more consistent spacing for bookends in relation to actual message groups.
2017-06-06 01:27:32 +02:00
margin-top: 10px;
Add a different pointer style with an icon in the colorbar. (imported from commit 31e1a309b58800db90a9acdd19faba643df6f6e8)
2013-06-22 00:21:55 +02:00
background-color: transparent;
Style class / instance / username labels (imported from commit 2e0c9d72aa17971bdc12750dad62a59c46f646f1)
2012-08-29 18:29:01 +02:00
}
Change the layout of the message boxes in the message pane and make other message-related adjustments. Specifically: * Leave the avatar image as inline and round it. * Move timestamp to the left column. * Replace the "Info" link with a permanent info sign. * Move the pointer bar to the left. * Remove borders * Change selection background colors, and PM colors. * Introduce the "narrowing" icon into our FontAwesome set. * Modify the tests to account for the new "narrowing" icon and fixed a bug in star-finding. * Clean up CSS and add a more prominent color to private messages (imported from commit 8a8d6de8acccc52c0d16f5d1ce31aabdc72c88c8)
2013-05-10 22:48:02 +02:00
.inline_profile_picture {
display: inline-block;
me_message: Center first line with center of avatar. This commit also demonstrates how precise line-heights contribute to a design: by matching the line-height on the avatar's grid area to the dimensions of the square avatar image, it's possible to center the first line of text (me-messages, in this case) with a non-text element.
2023-06-30 19:27:06 +02:00
width: var(--message-box-avatar-width);
height: var(--message-box-avatar-height);
/* Don't inherit the line-height from message-avatar;
this preserves the dimensions and rounded corners
on the image itself. */
line-height: 1;
Redesign styles for message pane (imported from commit 394249d58f1cc3b976b432bbc421b99510e7fff9)
2014-01-31 21:36:31 +01:00
margin-right: 11px;
Align username at top of avatar and center messages vertically. (imported from commit 38dbe1888aad1be88608f0a72d7fea8b84dd3e25)
2013-06-28 01:35:19 +02:00
vertical-align: top;
css: Make avatar corners round. Set a border radius of 4 pixels for user avatars displayed in the message list view.
2017-06-15 21:13:47 +02:00
border-radius: 4px;
frontend: Change main UI content to not be background images.
2017-06-26 16:12:49 +02:00
overflow: hidden;
message view: Add guest avatar markers to message sender avatars.
2018-12-16 02:24:52 +01:00
&.guest-avatar::after {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
outline: 2px solid hsl(0deg 0% 100%);
message view: Add guest avatar markers to message sender avatars.
2018-12-16 02:24:52 +01:00
}
Move sender gravatar inline in skinny windows (imported from commit 570c1f6409213fd8a2b6dbb98372dbf2f62ec50c)
2013-01-07 23:41:36 +01:00
}
Style class / instance / username labels (imported from commit 2e0c9d72aa17971bdc12750dad62a59c46f646f1)
2012-08-29 18:29:01 +02:00
Display a message and disable compose while reloading. (imported from commit f998d2e4053e7e2d676f7fe08ee274118dd9faba)
2012-10-17 20:43:20 +02:00
.home-error-bar {
Retry if long polling fails (imported from commit fc2d09976231974bf48efbcf5dfc480be36e26ec)
2012-08-31 21:33:04 +02:00
margin-top: 5px;
display: none;
css: Use SCSS nesting in zulip.scss for `.home-error-bar`.
2020-05-19 12:28:32 +02:00
.alert {
margin-bottom: auto;
}
Retry if long polling fails (imported from commit fc2d09976231974bf48efbcf5dfc480be36e26ec)
2012-08-31 21:33:04 +02:00
}
Implement portions of Waseem's new UI. This is mostly working; things that need to be implemented: - Ask users for their Real Name - Personal replies need skinning - Miscl UI changes to match mockups (imported from commit 3638cf5ec2ba2306004ba6db6fa4c25c47f76517)
2012-09-10 20:31:53 +02:00
css: Reorder zulip.scss to put `.home-error-bar` alongside.
2020-05-19 12:27:32 +02:00
.streamname {
font-weight: bold;
}
navbar: Shift "search_icon" styles to be before tab_bar and search_box. The motivation behind this change is that it is more sensible to have search_icon styles appear first and then be overridden by search_closed or search_open styles which appear afterwards. This is a prep commit to correcting a bug that caused some browsers to render the width (and hence margin and position) of search_closed incorrectly.
2020-04-18 12:09:26 +02:00
.search_icon {
search_icon: Fix contrast color of icon. Fixes #19053.
2021-07-02 03:07:40 +02:00
/* These rules match the .dropdown-toggle CSS for the gear menu. */
color: inherit;
opacity: 0.5;
navbar: Shift "search_icon" styles to be before tab_bar and search_box. The motivation behind this change is that it is more sensible to have search_icon styles appear first and then be overridden by search_closed or search_open styles which appear afterwards. This is a prep commit to correcting a bug that caused some browsers to render the width (and hence margin and position) of search_closed incorrectly.
2020-04-18 12:09:26 +02:00
text-decoration: none;
styles: Fix stylelint rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-16 21:57:26 +02:00
navbar: Shift "search_icon" styles to be before tab_bar and search_box. The motivation behind this change is that it is more sensible to have search_icon styles appear first and then be overridden by search_closed or search_open styles which appear afterwards. This is a prep commit to correcting a bug that caused some browsers to render the width (and hence margin and position) of search_closed incorrectly.
2020-04-18 12:09:26 +02:00
&:hover {
search_icon: Fix contrast color of icon. Fixes #19053.
2021-07-02 03:07:40 +02:00
opacity: 1;
navbar: Shift "search_icon" styles to be before tab_bar and search_box. The motivation behind this change is that it is more sensible to have search_icon styles appear first and then be overridden by search_closed or search_open styles which appear afterwards. This is a prep commit to correcting a bug that caused some browsers to render the width (and hence margin and position) of search_closed incorrectly.
2020-04-18 12:09:26 +02:00
}
}
top_navbar: Contain stream, description elements.
2023-12-02 21:38:21 +01:00
.top-navbar-container {
/* Calculate right margin so that title and description
elements can truncate and not collide with or run underneath
with the search section. */
margin-right: calc(
var(--search-box-width) + var(--navbar-content-righthand-offset)
);
overflow: hidden;
text-overflow: ellipsis;
}
navbar: Rename tab_bar to message_view_header. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. We purged tab_list in 1267caf5009118875f47fdafe312880af08024e1. This commit purges tab_bar, it includes: - A blanket search and replace of tab_bar with message_view_header. - Splitting a single line comment in tab_bar.js / message_view_header.js. - The renaming of tab_bar.js to message_view_header.js. - The renaming of tab_bar.hbs to message_view_header.hbs. - A blanket search and replace of tab_data with message_view_header_data. - Replacing the single occurrence of tabbar with message_view_header (it was within a comment.)
2020-07-08 23:44:01 +02:00
#message_view_header {
css: Color tweaks.
2023-05-13 08:30:13 +02:00
color: var(--color-text-message-view-header);
Add a tab bar at the top of the Message list to aid navigation The intent is that this will also make it easier to tell when you are narrowed. (imported from commit 5e37721fbad304d30fc725aacf2cc9e6560e9da2)
2013-05-09 21:12:53 +02:00
z-index: 2;
Fix missing whitespace after :s in CSS.
2016-04-09 05:50:24 +02:00
float: left;
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
height: var(--header-height);
navbar: Purge tab_list label from code base. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. It would have been nicer if we could simply purge tab_bar from the codebase and rename "#tab_list" so that we have an anchor and wrapper structure in the html, but dropping the float: left on tab_bar causes some confusing problems such as causing the horizontal border to disappear and the search_box to shift out of its intended position and so its simpler to get rid of tab_list from our code base first. This commit: - Removes the #tab_list wrapper div from tab_bar.hbs. - Removes any #tab_list selectors from night_mode.scss so that they simply target based on "#tab_bar" instead of "#tab_bar #tab_list". - Removes tab_list selectors from zulip.scss, so that #tab_list attributes now apply to the #tab_bar, in the process we drop the duplicated width property and reorder the attributes. - Replaces all mention of #tab_list with #tab_bar in JS files.
2020-06-28 03:06:22 +02:00
width: 100%;
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
line-height: var(--header-height);
navbar: Purge tab_list label from code base. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. It would have been nicer if we could simply purge tab_bar from the codebase and rename "#tab_list" so that we have an anchor and wrapper structure in the html, but dropping the float: left on tab_bar causes some confusing problems such as causing the horizontal border to disappear and the search_box to shift out of its intended position and so its simpler to get rid of tab_list from our code base first. This commit: - Removes the #tab_list wrapper div from tab_bar.hbs. - Removes any #tab_list selectors from night_mode.scss so that they simply target based on "#tab_bar" instead of "#tab_bar #tab_list". - Removes tab_list selectors from zulip.scss, so that #tab_list attributes now apply to the #tab_bar, in the process we drop the duplicated width property and reorder the attributes. - Replaces all mention of #tab_list with #tab_bar in JS files.
2020-06-28 03:06:22 +02:00
display: flex;
top_navbar: Use flexbox to align icon, stream name, and description.
2023-11-17 20:12:36 +01:00
align-items: baseline;
navbar: Purge tab_list label from code base. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. It would have been nicer if we could simply purge tab_bar from the codebase and rename "#tab_list" so that we have an anchor and wrapper structure in the html, but dropping the float: left on tab_bar causes some confusing problems such as causing the horizontal border to disappear and the search_box to shift out of its intended position and so its simpler to get rid of tab_list from our code base first. This commit: - Removes the #tab_list wrapper div from tab_bar.hbs. - Removes any #tab_list selectors from night_mode.scss so that they simply target based on "#tab_bar" instead of "#tab_bar #tab_list". - Removes tab_list selectors from zulip.scss, so that #tab_list attributes now apply to the #tab_bar, in the process we drop the duplicated width property and reorder the attributes. - Replaces all mention of #tab_list with #tab_bar in JS files.
2020-06-28 03:06:22 +02:00
white-space: nowrap;
cursor: default;
styles: Fix stylelint rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-16 21:57:26 +02:00
navbar: Purge tab_list label from code base. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. It would have been nicer if we could simply purge tab_bar from the codebase and rename "#tab_list" so that we have an anchor and wrapper structure in the html, but dropping the float: left on tab_bar causes some confusing problems such as causing the horizontal border to disappear and the search_box to shift out of its intended position and so its simpler to get rid of tab_list from our code base first. This commit: - Removes the #tab_list wrapper div from tab_bar.hbs. - Removes any #tab_list selectors from night_mode.scss so that they simply target based on "#tab_bar" instead of "#tab_bar #tab_list". - Removes tab_list selectors from zulip.scss, so that #tab_list attributes now apply to the #tab_bar, in the process we drop the duplicated width property and reorder the attributes. - Replaces all mention of #tab_list with #tab_bar in JS files.
2020-06-28 03:06:22 +02:00
.hidden {
display: none;
}
styles: Fix stylelint rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-16 21:57:26 +02:00
top_navbar: Extend new flex-based styles to navbar titles.
2023-11-17 20:16:05 +01:00
.message-header-stream-settings-button,
.navbar_title {
navbar: Purge tab_list label from code base. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. It would have been nicer if we could simply purge tab_bar from the codebase and rename "#tab_list" so that we have an anchor and wrapper structure in the html, but dropping the float: left on tab_bar causes some confusing problems such as causing the horizontal border to disappear and the search_box to shift out of its intended position and so its simpler to get rid of tab_list from our code base first. This commit: - Removes the #tab_list wrapper div from tab_bar.hbs. - Removes any #tab_list selectors from night_mode.scss so that they simply target based on "#tab_bar" instead of "#tab_bar #tab_list". - Removes tab_list selectors from zulip.scss, so that #tab_list attributes now apply to the #tab_bar, in the process we drop the duplicated width property and reorder the attributes. - Replaces all mention of #tab_list with #tab_bar in JS files.
2020-06-28 03:06:22 +02:00
font-weight: 600;
font-size: 16px;
top_navbar: Space navbar title with padding only.
2023-11-17 20:30:44 +01:00
padding: 0 2px 0 6px;
navbar: Remove unnecessary :not() selector. Replace not selector with equivalent properties.
2020-10-23 15:13:13 +02:00
overflow: hidden;
navbar: Remove :not() text-overflow selector. Here we change from using clip to using ellipses on stream name.
2020-10-23 15:33:50 +02:00
text-overflow: ellipsis;
top_navbar: Consolidate selectors, replicate styles.
2023-11-17 20:05:24 +01:00
color: inherit;
text-decoration: none;
top_navbar: Use flexbox to align icon, stream name, and description.
2023-11-17 20:12:36 +01:00
/* Create a flex container for the icon and
stream name. */
display: flex;
/* We want to use baseline alignment so that the
stream name and narrow description sit on
the same invisible line. */
align-items: baseline;
top_navbar: Consolidate selectors, replicate styles.
2023-11-17 20:05:24 +01:00
.zulip-icon {
font-size: 14px;
top_navbar: Use flexbox to align icon, stream name, and description.
2023-11-17 20:12:36 +01:00
/* Pull the icon out of baseline alignment,
and center with stream name. */
align-self: center;
top_navbar: Consolidate selectors, replicate styles.
2023-11-17 20:05:24 +01:00
}
stylelint: Fix at-rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-06 03:31:58 +01:00
top_navbar: Extend new flex-based styles to navbar titles.
2023-11-17 20:16:05 +01:00
.zulip-icon-inbox {
font-size: 16px;
}
top_navbar: Properly align icons horizontally and vertically. This adds 3px of margin where previously whitespace separated the icon from the title.
2023-11-17 20:24:24 +01:00
.fa-envelope {
/* The squatter envelope icon appears
better vertically centered when aligned
to the baseline of the adjacent DM partners. */
align-self: baseline;
}
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
@media (height < $short_navbar_cutoff_height) {
top_navbar: Remove unecessary styles and vertical padding.
2023-11-17 19:54:34 +01:00
padding: 0 3.5px; /* based on having ~41.66% decrease */
navbar: Purge tab_list label from code base. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. It would have been nicer if we could simply purge tab_bar from the codebase and rename "#tab_list" so that we have an anchor and wrapper structure in the html, but dropping the float: left on tab_bar causes some confusing problems such as causing the horizontal border to disappear and the search_box to shift out of its intended position and so its simpler to get rid of tab_list from our code base first. This commit: - Removes the #tab_list wrapper div from tab_bar.hbs. - Removes any #tab_list selectors from night_mode.scss so that they simply target based on "#tab_bar" instead of "#tab_bar #tab_list". - Removes tab_list selectors from zulip.scss, so that #tab_list attributes now apply to the #tab_bar, in the process we drop the duplicated width property and reorder the attributes. - Replaces all mention of #tab_list with #tab_bar in JS files.
2020-06-28 03:06:22 +02:00
}
styles: Fix stylelint rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-16 21:57:26 +02:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& i {
top_navbar: Properly align icons horizontally and vertically. This adds 3px of margin where previously whitespace separated the icon from the title.
2023-11-17 20:24:24 +01:00
margin: 0 6px 0 5px;
/* Align all icons to center. */
align-self: center;
navbar: Purge tab_list label from code base. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. It would have been nicer if we could simply purge tab_bar from the codebase and rename "#tab_list" so that we have an anchor and wrapper structure in the html, but dropping the float: left on tab_bar causes some confusing problems such as causing the horizontal border to disappear and the search_box to shift out of its intended position and so its simpler to get rid of tab_list from our code base first. This commit: - Removes the #tab_list wrapper div from tab_bar.hbs. - Removes any #tab_list selectors from night_mode.scss so that they simply target based on "#tab_bar" instead of "#tab_bar #tab_list". - Removes tab_list selectors from zulip.scss, so that #tab_list attributes now apply to the #tab_bar, in the process we drop the duplicated width property and reorder the attributes. - Replaces all mention of #tab_list with #tab_bar in JS files.
2020-06-28 03:06:22 +02:00
}
styles: Fix stylelint rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-16 21:57:26 +02:00
navbar: Purge tab_list label from code base. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. It would have been nicer if we could simply purge tab_bar from the codebase and rename "#tab_list" so that we have an anchor and wrapper structure in the html, but dropping the float: left on tab_bar causes some confusing problems such as causing the horizontal border to disappear and the search_box to shift out of its intended position and so its simpler to get rid of tab_list from our code base first. This commit: - Removes the #tab_list wrapper div from tab_bar.hbs. - Removes any #tab_list selectors from night_mode.scss so that they simply target based on "#tab_bar" instead of "#tab_bar #tab_list". - Removes tab_list selectors from zulip.scss, so that #tab_list attributes now apply to the #tab_bar, in the process we drop the duplicated width property and reorder the attributes. - Replaces all mention of #tab_list with #tab_bar in JS files.
2020-06-28 03:06:22 +02:00
.fa {
.fa-envelope {
font-size: 14px;
styles: Fix shorthand-property-no-redundant-values. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-11-05 03:33:16 +01:00
margin: 0 5px;
navbar: Improve structure & styling for top navbar. This updates the logged-in top navbar to display the stream/message name, number of users, and description. It also replaces the search bar with a search icon that expands into a full-width search bar. Co-authored-by: Max Nussenbaum <max@maxnuss.com> Fixes: #164. Fixes: #5198.
2020-02-03 17:01:11 +01:00
}
styles: Fix stylelint rule-empty-line-before. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-16 21:57:26 +02:00
navbar: Purge tab_list label from code base. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. It would have been nicer if we could simply purge tab_bar from the codebase and rename "#tab_list" so that we have an anchor and wrapper structure in the html, but dropping the float: left on tab_bar causes some confusing problems such as causing the horizontal border to disappear and the search_box to shift out of its intended position and so its simpler to get rid of tab_list from our code base first. This commit: - Removes the #tab_list wrapper div from tab_bar.hbs. - Removes any #tab_list selectors from night_mode.scss so that they simply target based on "#tab_bar" instead of "#tab_bar #tab_list". - Removes tab_list selectors from zulip.scss, so that #tab_list attributes now apply to the #tab_bar, in the process we drop the duplicated width property and reorder the attributes. - Replaces all mention of #tab_list with #tab_bar in JS files.
2020-06-28 03:06:22 +02:00
.fa-hashtag {
font-size: 1.2rem;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
margin: 0 2px 0 5px;
navbar: Improve structure & styling for top navbar. This updates the logged-in top navbar to display the stream/message name, number of users, and description. It also replaces the search bar with a search icon that expands into a full-width search bar. Co-authored-by: Max Nussenbaum <max@maxnuss.com> Fixes: #164. Fixes: #5198.
2020-02-03 17:01:11 +01:00
}
navbar: Refactor tab_bar to nested selectors. This refactors tab_list styles to be under tab_bar and to use nesting.
2019-03-10 19:08:36 +01:00
}
navbar: Purge tab_list label from code base. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. It would have been nicer if we could simply purge tab_bar from the codebase and rename "#tab_list" so that we have an anchor and wrapper structure in the html, but dropping the float: left on tab_bar causes some confusing problems such as causing the horizontal border to disappear and the search_box to shift out of its intended position and so its simpler to get rid of tab_list from our code base first. This commit: - Removes the #tab_list wrapper div from tab_bar.hbs. - Removes any #tab_list selectors from night_mode.scss so that they simply target based on "#tab_bar" instead of "#tab_bar #tab_list". - Removes tab_list selectors from zulip.scss, so that #tab_list attributes now apply to the #tab_bar, in the process we drop the duplicated width property and reorder the attributes. - Replaces all mention of #tab_list with #tab_bar in JS files.
2020-06-28 03:06:22 +02:00
}
Move crumbbar to header and change visual appearance (imported from commit 435e3b46b615f6c496be10b7d170ed3e4201787d)
2014-01-08 16:12:22 +01:00
top_navbar: Extend new flex-based styles to navbar titles.
2023-11-17 20:16:05 +01:00
.message-header-navbar-title {
top_navbar: Contain stream, description elements.
2023-12-02 21:38:21 +01:00
/* Allow long navbar titles (e.g., stream names) to collapse. */
flex: 0 1 auto;
top_navbar: Extend new flex-based styles to navbar titles.
2023-11-17 20:16:05 +01:00
overflow: hidden;
text-overflow: ellipsis;
}
navbar: Purge tab_list label from code base. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. It would have been nicer if we could simply purge tab_bar from the codebase and rename "#tab_list" so that we have an anchor and wrapper structure in the html, but dropping the float: left on tab_bar causes some confusing problems such as causing the horizontal border to disappear and the search_box to shift out of its intended position and so its simpler to get rid of tab_list from our code base first. This commit: - Removes the #tab_list wrapper div from tab_bar.hbs. - Removes any #tab_list selectors from night_mode.scss so that they simply target based on "#tab_bar" instead of "#tab_bar #tab_list". - Removes tab_list selectors from zulip.scss, so that #tab_list attributes now apply to the #tab_bar, in the process we drop the duplicated width property and reorder the attributes. - Replaces all mention of #tab_list with #tab_bar in JS files.
2020-06-28 03:06:22 +02:00
.narrow_description {
styles: Rename .scss files back to .css. css-loader@4 broke @import statements referencing files with extensions other than .css, unless those @import statements are compiled away by another loader. Upstream is more interested in arguing that such @import statements are semantically incorrect than applying the one line fix. https://github.com/webpack-contrib/css-loader/issues/1164 Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 22:23:01 +02:00
/* the actual value of flex shrink does not matter, it is the
ratio of this value to other flex items that determines the
behavior while shrinking, here the other item has the .stream
class and a flex of 1, so the value here *is* the ratio, and
is chosen such that the narrow description shrinks to close
before the stream name must begin to shrink */
navbar: Purge tab_list label from code base. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. It would have been nicer if we could simply purge tab_bar from the codebase and rename "#tab_list" so that we have an anchor and wrapper structure in the html, but dropping the float: left on tab_bar causes some confusing problems such as causing the horizontal border to disappear and the search_box to shift out of its intended position and so its simpler to get rid of tab_list from our code base first. This commit: - Removes the #tab_list wrapper div from tab_bar.hbs. - Removes any #tab_list selectors from night_mode.scss so that they simply target based on "#tab_bar" instead of "#tab_bar #tab_list". - Removes tab_list selectors from zulip.scss, so that #tab_list attributes now apply to the #tab_bar, in the process we drop the duplicated width property and reorder the attributes. - Replaces all mention of #tab_list with #tab_bar in JS files.
2020-06-28 03:06:22 +02:00
flex-shrink: 100;
message_view_header: Remove subscribers count from the top bar. Removed the sub_count element along with its styles and dependent functions. Fixes #27361.
2023-10-27 13:31:39 +02:00
background: none;
font-size: 14px;
color: inherit;
font-weight: 400;
top_navbar: Consolidate selectors, replicate styles.
2023-11-17 20:05:24 +01:00
padding-left: 10px;
overflow: hidden;
text-overflow: ellipsis;
navbar: Purge tab_list label from code base. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. It would have been nicer if we could simply purge tab_bar from the codebase and rename "#tab_list" so that we have an anchor and wrapper structure in the html, but dropping the float: left on tab_bar causes some confusing problems such as causing the horizontal border to disappear and the search_box to shift out of its intended position and so its simpler to get rid of tab_list from our code base first. This commit: - Removes the #tab_list wrapper div from tab_bar.hbs. - Removes any #tab_list selectors from night_mode.scss so that they simply target based on "#tab_bar" instead of "#tab_bar #tab_list". - Removes tab_list selectors from zulip.scss, so that #tab_list attributes now apply to the #tab_bar, in the process we drop the duplicated width property and reorder the attributes. - Replaces all mention of #tab_list with #tab_bar in JS files.
2020-06-28 03:06:22 +02:00
}
refactor: Extract pseudoclass based tags out of span in tab_bar. Currently the styles for the navbar are in a confusing and ugly state. One of the problems is that we have several styles within the `span` including some nested pseudotag selectors within the `span`. This is bad because it gives semantic meaning to the `span` element which we do not intend. We should remove as many styles which intend to target "direct children" instead of "direct children that are spans" and (iff there are styles for the later) then substitute the "span" for a semantically meaningful class name. Another problem here is that these pseudotag based selectors aren't very clear and readable, which is something we can look into correcting now that they are separate from the `span` tag. This is a prep commit that aims to set us on the path for further improvements. It also enables us to switch some tags around and allows us to use the styles in the `span` block with other selectors via `,`. This should make no visual or behavioral changes.
2020-06-12 00:00:52 +02:00
styles: Rename .scss files back to .css. css-loader@4 broke @import statements referencing files with extensions other than .css, unless those @import statements are compiled away by another loader. Upstream is more interested in arguing that such @import statements are semantically incorrect than applying the one line fix. https://github.com/webpack-contrib/css-loader/issues/1164 Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 22:23:01 +02:00
/* The very last element in the navbar is the search icon, the second
last element is either the narrow description (for stream narrows) or
the "title" (for other narrows). The flex-grow property ensures these
top_navbar: Extend new flex-based styles to navbar titles.
2023-11-17 20:16:05 +01:00
elements take up the entirety of the white space, while flex-shrink
accommodates narrower viewports. Setting flex-basis 0 enables an
ellipsis to be displayed, as the 0 takes the place of the max-content
default that would otherwise run titles under the search box. */
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
.navbar_title,
.narrow_description {
top_navbar: Extend new flex-based styles to navbar titles.
2023-11-17 20:16:05 +01:00
flex: 1 1 0;
navbar: Explicitly calculate offset from title and search. A separate `margin-right:` declaration helps keep the calculation and intention more readable.
2023-09-27 19:37:37 +02:00
margin: 0;
navbar: Refactor tab_bar to nested selectors. This refactors tab_list styles to be under tab_bar and to use nesting.
2019-03-10 19:08:36 +01:00
}
Move crumbbar to header and change visual appearance (imported from commit 435e3b46b615f6c496be10b7d170ed3e4201787d)
2014-01-08 16:12:22 +01:00
}
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
#streamlist-toggle {
display: none;
position: absolute;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
top: 0;
left: 0;
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
text-align: center;
}
navbar: Migrate to handlebars. This commit migrates the `navbar.html` Django template to handlebars by creating a new file as `navbar.hbs` within `/static/templates` which is then rendered using `ui_init` module. As a part of migration, we also remove the `search_pills_enabled` and `embedded` parameters from the context attribute as they are no longer needed now. Fixes part of #18792.
2021-06-30 16:20:43 +02:00
.hide-streamlist-toggle-visibility,
.hide-navbar-buttons-visibility {
visibility: hidden;
}
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
#streamlist-toggle-button {
text-decoration: none;
navbar: Use new purple icon color with left-sidebar toggle. This also implements the same hover and focus-visible styles as icons on the righthand side of the navbar.
2023-10-26 16:21:52 +02:00
color: var(--color-navbar-icon);
navbar: Handle streams-toggle alignment with dimensions, flexbox.
2023-10-25 19:43:44 +02:00
display: flex;
align-items: center;
justify-content: center;
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
width: 40px;
navbar: Handle streams-toggle alignment with dimensions, flexbox.
2023-10-25 19:43:44 +02:00
height: 40px;
navbar: Use new purple icon color with left-sidebar toggle. This also implements the same hover and focus-visible styles as icons on the righthand side of the navbar.
2023-10-26 16:21:52 +02:00
&:hover {
background-color: var(--color-header-button-hover);
navbar: Correct for alpha background on unread dot's border. This is a case where the use of alpha channels in HSL color values shows its limits. The use of an alpha channel is necessary for the background elements for the top navbar elements, because they sit over the top of the navbar's bottom border (actually an inset shaddow). However, it's impossible to use the alpha-channel based color on elements like the unread dot, where the border actually sits on top of the element itself--meaning that the effect would be a larger dot with an imperceptibly darker ring around it. What this commit does is use a technique suggested by Anders Kaseorg for using CSS's `color-mix()` functional notation to calculate an opaque version of the alpha color for use on elements that do not or cannot directly take the color with the alpha channel. See CZO discussion: https://chat.zulip.org/#narrow/stream/6-frontend/topic/alphas.20in.20color.20definitions/near/1670102
2023-10-26 19:16:08 +02:00
#streamlist-toggle-unreadcount {
border-color: var(--color-header-button-hover-no-alpha);
}
navbar: Use new purple icon color with left-sidebar toggle. This also implements the same hover and focus-visible styles as icons on the righthand side of the navbar.
2023-10-26 16:21:52 +02:00
}
&:active {
background-color: var(--color-header-button-focus);
}
&:focus {
outline: 0;
}
&:focus-visible {
outline: none;
background-color: var(--color-header-button-focus);
}
navbar: Correct for alpha background on unread dot's border. This is a case where the use of alpha channels in HSL color values shows its limits. The use of an alpha channel is necessary for the background elements for the top navbar elements, because they sit over the top of the navbar's bottom border (actually an inset shaddow). However, it's impossible to use the alpha-channel based color on elements like the unread dot, where the border actually sits on top of the element itself--meaning that the effect would be a larger dot with an imperceptibly darker ring around it. What this commit does is use a technique suggested by Anders Kaseorg for using CSS's `color-mix()` functional notation to calculate an opaque version of the alpha color for use on elements that do not or cannot directly take the color with the alpha channel. See CZO discussion: https://chat.zulip.org/#narrow/stream/6-frontend/topic/alphas.20in.20color.20definitions/near/1670102
2023-10-26 19:16:08 +02:00
&:active,
&:focus-visible {
#streamlist-toggle-unreadcount {
border-color: var(--color-header-button-focus-no-alpha);
}
}
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
}
navbar: Remove userlist unread count.
2023-10-24 22:15:58 +02:00
#streamlist-toggle-unreadcount {
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
position: absolute;
display: none;
navbar: Show left-sidebar-style unread dot on streams toggle.
2023-10-25 20:08:09 +02:00
height: 6px;
width: 6px;
navbar: Use new purple icon color with left-sidebar toggle. This also implements the same hover and focus-visible styles as icons on the righthand side of the navbar.
2023-10-26 16:21:52 +02:00
background-color: var(--color-navbar-icon);
navbar: Show left-sidebar-style unread dot on streams toggle.
2023-10-25 20:08:09 +02:00
top: 10px;
right: 9px;
border: 2px solid var(--color-background-navbar);
border-radius: 6px;
padding: 0;
font-size: 0;
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
}
.nav .dropdown-menu {
left: auto;
navbar: Add user avatar icon for personal_menu dropdown. This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
2023-07-17 17:26:24 +02:00
right: -7px;
top: 35px;
style: Increase width of gear menu to avoid distracting hover. The comment explains the reasoning, but this should make it a lot easier for users to visually focus on the menu items in the sidebar. Changed by tabbott to use the same width as the right sidebar itself. Inspired by #17169.
2021-02-11 16:13:18 +01:00
/* Match the width of the right sidebar so that we don't have
the presence dots distracting you when looking at this. */
min-width: 240px;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
box-shadow: 0 0 5px hsl(0deg 0% 0% / 20%);
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
css: Use SCSS nesting in zulip.scss for `.nav`.
2020-05-19 12:43:59 +02:00
&::after {
position: absolute;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
width: 0;
height: 0;
css: Use SCSS nesting in zulip.scss for `.nav`.
2020-05-19 12:43:59 +02:00
top: -7px;
navbar: Fix UI bugs in right column of nav header. Fixes the click target for the gear icon by providing a proper rectangular area around it. Minor UI adjustments of gear icon and expanded navbar-search for small size devices. Fixes: #15222.
2020-06-21 18:59:37 +02:00
right: 19px;
css: Use SCSS nesting in zulip.scss for `.nav`.
2020-05-19 12:43:59 +02:00
display: inline-block;
border-right: 7px solid transparent;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border-bottom: 7px solid hsl(0deg 0% 67%);
css: Use SCSS nesting in zulip.scss for `.nav`.
2020-05-19 12:43:59 +02:00
border-left: 7px solid transparent;
styles: Format CSS with Prettier. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-04 23:58:56 +02:00
content: "";
css: Use SCSS nesting in zulip.scss for `.nav`.
2020-05-19 12:43:59 +02:00
z-index: 10;
}
css: Reorder zulip.scss to put `.nav` alongside.
2020-05-19 12:42:52 +02:00
}
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
.nav .dropdown-menu a,
.typeahead.dropdown-menu a {
color: inherit;
}
css: Use SCSS nesting in zulip.scss for `.typeahead`.
2020-05-19 12:46:21 +02:00
.typeahead.dropdown-menu {
.active {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 100%);
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
css: Use SCSS nesting in zulip.scss for `.typeahead`.
2020-05-19 12:46:21 +02:00
.unsubscribed_icon {
display: block;
float: right;
margin-top: 5px;
margin-right: -12px;
font-size: 0.8em;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(96deg 7% 73%);
css: Use SCSS nesting in zulip.scss for `.typeahead`.
2020-05-19 12:46:21 +02:00
}
}
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
css: Use SCSS nesting in zulip.scss for `.typeahead`.
2020-05-19 12:46:21 +02:00
.unsubscribed_icon {
display: none;
}
css: Reorder zulip.scss to put `.typeahead` alongside.
2020-05-19 12:45:13 +02:00
}
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
.typeahead-image {
display: inline-block;
height: 21px;
width: 21px;
position: relative;
css: Fix vertical alignment of mention typeahead. Somehow the previous styling was oddly off-center.
2021-03-05 01:45:25 +01:00
margin-top: -4px;
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
vertical-align: middle;
top: 2px;
right: 8px;
border-radius: 4px;
/* For FontAwesome icons used in place of images for some users. */
font-size: 19px;
text-align: center;
compose: Add user presence circles in mention and pm typeahead. This commit addresses the problem of user's status visibility to some extent. It adds presence circles, like we have in buddy_list to the typeahead suggestions that are given for mentioning users in messages. Tweaked by tabbott to adjust vertical alignment of group mentions as well. Testing for the changes is done manually in the developement server, and also by updating frontend tests to address these changes. Fixes: #17138
2021-02-26 09:24:04 +01:00
css: Add separate class for typeahead items with no presence circle. This commit adds a new class for typeahead items that do not need a presence circle. It is changed to support addition of new items that do not require presence circle. There should not be any visual change due to this.
2021-03-10 22:51:53 +01:00
&.no-presence-circle {
compose: Add user presence circles in mention and pm typeahead. This commit addresses the problem of user's status visibility to some extent. It adds presence circles, like we have in buddy_list to the typeahead suggestions that are given for mentioning users in messages. Tweaked by tabbott to adjust vertical alignment of group mentions as well. Testing for the changes is done manually in the developement server, and also by updating frontend tests to address these changes. Fixes: #17138
2021-02-26 09:24:04 +01:00
margin-left: 9px;
top: 3px;
}
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
}
css: Use SCSS nesting in zulip.scss for `nav`.
2020-05-19 12:50:20 +02:00
nav {
.column-left {
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
text-align: left;
navbar: Widen navbar to fill the full screen on large screens. Now that the navbar is a different color, we want it to also take up the full width of the screen. Because the navbar has margin, this commit adds a new div. To not have to add a new div, the scrollbar would need to be moved to the `html` element, which is a bigger project. This commit also moves the zulip logo to be left-justified instead of centered, since it looks strange centered with the full width navbar.
2023-03-25 22:23:04 +01:00
margin-left: 15px;
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
css: Use SCSS nesting in zulip.scss for `nav`.
2020-05-19 12:50:20 +02:00
.nav-logo {
display: inline-block;
vertical-align: top;
margin-top: 8px;
height: 25px;
max-width: 200px;
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
@media (height < $short_navbar_cutoff_height) {
height: 15px;
}
css: Use SCSS nesting in zulip.scss for `nav`.
2020-05-19 12:50:20 +02:00
}
}
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& a {
css: Use SCSS nesting in zulip.scss for `nav`.
2020-05-19 12:50:20 +02:00
&.no-style:hover {
text-decoration: none;
cursor: pointer;
}
css: Reorder zulip.scss to put `nav` alongside.
2020-05-19 12:48:41 +02:00
css: Use SCSS nesting in zulip.scss for `nav`.
2020-05-19 12:50:20 +02:00
.no-style {
text-decoration: none;
}
}
navbar: Shift Search_box styles to be near tab_bar styles. This is a prep commit to the change of the navbar UI, in the new UI the navbar and search box are toggled by icons and exist in the same space on the UI. This commit only moves the search_box styles to be near the tab_bar styles, so that future changes are easier to make, read and maintain.
2020-03-27 20:48:20 +01:00
}
Get rid of selectors like span.foo Just write .foo. We shouldn't have to care what type of tag it is. (imported from commit 86c4eeecbe4f5c9875002e3fd81757cd49050268)
2012-09-13 22:20:07 +02:00
#bottom_whitespace {
Fix whitespace in CSS.
2016-07-18 03:10:51 +02:00
display: block;
css: Use a variable to track bottom_whitespace height. Since we want the same space in recent topics to display the compose box without overlapping with any other topics, it makes sense to use a common variable.
2023-05-30 20:31:39 +02:00
height: var(--max-unexpanded-compose-height);
Add a block of whitespace at the bottom of the zephyr feed. That way you can see new zephyrs as they come in. (imported from commit 6b72a7f2116130edc0444f601423453801ddb6b5)
2012-09-11 20:12:39 +02:00
}
My take on a prettier pointer. (imported from commit 7d0c37c85781bdd48efb4cf9cec49bb6df7f0954)
2012-09-11 23:37:46 +02:00
Add documentation on search operators. (imported from commit 9ed5692685b52d6e4d4f1a59c1b4cc0fde252ff2)
2013-12-02 22:51:03 +01:00
.operator_value {
styles: Use Source Code Pro as our monospace font. Fixes #15993. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-03 04:01:40 +02:00
font-family: "Source Code Pro", monospace;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(353deg 70% 65%);
Add documentation on search operators. (imported from commit 9ed5692685b52d6e4d4f1a59c1b4cc0fde252ff2)
2013-12-02 22:51:03 +01:00
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
Add documentation on search operators. (imported from commit 9ed5692685b52d6e4d4f1a59c1b4cc0fde252ff2)
2013-12-02 22:51:03 +01:00
.operator {
styles: Use Source Code Pro as our monospace font. Fixes #15993. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-03 04:01:40 +02:00
font-family: "Source Code Pro", monospace;
Add documentation on search operators. (imported from commit 9ed5692685b52d6e4d4f1a59c1b4cc0fde252ff2)
2013-12-02 22:51:03 +01:00
}
message view: Show indicator while fetching new messages. We already have a loading indicator for fetching older messages. Thus it makes sense to implement the same for displaying newer messages. We set the display of `bottom-messages-logo` to none, to prevent displaying two loading indicators during the initial message load. Fixes #15060.
2020-05-26 16:27:06 +02:00
#loading_older_messages_indicator,
#loading_newer_messages_indicator {
Make the loading more messages indicator absolutely positioned It now appears on top of message contents. (imported from commit ac72a38f2a3062f7107db8125e11de78e40d927e)
2013-07-12 18:31:26 +02:00
margin: 10px;
}
message view: Show indicator while fetching new messages. We already have a loading indicator for fetching older messages. Thus it makes sense to implement the same for displaying newer messages. We set the display of `bottom-messages-logo` to none, to prevent displaying two loading indicators during the initial message load. Fixes #15060.
2020-05-26 16:27:06 +02:00
#loading_older_messages_indicator_box_container,
#loading_newer_messages_indicator_box_container {
Make the loading more messages indicator absolutely positioned It now appears on top of message contents. (imported from commit ac72a38f2a3062f7107db8125e11de78e40d927e)
2013-07-12 18:31:26 +02:00
position: absolute;
left: 50%;
}
message view: Show indicator while fetching new messages. We already have a loading indicator for fetching older messages. Thus it makes sense to implement the same for displaying newer messages. We set the display of `bottom-messages-logo` to none, to prevent displaying two loading indicators during the initial message load. Fixes #15060.
2020-05-26 16:27:06 +02:00
#loading_older_messages_indicator_box,
#loading_newer_messages_indicator_box {
Make the loading more messages indicator absolutely positioned It now appears on top of message contents. (imported from commit ac72a38f2a3062f7107db8125e11de78e40d927e)
2013-07-12 18:31:26 +02:00
position: relative;
left: -50%;
css: Decrease vertical space at top of feed. This is system unfortunately has a rather complicated calculation to compute the offsets correctly, but the net effect here is that the top section of the Zulip window is much more space-efficient. Shrinking the tab bar underpadding, part of this change, fixes #4444. We only need the underpadding to be as tall as the space above the floating recipient bar, which is definitely less than 10px, so I don't anticipate regressions caused by this.
2017-05-16 23:29:26 +02:00
top: -43px;
Make the loading more messages indicator absolutely positioned It now appears on top of message contents. (imported from commit ac72a38f2a3062f7107db8125e11de78e40d927e)
2013-07-12 18:31:26 +02:00
z-index: 1;
Clean zulip.css to use 4 space indents.
2017-03-18 23:49:11 +01:00
border-radius: 6px;
Use not-tables for loading indicators (imported from commit 37a18feea4366e66d4e0a42d8f66edc55928c5f7)
2013-01-15 21:41:16 +01:00
}
#page_loading_indicator {
margin: 10px auto;
Add ability to show/hide a "load more messages" spinner. (imported from commit 611e53b2574ef50c9ab0a47fc2ebedd931a49dfd)
2012-11-28 22:17:57 +01:00
}
Make the heading of a striped table more distinct e.g. in formatting help (imported from commit 0a4123c412689fb2f90985028bd7237fa6cdfb19)
2012-11-29 17:22:00 +01:00
loading-spinner: Fix position of spinner on home page. In this we fix the positioning of the loading spinner on the home page when its loaded for the first time. First time here does not mean first time use but means first time of a new session.
2017-04-05 03:55:28 +02:00
#page_loading_indicator_box_container {
position: absolute;
left: 50%;
}
#page_loading_indicator_box {
position: relative;
left: -50%;
css: Decrease vertical space at top of feed. This is system unfortunately has a rather complicated calculation to compute the offsets correctly, but the net effect here is that the top section of the Zulip window is much more space-efficient. Shrinking the tab bar underpadding, part of this change, fixes #4444. We only need the underpadding to be as tall as the space above the floating recipient bar, which is definitely less than 10px, so I don't anticipate regressions caused by this.
2017-05-16 23:29:26 +02:00
top: -43px;
loading-spinner: Fix position of spinner on home page. In this we fix the positioning of the loading spinner on the home page when its loaded for the first time. First time here does not mean first time use but means first time of a new session.
2017-04-05 03:55:28 +02:00
z-index: 1;
border-radius: 6px;
}
stream create: Overhaul create-stream add-subscribers UI. The most notable change here is that when you are adding subscribers to a stream as part of creating the stream, you can now use the same essential pill-based UI for adding users as we do when you edit subscribers for an existing stream. We don't try to exactly mimic the edit-stream UI or implementation, since when you are adding subscribers during create-stream, we are just updating a list in memory, whereas in the edit-stream UI, we immediately send info to the server. Fixes #20499
2022-02-08 18:56:40 +01:00
#create_stream_subscribers {
Add padding to checkboxes and fix HTML. The ‘for’ attribute is not valid HTML in the case of this because the emails are invalid character sets and the input has no ID with the email. This changes it to a data-name which is still searchable but doesn’t interfere with typical input behavior. The checkboxes no longer float-left, fixing an issue with the subscribe buttons leaning right in narrow windows. Fixes: #1491.
2016-08-23 22:23:56 +02:00
margin-top: 10px;
css: Use SCSS nesting in zulip.scss for `#user-checkboxes`.
2020-05-19 12:56:29 +02:00
.checkbox {
display: block;
Add search box for filtering users to add when creating new streams. Fixes: #779.
2016-07-07 00:58:11 +02:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& input[type="checkbox"] {
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
margin: 5px 0;
css: Use SCSS nesting in zulip.scss for `#user-checkboxes`.
2020-05-19 12:56:29 +02:00
float: none;
}
}
Add padding to checkboxes and fix HTML. The ‘for’ attribute is not valid HTML in the case of this because the emails are invalid character sets and the input has no ID with the email. This changes it to a data-name which is still searchable but doesn’t interfere with typical input behavior. The checkboxes no longer float-left, fixing an issue with the subscribe buttons leaning right in narrow windows. Fixes: #1491.
2016-08-23 22:23:56 +02:00
}
Add subscribe button in narrowed view when stream has no messages. A temporary message appears on successful subscription, with a button offering to unsubscribe in case the user subscribed by accident.
2016-03-22 16:50:09 +01:00
.sub_button_row {
text-align: center;
}
topic edit: Improve styling of topic edit icons (save and cancel). The earlier styles were inconsistent with the rest of UI. The new styles follow the colour scheme. Fixes #10983
2019-01-14 07:10:55 +01:00
.small_square_button {
padding: 0;
Restyle subject editing form (imported from commit f2093939fa8069b73e7c785a4dd835eab4c825cd)
2014-01-17 16:11:18 +01:00
border: none;
topic edit: Improve styling of topic edit icons (save and cancel). The earlier styles were inconsistent with the rest of UI. The new styles follow the colour scheme. Fixes #10983
2019-01-14 07:10:55 +01:00
font-size: 12px;
width: 18px;
height: 18px;
border-radius: 4px;
margin-bottom: 3px;
Restyle subject editing form (imported from commit f2093939fa8069b73e7c785a4dd835eab4c825cd)
2014-01-17 16:11:18 +01:00
css: Refactor topic edit buttons to use scss nesting.
2019-07-17 21:30:39 +02:00
&:focus {
outline: none;
}
Restyle subject editing form (imported from commit f2093939fa8069b73e7c785a4dd835eab4c825cd)
2014-01-17 16:11:18 +01:00
css: Refactor topic edit buttons to use scss nesting.
2019-07-17 21:30:39 +02:00
&.small_square_x {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background-color: hsl(0deg 0% 100%);
color: hsl(0deg 0% 47%);
css: Clean up styling of topic edit buttons. Related to: #11233.
2019-07-16 12:48:45 +02:00
css: Refactor topic edit buttons to use scss nesting.
2019-07-17 21:30:39 +02:00
&:hover {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 18%);
css: Refactor topic edit buttons to use scss nesting.
2019-07-17 21:30:39 +02:00
}
}
Restyle subject editing form (imported from commit f2093939fa8069b73e7c785a4dd835eab4c825cd)
2014-01-17 16:11:18 +01:00
}
message edit: show spinner on topic change. On clicking the checkbox in topic edit form, display a spinner and hide the cancel icon. Also, do not display any success message. Fixes #8793.
2018-03-23 08:44:55 +01:00
div.topic_edit_spinner {
display: inline-block;
width: 18px;
height: 18px;
margin-top: -1px;
padding: 2px;
vertical-align: middle;
}
toggle_resolve_topic: Display spinner while request is in progress. We replace the check icon for "Mark as resolved/unresolved" with a spinner while the request is still ongoing. This helps to prevent double-clicking and reduce possible race conditions. Fixes #26190.
2023-09-16 09:40:07 +02:00
div.toggle_resolve_topic_spinner {
margin-top: -12px;
padding-left: 9px;
}
div.topic_edit_spinner .loading_indicator_spinner,
div.toggle_resolve_topic_spinner .loading_indicator_spinner {
message edit: show spinner on topic change. On clicking the checkbox in topic edit form, display a spinner and hide the cancel icon. Also, do not display any success message. Fixes #8793.
2018-03-23 08:44:55 +01:00
width: 14px;
height: 14px;
inline_topic_edit: Fix spinner not visible in the dark mode. A spinner is shown when the request is in progress for inline topic edit. Earlier, the spinner was not visible in the dark theme. This commit makes it visible by setting a different fill color in the dark theme.
2023-09-16 10:48:22 +02:00
& path {
fill: var(--color-recipient-bar-controls-spinner);
}
message edit: show spinner on topic change. On clicking the checkbox in topic edit form, display a spinner and hide the cancel icon. Also, do not display any success message. Fixes #8793.
2018-03-23 08:44:55 +01:00
}
ui: Add loading indicator for message edits. This commit hides the "Save" and "Cancel" buttons after the first click and shows a spinner until a successful / failed response is received. We do not allow sending any other message edit requests during this time frame, similar to how our inline topic edit ui works. Fixes #16143.
2020-08-21 07:34:21 +02:00
.message_edit_spinner {
margin-right: 8px;
padding-top: 5px;
}
.message_edit_spinner .loading_indicator_spinner {
width: 20px;
height: 20px;
}
invite: Add bootstrap CSS rules to emails textarea in invite overlay. This commit adds required bootstrap CSS rules used for emails textarea element in invite modal with existing CSS for that element in zulip.css. We also change the selector to use class instead of ID such that the dark theme CSS can take precedence when using dark theme. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 19:01:30 +01:00
textarea.invitee_emails {
css: Reorder zulip.scss to put `#invite-user` alongside.
2020-05-19 13:09:00 +02:00
min-height: 40px;
max-height: 300px;
width: 96%;
max-width: 96%;
invite_user: Convert overlay to `dialog_widget`. Fixes #22957.
2022-10-11 18:02:39 +02:00
resize: vertical !important;
invite: Add bootstrap CSS rules to emails textarea in invite overlay. This commit adds required bootstrap CSS rules used for emails textarea element in invite modal with existing CSS for that element in zulip.css. We also change the selector to use class instead of ID such that the dark theme CSS can take precedence when using dark theme. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 19:01:30 +01:00
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 33%);
background-color: hsl(0deg 0% 100%);
invite: Add bootstrap CSS rules to emails textarea in invite overlay. This commit adds required bootstrap CSS rules used for emails textarea element in invite modal with existing CSS for that element in zulip.css. We also change the selector to use class instead of ID such that the dark theme CSS can take precedence when using dark theme. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 19:01:30 +01:00
border-radius: 4px;
vertical-align: middle;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border: 1px solid hsl(0deg 0% 80%);
invite: Add bootstrap CSS rules to emails textarea in invite overlay. This commit adds required bootstrap CSS rules used for emails textarea element in invite modal with existing CSS for that element in zulip.css. We also change the selector to use class instead of ID such that the dark theme CSS can take precedence when using dark theme. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 19:01:30 +01:00
padding: 4px 6px;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
dependencies: Upgrade JavaScript dependencies. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 23:08:07 +02:00
transition:
border linear 0.2s,
box-shadow linear 0.2s;
invite: Add bootstrap CSS rules to emails textarea in invite overlay. This commit adds required bootstrap CSS rules used for emails textarea element in invite modal with existing CSS for that element in zulip.css. We also change the selector to use class instead of ID such that the dark theme CSS can take precedence when using dark theme. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 19:01:30 +01:00
&:focus {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border-color: hsl(206.5deg 80% 62% / 80%);
invite: Add bootstrap CSS rules to emails textarea in invite overlay. This commit adds required bootstrap CSS rules used for emails textarea element in invite modal with existing CSS for that element in zulip.css. We also change the selector to use class instead of ID such that the dark theme CSS can take precedence when using dark theme. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 19:01:30 +01:00
outline: 0;
dependencies: Upgrade JavaScript dependencies. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 23:08:07 +02:00
box-shadow:
inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
0 0 8px hsl(206.5deg 80% 62% / 60%);
invite: Add bootstrap CSS rules to emails textarea in invite overlay. This commit adds required bootstrap CSS rules used for emails textarea element in invite modal with existing CSS for that element in zulip.css. We also change the selector to use class instead of ID such that the dark theme CSS can take precedence when using dark theme. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 19:01:30 +01:00
}
&:disabled {
cursor: not-allowed;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background-color: hsl(0deg 0% 93%);
invite: Add bootstrap CSS rules to emails textarea in invite overlay. This commit adds required bootstrap CSS rules used for emails textarea element in invite modal with existing CSS for that element in zulip.css. We also change the selector to use class instead of ID such that the dark theme CSS can take precedence when using dark theme. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 19:01:30 +01:00
}
css: Reorder zulip.scss to put `#invite-user` alongside.
2020-05-19 13:09:00 +02:00
}
invite: Re-add bootstrap CSS for custom expiration text input. This commit re-adds bootstrap CSS for custom expiration time input in invite modal. We also need to add the code to handle dark theme CSS here to make sure the CSS for dark theme is prioritized correctly. This commit also refactors the CSS to modify the selectors to be simple and remove unnecessary IDs.
2023-06-20 05:53:00 +02:00
#custom-expiration-time-input,
#invite-user-form {
margin: 0;
css: Reorder zulip.scss to put `#invite-user` alongside.
2020-05-19 13:09:00 +02:00
}
invite: Add bootstrap CSS rules for select elements in invite modal. This commit adds bootstrap CSS rules used for select elements in invite UI in zulip.css. This change is done so we can safely remove select CSS rules from bootstrap.css as a part of our process to remove bootstrap. This commit also adds class to a couple of select elements in invite UI such that we can use those class to write CSS as using IDs would lead to the dark-theme background not being applied correctly.
2022-12-23 17:47:12 +01:00
select.invite-expires-in,
select.custom-expiration-time,
select.invite-as {
width: 220px;
height: 30px;
style: Fix dropdown text alignment by reducing vertical padding. Zulip's select widgets have a 30px height; this comes from Bootstrap but is also generally nice for visual consistency. In modals, we use a 15px font-size, instead of the 14px used in the rest of the app, and in that context, the 4px vertical padding plus 30px fixed height resulted in the text not being vertically aligned. Fix this by removing that vertical padding; all of our select elements with these classes appear to position the text in the center of the dropdown through other CSS mechanisms.
2023-03-31 09:21:02 +02:00
padding: 0 6px;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 33%);
invite: Add bootstrap CSS rules for select elements in invite modal. This commit adds bootstrap CSS rules used for select elements in invite UI in zulip.css. This change is done so we can safely remove select CSS rules from bootstrap.css as a part of our process to remove bootstrap. This commit also adds class to a couple of select elements in invite UI such that we can use those class to write CSS as using IDs would lead to the dark-theme background not being applied correctly.
2022-12-23 17:47:12 +01:00
border-radius: 4px;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border: 1px solid hsl(0deg 0% 80%);
invite: Add bootstrap CSS rules for select elements in invite modal. This commit adds bootstrap CSS rules used for select elements in invite UI in zulip.css. This change is done so we can safely remove select CSS rules from bootstrap.css as a part of our process to remove bootstrap. This commit also adds class to a couple of select elements in invite UI such that we can use those class to write CSS as using IDs would lead to the dark-theme background not being applied correctly.
2022-12-23 17:47:12 +01:00
cursor: pointer;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background-color: hsl(0deg 0% 100%);
invite: Add bootstrap CSS rules for select elements in invite modal. This commit adds bootstrap CSS rules used for select elements in invite UI in zulip.css. This change is done so we can safely remove select CSS rules from bootstrap.css as a part of our process to remove bootstrap. This commit also adds class to a couple of select elements in invite UI such that we can use those class to write CSS as using IDs would lead to the dark-theme background not being applied correctly.
2022-12-23 17:47:12 +01:00
vertical-align: middle;
}
invites: Handle long invite URL overflow properly. Fixes #19764.
2021-09-28 21:57:50 +02:00
#multiuse_invite_link {
invite_user: Convert overlay to `dialog_widget`. Fixes #22957.
2022-10-11 18:02:39 +02:00
width: 370px;
invites: Handle long invite URL overflow properly. Fixes #19764.
2021-09-28 21:57:50 +02:00
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
overflow: hidden;
vertical-align: bottom;
}
invites: Move multiuse invite status to footer.
2019-02-06 20:32:06 +01:00
#invite-stream-checkboxes {
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& i.zulip-icon-globe {
invite: Display globe icon for web-public streams. This requires both passing through the is_web_public parameter to the template, and a bit of CSS to make the globe not huge.
2022-12-15 06:03:19 +01:00
font-size: 80%;
}
invites: Move multiuse invite status to footer.
2019-02-06 20:32:06 +01:00
}
invite: Restructure "Invite user" modal for improved user experience. This commit revamps the invite type section of the "Invite user" modal to provide a more intuitive user experience. The section now includes a radio button option with two choices: "Send an email" and "Generate an invite link." The email input box is hidden when the "Generate an invite link" option is selected. Fixes #24692.
2023-03-16 11:29:00 +01:00
.invite_type_radio_section {
margin: 2px 2px 2px 5px;
invites: Frontend changes for adding the new realm setting. This commit does the changes in frontend required for adding the new setting `Who can create multiuse invite link.` Fixes #15159.
2023-08-03 16:06:40 +02:00
& div {
width: fit-content;
}
invite: Restructure "Invite user" modal for improved user experience. This commit revamps the invite type section of the "Invite user" modal to provide a more intuitive user experience. The section now includes a radio button option with two choices: "Send an email" and "Generate an invite link." The email input box is hidden when the "Generate an invite link" option is selected. Fixes #24692.
2023-03-16 11:29:00 +01:00
& input[type="radio"] {
cursor: pointer;
&:disabled {
cursor: not-allowed;
}
}
.control-label-disabled label {
pointer-events: none;
cursor: not-allowed;
}
invites: Add generate multiuse invite button.
2019-02-06 20:31:45 +01:00
}
invite: Re-add bootstrap CSS for custom expiration text input. This commit re-adds bootstrap CSS for custom expiration time input in invite modal. We also need to add the code to handle dark theme CSS here to make sure the CSS for dark theme is prioritized correctly. This commit also refactors the CSS to modify the selectors to be simple and remove unnecessary IDs.
2023-06-20 05:53:00 +02:00
#custom-expiration-time-input {
width: 5ch;
margin-right: 15px;
invite: Add custom option for invite expiration time in frontend.
2022-02-11 17:54:15 +01:00
invite: Re-add bootstrap CSS for custom expiration text input. This commit re-adds bootstrap CSS for custom expiration time input in invite modal. We also need to add the code to handle dark theme CSS here to make sure the CSS for dark theme is prioritized correctly. This commit also refactors the CSS to modify the selectors to be simple and remove unnecessary IDs.
2023-06-20 05:53:00 +02:00
padding: 4px 6px;
color: hsl(0deg 0% 33%);
border-radius: 4px;
border: 1px solid hsl(0deg 0% 80%);
box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
dependencies: Upgrade JavaScript dependencies. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 23:08:07 +02:00
transition:
border linear 0.2s,
box-shadow linear 0.2s;
invite: Re-add bootstrap CSS for custom expiration text input. This commit re-adds bootstrap CSS for custom expiration time input in invite modal. We also need to add the code to handle dark theme CSS here to make sure the CSS for dark theme is prioritized correctly. This commit also refactors the CSS to modify the selectors to be simple and remove unnecessary IDs.
2023-06-20 05:53:00 +02:00
&:focus {
border-color: hsl(206deg 80% 62% / 80%);
outline: 0;
dependencies: Upgrade JavaScript dependencies. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 23:08:07 +02:00
box-shadow:
inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
invite: Re-add bootstrap CSS for custom expiration text input. This commit re-adds bootstrap CSS for custom expiration time input in invite modal. We also need to add the code to handle dark theme CSS here to make sure the CSS for dark theme is prioritized correctly. This commit also refactors the CSS to modify the selectors to be simple and remove unnecessary IDs.
2023-06-20 05:53:00 +02:00
0 0 8px hsl(206deg 80% 62% / 60%);
invite: Add custom option for invite expiration time in frontend.
2022-02-11 17:54:15 +01:00
}
}
invite: Re-add bootstrap CSS for custom expiration text input. This commit re-adds bootstrap CSS for custom expiration time input in invite modal. We also need to add the code to handle dark theme CSS here to make sure the CSS for dark theme is prioritized correctly. This commit also refactors the CSS to modify the selectors to be simple and remove unnecessary IDs.
2023-06-20 05:53:00 +02:00
#custom-expiration-time-unit {
width: auto;
}
When a narrow would have no messages and just be grey, show a notice instead. (imported from commit 2b2b653805cb1ebdb545f83b20c01f1d6cbde9b7)
2013-02-23 19:38:25 +01:00
.empty_feed_notice {
message view: Fix line-wrapping of empty conversation/feed message.
2017-08-24 22:40:27 +02:00
padding: 3em 1em;
When a narrow would have no messages and just be grey, show a notice instead. (imported from commit 2b2b653805cb1ebdb545f83b20c01f1d6cbde9b7)
2013-02-23 19:38:25 +01:00
text-align: center;
}
empty_feed_notice: Style empty message feed similar to other views.
2023-10-20 13:39:47 +02:00
.empty-feed-notice-title {
font-size: 1.5em;
font-weight: 400;
style: Fix overflow of text. Fixes: #27282
2023-11-04 19:15:09 +01:00
word-wrap: break-word;
empty_feed_notice: Style empty message feed similar to other views.
2023-10-20 13:39:47 +02:00
}
.empty-feed-notice-description {
font-size: 1.1em;
}
compose fade: Introduce message-fade/user-fade CSS classes. We now have specific HTML/CSS classes for message fading and user fading. They currently both have the same effect, changing opacity, but we can now more easily treat them differently. This change also removes "faded" attributes in compose-fade, which avoids some confusion related to landing pages having a "faded" class as well.
2017-03-16 19:26:26 +01:00
.message-fade,
compose fade: Limit user-fade to .user-sidebar-entry. Our JS/CSS now only uses the user-fade class for elements that have the user-sidebar-entry class. This should prevent bugs related to having doubly opaque elements.
2017-03-16 20:33:02 +01:00
.user_sidebar_entry.user-fade {
Restore old mix-protection mechanism. This is the moral equivalent of reverting 25ac8c557978a3867eba90d93857d9bd728149e2 (imported from commit dc9ac79c2bed46b836bf666d3718f3bcac11099e)
2013-07-24 22:32:20 +02:00
opacity: 0.4;
Fade out messages surrounding a reply message, to make mixing harder. (imported from commit da150ad2f0877d058e1a60deb7a7632e52bd3533)
2013-02-13 21:30:17 +01:00
}
Add emoji support :+1: :tophat: :poop: :grinning: (imported from commit 5f15ddb4492aad7cc4a9b3249acac8b8edc0a177)
2013-03-01 22:07:27 +01:00
.emoji {
Larger emoji. (imported from commit 3fb9a5df7fde4cd073f344d9aed5cb16c1b0de71)
2014-03-06 22:10:45 +01:00
height: 25px;
width: 25px;
css: Move inline emoji styles under rendered markdown. This change paves the way to update how actual status emoji are presented in sidebars, pills, etc., care of flexboxes, which is previewed here by the inclusion of the `align-self` property.
2023-04-04 22:52:26 +02:00
/* Maintain `vertical-align` for inline-block styles in messages: */
reactions.css: Remove the hack used for correctly positioning the emojis.
2017-08-28 21:56:19 +02:00
vertical-align: middle;
css: Move inline emoji styles under rendered markdown. This change paves the way to update how actual status emoji are presented in sidebars, pills, etc., care of flexboxes, which is previewed here by the inclusion of the `align-self` property.
2023-04-04 22:52:26 +02:00
/* But, for all others, use flexbox and its align-self property.
What is excellent about this is that flexbox will ignore the
`vertical-align` value, while inline-block contexts will ignore
the `align-self` property: */
align-self: center;
emoji: Switch to using iamcal sprite sheets for reactions and pickers. Without changing how we render emoji in messages or changing the data set used for emoji names, this switches us to the superior percentage-based system for choosing which emoji from the spritesheet to select and the iamcal sprite sheets. It requires some small changes to CSS to ensure emoji are centered properly in the new design. Based on Harshit Gupta's work on "Interrelated emoji infrastructure changes".
2017-05-03 22:11:35 +02:00
}
css: Hyphenate .status-emoji selector.
2023-03-15 21:56:35 +01:00
.status-emoji {
status_emoji: Extract status emoji template. Currently the emoji_status set by the user is only seen in the buddy list, it would be useful to show the emoji_status in other places as well. As such this commit does the prep work of extracting a template which will be used in all places that need to show the status emoji. With refactor and minor edits by Yash RE. Co-authored-by: YashRE42 <33805964+YashRE42@users.noreply.github.com>
2022-02-05 18:02:04 +01:00
height: 16px;
width: 16px;
/* We are setting minimum width here because when the user's name is very long,
emoji's width decreases and causes it to break. */
min-width: 16px;
status emoji: Adjust margin for common element. After some experimentation, these styles look better in all the places we're displaying status emoji. See the comments for justification.
2022-02-11 22:04:28 +01:00
/* In most contexts, status emoji appear immediately after a name
status_emoji: Bump margin-left on status emoji by 1 px. While the 2px value that we had previously chosen looked alright for most emoji (:grinning:, :smiley:, etc) some emoji such as :octopus: used more of the width available to them and as such still looked too close to the user name. As such this commit bumps the value to 3px (4px was a bit too much space).
2022-03-06 07:09:19 +01:00
field with no margin. Position the status emoji with 3px of left
status emoji: Adjust margin for common element. After some experimentation, these styles look better in all the places we're displaying status emoji. See the comments for justification.
2022-02-11 22:04:28 +01:00
margin to space it from the name, and set no right margin so
that any components to the right appear equally distant as they
would be from a name. */
status_emoji: Bump margin-left on status emoji by 1 px. While the 2px value that we had previously chosen looked alright for most emoji (:grinning:, :smiley:, etc) some emoji such as :octopus: used more of the width available to them and as such still looked too close to the user name. As such this commit bumps the value to 3px (4px was a bit too much space).
2022-03-06 07:09:19 +01:00
margin-left: 3px;
status emoji: Adjust margin for common element. After some experimentation, these styles look better in all the places we're displaying status emoji. See the comments for justification.
2022-02-11 22:04:28 +01:00
margin-right: 0;
status_emoji: Extract status emoji template. Currently the emoji_status set by the user is only seen in the buddy list, it would be useful to show the emoji_status in other places as well. As such this commit does the prep work of extracting a template which will be used in all places that need to show the status emoji. With refactor and minor edits by Yash RE. Co-authored-by: YashRE42 <33805964+YashRE42@users.noreply.github.com>
2022-02-05 18:02:04 +01:00
}
Add a password strength check on the settings page (imported from commit 68ae1732e62be076a4619b522009a76215d69757)
2013-04-04 00:55:36 +02:00
/* FIXME: Combine this rule with the one in portico.css somehow? */
Move password strength bar update into password_quality (imported from commit 054d9487e325cff819e80fb0e1cb85f5c0db42d8)
2013-04-08 20:21:20 +02:00
#pw_strength {
user setting: Move password change flow in UI into modal. Thanks to @brokwhittaker for his significant chagnes in password modal design.
2017-12-24 19:00:29 +01:00
width: 100%;
height: 10px;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
margin-bottom: 0;
Add a password strength check on the settings page (imported from commit 68ae1732e62be076a4619b522009a76215d69757)
2013-04-04 00:55:36 +02:00
}
settings: Format API key link like other forms (imported from commit 805d3cfffcbd7f1b4274f49b0b6c2c6902b111c2)
2013-04-08 19:15:20 +02:00
settings: Hide password change controls behind a link (imported from commit 6d0f3861ef97f45231d388378f429974e876ddbe)
2013-04-08 20:03:21 +02:00
#pw_change_controls {
display: none;
}
Align star icon with home icon (imported from commit c8ba6b53ce9faf9e003cb7b1a0096f13fc85002e)
2013-04-12 22:08:49 +02:00
Fix code format for CSS selectors with commas. This change basically does s/,<space>/,<cr>/. (imported from commit 4ab295d0dbc24de6baa29908c2d6a469f35492f3)
2013-08-23 07:31:38 +02:00
.sub-unsub-message,
.date_row {
css: Move inline date separators from messagebox to message_row. Fixes border-related glitches introduced by commit 51c6c82003b0428f887bbf3c8d6cf79abc0e333d (#10820). Alternative to #11534. Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-02-14 00:30:19 +01:00
padding-bottom: 10px;
Add UI for restoring a message draft. (imported from commit 3e374048a59d2caf858eb1ce9eae3e22eb0835e4)
2013-04-05 16:44:29 +02:00
}
message view: Fix margin for date separator. Without this tweak the date separator overlaps the left borner.
2019-02-15 16:00:24 +01:00
.date_row {
message_feed_ui: Right align date separators. Align the date separators in the message feed with the timestamps so that all date information is easier to read top-down.
2022-10-12 01:03:08 +02:00
text-align: right;
Better date separator rendering Split up long string (imported from commit 51bab3cbb2d77f0e130d6bb0d486f2d7feba0909)
2013-09-10 18:40:31 +02:00
}
design: Improve design of Subscribe/Unsubscribe buttons in message view. Tweaked by tabbott to use an existing button style. Fixes #5196.
2017-06-04 23:19:07 +02:00
.sub-unsub-message span,
Render both the above and below time on date_row If the date_row is between two messages, it tells you when the message below was sent, but not when the message above was sent--for that you'd either have to click on a message or keep scrolling up. This is especially annoying when there are sometimes gap days on a particular stream (you shouldn't assume that the message above is simply from the previous day). This adds the date of the previous message (the time above) to the date_row. (imported from commit 4c6c956118ae09fedca042e797a6029fdd26e00c)
2013-08-29 01:34:10 +02:00
.date_row span {
Show date in a bar separating messages rather than on each message. Trac #1393. (imported from commit f69d01bd8149f4549694db1ff517a2d0929ffc6a)
2013-06-24 23:16:50 +02:00
display: block;
padding: 4px;
overflow: hidden;
Make date boundary separators all uppercase, lighter, and letterpressed (imported from commit 01ffbda9b4dc478732dba091e3cefced9fb1cb7c)
2013-07-02 20:41:10 +02:00
text-transform: uppercase;
bookend: Use it to advertise recent topics for spectators. We show a minimal text "Browse recent topics" at the end of every narrow. This will help new users to find additional content on the app. Fixes #19844
2021-11-04 07:11:19 +01:00
}
css: Change look of date and time in message list. Fixes #21752.
2022-08-04 15:35:52 +02:00
.sub-unsub-message .stream-status {
message_feed_ui: Increase contrast on msg divider elements. Increase contrast on date dividers, msg times and sub/unsub msg. Some text in the message feed UI has been percieved as too dimmed. This commit aims to increase the contrast on some elements to counter this. Remove border-top from date-divider so that the line is of 1px.
2022-10-12 00:44:12 +02:00
opacity: 0.6;
bookend: Add stream icons to subscribed/unsubscribed divider line. Fixes: #23685.
2022-11-29 17:39:59 +01:00
& i {
font-size: 10px;
position: relative;
top: 1px;
margin-left: 2px;
}
.zulip-icon.zulip-icon-lock {
font-size: 12px;
}
Show date in a bar separating messages rather than on each message. Trac #1393. (imported from commit f69d01bd8149f4549694db1ff517a2d0929ffc6a)
2013-06-24 23:16:50 +02:00
}
message_feed_ui: Right align date separators. Align the date separators in the message feed with the timestamps so that all date information is easier to read top-down.
2022-10-12 01:03:08 +02:00
.sub-unsub-message {
text-align: center;
}
design: Improve design of Subscribe/Unsubscribe buttons in message view. Tweaked by tabbott to use an existing button style. Fixes #5196.
2017-06-04 23:19:07 +02:00
.sub-unsub-message span {
font-size: 1em;
text-transform: none;
}
stylesheets: Fix coding style to comply with stylistic rules.
2018-07-27 00:58:50 +02:00
.sub-unsub-message span::before,
.sub-unsub-message span::after,
.date_row span::before,
.date_row span::after {
Show date in a bar separating messages rather than on each message. Trac #1393. (imported from commit f69d01bd8149f4549694db1ff517a2d0929ffc6a)
2013-06-24 23:16:50 +02:00
display: inline-block;
position: relative;
content: " ";
vertical-align: middle;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
height: 0;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
opacity: 0.15;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border-bottom: 1px solid hsl(0deg 0% 0%);
Show date in a bar separating messages rather than on each message. Trac #1393. (imported from commit f69d01bd8149f4549694db1ff517a2d0929ffc6a)
2013-06-24 23:16:50 +02:00
}
stylesheets: Fix coding style to comply with stylistic rules.
2018-07-27 00:58:50 +02:00
.sub-unsub-message span::before,
message_feed_ui: Right align date separators. Align the date separators in the message feed with the timestamps so that all date information is easier to read top-down.
2022-10-12 01:03:08 +02:00
.sub-unsub-message span::after {
width: 50%;
}
stylesheets: Fix coding style to comply with stylistic rules.
2018-07-27 00:58:50 +02:00
.date_row span::before {
message_feed_ui: Right align date separators. Align the date separators in the message feed with the timestamps so that all date information is easier to read top-down.
2022-10-12 01:03:08 +02:00
width: 100%;
Show date in a bar separating messages rather than on each message. Trac #1393. (imported from commit f69d01bd8149f4549694db1ff517a2d0929ffc6a)
2013-06-24 23:16:50 +02:00
}
stylesheets: Fix coding style to comply with stylistic rules.
2018-07-27 00:58:50 +02:00
.date_row span::after {
message_feed_ui: Right align date separators. Align the date separators in the message feed with the timestamps so that all date information is easier to read top-down.
2022-10-12 01:03:08 +02:00
width: 6px;
left: 0.25em;
css: Implement new design for recipient row. This mostly includes the CSS changes for recipient row design, most of the HTML and JS changes are present in previous commits to this.
2023-04-08 02:48:02 +02:00
/* Align date with message time and recipient bar date. */
margin-right: -1px;
message_feed_ui: Right align date separators. Align the date separators in the message feed with the timestamps so that all date information is easier to read top-down.
2022-10-12 01:03:08 +02:00
}
.sub-unsub-message span::before,
.date_row span::before {
right: 0.25em;
margin-left: -50%;
}
.sub-unsub-message span::after {
left: 0.25em;
Show date in a bar separating messages rather than on each message. Trac #1393. (imported from commit f69d01bd8149f4549694db1ff517a2d0929ffc6a)
2013-06-24 23:16:50 +02:00
margin-right: -50%;
}
Add user interface frontend for editing messages. The only known outstanding bug with this is that it doesn't properly handle the updating of a message's highlighting/presence in a narrowed view (e.g. in theory, a message should disappear if it is edited such that its subject doesn't match your narrow or it no longer matches your search). I think I'll just open a trac ticket about that once this is merged, since it's a little hairy to deal with and kinda a marginal use case. Also it's not pretty, but that should be easy to tweak once we get the framework merged. Conflicts: tools/jslint/check-all.js (imported from commit 2d0e3a440bcd885546bd8e28aff97bf379649950)
2013-05-15 00:22:16 +02:00
.message_edit {
display: none;
}
Style the message edit form. (imported from commit ddbdb3b90c421ed25b781a172a8fac2581ffb65c)
2013-05-21 19:12:27 +02:00
/* Reduce some of the heavy padding from Bootstrap. */
message_edit_form: Convert from `id` to `class`. Since we can have multiple instances of `message_edit_form`, it makes sense to have it as a class. We track the message_edit_form by setting an id to `form` element dependent on message_id.
2021-04-21 16:20:16 +02:00
.message_edit_form {
Fix the position of the edit message label. This fixes the position of the "Topic" label to be above the input and adds a "Content" label to improve consistency.
2017-01-31 22:01:49 +01:00
margin-bottom: 10px;
message_edit_form: Show default cursor instead of pointer. Fixes part of #3938. (This only changes the sections within the message-edit form; the top and left chrome are still cursor: pointer).
2018-04-08 15:51:01 +02:00
cursor: default;
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
css: Use SCSS nesting in zulip.scss for `#message_edit_form`.
2020-05-19 13:12:54 +02:00
.edit-controls {
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
margin-left: 0;
margin-top: 0;
css: Use SCSS nesting in zulip.scss for `#message_edit_form`.
2020-05-19 13:12:54 +02:00
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
message_edit: Improve the style for dropdown toggle button. Earlier, the `stream_header_colorblock` wasn't properly styled with the dropdown toggle button from a UI perspective. This was so because they had a few space between them due to inconsistencies in their border radius. This commit adds an border-radius property to the message_edit dropdown toggle button to eliminate the above issue and improve it's overall look.
2021-07-16 20:14:08 +02:00
/* Override the default border-radius to properly align
the button corners with `stream_header_colorblock`. */
.dropdown-toggle {
border-radius: 1px 4px 4px 1px !important;
}
message_editing: Fix topic edit propagate option cut-off. In the topic changing UI, the 'Change later messages to this topic' and other options in the drop down were cut off when selected in some languages like Russian. Make the selection box width adjust appropriately according to the length of the text, and also place it on its own line unconditionally. users. With tweaks by tabbott to use the same approach we already use in the "Move topic" modal to have the bottom margin for the color block match that of the dropdown_list_widget itself, of having them share CSS. Fixes #19739.
2021-09-15 11:37:21 +02:00
.dropdown-list-widget,
message_edit: Adjust the height of stream_header_colorblock. Previously, the message edit `stream_header_colorblock` used to incorrectly extend down till the textarea which caused the UI to be buggy. Fixed this by adding a `margin-bottom` property similar to what we did in case of Move topic dropdown. This minor change accidentally was missed within commit 7c25bd1aa86e4a0b25ce882e10aa0bfc5a159c36.
2021-07-16 13:12:05 +02:00
.stream_header_colorblock {
message_editing: Fix topic edit propagate option cut-off. In the topic changing UI, the 'Change later messages to this topic' and other options in the drop down were cut off when selected in some languages like Russian. Make the selection box width adjust appropriately according to the length of the text, and also place it on its own line unconditionally. users. With tweaks by tabbott to use the same approach we already use in the "Move topic" modal to have the bottom margin for the color block match that of the dropdown_list_widget itself, of having them share CSS. Fixes #19739.
2021-09-15 11:37:21 +02:00
margin-bottom: 10px;
message_edit: Adjust the height of stream_header_colorblock. Previously, the message edit `stream_header_colorblock` used to incorrectly extend down till the textarea which caused the UI to be buggy. Fixed this by adding a `margin-bottom` property similar to what we did in case of Move topic dropdown. This minor change accidentally was missed within commit 7c25bd1aa86e4a0b25ce882e10aa0bfc5a159c36.
2021-07-16 13:12:05 +02:00
}
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& textarea {
css: Use SCSS nesting in zulip.scss for `#message_edit_form`.
2020-05-19 13:12:54 +02:00
width: 100%;
min-width: 206px;
box-sizing: border-box;
css: Hide bottom-right resizable box in view-source textarea.
2020-08-27 05:34:54 +02:00
/* Setting resize as none hides the bottom right diagonal box
(which even has a background color of its own!). */
resize: none !important;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 33%);
background-color: hsl(0deg 0% 100%);
message_edit: Add bootstrap CSS rules to message edit textarea. This commit adds required bootstrap CSS rules used for message-edit textarea element with existing CSS for that element in zulip.css. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 18:58:28 +01:00
border-radius: 4px;
vertical-align: middle;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border: 1px solid hsl(0deg 0% 80%);
message_edit: Add bootstrap CSS rules to message edit textarea. This commit adds required bootstrap CSS rules used for message-edit textarea element with existing CSS for that element in zulip.css. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 18:58:28 +01:00
padding: 4px 6px;
margin-bottom: 10px;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
dependencies: Upgrade JavaScript dependencies. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 23:08:07 +02:00
transition:
border linear 0.2s,
box-shadow linear 0.2s;
message_edit: Add bootstrap CSS rules to message edit textarea. This commit adds required bootstrap CSS rules used for message-edit textarea element with existing CSS for that element in zulip.css. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 18:58:28 +01:00
&:focus {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border-color: hsl(206.5deg 80% 62% / 80%);
message_edit: Add bootstrap CSS rules to message edit textarea. This commit adds required bootstrap CSS rules used for message-edit textarea element with existing CSS for that element in zulip.css. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 18:58:28 +01:00
outline: 0;
dependencies: Upgrade JavaScript dependencies. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 23:08:07 +02:00
box-shadow:
inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
0 0 8px hsl(206.5deg 80% 62% / 60%);
message_edit: Add bootstrap CSS rules to message edit textarea. This commit adds required bootstrap CSS rules used for message-edit textarea element with existing CSS for that element in zulip.css. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 18:58:28 +01:00
}
&:read-only,
&:disabled {
cursor: not-allowed;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background-color: hsl(0deg 0% 93%);
message_edit: Add bootstrap CSS rules to message edit textarea. This commit adds required bootstrap CSS rules used for message-edit textarea element with existing CSS for that element in zulip.css. This change is done so we can safely remove textarea CSS rules for bootstrap.css as a part of our process to remove bootstrap without changing existing design.
2022-11-29 18:58:28 +01:00
}
css: Use SCSS nesting in zulip.scss for `#message_edit_form`.
2020-05-19 13:12:54 +02:00
}
Fix the position of the edit message label. This fixes the position of the "Topic" label to be above the input and adds a "Content" label to improve consistency.
2017-01-31 22:01:49 +01:00
}
Allow anyone to edit a "no topic" message This change would allow anyone in the realm to set a topic for a "no topic" message. As soon as the message topic is set, only the sender can change it again. (imported from commit 0a91a93b8fd14549965cedc79f45ffd869d82307)
2013-08-16 23:45:13 +02:00
#topic_edit_form {
Restyle subject editing form (imported from commit f2093939fa8069b73e7c785a4dd835eab4c825cd)
2014-01-17 16:11:18 +01:00
display: inline-block;
styles: Fix shorthand-property-no-redundant-values. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-11-05 03:33:16 +01:00
margin: 0;
Restyle subject editing form (imported from commit f2093939fa8069b73e7c785a4dd835eab4c825cd)
2014-01-17 16:11:18 +01:00
height: 22px;
padding-left: 20px;
padding-right: 3px;
line-height: 22px;
margin-left: -15px;
Allow anyone to edit a "no topic" message This change would allow anyone in the realm to set a topic for a "no topic" message. As soon as the message topic is set, only the sender can change it again. (imported from commit 0a91a93b8fd14549965cedc79f45ffd869d82307)
2013-08-16 23:45:13 +02:00
}
Add some screen divs to be used to box spotlighted content in the tutorial. (imported from commit 2fcb357b9d812287fcb7070e16d91f5da19ffb96)
2013-06-27 20:32:08 +02:00
.screen {
position: absolute;
left: 0;
top: 0;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background-color: hsl(0deg 0% 0%);
Add some screen divs to be used to box spotlighted content in the tutorial. (imported from commit 2fcb357b9d812287fcb7070e16d91f5da19ffb96)
2013-06-27 20:32:08 +02:00
z-index: 20000;
}
Add the new tutorial steps. (imported from commit 9269acbcf58332002b1d45c0134ccb2db980f05c)
2013-06-27 22:18:28 +02:00
org settings: Remove strikethrough from deactivated-user setting. Remove strickethrough and append text to user role.
2019-05-16 10:36:20 +02:00
.deactivated_user .deactivated-user-icon {
color: inherit;
margin-left: 2px;
styles: Format CSS with Prettier. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-04 23:58:56 +02:00
font-size: 0.9em;
Add reactivate button after deactivating a user. (imported from commit e2ae5692d0ba5237cf5a42c29ed44d9782128110)
2013-11-16 16:26:40 +01:00
}
Attempt 2: Notifications in the composebox This moves the notify-not-in-view notifications into the composebox area. It also tries to be a bit smarter about what action it links and what it displays. (imported from commit 1c79bd0d9ef972059a006b17501a09b72e961ee3)
2013-11-13 19:40:02 +01:00
frontend: Change main UI content to not be background images.
2017-06-26 16:12:49 +02:00
.no-drag {
styles: Replace invalid user-drag property with -webkit-user-drag. Commit abbd8a7f459500f514cc5511808d77953809d533 (#13112) should have removed the nonexistent user-drag property rather than the Webkit-specific -webkit-user-drag property. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 00:16:29 +02:00
-webkit-user-drag: none;
frontend: Change main UI content to not be background images.
2017-06-26 16:12:49 +02:00
user-select: none;
}
user profiles: add tooltip for too long email.
2017-12-07 15:47:23 +01:00
popovers: Rename confusing my_email to user_popover_email.
2018-03-12 20:23:49 +01:00
.user_popover_email {
user profiles: add tooltip for too long email.
2017-12-07 15:47:23 +01:00
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
user profiles: Add copy-to-clipboard btn for long emails. Implements copy to clipboard btn that shows up if email is too long. Making it easier for user to copy long emails.
2018-02-03 17:38:35 +01:00
transition: all 0.4s ease;
user profiles: add tooltip for too long email.
2017-12-07 15:47:23 +01:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& i {
zulip.scss: Use scss nesting syntax for .user_popover_email.
2018-05-08 01:06:48 +02:00
cursor: pointer;
css: Reorder zulip.scss to put `.user_popover_email` alongside.
2020-05-19 13:14:13 +02:00
css: Use SCSS nesting in zulip.scss `.user_popover_email`.
2020-05-19 13:15:01 +02:00
&.hide_copy_icon {
display: none;
}
}
css: Reorder zulip.scss to put `.user_popover_email` alongside.
2020-05-19 13:14:13 +02:00
}
user profiles: Add copy-to-clipboard btn for long emails. Implements copy to clipboard btn that shows up if email is too long. Making it easier for user to copy long emails.
2018-02-03 17:38:35 +01:00
.email_copied,
popovers: Rename confusing my_email to user_popover_email.
2018-03-12 20:23:49 +01:00
.user_popover_email i:hover {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(170deg 48% 54%);
user profiles: Add copy-to-clipboard btn for long emails. Implements copy to clipboard btn that shows up if email is too long. Making it easier for user to copy long emails.
2018-02-03 17:38:35 +01:00
}
.email_copied i {
display: none !important;
}
flatpickr: Visual improvements. * Fix time input buttons not positioned correctly. On <768px screens: * Center align flatpickr. * Remove bottom arrow. We should ideally have a semi-transparent black background for flatpickr on mobile but it is hard to do so with flatpickr being inserted into DOM by an external library.
2021-11-09 17:25:24 +01:00
.flatpickr-calendar {
/* Hide the up and down arrows in the Flatpickr datepicker year */
.flatpickr-months .numInputWrapper span {
display: none;
}
.flatpickr-time-separator {
position: relative;
left: 5px;
}
.flatpickr-time input {
margin: 0 5px;
timepicker: Fix hours and minutes input getting squeeze in safari. This issue is probably with the upstream bug in `flatpickr` but we can fix it for us by specifying minimum height to the input. Fixes #22698
2022-09-06 12:54:34 +02:00
min-height: 30px;
flatpickr: Visual improvements. * Fix time input buttons not positioned correctly. On <768px screens: * Center align flatpickr. * Remove bottom arrow. We should ideally have a semi-transparent black background for flatpickr on mobile but it is hard to do so with flatpickr being inserted into DOM by an external library.
2021-11-09 17:25:24 +01:00
}
flatpickr: Improve look of `Confirm` button. Change text from OK to Confirm. Remove icon.
2021-11-11 15:15:01 +01:00
.flatpickr-confirm {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 100%);
background-color: hsl(213deg 90% 65%);
flatpickr: Improve look of `Confirm` button. Change text from OK to Confirm. Remove icon.
2021-11-11 15:15:01 +01:00
font-size: 18px;
font-weight: 600;
}
flatpickr: Visual improvements. * Fix time input buttons not positioned correctly. On <768px screens: * Center align flatpickr. * Remove bottom arrow. We should ideally have a semi-transparent black background for flatpickr on mobile but it is hard to do so with flatpickr being inserted into DOM by an external library.
2021-11-09 17:25:24 +01:00
@media (width < $md_min) {
/* Center align flatpickr on mobile
* devices so that it doesn't go out of
* the viewport. */
left: 0 !important;
right: 0 !important;
margin: auto;
&::after,
&::before {
flatpickr: Hide bottom arrow in dark mode. Previous change didn't hide it in dark mode since this css was being overridden.
2021-11-23 19:17:51 +01:00
border-top-width: 0 !important;
flatpickr: Visual improvements. * Fix time input buttons not positioned correctly. On <768px screens: * Center align flatpickr. * Remove bottom arrow. We should ideally have a semi-transparent black background for flatpickr on mobile but it is hard to do so with flatpickr being inserted into DOM by an external library.
2021-11-09 17:25:24 +01:00
}
}
flatpickr: Hide the up/down arrows in the Flatpickr datepicker. This hides the up and down arrows that appear in the year input of the Flatpickr-provided datepicker. (This is only used in settings for now, but the arrows will be hidden anywhere Flatpickr is used.)
2018-07-06 19:00:15 +02:00
}
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
UI: Add Zulip version in gear menu. Currently only enabled in development, since the exact details don't seem right.. Co-Author-By: Signior-X <b19188@students.iitmandi.ac.in> Co-Author-By: Aman Agrawal <amanagr@zulip.com> Implements UI for #8005.
2021-02-09 11:16:52 +01:00
#about-zulip {
.exit {
font-size: 1.5rem;
font-weight: 600;
background-color: transparent;
border: none;
position: absolute;
right: 8px;
z-index: 1;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 67%);
UI: Add Zulip version in gear menu. Currently only enabled in development, since the exact details don't seem right.. Co-Author-By: Signior-X <b19188@students.iitmandi.ac.in> Co-Author-By: Aman Agrawal <amanagr@zulip.com> Implements UI for #8005.
2021-02-09 11:16:52 +01:00
}
.overlay-content {
version: Display Zulip version in About Zulip dialog. We record Git details about the merge-base with upstream branches in the zulip-git-version file, if the upstream repository is available. Note that the first Git upgrade after merging the parent commit will not include the merge-base details, since the upstream repository will not have been available. Co-authored-by: Tim Abbott <tabbott@zulip.com> Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-05-13 02:50:42 +02:00
width: 440px;
UI: Add Zulip version in gear menu. Currently only enabled in development, since the exact details don't seem right.. Co-Author-By: Signior-X <b19188@students.iitmandi.ac.in> Co-Author-By: Aman Agrawal <amanagr@zulip.com> Implements UI for #8005.
2021-02-09 11:16:52 +01:00
border-radius: 4px;
}
.about-zulip-logo {
version: Display Zulip version in About Zulip dialog. We record Git details about the merge-base with upstream branches in the zulip-git-version file, if the upstream repository is available. Note that the first Git upgrade after merging the parent commit will not include the merge-base details, since the upstream repository will not have been available. Co-authored-by: Tim Abbott <tabbott@zulip.com> Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-05-13 02:50:42 +02:00
text-align: center;
margin: 30px;
UI: Add Zulip version in gear menu. Currently only enabled in development, since the exact details don't seem right.. Co-Author-By: Signior-X <b19188@students.iitmandi.ac.in> Co-Author-By: Aman Agrawal <amanagr@zulip.com> Implements UI for #8005.
2021-02-09 11:16:52 +01:00
}
version: Display Zulip version in About Zulip dialog. We record Git details about the merge-base with upstream branches in the zulip-git-version file, if the upstream repository is available. Note that the first Git upgrade after merging the parent commit will not include the merge-base details, since the upstream repository will not have been available. Co-authored-by: Tim Abbott <tabbott@zulip.com> Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-05-13 02:50:42 +02:00
.about-zulip-logo img {
height: 40px;
UI: Add Zulip version in gear menu. Currently only enabled in development, since the exact details don't seem right.. Co-Author-By: Signior-X <b19188@students.iitmandi.ac.in> Co-Author-By: Aman Agrawal <amanagr@zulip.com> Implements UI for #8005.
2021-02-09 11:16:52 +01:00
}
about_zulip: Indicate the copy icon to be clickable. Added CSS property of cursor as pointer to the copy icon in about_zulip section which indicates the icon to be clickable. (This minor adjustment was probably missed in a74b52db2249fb20b8966c5d7d2cb28ca9eae087)
2021-07-12 19:28:17 +02:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& i.fa-copy {
about_zulip: Indicate the copy icon to be clickable. Added CSS property of cursor as pointer to the copy icon in about_zulip section which indicates the icon to be clickable. (This minor adjustment was probably missed in a74b52db2249fb20b8966c5d7d2cb28ca9eae087)
2021-07-12 19:28:17 +02:00
cursor: pointer;
}
about_zulip: Change icon color when copy button is hovered. `Version` and `Forked from` copy buttons in the "About Zulip" UI will now change color when hovered over. This allows the copy button to pop out more when hovering over it. Fixes part of #23210.
2023-05-04 03:11:55 +02:00
.fa-copy:hover {
color: hsl(170deg 48% 54%);
}
overlays: Rename "modal-body" class. We use "modal-body" class in informational overlays and "About Zulip" overlay. For informational overlays, the class is used on the element acting as scroll container so we just rename the class to "overlay-scroll-container". For "About Zulip" overlay, we do not support scrolling so "overlay-body" seems a better class name.
2023-10-12 08:10:54 +02:00
.overlay-body {
max-height: 60vh;
padding: 15px;
}
UI: Add Zulip version in gear menu. Currently only enabled in development, since the exact details don't seem right.. Co-Author-By: Signior-X <b19188@students.iitmandi.ac.in> Co-Author-By: Aman Agrawal <amanagr@zulip.com> Implements UI for #8005.
2021-02-09 11:16:52 +01:00
}
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
@media (width < $xl_min) or (height < $short_navbar_cutoff_height) {
navbar: Add user avatar icon for personal_menu dropdown. This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
2023-07-17 17:26:24 +02:00
.spectator-view {
#navbar-middle {
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
/* = (width of button, square with header) * 3 (number of buttons) + 10px extra margin. */
margin-right: calc(var(--header-height) * 3 + 10px);
navbar: Add user avatar icon for personal_menu dropdown. This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
2023-07-17 17:26:24 +02:00
}
help_menu: Extract help items from gear menu into a separate popover. Fixes #27202
2023-10-21 13:57:36 +02:00
#help-menu,
gear_menu: Migrate to use tippy.
2023-10-13 12:51:35 +02:00
#gear-menu {
position: relative;
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
right: var(--header-height);
navbar: Add user avatar icon for personal_menu dropdown. This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
2023-07-17 17:26:24 +02:00
}
}
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
}
@media (width < $xl_min) {
.app-main,
.header-main {
min-width: 750px;
}
navbar: Add user avatar icon for personal_menu dropdown. This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
2023-07-17 17:26:24 +02:00
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
.column-right {
display: none;
css: Use SCSS nesting in zulip.scss for `.column-right`.
2020-05-19 13:16:25 +02:00
&.expanded {
display: block;
position: absolute;
float: none;
right: 15px;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
top: 0;
css: Use SCSS nesting in zulip.scss for `.column-right`.
2020-05-19 13:16:25 +02:00
scroll_bar: Fix overlapping right sidebar and browser scrollbars. Fixes #25779 We move the simplebar scroll on the right sidebar to a little left when there is an overlay scrollbar present so that user can drag either of them.
2023-05-29 13:31:58 +02:00
.simplebar-track.simplebar-vertical {
right: 0;
}
css: Use SCSS nesting in zulip.scss for `.column-right`.
2020-05-19 13:16:25 +02:00
.right-sidebar {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%);
border-left: 1px solid hsl(0deg 0% 87%);
navbar_alerts: Adjust app based on navbar height.
2023-05-21 20:52:46 +02:00
padding-right: 15px;
padding-left: 15px;
css: Use SCSS nesting in zulip.scss for `.column-right`.
2020-05-19 13:16:25 +02:00
height: 100%;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
right: 0;
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
background-color: var(--color-background);
css: Use SCSS nesting in zulip.scss for `.column-right`.
2020-05-19 13:16:25 +02:00
}
}
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
.nav .dropdown-menu {
min-width: 180px;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
box-shadow: 0 0 5px hsl(0deg 0% 0% / 20%);
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
css: Use SCSS nesting in zulip.scss for `.nav .dropdown-menu`.
2020-05-19 13:19:33 +02:00
&::after {
styles: Merge duplicate selectors. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:34:58 +02:00
right: 21px;
css: Use SCSS nesting in zulip.scss for `.nav .dropdown-menu`.
2020-05-19 13:19:33 +02:00
}
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
.column-middle {
margin-right: 7px;
}
navbar: Improve structure & styling for top navbar. This updates the logged-in top navbar to display the stream/message name, number of users, and description. It also replaces the search bar with a search icon that expands into a full-width search bar. Co-authored-by: Max Nussenbaum <max@maxnuss.com> Fixes: #164. Fixes: #5198.
2020-02-03 17:01:11 +01:00
search: Put typeahead under search bar in the DOM with full width. Previously the typeahead container was being created at the bottom of `body`, and its width (and `top` and `left`) were being set to move it to the right position. Now it sits in the search box container, which gives it the correct position and width by default. This is better for DOM readability, and is also better for the new 100% width (which is part of the search bar redesign) because it can change width more smoothly with the search bar when the page changes width. This commit adds custom functionality to the bootstrap typeahead to allow the typehead to be placed in the search box container (whereas previously, it could only be appended to `body`).
2023-02-22 22:30:54 +01:00
#navbar-middle {
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
/* = (width of button, square with header) * 4 (number of buttons) + 10px extra margin. */
margin-right: calc(var(--header-height) * 4 + 10px);
navbar: Improve structure & styling for top navbar. This updates the logged-in top navbar to display the stream/message name, number of users, and description. It also replaces the search bar with a search icon that expands into a full-width search bar. Co-authored-by: Max Nussenbaum <max@maxnuss.com> Fixes: #164. Fixes: #5198.
2020-02-03 17:01:11 +01:00
}
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
styles: Use range context queries to eliminate *_max variables. On a high-DPI display or with a non-default zoom level, the browser viewport may have a width strictly between md_max = 767px and md_min = 768px. Use only the *_min bounds for consistency. This requires queries with strict inequalities to express upper bounds (width < md_min). Fortunately, that functionality is provided by range context queries. Unfortunately, those are not supported in all browsers. Fortunately, we can compile them away using postcss-media-minmax. Unfortunately, postcss-media-minmax currently subtracts 1px for strict inequalities anyway to work around a Safari rounding bug. Fortunately, 0.02px should be sufficient for that, so I submitted a PR: https://github.com/postcss/postcss-media-minmax/pull/28 Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-04 02:49:05 +01:00
@media (width < $md_min) {
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
body {
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
padding: 0;
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
.column-left {
display: none;
css: Use SCSS nesting in zulip.scss for `.column-left`.
2020-05-19 13:20:39 +02:00
&.expanded {
display: block;
position: absolute;
float: none;
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
left: 0;
top: 0;
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
css: Use SCSS nesting in zulip.scss for `.column-left`.
2020-05-19 13:20:39 +02:00
.left-sidebar {
UI redesign: Change background color. Fixes: #21750
2023-03-24 00:09:48 +01:00
background-color: var(--color-background);
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
border-right: 1px solid hsl(0deg 0% 87%);
css: Use SCSS nesting in zulip.scss for `.column-left`.
2020-05-19 13:20:39 +02:00
height: 100%;
padding-left: 10px;
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
width: var(--left-sidebar-width);
css: Use SCSS nesting in zulip.scss for `.column-left`.
2020-05-19 13:20:39 +02:00
}
}
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
body,
html,
.app-main,
.header-main {
min-width: 350px;
}
.column-middle,
.app-main .column-middle {
margin-left: 7px;
margin-right: 7px;
}
.header-main .column-middle {
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
margin-left: 0;
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
.column-middle-inner {
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
margin-left: 0;
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
.app-main .column-middle .column-middle-inner {
styles: Remove unit from 0 lengths. Generated by stylelint --fix. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 02:42:07 +02:00
margin-right: 0;
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
#streamlist-toggle {
display: block;
}
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
.top-navbar-container {
navbar: Improve structure & styling for top navbar. This updates the logged-in top navbar to display the stream/message name, number of users, and description. It also replaces the search bar with a search icon that expands into a full-width search bar. Co-authored-by: Max Nussenbaum <max@maxnuss.com> Fixes: #164. Fixes: #5198.
2020-02-03 17:01:11 +01:00
margin-left: 40px;
}
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
.zulip-icon-search {
navbar: Improve structure & styling for top navbar. This updates the logged-in top navbar to display the stream/message name, number of users, and description. It also replaces the search bar with a search icon that expands into a full-width search bar. Co-authored-by: Max Nussenbaum <max@maxnuss.com> Fixes: #164. Fixes: #5198.
2020-02-03 17:01:11 +01:00
right: 115px;
}
search: Redesign search box. Fixes #21798.
2022-05-16 19:24:49 +02:00
.dropdown-menu ul {
margin: 0 -25px 0 0;
background: transparent;
& li {
width: 100%;
& a {
white-space: normal;
}
}
}
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
@media (height < $short_navbar_cutoff_height) {
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
.column-right.expanded .right-sidebar,
.column-left.expanded .left-sidebar {
sidebars: Correct display at small mobile sizes. This fixes a state where the expanded left sidebar appears under the navbar at the smallest mobile views. It also provides a stop-gap fix for the right sidebar's USERS heading, making it align better (but certainly not perfectly) with the left sidebar's.
2023-10-25 21:19:09 +02:00
margin-top: var(--navbar-fixed-height);
navbar: Show shorter navbar for short screens not narrow screens. Fixes #27366.
2023-11-09 00:29:56 +01:00
/* For very short screen sizes, skip the relatively large top padding. */
sidebars: Correct display at small mobile sizes. This fixes a state where the expanded left sidebar appears under the navbar at the smallest mobile views. It also provides a stop-gap fix for the right sidebar's USERS heading, making it align better (but certainly not perfectly) with the left sidebar's.
2023-10-25 21:19:09 +02:00
padding-top: 0;
}
/* TODO: Properly and accurately align the
topmost headers on the left and right
sidebar. */
.column-right.expanded .right-sidebar-items {
margin-top: 10px;
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
left_sidebar: Remove padding from streams header in narrow windows.
2023-11-21 15:51:57 +01:00
.column-left.expanded .left-sidebar-navigation-area {
margin-top: 10px;
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
navbar: Add user avatar icon for personal_menu dropdown. This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
2023-07-17 17:26:24 +02:00
.nav .dropdown-menu {
right: -13px;
}
/* Usually the styling is applied directly to the icon, but here
the icon is `position: static`, so we can't. */
.search_closed {
top: 5px;
}
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
#streamlist-toggle,
navbar: Rename tab_bar to message_view_header. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. We purged tab_list in 1267caf5009118875f47fdafe312880af08024e1. This commit purges tab_bar, it includes: - A blanket search and replace of tab_bar with message_view_header. - Splitting a single line comment in tab_bar.js / message_view_header.js. - The renaming of tab_bar.js to message_view_header.js. - The renaming of tab_bar.hbs to message_view_header.hbs. - A blanket search and replace of tab_data with message_view_header_data. - Replacing the single occurrence of tabbar with message_view_header (it was within a comment.)
2020-07-08 23:44:01 +02:00
#message_view_header,
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
#searchbox,
.header {
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
line-height: var(--header-height);
height: var(--header-height);
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
}
.spectator_narrow_login_button {
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
height: var(--header-height) !important;
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
#streamlist-toggle-button {
global css: Convert SASS variables to CSS custom properties.
2023-03-07 01:18:07 +01:00
height: var(--header-height);
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
navbar: Show left-sidebar-style unread dot on streams toggle.
2023-10-25 20:08:09 +02:00
#streamlist-toggle-unreadcount {
/* Adjust in response to shorter navbar. */
top: 5px;
}
navbar: Add user avatar icon for personal_menu dropdown. This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
2023-07-17 17:26:24 +02:00
.column-right #personal-menu .header-button-avatar {
width: 20px;
height: 20px;
}
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
}
styles: Use range context queries to eliminate *_max variables. On a high-DPI display or with a non-default zoom level, the browser viewport may have a width strictly between md_max = 767px and md_min = 768px. Use only the *_min bounds for consistency. This requires queries with strict inequalities to express upper bounds (width < md_min). Fortunately, that functionality is provided by range context queries. Unfortunately, those are not supported in all browsers. Fortunately, we can compile them away using postcss-media-minmax. Unfortunately, postcss-media-minmax currently subtracts 1px for strict inequalities anyway to work around a Safari rounding bug. Fortunately, 0.02px should be sufficient for that, so I submitted a PR: https://github.com/postcss/postcss-media-minmax/pull/28 Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-04 02:49:05 +01:00
@media (width < $mm_min) {
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
html {
overflow-x: hidden;
}
body,
html,
.app-main,
.header-main {
min-width: 320px;
}
}
styles: Use range context queries to eliminate *_max variables. On a high-DPI display or with a non-default zoom level, the browser viewport may have a width strictly between md_max = 767px and md_min = 768px. Use only the *_min bounds for consistency. This requires queries with strict inequalities to express upper bounds (width < md_min). Fortunately, that functionality is provided by range context queries. Unfortunately, those are not supported in all browsers. Fortunately, we can compile them away using postcss-media-minmax. Unfortunately, postcss-media-minmax currently subtracts 1px for strict inequalities anyway to work around a Safari rounding bug. Fortunately, 0.02px should be sufficient for that, so I submitted a PR: https://github.com/postcss/postcss-media-minmax/pull/28 Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-04 02:49:05 +01:00
@media (width < $md_min) {
styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-24 05:38:18 +02:00
#feedback_container {
width: calc(90% - 30px);
left: 5%;
top: 5%;
}
}
login_to_access: Modal which blocks access for spectator. We will use this modal for any narrow / hash or other UI element that requires an actual account to use, to provide something reasonable to occur when a user clicks on those things.
2020-10-05 16:09:25 +02:00
message_scroll: Show scroll to bottom button. Show/hide scroll to bottom button when the last message is not visible in the current scroll position. We adjust the bottom offset of the button based on compose box height. Fixes #19862
2022-02-14 17:43:32 +01:00
#scroll-to-bottom-button-container {
message_scroll: Use CSS transition for scroll to bottom button. We are abandoning jQuery animation because it build up queue when there is continous switch in animation state. i.e When user goes ↑↓↑↓↑↓… at the bottom. Also added `aria-hidden` to `#scroll-to-bottom-button-container` so that this widget doesn't interfere with screen readers.
2022-07-06 07:05:37 +02:00
display: block;
message_scroll: Show scroll to bottom button. Show/hide scroll to bottom button when the last message is not visible in the current scroll position. We adjust the bottom offset of the button based on compose box height. Fixes #19862
2022-02-14 17:43:32 +01:00
position: absolute;
bottom: 41px;
right: 0;
message_scroll: Use CSS transition for scroll to bottom button. We are abandoning jQuery animation because it build up queue when there is continous switch in animation state. i.e When user goes ↑↓↑↓↑↓… at the bottom. Also added `aria-hidden` to `#scroll-to-bottom-button-container` so that this widget doesn't interfere with screen readers.
2022-07-06 07:05:37 +02:00
visibility: hidden;
opacity: 0;
dependencies: Upgrade JavaScript dependencies. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 23:08:07 +02:00
transition:
visibility 500ms,
opacity 500ms ease-in-out;
message_scroll: Use CSS transition for scroll to bottom button. We are abandoning jQuery animation because it build up queue when there is continous switch in animation state. i.e When user goes ↑↓↑↓↑↓… at the bottom. Also added `aria-hidden` to `#scroll-to-bottom-button-container` so that this widget doesn't interfere with screen readers.
2022-07-06 07:05:37 +02:00
&.show {
visibility: visible;
opacity: 1;
}
message_scroll: Show scroll to bottom button. Show/hide scroll to bottom button when the last message is not visible in the current scroll position. We adjust the bottom offset of the button based on compose box height. Fixes #19862
2022-02-14 17:43:32 +01:00
#scroll-to-bottom-button-clickable-area {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:hover #scroll-to-bottom-button {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background: hsl(240deg 96% 68%);
message_scroll: Show scroll to bottom button. Show/hide scroll to bottom button when the last message is not visible in the current scroll position. We adjust the bottom offset of the button based on compose box height. Fixes #19862
2022-02-14 17:43:32 +01:00
}
#scroll-to-bottom-button {
text-align: center;
width: 40px;
height: 40px;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
background: hsl(240deg 96% 68% / 50%);
message_scroll: Show scroll to bottom button. Show/hide scroll to bottom button when the last message is not visible in the current scroll position. We adjust the bottom offset of the button based on compose box height. Fixes #19862
2022-02-14 17:43:32 +01:00
border-radius: 50%;
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& i {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 100%);
message_scroll: Show scroll to bottom button. Show/hide scroll to bottom button when the last message is not visible in the current scroll position. We adjust the bottom offset of the button based on compose box height. Fixes #19862
2022-02-14 17:43:32 +01:00
margin: 0 auto;
font-size: 21px;
position: relative;
top: 8px;
}
}
}
}
scroll_to_bottom_button: Use unicode icon for right arrow.
2022-02-21 09:56:30 +01:00
.tooltip_right_arrow {
position: relative;
top: -1px;
font-weight: 600;
}
message_list_view: For spectators, show login button for failed images. We render a login button for images that failed to load for spectators. The image failed to load most likely due to being rate limited by the server. Fixes #19840
2021-11-02 15:45:43 +01:00
.spectator_login_for_image_button {
max-width: 250px;
height: 50px;
:hover {
text-decoration: none;
}
.login_button {
padding: 5px;
margin-top: 5px;
.fa {
top: 1px;
}
}
}
css: Don't add unread indicator to the date row of first unread row. Fixes #23030 If the first unread `.message_row` has a date_row, we don't show unread indicator on it.
2022-10-03 04:26:40 +02:00
css: Remove focus outline on simplebar wrapper elements. This removes the focus outline on `simplebar-content-wrapper` in the left sidebar and other places in the app when focused since it doesn't look visually nice.
2023-02-07 14:37:33 +01:00
.simplebar-content-wrapper {
/* `simplebar-content-wrapper` has `tabindex=0` set, which makes it focusable
but we don't want it to have an outline when focused anywhere in the app. */
outline: none;
popovers: Prevent the popover from closing on scroll. This commit prevent popover closure when scrolling reaches the top or bottom. Fixes: #25967.
2023-06-12 22:03:56 +02:00
/* This prevents the popover from closing once the top/bottom is reached */
overscroll-behavior: contain;
css: Remove focus outline on simplebar wrapper elements. This removes the focus outline on `simplebar-content-wrapper` in the left sidebar and other places in the app when focused since it doesn't look visually nice.
2023-02-07 14:37:33 +01:00
}
dropdown_widget: Implement dropdown widget using tippy. This will soon replace DropdownListWidget.
2023-05-07 14:42:54 +02:00
.dropdown-list-container {
.dropdown-list-search {
display: flex;
.dropdown-list-search-input {
css: Rename variable name. This will be used in other widgets too.
2023-08-16 06:17:00 +02:00
background: var(--color-background-widget-input);
dropdown_widget: Implement dropdown widget using tippy. This will soon replace DropdownListWidget.
2023-05-07 14:42:54 +02:00
color: var(--color-text-dropdown-input);
width: 100%;
margin: 4px 4px 2px;
&:focus {
background: hsl(0deg 0% 100%);
border: 1px solid hsl(229.09deg 21.57% 10% / 80%);
box-shadow: 0 0 6px hsl(228deg 9.8% 20% / 30%);
}
}
}
.dropdown-list-wrapper {
minor: Correct comments.
2023-05-10 14:52:24 +02:00
/* Sync with `max-height` in dropdown_widget. */
css: Increase max-height so that no element is partially visible. I didn't want to use JS for it since calculating height based on item height before rendering the dropdown is expensive and after rendering the dropdown will cause it jump.
2023-05-10 14:52:52 +02:00
max-height: 210px;
dropdown_widget: Implement dropdown widget using tippy. This will soon replace DropdownListWidget.
2023-05-07 14:42:54 +02:00
min-width: 200px;
.dropdown-list {
list-style: none;
margin: 0;
.list-item:focus {
background-color: hsl(220deg 12% 4.9% / 5%);
outline: none;
}
css: Reduce specificity of `dropdown-list-item-common-styles`. This helps override CSS for it more easily.
2023-11-22 20:12:36 +01:00
}
dropdown_widget: Implement dropdown widget using tippy. This will soon replace DropdownListWidget.
2023-05-07 14:42:54 +02:00
css: Reduce specificity of `dropdown-list-item-common-styles`. This helps override CSS for it more easily.
2023-11-22 20:12:36 +01:00
.no-dropdown-items {
color: hsl(0deg 0% 60%);
display: none;
dropdown_widget: Implement dropdown widget using tippy. This will soon replace DropdownListWidget.
2023-05-07 14:42:54 +02:00
}
}
css: Reduce specificity of `dropdown-list-item-common-styles`. This helps override CSS for it more easily.
2023-11-22 20:12:36 +01:00
}
dropdown_widget: Show "No search results" instead of an empty list.
2023-05-10 14:59:56 +02:00
css: Reduce specificity of `dropdown-list-item-common-styles`. This helps override CSS for it more easily.
2023-11-22 20:12:36 +01:00
.dropdown-list-container .dropdown-list-item-common-styles {
display: block;
color: hsl(0deg 0% 20%);
padding: 3px 10px 3px 8px;
font-weight: 400;
line-height: 20px;
white-space: normal;
.stream-privacy-type-icon {
font-size: 13px;
width: 13px;
height: 13px;
padding-right: 2px;
}
&:hover {
text-decoration: none;
background-color: hsl(220deg 12% 4.9% / 5%);
}
&:focus {
text-decoration: none;
outline: none;
dropdown_widget: Show "No search results" instead of an empty list.
2023-05-10 14:59:56 +02:00
}
dropdown_widget: Implement dropdown widget using tippy. This will soon replace DropdownListWidget.
2023-05-07 14:42:54 +02:00
}
scheduled_message_overlay: Add a failed delivery indicator. Fixes #25501
2023-05-13 10:50:52 +02:00
inbox: Focus currently selected option in dropdown.
2023-11-10 02:45:45 +01:00
.dropdown-list-item-common-styles .dropdown-list-bold-selected {
font-weight: 700;
}
scheduled_message_overlay: Add a failed delivery indicator. Fixes #25501
2023-05-13 10:50:52 +02:00
#scheduled_messages_overlay .error-icon-message-recipient {
width: 15px;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
flex-grow: 1;
color: var(--color-failed-message-send-icon);
.zulip-icon {
padding: 5px;
}
}
left_sidebar: Use custom Zulip star icons. This commit replaces all previous Font Awesome references in the left side bar and relevant popovers with the custom Zulip star icon. Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
2023-10-10 21:21:48 +02:00
#unstar_all_messages,
.emoji-popover-tab-item {
.zulip-icon-star {
position: relative;
top: 2px;
}
}
compose_typeahead: Add new indicator to topic items in typeahead. With the autocomplete dropdown, some users face trouble or uncertainty while selecting topics. These changes adds a new indicator to the topic typeahead dropdown while typing to the topic box. This ensures users that they are on track and they are doing the right things. We also suggest the current query even if it doesn't match a topic to continue providing the new indicator. Fixes: #23296.
2023-03-20 04:22:58 +01:00
.typeahead-option-label {
display: flex !important;
justify-content: space-between;
> strong {
margin-right: 14px;
}
}
navbar: Add user avatar icon for personal_menu dropdown. This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
2023-07-17 17:26:24 +02:00
.header-main .column-right {
display: flex;
width: auto;
justify-content: flex-end;
align-items: center;
margin-right: 7px;
& a:focus {
filter: none;
outline: 0;
}
}
gear_menu: Migrate to use tippy.
2023-10-13 12:51:35 +02:00
.header-button {
navbar: Add user avatar icon for personal_menu dropdown. This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
2023-07-17 17:26:24 +02:00
width: var(--header-height);
height: var(--header-height);
display: flex;
justify-content: center;
align-items: center;
gear_menu: Migrate to use tippy.
2023-10-13 12:51:35 +02:00
&:hover,
&:focus {
text-decoration: none;
}
header-button: Add background effects to different states.
2023-10-19 19:23:10 +02:00
&:hover {
background-color: var(--color-header-button-hover);
}
&:active {
background-color: var(--color-header-button-focus);
}
&:focus-visible {
outline: none;
background-color: var(--color-header-button-focus);
}
gear_menu: Migrate to use tippy.
2023-10-13 12:51:35 +02:00
.zulip-icon {
color: var(--color-navbar-icon);
}
.zulip-icon-gear {
font-size: 18px;
}
compose: Update icons for formatting buttons. Also made the buttons bigger, and updated breakpoints accordingly. Fixes: #27845.
2023-11-22 08:25:31 +01:00
.zulip-icon-help-bigger,
gear_menu: Migrate to use tippy.
2023-10-13 12:51:35 +02:00
.zulip-icon-triple-users {
font-size: 20px;
}
help_menu: Extract help items from gear menu into a separate popover. Fixes #27202
2023-10-21 13:57:36 +02:00
.zulip-icon-help {
position: relative;
top: 0.5px;
right: -0.5px;
}
navbar: Add user avatar icon for personal_menu dropdown. This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
2023-07-17 17:26:24 +02:00
}
#personal-menu {
.header-button-avatar {
width: 24px;
height: 24px;
background-size: cover;
border-radius: 4px;
background-color: var(--color-background-image-loader);
personal_menu: Add tippy personal_menu dropdown. Add a personal menu dropdown that opens on clicking user avatar icon in navbar added in previous commit. The args passed to render_personal_menu() in onShow() are returned by get_personal_menu_content_context() in popover_menus_data.js so that they can be unit tested. Additionally, added CSS to get a custom arrow for dropdown menu. Added a `?` hotkey in keyboard shortcuts option in personal_menu dropdown in a style similar to our tooltip's hotkey by adding ? in a span with class .tooltip-hotkey-hint and adding some CSS. Fixes part of #22802.
2023-07-17 18:01:16 +02:00
border: 1px solid var(--color-border-personal-menu-avatar);
}
}