2018-04-12 01:23:35 +02:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2019-07-23 19:06:37 +02:00
|
|
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
2018-04-12 01:23:35 +02:00
|
|
|
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
2019-02-12 16:55:37 +01:00
|
|
|
/*
|
|
|
|
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;
|
|
|
|
|
2018-04-12 01:23:35 +02:00
|
|
|
.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;
|
2020-03-31 16:26:23 +02:00
|
|
|
font-size: $font-12px;
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.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;
|
2020-03-31 16:26:23 +02:00
|
|
|
font-size: $font-15px;
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.mx_AppTile {
|
|
|
|
max-width: 960px;
|
|
|
|
width: 50%;
|
|
|
|
margin-right: 5px;
|
2019-02-01 11:02:02 +01:00
|
|
|
border: 5px solid $widget-menu-bar-bg-color;
|
|
|
|
border-radius: 4px;
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.mx_AppTile:last-child {
|
|
|
|
margin-right: 1px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mx_AppTileFullWidth {
|
|
|
|
max-width: 960px;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
2019-02-01 11:02:02 +01:00
|
|
|
border: 5px solid $widget-menu-bar-bg-color;
|
|
|
|
border-radius: 4px;
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
2018-07-23 16:58:07 +02:00
|
|
|
.mx_AppTile_mini {
|
2018-07-23 16:08:17 +02:00
|
|
|
max-width: 960px;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mx_AppTile_persistedWrapper {
|
2019-02-12 16:55:37 +01:00
|
|
|
height: $AppsDrawerBodyHeight;
|
2018-07-23 16:08:17 +02:00
|
|
|
}
|
|
|
|
|
2020-04-21 00:19:39 +02:00
|
|
|
.mx_AppTile_persistedWrapper > div {
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
2018-07-23 16:58:07 +02:00
|
|
|
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
|
2018-07-23 16:08:17 +02:00
|
|
|
height: 114px;
|
|
|
|
}
|
|
|
|
|
2018-04-12 01:23:35 +02:00
|
|
|
.mx_AppTileMenuBar {
|
|
|
|
margin: 0;
|
2020-03-31 16:26:23 +02:00
|
|
|
font-size: $font-12px;
|
2018-04-12 01:23:35 +02:00
|
|
|
background-color: $widget-menu-bar-bg-color;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
2019-02-01 11:02:02 +01:00
|
|
|
.mx_AppTileMenuBar_expanded {
|
|
|
|
padding-bottom: 5px;
|
|
|
|
}
|
|
|
|
|
2018-04-12 01:23:35 +02:00
|
|
|
.mx_AppTileMenuBarTitle {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
|
2019-02-01 11:02:02 +01:00
|
|
|
.mx_AppTileMenuBarTitle > :last-child {
|
|
|
|
margin-left: 9px;
|
|
|
|
}
|
|
|
|
|
2018-04-12 01:23:35 +02:00
|
|
|
.mx_AppTileMenuBarWidgets {
|
|
|
|
float: right;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
2019-02-01 11:02:02 +01:00
|
|
|
.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 {
|
2019-02-27 11:42:05 +01:00
|
|
|
mask-image: url('$(res)/img/feather-customised/widget/minimise.svg');
|
2019-02-01 11:02:02 +01:00
|
|
|
background-color: $accent-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_maximise {
|
2019-02-27 11:42:05 +01:00
|
|
|
mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
|
2019-02-01 11:02:02 +01:00
|
|
|
background-color: $accent-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
|
2019-02-27 11:42:05 +01:00
|
|
|
mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
|
2019-02-01 11:02:02 +01:00
|
|
|
}
|
|
|
|
|
2019-11-21 03:17:42 +01:00
|
|
|
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
|
|
|
|
mask-image: url('$(res)/img/icon_context.svg');
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.mx_AppTileMenuBarWidgetDelete {
|
|
|
|
filter: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mx_AppTileMenuBarWidget:hover {
|
|
|
|
border: 1px solid $primary-fg-color;
|
|
|
|
border-radius: 2px;
|
|
|
|
}
|
|
|
|
|
2019-07-09 19:15:10 +02:00
|
|
|
.mx_AppTileBody {
|
2019-02-12 16:55:37 +01:00
|
|
|
height: $AppsDrawerBodyHeight;
|
2018-04-12 01:23:35 +02:00
|
|
|
width: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
2018-07-12 19:43:49 +02:00
|
|
|
.mx_AppTileBody_mini {
|
2018-07-23 16:08:17 +02:00
|
|
|
height: 112px;
|
2018-07-12 19:43:49 +02:00
|
|
|
width: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
2018-07-23 16:08:17 +02:00
|
|
|
.mx_AppTileBody_mini iframe {
|
|
|
|
border: none;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
2018-04-12 01:23:35 +02:00
|
|
|
.mx_AppTileBody iframe {
|
|
|
|
width: 100%;
|
2019-02-12 16:55:37 +01:00
|
|
|
height: $AppsDrawerBodyHeight;
|
2018-04-12 01:23:35 +02:00
|
|
|
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;
|
2019-07-09 19:15:10 +02:00
|
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
2018-04-12 01:23:35 +02:00
|
|
|
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;
|
2019-07-09 19:15:10 +02:00
|
|
|
box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5);
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.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;
|
2019-07-09 19:15:10 +02:00
|
|
|
max-width: 100px;
|
|
|
|
max-height: 100px;
|
2018-04-12 01:23:35 +02:00
|
|
|
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;
|
2019-11-15 22:25:53 +01:00
|
|
|
background-color: $widget-menu-bar-bg-color;
|
2018-04-12 01:23:35 +02:00
|
|
|
display: flex;
|
|
|
|
height: 100%;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
2020-03-31 16:26:23 +02:00
|
|
|
font-size: $font-16px;
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
2019-11-15 22:25:53 +01:00
|
|
|
.mx_AppPermissionWarning_row {
|
|
|
|
margin-bottom: 12px;
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
2019-11-15 22:25:53 +01:00
|
|
|
.mx_AppPermissionWarning_smallText {
|
2020-03-31 16:26:23 +02:00
|
|
|
font-size: $font-12px;
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
2019-11-15 22:25:53 +01:00
|
|
|
.mx_AppPermissionWarning_bolder {
|
|
|
|
font-weight: 600;
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
2019-11-15 22:25:53 +01:00
|
|
|
.mx_AppPermissionWarning h4 {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
2019-11-15 22:25:53 +01:00
|
|
|
.mx_AppPermissionWarning_helpIcon {
|
|
|
|
margin-top: 1px;
|
|
|
|
margin-right: 2px;
|
|
|
|
width: 10px;
|
|
|
|
height: 10px;
|
2019-07-23 19:06:37 +02:00
|
|
|
display: inline-block;
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
2019-11-15 22:25:53 +01:00
|
|
|
.mx_AppPermissionWarning_helpIcon::before {
|
|
|
|
display: inline-block;
|
|
|
|
background-color: $accent-color;
|
|
|
|
mask-repeat: no-repeat;
|
|
|
|
mask-size: 12px;
|
|
|
|
width: 12px;
|
|
|
|
height: 12px;
|
|
|
|
mask-position: center;
|
|
|
|
content: '';
|
|
|
|
vertical-align: middle;
|
|
|
|
mask-image: url('$(res)/img/feather-customised/help-circle.svg');
|
|
|
|
}
|
|
|
|
|
|
|
|
.mx_AppPermissionWarning_tooltip {
|
|
|
|
@mixin mx_Tooltip_dark;
|
|
|
|
|
|
|
|
ul {
|
|
|
|
list-style-position: inside;
|
|
|
|
padding-left: 2px;
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.mx_AppLoading {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
font-weight: bold;
|
|
|
|
position: relative;
|
2019-02-12 16:55:37 +01:00
|
|
|
height: $AppsDrawerBodyHeight;
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.mx_AppLoading .mx_Spinner {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
2018-05-09 17:41:45 +02:00
|
|
|
.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 {
|
2019-07-09 19:15:10 +02:00
|
|
|
from { opacity: 0; }
|
|
|
|
to { opacity: 1; }
|
2018-05-09 17:41:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2018-04-12 01:23:35 +02:00
|
|
|
.mx_AppLoading iframe {
|
2019-07-09 19:15:10 +02:00
|
|
|
display: none;
|
2018-04-12 01:23:35 +02:00
|
|
|
}
|