sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

one big commit, sorry

Browse Source 
changing looks of input & buttons
changing background color of right panels
moving invite button around
change margins and paddings in memberlist
This commit is contained in:
Bruno Windels
2018-10-24 13:50:58 +02:00
parent 8a5c46ead0
commit 8c62dddb32
14 changed files with 141 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/_common.scss
-1
View File
@@ -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;
}
res/css/structures/_FilePanel.scss
+1 -4
View File
@@ -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;
}
res/css/structures/_NotificationPanel.scss
+2 -5
View File
@@ -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;
}
}
res/css/structures/_RightPanel.scss
+3 -47
View File
@@ -27,7 +27,6 @@ limitations under the License.
order: 1;
border-bottom: 1px solid $primary-hairline-color;
margin-right: 20px;
flex: 0 0 52px;
}
@@ -35,9 +34,8 @@ limitations under the License.
/** 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;
}
}
res/css/structures/_RoomView.scss
-3
View File
@@ -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;
res/css/views/rooms/_MemberList.scss
+57 -46
View File
@@ -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;
font-size: 14px;
margin-bottom: 8px;
width: 189px;
}
.mx_MemberList_query::-moz-placeholder,
.mx_GroupMemberList_query::-moz-placeholder,
.mx_GroupRoomList_query::-moz-placeholder {
color: $primary-fg-color;
opacity: 0.5;
color: $input-darker-fg-color;
background-color: $input-darker-bg-color;
font-size: 14px;
font-weight: 600;
border: none;
}
.mx_MemberList_query::-webkit-input-placeholder,
.mx_GroupMemberList_query::-webkit-input-placeholder,
.mx_GroupRoomList_query::-webkit-input-placeholder {
color: $primary-fg-color;
.mx_GroupRoomList_query::-webkit-input-placeholder,
.mx_MemberList_query::-moz-placeholder,
.mx_GroupMemberList_query::-moz-placeholder,
.mx_GroupRoomList_query::-moz-placeholder {
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;
}
res/css/views/rooms/_RoomHeader.scss
+4
View File
@@ -208,6 +208,10 @@ limitations under the License.
pointer-events: none;
}
.mx_RoomHeader_showPanel {
height: 16px;
}
.mx_RoomHeader_voipButton {
display: table-cell;
}