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

Merge pull request #2619 from matrix-org/jryans/dark-theme-redesign

Browse source 
Add redesigned dark theme
This commit is contained in:
J. Ryan Stinnett 2019-02-13 11:45:30 +00:00 • committed by GitHub
commit e6f9b7a109
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 490 additions and 663 deletions
Download patch file Download diff file Expand all files Collapse all files

49
res/css/_common.scss
View file

@ -50,8 +50,54 @@ a:visited {
color: $accent-color-alt;
}
input[type=text],
input[type=search],
input[type=password] {
padding: 9px;
font-family: $font-family;
font-size: 14px;
font-weight: 600;
min-width: 0;
}
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;
}
input[type=text], input[type=password], textarea {
background-color: transparent;
color: $primary-fg-color;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
@ -62,6 +108,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
/* Required by Firefox */
textarea {
font-family: $font-family;
color: $primary-fg-color;
}
/* Prevent ugly dotted highlight around selected elements in Firefox */
@ -242,7 +289,7 @@ textarea {
font-weight: 600;
border: 1px solid $accent-color ! important;
color: $accent-color;
background-color: $accent-fg-color;
background-color: $button-secondary-bg-color;
}
.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover {

2
res/css/structures/_ContextualMenu.scss
View file

@ -31,7 +31,7 @@ limitations under the License.
.mx_ContextualMenu {
border-radius: 4px;
box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color;
color: $primary-fg-color;
position: absolute;

17
res/css/structures/_GroupView.scss
View file

@ -44,13 +44,22 @@ limitations under the License.
}
.mx_GroupHeader_button {
margin-left: 12px;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
height: 20px;
width: 20px;
background-color: $groupheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
.mx_GroupHeader_button object {
// prevents clicks from being swallowed by svg in 'object' tag
pointer-events: none;
.mx_GroupHeader_editButton {
mask-image: url('$(res)/img/icons-settings-room.svg');
}
.mx_GroupHeader_shareButton {
mask-image: url('$(res)/img/icons-share.svg');
}
.mx_GroupView_editable {

2
res/css/structures/_HeaderButtons.scss
View file

@ -21,7 +21,7 @@ limitations under the License.
.mx_HeaderButtons::before {
content: "";
background-color: $header-divider-color;
margin: 2px 20px 5px 15px ;
margin: 0 15px;
border-radius: 2px;
width: 2px;
}

53
res/css/structures/_RightPanel.scss
View file

@ -25,9 +25,7 @@ limitations under the License.
.mx_RightPanel_header {
order: 1;
border-bottom: 1px solid $primary-hairline-color;
flex: 0 0 52px;
}
@ -45,20 +43,55 @@ limitations under the License.
cursor: pointer;
flex: 0 0 auto;
vertical-align: top;
margin-top: 4px;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
text-align: center;
position: relative;
border-bottom: 2px solid transparent;
height: 20px;
width: 20px;
position: relative;
}
.mx_RightPanel_headerButton object {
pointer-events: none;
.mx_RightPanel_headerButton::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: $rightpanel-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
.mx_RightPanel_headerButton_highlight {
border-color: $button-bg-color;
.mx_RightPanel_membersButton::before {
mask-image: url('$(res)/img/feather-icons/user.svg');
}
.mx_RightPanel_filesButton::before {
mask-image: url('$(res)/img/feather-icons/files.svg');
}
.mx_RightPanel_notifsButton::before {
mask-image: url('$(res)/img/feather-icons/notifications.svg');
}
.mx_RightPanel_groupMembersButton::before {
mask-image: url('$(res)/img/icons-people.svg');
}
.mx_RightPanel_roomsButton::before {
mask-image: url('$(res)/img/icons-room-nobg.svg');
}
.mx_RightPanel_headerButton_highlight::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
right: 0;
height: 2px;
background-color: $button-bg-color;
}
.mx_RightPanel_headerButton_badge {

2
res/css/structures/_TagPanelButtons.scss
View file

@ -38,7 +38,7 @@ limitations under the License.
height: 40px;
width: 40px;
border-radius: 20px;
background-color: $roomheader-addroom-color;
background-color: $tagpanel-button-color;
position: relative;
/* overwrite mx_RoleButton inline-block */
display: block !important;

3
res/css/views/dialogs/_CreateGroupDialog.scss
View file

@ -43,10 +43,9 @@ limitations under the License.
.mx_CreateGroupDialog_prefix,
.mx_CreateGroupDialog_suffix {
height: 35px;
padding: 0px 5px;
line-height: 37px;
background-color: $input-border-color;
background-color: $input-darker-bg-color;
border: 1px solid $input-border-color;
text-align: center;
}

8
res/css/views/elements/_AccessibleButton.scss
View file

@ -40,8 +40,7 @@ limitations under the License.
}
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
color: $button-primary-disabled-fg-color;
background-color: $button-primary-disabled-bg-color;
opacity: 0.4;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
@ -51,8 +50,7 @@ limitations under the License.
}
.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
color: $button-primary-disabled-fg-color;
background-color: $button-primary-disabled-bg-color;
opacity: 0.4;
}
.mx_AccessibleButton_kind_danger {
@ -74,4 +72,4 @@ limitations under the License.
.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}
}

3
res/css/views/elements/_Field.scss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
/* TODO: Consider unifying with general input styles in _dharma.scss */
/* TODO: Consider unifying with general input styles in _light.scss */
.mx_Field {
position: relative;
@ -31,6 +31,7 @@ limitations under the License.
transition: border-color 0.25s;
border: 1px solid $input-border-color;
padding: 8px 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
}

43
res/css/views/rooms/_MessageComposer.scss
View file

@ -180,27 +180,36 @@ limitations under the License.
color: $accent-color;
}
.mx_MessageComposer_upload,
.mx_MessageComposer_hangup,
.mx_MessageComposer_voicecall,
.mx_MessageComposer_videocall,
.mx_MessageComposer_apps,
.mx_MessageComposer_stickers {
/*display: table-cell;*/
/*vertical-align: middle;*/
/*padding-left: 10px;*/
padding-right: 12px;
.mx_MessageComposer_button {
margin-right: 12px;
cursor: pointer;
padding-top: 4px;
height: 20px;
width: 20px;
background-color: $composer-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
.mx_MessageComposer_upload object,
.mx_MessageComposer_hangup object,
.mx_MessageComposer_voicecall object,
.mx_MessageComposer_videocall object,
.mx_MessageComposer_apps object,
.mx_MessageComposer_stickers object {
pointer-events: none;
.mx_MessageComposer_upload {
mask-image: url('$(res)/img/feather-icons/paperclip.svg');
}
.mx_MessageComposer_hangup {
mask-image: url('$(res)/img/hangup.svg');
}
.mx_MessageComposer_voicecall {
mask-image: url('$(res)/img/feather-icons/phone.svg');
}
.mx_MessageComposer_videocall {
mask-image: url('$(res)/img/feather-icons/video.svg');
}
.mx_MessageComposer_stickers {
mask-image: url('$(res)/img/feather-icons/face.svg');
}
.mx_MessageComposer_formatting {

32
res/css/views/rooms/_RoomHeader.scss
View file

@ -58,7 +58,6 @@ limitations under the License.
.mx_RoomHeader_buttons {
display: flex;
align-items: center;
background-color: $primary-bg-color;
padding-right: 5px;
}
@ -116,10 +115,6 @@ limitations under the License.
opacity: 0.6;
}
.mx_RoomHeader_settingsButton object {
pointer-events: none;
}
.mx_RoomHeader_name,
.mx_RoomHeader_avatar,
.mx_RoomHeader_avatarPicker,
@ -199,10 +194,32 @@ limitations under the License.
.mx_RoomHeader_button {
margin-left: 10px;
cursor: pointer;
height: 20px;
width: 20px;
background-color: $roomheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
.mx_RoomHeader_button object {
pointer-events: none;
.mx_RoomHeader_settingsButton {
mask-image: url('$(res)/img/feather-icons/settings.svg');
}
.mx_RoomHeader_forgetButton {
mask-image: url('$(res)/img/leave.svg');
width: 26px;
}
.mx_RoomHeader_searchButton {
mask-image: url('$(res)/img/feather-icons/search.svg');
}
.mx_RoomHeader_shareButton {
mask-image: url('$(res)/img/feather-icons/share.svg');
}
.mx_RoomHeader_manageIntegsButton {
mask-image: url('$(res)/img/feather-icons/grid.svg');
}
.mx_RoomHeader_showPanel {
@ -219,6 +236,7 @@ limitations under the License.
.mx_RoomHeader_pinnedButton {
position: relative;
mask-image: url('$(res)/img/icons-pin.svg');
}
.mx_RoomHeader_pinsIndicator {