mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-15 20:51:44 +03:00
312 lines
5.8 KiB
SCSS
312 lines
5.8 KiB
SCSS
/*
|
|
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_AppsDrawer {
|
|
margin: 5px;
|
|
}
|
|
|
|
.mx_AppsDrawer_hidden {
|
|
display: none;
|
|
}
|
|
|
|
.mx_AppsContainer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mx_AddWidget_button {
|
|
order: 2;
|
|
cursor: pointer;
|
|
padding-right: 12px;
|
|
padding: 0;
|
|
margin: 5px auto 5px auto;
|
|
color: $accent-color;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.mx_AddWidget_button_full_width {
|
|
max-width: 960px;
|
|
}
|
|
|
|
.mx_SetAppURLDialog_input {
|
|
border-radius: 3px;
|
|
border: 1px solid $input-border-color;
|
|
padding: 9px;
|
|
color: $primary-hairline-color;
|
|
background-color: $primary-bg-color;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.mx_AppTile {
|
|
max-width: 960px;
|
|
width: 50%;
|
|
margin-right: 5px;
|
|
border: 1px solid $primary-hairline-color;
|
|
border-radius: 2px;
|
|
background-color: $dialog-background-bg-color;
|
|
}
|
|
|
|
.mx_AppTile:last-child {
|
|
margin-right: 1px;
|
|
}
|
|
|
|
.mx_AppTileFullWidth {
|
|
max-width: 960px;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 1px solid $primary-hairline-color;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.mx_AppTile_mini {
|
|
max-width: 960px;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.mx_AppTile_persistedWrapper {
|
|
height: 280px;
|
|
}
|
|
|
|
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
|
|
height: 114px;
|
|
}
|
|
|
|
.mx_AppTileMenuBar {
|
|
margin: 0;
|
|
padding: 2px 10px;
|
|
border-bottom: 1px solid $primary-hairline-color;
|
|
font-size: 10px;
|
|
background-color: $widget-menu-bar-bg-color;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mx_AppTileMenuBarTitle {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mx_AppTileMenuBarWidgets {
|
|
float: right;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.mx_AppTileMenuBarWidget {
|
|
cursor: pointer;
|
|
width: 10px;
|
|
height: 10px;
|
|
padding: 1px;
|
|
transition-duration: 500ms;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.mx_AppTileMenuBarWidgetDelete {
|
|
filter: none;
|
|
}
|
|
|
|
.mx_AppTileMenuBarWidget:hover {
|
|
border: 1px solid $primary-fg-color;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.mx_AppTileBody{
|
|
height: 280px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mx_AppTileBody_mini {
|
|
height: 112px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mx_AppTileBody_mini iframe {
|
|
border: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.mx_AppTileBody iframe {
|
|
width: 100%;
|
|
height: 280px;
|
|
overflow: hidden;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
|
|
.mx_AppTileMenuBarWidgetPadding {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.mx_AppIconTile {
|
|
background-color: $lightbox-bg-color;
|
|
border: 1px solid rgba(0, 0, 0, 0);
|
|
width: 200px;
|
|
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
|
transition: 0.3s;
|
|
border-radius: 3px;
|
|
margin: 5px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.mx_AppIconTile.mx_AppIconTile_active {
|
|
color: $accent-color;
|
|
border-color: $accent-color;
|
|
}
|
|
|
|
.mx_AppIconTile:hover {
|
|
border: 1px solid $accent-color;
|
|
box-shadow: 0 0 10px 5px rgba(200,200,200,0.5);
|
|
}
|
|
|
|
.mx_AppIconTile_content {
|
|
padding: 2px 16px;
|
|
height: 60px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mx_AppIconTile_content h4 {
|
|
margin-top: 5px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.mx_AppIconTile_content p {
|
|
margin-top: 0;
|
|
margin-bottom: 5px;
|
|
font-size: smaller;
|
|
}
|
|
|
|
.mx_AppIconTile_image {
|
|
padding: 10px;
|
|
width: 75%;
|
|
max-width:100px;
|
|
max-height:100px;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.mx_AppIconTile_imageContainer {
|
|
text-align: center;
|
|
width: 100%;
|
|
background-color: white;
|
|
border-radius: 3px 3px 0 0;
|
|
height: 155px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
form.mx_Custom_Widget_Form div {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.mx_AppPermissionWarning {
|
|
text-align: center;
|
|
background-color: $primary-bg-color;
|
|
display: flex;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.mx_AppPermissionWarningImage {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.mx_AppPermissionWarningImage img {
|
|
width: 100px;
|
|
}
|
|
|
|
.mx_AppPermissionWarningText {
|
|
max-width: 400px;
|
|
margin: 10px auto 10px auto;
|
|
color: $primary-fg-color;
|
|
}
|
|
|
|
.mx_AppPermissionWarningTextLabel {
|
|
font-weight: bold;
|
|
display: block;
|
|
}
|
|
|
|
.mx_AppPermissionWarningTextURL {
|
|
color: $accent-color;
|
|
}
|
|
|
|
.mx_AppPermissionButton {
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
color: $warning-color;
|
|
background-color: $primary-bg-color;
|
|
}
|
|
|
|
.mx_AppPermissionButton:hover {
|
|
background-color: $primary-fg-color;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mx_AppLoading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
position: relative;
|
|
height: 280px;
|
|
}
|
|
|
|
.mx_AppLoading .mx_Spinner {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.mx_AppLoading_spinner_fadeIn {
|
|
animation-fill-mode: backwards;
|
|
animation-duration: 200ms;
|
|
animation-delay: 500ms;
|
|
animation-name: mx_AppLoading_spinner_fadeIn_animation;
|
|
}
|
|
|
|
@keyframes mx_AppLoading_spinner_fadeIn_animation {
|
|
from { opacity: 0 }
|
|
to { opacity: 1 }
|
|
}
|
|
|
|
|
|
.mx_AppLoading iframe {
|
|
display: none;
|
|
}
|