element-web/res/css/views/rooms/_IRCLayout.pcss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

240 lines
6.8 KiB
Text
Raw Normal View History

2020-04-29 14:07:41 +00:00
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
$irc-line-height: $font-18px;
2020-04-29 14:07:41 +00:00
.mx_IRCLayout {
--name-width: 80px; // cf. ircDisplayNameWidth on Settings.tsx
Stop using :not() pseudo class for mx_GenericEventListSummary (#8944) * Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules up Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-06 10:44:23 +00:00
--icon-width: 14px;
--right-padding: 5px;
2020-04-29 14:07:41 +00:00
line-height: $irc-line-height !important;
2020-04-29 14:07:41 +00:00
.mx_NewRoomIntro {
> h2 {
line-height: initial; /* Cancel $irc-line-height */
}
}
2020-04-29 14:07:41 +00:00
.mx_EventTile {
Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) (#8994) * Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply avatar position settings to modern/group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete style block Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove inline padding setting from mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a correct variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix misalignment of avatars and textual events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align avatars and hidden events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 13:40:19 +00:00
--EventTile_irc_line-padding-block: 1px;
/* timestamps are links which shouldn't be underlined */
> a {
text-decoration: none;
min-width: $MessageTimestamp_width;
}
2020-04-29 14:07:41 +00:00
display: flex;
flex-direction: row;
align-items: flex-start;
2020-04-29 14:29:25 +00:00
padding-top: 0;
2020-04-29 14:07:41 +00:00
> * {
Stop using :not() pseudo class for mx_GenericEventListSummary (#8944) * Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules up Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-06 10:44:23 +00:00
margin-right: var(--right-padding);
2020-04-29 14:07:41 +00:00
}
.mx_EventTile_msgOption {
2020-05-26 17:15:06 +00:00
order: 5;
2020-04-29 14:07:41 +00:00
flex-shrink: 0;
}
.mx_EventTile_line,
.mx_EventTile_reply {
display: flex;
flex-direction: column;
2020-04-29 14:07:41 +00:00
order: 3;
flex-grow: 1;
2020-05-26 16:39:39 +00:00
flex-shrink: 1;
min-width: 0;
2020-04-29 14:07:41 +00:00
}
.mx_EventTile_avatar {
2020-04-29 14:07:41 +00:00
order: 1;
position: relative;
flex-shrink: 0;
height: $irc-line-height;
2020-04-29 14:07:41 +00:00
display: flex;
align-items: center;
/* Need to use important to override the js provided height and width values. */
2020-06-11 09:36:52 +00:00
> .mx_BaseAvatar,
> .mx_BaseAvatar > * {
height: $font-14px !important;
width: $font-14px !important;
font-size: $font-10px !important;
line-height: $font-15px !important;
2020-04-29 14:07:41 +00:00
}
}
.mx_DisambiguatedProfile {
width: var(--name-width);
margin-inline-end: 0; /* override mx_EventTile > * */
order: 2;
flex-shrink: 0;
> .mx_DisambiguatedProfile_displayName {
width: 100%;
text-align: end;
overflow: hidden;
text-overflow: ellipsis;
}
> .mx_DisambiguatedProfile_mxid {
visibility: collapse;
/* Override the inherited margin. */
margin-left: 0;
padding: 0 5px;
}
&:hover {
overflow: visible;
z-index: 10;
> .mx_DisambiguatedProfile_displayName {
overflow: visible;
display: inline;
background-color: $event-selected-color;
border-radius: 8px 0 0 8px;
padding-right: 8px;
}
> .mx_DisambiguatedProfile_mxid {
visibility: visible;
opacity: 1;
background-color: $event-selected-color;
}
}
}
.mx_EventTile_e2eIcon {
2020-04-29 14:07:41 +00:00
padding: 0;
2020-06-11 10:44:11 +00:00
2020-05-26 17:15:06 +00:00
flex-shrink: 0;
flex-grow: 0;
2020-06-11 10:44:11 +00:00
height: $font-18px;
background-position: center;
2020-04-29 14:07:41 +00:00
}
.mx_EventTile_line {
.mx_EventTile_e2eIcon,
.mx_TextualEvent,
Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) (#8994) * Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply avatar position settings to modern/group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete style block Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove inline padding setting from mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a correct variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix misalignment of avatars and textual events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align avatars and hidden events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 13:40:19 +00:00
.mx_ViewSourceEvent,
2021-05-20 14:39:25 +00:00
.mx_MTextBody {
/* add a 1px padding top and bottom because our larger
emoji font otherwise gets cropped by anti-zalgo */
Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) (#8994) * Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply avatar position settings to modern/group layout only Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove obsolete style block Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove inline padding setting from mx_EventTile_line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a correct variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix misalignment of avatars and textual events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align avatars and hidden events on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 13:40:19 +00:00
padding: var(--EventTile_irc_line-padding-block) 0;
}
.mx_EventTile_e2eIcon,
.mx_TextualEvent,
.mx_MTextBody {
display: inline-block;
}
.mx_ReplyTile {
.mx_MTextBody {
display: -webkit-box; /* Enable -webkit-line-clamp */
}
}
2020-04-29 14:07:41 +00:00
}
.mx_EventTile_reply {
2020-05-26 17:15:06 +00:00
order: 4;
}
.mx_EditMessageComposer_buttons {
position: relative;
}
2020-04-29 14:07:41 +00:00
}
.mx_EventTile_emote {
.mx_EventTile_avatar {
/* add --right-padding value of MessageTimestamp only */
margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding));
}
}
blockquote {
margin: 0;
}
2020-04-29 14:07:41 +00:00
.mx_EventTile.mx_EventTile_info {
.mx_ViewSourceEvent, /* For hidden events */
2020-04-29 14:07:41 +00:00
.mx_TextualEvent {
line-height: $irc-line-height;
2020-04-29 14:07:41 +00:00
}
}
/* Suppress highlight thing from the normal Layout. */
2020-05-04 20:53:48 +00:00
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
border-left: 0;
}
.mx_ReplyChain {
.mx_DisambiguatedProfile {
width: unset;
background: transparent;
order: unset;
flex-shrink: unset; /* Unset flex-shrink to prevent long display name blowout */
}
.mx_EventTile_emote {
> .mx_EventTile_avatar {
margin-left: initial;
}
}
.mx_MessageTimestamp {
width: initial;
}
/**
* adding the icon back in the document flow
* if it's not present, there's no unwanted wasted space
*/
.mx_EventTile_e2eIcon {
position: relative;
order: -1;
}
}
.mx_ProfileResizer {
--resizer-width: 15px;
--resizer-a11y: 3px; /* Magic number, to be replaced with something more proper from the perspective of a11y */
position: absolute;
height: 100%;
width: var(--resizer-width);
cursor: col-resize;
z-index: 100;
/* Add width of every element rendered before the resizer (including padding for the avatar and the display
name), subtracting the resizer width itself to prevent the resizer from overlapping the text and moving
the resizer a bit to the left to make it easier to avoid selecting the resizer when highlighting text.
Please note that MessageTimestamp does not have inline padding. */
inset-inline-start: calc(
var(--RoomView_MessageList-padding) + var(--MessageTimestamp-width) + var(--icon-width) +
var(--right-padding) + var(--name-width) + var(--right-padding) - var(--resizer-width) -
var(--resizer-a11y)
);
}
2020-04-29 14:07:41 +00:00
}