PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Adjust room list colours to match designs

Browse source
This commit is contained in:
J. Ryan Stinnett 2020-07-31 17:52:19 +01:00
parent 8441763a71
commit 31180d3df9
3 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/views/rooms/_RoomSublist.scss
View file

@ -154,7 +154,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $primary-fg-color; background-color: $roomlist-header-color;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
} }
@ -256,7 +256,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $roomtile-preview-color; background: $roomlist-header-color;
left: -1px; // adjust for image position left: -1px; // adjust for image position
} }

8
res/themes/dark/css/_dark.scss
View file

@ -18,6 +18,10 @@ $primary-fg-color: $text-primary-color;
$primary-bg-color: $bg-color; $primary-bg-color: $bg-color;
$muted-fg-color: $header-panel-text-primary-color; $muted-fg-color: $header-panel-text-primary-color;
// additional text colors
$secondary-fg-color: #A9B2BC;
$tertiary-fg-color: #8E99A4;
// used for dialog box text // used for dialog box text
$light-fg-color: $header-panel-text-secondary-color; $light-fg-color: $header-panel-text-secondary-color;
@ -112,10 +116,10 @@ $theme-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist-bg-color: rgba(33, 38, 44, 0.90); $roomlist-bg-color: rgba(33, 38, 44, 0.90);
$roomlist-header-color: #8E99A4; $roomlist-header-color: $tertiary-fg-color;
$roomsublist-divider-color: $primary-fg-color; $roomsublist-divider-color: $primary-fg-color;
$roomtile-preview-color: #A9B2BC; $roomtile-preview-color: $secondary-fg-color;
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: rgba(141, 151, 165, 0.2); $roomtile-selected-bg-color: rgba(141, 151, 165, 0.2);

17
res/themes/light/css/_light.scss
View file

@ -19,8 +19,8 @@ $accent-bg-color: rgba(3, 179, 129, 0.16);
$notice-primary-color: #ff4b55; $notice-primary-color: #ff4b55;
$notice-primary-bg-color: rgba(255, 75, 85, 0.16); $notice-primary-bg-color: rgba(255, 75, 85, 0.16);
$primary-fg-color: #2e2f32; $primary-fg-color: #2e2f32;
$roomlist-header-color: $primary-fg-color; $secondary-fg-color: #737D8C;
$notice-secondary-color: $roomlist-header-color; $tertiary-fg-color: #8D99A5;
$header-panel-bg-color: #f3f8fd; $header-panel-bg-color: #f3f8fd;
// typical text (dark-on-white in light skin) // typical text (dark-on-white in light skin)
@ -52,10 +52,6 @@ $info-bg-color: #2A9EDF;
$mention-user-pill-bg-color: $warning-color; $mention-user-pill-bg-color: $warning-color;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); $other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
// pinned events indicator
$pinned-unread-color: $notice-primary-color;
$pinned-color: $notice-secondary-color;
// informational plinth // informational plinth
$info-plinth-bg-color: #f7f7f7; $info-plinth-bg-color: #f7f7f7;
$info-plinth-fg-color: #888; $info-plinth-fg-color: #888;
@ -178,9 +174,10 @@ $theme-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons $roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-bg-color: rgba(245, 245, 245, 0.90); $roomlist-bg-color: rgba(245, 245, 245, 0.90);
$roomlist-header-color: $tertiary-fg-color;
$roomsublist-divider-color: $primary-fg-color; $roomsublist-divider-color: $primary-fg-color;
$roomtile-preview-color: #737D8C; $roomtile-preview-color: $secondary-fg-color;
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #FFF; $roomtile-selected-bg-color: #FFF;
@ -199,8 +196,14 @@ $username-variant6-color: #2dc2c5;
$username-variant7-color: #5c56f5; $username-variant7-color: #5c56f5;
$username-variant8-color: #74d12c; $username-variant8-color: #74d12c;
$notice-secondary-color: $roomlist-header-color;
$panel-divider-color: transparent; $panel-divider-color: transparent;
// pinned events indicator
$pinned-unread-color: $notice-primary-color;
$pinned-color: $notice-secondary-color;
// ******************** // ********************
$widget-menu-bar-bg-color: $secondary-accent-color; $widget-menu-bar-bg-color: $secondary-accent-color;