OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #4756 from matrix-org/travis/room-list/dark 

Initial dark theme support for new room list
pull/21833/head
Travis Ralston 2020-06-12 16:03:37 -06:00 committed by GitHub
parent 9eb965878a f9a4151a6e
commit cbe9ade1c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 41 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
res/css/structures/_LeftPanel2.scss
View File

@ -16,12 +16,10 @@ limitations under the License.
// TODO: Rename to mx_LeftPanel during replacement of old component
// TODO: Put these variables in the right place, or namespace them.
$tagPanelWidth: 70px;
$roomListMinimizedWidth: 50px;
$tagPanelWidth: 70px; // only applies in this file, used for calculations
.mx_LeftPanel2 {
background-color: $header-panel-bg-color;
background-color: $roomlist2-bg-color;
min-width: 260px;
max-width: 50%;
@ -108,7 +106,7 @@ $roomListMinimizedWidth: 50px;
width: 28px;
height: 28px;
border-radius: 20px;
background-color: #fff; // TODO: Variable and theme
background-color: $roomlist2-button-bg-color;
position: relative;
margin-left: 8px;

2
res/css/structures/_RoomSearch.scss
View File

@ -18,7 +18,7 @@ limitations under the License.
.mx_RoomSearch {
flex: 1;
border-radius: 20px;
background-color: #fff; // TODO: Variable & theme
background-color: $roomlist2-button-bg-color;
height: 26px;
padding: 2px;

2
res/css/structures/_UserMenuButton.scss
View File

@ -19,7 +19,7 @@ limitations under the License.
}
.mx_UserMenuButton_contextMenu {
width: 231px;
width: 247px;
.mx_UserMenuButton_contextMenu_header {
// Create a flexbox to organize the header a bit easier

2
res/css/views/rooms/_NotificationBadge.scss
View File

@ -27,7 +27,7 @@ limitations under the License.
// ^- The count is an element floating within that.
&.mx_NotificationBadge_visible {
background-color: $roomtile2-badge-color;
background-color: $roomtile2-default-badge-bg-color;
// Create a flexbox to order the count a bit easier
display: flex;

8
res/css/views/rooms/_RoomSublist2.scss
View File

@ -108,7 +108,7 @@ limitations under the License.
// This is the same color as the left panel background because it needs
// to occlude the lastmost tile in the list.
background-color: $header-panel-bg-color;
background-color: $roomlist2-bg-color;
// Update the render() function for RoomSublist2 if these change
// Update the ListLayout class for minVisibleTiles if these change.
@ -198,7 +198,7 @@ limitations under the License.
height: 24px;
margin-left: 16px;
visibility: visible;
background-color: #fff; // TODO: Variable and theme
background-color: $roomlist2-button-bg-color;
}
}
}
@ -226,7 +226,7 @@ limitations under the License.
width: 32px !important; // !important to override hover styles
height: 32px !important; // !important to override hover styles
margin-left: 0 !important; // !important to override hover styles
background-color: #fff; // TODO: Variable and theme
background-color: $roomlist2-button-bg-color;
margin-top: 8px;
&::before {
@ -261,7 +261,7 @@ limitations under the License.
// This is the same color as the left panel background because it needs
// to occlude the sublist title
background-color: $header-panel-bg-color;
background-color: $roomlist2-bg-color;
&::before {
top: 0;

18
res/themes/dark/css/_dark.scss
View File

@ -103,6 +103,24 @@ $eventtile-meta-color: $roomtopic-color;
$header-divider-color: $header-panel-text-primary-color;
// ********************
// V2 Room List
// TODO: Remove the 2 from all of these when the new list takes over
$theme-button-bg-color: #e3e8f0;
$roomlist2-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
$roomlist2-bg-color: $header-panel-bg-color;
$roomsublist2-divider-color: #e9eaeb;
$roomtile2-preview-color: #9e9e9e;
$roomtile2-default-badge-bg-color: #61708b;
$roomtile2-selected-bg-color: #1A1D23;
// ********************
$roomtile-name-color: $header-panel-text-primary-color;
$roomtile-selected-color: $text-primary-color;
$roomtile-notified-color: $text-primary-color;

18
res/themes/light/css/_light.scss
View File

@ -172,14 +172,22 @@ $header-divider-color: #91A1C0;
// ********************
// TODO: Update variables for new room list
// TODO: Dark theme
$roomtile2-preview-color: #9e9e9e;
$roomtile2-badge-color: #61708b;
$roomtile2-selected-bg-color: #FFF;
// V2 Room List
// TODO: Remove the 2 from all of these when the new list takes over
$theme-button-bg-color: #e3e8f0;
$roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
$roomlist2-bg-color: $header-panel-bg-color;
$roomsublist2-divider-color: #e9eaeb;
$roomtile2-preview-color: #9e9e9e;
$roomtile2-default-badge-bg-color: #61708b;
$roomtile2-selected-bg-color: #FFF;
// ********************
$roomtile-name-color: #61708b;
$roomtile-badge-fg-color: $accent-fg-color;
$roomtile-selected-color: #212121;