mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-22 19:14:52 +01:00
470 lines
12 KiB
CSS
470 lines
12 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.
|
||
|
*/
|
||
|
/** from https://gist.github.com/mfornos/9991865 */
|
||
|
@font-face {
|
||
|
font-family: 'emoji';
|
||
|
src: local('Apple Color Emoji'),
|
||
|
local('Segoe UI Emoji'),
|
||
|
local('Segoe UI Symbol'),
|
||
|
local('Noto Color Emoji'),
|
||
|
local('Android Emoji'),
|
||
|
local('EmojiSymbols'),
|
||
|
local('Symbola');
|
||
|
|
||
|
/* Emoji unicode blocks */
|
||
|
unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
|
||
|
}
|
||
|
/*
|
||
|
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.
|
||
|
*/
|
||
|
html {
|
||
|
height: 100%;
|
||
|
}
|
||
|
@media screen and (min-width: 600px) {
|
||
|
.PreSessionScreen {
|
||
|
width: 600px;
|
||
|
box-sizing: border-box;
|
||
|
margin: 0 auto;
|
||
|
margin-top: 50px;
|
||
|
}
|
||
|
}
|
||
|
.SessionView {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
height: 100vh;
|
||
|
}
|
||
|
.SessionView > .main {
|
||
|
flex: 1 1;
|
||
|
display: flex;
|
||
|
min-height: 0;
|
||
|
min-width: 0;
|
||
|
width: 100vw;
|
||
|
}
|
||
|
/* mobile layout */
|
||
|
@media screen and (max-width: 800px) {
|
||
|
.RoomHeader button.back { display: block; }
|
||
|
div.RoomView, div.RoomPlaceholderView { display: none; }
|
||
|
div.LeftPanel {flex-grow: 1;}
|
||
|
div.room-shown div.RoomView { display: flex; }
|
||
|
div.room-shown div.LeftPanel { display: none; }
|
||
|
div.right-shown div.TimelinePanel { display: none; }
|
||
|
}
|
||
|
.LeftPanel {
|
||
|
flex: 0 0 300px;
|
||
|
min-width: 0;
|
||
|
}
|
||
|
.RoomPlaceholderView, .RoomView {
|
||
|
flex: 1 0;
|
||
|
min-width: 0;
|
||
|
}
|
||
|
.RoomView {
|
||
|
min-width: 0;
|
||
|
display: flex;
|
||
|
}
|
||
|
.TimelinePanel {
|
||
|
flex: 3 1;
|
||
|
min-height: 0;
|
||
|
min-width: 0;
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
height: 100%;
|
||
|
}
|
||
|
.TimelinePanel ul {
|
||
|
flex: 1 0;
|
||
|
}
|
||
|
.RoomHeader {
|
||
|
display: flex;
|
||
|
}
|
||
|
/*
|
||
|
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.
|
||
|
*/
|
||
|
/** contains styles for everything before the session view, like the session picker, login, load view, ... */
|
||
|
.SessionPickerView {
|
||
|
padding: 0.4em;
|
||
|
}
|
||
|
.SessionPickerView ul {
|
||
|
list-style: none;
|
||
|
padding: 0;
|
||
|
}
|
||
|
.SessionPickerView li {
|
||
|
margin: 0.4em 0;
|
||
|
}
|
||
|
.SessionPickerView .session-info {
|
||
|
cursor: pointer;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
gap: 10px;
|
||
|
}
|
||
|
.SessionPickerView li .user-id {
|
||
|
flex: 1 1;
|
||
|
}
|
||
|
.SessionPickerView li .error {
|
||
|
margin: 0 20px;
|
||
|
}
|
||
|
.LoginView {
|
||
|
padding: 0.4em;
|
||
|
}
|
||
|
.SessionLoadView {
|
||
|
display: flex;
|
||
|
}
|
||
|
.SessionLoadView p {
|
||
|
flex: 1 1;
|
||
|
margin: 0 0 0 10px;
|
||
|
}
|
||
|
/*
|
||
|
Copyright 2020 Bruno Windels <bruno@windels.cloud>
|
||
|
|
||
|
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.
|
||
|
*/
|
||
|
.LeftPanel {
|
||
|
overflow-y: auto;
|
||
|
overscroll-behavior: contain;
|
||
|
}
|
||
|
.LeftPanel ul {
|
||
|
list-style: none;
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
}
|
||
|
.LeftPanel li {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
}
|
||
|
.LeftPanel div.description {
|
||
|
margin: 0;
|
||
|
flex: 1 1;
|
||
|
min-width: 0;
|
||
|
}
|
||
|
.LeftPanel .description > * {
|
||
|
overflow: hidden;
|
||
|
white-space: nowrap;
|
||
|
text-overflow: ellipsis;
|
||
|
}
|
||
|
/*
|
||
|
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.
|
||
|
*/
|
||
|
.RoomPlaceholderView {
|
||
|
display: flex;
|
||
|
flex-direction: row;
|
||
|
}
|
||
|
.RoomHeader {
|
||
|
align-items: center;
|
||
|
}
|
||
|
.RoomHeader > *:last-child {
|
||
|
margin-right: 0;
|
||
|
}
|
||
|
.RoomHeader > * {
|
||
|
margin-right: 10px;
|
||
|
flex: 0 0 auto;
|
||
|
}
|
||
|
.RoomHeader button {
|
||
|
display: block;
|
||
|
}
|
||
|
.RoomHeader .back {
|
||
|
display: none;
|
||
|
}
|
||
|
.RoomHeader .room-description {
|
||
|
flex: 1 1;
|
||
|
min-width: 0;
|
||
|
}
|
||
|
.RoomHeader .topic {
|
||
|
overflow: hidden;
|
||
|
white-space: nowrap;
|
||
|
text-overflow: ellipsis;
|
||
|
}
|
||
|
.RoomHeader .description {
|
||
|
flex: 1 1 auto;
|
||
|
min-width: 0;
|
||
|
}
|
||
|
.RoomHeader h2 {
|
||
|
overflow: hidden;
|
||
|
white-space: nowrap;
|
||
|
text-overflow: ellipsis;
|
||
|
margin: 0;
|
||
|
}
|
||
|
.MessageComposer {
|
||
|
display: flex;
|
||
|
}
|
||
|
.MessageComposer > input {
|
||
|
display: block;
|
||
|
flex: 1 1;
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
/*
|
||
|
Copyright 2020 Bruno Windels <bruno@windels.cloud>
|
||
|
|
||
|
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.
|
||
|
*/
|
||
|
.TimelinePanel ul {
|
||
|
overflow-y: auto;
|
||
|
overscroll-behavior: contain;
|
||
|
list-style: none;
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
}
|
||
|
.TimelinePanel li {
|
||
|
}
|
||
|
.message-container {
|
||
|
flex: 0 1 auto;
|
||
|
/* first try break-all, then break-word, which isn't supported everywhere */
|
||
|
word-break: break-all;
|
||
|
word-break: break-word;
|
||
|
}
|
||
|
.message-container .sender {
|
||
|
margin: 5px 0;
|
||
|
font-size: 0.9em;
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
.message-container a {
|
||
|
display: block;
|
||
|
position: relative;
|
||
|
max-width: 100%;
|
||
|
/* width and padding-top set inline to maintain aspect ratio,
|
||
|
replace with css aspect-ratio once supported */
|
||
|
}
|
||
|
.message-container img {
|
||
|
display: block;
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
.TextMessageView {
|
||
|
display: flex;
|
||
|
min-width: 0;
|
||
|
}
|
||
|
.AnnouncementView {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
}
|
||
|
/*
|
||
|
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.
|
||
|
*/
|
||
|
.avatar {
|
||
|
width: 32px;
|
||
|
height: 32px;
|
||
|
overflow: hidden;
|
||
|
flex-shrink: 0;
|
||
|
-moz-user-select: none;
|
||
|
-webkit-user-select: none;
|
||
|
-ms-user-select: none;
|
||
|
user-select: none;
|
||
|
line-height: 32px;
|
||
|
font-size: calc(32px * 0.6);
|
||
|
text-align: center;
|
||
|
letter-spacing: calc(32px * -0.05);
|
||
|
speak: none;
|
||
|
}
|
||
|
.avatar img {
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
/*
|
||
|
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.
|
||
|
*/
|
||
|
@keyframes spinner {
|
||
|
0% {
|
||
|
transform: rotate(0);
|
||
|
stroke-dasharray: 0 0 10 90;
|
||
|
}
|
||
|
45% {
|
||
|
stroke-dasharray: 0 0 90 10;
|
||
|
}
|
||
|
75% {
|
||
|
stroke-dasharray: 0 50 50 0;
|
||
|
}
|
||
|
100% {
|
||
|
transform: rotate(360deg);
|
||
|
stroke-dasharray: 10 90 0 0;
|
||
|
}
|
||
|
}
|
||
|
.spinner circle {
|
||
|
transform-origin: 50% 50%;
|
||
|
animation-name: spinner;
|
||
|
animation-duration: 2s;
|
||
|
animation-iteration-count: infinite;
|
||
|
animation-timing-function: linear;
|
||
|
/**
|
||
|
* TODO
|
||
|
* see if with IE11 we can just set a static stroke state and make it rotate?
|
||
|
*/
|
||
|
stroke-dasharray: 0 0 85 85;
|
||
|
|
||
|
fill: none;
|
||
|
stroke: currentcolor;
|
||
|
stroke-width: 12;
|
||
|
stroke-linecap: butt;
|
||
|
}
|
||
|
.spinner {
|
||
|
width: 20px;
|
||
|
height: 20px;
|
||
|
}
|
||
|
/*
|
||
|
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.
|
||
|
*/
|
||
|
.form input {
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
/*
|
||
|
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.
|
||
|
*/
|
||
|
.SessionStatusView {
|
||
|
display: flex;
|
||
|
}
|
||
|
.SessionStatusView p {
|
||
|
margin: 0 10px;
|
||
|
word-break: break-all;
|
||
|
word-break: break-word;
|
||
|
}
|
||
|
.SessionStatusView button {
|
||
|
border: none;
|
||
|
background: none;
|
||
|
color: currentcolor;
|
||
|
text-decoration: underline;
|
||
|
}
|
||
|
/* only if the body contains the whole app (e.g. we're not embedded in a page), make some changes */
|
||
|
body.hydrogen {
|
||
|
/* make sure to disable rubber-banding and pull to refresh in a PWA if we'd end up having a scrollbar */
|
||
|
overscroll-behavior: none;
|
||
|
/* disable rubberband scrolling on document in IE11 */
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
.hydrogen {
|
||
|
margin: 0;
|
||
|
}
|
||
|
.hiddenWithLayout {
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
.hidden {
|
||
|
display: none !important;
|
||
|
}
|