one big commit, sorry

changing looks of input & buttons changing background color of right panels moving invite button around change margins and paddings in memberlist
matrix-org · Oct 24, 2018 · 8c62ddd · 8c62ddd
1 parent 8a5c46e
commit 8c62ddd
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 177 deletions.
diff --git a/res/css/_common.scss b/res/css/_common.scss
@@ -60,7 +60,6 @@ input[type=text].error, input[type=password].error {
 }
 
 input[type=text]:focus, input[type=password]:focus, textarea:focus {
-    border: 1px solid $accent-color;
     outline: none;
     box-shadow: none;
 }

diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss
@@ -16,11 +16,8 @@ limitations under the License.
 
 .mx_FilePanel {
     order: 2;
-
     flex: 1 1 0;
-
-    width: 100%;
-
+    background-color: $secondary-accent-color;
     overflow-y: auto;
 }
 

diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
@@ -16,11 +16,8 @@ limitations under the License.
 
 .mx_NotificationPanel {
     order: 2;
-
     flex: 1 1 0;
-
-    width: 100%;
-
+    background-color: $secondary-accent-color;
     overflow-y: auto;
 }
 
@@ -97,4 +94,4 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile_content {
     margin-right: 0px;
-}
+}
diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
@@ -27,17 +27,15 @@ limitations under the License.
     order: 1;
 
     border-bottom: 1px solid $primary-hairline-color;
-    margin-right: 20px;
 
     flex: 0 0 52px;
 }
 
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_headerButtonGroup {
-    margin-top: 6px;
+    height: 100%;
     display: flex;
-    width: 100%;
     background-color: $primary-bg-color;
     padding: 0 9px;
     align-items: center;
@@ -77,7 +75,8 @@ limitations under the License.
 .mx_RightPanel_collapsebutton {
     flex: 1;
     text-align: right;
-    margin-top: 20px;
+    height: 16px;
+    border: none;
 }
 
 .mx_RightPanel .mx_MemberList,
@@ -92,46 +91,3 @@ limitations under the License.
     order: 2;
     margin: auto;
 }
-
-.mx_RightPanel_footer {
-    order: 3;
-
-    border-top: 1px solid $primary-hairline-color;
-    margin-right: 20px;
-
-    flex: 0 0 60px;
-}
-
-.mx_RightPanel_footer .mx_RightPanel_invite {
-    font-size: 14px;
-	color: $primary-fg-color;
-    padding-top: 13px;
-    padding-left: 5px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-}
-
-.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
-    display: none;
-}
-
-.mx_RightPanel_invite .mx_RightPanel_icon object {
-    pointer-events: none;
-}
-
-.mx_RightPanel_invite .mx_RightPanel_message {
-    padding-left: 10px;
-    line-height: 18px;
-}
-
-.mx_MatrixChat_useCompactLayout {
-    .mx_RightPanel_footer {
-        flex: 0 0 50px;
-    }
-
-    .mx_RightPanel_footer .mx_RightPanel_invite {
-        line-height: 25px;
-        padding-top: 8px;
-    }
-}
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
@@ -96,7 +96,6 @@ limitations under the License.
 
 .mx_RoomView_body .mx_RoomView_messagePanelSpinner {
     order: 2;
-    margin: auto;
 }
 
 .mx_RoomView_body .mx_RoomView_statusArea {
@@ -113,8 +112,6 @@ limitations under the License.
 }
 
 .mx_RoomView_messageListWrapper {
-    margin: auto;
-
     min-height: 100%;
 
     display: flex;

diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
@@ -17,15 +17,9 @@ limitations under the License.
 .mx_MemberList,
 .mx_GroupMemberList,
 .mx_GroupRoomList {
-    height: 100%;
-
-    margin-top: 12px;
-    margin-right: 20px;
-
+    background-color: $secondary-accent-color;
     flex: 1;
-
     display: flex;
-
     flex-direction: column;
 }
 
@@ -46,54 +40,47 @@ limitations under the License.
     flex: 1 1 0px;
 }
 
+.mx_MemberList form,
+.mx_GroupMemberList form,
+.mx_GroupRoomList form {
+    margin: 8px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.mx_MemberList form > *:not(:first-child),
+.mx_GroupMemberList form > *:not(:first-child),
+.mx_GroupRoomList form > *:not(:first-child) {
+    margin-left: 5px;
+}
+
 .mx_MemberList_query,
 .mx_GroupMemberList_query,
 .mx_GroupRoomList_query {
+    flex: 1 1 0;
+    box-sizing: border-box;
     font-family: $font-family;
-    border-radius: 3px;
-    border: 1px solid $input-border-color;
+    border-radius: 4px;
     padding: 9px;
-    color: $primary-fg-color;
-    background-color: $primary-bg-color;
-    margin-left: 3px;
+    color: $input-darker-fg-color;
+    background-color: $input-darker-bg-color;
     font-size: 14px;
-    margin-bottom: 8px;
-    width: 189px;
+    font-weight: 600;
+    border: none;
 }
 
+.mx_MemberList_query::-webkit-input-placeholder,
+.mx_GroupMemberList_query::-webkit-input-placeholder,
+.mx_GroupRoomList_query::-webkit-input-placeholder,
 .mx_MemberList_query::-moz-placeholder,
 .mx_GroupMemberList_query::-moz-placeholder,
 .mx_GroupRoomList_query::-moz-placeholder {
-    color: $primary-fg-color;
-    opacity: 0.5;
-    font-size: 14px;
-}
-
-.mx_MemberList_query::-webkit-input-placeholder,
-.mx_GroupMemberList_query::-webkit-input-placeholder,
-.mx_GroupRoomList_query::-webkit-input-placeholder {
-    color: $primary-fg-color;
+    color: $input-darker-fg-color;
     opacity: 0.5;
     font-size: 14px;
 }
 
-.mx_MemberList_joined {
-    order: 2;
-    flex: 1 0 0;
-
-    overflow-y: auto;
-}
-
-/*
-.mx_MemberList_invited {
-    order: 3;
-    flex: 0 0 100px;
-    overflow-y: auto;
-}
-*/
-
-.mx_GroupMemberList_invited h2,
-.mx_MemberList_invited h2 {
+.mx_MemberList h2, .mx_GroupMemberList h2 {
     text-transform: uppercase;
     color: $h3-color;
     font-weight: 600;
@@ -104,13 +91,37 @@ limitations under the License.
     margin-bottom: 4px;
 }
 
-/* we have to have display: table in order for the horizontal wrapping to work */
 .mx_MemberList_wrapper {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
+    padding: 10px;
 }
 
 .mx_MemberList_outerWrapper {
-    height: 0px;
+
+}
+
+.mx_MemberList_inviteIcon object {
+    pointer-events: none;
+}
+
+.mx_MemberList_inviteIcon {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+
+
+.mx_MemberList_invite {
+    flex: 0 0 auto;
+    position: relative;
+    background-color: $button-bg-color;
+    color: $button-fg-color;
+    border-radius: 4px;
+    padding: 8px;
+    font-weight: 600;
 }
+
+/* move text to left */
+.mx_MemberList_invite > :last-child {
+    margin-left: 25px;
+}
+
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
@@ -208,6 +208,10 @@ limitations under the License.
     pointer-events: none;
 }
 
+.mx_RoomHeader_showPanel {
+    height: 16px;
+}
+
 .mx_RoomHeader_voipButton {
     display: table-cell;
 }

diff --git a/res/img/icon-invite-people.svg b/res/img/icon-invite-people.svg
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
@@ -62,6 +62,10 @@ $primary-hairline-color: #474747;
 // used for the border of input text fields
 $input-border-color: #3a3a3a;
 
+$input-darker-bg-color: #c1c9d6;
+$input-darker-fg-color: #9fa9ba;
+$button-bg-color: #7ac9a1;
+$button-fg-color: white;
 // apart from login forms, which have stronger border
 $strong-input-border-color: #656565;
 

diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
@@ -67,6 +67,11 @@ $primary-hairline-color: #e5e5e5;
 
 // used for the border of input text fields
 $input-border-color: #f0f0f0;
+$input-darker-bg-color: rgba(193, 201, 214, 0.29);
+$input-darker-fg-color: #9fa9ba;
+
+$button-bg-color: #7ac9a1;
+$button-fg-color: white;
 
 // apart from login forms, which have stronger border
 $strong-input-border-color: #c7c7c7;
@@ -179,11 +184,11 @@ $progressbar-color: #000;
     /* align images in buttons (eg spinners) */
     vertical-align: middle;
     border: 0px;
-    border-radius: 36px;
+    border-radius: 4px;
     font-family: $font-family;
     font-size: 14px;
-    color: $accent-fg-color;
-    background-color: $accent-color;
+    color: $button-fg-color;
+    background-color: $button-bg-color;
     width: auto;
     padding: 7px;
     padding-left: 1.5em;
@@ -197,7 +202,7 @@ $progressbar-color: #000;
 }
 
 @define-mixin mx_DialogButton_danger {
-    background-color: $warning-color;
+    background-color: $accent-color;
 }
 
 @define-mixin mx_DialogButton_small {

diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss
@@ -67,6 +67,10 @@ $primary-hairline-color: #e5e5e5;
 // used for the border of input text fields
 $input-border-color: #f0f0f0;
 
+$input-darker-bg-color: #c1c9d6;
+$input-darker-fg-color: #9fa9ba;
+$button-bg-color: #7ac9a1;
+$button-fg-color: white;
 // apart from login forms, which have stronger border
 $strong-input-border-color: #c7c7c7;