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

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 {