Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Merge pull request #2659 from jryans/dark-theme-more-2
Browse files Browse the repository at this point in the history 
Dark theme follow ups round 2
  • Loading branch information
@jryans
jryans authored Feb 19, 2019
2 parents d8c5163 + 5fb990e commit edf10db
Show file tree
Hide file tree
Showing 19 changed files with 144 additions and 232 deletions.
72 changes: 65 additions & 7 deletions res/css/_common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,6 @@ input[type=search]::-webkit-search-results-decoration {
display: none;
}

.input[type=text]::-webkit-input-placeholder,
.input[type=text]::-moz-placeholder,
.input[type=search]::-webkit-input-placeholder,
.input[type=search]::-moz-placeholder {
color: #a5aab2;
}

// Override Firefox's UA style so we get a consistent look across browsers
input::placeholder,
textarea::placeholder {
Expand All @@ -111,6 +104,71 @@ textarea {
color: $primary-fg-color;
}

// .mx_textinput is a container for a text input
// + some other controls like buttons, ...
// it has the appearance of a text box so the controls
// appear to be part of the input

.mx_Dialog, .mx_MatrixChat {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
display: block;
box-sizing: border-box;
background-color: transparent;
color: $input-darker-fg-color;
border-radius: 4px;
border: 1px solid #c1c1c1;
// these things should probably not be defined
// globally
margin: 9px;
flex: 0 0 auto;
}

.mx_textinput {
display: flex;
align-items: center;

> input[type=text],
> input[type=search] {
border: none;
flex: 1;
color: $primary-fg-color;
}
}

:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
.mx_textinput input::placeholder {
color: $roomsublist-label-fg-color;
}
}

/*** panels ***/
.dark-panel {
background-color: $dark-panel-bg-color;
}

.dark-panel {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
color: $input-darker-fg-color;
background-color: $input-darker-bg-color;
border: none;
}
}

.light-panel {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
color: $input-lighter-fg-color;
background-color: $input-lighter-bg-color;
border: none;
}
}

/* Prevent ugly dotted highlight around selected elements in Firefox */
::-moz-focus-inner {
border: 0;
Expand Down
4 changes: 2 additions & 2 deletions res/css/structures/_MyGroups.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,11 @@ limitations under the License.
height: 40px;
width: 40px;
border-radius: 20px;
background-color: $roomheader-addroom-color;
background-color: $roomheader-addroom-bg-color;
position: relative;

&:before {
background-color: $accent-fg-color;
background-color: $roomheader-addroom-fg-color;
mask: url('$(res)/img/icons-create-room.svg');
mask-repeat: no-repeat;
mask-position: center;
Expand Down
21 changes: 15 additions & 6 deletions res/css/structures/_RoomSubList.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,15 +83,24 @@ limitations under the License.
}

.mx_RoomSubList_addRoom {
background-color: $roomheader-addroom-color;
color: $roomsublist-background;
background-image: url('$(res)/img/icons-room-add.svg');
background-repeat: no-repeat;
background-position: center;
background-color: $roomheader-addroom-bg-color;
border-radius: 10px; // 16/2 + 2 padding
height: 16px;
flex: 0 0 16px;
background-clip: content-box;
position: relative;

&:before {
background-color: $roomheader-addroom-fg-color;
mask: url('$(res)/img/icons-room-add.svg');
mask-repeat: no-repeat;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}

.mx_RoomSubList_badgeHighlight {
Expand Down
4 changes: 4 additions & 0 deletions res/css/views/rooms/_MemberInfo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ limitations under the License.
height: 16px;
padding: 10px 15px;
cursor: pointer;
mask-image: url('$(res)/img/minimise.svg');
mask-repeat: no-repeat;
mask-position: center;
background-color: $rightpanel-button-color;
}

.mx_MemberInfo_name h2 {
Expand Down
19 changes: 17 additions & 2 deletions res/css/views/rooms/_MessageComposer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,14 +255,29 @@ limitations under the License.
}

.mx_MessageComposer_formatbar_markdown {
height: 17px;
width: 30px;
margin-right: 64px;
}

.mx_MessageComposer_input_markdownIndicator {
cursor: pointer;
height: 10px;
width: 12px;
padding: 4px 4px 4px 0;
opacity: 0.8;
}

.mx_MessageComposer_formatbar_markdown,
.mx_MessageComposer_input_markdownIndicator {
cursor: pointer;
mask-image: url('$(res)/img/markdown.svg');
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: $composer-button-color;

&.mx_MessageComposer_markdownDisabled {
opacity: 0.2;
}
}

.mx_MatrixChat_useCompactLayout {
Expand Down
Binary file removed res/img/button-md-false.png
View file
Binary file not shown.
29 changes: 0 additions & 29 deletions res/img/button-md-false.svg
View file

This file was deleted.

Binary file removed res/img/[email protected]
View file
Binary file not shown.
Binary file removed res/img/[email protected]
View file
Binary file not shown.
Binary file removed res/img/button-md-true.png
View file
Binary file not shown.
14 changes: 0 additions & 14 deletions res/img/button-md-true.svg
View file

This file was deleted.

Binary file removed res/img/[email protected]
View file
Binary file not shown.
Binary file removed res/img/[email protected]
View file
Binary file not shown.
3 changes: 3 additions & 0 deletions res/img/markdown.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 12 additions & 56 deletions res/themes/dark/css/_dark.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// unified palette
// try to use these colors when possible
$bg-color: #181b21;
$base-color: #1b1f25;
$base-color: #15171b;
$base-text-color: #edf3ff;
$header-panel-bg-color: #22262e;
$header-panel-border-color: #000000;
Expand All @@ -25,6 +25,8 @@ $focus-bg-color: $room-highlight-color;

$mention-user-pill-bg-color: $warning-color;
$other-user-pill-bg-color: $room-highlight-color;
$rte-room-pill-color: $room-highlight-color;
$rte-group-pill-color: $room-highlight-color;

// informational plinth
$info-plinth-bg-color: $header-panel-bg-color;
Expand Down Expand Up @@ -69,6 +71,11 @@ $avatar-bg-color: $bg-color;

$h3-color: $primary-fg-color;

$dialog-title-fg-color: #454545;
$dialog-backdrop-color: #000;
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #9fa9ba;

$dialog-background-bg-color: $header-panel-bg-color;
$lightbox-background-bg-color: #000;

Expand All @@ -82,7 +89,8 @@ $settings-subsection-fg-color: $text-secondary-color;

$topleftmenu-color: $text-primary-color;
$roomheader-color: $text-primary-color;
$roomheader-addroom-color: $header-panel-text-primary-color;
$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity
$roomheader-addroom-fg-color: $text-primary-color;
$tagpanel-button-color: $header-panel-text-primary-color;
$roomheader-button-color: $header-panel-text-primary-color;
$groupheader-button-color: $header-panel-text-primary-color;
Expand All @@ -103,7 +111,7 @@ $roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1);

$panel-divider-color: $header-panel-border-color;

$widget-menu-bar-bg-color: $search-bg-color;
$widget-menu-bar-bg-color: $header-panel-bg-color;

// event redaction
$event-redacted-fg-color: #606060;
Expand Down Expand Up @@ -131,61 +139,9 @@ $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color

$room-warning-bg-color: $header-panel-bg-color;

$dark-panel-bg-color: $header-panel-bg-color;
$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);

/*** form elements ***/

// .mx_textinput is a container for a text input
// + some other controls like buttons, ...
// it has the appearance of a text box so the controls
// appear to be part of the input

.mx_Dialog, .mx_MatrixChat {

:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
background-color: transparent;
color: $input-darker-fg-color;
border: 1px solid #c1c1c1;
}

.mx_textinput {
> input[type=text],
> input[type=search] {
color: $primary-fg-color;
}
input::placeholder {
color: $roomsublist-label-fg-color;
}
}
}

/*** panels ***/
.dark-panel {
background-color: $header-panel-bg-color;
}

.dark-panel {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
color: $input-darker-fg-color;
background-color: $input-darker-bg-color;
border: none;
}
}

.light-panel {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
color: $input-lighter-fg-color;
background-color: $input-lighter-bg-color;
border: none;
}
}

// ***** Mixins! *****

@define-mixin mx_DialogButton {
Expand Down
Loading

0 comments on commit edf10db

Please sign in to comment.