mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 01:35:49 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add dark theme support

Browse source
This commit is contained in:
Germain Souquet 2021-07-01 14:23:00 +01:00
parent 209344d443
commit 223b40c9d6
4 changed files with 31 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
res/css/views/rooms/_EventBubbleTile.scss
View file

@ -26,8 +26,13 @@ limitations under the License.
margin-right: calc(var(--gutterSize) + var(--avatarSize));
padding: 2px 0;
/* For replies */
.mx_EventTile {
padding-top: 0;
}
&:hover {
background: rgb(242, 242, 242);
background: $eventbubble-bg-hover;
}
.mx_SenderProfile,
@ -37,7 +42,7 @@ limitations under the License.
}
.mx_SenderProfile {
padding: var(--gutterSize) var(--gutterSize) 0 var(--gutterSize);
padding: 0 var(--gutterSize);
}
.mx_EventTile_line {
@ -57,7 +62,7 @@ limitations under the License.
top: 0;
line-height: 1;
img {
box-shadow: 0 0 0 2px #fff;
box-shadow: 0 0 0 2px $eventbubble-avatar-outline;
border-radius: 50%;
}
}
@ -83,7 +88,7 @@ limitations under the License.
right: calc(-1 * var(--avatarSize));
}
--backgroundColor: #F8FDFC;
--backgroundColor: $eventbubble-self-bg;
}
&[data-has-reply=true] {
@ -93,8 +98,8 @@ limitations under the License.
.mx_ReplyThread_show {
order: 99999;
background: white;
box-shadow: 0 0 0 var(--gutterSize) white;
/* background: white;
box-shadow: 0 0 0 var(--gutterSize) white; */
}
.mx_ReplyThread {
@ -120,12 +125,12 @@ limitations under the License.
}
}
&:not([data-self=true]) {
&[data-self=false] {
.mx_EventTile_avatar {
left: calc(-1 * var(--avatarSize));
}
--backgroundColor: #F7F8F9;
--backgroundColor: $eventbubble-others-bg;
}
&.mx_EventTile_bubbleContainer,

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

@ -231,6 +231,12 @@ $groupFilterPanel-background-blur-amount: 30px;
$composer-shadow-color: rgba(0, 0, 0, 0.28);
// Bubble tiles
$eventbubble-self-bg: rgba(141, 151, 165, 0.3);
$eventbubble-others-bg: rgba(141, 151, 165, 0.3);
$eventbubble-bg-hover: rgba(141, 151, 165, 0.1);
$eventbubble-avatar-outline: #15191E;
// ***** Mixins! *****
@define-mixin mx_DialogButton {

6
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -346,6 +346,12 @@ $appearance-tab-border-color: $input-darker-bg-color;
$composer-shadow-color: tranparent;
// Bubble tiles
$eventbubble-self-bg: #F8FDFC;
$eventbubble-others-bg: #F7F8F9;
$eventbubble-bg-hover: rgb(242, 242, 242);
$eventbubble-avatar-outline: #fff;
// ***** Mixins! *****
@define-mixin mx_DialogButton {

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

@ -351,6 +351,12 @@ $groupFilterPanel-background-blur-amount: 20px;
$composer-shadow-color: rgba(0, 0, 0, 0.04);
// Bubble tiles
$eventbubble-self-bg: #F8FDFC;
$eventbubble-others-bg: #F7F8F9;
$eventbubble-bg-hover: rgb(242, 242, 242);
$eventbubble-avatar-outline: #fff;
// ***** Mixins! *****
@define-mixin mx_DialogButton {