hydrogen-web/hydrogen-465980817.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;
}