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

Add dark theme support

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