sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Add CSS cascade layers for Compound, shared components, and app/web styles (#33302)

Browse Source 
* Layer Compound and shared component CSS

* Layer app theme CSS

* Remove !important flags from ActionBarView

* Remove unnecessary !important statements from shared components

* Avoid dead code errors for *.pcss just because layer is specified after @import url

* Remove unnecessary !important styling

* Override Banner defaults in RoomStatusBarView

* Updated snaps

* Updated snaps

* Fix styling of media body in app/web

* Fix styling for Compound anchors

* Fix styling issues in app/web

* More styling fixes

* Fix a problem extracting css for HTMLExport

* Revert changes

* Fix for theme styling

* Add test to improve coverage

* Prettier

* Fix styling issues

* Add data-kind attribute to avoid global styling override

* Update screenshot that now is correct

* Revert data-kind attribute

* Handle LinkPreview styling in .pcss

* Fix flaky test: Avoid racing the lazy-loaded ManageEventIndexDialog

* Take care of review comments

* Updated snaps

* Updated snaps again after merge

* Remove !important from RoomStatusBar
This commit is contained in:
rbondesson
2026-04-30 11:54:49 +00:00
committed by GitHub
parent f2d355bb2c
commit b0ee6f5323
46 changed files with 350 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/res/themes/light-custom/css/_custom.pcss
+7 -6
View File
@@ -25,16 +25,17 @@ $panels: var(--panels, var(--cpd-color-gray-600));
$panel-actions: var(--panels-actions, var(--cpd-color-gray-300));
/* --timeline-background-color */
$button-secondary-bg-color: var(--timeline-background-color);
$lightbox-border-color: var(--timeline-background-color);
$menu-bg-color: var(--timeline-background-color);
$message-action-bar-bg-color: var(--timeline-background-color);
$background: var(--timeline-background-color);
$custom-theme-background: var(--timeline-background-color, var(--cpd-color-bg-canvas-default));
$button-secondary-bg-color: $custom-theme-background;
$lightbox-border-color: $custom-theme-background;
$menu-bg-color: $custom-theme-background;
$message-action-bar-bg-color: $custom-theme-background;
$background: $custom-theme-background;
$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest);
$togglesw-off-color: var(--togglesw-off-color);
$droptarget-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .5 */
$authpage-modal-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .59 */
$roomheader-bg-color: var(--timeline-background-color);
$roomheader-bg-color: $custom-theme-background;
/* --roomlist-highlights-color */
$panel-actions: var(--roomlist-highlights-color);
apps/web/res/themes/light-custom/css/light-custom.pcss
+9 -7
View File
@@ -1,8 +1,10 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "../../legacy-light/css/_fonts.pcss";
@import "../../legacy-light/css/_legacy-light.pcss";
@import "_custom.pcss";
@import "../../../../res/css/_components.pcss";
@layer compound-tokens, compound-web, shared-components, app-web;
@import "../../../../res/css/_font-sizes.pcss" layer(app-web);
@import "../../legacy-light/css/_fonts.pcss" layer(app-web);
@import "../../legacy-light/css/_legacy-light.pcss" layer(app-web);
@import "_custom.pcss" layer(app-web);
@import "../../../../res/css/_components.pcss" layer(app-web);
@import "../../../../res/css/_compound.pcss";
@import url("highlight.js/styles/atom-one-light.min.css");
@import url("github-markdown-css/github-markdown-light.css");
@import url("highlight.js/styles/atom-one-light.min.css") layer(app-web);
@import url("github-markdown-css/github-markdown-light.css") layer(app-web);