diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index bc8a2927c0..fd100c8aed 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -64,6 +64,11 @@ $MiniAppTileHeight: 200px; opacity: 0.8; } } + + .mx_AppTileBody, .mx_AppTile_persistedWrapper { + // match bg of border so that the cut corners have the right fill + background-color: $widget-menu-bar-bg-color; + } } .mx_AppsContainer_resizer { @@ -170,8 +175,8 @@ $MinWidth: 240px; align-items: center; justify-content: space-between; width: 100%; - padding-top: 8px; - padding-bottom: 12px; + padding-top: 2px; + padding-bottom: 8px; } .mx_AppTileMenuBarTitle { @@ -206,7 +211,7 @@ $MinWidth: 240px; margin: 0 3px; } -.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout { // TODO replace icon +.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout { mask-image: url('$(res)/img/feather-customised/widget/external-link.svg'); } @@ -248,17 +253,19 @@ $MinWidth: 240px; padding: 0; margin: 0; display: block; + border-radius: 8px; } .mx_AppPermissionWarning { text-align: center; - background-color: $widget-menu-bar-bg-color; + background-color: $widget-body-bg-color; display: flex; height: 100%; flex-direction: column; justify-content: center; align-items: center; font-size: $font-16px; + border-radius: 8px; } .mx_AppPermissionWarning_row { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 6e0c9acdfe..bd709473ef 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -131,6 +131,7 @@ $notice-secondary-color: $roomlist-header-color; $panel-divider-color: transparent; $widget-menu-bar-bg-color: $header-panel-bg-color; +$widget-body-bg-color: rgba(141, 151, 165, 0.2); // event tile lifecycle $event-sending-color: $text-secondary-color; diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index efde7b3747..60d44b1c31 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -126,6 +126,7 @@ $roomtile-selected-bg-color: #1A1D23; $panel-divider-color: $header-panel-border-color; $widget-menu-bar-bg-color: $header-panel-bg-color; +$widget-body-bg-color: #1A1D23; // event tile lifecycle $event-sending-color: $text-secondary-color; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index f77226cbca..52fb1c8ef2 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -208,6 +208,7 @@ $panel-divider-color: #dee1f3; // ******************** $widget-menu-bar-bg-color: $secondary-accent-color; +$widget-body-bg-color: #fff; // ******************** diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index d137373bd5..0c5e271860 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -208,6 +208,7 @@ $pinned-color: $notice-secondary-color; // ******************** $widget-menu-bar-bg-color: $secondary-accent-color; +$widget-body-bg-color: #FFF; // ********************