mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
Merge pull request #5375 from vector-im/luke/groups-my-groups-placeholder
CSS to improve MyGroups in general, and add placeholder
This commit is contained in:
commit
14b5006645
@ -24,14 +24,38 @@ limitations under the License.
|
|||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MyGroups_joinCreateBox {
|
.mx_MyGroups_header {
|
||||||
display: table;
|
/* Keep mid-point of create button aligned with icon in page header */
|
||||||
margin-bottom: 30px;
|
margin-left: 2px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MyGroups_createBox, .mx_MyGroups_joinBox {
|
.mx_MyGroups_headerCard {
|
||||||
display: table-cell;
|
flex: 1 0 50%;
|
||||||
width: 40%;
|
margin-bottom: 30px;
|
||||||
|
min-width: 400px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
|
||||||
|
margin-right: 13px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MyGroups_headerCard_button object {
|
||||||
|
/* Otherwise the SVG object absorbs clicks and the button doesn't work */
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MyGroups_headerCard_header {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MyGroups_headerCard_content {
|
||||||
|
padding-right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Until the button is wired up */
|
/* Until the button is wired up */
|
||||||
@ -39,23 +63,16 @@ limitations under the License.
|
|||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MyGroups_joinCreateHeader {
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_MyGroups_joinCreateButton {
|
|
||||||
float: left;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_MyGroups_joinCreateButton object {
|
|
||||||
/* Otherwise the SVG object absorbs clicks and the button doesn't work */
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_MyGroups_content {
|
.mx_MyGroups_content {
|
||||||
clear: left;
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MyGroups_placeholder {
|
||||||
|
background-color: $group-my-groups-placeholder-bg;
|
||||||
|
color: $group-my-groups-placeholder-fg;
|
||||||
|
line-height: 400px;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MyGroups_joinedGroups {
|
.mx_MyGroups_joinedGroups {
|
||||||
@ -66,7 +83,8 @@ limitations under the License.
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mx_MyGroups_joinedGroups .mx_GroupTile {
|
.mx_MyGroups_joinedGroups .mx_GroupTile {
|
||||||
width: 300px;
|
min-width: 300px;
|
||||||
|
flex: 1 0 25%;
|
||||||
height: 75px;
|
height: 75px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
@ -22,7 +22,10 @@ $warning-color: #ff0064;
|
|||||||
$mention-user-pill-bg-color: #ff0064;
|
$mention-user-pill-bg-color: #ff0064;
|
||||||
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
|
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
// groups
|
||||||
$group-alert-color: #774f7e;
|
$group-alert-color: #774f7e;
|
||||||
|
$group-my-groups-placeholder-bg: #f7f7f7;
|
||||||
|
$group-my-groups-placeholder-fg: #888;
|
||||||
|
|
||||||
$preview-bar-bg-color: #f7f7f7;
|
$preview-bar-bg-color: #f7f7f7;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user