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

right_sidebar: Change header styling to match left sidebar. 

Fixes #32268.
This commit is contained in:
evykassirer 2024-11-12 20:40:21 -08:00 committed by Tim Abbott
parent e90d1e9985
commit c9096c6308
2 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/styles/right_sidebar.css
View File

@ -26,13 +26,10 @@ $user_status_emoji_width: 24px;
overflow: auto; overflow: auto;
} }
.buddy-list-section-toggle.fa-caret-right { .buddy-list-section-toggle.zulip-icon-heading-triangle-right {
width: 7px; transition:
transition: rotate 140ms linear; opacity 140ms linear,
/* The triangle icon has asymmetrical padding on it, so rotate 140ms linear;
when it rotates down it would be too high without
this padding. */
padding-left: 2px;
&.rotate-icon-down { &.rotate-icon-down {
rotate: 90deg; rotate: 90deg;
@ -43,6 +40,11 @@ $user_status_emoji_width: 24px;
} }
} }
.buddy-list-section-toggle {
color: var(--color-text-sidebar-heading);
opacity: var(--opacity-sidebar-heading-icon);
}
.buddy-list-section-container { .buddy-list-section-container {
margin-bottom: 10px; margin-bottom: 10px;
@ -230,13 +232,30 @@ $user_status_emoji_width: 24px;
top: 0; top: 0;
z-index: 1; z-index: 1;
color: var(--color-text-default); color: var(--color-text-default);
border-radius: 4px;
padding-left: 4px;
&:hover {
background-color: var(--color-buddy-list-highlighted-user);
box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
.buddy-list-section-toggle,
.buddy-list-heading {
opacity: var(--opacity-sidebar-heading-hover);
}
}
} }
.buddy-list-heading { .buddy-list-heading {
user-select: none; user-select: none;
font-weight: 600;
margin: 0; margin: 0;
padding: 5px 5px 5px 0; padding: 5px 5px 5px 0;
color: var(--color-text-sidebar-heading);
font-size: inherit;
font-weight: var(--font-weight-sidebar-heading);
letter-spacing: var(--letter-spacing-sidebar-heading);
opacity: var(--opacity-sidebar-heading);
transition: opacity 140ms linear;
} }
.buddy-list-subsection-header.no-display { .buddy-list-subsection-header.no-display {

2
web/templates/buddy_list/section_header.hbs
View File

@ -1,4 +1,4 @@
<h5 id="{{id}}" data-user-count="{{user_count}}" class="buddy-list-heading no-style hidden-for-spectators"> <h5 id="{{id}}" data-user-count="{{user_count}}" class="buddy-list-heading no-style hidden-for-spectators">
{{header_text}} (<span class="buddy-list-heading-user-count">{{user_count}}</span>) {{header_text}} (<span class="buddy-list-heading-user-count">{{user_count}}</span>)
</h5> </h5>
<i class="buddy-list-section-toggle fa fa-sm fa-caret-right {{#if is_collapsed}}rotate-icon-right{{else}}rotate-icon-down{{/if}}" aria-hidden="true"></i> <i class="buddy-list-section-toggle zulip-icon zulip-icon-heading-triangle-right {{#if is_collapsed}}rotate-icon-right{{else}}rotate-icon-down{{/if}}" aria-hidden="true"></i>