mirror of
https://github.com/zulip/zulip.git
synced 2025-11-03 21:43:21 +00:00
message_view_header: Extract styles to own file.
This has the added value of being named in parallel with web/src/message_view_header.ts
This commit is contained in:
Karl Stolley
Tim Abbott
@@ -31,6 +31,7 @@ import "../../styles/components.css";
|
||||
import "../../styles/app_components.css";
|
||||
import "../../styles/rendered_markdown.css";
|
||||
import "../../styles/zulip.css";
|
||||
import "../../styles/message_view_header.css";
|
||||
import "../../styles/message_header.css";
|
||||
import "../../styles/message_row.css";
|
||||
import "../../styles/modal.css";
|
||||
|
||||
111
web/styles/message_view_header.css
Normal file
111
web/styles/message_view_header.css
Normal file
@@ -0,0 +1,111 @@
|
||||
#message_view_header {
|
||||
color: var(--color-text-message-view-header);
|
||||
z-index: 2;
|
||||
float: left;
|
||||
height: var(--header-height);
|
||||
width: 100%;
|
||||
line-height: var(--header-height);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-header-stream-settings-button,
|
||||
.navbar_title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
padding: 0 2px 0 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
/* 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;
|
||||
|
||||
.zulip-icon {
|
||||
font-size: 14px;
|
||||
/* Pull the icon out of baseline alignment,
|
||||
and center with stream name. */
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.zulip-icon-inbox {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.fa-envelope {
|
||||
/* The squatter envelope icon appears
|
||||
better vertically centered when aligned
|
||||
to the baseline of the adjacent DM partners. */
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
@media (height < $short_navbar_cutoff_height) {
|
||||
padding: 0 3.5px; /* based on having ~41.66% decrease */
|
||||
}
|
||||
|
||||
& i {
|
||||
margin: 0 6px 0 5px;
|
||||
/* Align all icons to center. */
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.fa {
|
||||
.fa-envelope {
|
||||
font-size: 14px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.fa-hashtag {
|
||||
font-size: 1.2rem;
|
||||
margin: 0 2px 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-header-navbar-title {
|
||||
/* Allow long navbar titles (e.g., stream names) to collapse. */
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.narrow_description {
|
||||
/* 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 */
|
||||
flex-shrink: 100;
|
||||
background: none;
|
||||
font-size: 14px;
|
||||
color: inherit;
|
||||
font-weight: 400;
|
||||
padding-left: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 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
|
||||
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. */
|
||||
.navbar_title,
|
||||
.narrow_description {
|
||||
flex: 1 1 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -1320,118 +1320,6 @@ div.focused-message-list {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#message_view_header {
|
||||
color: var(--color-text-message-view-header);
|
||||
z-index: 2;
|
||||
float: left;
|
||||
height: var(--header-height);
|
||||
width: 100%;
|
||||
line-height: var(--header-height);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-header-stream-settings-button,
|
||||
.navbar_title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
padding: 0 2px 0 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
/* 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;
|
||||
|
||||
.zulip-icon {
|
||||
font-size: 14px;
|
||||
/* Pull the icon out of baseline alignment,
|
||||
and center with stream name. */
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.zulip-icon-inbox {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.fa-envelope {
|
||||
/* The squatter envelope icon appears
|
||||
better vertically centered when aligned
|
||||
to the baseline of the adjacent DM partners. */
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
@media (height < $short_navbar_cutoff_height) {
|
||||
padding: 0 3.5px; /* based on having ~41.66% decrease */
|
||||
}
|
||||
|
||||
& i {
|
||||
margin: 0 6px 0 5px;
|
||||
/* Align all icons to center. */
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.fa {
|
||||
.fa-envelope {
|
||||
font-size: 14px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.fa-hashtag {
|
||||
font-size: 1.2rem;
|
||||
margin: 0 2px 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-header-navbar-title {
|
||||
/* Allow long navbar titles (e.g., stream names) to collapse. */
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.narrow_description {
|
||||
/* 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 */
|
||||
flex-shrink: 100;
|
||||
background: none;
|
||||
font-size: 14px;
|
||||
color: inherit;
|
||||
font-weight: 400;
|
||||
padding-left: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 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
|
||||
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. */
|
||||
.navbar_title,
|
||||
.narrow_description {
|
||||
flex: 1 1 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#streamlist-toggle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
Reference in New Issue
Block a user