mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
507 lines
10 KiB
CSS
507 lines
10 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.
|
|
*/
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 100;
|
|
font-display: swap;
|
|
src: url("inter/Inter-Thin.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-Thin-1593561269.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 100;
|
|
font-display: swap;
|
|
src: url("inter/Inter-ThinItalic.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-ThinItalic-1888295987.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 200;
|
|
font-display: swap;
|
|
src: url("inter/Inter-ExtraLight.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-ExtraLight-3277895962.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 200;
|
|
font-display: swap;
|
|
src: url("inter/Inter-ExtraLightItalic.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-ExtraLightItalic-3022762143.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
font-display: swap;
|
|
src: url("inter/Inter-Light.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-Light-3990448997.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
font-display: swap;
|
|
src: url("inter/Inter-LightItalic.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-LightItalic-412813693.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("inter/Inter-Regular.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-Regular-2779214592.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("inter/Inter-Italic.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-Italic-4024721388.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url("inter/Inter-Medium.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-Medium-2285329551.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url("inter/Inter-MediumItalic.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-MediumItalic-1722521156.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
src: url("inter/Inter-SemiBold.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-SemiBold-1906312195.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
src: url("inter/Inter-SemiBoldItalic.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-SemiBoldItalic-3778207334.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("inter/Inter-Bold.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-Bold-4187626158.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("inter/Inter-BoldItalic.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-BoldItalic-641187949.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
font-display: swap;
|
|
src: url("inter/Inter-ExtraBold.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-ExtraBold-3888913940.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 800;
|
|
font-display: swap;
|
|
src: url("inter/Inter-ExtraBoldItalic.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-ExtraBoldItalic-2880676406.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
font-display: swap;
|
|
src: url("inter/Inter-Black.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-Black-276207522.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 900;
|
|
font-display: swap;
|
|
src: url("inter/Inter-BlackItalic.woff2?v=3.13") format("woff2"),
|
|
url("inter/Inter-BlackItalic-3159247813.woff") format("woff");
|
|
}
|
|
|
|
.hydrogen {
|
|
font-family: 'Inter', sans-serif, 'emoji';
|
|
font-size: 15px;
|
|
background-color: white;
|
|
color: #2e2f32;
|
|
}
|
|
|
|
.avatar {
|
|
border-radius: 100%;
|
|
background: #3D88FA;
|
|
color: white;
|
|
}
|
|
|
|
.hydrogen .avatar.usercolor1 { background-color: #368BD6; }
|
|
|
|
.hydrogen .avatar.usercolor2 { background-color: #AC3BA8; }
|
|
|
|
.hydrogen .avatar.usercolor3 { background-color: #03B381; }
|
|
|
|
.hydrogen .avatar.usercolor4 { background-color: #E64F7A; }
|
|
|
|
.hydrogen .avatar.usercolor5 { background-color: #FF812D; }
|
|
|
|
.hydrogen .avatar.usercolor6 { background-color: #2DC2C5; }
|
|
|
|
.hydrogen .avatar.usercolor7 { background-color: #5C56F5; }
|
|
|
|
.hydrogen .avatar.usercolor8 { background-color: #74D12C; }
|
|
|
|
.logo {
|
|
height: 48px;
|
|
min-width: 48px;
|
|
background-image: url('element-logo-2959259787.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 {
|
|
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;
|
|
}
|
|
|
|
button.styled.secondary {
|
|
color: #03B381;
|
|
}
|
|
|
|
button.styled.primary {
|
|
background-color: #03B381;
|
|
border-radius: 8px;
|
|
color: white;
|
|
}
|
|
|
|
button.styled.primary.destructive {
|
|
background-color: #FF4B55;
|
|
}
|
|
|
|
button.styled.secondary.destructive {
|
|
color: #FF4B55;
|
|
}
|
|
|
|
button.styled {
|
|
border: none;
|
|
padding: 10px;
|
|
background: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.LeftPanel ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.LeftPanel li {
|
|
margin: 5px 10px;
|
|
padding: 5px;
|
|
/* vertical align */
|
|
align-items: center;
|
|
}
|
|
|
|
.LeftPanel li.active {
|
|
background: rgba(141, 151, 165, 0.1);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.LeftPanel li > * {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.LeftPanel .description .last-message {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
.SessionStatusView {
|
|
padding: 5px;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
background-color: #3D88FA;
|
|
color: white;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.room-shown .SessionStatusView {
|
|
top: 72px;
|
|
}
|
|
|
|
.RoomPlaceholderView {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.SessionPickerView li {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.SessionPickerView .session-info {
|
|
padding: 12px;
|
|
border: 1px solid rgba(141, 151, 165, 0.15);
|
|
border-radius: 8px;
|
|
background-image: url('icons/chevron-right-787082136.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;
|
|
}
|
|
|
|
.RoomHeader {
|
|
background: rgba(245, 245, 245, 0.90);
|
|
padding: 10px;
|
|
}
|
|
|
|
.RoomHeader button {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 1.5em;
|
|
padding: 0;
|
|
background: white;
|
|
border: none;
|
|
font-weight: bolder;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.back::before {
|
|
content: "☰";
|
|
}
|
|
|
|
.more::before {
|
|
content: "⋮";
|
|
}
|
|
|
|
.RoomHeader .topic {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.RoomView_error {
|
|
color: red;
|
|
}
|
|
|
|
.MessageComposer {
|
|
border-top: 1px solid rgba(245, 245, 245, 0.90);
|
|
}
|
|
|
|
.MessageComposer > input {
|
|
padding: 0.8em;
|
|
border: none;
|
|
}
|
|
|
|
.MessageComposer > button.send {
|
|
margin: 8px;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: block;
|
|
border-radius: 100%;
|
|
border: none;
|
|
text-indent: 200%;
|
|
overflow: hidden;
|
|
|
|
background-color: #03B381;
|
|
background-image: url('icons/send-4065347741.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.MessageComposer > button.send:disabled {
|
|
background-color: #E3E8F0;
|
|
}
|
|
|
|
.message-container {
|
|
padding: 2px 10px;
|
|
margin: 5px 10px 0 10px;
|
|
}
|
|
|
|
.TextMessageView.continuation .message-container {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.message-container .sender {
|
|
margin: 5px 0;
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hydrogen .sender.usercolor1 { color: #368BD6; }
|
|
|
|
.hydrogen .sender.usercolor2 { color: #AC3BA8; }
|
|
|
|
.hydrogen .sender.usercolor3 { color: #03B381; }
|
|
|
|
.hydrogen .sender.usercolor4 { color: #E64F7A; }
|
|
|
|
.hydrogen .sender.usercolor5 { color: #FF812D; }
|
|
|
|
.hydrogen .sender.usercolor6 { color: #2DC2C5; }
|
|
|
|
.hydrogen .sender.usercolor7 { color: #5C56F5; }
|
|
|
|
.hydrogen .sender.usercolor8 { color: #74D12C; }
|
|
|
|
.message-container time {
|
|
padding: 2px 0 0px 10px;
|
|
font-size: 0.8em;
|
|
color: #aaa;
|
|
}
|
|
|
|
.TextMessageView.pending .message-container {
|
|
color: #ccc;
|
|
}
|
|
|
|
.message-container p {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.AnnouncementView {
|
|
margin: 5px 0;
|
|
padding: 5px 10%;
|
|
}
|
|
|
|
.AnnouncementView > div {
|
|
margin: 0 auto;
|
|
padding: 10px 20px;
|
|
background-color: rgba(245, 245, 245, 0.90);
|
|
font-size: 0.9em;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
}
|