nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge branch 'develop' into luke/feature-animated-status-bar

Browse Source
This commit is contained in:
Luke Barnard
2017-01-23 13:31:48 +00:00
parent b582cf0a5f f025afc297
commit c4d246cd72
99 changed files with 1277 additions and 705 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css → src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
View File

@@ -30,10 +30,10 @@ limitations under the License.
}
.mx_ContextualMenu {
border: solid 1px rgba(187, 187, 187, 0.5);
border: solid 1px $menu-border-color;
border-radius: 4px;
background-color: #f6f6f6;
color: #4a4a4a;
background-color: $menu-bg-color;
color: $primary-fg-color;
position: absolute;
padding: 6px;
font-size: 14px;
@@ -51,7 +51,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 8px solid rgba(187, 187, 187, 0.5);
border-left: 8px solid $menu-border-color;
border-bottom: 8px solid transparent;
}
@@ -60,7 +60,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 7px solid #f6f6f6;
border-left: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
@@ -78,7 +78,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid rgba(187, 187, 187, 0.5);
border-right: 8px solid $menu-border-color;
border-bottom: 8px solid transparent;
}
@@ -87,7 +87,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #f6f6f6;
border-right: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;

4
src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css → src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss
View File

@@ -18,13 +18,13 @@ limitations under the License.
width: 960px;
margin-left: auto;
margin-right: auto;
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_CreateRoom input,
.mx_CreateRoom textarea {
border-radius: 3px;
border: 1px solid #c7c7c7;
border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
padding: 9px;

15
src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css → src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
View File

@@ -15,13 +15,8 @@ limitations under the License.
*/
.mx_FilePanel {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
-webkit-flex: 1 1 0;
flex: 1 1 0;
width: 100%;
@@ -58,12 +53,12 @@ limitations under the License.
.mx_FilePanel .mx_EventTile .mx_MImageBody_download {
display: flex;
font-size: 14px;
color: #acacac;
color: $event-timestamp-color;
}
.mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
flex: 1 1 auto;
color: #747474;
color: $light-fg-color;
}
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
@@ -90,7 +85,7 @@ limitations under the License.
padding: 0px;
font-size: 11px;
opacity: 1.0;
color: #acacac;
color: $event-timestamp-color;
}
.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
@@ -100,7 +95,7 @@ limitations under the License.
position: initial;
font-size: 11px;
opacity: 1.0;
color: #acacac;
color: $event-timestamp-color;
}
/* Overrides for the wrappers around the body tile */
@@ -111,7 +106,7 @@ limitations under the License.
}
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
background-color: #fff;
background-color: $primary-bg-color;
}
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {

47
src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css → src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
View File

@@ -27,34 +27,21 @@ limitations under the License.
}
.mx_MatrixChat_wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
width: 100%;
height: 100%;
}
.mx_MatrixToolbar {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
height: 40px;
}
.mx_GuestWarningBar {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
height: 40px;
@@ -68,52 +55,32 @@ limitations under the License.
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
-webkit-flex: 1;
flex: 1;
}
.mx_MatrixChat .mx_LeftPanel {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
background-color: #eaf5f0;
background-color: $secondary-accent-color;
-webkit-flex: 0 0 235px;
flex: 0 0 235px;
}
.mx_MatrixChat .mx_LeftPanel.collapsed {
-webkit-flex: 0 0 60px;
flex: 0 0 60px;
}
.mx_MatrixChat .mx_MatrixChat_middlePanel {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
padding-left: 20px;
padding-right: 22px;
background-color: #fff;
background-color: $primary-bg-color;
-webkit-flex: 1;
flex: 1;
/* Experimental fix for https://github.com/vector-im/vector-web/issues/947
@@ -132,25 +99,15 @@ limitations under the License.
* point, but instead we fudge it and make the middlePanel
* flex itself.
*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.mx_MatrixChat .mx_RightPanel {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
-webkit-flex: 0 0 235px;
flex: 0 0 235px;
}
.mx_MatrixChat .mx_RightPanel.collapsed {
-webkit-flex: 0 0 122px;
flex: 0 0 122px;
}

12
src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css → src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
View File

@@ -15,13 +15,8 @@ limitations under the License.
*/
.mx_NotificationPanel {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
-webkit-flex: 1 1 0;
flex: 1 1 0;
width: 100%;
@@ -51,7 +46,7 @@ limitations under the License.
}
.mx_NotificationPanel .mx_EventTile_roomName a {
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_NotificationPanel .mx_EventTile_avatar {
@@ -61,8 +56,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
color: #000;
opacity: 0.3;
color: $primary-fg-color;
font-size: 12px;
display: inline;
padding-left: 0px;
@@ -94,7 +88,7 @@ limitations under the License.
}
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
background-color: #fff;
background-color: $primary-bg-color;
}
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {

57
src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css → src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
View File

@@ -21,10 +21,10 @@ limitations under the License.
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
.mx_RoomStatusBar_indicator {
padding-left: 18px;
padding-left: 17px;
padding-right: 12px;
margin-left: -73px;
margin-top: 13px;
margin-top: 8px;
float: left;
width: 24px;
text-align: center;
@@ -36,16 +36,16 @@ limitations under the License.
}
.mx_RoomStatusBar_placeholderIndicator span {
color: #4a4a4a;
color: $primary-fg-color;
opacity: 0.5;
position: relative;
top: -4px;
/*
/*
animation-duration: 1s;
animation-name: bounce;
animation-direction: alternate;
animation-iteration-count: infinite;
*/
*/
}
.mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
@@ -70,13 +70,43 @@ limitations under the License.
}
}
.mx_RoomStatusBar_typingIndicatorAvatars {
width: 52px;
text-align: left;
}
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
margin-right: -12px;
border: 1px solid $primary-bg-color;
}
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
padding-left: 1px;
padding-top: 1px;
}
.mx_RoomStatusBar_typingIndicatorRemaining {
display: inline-block;
color: #acacac;
background-color: #ddd;
border: 1px solid $primary-bg-color;
border-radius: 40px;
width: 24px;
height: 24px;
line-height: 24px;
font-size: 0.8em;
vertical-align: top;
text-align: center;
position: absolute;
}
.mx_RoomStatusBar_scrollDownIndicator {
cursor: pointer;
}
.mx_RoomStatusBar_unreadMessagesBar {
padding-top: 10px;
color: #ff0064;
color: $warning-color;
cursor: pointer;
}
@@ -93,29 +123,29 @@ limitations under the License.
}
.mx_RoomStatusBar_connectionLostBar_title {
color: #ff0064;
color: $warning-color;
}
.mx_RoomStatusBar_connectionLostBar_desc {
color: #454545;
color: $primary-fg-color;
font-size: 13px;
opacity: 0.5;
}
.mx_RoomStatusBar_resend_link {
color: #454545 ! important;
color: $primary-fg-color ! important;
text-decoration: underline ! important;
cursor: pointer;
}
.mx_RoomStatusBar_tabCompleteBar {
padding-top: 10px;
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_RoomStatusBar_typingBar {
padding-top: 10px;
color: #4a4a4a;
color: $primary-fg-color;
opacity: 0.5;
overflow-y: hidden;
display: block;
@@ -123,19 +153,16 @@ limitations under the License.
.mx_RoomStatusBar_tabCompleteWrapper {
display: flex;
display: -webkit-flex;
height: 26px;
}
.mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar {
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
}
.mx_RoomStatusBar_tabCompleteEol {
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
color: #76CFA6;
color: $accent-color;
}
.mx_RoomStatusBar_tabCompleteEol object {

75
src/skins/vector/css/matrix-react-sdk/structures/RoomView.css → src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
View File

@@ -18,25 +18,15 @@ limitations under the License.
word-wrap: break-word;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
flex-direction: column;
-webkit-flex-direction: column;
}
.mx_RoomView .mx_RoomHeader {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
-webkit-flex: 0 0 70px;
flex: 0 0 70px;
}
@@ -53,14 +43,10 @@ limitations under the License.
padding-right: 12px;
margin-left: -12px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: rgba(255, 255, 255, 0.9);
background-color: $droptarget-bg-color;
border: 2px #e1dddd solid;
border-bottom: none;
position: absolute;
@@ -77,10 +63,6 @@ limitations under the License.
}
.mx_RoomView_auxPanel {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
min-width: 0px;
@@ -89,28 +71,18 @@ limitations under the License.
margin: auto;
overflow: auto;
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid $primary-hairline-color;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
.mx_RoomView_topUnreadMessagesBar {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
.mx_RoomView_messagePanel {
-webkit-box-ordinal-group: 4;
-moz-box-ordinal-group: 4;
-ms-flex-order: 4;
-webkit-order: 4;
order: 4;
-webkit-flex: 1 1 0;
flex: 1 1 0;
width: 100%;
@@ -124,22 +96,15 @@ limitations under the License.
min-height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
justify-content: flex-start;
-webkit-justify-content: flex-start;
}
.mx_RoomView_MessageList {
@@ -158,14 +123,10 @@ limitations under the License.
margin-bottom: 8px;
margin-left: 63px;
padding-bottom: 6px;
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid $primary-hairline-color;
}
.mx_RoomView_invitePrompt {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
min-width: 0px;
@@ -185,22 +146,17 @@ li.mx_RoomView_myReadMarker_container {
}
hr.mx_RoomView_myReadMarker {
border-top: solid 1px #76cfa6;
border-bottom: solid 1px #76cfa6;
border-top: solid 1px $accent-color;
border-bottom: solid 1px $accent-color;
margin-top: 0px;
position: relative;
top: 5px;
}
.mx_RoomView_statusArea {
-webkit-box-ordinal-group: 5;
-moz-box-ordinal-group: 5;
-ms-flex-order: 5;
-webkit-order: 5;
order: 5;
width: 100%;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
max-height: 0px;
@@ -226,16 +182,16 @@ hr.mx_RoomView_myReadMarker {
.mx_RoomView_statusAreaBox_line {
margin-left: 65px;
border-top: 1px solid #e5e5e5;
border-top: 1px solid $primary-hairline-color;
height: 1px;
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
background-color: #fff;
background-color: $primary-bg-color;
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
color: #fff;
color: $accent-fg-color;
opacity: 1.0;
}
@@ -248,8 +204,8 @@ hr.mx_RoomView_myReadMarker {
}
.mx_RoomView_inCall .mx_RoomView_statusAreaBox {
background-color: #76CFA6;
color: #fff;
background-color: $accent-color;
color: $accent-fg-color;
position: relative;
}
@@ -271,14 +227,9 @@ hr.mx_RoomView_myReadMarker {
}
.mx_RoomView .mx_MessageComposer {
-webkit-box-ordinal-group: 6;
-moz-box-ordinal-group: 6;
-ms-flex-order: 6;
-webkit-order: 6;
order: 6;
width: 100%;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
margin-right: 2px;
}
@@ -286,13 +237,13 @@ hr.mx_RoomView_myReadMarker {
.mx_RoomView_ongoingConfCallNotification {
width: 100%;
text-align: center;
background-color: #ff0064;
color: #fff;
background-color: $warning-color;
color: $accent-fg-color;
font-weight: bold;
padding: 6px 0;
cursor: pointer;
}
.mx_RoomView_ongoingConfCallNotification a {
color: #fff ! important;
color: $accent-fg-color ! important;
}

3
src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css → src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
View File

@@ -22,7 +22,6 @@ limitations under the License.
padding-bottom: 22px;
display: flex;
display: -webkit-flex;
}
.mx_SearchBox_searchButton {
@@ -38,7 +37,6 @@ limitations under the License.
.mx_SearchBox_search {
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
width: 0px;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
font-size: 12px;
@@ -46,7 +44,6 @@ limitations under the License.
height: 24px;
border: 0px ! important;
/* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
background-color: transparent;
border: 0px;
}

6
src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css → src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss
View File

@@ -26,7 +26,7 @@ limitations under the License.
}
.mx_UploadBar_uploadProgressInner {
background-color: #76cfa6;
background-color: $accent-color;
height: 5px;
}
@@ -34,7 +34,7 @@ limitations under the License.
margin-top: 5px;
margin-left: 65px;
opacity: 0.5;
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_UploadBar_uploadIcon {
@@ -57,5 +57,5 @@ limitations under the License.
float: right;
margin-top: 5px;
margin-right: 30px;
color: #76cfa6;
color: $accent-color;
}

27
src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css → src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
View File

@@ -20,34 +20,19 @@ limitations under the License.
margin-left: auto;
margin-right: auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.mx_UserSettings .mx_RoomHeader {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
-webkit-flex: 0 0 70px;
flex: 0 0 70px;
}
.mx_UserSettings_body {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
-webkit-flex: 1 1 0;
flex: 1 1 0;
margin-top: -20px;
@@ -58,7 +43,7 @@ limitations under the License.
clear: both;
margin-left: 63px;
text-transform: uppercase;
color: #3d3b39;
color: $h3-color;
font-weight: 600;
font-size: 13px;
margin-top: 26px;
@@ -84,8 +69,8 @@ limitations under the License.
border-radius: 36px;
font-weight: 400;
font-size: 16px;
color: #fff;
background-color: #76cfa6;
color: $accent-fg-color;
background-color: $accent-color;
width: auto;
margin: auto;
padding: 7px;
@@ -95,7 +80,7 @@ limitations under the License.
}
.mx_UserSettings_button.danger {
background-color: #ff0064;
background-color: $warning-color;
}
.mx_UserSettings_section {
@@ -166,10 +151,10 @@ limitations under the License.
{
display: inline-block;
border: 0px;
border-bottom: 1px solid rgba(151, 151, 151, 0.5);
border-bottom: 1px solid $input-underline-color;
padding: 0px;
width: 240px;
color: rgba(74, 74, 74, 0.9);
color: $input-fg-color;
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
font-size: 16px;
}

22
src/skins/vector/css/matrix-react-sdk/structures/login/Login.css → src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
View File

@@ -18,21 +18,15 @@ limitations under the License.
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
overflow: auto;
}
.mx_Login h2 {
color: #4a4a4a;
color: $primary-fg-color;
font-weight: 300;
margin-top: 32px;
margin-bottom: 20px;
@@ -53,7 +47,7 @@ limitations under the License.
.mx_Login_field {
width: 100%;
border-radius: 3px;
border: 1px solid #c7c7c7;
border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
padding: 9px;
@@ -75,9 +69,9 @@ limitations under the License.
border-radius: 40px;
height: 40px;
border: 0px;
background-color: #76cfa6;
background-color: $accent-color;
font-size: 15px;
color: #fff;
color: $accent-fg-color;
}
.mx_Login_label {
@@ -99,7 +93,7 @@ limitations under the License.
}
.mx_Login_create:link {
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_Login_links {
@@ -112,7 +106,7 @@ limitations under the License.
}
.mx_Login_links a:link {
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_Login_prompt {
@@ -127,7 +121,7 @@ limitations under the License.
}
.mx_Login_forgot:link {
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_Login_loader {
@@ -147,7 +141,7 @@ limitations under the License.
}
.mx_Login_error {
color: #ff2020;
color: $warning-color;
font-weight: bold;
text-align: center;
/*