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;
/*

2
src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css → src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
View File

@@ -21,7 +21,7 @@ limitations under the License.
.mx_BaseAvatar_initial {
position: absolute;
z-index: 1;
color: #fff;
color: $avatar-initial-color;
text-align: center;
speak: none;
pointer-events: none;

4
src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css → src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
View File

@@ -36,7 +36,7 @@ limitations under the License.
.mx_ChatInviteDialog_inputContainer {
border-radius: 3px;
border: solid 1px #f0f0f0;
border: solid 1px $input-border-color;
line-height: 36px;
padding-left: 4px;
padding-right: 4px;
@@ -49,7 +49,7 @@ limitations under the License.
.mx_ChatInviteDialog_error {
position: absolute;
color: #ff0064;
color: $warning-color;
line-height: 36px;
}

6
src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css → src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
View File

@@ -24,7 +24,7 @@ limitations under the License.
border: 0px;
height: 36px;
border-radius: 40px;
border: solid 1px #76cfa6;
border: solid 1px $accent-color;
font-weight: 600;
font-size: 14px;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
@@ -34,6 +34,6 @@ limitations under the License.
padding-right: 1.5em;
outline: none;
cursor: pointer;
color: #76cfa6;
background-color: #fff;
color: $accent-color;
background-color: $primary-bg-color;
}

6
src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css → src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss
View File

@@ -16,9 +16,9 @@ limitations under the License.
.mx_SetDisplayNameDialog_input {
border-radius: 3px;
border: 1px solid #f0f0f0;
border: 1px solid $input-border-color;
padding: 9px;
color: #454545;
background-color: #fff;
color: $primary-fg-color;
background-color: $primary-bg-color;
font-size: 15px;
}

46
src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss Normal file
View File

@@ -0,0 +1,46 @@
/*
Copyright 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_UnknownDeviceDialog .mx_MemberDeviceInfo {
float: right;
clear: both;
padding: 0px;
padding-top: 8px;
}
.mx_UnknownDeviceDialog .mx_MemberDeviceInfo_textButton {
border: 0px;
height: 24px;
border-radius: 40px;
border: solid 1px $accent-color;
font-weight: 600;
font-size: 13px;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
margin-left: 0px;
margin-right: 8px;
padding-left: 0.5em;
padding-right: 0.5em;
width: 70px;
outline: none;
cursor: pointer;
color: $accent-color;
background-color: $primary-bg-color;
}
.mx_UnknownDeviceDialog .mx_UnknownDeviceDialog_deviceList li {
height: 40px;
border-bottom: 1px solid $primary-hairline-color;
}

16
src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css → src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss
View File

@@ -16,13 +16,13 @@ limitations under the License.
.mx_AddressSelector {
position: absolute;
background-color: #fff;
background-color: $primary-bg-color;
width: 485px;
max-height: 116px;
overflow-y: auto;
border-radius: 3px;
background-color: #fff;
border: solid 1px #76cfa6;
background-color: $primary-bg-color;
border: solid 1px $accent-color;
cursor: pointer;
}
@@ -31,15 +31,15 @@ limitations under the License.
}
.mx_AddressSelector_addressListElement .mx_AddressTile {
background-color: #fff;
border: solid 1px #fff;
background-color: $primary-bg-color;
border: solid 1px $primary-bg-color;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
background-color: #eaf5f0; /* selected colour */
background-color: $selected-color;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
background-color: #eaf5f0; /* selected colour */
border: solid 1px #eaf5f0; /* selected colour */
background-color: $selected-color;
border: solid 1px $selected-color;
}

8
src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css → src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
View File

@@ -18,9 +18,9 @@ limitations under the License.
display: inline-block;
border-radius: 3px;
background-color: rgba(74, 73, 74, 0.1);
border: solid 1px #f0f0f0;
border: solid 1px $input-border-color;
line-height: 26px;
color: #454545;
color: $primary-fg-color;
font-size: 14px;
font-weight: normal;
margin-right: 4px;
@@ -28,8 +28,8 @@ limitations under the License.
.mx_AddressTile.mx_AddressTile_error {
background-color: rgba(255, 0, 100, 0.1);
color: #ff0064;
border-color: #ff0064;
color: $warning-color;
border-color: $warning-color;
}
.mx_AddressTile_network {

10
src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css → src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
View File

@@ -17,19 +17,17 @@ limitations under the License.
.mx_DirectorySearchBox {
position: relative;
border-radius: 3px;
border: 1px solid #c7c7c7;
border: 1px solid $strong-input-border-color;
}
.mx_DirectorySearchBox_container {
display: flex;
display: -webkit-flex;
padding-left: 9px;
padding-right: 9px;
}
.mx_DirectorySearchBox_input {
flex-grow: 1;
-webkit-flex-grow: 1;
border: 0;
padding: 0;
font-weight: 300;
@@ -44,9 +42,9 @@ input[type=text].mx_DirectorySearchBox_input:focus {
padding: 3px;
padding-left: 10px;
padding-right: 10px;
background-color: #efefef;
background-color: $plinth-bg-color;
border-radius: 3px;
background-image: url('../img/icon-return.svg');
background-image: url('../../img/icon-return.svg');
background-position: 8px 70%;
background-repeat: no-repeat;
text-indent: 18px;
@@ -63,7 +61,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
.mx_DirectorySearchBox_clear {
display: inline-block;
vertical-align: middle;
background: url('../img/icon_context_delete.svg');
background: url('../../img/icon_context_delete.svg');
background-position: 0 50%;
background-repeat: no-repeat;
width: 15px;

2
src/skins/vector/css/matrix-react-sdk/views/elements/MemberEventListSummary.css → src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
View File

@@ -31,6 +31,6 @@ limitations under the License.
}
.mx_MemberEventListSummary_toggle {
color:#76cfa6;
color:$accent-color;
cursor:pointer;
}

4
src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css → src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss
View File

@@ -16,10 +16,10 @@ limitations under the License.
.mx_ProgressBar {
height: 5px;
border: 1px solid black;
border: 1px solid $progressbar-color;
}
.mx_ProgressBar_fill {
height: 100%;
background-color: #000;
background-color: $progressbar-color;
}

6
src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css → src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
View File

@@ -1,14 +1,14 @@
.mx_UserPill {
color: white;
background-color: #76cfa6;
background-color: $accent-color;
padding: 2px 8px;
border-radius: 16px;
}
.mx_RoomPill {
background-color: white;
color: #76cfa6;
border: 1px solid #76cfa6;
color: $accent-color;
border: 1px solid $accent-color;
padding: 2px 8px;
border-radius: 16px;
}

2
src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css → src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss
View File

@@ -27,5 +27,5 @@ limitations under the License.
opacity: 0.8;
font-size: 13px;
font-weight: 300;
color: #4a4a4a;
color: $primary-fg-color;
}

8
src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css → src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
View File

@@ -22,18 +22,18 @@ limitations under the License.
.mx_MImageBody_thumbnail {
max-width: 100%;
/*
background-color: #fff;
border: 2px solid #fff;
background-color: $primary-bg-color;
border: 2px solid $primary-bg-color;
border-radius: 1px;
*/
}
.mx_MImageBody_download {
color: #76cfa6;
color: $accent-color;
}
.mx_MImageBody_download a {
color: #76cfa6;
color: $accent-color;
text-decoration: none;
}

0
src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css → src/skins/vector/css/matrix-react-sdk/views/messages/_MNoticeBody.scss
View File

0
src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css → src/skins/vector/css/matrix-react-sdk/views/messages/_MTextBody.scss
View File

0
src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css → src/skins/vector/css/matrix-react-sdk/views/messages/_TextualEvent.scss
View File

0
src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css → src/skins/vector/css/matrix-react-sdk/views/messages/_UnknownBody.scss
View File

14
src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
View File

@@ -3,8 +3,8 @@
bottom: 0;
z-index: 1000;
width: 100%;
border: 1px solid #e5e5e5;
background: white;
border: 1px solid $primary-hairline-color;
background: $primary-bg-color;
border-bottom: none;
border-radius: 4px 4px 0 0;
max-height: 50vh;
@@ -12,7 +12,7 @@
}
.mx_Autocomplete_ProviderSection {
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid $primary-hairline-color;
}
.mx_Autocomplete_Completion_container_pill {
@@ -28,7 +28,7 @@
user-select: none;
cursor: pointer;
align-items: center;
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_Autocomplete_Completion_block * {
@@ -42,7 +42,7 @@
user-select: none;
cursor: pointer;
align-items: center;
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_Autocomplete_Completion_pill * {
@@ -57,13 +57,13 @@
}
.mx_Autocomplete_Completion.selected {
background: #f6f6f6;
background: $menu-bg-color;
outline: none;
}
.mx_Autocomplete_provider_name {
margin: 12px;
color: #454545;
color: $primary-fg-color;
font-weight: 400;
opacity: 0.4;
}

6
src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
View File

@@ -17,7 +17,7 @@ limitations under the License.
.mx_EntityTile {
display: table-row;
position: relative;
color: #454545;
color: $primary-fg-color;
cursor: pointer;
}
@@ -77,12 +77,12 @@ limitations under the License.
.mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic;
font-color: #454545;
color: $primary-fg-color;
}
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
font-style: italic;
font-color: #454545;
color: $primary-fg-color;
}
.mx_EntityTile_unavailable .mx_EntityTile_avatar,

48
src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
View File

@@ -44,7 +44,7 @@ limitations under the License.
}
.mx_EventTile .mx_SenderProfile {
color: #454545;
color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
display: block; /* anti-zalgo, with overflow hidden */
@@ -61,7 +61,7 @@ limitations under the License.
display: block;
visibility: hidden;
white-space: nowrap;
color: #acacac;
color: $event-timestamp-color;
font-size: 11px;
left: 8px;
position: absolute;
@@ -93,20 +93,20 @@ limitations under the License.
* TODO: ultimately we probably want some transition on here.
*/
.mx_EventTile_selected .mx_EventTile_line {
border-left: #76cfa6 5px solid;
border-left: $accent-color 5px solid;
padding-left: 60px;
background-color: #f7f7f7;
background-color: $event-selected-color;
}
.mx_EventTile:hover .mx_EventTile_line,
.mx_EventTile.menu .mx_EventTile_line
{
background-color: #f7f7f7;
background-color: $event-selected-color;
}
.mx_EventTile_searchHighlight {
background-color: #76cfa6;
color: #fff;
background-color: $accent-color;
color: $accent-fg-color;
border-radius: 5px;
padding-left: 2px;
padding-right: 2px;
@@ -114,26 +114,26 @@ limitations under the License.
}
.mx_EventTile_searchHighlight a {
background-color: #76cfa6;
color: #fff;
background-color: $accent-color;
color: $accent-fg-color;
}
.mx_EventTile_encrypting {
color: #abddbc ! important;
color: $event-encrypting-color ! important;
}
.mx_EventTile_sending {
color: #ddd;
color: $event-sending-color;
}
.mx_EventTile_notSent {
color: #f44;
color: $event-notsent-color;
}
.mx_EventTile_highlight,
.mx_EventTile_highlight .markdown-body
{
color: #FF0064;
color: $warning-color;
}
.mx_EventTile_contextual {
@@ -146,7 +146,12 @@ limitations under the License.
z-index: 1;
position: relative;
width: 90px;
height: 1px; /* Hack to stop the height of this pushing the messages apart. Replaces marigin-top: -6px. This interacts better with a read marker being in between. Content overflows. */
/* Hack to stop the height of this pushing the messages apart.
Replaces margin-top: -6px. This interacts better with a read
marker being in between. Content overflows. */
height: 1px;
margin-right: 10px;
}
@@ -172,6 +177,9 @@ limitations under the License.
cursor: pointer;
top: 6px;
right: 6px;
width: 19px;
height: 19px;
background-image: url($edit-button-url);
}
.mx_EventTile:hover .mx_EventTile_editButton,
@@ -204,7 +212,7 @@ limitations under the License.
}
.mx_EventTile_readAvatarRemainder {
color: #acacac;
color: $event-timestamp-color;
font-size: 11px;
position: absolute;
}
@@ -244,10 +252,10 @@ limitations under the License.
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: #76cfa5 5px solid;
border-left: $e2e-verified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: #e8bf37 5px solid;
border-left: $e2e-unverified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
@@ -286,6 +294,10 @@ limitations under the License.
overflow-y: visible;
}
.mx_EventTile_content .markdown-body code {
background-color: #f8f8f8;
}
.mx_EventTile_content .markdown-body h1,
.mx_EventTile_content .markdown-body h2,
.mx_EventTile_content .markdown-body h3,
@@ -297,7 +309,7 @@ limitations under the License.
}
.mx_EventTile_content .markdown-body a {
color: #76cfa6;
color: $accent-color;
}
.mx_EventTile_content .markdown-body .hljs {

8
src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
View File

@@ -18,14 +18,12 @@ limitations under the License.
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
display: -webkit-flex;
display: flex;
border-left: 4px solid #ddd;
color: #888;
border-left: 4px solid $preview-widget-bar-color;
color: $preview-widget-fg-color;
}
.mx_LinkPreviewWidget_image {
-webkit-flex: 0 0 100px;
flex: 0 0 100px;
margin-left: 15px;
text-align: center;
@@ -34,7 +32,6 @@ limitations under the License.
.mx_LinkPreviewWidget_caption {
margin-left: 15px;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
@@ -56,7 +53,6 @@ limitations under the License.
.mx_LinkPreviewWidget_cancel {
visibility: hidden;
cursor: pointer;
-webkit-flex: 0 0 40px;
flex: 0 0 40px;
}

14
src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
View File

@@ -20,8 +20,8 @@ limitations under the License.
.mx_MemberDeviceInfo_textButton {
color: #fff;
background-color: #76cfa6;
color: $accent-fg-color;
background-color: $accent-color;
border-radius: 17px;
text-align: center;
padding-left: 1em;
@@ -50,13 +50,13 @@ limitations under the License.
}
/* "Unblacklist" is too long for a regular button: make it wider and
reduce the padding. */
reduce the padding. */
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
width: 8em;
padding-left: 1em;
padding-right: 1em;
}
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
@@ -66,13 +66,13 @@ limitations under the License.
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
color: #76cfa5;
color: $e2e-verified-color;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
color: #e8bf37;
color: $e2e-unverified-color;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
color: #ba6363;
color: $e2e-warning-color;
}

7
src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
View File

@@ -61,7 +61,7 @@ limitations under the License.
.mx_MemberInfo h3 {
text-transform: uppercase;
color: #3d3b39;
color: $h3-color;
font-weight: 600;
font-size: 13px;
margin-top: 16px;
@@ -69,10 +69,9 @@ limitations under the License.
}
.mx_MemberInfo_profileField {
font-color: #999999;
font-size: 13px;
position: relative;
background-color: #fff;
background-color: $primary-bg-color;
}
.mx_MemberInfo_buttons {
@@ -82,7 +81,7 @@ limitations under the License.
.mx_MemberInfo_field {
cursor: pointer;
font-size: 13px;
color: #76cfa6;
color: $accent-color;
margin-left: 8px;
line-height: 23px;
}

22
src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
View File

@@ -20,22 +20,15 @@ limitations under the License.
margin-top: 12px;
margin-right: 20px;
-webkit-flex: 1;
flex: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.mx_MemberList .mx_Spinner {
flex: 0;
-webkit-flex: 0;
}
.mx_MemberList_chevron {
@@ -48,17 +41,16 @@ limitations under the License.
overflow-y: auto;
order: 1;
-webkit-flex: 1 1 0;
flex: 1 1 0px;
}
.mx_MemberList_query {
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
border-radius: 3px;
border: 1px solid #f0f0f0;
border: 1px solid $input-border-color;
padding: 9px;
color: #454545;
background-color: #fff;
color: $primary-fg-color;
background-color: $primary-bg-color;
margin-left: 3px;
font-size: 14px;
margin-bottom: 8px;
@@ -66,13 +58,13 @@ limitations under the License.
}
.mx_MemberList_query::-moz-placeholder {
color: #454545;
color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
}
.mx_MemberList_query::-webkit-input-placeholder {
color: #454545;
color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
}
@@ -80,7 +72,6 @@ limitations under the License.
.mx_MemberList_joined {
order: 2;
flex: 1 0 0;
-webkit-flex: 1 0 0;
overflow-y: auto;
}
@@ -89,14 +80,13 @@ limitations under the License.
.mx_MemberList_invited {
order: 3;
flex: 0 0 100px;
-webkit-flex: 0 0 100px;
overflow-y: auto;
}
*/
.mx_MemberList_invited h2 {
text-transform: uppercase;
color: #3d3b39;
color: $h3-color;
font-weight: 600;
font-size: 13px;
padding-left: 3px;

22
src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
View File

@@ -18,7 +18,7 @@ limitations under the License.
max-width: 960px;
vertical-align: middle;
margin: auto;
border-top: 1px solid #e5e5e5;
border-top: 1px solid $primary-hairline-color;
position: relative;
}
@@ -57,7 +57,7 @@ limitations under the License.
height: 60px;
text-align: center;
font-style: italic;
color: #888;
color: $greyed-fg-color;
}
.mx_MessageComposer_input_wrapper {
@@ -90,10 +90,10 @@ limitations under the License.
}
.mx_MessageComposer_input blockquote {
color: rgb(119, 119, 119);
color: $blockquote-fg-color;
margin: 0 0 16px;
padding: 0 15px;
border-left: 4px solid rgb(221, 221, 221);
border-left: 4px solid $blockquote-bar-color;
}
.mx_MessageComposer_input textarea {
@@ -105,11 +105,9 @@ limitations under the License.
border: 0px;
resize: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #454545;
background-color: #fff;
color: $primary-fg-color;
background-color: $primary-bg-color;
font-size: 14px;
max-height: 120px;
overflow: auto;
@@ -120,11 +118,11 @@ limitations under the License.
/* hack for FF as vertical alignment of custom placeholder text is broken */
.mx_MessageComposer_input textarea::-moz-placeholder {
line-height: 100%;
color: #76cfa6;
color: $accent-color;
opacity: 1.0;
}
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
color: #76cfa6;
color: $accent-color;
}
.mx_MessageComposer_upload,
@@ -153,7 +151,7 @@ limitations under the License.
.mx_MessageComposer_formatbar_wrapper {
width: 100%;
background-color: #f7f7f7;
background-color: $menu-bg-color;
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
}
@@ -170,7 +168,7 @@ limitations under the License.
flex-direction: row;
align-items: center;
font-size: 10px;
color: #888;
color: $greyed-fg-color;
}
.mx_MessageComposer_formatbar * {

0
src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_PresenceLabel.scss
View File

60
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
View File

@@ -16,7 +16,6 @@ limitations under the License.
/* add 20px to the height of the header when editing */
.mx_RoomHeader_editing {
-webit-flex: 0 0 93px ! important;
flex: 0 0 93px ! important;
}
@@ -24,63 +23,36 @@ limitations under the License.
max-width: 960px;
margin: auto;
height: 70px;
-webkit-align-items: center;
align-items: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.mx_RoomHeader_leftRow {
margin-left: -2px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
-webkit-flex: 1;
flex: 1;
}
.mx_RoomHeader_spinner {
height: 36px;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomHeader_textButton {
height: 36px;
background-color: #76cfa6;
background-color: $accent-color;
border-radius: 36px;
margin-right: 8px;
color: #fff;
color: $accent-fg-color;
line-height: 34px;
margin-top: -2px;
text-align: center;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
cursor: pointer;
/*
-webkit-flex: 0 0 90px;
flex: 0 0 90px;
*/
padding-left: 12px;
@@ -88,27 +60,17 @@ limitations under the License.
}
.mx_RoomHeader_cancelButton {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomHeader_rightRow {
margin-top: 4px;
background-color: #fff;
background-color: $primary-bg-color;
display: flex;
align-items: center;
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
@@ -120,7 +82,7 @@ limitations under the License.
.mx_RoomHeader_simpleHeader {
line-height: 70px;
color: #454545;
color: $primary-fg-color;
font-size: 22px;
font-weight: bold;
overflow: hidden;
@@ -138,7 +100,7 @@ limitations under the License.
width: 100%;
height: 31px;
overflow: hidden;
color: #454545;
color: $primary-fg-color;
font-weight: bold;
font-size: 22px;
padding-left: 19px;
@@ -153,7 +115,7 @@ limitations under the License.
}
.mx_RoomHeader_settingsHint {
color: #a2a2a2 ! important;
color: $settings-grey-fg-color ! important;
}
.mx_RoomHeader_searchStatus {
@@ -174,21 +136,21 @@ limitations under the License.
}
.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
color: #76cfa6;
color: $accent-color;
}
.mx_RoomHeader_placeholder {
color: #a2a2a2 ! important;
color: $settings-grey-fg-color ! important;
}
.mx_RoomHeader_editable {
border-bottom: 1px solid #c7c7c7 ! important;
border-bottom: 1px solid $strong-input-border-color ! important;
min-width: 150px;
cursor: text;
}
.mx_RoomHeader_editable:focus {
border-bottom: 1px solid #76CFA6 ! important;
border-bottom: 1px solid $accent-color ! important;
outline: none;
box-shadow: none;
}
@@ -197,7 +159,7 @@ limitations under the License.
vertical-align: bottom;
float: left;
max-height: 42px;
color: #A2A2A2;
color: $settings-grey-fg-color;
font-weight: 300;
font-size: 13px;
margin-left: 19px;

0
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
View File

19
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
View File

@@ -17,20 +17,9 @@ limitations under the License.
.mx_RoomPreviewBar {
text-align: center;
height: 176px;
-webkit-align-items: center;
align-items: center;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@@ -38,16 +27,16 @@ limitations under the License.
}
.mx_RoomPreviewBar_invite_text {
color: #454545;
color: $primary-fg-color;
}
.mx_RoomPreviewBar_join_text {
color: #ff0064;
color: $warning-color;
}
.mx_RoomPreviewBar_preview_text {
margin-top: 25px;
color: #a4a4a4;
color: $settings-grey-fg-color;
}
.mx_RoomPreviewBar_join_text a {
@@ -56,9 +45,7 @@ limitations under the License.
}
.mx_RoomPreviewBar_warning {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
padding: 8px;
}

22
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
View File

@@ -24,10 +24,10 @@ limitations under the License.
.mx_RoomSettings_integrationsButton_error {
position: relative;
height: 36px;
background-color: #76cfa6;
background-color: $accent-color;
border-radius: 36px;
margin-right: 8px;
color: #fff;
color: $accent-fg-color;
line-height: 34px;
text-align: center;
float: right;
@@ -47,8 +47,8 @@ limitations under the License.
font-size: 10pt;
line-height: 1.5em;
border-radius: 5px;
background-color: #000;
color: #fff;
background-color: $accent-color;
color: $accent-fg-color;
}
.mx_RoomSettings_e2eIcon {
@@ -81,7 +81,7 @@ limitations under the License.
.mx_RoomSettings h3 {
text-transform: uppercase;
color: #3d3b39;
color: $h3-color;
font-weight: 600;
font-size: 13px;
margin-top: 36px;
@@ -174,7 +174,7 @@ limitations under the License.
}
.mx_RoomSettings_warning {
color: #ff0064;
color: $warning-color;
font-weight: bold;
margin-top: 8px;
margin-bottom: 8px;
@@ -182,13 +182,13 @@ limitations under the License.
.mx_RoomSettings_editable {
border: 0px;
border-bottom: 1px solid #c7c7c7;
border-bottom: 1px solid $strong-input-border-color;
padding: 0px;
min-width: 240px;
}
.mx_RoomSettings_editable:focus {
border-bottom: 1px solid #76CFA6;
border-bottom: 1px solid $accent-color;
outline: none;
box-shadow: none;
}
@@ -205,7 +205,7 @@ limitations under the License.
}
.mx_RoomSettings_aliasPlaceholder {
color: #a2a2a2;
color: $settings-grey-fg-color;
}
.mx_RoomSettings_buttons {
@@ -220,8 +220,8 @@ limitations under the License.
border-radius: 36px;
font-weight: 400;
font-size: 15px;
color: #fff;
background-color: #76cfa6;
color: $accent-fg-color;
background-color: $accent-color;
width: auto;
margin: auto;
padding: 6px;

18
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
View File

@@ -65,7 +65,7 @@ limitations under the License.
position: absolute;
content: "";
border-radius: 40px;
background-image: url("../img/icons_ellipsis.svg");
background-image: url("../../img/icons_ellipsis.svg");
background-size: 25px;
width: 24px;
height: 24px;
@@ -78,7 +78,7 @@ limitations under the License.
position: absolute;
content: "";
border-radius: 40px;
background: #4A4A4A;
background: $primary-fg-color;
bottom: 0;
width: 24px;
height: 24px;
@@ -103,7 +103,7 @@ limitations under the License.
padding-right: 6px;
padding-top: 2px;
padding-bottom: 3px;
color: rgba(69, 69, 69, 0.8);
color: $roomtile-name-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -142,7 +142,7 @@ limitations under the License.
width: 0;
height: 0;
margin-left: 5px;
border-top: 5px solid #ff0064;
border-top: 5px solid $warning-color;
border-right: 7px solid transparent;
}
@@ -154,7 +154,7 @@ limitations under the License.
right: 8px; /*gutter */
top: 9px;
border-radius: 8px;
color: #fff;
color: $accent-fg-color;
font-weight: 600;
font-size: 10px;
text-align: center;
@@ -171,15 +171,15 @@ limitations under the License.
.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_notificationStateMenu.mx_RoomTile_noBadges .mx_RoomTile_badge {
background-color: rgb(214, 214, 214);
background-color: $neutral-badge-color;
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
background-color: #76cfa6;
background-color: $accent-color;
}
.mx_RoomTile_highlight .mx_RoomTile_badge {
background-color: #ff0064;
background-color: $warning-color;
}
.mx_RoomTile_unread, .mx_RoomTile_highlight {
@@ -187,7 +187,7 @@ limitations under the License.
}
.mx_RoomTile_selected {
background-color: rgba(255, 255, 255, 0.8);
background-color: $roomtile-selected-bg-color;
}
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {

18
src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
View File

@@ -16,19 +16,17 @@ limitations under the License.
.mx_SearchableEntityList {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.mx_SearchableEntityList_query {
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
border-radius: 3px;
border: 1px solid #f0f0f0;
border: 1px solid $input-border-color;
padding: 9px;
color: #454545;
background-color: #fff;
color: $primary-fg-color;
background-color: $primary-bg-color;
margin-left: 3px;
font-size: 15px;
margin-bottom: 8px;
@@ -36,20 +34,19 @@ limitations under the License.
}
.mx_SearchableEntityList_query::-moz-placeholder {
color: #454545;
color: $primary-fg-color;
opacity: 0.5;
font-size: 12px;
}
.mx_SearchableEntityList_query::-webkit-input-placeholder {
color: #454545;
color: $primary-fg-color;
opacity: 0.5;
font-size: 12px;
}
.mx_SearchableEntityList_listWrapper {
flex: 1;
-webkit-flex: 1;
overflow-y: auto;
}
@@ -67,14 +64,13 @@ limitations under the License.
.mx_SearchableEntityList_hrWrapper {
width: 100%;
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
}
.mx_SearchableEntityList hr {
height: 1px;
border: 0px;
color: #e1dddd;
background-color: #e1dddd;
color: $primary-fg-color;
background-color: $primary-fg-color;
margin-right: 15px;
margin-top: 11px;
margin-bottom: 11px;

6
src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss
View File

@@ -27,7 +27,7 @@ limitations under the License.
.mx_TabCompleteBar_command {
margin-right: 8px;
background-color: #76CFA6;
background-color: $accent-color;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
@@ -41,7 +41,7 @@ limitations under the License.
.mx_TabCompleteBar_command .mx_TabCompleteBar_text {
opacity: 1.0;
vertical-align: initial;
color: #fff;
color: $accent-fg-color;
}
.mx_TabCompleteBar_item img {
@@ -50,7 +50,7 @@ limitations under the License.
}
.mx_TabCompleteBar_text {
color: #4a4a4a;
color: $primary-fg-color;
vertical-align: middle;
opacity: 0.5;
}

2
src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css → src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
View File

@@ -19,7 +19,7 @@ limitations under the License.
max-width: 960px;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid $primary-hairline-color;
}
.mx_TopUnreadMessagesBar_scrollUp {

0
src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css → src/skins/vector/css/matrix-react-sdk/views/settings/_DevicesPanel.scss
View File

2
src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css → src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss
View File

@@ -24,7 +24,7 @@ limitations under the License.
}
.mx_IntegrationsManager iframe {
background-color: #fff;
background-color: $primary-bg-color;
border: 0px;
width: 100%;
height: 100%;

4
src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css → src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss
View File

@@ -15,8 +15,8 @@ limitations under the License.
*/
.mx_CallView_voice {
background-color: #76cfa6;
color: #fff;
background-color: $accent-color;
color: $accent-fg-color;
cursor: pointer;
text-align: center;
padding: 6px;

10
src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css → src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
View File

@@ -18,7 +18,7 @@ limitations under the License.
text-align: center;
border: 1px solid #a4a4a4;
border-radius: 8px;
background-color: #fff;
background-color: $primary-bg-color;
position: fixed;
z-index: 1000;
padding: 6px;
@@ -41,14 +41,12 @@ limitations under the License.
.mx_IncomingCallBox_buttons {
display: flex;
display: -webkit-flex;
}
.mx_IncomingCallBox_buttons_cell {
vertical-align: middle;
padding: 6px;
flex: 1;
-webkit-flex: 1;
}
.mx_IncomingCallBox_buttons_decline,
@@ -58,14 +56,14 @@ limitations under the License.
height: 36px;
line-height: 36px;
border-radius: 36px;
color: #fff;
color: $accent-fg-color;
margin: auto;
}
.mx_IncomingCallBox_buttons_decline {
background-color: #f48080;
background-color: $voip-decline-color;
}
.mx_IncomingCallBox_buttons_accept {
background-color: #80f480;
background-color: $voip-accept-color;
}

0
src/skins/vector/css/matrix-react-sdk/views/voip/VideoView.css → src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss
View File