implement style
This commit is contained in:
parent
1d0c402093
commit
c1ff5f2fba
2 changed files with 82 additions and 28 deletions
|
@ -37,6 +37,12 @@ limitations under the License.
|
||||||
.mx_AccessibleButton_kind_primary {
|
.mx_AccessibleButton_kind_primary {
|
||||||
color: $button-primary-fg-color;
|
color: $button-primary-fg-color;
|
||||||
background-color: $button-primary-bg-color;
|
background-color: $button-primary-bg-color;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_AccessibleButton_kind_secondary {
|
||||||
|
color: $accent-color;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
|
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
|
||||||
|
|
|
@ -16,46 +16,94 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_RoomPreviewBar {
|
.mx_RoomPreviewBar {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
margin: 15px;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid $panel-divider-color;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
&.mx_RoomPreviewBar_spinnerTitle {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_Spinner {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
margin: 10px 10px 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_RoomPreviewBar_dark {
|
||||||
|
background-color: $tagpanel-bg-color;
|
||||||
|
color: $accent-fg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_RoomPreviewBar_actions {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_RoomPreviewBar_message {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_RoomPreviewBar_panel {
|
||||||
|
padding: 8px 8px 8px 20px;
|
||||||
|
border-top: 1px solid $panel-divider-color;
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
.mx_RoomPreviewBar_actions {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 3px 8px;
|
||||||
|
|
||||||
|
&>* {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_RoomPreviewBar_message {
|
||||||
|
flex: 1 0 0;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
|
||||||
|
&>* {
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomPreviewBar_dialog {
|
.mx_RoomPreviewBar_dialog {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
box-sizing: content;
|
||||||
|
width: 400px;
|
||||||
|
border-radius: 4px;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
.mx_RoomPreviewBar_join_text {
|
.mx_RoomPreviewBar_message {
|
||||||
color: $warning-color;
|
flex-direction: column;
|
||||||
}
|
|
||||||
|
|
||||||
.mx_RoomPreviewBar_preview_text {
|
&>* {
|
||||||
margin-top: 25px;
|
margin: 10px;
|
||||||
color: $settings-grey-fg-color;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomPreviewBar_join_text a {
|
.mx_RoomPreviewBar_actions {
|
||||||
text-decoration: underline;
|
flex-direction: column-reverse;
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_RoomPreviewBar_warning {
|
&>* {
|
||||||
display: flex;
|
margin-top: 12px;
|
||||||
align-items: center;
|
}
|
||||||
padding: 8px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.mx_RoomPreviewBar_warningIcon {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_RoomPreviewBar_spinnerIntro {
|
|
||||||
margin-top: 50px;
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue