hydrogen-web/src/platform/web/ui/css/themes/element/theme.css

/*
Copyright 2020 Bruno Windels <bruno@windels.cloud>
Copyright 2020 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

@import url('../../main.css');
@import url('inter.css');
@import url('timeline.css');

:root {
    font-size: 10px;
    /* Theme aliases */
    --icon-color: var(--background-color-secondary--darker-40);
    --light-border: var(--background-color-secondary--darker-5);
    --light-text-color: var(--background-color-secondary--darker-55);
    --timeline-time-text-color: var(--background-color-secondary--darker-35);
    --icon-background: var(--background-color-secondary--darker-7);
    --right-panel-text-color: var(--background-color-secondary--darker-35);
}

.hydrogen {
    font-family: 'Inter', sans-serif, 'emoji';
    background-color: var(--background-color-primary);
    color: var(--text-color);
    font-size: 1.4rem;
    --usercolor1: #368BD6;
    --usercolor2: #AC3BA8;
    --usercolor3: #03B381;
    --usercolor4: #E64F7A;
    --usercolor5: #FF812D;
    --usercolor6: #2DC2C5;
    --usercolor7: #5C56F5;
    --usercolor8: #74D12C;
}

.hydrogen button {
    font-family: inherit;
}

.avatar {
    border-radius: 100%;
    background: var(--fixed-white);
    color: var(--fixed-white);
}

.hydrogen .avatar.usercolor1 { background-color: var(--usercolor1); }
.hydrogen .avatar.usercolor2 { background-color: var(--usercolor2); }
.hydrogen .avatar.usercolor3 { background-color: var(--usercolor3); }
.hydrogen .avatar.usercolor4 { background-color: var(--usercolor4); }
.hydrogen .avatar.usercolor5 { background-color: var(--usercolor5); }
.hydrogen .avatar.usercolor6 { background-color: var(--usercolor6); }
.hydrogen .avatar.usercolor7 { background-color: var(--usercolor7); }
.hydrogen .avatar.usercolor8 { background-color: var(--usercolor8); }

.logo {
    height: 48px;
    min-width: 48px;
    background-image: url('element-logo.svg?primary=accent-color');
    background-repeat: no-repeat;
    background-position: center;
}

/** buttons */
.button-row {
    display: flex;
}
.button-row > * {
    margin-right: 10px;
}
.button-row > *:last-child {
    margin-right: 0px;
}

.button-row .button-action {
    margin: 10px 0;
    flex: 1 0 auto;
}

.form-row.text textarea {
    font-family: "Inter", sans-serif;
    background-color: var(--background-color-secondary);
    color: inherit;
}

.form-group {
    margin: 24px 0;
}

.form-row {
    margin: 12px 0;
}

.form-row.text > input, .form-row.text > textarea {
    padding: 12px;
    border: 1px solid var(--light-border);
    border-radius: 8px;
    margin-top: 5px;
    font-size: 1em;
    resize: vertical;
    background-color: var(--background-color-secondary);
    color: inherit;
}

.form-row.check {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.form-row.text > label, .form-row.text > input {
    display: block;
}

.form-row .form-row-description {
    font-size: 1rem;
    color: var(--light-text-color);
    margin: 8px 0 0 0;
}

.button-action {
    cursor: pointer;
}

a.button-action {
    text-decoration: none;
    text-align: center;
    display: block;
}


.button-action.secondary {
    color: var(--accent-color);
}

.button-action.primary {
    background-color: var(--accent-color);
    border-radius: 8px;
    color: var(--fixed-white);
    font-weight: bold;
}

.button-action.primary:disabled {
    color: var(--fixed-white--darker-10);
}

.button-action.primary.destructive {
    background-color: var(--error-color);
}

.button-action.secondary.destructive {
    color: var(--error-color);
}

.button-action {
    border: none;
    padding: 10px;
    background: none;
    font-weight: 500;
}

.button-utility {
    cursor: pointer;
    width: 32px;
    height: 32px;
    background-position: center;
    background-color: var(--icon-background);
    background-repeat: no-repeat;
    border: none;
    border-radius: 100%;
    display: block;
}

.button-utility.grid {
    background-image: url('icons/enable-grid.svg?primary=icon-color');
}

.button-utility.settings {
    background-image: url('icons/settings.svg?primary=icon-color');
}

.button-utility.create {
    background-image: url('icons/plus.svg?primary=icon-color');
}

.button-utility.grid.on {
    background-image: url('icons/disable-grid.svg?primary=icon-color');
}

.FilterField {
    background-image: url('icons/search.svg?primary=icon-color');
    background-repeat: no-repeat;
    background-position: 8px center;
    background-color: var(--icon-background);
    /* to prevent jumps when adding a border on focus */
    border: 1px solid transparent;
    border-radius: 16px;
    height: 32px;
    align-items: center;
    padding-left: 30px; /* 8 + 14 (icon) + 8*/
    box-sizing: border-box;
}

.FilterField:focus-within {
    border: 1px var(--icon-background) solid;
    background-color: var(--background-color-primary);
}

.FilterField:focus-within button {
    border-color: var(--background-color-primary);
}

/*.FilterField:not(:focus-within) button {
    display: none;
}*/

.FilterField input {
    font-family: "Inter";
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.573rem;
    outline: none;
    border: none;
    background-color: transparent;
    height: 100%;
    color: var(--text-color);
}

.FilterField button {
    width: 30px; /* 32 - 1 (top) - 1 (bottom) */
    height: 30px; /* 32 - 1 (top) - 1 (bottom) */
    background-position: center;
    background-color: var(--icon-background);
    background-repeat: no-repeat;
    background-image: url('icons/clear.svg?primary=icon-color');
    border: 7px solid transparent; /* 8 - 1 */
    border-radius: 100%;
    box-sizing: border-box;
}

.PreSessionScreen {
    padding: 30px;
}

.PreSessionScreen h1 {
    font-size: 16px;
    text-align: center;
}

.SessionLoadView {
    padding-top: 16px;
}

.StartSSOLoginView_button {
    border: 1px solid var(--accent-color);
    border-radius: 8px;
}

.LoginView_back {
    background-image: url("./icons/chevron-left.svg?primary=icon-color");
    background-color: transparent;
}

.LoginView_separator {
    font-weight: 500;
    font-size: 1.5rem;
}

.LoginView_forwardInfo {
    font-size: 0.9em;
    margin-left: 1em;
    color: var(--light-text-color);
}

.CompleteSSOView_title {
    font-weight: 500;
}

@media screen and (min-width: 600px) {
    .PreSessionScreen {
        /* needs transparency support */
        box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }
}

.PreSessionScreen .logo {
    height: 48px;
    min-width: 48px;
}

.LeftPanel {
    background: var(--background-color-secondary);
    font-size: 1.5rem;
    padding: 12px 8px 0 8px;
}

.LeftPanel > :not(:first-child) {
    margin-top: 12px;
}

.LeftPanel .utilities > :not(:first-child) {
    margin-left: 8px;
}

.LeftPanel .filter {
    border-bottom: 1px solid var(--background-color-secondary);
}

.LeftPanel .filter input {
    padding: 0.8em;
    border: none;
}

.LeftPanel .RoomList {
    padding: 0;
    /* make scrollbar hit right edge of parent */
    padding-right: 8px;
    margin-right: -8px;
}

.RoomList > li {
    margin: 0;
    padding: 4px 8px 4px 0;
    /* vertical align */
    align-items: center;
}

.RoomList > li > a {
    text-decoration: none;
    /* vertical align */
    align-items: center;
}

.RoomList li:not(:first-child) {
    /* space between items is 12px but we take 4px padding
    on each side for the background of the active state*/
    margin-top: 4px;
}

.RoomList li.active {
    background: var(--background-color-secondary--darker-7);
    border-radius: 5px;
}

.RoomList li > a > * {
    margin-right: 8px;
}

.RoomList .description {
    align-items: center;
}

.RoomList .name.unread {
    font-weight: 600;
}

.RoomList .badge {
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 1.6rem;
    box-sizing: border-box;
    padding: 0.1rem 0.3rem;
    background-color: var(--room-badge);
    color: var(--fixed-white);
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.4rem;
    text-align: center;
}

.RoomList .badge.highlighted {
    background-color: var(--error-color);
}

a {
    color: inherit;
}

.SessionStatusView {
    padding: 4px;
    min-height: 22px;
    background-color: var(--accent-color);
    color: var(--fixed-white);
    align-items: center;
}

.SessionStatusView button.link {
    color: currentcolor;
    text-align: left;
}

.SessionStatusView>.end {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-self: stretch;
    align-items: stretch;
}

.SessionStatusView .dismiss {
    border: none;
    background: none;
    background-image: url('icons/dismiss.svg?primary=background-color-primary');
    background-position: center;
    background-repeat: no-repeat;
    width: 32px;
    cursor: pointer;
}

.room-placeholder {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.SessionPickerView li {
  font-size: 1.2em;
}

.SessionPickerView .session-info {
    text-decoration: none;
    padding: 12px;
    border: 1px solid var(--light-border);
    border-radius: 8px;
    background-image: url('./icons/chevron-right.svg?primary=icon-color');
    background-position: center right 30px;
    background-repeat: no-repeat;
    font-weight: 500;
}

.SessionPickerView .session-actions {
    margin: 10px 0 20px 0;
    display: flex;
}

.SessionPickerView .session-actions > * {
    margin-right: 10px;
}
.SessionPickerView .session-actions > *:last-child {
    margin-right: 0px;
}

.SessionPickerView .session-actions button {
    border: none;
    background: none;
    color: inherit;
}

.SessionPickerView button.destructive {
    color: var(--error-color);
}

.RoomGridView > div.container {
    border-right: 1px solid var(--background-color-secondary);
    border-bottom: 1px solid var(--background-color-secondary);
}

.RoomGridView > .focused > .room-placeholder .unfocused {
    display: none;
}

.RoomGridView > :not(.focused) > .room-placeholder .focused {
    display: none;
}

.room-placeholder .unfocused {
    color: var(--right-panel-text-color);
}


.RoomGridView > div.focus-ring {
    border: 2px solid var(--accent-color--darker-5);
    border-radius: 12px;
}

.middle-header {
    box-sizing: border-box;
    flex: 0 0 56px; /* 12 + 32 + 12 to align with filter field + margin */
    background: var(--background-color-primary);
    padding: 0 16px;
    border-bottom: 1px solid var(--background-color-secondary);
}

.middle-header h2 {
    font-size: 1.8rem;
    font-weight: 600;
}

.middle-header > :not(:last-child) {
    /* use margin-right because the first item,
    .close-middle might be hidden and then we don't
    want a margin-left on the second item*/
    margin-right: 8px;
}

.close-middle, .close-session {
    background-image: url('icons/chevron-left.svg?primary=icon-color');
    background-position-x: 10px;
}

.RoomHeader .topic {
    font-size: 14rem;
}

.RoomHeader .room-options {
    background-image: url("./icons/vertical-ellipsis.svg?primary=icon-color");
}

.RoomView_error {
    color: var(--error-color);
}

.MessageComposer_replyPreview .Timeline_message {
    margin: 0;
    margin-top: 5px;
    max-height: 30vh;
    overflow: auto;
}

.MessageComposer_replyPreview {
    background: var(--background-color-secondary);
    margin: 0px 10px 10px 10px;
    box-shadow: 0px 0px 5px var(--background-color-secondary--darker-15);
    border-radius: 5px;
}

.MessageComposer_input, .MessageComposer_replyPreview {
    padding: 8px;
}

.MessageComposer_replyPreview > .replying {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    font-weight: bold;
}

.MessageComposer_replyPreview > button.cancel {
    width: 32px;
    height: 32px;
    display: block;
    border: none;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    background-color: transparent;
    background-image: url('icons/clear.svg?primary=icon-color');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    cursor: pointer;
}

.MessageComposer_input:first-child {
    border-top: 1px solid var(--background-color-secondary);
}

.MessageComposer_input > :not(:first-child) {
    margin-left: 12px;
}

.MessageComposer_input > textarea {
    border: none;
    border-radius: 24px;
    background: var(--background-color-secondary);
    color: inherit;
    font-size: 14px;
    font-family: "Inter", sans-serif;
    resize: none;
    flex: 1;
    padding: 14px;
    box-sizing: border-box;
    overflow: hidden;
    max-height: 113px; /* 5 lines */
    overflow-y: auto;
    overflow-y: overlay;
}

.MessageComposer_input > button.send {
    width: 32px;
    height: 32px;
    display: block;
    border-radius: 100%;
    border: none;
    text-indent: 200%;
    overflow: hidden;

    background-color: var(--accent-color);
    background-image: url('icons/send.svg?primary=background-color-primary');
    background-repeat: no-repeat;
    background-position: center;
    align-self: end;
    margin-bottom: 8px;
}

.MessageComposer_input > button.sendFile {
    width: 32px;
    height: 32px;
    display: block;
    border: none;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    background-color: transparent;
    background-image: url('icons/paperclip.svg?primary=icon-color');
    background-repeat: no-repeat;
    background-position: center;
}

.MessageComposer.MessageComposer_canSend button.sendFile {
    display: none;
}

.MessageComposer:not(.MessageComposer_canSend) button.send {
    display: none;
}

.SettingsBody {
    padding: 0px 16px;
}

.Settings h3 {
    margin: 16px 0 8px 0;
}

.Settings p {
  max-width: 700px;
}

.Settings .row .label {
    font-weight: 600;
}

.Settings .row .label, .Settings .row .content {
    margin-top: 4px;
    margin-bottom: 4px;
}

.Settings .row .content {
    margin-left: 4px;
    flex: 1;
}

.Settings .row.code .content {
    font-family: monospace;
}

.Settings .row .content button {
  display: inline-block;
  margin: 0 8px;
}

.Settings .row .content input[type=range] {
  width: 100%;
  max-width: 300px;
  min-width: 160px;
}

.Settings .row {
    margin: 4px 0px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.Settings .row .label {
    flex: 0 0 200px;
    align-self: flex-start;
}

.Settings .row .content p {
    margin: 8px 0;
}

.Settings .row .content p:first-child {
    margin-top: 0;
}

.Settings .row .content p:last-child {
    margin-bottom: 0;
}

.error {
    color: var(--error-color);
    font-weight: 600;
}

button.link {
    font-size: 1em;
    border: none;
    text-decoration: underline;
    background: none;
    cursor: pointer;
    margin: -12px;
    padding: 12px;
    color: inherit;
}

.Settings a, .Settings .link {
    color: var(--accent-color);
    font-weight: 600;
}

.lightbox {
    /* needs transparency support */
    background-color: rgba(0, 0, 0, 0.75);
    display: grid;
    grid-template:
        "content close"   auto
        "content details" 1fr /
        1fr      auto;
    color: var(--background-color-primary);
    padding: 4px;
}

@media (max-aspect-ratio: 1/1) {
    .lightbox {
        grid-template:
            "close"   auto
            "content" 1fr
            "details" auto /
            1fr;
    }

    .lightbox .details {
        width: 100% !important;
    }
}

.lightbox .picture {
    grid-area: content;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    align-self: center;
    justify-self: center;
}

.lightbox .loading {
    grid-area: content;
    align-self: center;
    justify-self: center;
    display: flex;
}

.lightbox .loading > :not(:first-child) {
    margin-left: 8px;
}

.lightbox .close {
    display: block;
    grid-area: close;
    justify-self: end;
    background-image: url('icons/dismiss.svg?primary=fixed-white');
    background-position: center;
    background-size: 16px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    padding: 12px;
}

.lightbox .details {
    grid-area: details;
    padding: 12px;
    font-size: 1.5rem;
    width: 200px;
}

.menu {
    border-radius: 8px;
    /* needs transparency support */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    padding: 4px;
    background-color: var(--background-color-primary);
    list-style: none;
    margin: 0;
}

.menu li{
    margin-bottom: 10px;
}

.menu .menu-item {
    color: var(--text-color);
}

.menu button {
    border-radius: 4px;
    border: none;
    background-color: transparent;
    text-align: left;
    padding: 8px 32px 8px 8px;
    font-size: 1.5rem;
    height: 24px;
    cursor: pointer;
}

.menu .destructive button {
    color: var(--error-color);
}

.menu .quick-reactions {
    display: flex;
    padding: 8px 32px 8px 8px;
}

.menu .quick-reactions button {
    padding: 2px 4px;
    text-align: center;
}

.InviteView_body {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex: 1;
    overflow: auto;
}

.InviteView_invite {
    display: flex;
    width: 100%;
    max-width: 400px;
    flex-direction: column;
    padding: 0 24px;
}

.InviteView_roomProfile {
    display: grid;
    gap: 4px;
    grid-template:
        "avatar name" auto
        "avatar description" 1fr /
        72px 1fr;
    align-self: center;
    margin-bottom: 24px;
}

.InviteView_roomProfile h3 {
    grid-area: name;
    margin: 0;
}

.InviteView_roomDescription {
    grid-area: description;
    font-size: 1.2rem;
    margin: 0;
    color: var(--light-text-color);
}

.InviteView_roomAvatar {
    grid-area: avatar;
}

.InviteView_dmAvatar {
    align-self: center;
}

.InviteView_inviter {
    text-align: center;
    margin: 24px 0px;
}

.InviteView_inviter .avatar {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

.InviteView_buttonRow {
    margin: 10px auto;
    max-width: 200px;
    width: 100%;
}

.InviteView_buttonRow button {
    display: block;
    width: 100%;
}

.RoomArchivedView {
    padding: 12px;
    background-color: var(--background-color-secondary);
}

.RoomArchivedView h3 {
    margin: 0;
}

.UnknownRoomView {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    box-sizing: border-box;
}

.UnknownRoomView h2 {
    word-break: break-all;
    word-break: break-word;
}

.UnknownRoomView button {
    max-width: 200px;
    width: 100%;
}

.LoadingView {
    height: 100%;
    width: 100%;
}

.LoadingView .spinner {
    margin-right: 5px;
}

/* Right Panel */

.RightPanelView {
    background: var(--background-color-secondary);
}

.RoomDetailsView {
    padding: 16px;
    padding-top: 0;
}

.RoomDetailsView_id, .MemberDetailsView_id {
    color: var(--right-panel-text-color);
    font-size: 12px;
}

.RoomDetailsView_rows{
    margin-top: 36px;
    width: 100%;
}

.RoomDetailsView_name h2, .MemberDetailsView_name h2 {
    margin-bottom: 4px;
    font-size: 1.8rem;
}

.RoomDetailsView_row {
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 15px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
}

button.RoomDetailsView_row {
    cursor: pointer;
}

button.RoomDetailsView_row::after {
    content: url("./icons/chevron-small.svg?primary=icon-color");
    margin-left: 12px;
}

.RoomDetailsView_row:not(button)::after{
    content: " ";
    width: 19px;
}

.RoomDetailsView_label::before {
    padding-right: 16px;
    height: 24px;
    width: 20px;
}

.RoomDetailsView_label {
    width: 200px;
}

.RoomDetailsView_value {
    color: var(--right-panel-text-color);
    flex: 1;
}

.MemberCount::before {
    content: url("./icons/room-members.svg?primary=icon-color");
}

.EncryptionStatus::before {
    content: url("./icons/encryption-status.svg?primary=icon-color");
}

/* Encryption icon next to avatar */

.EncryptionIconView {
    width: 52px;
    height: 52px;
    border-radius: 100%;
    background: var(--right-panel-text-color);
    border: 3px solid var(--background-color-secondary);
    margin-left: -16px;
}

.EncryptionIconView_encrypted, .EncryptionIconView_unencrypted {
    height: 24px;
    width: 24px;
}

.EncryptionIconView_encrypted {
    content: url("./icons/e2ee-normal.svg?primary=fixed-white");
}

.EncryptionIconView_unencrypted {
    content: url("./icons/e2ee-disabled.svg?primary=fixed-white");
}

.RightPanelView_buttons .button-utility {
    width: 24px;
    height: 24px;
}

.RightPanelView_buttons .close {
    background-image: url("./icons/clear.svg?primary=icon-color");
}

.RightPanelView_buttons .back {
    background-image: url("./icons/chevron-thin-left.svg?primary=icon-color");
}

/* Memberlist Panel */

.MemberListView {
    padding-left: 16px;
    padding-right: 16px;
    margin: 0;
}

.MemberTileView {
    margin-bottom: 8px;
    list-style: none;
}

.MemberTileView a {
    text-decoration: none;
}

.MemberTileView .avatar {
    margin-right: 8px;
}

.MemberTileView_name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
}

/* Member details panel */
.MemberDetailsView_section {
    box-sizing: border-box;
    padding: 16px;
    width: 100%;
}

.MemberDetailsView_label {
    font-size: 12px;
    font-weight: 600;
    color: var(--right-panel-text-color);
    text-transform: uppercase;
}

.MemberDetailsView_value, .MemberDetailsView_options {
    margin-left: 8px;
    margin-top: 5px;
    font-size: 12px;
}

.MemberDetailsView_options {
    display: inline-flex;
    flex-direction: column;
}

.MemberDetailsView_options a, .MemberDetailsView_options button {
    color: var(--accent-color);
    text-decoration: none;
    margin: 0 0 3px 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.LazyListParent {
    overflow-y: auto;
}

.LogoutScreen {
  height: 100vh;
}

.LogoutScreen .content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.LogoutScreen .status {
    display: flex;
    gap: 12px;
}

.CreateRoomView, .RoomBeingCreated_error {
    max-width: 400px;
}

.RoomBeingCreated_error {
    margin-top: 48px;
}

.centered-column {
    padding: 0 12px;
    align-self: center;
    width: 100%;
    box-sizing: border-box;
}

.CreateRoomView_selectAvatar {
    border: none;
    background: none;
    cursor: pointer;
}

.CreateRoomView_selectAvatarPlaceholder {
    width: 64px;
    height: 64px;
    border-radius: 100%;
    background-color: var(--icon-background);
    background-image: url('icons/plus.svg?primary=icon-color');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 36px;
}