imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2659 from jryans/dark-theme-more-2

Browse source 
Dark theme follow ups round 2
This commit is contained in:
J. Ryan Stinnett 2019-02-19 17:51:29 +00:00 • committed by GitHub
commit edf10dbdde
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 144 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

68
res/themes/dark/css/_dark.scss
View file

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

104
res/themes/light/css/_light.scss
View file

@ -145,7 +145,8 @@ $rte-group-pill-color: #aaa;
$topleftmenu-color: #212121;
$roomheader-color: #45474a;
$roomheader-addroom-color: #91A1C0;
$roomheader-addroom-bg-color: #91A1C0;
$roomheader-addroom-fg-color: $accent-fg-color;
$tagpanel-button-color: #91A1C0;
$roomheader-button-color: #91A1C0;
$groupheader-button-color: #91A1C0;
@ -249,108 +250,9 @@ $authpage-lang-color: #4e5054;
$authpage-primary-color: #232f32;
$authpage-secondary-color: #61708b;
$dark-panel-bg-color: $secondary-accent-color;
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 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 {
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;
}
input::placeholder {
color: $roomsublist-label-fg-color;
}
}
}
/*** panels ***/
.dark-panel {
background-color: $secondary-accent-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;
}
}
input[type=text].mx_textinput_icon,
input[type=search].mx_textinput_icon {
padding-left: 36px;
background-repeat: no-repeat;
background-position: 10px center;
}
// FIXME THEME - Tint by CSS rather than referencing a duplicate asset
input[type=text].mx_textinput_icon.mx_textinput_search,
input[type=search].mx_textinput_icon.mx_textinput_search {
background-image: url('$(res)/img/feather-icons/search-input.svg');
}
// dont search UI as not all browsers support it,
// we implement it ourselves where needed instead
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
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 {
opacity: initial;
}
// ***** Mixins! *****
@define-mixin mx_DialogButton {