n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/timeline: move horizontal padding to variable

Browse source
This commit is contained in:
Tulir Asokan 2024-12-10 23:42:42 +02:00
parent 8052c29955
commit a31b309e2e
6 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/src/index.css
View file

@ -81,6 +81,11 @@
--timeline-message-gap-small-event: 0; --timeline-message-gap-small-event: 0;
--timeline-sender-name-timestamp-gap: .25rem; --timeline-sender-name-timestamp-gap: .25rem;
--timeline-sender-name-content-gap: 0; --timeline-sender-name-content-gap: 0;
--timeline-horizontal-padding: 1.5rem;
@media screen and (max-width: 45rem) {
--timeline-horizontal-padding: .5rem;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color-scheme: dark; color-scheme: dark;

2
web/src/ui/MainScreen.css
View file

@ -16,7 +16,7 @@ main.matrix-main {
/ var(--room-list-width) 0 1fr 0 var(--right-panel-width); / var(--room-list-width) 0 1fr 0 var(--right-panel-width);
} }
@media screen and (max-width: 750px) { @media screen and (max-width: 45rem) {
&.right-panel-open { &.right-panel-open {
grid-template: "rightpanel" 1fr / 1fr; grid-template: "rightpanel" 1fr / 1fr;
> div.room-list-wrapper { > div.room-list-wrapper {

4
web/src/ui/composer/Autocompleter.css
View file

@ -5,8 +5,8 @@ div.autocompletions-wrapper {
div.autocompletions { div.autocompletions {
position: absolute; position: absolute;
bottom: 1.2rem; bottom: 1.25rem;
left: 1.6rem; left: var(--timeline-horizontal-padding);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 0.5rem; border-radius: 0.5rem;
box-shadow: 0 0 1rem var(--modal-box-shadow-color); box-shadow: 0 0 1rem var(--modal-box-shadow-color);

2
web/src/ui/composer/MessageComposer.css
View file

@ -1,5 +1,5 @@
div.message-composer { div.message-composer {
margin: -1rem 1.6rem 0 1.6rem; margin: -1rem var(--timeline-horizontal-padding) 0;
background-color: var(--composer-background-color); background-color: var(--composer-background-color);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 0.5rem; border-radius: 0.5rem;

2
web/src/ui/composer/TypingNotifications.css
View file

@ -1,7 +1,7 @@
div.typing-notifications { div.typing-notifications {
grid-area: typing; grid-area: typing;
height: 1.6rem; height: 1.6rem;
margin: 0 1.6rem; margin: 0 var(--timeline-horizontal-padding);
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;

6
web/src/ui/timeline/TimelineEvent.css
View file

@ -1,7 +1,7 @@
div.timeline-event { div.timeline-event {
width: calc(100% - 2 * 1.6rem); width: calc(100% - 2 * var(--timeline-horizontal-padding));
max-width: calc(100% - 2 * 1.6rem); max-width: calc(100% - 2 * var(--timeline-horizontal-padding));
padding: 0 1.6rem; padding: 0 var(--timeline-horizontal-padding);
display: grid; display: grid;
grid-template: grid-template:
"cmc cmc cmc cmc" 0 "cmc cmc cmc cmc" 0