OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

initial stab at an official dark theme via the magic of SASS. 

SVGs are all broken, and some of the more exotic colours haven't been updated. There's been no attempt to use SASS to remove duplication from the CSS yet.
no attempt to switch it at runtime yet.
pull/2973/head
Matthew Hodgson 2016-12-28 04:04:43 +00:00
parent 33f0eaada0
commit c6beaa1631
57 changed files with 388 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/skins/vector/css/_common.scss
View File

@ -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,7 +52,7 @@ h2 {
a:hover,
a:link,
a:visited {
color: #76cfa6;
color: $accent-color;
}
input[type=text].error, input[type=password].error {
@ -59,7 +60,7 @@ input[type=text].error, input[type=password].error {
}
input[type=text]:focus, textarea:focus {
border: 1px solid #76CFA6;
border: 1px solid $accent-color;
outline: none;
box-shadow: none;
}
@ -148,8 +149,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;
@ -190,7 +191,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 +203,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 +213,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 +242,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 +257,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 +269,19 @@ textarea {
}
::-moz-selection {
background-color: #76CFA6;
background-color: $accent-color;
color: white;
}
::selection {
background-color: #76CFA6;
background-color: $accent-color;
color: white;
}
/** 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;

1
src/skins/vector/css/_components.scss
View File

@ -1,4 +1,5 @@
// autogenerated by rethemendex.sh
@import "_common";
@import "matrix-react-sdk/structures/_ContextualMenu";
@import "matrix-react-sdk/structures/_CreateRoom";
@import "matrix-react-sdk/structures/_FilePanel";

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

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

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

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

10
src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
View File

@ -58,12 +58,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 +90,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 +100,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 +111,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 {

4
src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
View File

@ -91,7 +91,7 @@ limitations under the License.
-webkit-order: 1;
order: 1;
background-color: #eaf5f0;
background-color: $secondary-accent-color;
-webkit-flex: 0 0 235px;
flex: 0 0 235px;
@ -111,7 +111,7 @@ limitations under the License.
padding-left: 20px;
padding-right: 22px;
background-color: #fff;
background-color: $primary-bg-color;
-webkit-flex: 1;
flex: 1;

7
src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
View File

@ -51,7 +51,7 @@ limitations under the License.
}
.mx_NotificationPanel .mx_EventTile_roomName a {
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_NotificationPanel .mx_EventTile_avatar {
@ -61,8 +61,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 +93,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 {

16
src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
View File

@ -36,7 +36,7 @@ limitations under the License.
}
.mx_RoomStatusBar_placeholderIndicator span {
color: #4a4a4a;
color: $primary-fg-color;
opacity: 0.5;
position: relative;
top: -4px;
@ -76,7 +76,7 @@ limitations under the License.
.mx_RoomStatusBar_unreadMessagesBar {
padding-top: 10px;
color: #ff0064;
color: $warning-color;
cursor: pointer;
}
@ -93,29 +93,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;
@ -135,7 +135,7 @@ limitations under the License.
.mx_RoomStatusBar_tabCompleteEol {
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
color: #76CFA6;
color: $accent-color;
}
.mx_RoomStatusBar_tabCompleteEol object {

24
src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
View File

@ -89,7 +89,7 @@ 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;
@ -158,7 +158,7 @@ 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 {
@ -185,8 +185,8 @@ 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;
@ -212,16 +212,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;
}
@ -234,8 +234,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;
}
@ -272,13 +272,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;
}

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

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

6
src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
View File

@ -84,8 +84,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 +95,7 @@ limitations under the License.
}
.mx_UserSettings_button.danger {
background-color: #ff0064;
background-color: $warning-color;
}
.mx_UserSettings_section {

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

@ -32,7 +32,7 @@ limitations under the License.
}
.mx_Login h2 {
color: #4a4a4a;
color: $primary-fg-color;
font-weight: 300;
margin-top: 32px;
margin-bottom: 20px;
@ -53,7 +53,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 +75,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 +99,7 @@ limitations under the License.
}
.mx_Login_create:link {
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_Login_links {
@ -112,7 +112,7 @@ limitations under the License.
}
.mx_Login_links a:link {
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_Login_prompt {
@ -127,7 +127,7 @@ limitations under the License.
}
.mx_Login_forgot:link {
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_Login_loader {

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -17,7 +17,7 @@ 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 {

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -44,7 +44,7 @@ limitations under the License.
}
.mx_EventTile .mx_SenderProfile {
color: #454545;
color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
display: block; /* anti-zalgo, with overflow hidden */
@ -61,7 +61,7 @@ limitations under the License.
display: block;
visibility: hidden;
white-space: nowrap;
color: #acacac;
color: $event-timestamp-color;
font-size: 11px;
left: 8px;
position: absolute;
@ -93,20 +93,20 @@ limitations under the License.
* TODO: ultimately we probably want some transition on here.
*/
.mx_EventTile_selected .mx_EventTile_line {
border-left: #76cfa6 5px solid;
border-left: $accent-color 5px solid;
padding-left: 60px;
background-color: #f7f7f7;
background-color: $event-selected-color;
}
.mx_EventTile:hover .mx_EventTile_line,
.mx_EventTile.menu .mx_EventTile_line
{
background-color: #f7f7f7;
background-color: $event-selected-color;
}
.mx_EventTile_searchHighlight {
background-color: #76cfa6;
color: #fff;
background-color: $accent-color;
color: $accent-fg-color;
border-radius: 5px;
padding-left: 2px;
padding-right: 2px;
@ -114,26 +114,26 @@ limitations under the License.
}
.mx_EventTile_searchHighlight a {
background-color: #76cfa6;
color: #fff;
background-color: $accent-color;
color: $accent-fg-color;
}
.mx_EventTile_encrypting {
color: #abddbc ! important;
color: $event-encrypting-color ! important;
}
.mx_EventTile_sending {
color: #ddd;
color: $event-sending-color;
}
.mx_EventTile_notSent {
color: #f44;
color: $event-notsent-color;
}
.mx_EventTile_highlight,
.mx_EventTile_highlight .markdown-body
{
color: #FF0064;
color: $warning-color;
}
.mx_EventTile_contextual {
@ -204,7 +204,7 @@ limitations under the License.
}
.mx_EventTile_readAvatarRemainder {
color: #acacac;
color: $event-timestamp-color;
font-size: 11px;
position: absolute;
}
@ -244,10 +244,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,
@ -297,7 +297,7 @@ limitations under the License.
}
.mx_EventTile_content .markdown-body a {
color: #76cfa6;
color: $accent-color;
}
.mx_EventTile_content .markdown-body .hljs {

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

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

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

@ -72,7 +72,7 @@ limitations under the License.
font-color: #999999;
font-size: 13px;
position: relative;
background-color: #fff;
background-color: $primary-bg-color;
}
.mx_MemberInfo_buttons {
@ -82,7 +82,7 @@ limitations under the License.
.mx_MemberInfo_field {
cursor: pointer;
font-size: 13px;
color: #76cfa6;
color: $accent-color;
margin-left: 8px;
line-height: 23px;
}

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

@ -55,10 +55,10 @@ limitations under the License.
.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 +66,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;
}

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

@ -18,7 +18,7 @@ limitations under the License.
max-width: 960px;
vertical-align: middle;
margin: auto;
border-top: 1px solid #e5e5e5;
border-top: 1px solid $primary-hairline-color;
position: relative;
}
@ -108,8 +108,8 @@ limitations under the License.
-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 +120,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,

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

@ -63,10 +63,10 @@ limitations under the License.
.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;
@ -102,7 +102,7 @@ limitations under the License.
.mx_RoomHeader_rightRow {
margin-top: 4px;
background-color: #fff;
background-color: $primary-bg-color;
display: flex;
align-items: center;
-webkit-box-ordinal-group: 3;
@ -120,7 +120,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 +138,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;
@ -174,7 +174,7 @@ limitations under the License.
}
.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
color: #76cfa6;
color: $accent-color;
}
.mx_RoomHeader_placeholder {
@ -182,13 +182,13 @@ limitations under the License.
}
.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;
}

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

@ -38,11 +38,11 @@ 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 {

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

@ -24,10 +24,10 @@ limitations under the License.
.mx_RoomSettings_integrationsButton_error {
position: relative;
height: 36px;
background-color: #76cfa6;
background-color: $accent-color;
border-radius: 36px;
margin-right: 8px;
color: #fff;
color: $accent-fg-color;
line-height: 34px;
text-align: center;
float: right;
@ -47,8 +47,8 @@ limitations under the License.
font-size: 10pt;
line-height: 1.5em;
border-radius: 5px;
background-color: #000;
color: #fff;
background-color: $accent-color;
color: $accent-fg-color;
}
.mx_RoomSettings_e2eIcon {
@ -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;
}
@ -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;

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

@ -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;
@ -175,11 +175,11 @@ limitations under the License.
}
.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 {

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

@ -25,10 +25,10 @@ limitations under the License.
.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,13 +36,13 @@ 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;
}

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

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

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

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

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

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

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

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

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

@ -18,7 +18,7 @@ limitations under the License.
text-align: center;
border: 1px solid #a4a4a4;
border-radius: 8px;
background-color: #fff;
background-color: $primary-bg-color;
position: fixed;
z-index: 1000;
padding: 6px;
@ -58,7 +58,7 @@ limitations under the License.
height: 36px;
line-height: 36px;
border-radius: 36px;
color: #fff;
color: $accent-fg-color;
margin: auto;
}

2
src/skins/vector/css/rethemendex.sh
View File

@ -2,7 +2,7 @@
echo "// autogenerated by rethemendex.sh" > _components.scss
for i in `find */* -iname _\*.scss`;
for i in `find . -iname _\*.scss | fgrep -v _components.scss`;
do
echo "@import \"`dirname $i`/`basename $i .scss`\";" >> _components.scss
done

68
src/skins/vector/css/themes/_base.scss Normal file
View File

@ -0,0 +1,68 @@
// 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;
// button UI (white-on-green in light skin)
$accent-fg-color: #ffffff;
$accent-color: #76CFA6;
// red warning colour
$warning-color: #ff0064;
// left-panel style muted accent color
$secondary-accent-color: #eaf5f0;
// 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;
// context menus
$menu-border-color: rgba(187, 187, 187, 0.5);
$menu-bg-color: #f6f6f6;
$avatar-initial-color: #ffffff;
// ********************
$roomtile-name-color: rgba(69, 69, 69, 0.8);
$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
$roomsublist-label-fg-color: #3d3b39;
$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;
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
$e2e-unverified-color: #e8bf37;
$e2e-warning-color: #ba6363;
// ********************
$lightbox-bg-color: #454545;
$lightbox-fg-color: #ffffff;
$lightbox-border-color: #ffffff;

66
src/skins/vector/css/themes/dark.scss
View File

@ -1,7 +1,69 @@
@import "_base";
// typical text (dark-on-white in light skin)
$primary-fg-color: #dddddd;
$primary-bg-color: #2d2d2d;
// button UI (white-on-green in light skin)
// used for dialog box text
$light-fg-color: #747474;
@import "../_components"
// button UI (white-on-green in light skin)
$accent-fg-color: $primary-bg-color;
$accent-color: #76CFA6;
// red warning colour
$warning-color: #ff0064;
// left-panel style muted accent color
$secondary-accent-color: $primary-bg-color;
// 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;
// context menus
$menu-border-color: rgba(187, 187, 187, 0.5);
$menu-bg-color: #373737;
$avatar-initial-color: #2d2d2d;
// ********************
$roomtile-name-color: rgba(186, 186, 186, 0.8);
$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8);
$roomsublist-label-fg-color: $primary-fg-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;
// 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;
@import "../_components";

6
src/skins/vector/css/themes/light.scss
View File

@ -1,4 +1,2 @@
$primary-fg-color: #454545;
$primary-bg-color: #ffffff;
@import "../_components"
@import "_base";
@import "../_components";

10
src/skins/vector/css/vector-web/structures/_RightPanel.scss
View File

@ -33,7 +33,7 @@ limitations under the License.
-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;
@ -45,7 +45,7 @@ limitations under the License.
.mx_RightPanel_headerButtonGroup {
margin-top: 6px;
float: left;
background-color: #fff;
background-color: $primary-bg-color;
margin-left: 0px;
}
@ -73,7 +73,7 @@ limitations under the License.
.mx_RightPanel_headerButton_badge {
font-size: 11px;
color: #76cfa6;
color: $accent-color;
font-weight: bold;
padding-bottom: 2px;
}
@ -97,7 +97,7 @@ limitations under the License.
-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;
@ -107,7 +107,7 @@ limitations under the License.
.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;

6
src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
View File

@ -20,7 +20,7 @@ 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;
@ -78,7 +78,7 @@ limitations under the License.
.mx_RoomDirectory_table {
font-size: 14px;
color: #4a4a4a;
color: $primary-fg-color;
width: 100%;
text-align: left;
table-layout: fixed;
@ -110,7 +110,7 @@ limitations under the License.
padding-right: 5px;
height: 15px;
border-radius: 11px;
background-color: #eaf5f0;
background-color: $secondary-accent-color;
text-transform: uppercase;
font-weight: 600;
font-size: 11px;

36
src/skins/vector/css/vector-web/structures/_RoomSubList.scss
View File

@ -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;

2
src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
View File

@ -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 {

6
src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
View File

@ -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,7 +67,7 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f
margin: 0;
padding: 0px;
border-radius: 3px;
border: 1px solid #76cfa6;
border: 1px solid $accent-color;
background-color: white;
}

8
src/skins/vector/css/vector-web/views/elements/_ImageView.scss
View File

@ -87,7 +87,7 @@ limitations under the License.
padding-right: 30px;
min-height: 100%;
max-width: 240px;
color: #fff;
color: $lightbox-fg-color;
}
.mx_ImageView_cancel {
@ -114,10 +114,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 +125,7 @@ limitations under the License.
}
.mx_ImageView_link {
color: #fff ! important;
color: $lightbox-fg-color ! important;
text-decoration: none ! important;
}

6
src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
View File

@ -15,8 +15,8 @@ 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;
@ -34,7 +34,7 @@ limitations under the License.
}
.mx_GuestWarningBar a {
color: #fff ! important;
color: $accent-fg-color ! important;
text-decoration: underline ! important;
cursor: pointer;
}

6
src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
View File

@ -15,8 +15,8 @@ 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;
@ -40,7 +40,7 @@ limitations under the License.
.mx_MatrixToolbar_link
{
color: #fff ! important;
color: $accent-fg-color ! important;
text-decoration: underline ! important;
cursor: pointer;
}

6
src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
View File

@ -22,8 +22,8 @@ limitations under the License.
margin-bottom: 7px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px dashed #76cfa6;
color: #454545;
border: 1px dashed $accent-color;
color: $primary-fg-color;
background-color: rgba(255,255,255,0.5);
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;

12
src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
View File

@ -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;
}

14
src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
View File

@ -26,7 +26,7 @@ limitations under the License.
.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;
@ -41,7 +41,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 +61,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 +74,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 {

2
src/skins/vector/css/vector-web/views/settings/_Notifications.scss
View File

@ -58,7 +58,7 @@ limitations under the License.
.mx_UserNotifSettings_keywords {
cursor: pointer;
color: #76cfa6;
color: $accent-color;
}
.mx_UserSettings_devicesTable td {

2
src/vector/index.js
View File

@ -30,7 +30,7 @@ require('babel-polyfill');
// CSS requires: just putting them here for now as CSS is going to be
// refactored "soon" anyway
require('../../build/themes/light.css');
require('../../build/themes/dark.css');
require('gemini-scrollbar/gemini-scrollbar.css');
require('gfm.css/gfm.css');
require('highlight.js/styles/github.css');