mirror of
https://github.com/zulip/zulip.git
synced 2025-11-06 15:03:34 +00:00
9edc39c8be
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.
52 lines
1.8 KiB
SCSS
52 lines
1.8 KiB
SCSS
.user_circle_green,
|
|
.user_circle_orange,
|
|
.user_circle_empty,
|
|
.user_circle_empty_line,
|
|
.user_circle_fraction {
|
|
border-radius: 50%;
|
|
border: 1px solid;
|
|
float: left;
|
|
position: relative;
|
|
top: 5px;
|
|
}
|
|
|
|
.user_circle_green {
|
|
background-color: hsl(106, 74%, 44%);
|
|
}
|
|
|
|
.user_circle_green,
|
|
.user_circle_fraction {
|
|
border-color: hsl(106, 74%, 44%);
|
|
}
|
|
|
|
.user_circle_orange {
|
|
border-color: hsl(29, 84%, 51%);
|
|
background-color: hsl(29, 84%, 51%);
|
|
|
|
background: -moz-linear-gradient(top, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, hsla(0, 0%, 100%, 0.0)), color-stop(50%, hsla(29, 84%, 51%, 1.0))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* IE10+ */
|
|
background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ec7e18', GradientType=0 ); /* IE6-9; filters only work with hex colors */
|
|
}
|
|
|
|
.user_circle_empty {
|
|
background-color: none;
|
|
border-color: hsl(0, 0%, 50%);
|
|
}
|
|
|
|
.user_circle_empty_line {
|
|
border-color: hsl(0, 0%, 50%);
|
|
|
|
&::after {
|
|
content: '';
|
|
background: hsl(0, 0%, 50%);
|
|
height: 1.5px; // 1px is too thin, 2px is too thick
|
|
width: 6px;
|
|
display: block;
|
|
margin: 3.25px auto 0 auto; // (total height - line height) / 2 = 3.25px
|
|
}
|
|
}
|