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

46 lines
946 B
CSS
Raw Normal View History

presence: Extract $active_color CSS variable.
2022-01-30 15:29:26 +01:00
$active_color: hsl(106, 74%, 44%);
presence: Avoid doc/naming references to "orange". It seems like orange is the loudest possible color to denote a quasi-neutral-idle state, so we hope to replace it with another color. This commit does not change any styling. I removed the sentences in the doc, since they are kind of too vague to be useful. If we want to say that the idle state is correlated with the half-orange circles in the buddy list, then we want to say that more specifically.
2022-01-27 22:22:59 +01:00
$idle_color: hsl(29, 84%, 51%);
refactor: Simplify logic for circles. We now have a function get_user_circle_class that returns one of these values: "user_circle_green" "user_circle_orange" "user_circle_empty" And we put that in the templates. And then CSS renders the circle of the appropriate color. The unit tests now explicitly capture whether we are rendering the correct kind of circle.
2019-02-17 02:10:42 +01:00
.user_circle_green,
presence: Avoid doc/naming references to "orange". It seems like orange is the loudest possible color to denote a quasi-neutral-idle state, so we hope to replace it with another color. This commit does not change any styling. I removed the sentences in the doc, since they are kind of too vague to be useful. If we want to say that the idle state is correlated with the half-orange circles in the buddy list, then we want to say that more specifically.
2022-01-27 22:22:59 +01:00
.user_circle_idle,
refactor: Simplify logic for circles. We now have a function get_user_circle_class that returns one of these values: "user_circle_green" "user_circle_orange" "user_circle_empty" And we put that in the templates. And then CSS renders the circle of the appropriate color. The unit tests now explicitly capture whether we are rendering the correct kind of circle.
2019-02-17 02:10:42 +01:00
.user_circle_empty,
pm list: Remove obsolete user_circle_fraction class.
2022-01-28 14:39:32 +01:00
.user_circle_empty_line {
css: Split out user_circles.scss. This is a pure code move. We want to use user circles in the left sidebar, so this code will no longer belong in right-sidebar.scss. This code is just related to drawing the circles. We can still position in size in other CSS files (with more context-specific selectors).
2019-02-17 00:29:16 +01:00
border-radius: 50%;
border: 1px solid;
float: left;
position: relative;
top: 5px;
}
refactor: Simplify logic for circles. We now have a function get_user_circle_class that returns one of these values: "user_circle_green" "user_circle_orange" "user_circle_empty" And we put that in the templates. And then CSS renders the circle of the appropriate color. The unit tests now explicitly capture whether we are rendering the correct kind of circle.
2019-02-17 02:10:42 +01:00
.user_circle_green {
presence: Extract $active_color CSS variable.
2022-01-30 15:29:26 +01:00
background-color: $active_color;
border-color: $active_color;
css: Split out user_circles.scss. This is a pure code move. We want to use user circles in the left sidebar, so this code will no longer belong in right-sidebar.scss. This code is just related to drawing the circles. We can still position in size in other CSS files (with more context-specific selectors).
2019-02-17 00:29:16 +01:00
}
presence: Avoid doc/naming references to "orange". It seems like orange is the loudest possible color to denote a quasi-neutral-idle state, so we hope to replace it with another color. This commit does not change any styling. I removed the sentences in the doc, since they are kind of too vague to be useful. If we want to say that the idle state is correlated with the half-orange circles in the buddy list, then we want to say that more specifically.
2022-01-27 22:22:59 +01:00
.user_circle_idle {
border-color: $idle_color;
styles: Format CSS with Prettier. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-04 23:58:56 +02:00
background: linear-gradient(
to bottom,
hsla(0, 0%, 100%, 0) 50%,
presence: Avoid doc/naming references to "orange". It seems like orange is the loudest possible color to denote a quasi-neutral-idle state, so we hope to replace it with another color. This commit does not change any styling. I removed the sentences in the doc, since they are kind of too vague to be useful. If we want to say that the idle state is correlated with the half-orange circles in the buddy list, then we want to say that more specifically.
2022-01-27 22:22:59 +01:00
$idle_color 50%
styles: Format CSS with Prettier. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-04 23:58:56 +02:00
);
css: Split out user_circles.scss. This is a pure code move. We want to use user circles in the left sidebar, so this code will no longer belong in right-sidebar.scss. This code is just related to drawing the circles. We can still position in size in other CSS files (with more context-specific selectors).
2019-02-17 00:29:16 +01:00
}
refactor: Simplify logic for circles. We now have a function get_user_circle_class that returns one of these values: "user_circle_green" "user_circle_orange" "user_circle_empty" And we put that in the templates. And then CSS renders the circle of the appropriate color. The unit tests now explicitly capture whether we are rendering the correct kind of circle.
2019-02-17 02:10:42 +01:00
.user_circle_empty {
styles: Fix some invalid CSS. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-02 07:02:28 +01:00
background-color: transparent;
css: Split out user_circles.scss. This is a pure code move. We want to use user circles in the left sidebar, so this code will no longer belong in right-sidebar.scss. This code is just related to drawing the circles. We can still position in size in other CSS files (with more context-specific selectors).
2019-02-17 00:29:16 +01:00
border-color: hsl(0, 0%, 50%);
}
user status: Add icon for "unavailable". Fixes #11589. Adds SCSS style for the "unavailable" user status and enables its usage in `buddy_data.js`. The style is a red circle with a horizontal line. The values might look a bit 'magic' but they were considered carefully ` height` of 1px was too thin, 2px was too thick, thus 1.5px was chosen.
2019-03-01 17:31:59 +01:00
.user_circle_empty_line {
user status: Make "unavailable" status circle grey. After discussion, we decided that the red color is too distinct and does not convey the idea of "almost offline". This changes the new "unavailable" status circle's color from dark red to grey, the same color used by the "offline" status circle.
2019-03-01 21:51:07 +01:00
border-color: hsl(0, 0%, 50%);
user status: Add icon for "unavailable". Fixes #11589. Adds SCSS style for the "unavailable" user status and enables its usage in `buddy_data.js`. The style is a red circle with a horizontal line. The values might look a bit 'magic' but they were considered carefully ` height` of 1px was too thin, 2px was too thick, thus 1.5px was chosen.
2019-03-01 17:31:59 +01:00
&::after {
styles: Format CSS with Prettier. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-04 23:58:56 +02:00
content: "";
user status: Make "unavailable" status circle grey. After discussion, we decided that the red color is too distinct and does not convey the idea of "almost offline". This changes the new "unavailable" status circle's color from dark red to grey, the same color used by the "offline" status circle.
2019-03-01 21:51:07 +01:00
background: hsl(0, 0%, 50%);
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
height: 1.5px; /* 1px is too thin, 2px is too thick */
user status: Add icon for "unavailable". Fixes #11589. Adds SCSS style for the "unavailable" user status and enables its usage in `buddy_data.js`. The style is a red circle with a horizontal line. The values might look a bit 'magic' but they were considered carefully ` height` of 1px was too thin, 2px was too thick, thus 1.5px was chosen.
2019-03-01 17:31:59 +01:00
width: 6px;
display: 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: 3.25px auto 0; /* (total height - line height) / 2 = 3.25px */
user status: Add icon for "unavailable". Fixes #11589. Adds SCSS style for the "unavailable" user status and enables its usage in `buddy_data.js`. The style is a red circle with a horizontal line. The values might look a bit 'magic' but they were considered carefully ` height` of 1px was too thin, 2px was too thick, thus 1.5px was chosen.
2019-03-01 17:31:59 +01:00
}
}