Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering
This commit is contained in:
Tulir Asokan
commit
dfcf701449
544 changed files with 43286 additions and 15544 deletions
|
|
@ -24,34 +24,69 @@ $MiniAppTileHeight: 200px;
|
|||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.mx_AppsContainer_resizerHandleContainer {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
margin-top: -3px; // move it up so the interactions are slightly more comfortable
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_AppsContainer_resizerHandle {
|
||||
cursor: ns-resize;
|
||||
border-radius: 3px;
|
||||
|
||||
// Override styles from library
|
||||
width: unset !important;
|
||||
height: 4px !important;
|
||||
// Override styles from library, making the whole area the target area
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
|
||||
// This is positioned directly below frame
|
||||
position: absolute;
|
||||
bottom: -8px !important; // override from library
|
||||
bottom: 0 !important; // override from library
|
||||
|
||||
// Together, these make the bar 64px wide
|
||||
// These are also overridden from the library
|
||||
left: calc(50% - 32px) !important;
|
||||
right: calc(50% - 32px) !important;
|
||||
// We then render the pill handle in an ::after to keep it in the handle's
|
||||
// area without being a massive line across the screen
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
|
||||
// The combination of these two should make the pill 4px high
|
||||
top: 6px;
|
||||
bottom: 0;
|
||||
|
||||
// Together, these make the bar 64px wide
|
||||
// These are also overridden from the library
|
||||
left: calc(50% - 32px);
|
||||
right: calc(50% - 32px);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.mx_AppsContainer_resizerHandle {
|
||||
.mx_AppsContainer_resizerHandle::after {
|
||||
opacity: 0.8;
|
||||
background: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_ResizeHandle_horizontal::before {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
|
||||
height: 64px; // to match width of the ones on roomlist
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
content: '';
|
||||
|
||||
background-color: $primary-fg-color;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppsDrawer_hidden {
|
||||
display: none;
|
||||
.mx_AppsContainer_resizer {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_AppsContainer {
|
||||
|
|
@ -60,63 +95,74 @@ $MiniAppTileHeight: 200px;
|
|||
align-items: stretch;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
.mx_AppsDrawer_minimised .mx_AppsContainer {
|
||||
// override the re-resizable inline styles
|
||||
height: inherit !important;
|
||||
min-height: inherit !important;
|
||||
}
|
||||
.mx_AppTile:first-of-type {
|
||||
border-left-width: 8px;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
.mx_AppTile:last-of-type {
|
||||
border-right-width: 8px;
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
.mx_AddWidget_button {
|
||||
order: 2;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: -3px auto 5px 0;
|
||||
color: $accent-color;
|
||||
font-size: $font-12px;
|
||||
}
|
||||
.mx_ResizeHandle_horizontal {
|
||||
position: relative;
|
||||
|
||||
.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: $font-15px;
|
||||
}
|
||||
|
||||
.mx_AppTile {
|
||||
max-width: 960px;
|
||||
width: 50%;
|
||||
border: 5px solid $widget-menu-bar-bg-color;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& + .mx_AppTile {
|
||||
margin-left: 5px;
|
||||
> div {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO this should be 300px but that's too large
|
||||
$MinWidth: 240px;
|
||||
|
||||
.mx_AppsDrawer_2apps .mx_AppTile {
|
||||
width: 50%;
|
||||
|
||||
&:nth-child(3) {
|
||||
flex-grow: 1;
|
||||
width: 0 !important;
|
||||
min-width: $MinWidth !important;
|
||||
}
|
||||
}
|
||||
.mx_AppsDrawer_3apps .mx_AppTile {
|
||||
width: 33%;
|
||||
|
||||
&:nth-child(3) {
|
||||
flex-grow: 1;
|
||||
width: 0 !important;
|
||||
min-width: $MinWidth !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppTile {
|
||||
width: 50%;
|
||||
min-width: $MinWidth;
|
||||
border: 8px solid $widget-menu-bar-bg-color;
|
||||
border-left-width: 5px;
|
||||
border-right-width: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: $widget-menu-bar-bg-color;
|
||||
}
|
||||
|
||||
.mx_AppTileFullWidth {
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
width: 100% !important; // to override the inline style set by the resizer
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 5px solid $widget-menu-bar-bg-color;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $widget-menu-bar-bg-color;
|
||||
}
|
||||
|
||||
.mx_AppTile_mini {
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -125,12 +171,6 @@ $MiniAppTileHeight: 200px;
|
|||
height: $MiniAppTileHeight;
|
||||
}
|
||||
|
||||
.mx_AppTile.mx_AppTile_minimised,
|
||||
.mx_AppTileFullWidth.mx_AppTile_minimised,
|
||||
.mx_AppTile_mini.mx_AppTile_minimised {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.mx_AppTile .mx_AppTile_persistedWrapper,
|
||||
.mx_AppTileFullWidth .mx_AppTile_persistedWrapper,
|
||||
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
|
||||
|
|
@ -150,19 +190,20 @@ $MiniAppTileHeight: 200px;
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_AppTileMenuBar_expanded {
|
||||
padding-bottom: 5px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_AppTileMenuBarTitle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.mx_WidgetAvatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppTileMenuBarTitle > :last-child {
|
||||
|
|
@ -186,37 +227,20 @@ $MiniAppTileHeight: 200px;
|
|||
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_popout {
|
||||
mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
|
||||
}
|
||||
|
||||
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
|
||||
mask-image: url('$(res)/img/icon_context.svg');
|
||||
}
|
||||
|
||||
.mx_AppTileMenuBarWidgetDelete {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.mx_AppTileMenuBarWidget:hover {
|
||||
border: 1px solid $primary-fg-color;
|
||||
border-radius: 2px;
|
||||
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
|
||||
}
|
||||
|
||||
.mx_AppTileBody {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background-color: $widget-body-bg-color;
|
||||
}
|
||||
|
||||
.mx_AppTileBody_mini {
|
||||
|
|
@ -249,75 +273,8 @@ $MiniAppTileHeight: 200px;
|
|||
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: $widget-menu-bar-bg-color;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
|
|
@ -382,6 +339,10 @@ form.mx_Custom_Widget_Form div {
|
|||
font-weight: bold;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
// match bg of border so that the cut corners have the right fill
|
||||
background-color: $widget-body-bg-color !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_AppLoading .mx_Spinner {
|
||||
|
|
@ -409,10 +370,6 @@ form.mx_Custom_Widget_Form div {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.mx_AppsDrawer_minimised .mx_AppsContainer_resizerHandle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Avoid apptile iframes capturing mouse event focus when resizing */
|
||||
.mx_AppsDrawer_resizing iframe {
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -25,17 +25,8 @@ $left-gutter: 64px;
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.mx_EventTile_bubble {
|
||||
background-color: $dark-panel-bg-color;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin: 10px auto;
|
||||
max-width: 75%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mx_EventTile.mx_EventTile_info {
|
||||
padding-top: 0px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
|
|
@ -46,7 +37,7 @@ $left-gutter: 64px;
|
|||
}
|
||||
|
||||
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
|
||||
top: $font-8px;
|
||||
top: $font-6px;
|
||||
left: $left-gutter;
|
||||
}
|
||||
|
||||
|
|
@ -83,7 +74,6 @@ $left-gutter: 64px;
|
|||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
||||
|
|
@ -131,9 +121,10 @@ $left-gutter: 64px;
|
|||
grid-template-columns: 1fr 100px;
|
||||
|
||||
.mx_EventTile_line {
|
||||
margin-right: 0px;
|
||||
margin-right: 0;
|
||||
grid-column: 1 / 3;
|
||||
padding: 0;
|
||||
// override default padding of mx_EventTile_line so that we can be centered
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.mx_EventTile_msgOption {
|
||||
|
|
@ -429,15 +420,15 @@ $left-gutter: 64px;
|
|||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
|
||||
border-left: $e2e-verified-color 4px solid;
|
||||
border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
|
||||
border-left: $e2e-unverified-color 4px solid;
|
||||
border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
|
||||
border-left: $e2e-unknown-color 4px solid;
|
||||
border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
|
||||
|
|
@ -455,8 +446,7 @@ $left-gutter: 64px;
|
|||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
|
||||
left: 3px;
|
||||
width: auto;
|
||||
width: $MessageTimestamp_width_hover;
|
||||
}
|
||||
|
||||
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
|
||||
|
|
@ -501,7 +491,6 @@ $left-gutter: 64px;
|
|||
// https://github.com/vector-im/vector-web/issues/754
|
||||
overflow-x: overlay;
|
||||
overflow-y: visible;
|
||||
max-height: 30vh;
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
@ -510,6 +499,22 @@ $left-gutter: 64px;
|
|||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_lineNumbers {
|
||||
float: left;
|
||||
margin: 0 0.5em 0 -1.5em;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.mx_EventTile_lineNumber {
|
||||
text-align: right;
|
||||
display: block;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.mx_EventTile_collapsedCodeBlock {
|
||||
max-height: 30vh;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_EventTile_body pre,
|
||||
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
|
||||
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
|
||||
|
|
@ -521,21 +526,42 @@ $left-gutter: 64px;
|
|||
}
|
||||
|
||||
// Inserted adjacent to <pre> blocks, (See TextualBody)
|
||||
.mx_EventTile_copyButton {
|
||||
.mx_EventTile_button {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
right: 12px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
mask-image: url($copy-button-url);
|
||||
background-color: $message-action-bar-fg-color;
|
||||
}
|
||||
.mx_EventTile_buttonBottom {
|
||||
top: 31px;
|
||||
}
|
||||
.mx_EventTile_copyButton {
|
||||
mask-image: url($copy-button-url);
|
||||
}
|
||||
.mx_EventTile_collapseButton {
|
||||
mask-size: 75%;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url($collapse-button-url);
|
||||
}
|
||||
.mx_EventTile_expandButton {
|
||||
mask-size: 75%;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url($expand-button-url);
|
||||
}
|
||||
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ $left-gutter: 64px;
|
|||
.mx_GroupLayout {
|
||||
.mx_EventTile {
|
||||
> .mx_SenderProfile {
|
||||
line-height: $font-17px;
|
||||
line-height: $font-20px;
|
||||
padding-left: $left-gutter;
|
||||
}
|
||||
|
||||
|
|
@ -34,11 +34,11 @@ $left-gutter: 64px;
|
|||
|
||||
.mx_MessageTimestamp {
|
||||
position: absolute;
|
||||
width: 46px; /* 8 + 30 (avatar) + 8 */
|
||||
width: $MessageTimestamp_width;
|
||||
}
|
||||
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
padding-top: 3px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 3px;
|
||||
line-height: $font-22px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -186,6 +186,7 @@ $irc-line-height: $font-18px;
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: var(--name-width);
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -206,6 +207,17 @@ $irc-line-height: $font-18px;
|
|||
width: unset;
|
||||
max-width: var(--name-width);
|
||||
}
|
||||
|
||||
.mx_SenderProfile_hover {
|
||||
background: transparent;
|
||||
|
||||
> span {
|
||||
> .mx_SenderProfile_name,
|
||||
> .mx_SenderProfile_aux {
|
||||
min-width: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ProfileResizer {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ limitations under the License.
|
|||
margin-right: 15px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 360px;
|
||||
border-left: 4px solid $preview-widget-bar-color;
|
||||
color: $preview-widget-fg-color;
|
||||
}
|
||||
|
|
@ -55,6 +57,9 @@ limitations under the License.
|
|||
cursor: pointer;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 0px 5px 5px 5px;
|
||||
margin-left: auto;
|
||||
margin-right: 0px;
|
||||
|
||||
img {
|
||||
flex: 0 0 40px;
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberInfo_avatar {
|
||||
background: $tagpanel-bg-color;
|
||||
background: $groupFilterPanel-bg-color;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,11 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_GroupMemberList_query,
|
||||
.mx_GroupRoomList_query {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_MemberList_chevron {
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
|
|
@ -59,10 +64,8 @@ limitations under the License.
|
|||
flex: 1 1 0px;
|
||||
}
|
||||
|
||||
.mx_MemberList_query,
|
||||
.mx_GroupMemberList_query,
|
||||
.mx_GroupRoomList_query {
|
||||
flex: 1 1 0;
|
||||
.mx_MemberList_query {
|
||||
height: 16px;
|
||||
|
||||
// stricter rule to override the one in _common.scss
|
||||
&[type="text"] {
|
||||
|
|
@ -70,10 +73,6 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_MemberList_query {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.mx_MemberList_wrapper {
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -96,17 +95,27 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberList_invite span {
|
||||
background-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
background-size: 20px;
|
||||
padding: 8px 0 8px 25px;
|
||||
padding: 8px 0;
|
||||
display: inline-flex;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background-color: $button-fg-color;
|
||||
mask-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MemberList_inviteCommunity span {
|
||||
background-image: url('$(res)/img/icon-invite-people.svg');
|
||||
.mx_MemberList_inviteCommunity span::before {
|
||||
mask-image: url('$(res)/img/icon-invite-people.svg');
|
||||
}
|
||||
|
||||
.mx_MemberList_addRoomToCommunity span {
|
||||
background-image: url('$(res)/img/icons-room-add.svg');
|
||||
.mx_MemberList_addRoomToCommunity span::before {
|
||||
mask-image: url('$(res)/img/icons-room-add.svg');
|
||||
}
|
||||
|
|
|
|||
67
res/css/views/rooms/_NewRoomIntro.scss
Normal file
67
res/css/views/rooms/_NewRoomIntro.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
.mx_NewRoomIntro {
|
||||
margin: 40px 0 48px 64px;
|
||||
|
||||
.mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) {
|
||||
&::before, &::after {
|
||||
content: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.mx_NewRoomIntro_buttons {
|
||||
margin-top: 28px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
line-height: $font-24px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background-color: $button-fg-color;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NewRoomIntro_inviteButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
}
|
||||
}
|
||||
|
||||
> h2 {
|
||||
margin-top: 24px;
|
||||
font-size: $font-24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
font-size: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -241,6 +241,13 @@ limitations under the License.
|
|||
width: 26px;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_appsButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/apps.svg');
|
||||
}
|
||||
.mx_RoomHeader_appsButton_highlight::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_searchButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,9 @@ limitations under the License.
|
|||
.mx_RoomList_iconExplore::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
|
||||
}
|
||||
.mx_RoomList_iconDialpad::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/dialpad.svg');
|
||||
}
|
||||
|
||||
.mx_RoomList_explorePrompt {
|
||||
margin: 4px 12px 4px;
|
||||
|
|
@ -33,7 +36,6 @@ limitations under the License.
|
|||
|
||||
div:first-child {
|
||||
font-weight: $font-semi-bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
|
|
@ -41,6 +43,9 @@ limitations under the License.
|
|||
position: relative;
|
||||
padding: 0 0 0 24px;
|
||||
font-size: inherit;
|
||||
margin-top: 8px;
|
||||
display: block;
|
||||
text-align: start;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
@ -53,6 +58,13 @@ limitations under the License.
|
|||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&.mx_RoomList_explorePrompt_startChat::before {
|
||||
mask-image: url('$(res)/img/element-icons/feedback.svg');
|
||||
}
|
||||
|
||||
&.mx_RoomList_explorePrompt_explore::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,10 +59,6 @@ limitations under the License.
|
|||
width: calc(100% - 22px);
|
||||
}
|
||||
|
||||
&.mx_RoomSublist_headerContainer_stickyBottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// We don't have a top style because the top is dependent on the room list header's
|
||||
// height, and is therefore calculated in JS.
|
||||
// The class, mx_RoomSublist_headerContainer_stickyTop, is applied though.
|
||||
|
|
@ -201,6 +197,9 @@ limitations under the License.
|
|||
|
||||
.mx_RoomSublist_resizerHandles {
|
||||
flex: 0 0 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Class name comes from the ResizableBox component
|
||||
|
|
@ -211,17 +210,12 @@ limitations under the License.
|
|||
border-radius: 3px;
|
||||
|
||||
// Override styles from library
|
||||
width: unset !important;
|
||||
max-width: 64px;
|
||||
height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
|
||||
|
||||
// This is positioned directly below the 'show more' button.
|
||||
position: absolute;
|
||||
position: relative !important;
|
||||
bottom: 0 !important; // override from library
|
||||
|
||||
// Together, these make the bar 64px wide
|
||||
// These are also overridden from the library
|
||||
left: calc(50% - 32px) !important;
|
||||
right: calc(50% - 32px) !important;
|
||||
}
|
||||
|
||||
&:hover, &.mx_RoomSublist_hasMenuOpen {
|
||||
|
|
@ -387,3 +381,22 @@ limitations under the License.
|
|||
.mx_RoomSublist_addRoomTooltip {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.mx_RoomSublist_skeletonUI {
|
||||
position: relative;
|
||||
margin-left: 4px;
|
||||
height: 288px;
|
||||
|
||||
&::before {
|
||||
background: $roomsublist-skeleton-ui-bg;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
content: '';
|
||||
position: absolute;
|
||||
mask-repeat: repeat-y;
|
||||
mask-size: auto 48px;
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/skeleton-ui.svg');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,13 @@
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
.mx_AppTileMenuBar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
// Sticker picker depends on the fixed height previously used for all tiles
|
||||
height: 273px;
|
||||
height: 283px; // height of the popout minus the AppTile menu bar
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue