Merge branch 'develop' into luke/feature-animated-status-bar
This commit is contained in:
Luke Barnard
commit
c4d246cd72
99 changed files with 1277 additions and 705 deletions
|
|
@ -29,7 +29,8 @@ body {
|
|||
Arial here. */
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
font-size: 15px;
|
||||
color: #454545;
|
||||
background-color: $primary-bg-color;
|
||||
color: $primary-fg-color;
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
/* This should render the fonts the same accross browsers */
|
||||
|
|
@ -41,7 +42,7 @@ div.error {
|
|||
}
|
||||
|
||||
h2 {
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
margin-top: 16px;
|
||||
|
|
@ -51,15 +52,20 @@ h2 {
|
|||
a:hover,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
input[type=text], input[type=password], textarea {
|
||||
background-color: transparent;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
input[type=text].error, input[type=password].error {
|
||||
border: 1px solid red;
|
||||
border: 1px solid $warning-color;
|
||||
}
|
||||
|
||||
input[type=text]:focus, textarea:focus {
|
||||
border: 1px solid #76CFA6;
|
||||
border: 1px solid $accent-color;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -77,10 +83,7 @@ textarea {
|
|||
/* applied to side-panels and messagepanel when in RoomSettings */
|
||||
.mx_fadable {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.2s ease-in-out;
|
||||
-moz-transition: opacity 0.2s ease-in-out;
|
||||
-ms-transition: opacity 0.2s ease-in-out;
|
||||
-o-transition: opacity 0.2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
|
||||
|
|
@ -122,14 +125,8 @@ textarea {
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -148,8 +145,8 @@ textarea {
|
|||
}
|
||||
|
||||
.mx_Dialog {
|
||||
background-color: #fff;
|
||||
color: #747474;
|
||||
background-color: $primary-bg-color;
|
||||
color: $light-fg-color;
|
||||
z-index: 4010;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
|
|
@ -168,13 +165,13 @@ textarea {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #e9e9e9;
|
||||
background-color: $dialog-background-bg-color;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mx_Dialog_lightbox .mx_Dialog_background {
|
||||
opacity: 0.85;
|
||||
background-color: #000;
|
||||
background-color: $lightbox-background-bg-color;
|
||||
}
|
||||
|
||||
.mx_Dialog_lightbox .mx_Dialog {
|
||||
|
|
@ -190,7 +187,7 @@ textarea {
|
|||
.mx_Dialog_content {
|
||||
margin: 24px 58px 68px 0;
|
||||
font-size: 14px;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
|
@ -202,7 +199,7 @@ textarea {
|
|||
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;
|
||||
|
|
@ -212,26 +209,26 @@ textarea {
|
|||
padding-right: 1.5em;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
color: #76cfa6;
|
||||
background-color: #fff;
|
||||
color: $accent-color;
|
||||
background-color: $primary-bg-color;
|
||||
|
||||
/* align images in buttons (eg spinners) */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
|
||||
color: #fff;
|
||||
background-color: #76cfa6;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
|
||||
background-color: #ff0064;
|
||||
border: solid 1px #ff0064;
|
||||
background-color: $warning-color;
|
||||
border: solid 1px $warning-color;
|
||||
}
|
||||
|
||||
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
|
||||
background-color: #777777;
|
||||
border: solid 1px #777777;
|
||||
background-color: $light-fg-color;
|
||||
border: solid 1px $light-fg-color;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
|
@ -241,11 +238,11 @@ textarea {
|
|||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
line-height: 1.4;
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_Dialog_title.danger {
|
||||
color: #ff0064;
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_TextInputDialog_label {
|
||||
|
|
@ -256,10 +253,10 @@ textarea {
|
|||
.mx_TextInputDialog_input {
|
||||
font-size: 15px;
|
||||
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;
|
||||
}
|
||||
|
||||
.mx_emojione {
|
||||
|
|
@ -268,19 +265,19 @@ textarea {
|
|||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: #76CFA6;
|
||||
color: white;
|
||||
background-color: $accent-color;
|
||||
color: $selection-fg-color;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #76CFA6;
|
||||
color: white;
|
||||
background-color: $accent-color;
|
||||
color: $selection-fg-color;
|
||||
}
|
||||
|
||||
/** green button with rounded corners */
|
||||
.mx_textButton {
|
||||
color: #fff;
|
||||
background-color: #76cfa6;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
border-radius: 17px;
|
||||
text-align: center;
|
||||
padding-left: 1em;
|
||||
74
src/skins/vector/css/_components.scss
Normal file
74
src/skins/vector/css/_components.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
// autogenerated by rethemendex.sh
|
||||
@import "./_common.scss";
|
||||
@import "./matrix-react-sdk/structures/_ContextualMenu.scss";
|
||||
@import "./matrix-react-sdk/structures/_CreateRoom.scss";
|
||||
@import "./matrix-react-sdk/structures/_FilePanel.scss";
|
||||
@import "./matrix-react-sdk/structures/_MatrixChat.scss";
|
||||
@import "./matrix-react-sdk/structures/_NotificationPanel.scss";
|
||||
@import "./matrix-react-sdk/structures/_RoomStatusBar.scss";
|
||||
@import "./matrix-react-sdk/structures/_RoomView.scss";
|
||||
@import "./matrix-react-sdk/structures/_SearchBox.scss";
|
||||
@import "./matrix-react-sdk/structures/_UploadBar.scss";
|
||||
@import "./matrix-react-sdk/structures/_UserSettings.scss";
|
||||
@import "./matrix-react-sdk/structures/login/_Login.scss";
|
||||
@import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss";
|
||||
@import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss";
|
||||
@import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss";
|
||||
@import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss";
|
||||
@import "./matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_AddressSelector.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_AddressTile.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_RichText.scss";
|
||||
@import "./matrix-react-sdk/views/login/_ServerConfig.scss";
|
||||
@import "./matrix-react-sdk/views/messages/_MImageBody.scss";
|
||||
@import "./matrix-react-sdk/views/messages/_MNoticeBody.scss";
|
||||
@import "./matrix-react-sdk/views/messages/_MTextBody.scss";
|
||||
@import "./matrix-react-sdk/views/messages/_TextualEvent.scss";
|
||||
@import "./matrix-react-sdk/views/messages/_UnknownBody.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_Autocomplete.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_EntityTile.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_EventTile.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_MemberInfo.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_MemberList.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_MessageComposer.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_RoomHeader.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_RoomList.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_RoomPreviewBar.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_RoomSettings.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_RoomTile.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_TabCompleteBar.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss";
|
||||
@import "./matrix-react-sdk/views/settings/_DevicesPanel.scss";
|
||||
@import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss";
|
||||
@import "./matrix-react-sdk/views/voip/_CallView.scss";
|
||||
@import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss";
|
||||
@import "./matrix-react-sdk/views/voip/_VideoView.scss";
|
||||
@import "./vector-web/_fonts.scss";
|
||||
@import "./vector-web/structures/_CompatibilityPage.scss";
|
||||
@import "./vector-web/structures/_LeftPanel.scss";
|
||||
@import "./vector-web/structures/_RightPanel.scss";
|
||||
@import "./vector-web/structures/_RoomDirectory.scss";
|
||||
@import "./vector-web/structures/_RoomSubList.scss";
|
||||
@import "./vector-web/structures/_ViewSource.scss";
|
||||
@import "./vector-web/views/context_menus/_MessageContextMenu.scss";
|
||||
@import "./vector-web/views/context_menus/_NotificationStateContextMenu.scss";
|
||||
@import "./vector-web/views/context_menus/_RoomTagContextMenu.scss";
|
||||
@import "./vector-web/views/dialogs/_ChangelogDialog.scss";
|
||||
@import "./vector-web/views/directory/_NetworkDropdown.scss";
|
||||
@import "./vector-web/views/elements/_ImageView.scss";
|
||||
@import "./vector-web/views/elements/_Spinner.scss";
|
||||
@import "./vector-web/views/globals/_GuestWarningBar.scss";
|
||||
@import "./vector-web/views/globals/_MatrixToolbar.scss";
|
||||
@import "./vector-web/views/messages/_MessageTimestamp.scss";
|
||||
@import "./vector-web/views/messages/_SenderProfile.scss";
|
||||
@import "./vector-web/views/rooms/_RoomDropTarget.scss";
|
||||
@import "./vector-web/views/rooms/_RoomTooltip.scss";
|
||||
@import "./vector-web/views/rooms/_SearchBar.scss";
|
||||
@import "./vector-web/views/settings/_Notifications.scss";
|
||||
|
|
@ -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;
|
||||
|
|
@ -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,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 {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
/*
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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,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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
|
|
@ -31,6 +31,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberEventListSummary_toggle {
|
||||
color:#76cfa6;
|
||||
color:$accent-color;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@ limitations under the License.
|
|||
opacity: 0.8;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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 * {
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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%;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
13
src/skins/vector/css/rethemendex.sh
Executable file
13
src/skins/vector/css/rethemendex.sh
Executable file
|
|
@ -0,0 +1,13 @@
|
|||
#!/bin/bash
|
||||
|
||||
cd `dirname $0`
|
||||
|
||||
{
|
||||
echo "// autogenerated by rethemendex.sh"
|
||||
|
||||
find . \! \( -path ./themes -prune \) -iname _\*.scss |
|
||||
fgrep -v _components.scss | LC_ALL=C sort |
|
||||
while read i; do
|
||||
echo "@import \"$i\";"
|
||||
done
|
||||
} > _components.scss
|
||||
106
src/skins/vector/css/themes/_base.scss
Normal file
106
src/skins/vector/css/themes/_base.scss
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
|
||||
// typical text (dark-on-white in light skin)
|
||||
$primary-fg-color: #454545;
|
||||
$primary-bg-color: #ffffff;
|
||||
|
||||
// used for dialog box text
|
||||
$light-fg-color: #747474;
|
||||
|
||||
// used for focusing form controls
|
||||
$focus-bg-color: #dddddd;
|
||||
|
||||
// button UI (white-on-green in light skin)
|
||||
$accent-fg-color: #ffffff;
|
||||
$accent-color: #76CFA6;
|
||||
|
||||
$selection-fg-color: $primary-bg-color;
|
||||
|
||||
// red warning colour
|
||||
$warning-color: #ff0064;
|
||||
|
||||
// left-panel style muted accent color
|
||||
$secondary-accent-color: #eaf5f0;
|
||||
|
||||
// used by RoomDirectory permissions
|
||||
$plinth-bg-color: $secondary-accent-color;
|
||||
|
||||
// used by RoomDropTarget
|
||||
$droptarget-bg-color: rgba(255,255,255,0.5);
|
||||
|
||||
// used by AddressSelector
|
||||
$selected-color: #eaf5f0;
|
||||
|
||||
// selected for hoverover & selected event tiles
|
||||
$event-selected-color: #f7f7f7;
|
||||
|
||||
// used for the hairline dividers in RoomView
|
||||
$primary-hairline-color: #e5e5e5;
|
||||
|
||||
// used for the border of input text fields
|
||||
$input-border-color: #f0f0f0;
|
||||
|
||||
// apart from login forms, which have stronger border
|
||||
$strong-input-border-color: #c7c7c7;
|
||||
|
||||
// used for UserSettings EditableText
|
||||
$input-underline-color: rgba(151, 151, 151, 0.5);
|
||||
$input-fg-color: rgba(74, 74, 74, 0.9);
|
||||
|
||||
// context menus
|
||||
$menu-border-color: rgba(187, 187, 187, 0.5);
|
||||
$menu-bg-color: #f6f6f6;
|
||||
|
||||
$avatar-initial-color: #ffffff;
|
||||
|
||||
$h3-color: #3d3b39;
|
||||
|
||||
$dialog-background-bg-color: #e9e9e9;
|
||||
$lightbox-background-bg-color: #000;
|
||||
|
||||
$greyed-fg-color: #888;
|
||||
|
||||
$neutral-badge-color: #dbdbdb;
|
||||
|
||||
$preview-widget-bar-color: #ddd;
|
||||
$preview-widget-fg-color: $greyed-fg-color;
|
||||
|
||||
$blockquote-bar-color: #ddd;
|
||||
$blockquote-fg-color: #777;
|
||||
|
||||
$settings-grey-fg-color: #a2a2a2;
|
||||
|
||||
$voip-decline-color: #f48080;
|
||||
$voip-accept-color: #80f480;
|
||||
|
||||
// ********************
|
||||
|
||||
$roomtile-name-color: rgba(69, 69, 69, 0.8);
|
||||
$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
|
||||
|
||||
$roomsublist-label-fg-color: $h3-color;
|
||||
$roomsublist-label-bg-color: #d3efe1;
|
||||
|
||||
// ********************
|
||||
|
||||
// event tile lifecycle
|
||||
$event-encrypting-color: #abddbc;
|
||||
$event-sending-color: #ddd;
|
||||
$event-notsent-color: #f44;
|
||||
|
||||
// event timestamp
|
||||
$event-timestamp-color: #acacac;
|
||||
|
||||
$edit-button-url: "../../img/icon_context_message.svg";
|
||||
|
||||
// e2e
|
||||
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
|
||||
$e2e-unverified-color: #e8bf37;
|
||||
$e2e-warning-color: #ba6363;
|
||||
|
||||
/*** ImageView ***/
|
||||
$lightbox-bg-color: #454545;
|
||||
$lightbox-fg-color: #ffffff;
|
||||
$lightbox-border-color: #ffffff;
|
||||
|
||||
// unused?
|
||||
$progressbar-color: #000;
|
||||
117
src/skins/vector/css/themes/_dark.scss
Normal file
117
src/skins/vector/css/themes/_dark.scss
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
|
||||
// typical text (dark-on-white in light skin)
|
||||
$primary-fg-color: #dddddd;
|
||||
$primary-bg-color: #2d2d2d;
|
||||
|
||||
// used for focusing form controls
|
||||
$focus-bg-color: #101010;
|
||||
|
||||
// used for dialog box text
|
||||
$light-fg-color: #747474;
|
||||
|
||||
// button UI (white-on-green in light skin)
|
||||
$accent-fg-color: $primary-bg-color;
|
||||
$accent-color: #76CFA6;
|
||||
|
||||
$selection-fg-color: $primary-bg-color;
|
||||
|
||||
// red warning colour
|
||||
$warning-color: #ff0064;
|
||||
|
||||
// left-panel style muted accent color
|
||||
$secondary-accent-color: $primary-bg-color;
|
||||
|
||||
// used by RoomDirectory permissions
|
||||
$plinth-bg-color: #474747;
|
||||
|
||||
// used by RoomDropTarget
|
||||
$droptarget-bg-color: rgba(45,45,45,0.5);
|
||||
|
||||
// used by AddressSelector
|
||||
$selected-color: #eaf5f0;
|
||||
|
||||
// selected for hoverover & selected event tiles
|
||||
$event-selected-color: #353535;
|
||||
|
||||
// used for the hairline dividers in RoomView
|
||||
$primary-hairline-color: #474747;
|
||||
|
||||
// used for the border of input text fields
|
||||
$input-border-color: #3a3a3a;
|
||||
|
||||
// apart from login forms, which have stronger border
|
||||
$strong-input-border-color: #656565;
|
||||
|
||||
// used for UserSettings EditableText
|
||||
$input-underline-color: $primary-fg-color;
|
||||
$input-fg-color: $primary-fg-color;
|
||||
|
||||
// context menus
|
||||
$menu-border-color: rgba(187, 187, 187, 0.5);
|
||||
$menu-bg-color: #373737;
|
||||
|
||||
$avatar-initial-color: #2d2d2d;
|
||||
|
||||
$h3-color: $primary-fg-color;
|
||||
|
||||
$dialog-background-bg-color: #000;
|
||||
$lightbox-background-bg-color: #000;
|
||||
|
||||
$greyed-fg-color: #888;
|
||||
|
||||
$neutral-badge-color: #888;
|
||||
|
||||
$preview-widget-bar-color: $menu-bg-color;
|
||||
$preview-widget-fg-color: $greyed-fg-color;
|
||||
|
||||
$blockquote-bar-color: #ddd;
|
||||
$blockquote-fg-color: #777;
|
||||
|
||||
$settings-grey-fg-color: #a2a2a2;
|
||||
|
||||
$voip-decline-color: #f48080;
|
||||
$voip-accept-color: #80f480;
|
||||
|
||||
// ********************
|
||||
|
||||
$roomtile-name-color: rgba(186, 186, 186, 0.8);
|
||||
$roomtile-selected-bg-color: rgba(255, 255, 255, 0.05);
|
||||
|
||||
$roomsublist-label-fg-color: $h3-color;
|
||||
$roomsublist-label-bg-color: #454545;
|
||||
|
||||
// ********************
|
||||
|
||||
// event tile lifecycle
|
||||
$event-encrypting-color: #abddbc;
|
||||
$event-sending-color: #ddd;
|
||||
$event-notsent-color: #f44;
|
||||
|
||||
// event timestamp
|
||||
$event-timestamp-color: #acacac;
|
||||
|
||||
$edit-button-url: "../../img/icon_context_message_dark.svg";
|
||||
|
||||
// e2e
|
||||
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
|
||||
$e2e-unverified-color: #e8bf37;
|
||||
$e2e-warning-color: #ba6363;
|
||||
|
||||
/*** ImageView ***/
|
||||
$lightbox-bg-color: #454545;
|
||||
$lightbox-fg-color: #ffffff;
|
||||
$lightbox-border-color: #ffffff;
|
||||
|
||||
// unused?
|
||||
$progressbar-color: #000;
|
||||
|
||||
// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it
|
||||
// better match the theme. Typically applied to dark grey 'off' buttons or
|
||||
// light grey 'on' buttons.
|
||||
.mx_filterFlipColor {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
.gm-scrollbar .thumb {
|
||||
filter: invert();
|
||||
}
|
||||
3
src/skins/vector/css/themes/dark.scss
Normal file
3
src/skins/vector/css/themes/dark.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import "_base.scss";
|
||||
@import "_dark.scss";
|
||||
@import "../_components.scss";
|
||||
2
src/skins/vector/css/themes/light.scss
Normal file
2
src/skins/vector/css/themes/light.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import "_base.scss";
|
||||
@import "../_components.scss";
|
||||
|
|
@ -7,42 +7,42 @@
|
|||
*/
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
|
||||
src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
|
||||
src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
|
||||
src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
|
||||
src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
|
||||
src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
|
||||
src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -54,14 +54,14 @@
|
|||
|
||||
@font-face {
|
||||
font-family: 'Fira Mono';
|
||||
src: url('../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
|
||||
src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Mono';
|
||||
src: url('../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
|
||||
src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -17,13 +17,8 @@ limitations under the License.
|
|||
.mx_LeftPanel {
|
||||
position: relative;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_hideButton {
|
||||
|
|
@ -39,13 +34,8 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_LeftPanel .mx_RoomList_scrollbar {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
-webkit-flex: 1 1 0;
|
||||
flex: 1 1 0;
|
||||
|
||||
overflow-y: auto;
|
||||
|
|
@ -57,16 +47,11 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
-moz-box-ordinal-group: 3;
|
||||
-ms-flex-order: 3;
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
|
||||
border-top: 1px solid rgba(118, 207, 166, 0.2);
|
||||
margin-left: 16px; /* gutter */
|
||||
margin-right: 16px; /* gutter */
|
||||
-webkit-flex: 0 0 60px;
|
||||
flex: 0 0 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -17,26 +17,16 @@ limitations under the License.
|
|||
.mx_RightPanel {
|
||||
position: relative;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_RightPanel_header {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
margin-right: 20px;
|
||||
|
||||
-webkit-flex: 0 0 70px;
|
||||
flex: 0 0 70px;
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +35,7 @@ limitations under the License.
|
|||
.mx_RightPanel_headerButtonGroup {
|
||||
margin-top: 6px;
|
||||
float: left;
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
|
|
@ -68,12 +58,13 @@ limitations under the License.
|
|||
width: 25px;
|
||||
height: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(118, 207, 166, 0.2);
|
||||
background-color: $accent-color;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton_badge {
|
||||
font-size: 11px;
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
font-weight: bold;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
|
@ -81,33 +72,23 @@ limitations under the License.
|
|||
.mx_RightPanel .mx_MemberList,
|
||||
.mx_RightPanel .mx_MemberInfo,
|
||||
.mx_RightPanel_blank {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
flex: 1 1 0;
|
||||
-webkit-flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mx_RightPanel_footer {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
-moz-box-ordinal-group: 3;
|
||||
-ms-flex-order: 3;
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
|
||||
border-top: 1px solid #e5e5e5;
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
margin-right: 20px;
|
||||
|
||||
-webkit-flex: 0 0 60px;
|
||||
flex: 0 0 60px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_footer .mx_RightPanel_invite {
|
||||
line-height: 35px;
|
||||
font-size: 14px;
|
||||
color: #4A4A4A;
|
||||
color: $primary-fg-color;
|
||||
padding-top: 13px;
|
||||
padding-left: 5px;
|
||||
cursor: pointer;
|
||||
|
|
@ -20,35 +20,23 @@ limitations under the License.
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 12px;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_list {
|
||||
-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_RoomDirectory_list .mx_RoomView_messageListWrapper {
|
||||
justify-content: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_listheader {
|
||||
|
|
@ -72,13 +60,12 @@ limitations under the License.
|
|||
|
||||
.mx_RoomDirectory_tableWrapper {
|
||||
overflow-y: auto;
|
||||
-webkit-flex: 1 1 0;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table {
|
||||
font-size: 14px;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
table-layout: fixed;
|
||||
|
|
@ -110,11 +97,11 @@ limitations under the License.
|
|||
padding-right: 5px;
|
||||
height: 15px;
|
||||
border-radius: 11px;
|
||||
background-color: #eaf5f0;
|
||||
background-color: $plinth-bg-color;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
color: #61c295;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_topic {
|
||||
|
|
@ -123,7 +110,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomDirectory_alias {
|
||||
font-size: 12px;
|
||||
color: #b3b3b3;
|
||||
color: $settings-grey-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_roomMemberCount {
|
||||
|
|
@ -29,7 +29,7 @@ limitations under the License.
|
|||
.mx_RoomSubList_label {
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
color: $roomsublist-label-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
width: 203px; /* padding + width = LHS Panel width */
|
||||
|
|
@ -39,8 +39,8 @@ limitations under the License.
|
|||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
cursor: pointer;
|
||||
background-color: #d3efe1;
|
||||
border-top: solid 2px #eaf5f0;
|
||||
background-color: $roomsublist-label-bg-color;
|
||||
border-top: solid 2px $secondary-accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_label.mx_RoomSubList_fixed {
|
||||
|
|
@ -63,7 +63,7 @@ limitations under the License.
|
|||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
padding-left: 5px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
|
@ -80,14 +80,14 @@ limitations under the License.
|
|||
right: 8px; /*gutter */
|
||||
top: 7px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
color: $accent-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
padding-top: 1px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
background-color: #76cfa6;
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -97,7 +97,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_RoomSubList_badgeHighlight {
|
||||
background-color: #ff0064;
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
/* This is the bottom of the speech bubble */
|
||||
|
|
@ -108,7 +108,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;
|
||||
}
|
||||
|
||||
|
|
@ -129,7 +129,7 @@ limitations under the License.
|
|||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 6px solid #76cfa6;
|
||||
border-top: 6px solid $accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevronUp {
|
||||
|
|
@ -137,14 +137,14 @@ limitations under the License.
|
|||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 6px solid #76cfa6;
|
||||
border-bottom: 6px solid $accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevronRight {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-left: 6px solid #76cfa6;
|
||||
border-left: 6px solid $accent-color;
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
|
||||
|
|
@ -165,7 +165,7 @@ limitations under the License.
|
|||
.mx_RoomSubList_line {
|
||||
display: inline-block;
|
||||
width: 159px;
|
||||
border-top: dotted 2px #76cfa6;
|
||||
border-top: dotted 2px $accent-color;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -179,7 +179,7 @@ limitations under the License.
|
|||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
padding-left: 7px;
|
||||
|
|
@ -198,20 +198,20 @@ limitations under the License.
|
|||
right: 8px; /*gutter */
|
||||
top: -2px;
|
||||
border-radius: 8px;
|
||||
border: solid 1px #76cfa6;
|
||||
color: #fff;
|
||||
border: solid 1px $accent-color;
|
||||
color: $accent-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
padding-top: 1px;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
|
||||
background-color: #76cfa6;
|
||||
background-color: $accent-color;
|
||||
border: 0;
|
||||
padding-top: 3px;
|
||||
padding-left: 4px;
|
||||
|
|
@ -219,7 +219,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
|
||||
background-color: #ff0064;
|
||||
background-color: $warning-color;
|
||||
border: 0;
|
||||
padding-top: 3px;
|
||||
padding-left: 4px;
|
||||
|
|
@ -31,7 +31,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomTagContextMenu_field:last-child {
|
||||
padding-bottom: 4px;
|
||||
color: #ff0064;
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {
|
||||
|
|
@ -70,8 +70,7 @@ limitations under the License.
|
|||
border-right-style: none;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
border-color: #bbbbbb;
|
||||
opacity: 0.4;
|
||||
border-color: $menu-border-color;
|
||||
}
|
||||
|
||||
.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {
|
||||
|
|
@ -21,14 +21,14 @@ limitations under the License.
|
|||
.mx_NetworkDropdown_input {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #c7c7c7;
|
||||
border: 1px solid $strong-input-border-color;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_arrow {
|
||||
border-color: #4a4a4a transparent transparent;
|
||||
border-color: $primary-fg-color transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 5px 0;
|
||||
display: block;
|
||||
|
|
@ -67,12 +67,12 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f
|
|||
margin: 0;
|
||||
padding: 0px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #76cfa6;
|
||||
background-color: white;
|
||||
border: 1px solid $accent-color;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
|
||||
background-color: #ddd;
|
||||
background-color: $focus-bg-color;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_menu_network {
|
||||
|
|
@ -19,39 +19,27 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_ImageView {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_ImageView_lhs {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
order: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1 1 10%;
|
||||
min-width: 60px;
|
||||
/*
|
||||
background-color: #080;
|
||||
height: 20px;
|
||||
*/
|
||||
// background-color: #080;
|
||||
// height: 20px;
|
||||
}
|
||||
|
||||
.mx_ImageView_content {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
order: 2;
|
||||
/* min-width hack needed for FF */
|
||||
min-width: 0px;
|
||||
height: 90%;
|
||||
-webkit-flex: 15;
|
||||
flex: 15 15 0;
|
||||
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -62,7 +50,7 @@ limitations under the License.
|
|||
max-height: 100%;
|
||||
/* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
|
||||
object-fit: contain;
|
||||
/* background-image: url('../img/trans.png'); */
|
||||
/* background-image: url('../../img/trans.png'); */
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
|
|
@ -78,16 +66,13 @@ limitations under the License.
|
|||
.mx_ImageView_label {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: center;
|
||||
-webkit-justify-content: center;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
min-height: 100%;
|
||||
max-width: 240px;
|
||||
color: #fff;
|
||||
color: $lightbox-fg-color;
|
||||
}
|
||||
|
||||
.mx_ImageView_cancel {
|
||||
|
|
@ -114,10 +99,10 @@ limitations under the License.
|
|||
margin-top: 24px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 5px;
|
||||
background-color: #454545;
|
||||
background-color: $lightbox-bg-color;
|
||||
font-size: 14px;
|
||||
padding: 9px;
|
||||
border: 1px solid #fff;
|
||||
border: 1px solid $lightbox-border-color;
|
||||
}
|
||||
|
||||
.mx_ImageView_size {
|
||||
|
|
@ -125,7 +110,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ImageView_link {
|
||||
color: #fff ! important;
|
||||
color: $lightbox-fg-color ! important;
|
||||
text-decoration: none ! important;
|
||||
}
|
||||
|
||||
|
|
@ -141,13 +126,9 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ImageView_rhs {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
order: 3;
|
||||
-webkit-flex: 1;
|
||||
flex: 1 1 10%;
|
||||
min-width: 300px;
|
||||
/*
|
||||
background-color: #800;
|
||||
height: 20px;
|
||||
*/
|
||||
// background-color: #800;
|
||||
// height: 20px;
|
||||
}
|
||||
|
|
@ -15,16 +15,12 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_Spinner {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
-webkit-flex: 1;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_middlePanel .mx_Spinner {
|
||||
|
|
@ -15,15 +15,10 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_GuestWarningBar {
|
||||
background-color: #76cfa6;
|
||||
color: #fff;
|
||||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +29,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_GuestWarningBar a {
|
||||
color: #fff ! important;
|
||||
color: $accent-fg-color ! important;
|
||||
text-decoration: underline ! important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -15,15 +15,10 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_MatrixToolbar {
|
||||
background-color: #76cfa6;
|
||||
color: #fff;
|
||||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
@ -34,13 +29,12 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MatrixToolbar_content {
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_link
|
||||
{
|
||||
color: #fff ! important;
|
||||
color: $accent-fg-color ! important;
|
||||
text-decoration: underline ! important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -22,9 +22,9 @@ limitations under the License.
|
|||
margin-bottom: 7px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border: 1px dashed #76cfa6;
|
||||
color: #454545;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
border: 1px dashed $accent-color;
|
||||
color: $primary-fg-color;
|
||||
background-color: $droptarget-bg-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomDropTarget_avatar {
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
border-radius: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -21,16 +21,16 @@ 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;
|
||||
}
|
||||
|
||||
.mx_RoomTooltip_chevron:after{
|
||||
.mx_RoomTooltip_chevron:after {
|
||||
content:'';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 7px solid transparent;
|
||||
border-right: 7px solid #fff;
|
||||
border-right: 7px solid $primary-bg-color;
|
||||
border-bottom: 7px solid transparent;
|
||||
position:absolute;
|
||||
top: -7px;
|
||||
|
|
@ -40,14 +40,14 @@ limitations under the License.
|
|||
.mx_RoomTooltip {
|
||||
display: none;
|
||||
position: fixed;
|
||||
border: 1px solid rgba(187, 187, 187, 0.5);
|
||||
border: 1px solid $menu-border-color;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
z-index: 2000;
|
||||
padding: 5px;
|
||||
pointer-events: none;
|
||||
line-height: 14px;
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
|
|
@ -18,21 +18,18 @@ limitations under the License.
|
|||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
align-items: center;
|
||||
-webkit-align-items: center;
|
||||
}
|
||||
|
||||
.mx_SearchBar_input {
|
||||
display: inline block;
|
||||
border-radius: 3px 0px 0px 3px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid $input-border-color;
|
||||
font-size: 15px;
|
||||
padding: 9px;
|
||||
padding-left: 11px;
|
||||
width: auto;
|
||||
flex: 1 1 0;
|
||||
-webkit-flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mx_SearchBar_searchButton {
|
||||
|
|
@ -41,7 +38,7 @@ limitations under the License.
|
|||
width: 37px;
|
||||
height: 37px;
|
||||
border-radius: 0px 3px 3px 0px;
|
||||
background-color: #76CFA6;
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
@keyframes pulsate {
|
||||
|
|
@ -61,8 +58,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;
|
||||
margin-left: 7px;
|
||||
|
|
@ -74,9 +71,9 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_SearchBar_unselected {
|
||||
background-color: #fff;
|
||||
color: #76CFA6;
|
||||
border: #76CFA6 1px solid;
|
||||
background-color: $primary-bg-color;
|
||||
color: $accent-color;
|
||||
border: $accent-color 1px solid;
|
||||
}
|
||||
|
||||
.mx_SearchBar_cancel {
|
||||
|
|
@ -58,7 +58,7 @@ limitations under the License.
|
|||
|
||||
.mx_UserNotifSettings_keywords {
|
||||
cursor: pointer;
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_UserSettings_devicesTable td {
|
||||
Loading…
Add table
Add a link
Reference in a new issue