imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated color scheme and spacing

Browse source
This commit is contained in:
Germain Souquet 2021-07-07 11:23:38 +02:00
parent de875bbe1d
commit b0a1fc7b97
3 changed files with 33 additions and 16 deletions
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; position: relative;
margin-top: var(--gutterSize); margin-top: var(--gutterSize);
margin-left: calc(var(--avatarSize) + var(--gutterSize)); margin-left: 50px;
margin-right: calc(var(--gutterSize) + var(--avatarSize)); margin-right: 50px;
padding: 2px 0;
&.mx_EventTile_continuation {
margin-top: 2px;
}
/* For replies */ /* For replies */
.mx_EventTile { .mx_EventTile {
@ -36,7 +39,23 @@ limitations under the License.
} }
&:hover { &: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, .mx_SenderProfile,
@ -55,10 +74,10 @@ limitations under the License.
background: var(--backgroundColor); background: var(--backgroundColor);
display: flex; display: flex;
gap: var(--gutterSize); gap: var(--gutterSize);
margin: 0 calc(-2 * var(--gutterSize)); margin: 0 -12px 0 -22px;
> a { > a {
position: absolute; position: absolute;
left: -50px; left: -57px;
} }
} }
@ -91,7 +110,7 @@ limitations under the License.
} }
.mx_EventTile_avatar { .mx_EventTile_avatar {
top: -19px; // height of the sender block top: -19px; // height of the sender block
right: calc(-1 * var(--avatarSize)); right: -45px;
} }
--backgroundColor: $eventbubble-self-bg; --backgroundColor: $eventbubble-self-bg;
@ -104,8 +123,6 @@ limitations under the License.
.mx_ReplyThread_show { .mx_ReplyThread_show {
order: 99999; order: 99999;
/* background: white;
box-shadow: 0 0 0 var(--gutterSize) white; */
} }
.mx_ReplyThread { .mx_ReplyThread {
@ -190,7 +207,7 @@ limitations under the License.
.mx_EventTile_readAvatars { .mx_EventTile_readAvatars {
position: absolute; position: absolute;
right: -45px; right: -60px;
bottom: 0; bottom: 0;
top: auto; 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); $composer-shadow-color: rgba(0, 0, 0, 0.28);
// Bubble tiles // Bubble tiles
$eventbubble-self-bg: rgba(141, 151, 165, 0.3); $eventbubble-self-bg: #143A34;
$eventbubble-others-bg: rgba(141, 151, 165, 0.3); $eventbubble-others-bg: #394049;
$eventbubble-bg-hover: rgba(141, 151, 165, 0.1); $eventbubble-bg-hover: #433C23;
$eventbubble-avatar-outline: #15191E; $eventbubble-avatar-outline: $bg-color;
// ***** Mixins! ***** // ***** 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 // Bubble tiles
$eventbubble-self-bg: #F8FDFC; $eventbubble-self-bg: #F8FDFC;
$eventbubble-others-bg: #F7F8F9; $eventbubble-others-bg: #F7F8F9;
$eventbubble-bg-hover: rgb(242, 242, 242); $eventbubble-bg-hover: #FEFCF5;
$eventbubble-avatar-outline: #fff; $eventbubble-avatar-outline: $primary-bg-color;
// ***** Mixins! ***** // ***** Mixins! *****