793 lines
16 KiB
CSS
793 lines
16 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('inter.css');
|
|
|
|
:root {
|
|
font-size: 10px;
|
|
}
|
|
|
|
|
|
.hydrogen {
|
|
font-family: 'Inter', sans-serif, 'emoji';
|
|
background-color: white;
|
|
color: #2e2f32;
|
|
font-size: 1.4rem;
|
|
--usercolor1: #368BD6;
|
|
--usercolor2: #AC3BA8;
|
|
--usercolor3: #03B381;
|
|
--usercolor4: #E64F7A;
|
|
--usercolor5: #FF812D;
|
|
--usercolor6: #2DC2C5;
|
|
--usercolor7: #5C56F5;
|
|
--usercolor8: #74D12C;
|
|
}
|
|
|
|
.avatar {
|
|
border-radius: 100%;
|
|
background: #3D88FA;
|
|
color: 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');
|
|
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 {
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.form-row input {
|
|
padding: 12px;
|
|
border: 1px solid rgba(141, 151, 165, 0.15);
|
|
border-radius: 8px;
|
|
margin-top: 5px;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.form-row label, .form-row input {
|
|
display: block;
|
|
}
|
|
|
|
a.button-action {
|
|
text-decoration: none;
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
|
|
.button-action.secondary {
|
|
color: #03B381;
|
|
}
|
|
|
|
.button-action.primary {
|
|
background-color: #03B381;
|
|
border-radius: 8px;
|
|
color: white;
|
|
}
|
|
|
|
.button-action.primary.destructive {
|
|
background-color: #FF4B55;
|
|
}
|
|
|
|
.button-action.secondary.destructive {
|
|
color: #FF4B55;
|
|
}
|
|
|
|
.button-action {
|
|
border: none;
|
|
padding: 10px;
|
|
background: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.button-utility {
|
|
cursor: pointer;
|
|
width: 32px;
|
|
height: 32px;
|
|
background-position: center;
|
|
background-color: #e1e3e6;
|
|
background-repeat: no-repeat;
|
|
border: none;
|
|
border-radius: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.button-utility.grid {
|
|
background-image: url('icons/enable-grid.svg');
|
|
}
|
|
|
|
.button-utility.settings {
|
|
background-image: url('icons/settings.svg');
|
|
}
|
|
|
|
.button-utility.grid.on {
|
|
background-image: url('icons/disable-grid.svg');
|
|
}
|
|
|
|
.FilterField {
|
|
background-image: url('icons/search.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: 8px center;
|
|
background-color: #e1e3e6;
|
|
/* 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 #e1e3e6 solid;
|
|
background-color: white;
|
|
}
|
|
.FilterField:focus-within button {
|
|
border-color: white;
|
|
}
|
|
|
|
/*.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%;
|
|
}
|
|
|
|
.FilterField button {
|
|
width: 30px; /* 32 - 1 (top) - 1 (bottom) */
|
|
height: 30px; /* 32 - 1 (top) - 1 (bottom) */
|
|
background-position: center;
|
|
background-color: #e1e3e6;
|
|
background-repeat: no-repeat;
|
|
background-image: url('icons/clear.svg');
|
|
border: 7px solid transparent; /* 8 - 1 */
|
|
border-radius: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.PreSessionScreen {
|
|
padding: 30px;
|
|
}
|
|
|
|
.PreSessionScreen h1 {
|
|
font-size: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
@media screen and (min-width: 600px) {
|
|
.PreSessionScreen {
|
|
box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.1);
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
.PreSessionScreen .logo {
|
|
height: 48px;
|
|
min-width: 48px;
|
|
}
|
|
|
|
.LeftPanel {
|
|
background: rgba(245, 245, 245, 0.90);
|
|
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 rgba(245, 245, 245, 0.90);
|
|
}
|
|
|
|
.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: rgba(141, 151, 165, 0.1);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.RoomList li > a > * {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.RoomList .description {
|
|
align-items: baseline;
|
|
}
|
|
|
|
.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: #61708b;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
line-height: 1.4rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.RoomList .badge.highlighted {
|
|
background-color: #ff4b55;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
.SessionStatusView {
|
|
padding: 4px;
|
|
min-height: 22px;
|
|
background-color: #03B381;
|
|
color: white;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
.SessionStatusView button.link {
|
|
color: currentcolor;
|
|
}
|
|
|
|
.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');
|
|
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 rgba(141, 151, 165, 0.15);
|
|
border-radius: 8px;
|
|
background-image: url('icons/chevron-right.svg');
|
|
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: #FF4B55;
|
|
}
|
|
|
|
.RoomGridView > div.container {
|
|
border-right: 1px solid rgba(245, 245, 245, 0.90);
|
|
border-bottom: 1px solid rgba(245, 245, 245, 0.90);
|
|
}
|
|
|
|
.RoomGridView > .focused > .room-placeholder .unfocused {
|
|
display: none;
|
|
}
|
|
|
|
.RoomGridView > :not(.focused) > .room-placeholder .focused {
|
|
display: none;
|
|
}
|
|
|
|
.room-placeholder .unfocused {
|
|
color: #8D99A5;
|
|
}
|
|
|
|
|
|
.RoomGridView > div.focus-ring {
|
|
border: 2px solid rgba(134, 193, 165, 1);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.middle-header {
|
|
box-sizing: border-box;
|
|
height: 58px; /* 12 + 36 + 12 to align with filter field + margin */
|
|
background: white;
|
|
padding: 0 16px;
|
|
border-bottom: 1px solid rgba(245, 245, 245, 0.90);
|
|
}
|
|
|
|
.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');
|
|
background-position-x: 10px;
|
|
}
|
|
|
|
.RoomHeader .topic {
|
|
font-size: 14rem;
|
|
}
|
|
|
|
.RoomView_error {
|
|
color: red;
|
|
}
|
|
|
|
.MessageComposer {
|
|
border-top: 1px solid rgba(245, 245, 245, 0.90);
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.MessageComposer > :not(:first-child) {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.MessageComposer > input {
|
|
padding: 0 16px;
|
|
border: none;
|
|
border-radius: 24px;
|
|
background: #F6F6F6;
|
|
height: 48px;
|
|
font-size: 14px;
|
|
font-family: "Inter", sans-serif;
|
|
}
|
|
|
|
.MessageComposer > button.send {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: block;
|
|
border-radius: 100%;
|
|
border: none;
|
|
text-indent: 200%;
|
|
overflow: hidden;
|
|
|
|
background-color: #03B381;
|
|
background-image: url('icons/send.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.MessageComposer > 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');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.MessageComposer > button.send:disabled {
|
|
background-color: #E3E8F0;
|
|
}
|
|
|
|
ul.Timeline > li:not(.continuation) {
|
|
margin-top: 7px;
|
|
}
|
|
|
|
ul.Timeline > li.continuation .profile {
|
|
display: none;
|
|
}
|
|
|
|
ul.Timeline > li.continuation time {
|
|
display: none;
|
|
}
|
|
|
|
ul.Timeline > li.messageStatus .message-container > p {
|
|
font-style: italic;
|
|
color: #777;
|
|
}
|
|
|
|
.message-container {
|
|
padding: 1px 10px 0px 10px;
|
|
margin: 5px 10px 0 10px;
|
|
/* so the .picture can grow horizontally and its spacer can grow vertically */
|
|
width: 100%;
|
|
}
|
|
|
|
.message-container .profile {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.message-container .avatar {
|
|
--avatar-size: 25px;
|
|
}
|
|
|
|
.TextMessageView {
|
|
width: 100%;
|
|
}
|
|
|
|
.TextMessageView.continuation .message-container {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.message-container .sender {
|
|
margin: 6px 0;
|
|
margin-left: 6px;
|
|
font-weight: bold;
|
|
line-height: 1.7rem;
|
|
}
|
|
|
|
.hydrogen .sender.usercolor1 { color: var(--usercolor1); }
|
|
.hydrogen .sender.usercolor2 { color: var(--usercolor2); }
|
|
.hydrogen .sender.usercolor3 { color: var(--usercolor3); }
|
|
.hydrogen .sender.usercolor4 { color: var(--usercolor4); }
|
|
.hydrogen .sender.usercolor5 { color: var(--usercolor5); }
|
|
.hydrogen .sender.usercolor6 { color: var(--usercolor6); }
|
|
.hydrogen .sender.usercolor7 { color: var(--usercolor7); }
|
|
.hydrogen .sender.usercolor8 { color: var(--usercolor8); }
|
|
|
|
.message-container time {
|
|
padding: 2px 0 0px 10px;
|
|
font-size: 0.8em;
|
|
line-height: normal;
|
|
color: #aaa;
|
|
}
|
|
|
|
|
|
.message-container .picture {
|
|
display: grid;
|
|
text-decoration: none;
|
|
margin-top: 4px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* .spacer grows with an inline padding-top to the size of the image,
|
|
so the timeline doesn't jump when the image loads */
|
|
.message-container .picture > * {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
}
|
|
|
|
.message-container .picture > img {
|
|
width: 100%;
|
|
height: auto;
|
|
/* for IE11 to still scale even though the spacer is too tall */
|
|
align-self: start;
|
|
border-radius: 4px;
|
|
}
|
|
/* stretch the image (to the spacer) on platforms
|
|
where we can trust the spacer to always have the correct height,
|
|
otherwise the image starts with height 0 and with loading=lazy
|
|
only loads when the top comes into view*/
|
|
.hydrogen:not(.legacy) .message-container .picture > img {
|
|
align-self: stretch;
|
|
}
|
|
|
|
.message-container .picture > time {
|
|
align-self: end;
|
|
justify-self: end;
|
|
color: #2e2f32;
|
|
display: block;
|
|
padding: 2px;
|
|
margin: 4px;
|
|
background-color: rgba(255, 255, 255, 0.75);
|
|
border-radius: 4px;
|
|
}
|
|
.message-container .picture > .spacer {
|
|
/* TODO: can we implement this with a pseudo element? or perhaps they are not grid items? */
|
|
width: 100%;
|
|
/* don't stretch height as it is a spacer, just in case it doesn't match with image height */
|
|
align-self: start;
|
|
}
|
|
|
|
.TextMessageView.pending .message-container {
|
|
color: #ccc;
|
|
}
|
|
|
|
.TextMessageView.unverified .message-container {
|
|
color: #ff4b55;
|
|
}
|
|
|
|
.message-container p {
|
|
margin: 3px 0;
|
|
line-height: 2.2rem;
|
|
}
|
|
|
|
.AnnouncementView {
|
|
margin: 5px 0;
|
|
padding: 5px 10%;
|
|
}
|
|
|
|
.AnnouncementView > div {
|
|
margin: 0 auto;
|
|
padding: 10px 20px;
|
|
background-color: rgba(245, 245, 245, 0.90);
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.GapView > :not(:first-child) {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.Settings .row.code .content {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.Settings .row .content button {
|
|
display: inline-block;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.Settings .row {
|
|
margin: 4px 0px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.Settings .row .label {
|
|
flex: 0 0 200px;
|
|
}
|
|
|
|
.error {
|
|
color: red;
|
|
font-weight: 600;
|
|
}
|
|
|
|
button.link {
|
|
font-size: 1em;
|
|
border: none;
|
|
text-decoration: underline;
|
|
background: none;
|
|
cursor: pointer;
|
|
margin: -12px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.Settings a, .Settings .link {
|
|
color: #03B381;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.lightbox {
|
|
background-color: rgba(0,0,0,0.75);
|
|
display: grid;
|
|
grid-template:
|
|
"content close" auto
|
|
"content details" 1fr /
|
|
1fr auto;
|
|
color: white;
|
|
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');
|
|
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;
|
|
box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
|
|
padding: 4px;
|
|
background-color: white;
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.menu button {
|
|
border-radius: 4px;
|
|
display: block;
|
|
border: none;
|
|
width: 100%;
|
|
background-color: transparent;
|
|
text-align: left;
|
|
padding: 8px 32px 8px 8px;
|
|
}
|
|
|
|
.menu button:focus {
|
|
background-color: #03B381;
|
|
color: white;
|
|
}
|
|
|
|
.menu button:hover {
|
|
background-color: #03B381;
|
|
color: white;
|
|
}
|