element-web-Github/res/css/structures/_MatrixChat.pcss
Germain f784a085fd
New right panel visual language (#11664)
* New right panel visual language

* Upgrade Compound

* Align old room header with right panel

* Rigth panel look and feel

* Fix linting and e2e tests

* Update snapshot

* Add test

* Lint

* Remove screenshot local script

* Update snapshots and UI based on feedback

* fix i18n key

* Update right panel visuals

* Fix tests

* lintfixes

* fix tests

* fix tests

* Add tests for search icon

* Fix invite dialog spec
2023-10-20 13:30:37 +00:00

98 lines
2.1 KiB
Plaintext

/*
Copyright 2015, 2016 OpenMarket Ltd
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.
*/
.mx_MatrixChat_splash {
position: relative;
height: 100%;
}
.mx_MatrixChat_splashButtons {
text-align: center;
width: 100%;
position: absolute;
bottom: 30px;
}
.mx_MatrixChat_wrapper {
display: flex;
width: 100%;
height: 100%;
}
.mx_MatrixToolbar {
order: 1;
height: 40px;
}
.mx_MatrixChat {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex: 1;
min-height: 0;
}
.mx_MatrixChat_syncError {
color: $accent-fg-color;
background-color: #df2a8b; /* Only used here */
border-radius: 5px;
display: table;
padding: 30px;
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
}
/* not the left panel, and not the resize handle, so the roomview and friends */
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_outerWrapper) {
background-color: $background;
flex: 1 1 0;
min-width: 0;
/* To fix https://github.com/vector-im/element-web/issues/3298 where Safari
needed height 100% all the way down to the HomePage. Height does not
have to be auto, empirically.
*/
height: 100%;
}
.mx_MatrixChat > .mx_ResizeHandle--horizontal:hover {
position: relative;
&::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 64px; /* to match width of the ones on roomlist */
width: 4px;
border-radius: 4px;
content: " ";
background-color: $primary-content;
opacity: 0.8;
}
}