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

Updated color scheme and spacing

pull/21833/head
Germain Souquet 2021-07-07 11:23:38 +02:00
parent de875bbe1d
commit b0a1fc7b97
3 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
res/css/views/rooms/_EventBubbleTile.scss
View File

@ -26,9 +26,12 @@ limitations under the License.
position: relative;
margin-top: var(--gutterSize);
margin-left: calc(var(--avatarSize) + var(--gutterSize));
margin-right: calc(var(--gutterSize) + var(--avatarSize));
padding: 2px 0;
margin-left: 50px;
margin-right: 50px;
&.mx_EventTile_continuation {
margin-top: 2px;
}
/* For replies */
.mx_EventTile {
@ -36,7 +39,23 @@ limitations under the License.
}
&:hover {
background: $eventbubble-bg-hover;
&::before {
content: '';
position: absolute;
top: -1px;
bottom: -1px;
left: -60px;
right: -65px;
z-index: -1;
background: $eventbubble-bg-hover;
border-radius: 4px;
}
.mx_EventTile_avatar {
img {
box-shadow: 0 0 0 3px $eventbubble-bg-hover;
}
}
}
.mx_SenderProfile,
@ -55,10 +74,10 @@ limitations under the License.
background: var(--backgroundColor);
display: flex;
gap: var(--gutterSize);
margin: 0 calc(-2 * var(--gutterSize));
margin: 0 -12px 0 -22px;
> a {
position: absolute;
left: -50px;
left: -57px;
}
}
@ -91,7 +110,7 @@ limitations under the License.
}
.mx_EventTile_avatar {
top: -19px; // height of the sender block
right: calc(-1 * var(--avatarSize));
right: -45px;
}
--backgroundColor: $eventbubble-self-bg;
@ -104,8 +123,6 @@ limitations under the License.
.mx_ReplyThread_show {
order: 99999;
/* background: white;
box-shadow: 0 0 0 var(--gutterSize) white; */
}
.mx_ReplyThread {
@ -190,7 +207,7 @@ limitations under the License.
.mx_EventTile_readAvatars {
position: absolute;
right: -45px;
right: -60px;
bottom: 0;
top: auto;
}

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

@ -232,10 +232,10 @@ $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;
$eventbubble-self-bg: #143A34;
$eventbubble-others-bg: #394049;
$eventbubble-bg-hover: #433C23;
$eventbubble-avatar-outline: $bg-color;
// ***** Mixins! *****

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

@ -354,8 +354,8 @@ $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;
$eventbubble-bg-hover: #FEFCF5;
$eventbubble-avatar-outline: $primary-bg-color;
// ***** Mixins! *****