1214 lines
24 KiB
CSS
1214 lines
24 KiB
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(--background-color-primary);
|
|
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);
|
|
background : #efefef;
|
|
height : 0px;
|
|
font-weight : bold;
|
|
transition : 0.25s all ease-out;
|
|
padding-right : 20px;
|
|
padding-left : 20px;
|
|
}
|
|
|
|
.RoomView_error div{
|
|
overflow : hidden;
|
|
height: 100%;
|
|
width: 100%;
|
|
position : relative;
|
|
display : flex;
|
|
align-items : center;
|
|
}
|
|
|
|
.RoomView_error:not(:empty) {
|
|
height : auto;
|
|
padding-top : 20px;
|
|
padding-bottom : 20px;
|
|
}
|
|
|
|
.RoomView_error p {
|
|
position : relative;
|
|
display : block;
|
|
width : 100%;
|
|
height : auto;
|
|
margin : 0;
|
|
}
|
|
|
|
.RoomView_error button {
|
|
width : 40px;
|
|
padding-top : 20px;
|
|
padding-bottom : 20px;
|
|
background : none;
|
|
border : none;
|
|
position : relative;
|
|
border-radius : 5px;
|
|
transition: 0.1s all ease-out;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.RoomView_error button:hover {
|
|
background : #cfcfcf;
|
|
}
|
|
|
|
.RoomView_error button:before {
|
|
content:"\274c";
|
|
position : absolute;
|
|
top : 15px;
|
|
left: 9px;
|
|
width : 20px;
|
|
height : 10px;
|
|
font-size : 10px;
|
|
align-self : middle;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.DisabledComposerView {
|
|
padding: 12px;
|
|
background-color: var(--background-color-secondary);
|
|
}
|
|
|
|
.DisabledComposerView 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;
|
|
}
|