diff --git a/.gitignore b/.gitignore index 13466ce8..a28ca6b1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,8 @@ node_modules vector/bundle.* lib +bundle.css +.DS_Store +key.pem +cert.pem +build diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index aff9666e..381eb2cb 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -22,7 +22,7 @@ html { } body { - font-family: 'Lato', Helvetica, Arial, Sans-Serif; + font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif; font-size: 16px; color: #454545; border: 0px; @@ -34,7 +34,7 @@ div.error { } h2 { - color: #80cef4; + color: #454545; font-weight: 400; font-size: 20px; margin-top: 16px; @@ -44,7 +44,7 @@ h2 { a:hover, a:link, a:visited { - color: #80CEF4; + color: #76cfa6; } .mx_ContextualMenu_background { @@ -149,7 +149,7 @@ a:visited { font-weight: 400; font-size: 16px; color: #fff; - background-color: #80cef4; + background-color: #76cfa6; margin-left: 8px; margin-right: 8px; padding-left: 1em; diff --git a/src/skins/vector/css/hide.css b/src/skins/vector/css/hide.css index fbc2db20..df437e97 100644 --- a/src/skins/vector/css/hide.css +++ b/src/skins/vector/css/hide.css @@ -1,6 +1,6 @@ .mx_RoomDropTarget, -.mx_RoomList_favourites_label, -.mx_RoomList_archive_label, +.mx_RoomList_favouritesLabel, +.mx_RoomList_archiveLabel, .mx_RoomHeader_search, .mx_RoomSettings_encrypt, .mx_CreateRoom_encrypt, diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css index 1cd2fa46..a9a5260c 100644 --- a/src/skins/vector/css/molecules/EventTile.css +++ b/src/skins/vector/css/molecules/EventTile.css @@ -22,10 +22,10 @@ limitations under the License. } .mx_EventTile_avatar { - padding-left: 12px; + padding-left: 18px; padding-right: 12px; margin-left: -64px; - margin-top: -7px; + margin-top: -4px; float: left; } @@ -48,9 +48,8 @@ limitations under the License. } .mx_EventTile .mx_MessageTimestamp { - color: #454545; - opacity: 0.5; - font-size: 14px; + color: #acacac; + font-size: 12px; float: right; } diff --git a/src/skins/vector/css/molecules/MImageTile.css b/src/skins/vector/css/molecules/MImageTile.css index 10e5b50b..94f1c919 100644 --- a/src/skins/vector/css/molecules/MImageTile.css +++ b/src/skins/vector/css/molecules/MImageTile.css @@ -23,12 +23,12 @@ limitations under the License. } .mx_MImageTile_download { - color: #80cef4; + color: #76cfa6; cursor: pointer; } .mx_MImageTile_download a { - color: #80cef4; + color: #76cfa6; text-decoration: none; } diff --git a/src/skins/vector/css/molecules/MemberTile.css b/src/skins/vector/css/molecules/MemberTile.css index faae142a..ca752541 100644 --- a/src/skins/vector/css/molecules/MemberTile.css +++ b/src/skins/vector/css/molecules/MemberTile.css @@ -27,8 +27,8 @@ limitations under the License. padding-top: 3px; padding-bottom: 3px; vertical-align: middle; - width: 40px; - height: 40px; + width: 36px; + height: 36px; position: relative; } @@ -60,8 +60,8 @@ limitations under the License. .mx_MemberTile_power { position: absolute; - width: 48px; - height: 48px; + width: 44px; + height: 44px; left: 10px; top: -1px; } diff --git a/src/skins/vector/css/molecules/MessageComposer.css b/src/skins/vector/css/molecules/MessageComposer.css index af4934ee..e7f6919c 100644 --- a/src/skins/vector/css/molecules/MessageComposer.css +++ b/src/skins/vector/css/molecules/MessageComposer.css @@ -15,30 +15,29 @@ limitations under the License. */ .mx_MessageComposer_wrapper { - max-width: 720px; - height: 50px; + max-width: 960px; + height: 70px; vertical-align: middle; margin: auto; background-color: #fff; - border-radius: 25px; - border: 1px solid #a9dbf4; + border-top: 2px solid #e1dddd; } .mx_MessageComposer_row { display: table-row; width: 100%; - height: 50px; + height: 70px; } .mx_MessageComposer .mx_MessageComposer_avatar { display: table-cell; - padding-left: 5px; - padding-right: 10px; - height: 50px; + padding-left: 10px; + padding-right: 20px; + height: 70px; } .mx_MessageComposer .mx_MessageComposer_avatar img { - margin-top: 5px; + margin-top: 18px; border-radius: 20px; background-color: #dbdbdb; } @@ -47,7 +46,7 @@ limitations under the License. display: table-cell; width: 100%; vertical-align: middle; - height: 50px; + height: 70px; } .mx_MessageComposer_input textarea { @@ -64,12 +63,16 @@ limitations under the License. box-shadow: none; /* needed for FF */ - font-family: 'Lato', Helvetica, Arial, Sans-Serif; + font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif; } /* hack for FF as vertical alignment of custom placeholder text is broken */ .mx_MessageComposer_input textarea::-moz-placeholder { line-height: 100%; + color: #76cfa6; +} +.mx_MessageComposer_input textarea::-webkit-input-placeholder { + color: #76cfa6; } .mx_MessageComposer_upload { diff --git a/src/skins/vector/css/molecules/RoomHeader.css b/src/skins/vector/css/molecules/RoomHeader.css index f7adb618..6ae067a0 100644 --- a/src/skins/vector/css/molecules/RoomHeader.css +++ b/src/skins/vector/css/molecules/RoomHeader.css @@ -18,10 +18,10 @@ limitations under the License. } .mx_RoomHeader_wrapper { - max-width: 720px; + max-width: 960px; margin: auto; height: 88px; - border-bottom: 1px solid #a8dbf3; + border-bottom: 1px solid #eeeeee; display: -webkit-box; display: -moz-box; @@ -47,7 +47,7 @@ limitations under the License. .mx_RoomHeader_textButton { height: 48px; margin-top: 18px; - background-color: #80cef4; + background-color: #76cfa6; border-radius: 48px; margin-right: 8px; color: #fff; @@ -92,7 +92,7 @@ limitations under the License. .mx_RoomHeader_simpleHeader { line-height: 88px; - color: #80cef4; + color: #76cfa6; font-weight: 400; font-size: 20px; overflow: hidden; @@ -102,8 +102,8 @@ limitations under the License. .mx_RoomHeader_name { vertical-align: middle; height: 28px; - color: #80cef4; - font-weight: 400; + color: #454545; + font-weight: 800; font-size: 20px; padding-left: 16px; padding-right: 16px; @@ -133,7 +133,7 @@ limitations under the License. vertical-align: bottom; float: left; max-height: 38px; - color: #70b5d7; + color: #454545; font-weight: 300; padding-left: 16px; padding-right: 16px; diff --git a/src/skins/vector/css/molecules/RoomSettings.css b/src/skins/vector/css/molecules/RoomSettings.css index 3a66f0e9..a669c5b2 100644 --- a/src/skins/vector/css/molecules/RoomSettings.css +++ b/src/skins/vector/css/molecules/RoomSettings.css @@ -61,7 +61,7 @@ limitations under the License. font-weight: 400; font-size: 16px; color: #fff; - background-color: #80cef4; + background-color: #76cfa6; width: auto; margin: auto; padding: 6px; diff --git a/src/skins/vector/css/molecules/RoomTile.css b/src/skins/vector/css/molecules/RoomTile.css index 511fc94f..cc933226 100644 --- a/src/skins/vector/css/molecules/RoomTile.css +++ b/src/skins/vector/css/molecules/RoomTile.css @@ -17,18 +17,19 @@ limitations under the License. .mx_RoomTile { cursor: pointer; display: table-row; - color: #818794; + font-size: 14px; } .mx_RoomTile_avatar { display: table-cell; - padding-right: 10px; + background: #eaf5f0; + padding-right: 8px; padding-top: 3px; padding-bottom: 3px; - padding-left: 10px; + padding-left: 18px; vertical-align: middle; - width: 36px; - height: 36px; + width: 24px; + height: 24px; position: relative; } @@ -43,6 +44,8 @@ limitations under the License. overflow: hidden; text-overflow: ellipsis; padding-right: 16px; + color: #454545; + opacity: 0.8; } .collapsed .mx_RoomTile_name { @@ -63,7 +66,7 @@ limitations under the License. } .mx_RoomTile_badge { - background-color: #80cef4; + background-color: #76cfa6; color: #fff; border-radius: 26px; font-weight: 400; @@ -75,6 +78,7 @@ limitations under the License. } */ +/* .mx_RoomTile_badge { background-color: #ff0064; border: 3px solid #fff; @@ -85,20 +89,37 @@ limitations under the License. right: 9px; bottom: 3px; } +*/ + +.mx_RoomTile_highlight .mx_RoomTile_sidebadge, +.mx_RoomTile_unread .mx_RoomTile_sidebadge { + background-color: #76cfa6; + width: 4px; + position: absolute; + left: 0px; +} .mx_RoomTile_unread, .mx_RoomTile_highlight, .mx_RoomTile_invited { font-weight: bold; - color: #000; } .mx_RoomTile_selected { - background-color: #f3f8fa; - color: #80cef4; font-weight: bold; } +.mx_RoomTile.mx_RoomTile_selected { + background: url('img/selected.png'); + background-repeat: no-repeat; + background-position: right center; +} + +.mx_RoomTile_arrow { + position: absolute; + right: 0px; +} + .mx_RoomTile:hover { } diff --git a/src/skins/vector/css/organisms/CreateRoom.css b/src/skins/vector/css/organisms/CreateRoom.css index d6b1765c..578c79e6 100644 --- a/src/skins/vector/css/organisms/CreateRoom.css +++ b/src/skins/vector/css/organisms/CreateRoom.css @@ -15,7 +15,7 @@ limitations under the License. */ .mx_CreateRoom { - width: 720px; + width: 960px; margin-left: auto; margin-right: auto; color: #4a4a4a; diff --git a/src/skins/vector/css/organisms/LeftPanel.css b/src/skins/vector/css/organisms/LeftPanel.css index 0e7e077e..67f00c35 100644 --- a/src/skins/vector/css/organisms/LeftPanel.css +++ b/src/skins/vector/css/organisms/LeftPanel.css @@ -53,17 +53,20 @@ limitations under the License. -webkit-order: 3; order: 3; - -webkit-flex: 0 0 170px; - flex: 0 0 170px; - - border-top: 1px solid #f3f8fa; + -webkit-flex: 0 0 126px; + flex: 0 0 126px; } .mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile { - color: #378bb4; + color: #454545; } .mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options { margin-top: 12px; width: 100%; +} + +.mx_LeftPanel .mx_BottomLeftMenu img { + border-radius: 0px; + background-color: transparent; } \ No newline at end of file diff --git a/src/skins/vector/css/organisms/MemberList.css b/src/skins/vector/css/organisms/MemberList.css index aab0def4..7320a127 100644 --- a/src/skins/vector/css/organisms/MemberList.css +++ b/src/skins/vector/css/organisms/MemberList.css @@ -16,8 +16,6 @@ limitations under the License. .mx_MemberList { height: 100%; - margin-bottom: 100px; - padding: 8px; -webkit-flex: 1; flex: 1; @@ -39,10 +37,7 @@ limitations under the License. } .mx_MemberList_border { - border: 1px solid #a9dbf4; overflow-y: auto; - border-radius: 8px; - background-color: #fff; order: 1; -webkit-flex: 1 1 0; diff --git a/src/skins/vector/css/organisms/RoomDirectory.css b/src/skins/vector/css/organisms/RoomDirectory.css index 21985a25..f53f0556 100644 --- a/src/skins/vector/css/organisms/RoomDirectory.css +++ b/src/skins/vector/css/organisms/RoomDirectory.css @@ -15,7 +15,7 @@ limitations under the License. */ .mx_RoomDirectory { - width: 720px; + width: 960px; margin-left: auto; margin-right: auto; margin-bottom: 12px; diff --git a/src/skins/vector/css/organisms/RoomList.css b/src/skins/vector/css/organisms/RoomList.css index 21cb7812..89181b82 100644 --- a/src/skins/vector/css/organisms/RoomList.css +++ b/src/skins/vector/css/organisms/RoomList.css @@ -15,6 +15,7 @@ limitations under the License. */ .mx_RoomList { + padding-top: 24px; } .mx_RoomList_recents { @@ -24,8 +25,15 @@ limitations under the License. width: 100%; } +.mx_RoomList_recentsLabel img { + margin-left: 8px; +} + .mx_RoomList h2 { - padding-left: 16px; - padding-right: 16px; - padding-bottom: 10px; -} \ No newline at end of file + text-transform: uppercase; + color: #3d3b39; + font-weight: 600; + font-size: 14px; + padding-left: 12px; + padding-right: 12px; +} diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css index 2aab203a..8ca00803 100644 --- a/src/skins/vector/css/organisms/RoomView.css +++ b/src/skins/vector/css/organisms/RoomView.css @@ -42,7 +42,7 @@ limitations under the License. .mx_RoomView_fileDropTarget { min-width: 0px; - max-width: 720px; + max-width: 960px; width: 100%; font-size: 20px; text-align: center; @@ -61,7 +61,7 @@ limitations under the License. border-top-right-radius: 10px; background-color: rgba(255, 255, 255, 0.9); - border: 2px dashed #80cef4; + border: 2px dashed #76cfa6; border-bottom: none; position: absolute; top: 88px; @@ -84,12 +84,12 @@ limitations under the License. order: 2; min-width: 0px; - max-width: 720px; + max-width: 960px; width: 100%; margin: auto; overflow: auto; - border-bottom: 1px solid #a8dbf3; + border-bottom: 1px solid #eee; -webkit-flex: 0 0 auto; flex: 0 0 auto; @@ -111,7 +111,7 @@ limitations under the License. } .mx_RoomView_messageListWrapper { - max-width: 720px; + max-width: 960px; margin: auto; } @@ -129,8 +129,9 @@ limitations under the License. clear: both; margin-top: 32px; margin-bottom: 8px; + margin-left: 54px; padding-bottom: 6px; - border-bottom: 1px solid #a8dbf3; + border-bottom: 1px solid #eee; } .mx_RoomView_invitePrompt { @@ -141,7 +142,7 @@ limitations under the License. order: 2; min-width: 0px; - max-width: 720px; + max-width: 960px; width: 100%; margin: auto; @@ -157,14 +158,19 @@ limitations under the License. order: 4; width: 100%; - -webkit-flex: 0 0 58px; - flex: 0 0 58px; + -webkit-flex: 0 0 36px; + flex: 0 0 36px; } .mx_RoomView_statusAreaBox { - max-width: 720px; + max-width: 960px; margin: auto; - border-top: 1px solid #a8dbf3; +} + +.mx_RoomView_statusAreaBox_line { + border-top: 1px solid #eee; + margin-left: 54px; + height: 1px; } .mx_RoomView_unreadMessagesBar { @@ -205,8 +211,8 @@ limitations under the License. order: 5; width: 100%; - -webkit-flex: 0 0 63px; - flex: 0 0 63px; + -webkit-flex: 0 0 70px; + flex: 0 0 70px; margin-right: 2px; } @@ -217,7 +223,7 @@ limitations under the License. } .mx_RoomView_uploadProgressInner { - background-color: #80cef4; + background-color: #76cfa6; height: 4px; } diff --git a/src/skins/vector/css/organisms/UserSettings.css b/src/skins/vector/css/organisms/UserSettings.css index b69399b7..2b0aca3d 100644 --- a/src/skins/vector/css/organisms/UserSettings.css +++ b/src/skins/vector/css/organisms/UserSettings.css @@ -15,7 +15,7 @@ limitations under the License. */ .mx_UserSettings { - width: 720px; + width: 960px; margin-left: auto; margin-right: auto; } diff --git a/src/skins/vector/css/pages/MatrixChat.css b/src/skins/vector/css/pages/MatrixChat.css index 6fa0415a..f649aa24 100644 --- a/src/skins/vector/css/pages/MatrixChat.css +++ b/src/skins/vector/css/pages/MatrixChat.css @@ -69,6 +69,8 @@ limitations under the License. -webkit-order: 1; order: 1; + background-color: #eaf5f0; + -webkit-flex: 0 0 230px; flex: 0 0 230px; } @@ -87,7 +89,7 @@ limitations under the License. padding-left: 12px; padding-right: 12px; - background-color: #f3f8fa; + background-color: #fff; -webkit-flex: 1; flex: 1; @@ -114,7 +116,6 @@ limitations under the License. -webkit-order: 3; order: 3; - background-color: #f3f8fa; -webkit-flex: 0 0 230px; flex: 0 0 230px; } diff --git a/src/skins/vector/fonts/MyriadPro-Bold.woff b/src/skins/vector/fonts/MyriadPro-Bold.woff new file mode 100644 index 00000000..f30c591f Binary files /dev/null and b/src/skins/vector/fonts/MyriadPro-Bold.woff differ diff --git a/src/skins/vector/fonts/MyriadPro-BoldIt.woff b/src/skins/vector/fonts/MyriadPro-BoldIt.woff new file mode 100644 index 00000000..db605a6c Binary files /dev/null and b/src/skins/vector/fonts/MyriadPro-BoldIt.woff differ diff --git a/src/skins/vector/fonts/MyriadPro-It.woff b/src/skins/vector/fonts/MyriadPro-It.woff new file mode 100644 index 00000000..9a133bcd Binary files /dev/null and b/src/skins/vector/fonts/MyriadPro-It.woff differ diff --git a/src/skins/vector/fonts/MyriadPro-Regular.woff b/src/skins/vector/fonts/MyriadPro-Regular.woff new file mode 100644 index 00000000..5a95583f Binary files /dev/null and b/src/skins/vector/fonts/MyriadPro-Regular.woff differ diff --git a/src/skins/vector/fonts/MyriadPro-SemiBold.woff b/src/skins/vector/fonts/MyriadPro-SemiBold.woff new file mode 100644 index 00000000..2a80f65d Binary files /dev/null and b/src/skins/vector/fonts/MyriadPro-SemiBold.woff differ diff --git a/src/skins/vector/fonts/MyriadPro.css b/src/skins/vector/fonts/MyriadPro.css new file mode 100644 index 00000000..833e6828 --- /dev/null +++ b/src/skins/vector/fonts/MyriadPro.css @@ -0,0 +1,20 @@ +@font-face { + font-family: 'Myriad Pro'; + font-style: normal; + font-weight: normal; + src: local('Myriad Pro'), local('MyriadPro'), url(MyriadPro-Regular.woff) format('woff'); +} + +@font-face { + font-family: 'Myriad Pro'; + font-style: normal; + font-weight: 600; + src: local('Myriad Pro SemiBold'), local('MyriadPro-SemiBold'), url(MyriadPro-SemiBold.woff) format('woff'); +} + +@font-face { + font-family: 'Myriad Pro'; + font-style: normal; + font-weight: bold; + src: local('Myriad Pro Bold'), local('MyriadPro-Bold'), url(MyriadPro-Bold.woff) format('woff'); +} diff --git a/src/skins/vector/img/create-big.png b/src/skins/vector/img/create-big.png index 247b0030..b7307a11 100644 Binary files a/src/skins/vector/img/create-big.png and b/src/skins/vector/img/create-big.png differ diff --git a/src/skins/vector/img/directory-big.png b/src/skins/vector/img/directory-big.png index bbcb16a4..03cab69c 100644 Binary files a/src/skins/vector/img/directory-big.png and b/src/skins/vector/img/directory-big.png differ diff --git a/src/skins/vector/img/selected.png b/src/skins/vector/img/selected.png new file mode 100644 index 00000000..8931cba7 Binary files /dev/null and b/src/skins/vector/img/selected.png differ diff --git a/src/skins/vector/img/settings-big.png b/src/skins/vector/img/settings-big.png index 3be13bc7..cb2e0a62 100644 Binary files a/src/skins/vector/img/settings-big.png and b/src/skins/vector/img/settings-big.png differ diff --git a/src/skins/vector/views/atoms/RoomAvatar.js b/src/skins/vector/views/atoms/RoomAvatar.js index 39b995a7..4416a6b8 100644 --- a/src/skins/vector/views/atoms/RoomAvatar.js +++ b/src/skins/vector/views/atoms/RoomAvatar.js @@ -34,7 +34,7 @@ module.exports = React.createClass({ }, getFallbackAvatar: function() { - var images = [ '80cef4', '50e2c2', 'f4c371' ]; + var images = [ '76cfa6', '50e2c2', 'f4c371' ]; var total = 0; for (var i = 0; i < this.props.room.roomId.length; ++i) { total += this.props.room.roomId.charCodeAt(i); diff --git a/src/skins/vector/views/molecules/BottomLeftMenuTile.js b/src/skins/vector/views/molecules/BottomLeftMenuTile.js index 2644769c..8c28058d 100644 --- a/src/skins/vector/views/molecules/BottomLeftMenuTile.js +++ b/src/skins/vector/views/molecules/BottomLeftMenuTile.js @@ -48,7 +48,7 @@ module.exports = React.createClass({ return (
- +
{ label }
diff --git a/src/skins/vector/views/molecules/EventTile.js b/src/skins/vector/views/molecules/EventTile.js index 534af3c7..a086ad00 100644 --- a/src/skins/vector/views/molecules/EventTile.js +++ b/src/skins/vector/views/molecules/EventTile.js @@ -110,7 +110,7 @@ module.exports = React.createClass({ if (this.props.mxEvent.sender) { avatar = (
- +
); } diff --git a/src/skins/vector/views/molecules/MemberTile.js b/src/skins/vector/views/molecules/MemberTile.js index 4c34fcb7..845d2a97 100644 --- a/src/skins/vector/views/molecules/MemberTile.js +++ b/src/skins/vector/views/molecules/MemberTile.js @@ -121,7 +121,7 @@ module.exports = React.createClass({ var power; if (this.props.member && this.props.member.powerLevelNorm > 0) { var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png"; - power = ; + power = ; } var presenceClass = "mx_MemberTile_offline"; var mainClassName = "mx_MemberTile "; @@ -177,7 +177,7 @@ module.exports = React.createClass({ return (
- + { power }
{ nameEl } diff --git a/src/skins/vector/views/molecules/MessageComposer.js b/src/skins/vector/views/molecules/MessageComposer.js index c94cade5..67a0b18a 100644 --- a/src/skins/vector/views/molecules/MessageComposer.js +++ b/src/skins/vector/views/molecules/MessageComposer.js @@ -49,10 +49,10 @@ module.exports = React.createClass({
- +
-