compact-composer

Description

Makes the composer more compact and moves the typing indicator to the top

Previews

Code

To use this theme, paste the following import at the top of your custom CSS.

Optionally, you can replace https://css.gomuks.app with _gomuks to proxy the request through the gomuks backend with caching. When using a specific commit, the backend caches the CSS forever and will never re-request from upstream.

@import url("https://css.gomuks.app/theme/compact-composer.css");

div.room-view {
    grid-template: "header" 3.5rem "messageview" 1fr "autocomplete" 0 "typing" auto "input" auto / 1fr;
}

div.message-composer {
    margin: 0;
    border-radius: 0;
}

div.typing-notifications {
    min-block-size: 1.6rem;
    margin: 0;
    padding-block: .25rem;
    padding-inline: 1.6rem;
    background-color: var(--background-color);

    width: 100%;

    box-shadow: 0 0 0.5rem var(--background-color);

    bottom: 0;
    position: absolute;

    &.empty {
        display: none;
    }
}