Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-25 01:48:43 +08:00
Code Issues Packages Projects Releases Wiki Activity
f0ee7f7905
element-web-Github/res/css/views/rooms/_TopUnreadMessagesBar.pcss

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

72 lines
1.6 KiB
Plaintext
Raw Normal View History

move components' CSS to be in the same repo as their JS
2018-04-12 07:23:35 +08:00
/*
Change license (#13) * Copyright headers 1 * Licence headers 2 * Copyright Headers 3 * Copyright Headers 4 * Copyright Headers 5 * Copyright Headers 6 * Copyright headers 7 * Add copyright headers for html and config file * Replace license files and update package.json * Update with CLA * lint
2024-09-09 21:57:16 +08:00
Copyright 2024 New Vector Ltd.
move components' CSS to be in the same repo as their JS
2018-04-12 07:23:35 +08:00
Copyright 2016 OpenMarket Ltd
Change license (#13) * Copyright headers 1 * Licence headers 2 * Copyright Headers 3 * Copyright Headers 4 * Copyright Headers 5 * Copyright Headers 6 * Copyright headers 7 * Add copyright headers for html and config file * Replace license files and update package.json * Update with CLA * lint
2024-09-09 21:57:16 +08:00
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
move components' CSS to be in the same repo as their JS
2018-04-12 07:23:35 +08:00
*/
.mx_TopUnreadMessagesBar {
apply redesign to topunreadmessagebar with placeholder for message count
2018-12-03 21:55:24 +08:00
z-index: 1000;
position: absolute;
top: 24px;
right: 24px;
width: 38px;
move components' CSS to be in the same repo as their JS
2018-04-12 07:23:35 +08:00
}
Auto-fix stylelint issues These `stylelint` issues were autofixed by the tool itself and look sane to me.
2019-07-10 01:15:10 +08:00
.mx_TopUnreadMessagesBar::after {
Tweak styling of unread indicator circle. This makes the element symmetric and reduces the size of the hit target. With the previous styling, the mid-circle glyph was sometimes offset from the center. Furthermore, the large font size increased the hit box of the ::after element, eating into the scroll up arrow button's hit target. It might be a good idea to give the ::after element pointer-events:none so that the scroll up button is clickable in its entirety. Signed-off-by: Markus Stange <mstange@themasta.com>
2020-01-28 22:12:07 +08:00
content: "";
add badge with dot to rm button, so it catches your eye better
2018-12-19 00:56:05 +08:00
position: absolute;
top: -8px;
Fix: Unread notification dot aligned (#11658) Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
2023-09-27 14:36:31 +08:00
left: 11px;
Tweak styling of unread indicator circle. This makes the element symmetric and reduces the size of the hit target. With the previous styling, the mid-circle glyph was sometimes offset from the center. Furthermore, the large font size increased the hit box of the ::after element, eating into the scroll up arrow button's hit target. It might be a good idea to give the ::after element pointer-events:none so that the scroll up button is clickable in its entirety. Signed-off-by: Markus Stange <mstange@themasta.com>
2020-01-28 22:12:07 +08:00
width: 4px;
height: 4px;
add badge with dot to rm button, so it catches your eye better
2018-12-19 00:56:05 +08:00
border-radius: 16px;
Refine styles of controls to match Compound (#12299) This changes the styles of buttons, other form controls, and tabs in settings to: 1. Improve their usage of semantic colors, so that they adapt correctly to custom themes 2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.
2024-03-05 12:25:47 +08:00
background-color: var(--cpd-color-bg-canvas-default);
border: 6px solid var(--cpd-color-icon-accent-tertiary);
Let pointer events fall through to scroll button This makes it easier to click the entire visible area of the scroll button, including the green circle at the top.
2020-02-05 20:43:39 +08:00
pointer-events: none;
add badge with dot to rm button, so it catches your eye better
2018-12-19 00:56:05 +08:00
}
move components' CSS to be in the same repo as their JS
2018-04-12 07:23:35 +08:00
.mx_TopUnreadMessagesBar_scrollUp {
apply redesign to topunreadmessagebar with placeholder for message count
2018-12-03 21:55:24 +08:00
height: 38px;
border-radius: 19px;
box-sizing: border-box;
$primary-bg-color -> $background Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-12 17:10:47 +08:00
background: $background;
Refine the colors of some more components (#12343) * Refine the colors of some more components This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12255, and should be the last part of the Compound color refinement work (https://github.com/element-hq/element-web/issues/26992). I've updated the following components to reflect design decisions (https://www.figma.com/file/pqhlirZFEwEp5XpudSbiia/Theming-Web-templates?type=design&node-id=80-60219&mode=design&t=mjqwylUie1vRwzOV-0) that will help them fit in better with the new design system: - Message bubbles - Pills - Sent indicators - Jump to bottom/unread buttons - Composer placeholder - Notification badges - Room sublists - Verification shields - Date separators - Tooltips Closes https://github.com/element-hq/element-web/issues/22122 * Update some screenshots
2024-03-18 23:47:55 +08:00
border: 1.3px solid var(--cpd-color-icon-tertiary);
move components' CSS to be in the same repo as their JS
2018-04-12 07:23:35 +08:00
cursor: pointer;
}
Auto-fix stylelint issues These `stylelint` issues were autofixed by the tool itself and look sane to me.
2019-07-10 01:15:10 +08:00
.mx_TopUnreadMessagesBar_scrollUp::before {
apply redesign to topunreadmessagebar with placeholder for message count
2018-12-03 21:55:24 +08:00
content: "";
position: absolute;
also center chevron in top unread button
2020-07-31 20:39:34 +08:00
width: 36px;
height: 36px;
New group call experience: Room header and PiP designs (#9351) * Update our cancel icon The cancel icon we're using in the app has drifted out of sync with the ones used in our designs. We also had two identical-looking icons, so this consolidates them into one. I've simultaneously updated our chevron icons, since in the case of the 'jump to unread' timeline button, it became clear that the weight of the new close icon did not match the thinner chevron. * Don't squish bottom/top-aligned tooltips near the edge of the screen * Close the timeline panel when returning to the fullscreen timeline view * Add layout switching capabilities to ElementCall * Bring the room header in line with the group call designs * Bring the PiP header in line with the group call designs * Fix lints * Clarify tooltip CSS calculations * Test PipView * Expand RoomHeader test coverage * Test PipView more
2022-10-07 10:27:28 +08:00
mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
apply redesign to topunreadmessagebar with placeholder for message count
2018-12-03 21:55:24 +08:00
mask-repeat: no-repeat;
New group call experience: Room header and PiP designs (#9351) * Update our cancel icon The cancel icon we're using in the app has drifted out of sync with the ones used in our designs. We also had two identical-looking icons, so this consolidates them into one. I've simultaneously updated our chevron icons, since in the case of the 'jump to unread' timeline button, it became clear that the weight of the new close icon did not match the thinner chevron. * Don't squish bottom/top-aligned tooltips near the edge of the screen * Close the timeline panel when returning to the fullscreen timeline view * Add layout switching capabilities to ElementCall * Bring the room header in line with the group call designs * Bring the PiP header in line with the group call designs * Fix lints * Clarify tooltip CSS calculations * Test PipView * Expand RoomHeader test coverage * Test PipView more
2022-10-07 10:27:28 +08:00
mask-size: 20px;
mask-position: center;
Refine the colors of some more components (#12343) * Refine the colors of some more components This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12255, and should be the last part of the Compound color refinement work (https://github.com/element-hq/element-web/issues/26992). I've updated the following components to reflect design decisions (https://www.figma.com/file/pqhlirZFEwEp5XpudSbiia/Theming-Web-templates?type=design&node-id=80-60219&mode=design&t=mjqwylUie1vRwzOV-0) that will help them fit in better with the new design system: - Message bubbles - Pills - Sent indicators - Jump to bottom/unread buttons - Composer placeholder - Notification badges - Room sublists - Verification shields - Date separators - Tooltips Closes https://github.com/element-hq/element-web/issues/22122 * Update some screenshots
2024-03-18 23:47:55 +08:00
background: var(--cpd-color-icon-tertiary);
move components' CSS to be in the same repo as their JS
2018-04-12 07:23:35 +08:00
}
Include a mark as read X under the scroll to unread button
2020-03-03 03:59:14 +08:00
.mx_TopUnreadMessagesBar_markAsRead {
display: block;
width: 18px;
height: 18px;
$primary-bg-color -> $background Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-12 17:10:47 +08:00
background: $background;
Refine the colors of some more components (#12343) * Refine the colors of some more components This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12255, and should be the last part of the Compound color refinement work (https://github.com/element-hq/element-web/issues/26992). I've updated the following components to reflect design decisions (https://www.figma.com/file/pqhlirZFEwEp5XpudSbiia/Theming-Web-templates?type=design&node-id=80-60219&mode=design&t=mjqwylUie1vRwzOV-0) that will help them fit in better with the new design system: - Message bubbles - Pills - Sent indicators - Jump to bottom/unread buttons - Composer placeholder - Notification badges - Room sublists - Verification shields - Date separators - Tooltips Closes https://github.com/element-hq/element-web/issues/22122 * Update some screenshots
2024-03-18 23:47:55 +08:00
border: 1.3px solid var(--cpd-color-icon-tertiary);
Fix mark as read button for dark theme This changes the mark as read button to a mask image so that it can be themed like other images. Fixes https://github.com/vector-im/riot-web/issues/12640
2020-03-10 01:33:39 +08:00
border-radius: 10px;
Include a mark as read X under the scroll to unread button
2020-03-03 03:59:14 +08:00
margin: 5px auto;
}
Fix mark as read button for dark theme This changes the mark as read button to a mask image so that it can be themed like other images. Fixes https://github.com/vector-im/riot-web/issues/12640
2020-03-10 01:33:39 +08:00
.mx_TopUnreadMessagesBar_markAsRead::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
mask-image: url("$(res)/img/cancel.svg");
mask-repeat: no-repeat;
mask-size: 10px;
mask-position: 4px 4px;
Refine the colors of some more components (#12343) * Refine the colors of some more components This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12255, and should be the last part of the Compound color refinement work (https://github.com/element-hq/element-web/issues/26992). I've updated the following components to reflect design decisions (https://www.figma.com/file/pqhlirZFEwEp5XpudSbiia/Theming-Web-templates?type=design&node-id=80-60219&mode=design&t=mjqwylUie1vRwzOV-0) that will help them fit in better with the new design system: - Message bubbles - Pills - Sent indicators - Jump to bottom/unread buttons - Composer placeholder - Notification badges - Room sublists - Verification shields - Date separators - Tooltips Closes https://github.com/element-hq/element-web/issues/22122 * Update some screenshots
2024-03-18 23:47:55 +08:00
background: var(--cpd-color-icon-tertiary);
Fix mark as read button for dark theme This changes the mark as read button to a mask image so that it can be themed like other images. Fixes https://github.com/vector-im/riot-web/issues/12640
2020-03-10 01:33:39 +08:00
}
Reference in New Issue Copy Permalink