mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-05 05:38:41 +03:00
369 lines
7.7 KiB
SCSS
369 lines
7.7 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.
|
|
*/
|
|
|
|
/*
|
|
the tile title bar is 5 (top border) + 12 (title, buttons) + 5 (bottom padding) px = 22px
|
|
the body is assumed to be 300px (assumed by at least the sticker pickerm, perhaps elsewhere),
|
|
so the body height would be 300px - 22px (room for title bar) = 278px
|
|
BUT! the sticker picker also assumes it's a little less high than that because the iframe
|
|
for the sticker picker doesn't have any padding or margin on it's bottom.
|
|
so subtracking another 5px, which brings us at 273px.
|
|
*/
|
|
$AppsDrawerBodyHeight: 273px;
|
|
|
|
.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: 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: 5px solid $widget-menu-bar-bg-color;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.mx_AppTile:last-child {
|
|
margin-right: 1px;
|
|
}
|
|
|
|
.mx_AppTileFullWidth {
|
|
max-width: 960px;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 5px solid $widget-menu-bar-bg-color;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.mx_AppTile_mini {
|
|
max-width: 960px;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.mx_AppTile_persistedWrapper {
|
|
height: $AppsDrawerBodyHeight;
|
|
}
|
|
|
|
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
|
|
height: 114px;
|
|
}
|
|
|
|
.mx_AppTileMenuBar {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
background-color: $widget-menu-bar-bg-color;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mx_AppTileMenuBar_expanded {
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.mx_AppTileMenuBarTitle {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mx_AppTileMenuBarTitle > :last-child {
|
|
margin-left: 9px;
|
|
}
|
|
|
|
.mx_AppTileMenuBarWidgets {
|
|
float: right;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.mx_AppTileMenuBar_iconButton {
|
|
width: 12px;
|
|
height: 12px;
|
|
mask-repeat: no-repeat;
|
|
mask-position: 0 center;
|
|
mask-size: auto 12px;
|
|
background-color: $topleftmenu-color;
|
|
margin: 0 3px;
|
|
}
|
|
|
|
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_minimise {
|
|
mask-image: url('$(res)/img/feather-customised/widget/minimise.svg');
|
|
background-color: $accent-color;
|
|
}
|
|
|
|
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_maximise {
|
|
mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
|
|
background-color: $accent-color;
|
|
}
|
|
|
|
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_reload {
|
|
mask-image: url('$(res)/img/feather-customised/widget/refresh.svg');
|
|
mask-size: 100%;
|
|
}
|
|
|
|
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
|
|
mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
|
|
}
|
|
|
|
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_snapshot {
|
|
mask-image: url('$(res)/img/feather-customised/widget/camera.svg');
|
|
}
|
|
|
|
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_edit {
|
|
mask-image: url('$(res)/img/feather-customised/widget/edit.svg');
|
|
}
|
|
|
|
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_delete {
|
|
mask-image: url('$(res)/img/feather-customised/widget/bin.svg');
|
|
background-color: $warning-color;
|
|
}
|
|
|
|
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_cancel {
|
|
mask-image: url('$(res)/img/feather-customised/widget/x-circle.svg');
|
|
}
|
|
|
|
/* delete ? */
|
|
.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: $AppsDrawerBodyHeight;
|
|
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: $AppsDrawerBodyHeight;
|
|
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;
|
|
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 {
|
|
border: none;
|
|
padding: 5px 20px;
|
|
border-radius: 5px;
|
|
background-color: $button-bg-color;
|
|
color: $button-fg-color;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mx_AppLoading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
position: relative;
|
|
height: $AppsDrawerBodyHeight;
|
|
}
|
|
|
|
.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;
|
|
}
|