Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: emoji-picker works with dark theme

This commit is contained in:
Joffrey JAFFEUX 2017-07-19 22:32:29 +02:00
parent f32950a475
commit 0112b9aa43
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/assets/stylesheets/common/base/emoji.scss
View File

@ -1,25 +1,24 @@
.emoji-picker { .emoji-picker {
background-color: #fff;
border: 1px solid #e9e9e9;
box-shadow: 0 1px 5px rgba(0,0,0,0.4); box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background-clip: padding-box; background-clip: padding-box;
z-index: 10000; z-index: 10000;
position: fixed; position: fixed;
background-color: dark-light-choose(#dadada, blend-primary-secondary(5%));
display: none; display: none;
flex-direction: row; flex-direction: row;
height: 300px; height: 300px;
border-radius: 3px; border-radius: 3px;
color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%));
background-color: $secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
} }
.emoji-picker .categories-column { .emoji-picker .categories-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: white;
flex: 1; flex: 1;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-right: 1px solid #e9e9e9; border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
min-width: 36px; min-width: 36px;
} }
@ -38,7 +37,6 @@
.emoji-picker .main-column { .emoji-picker .main-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: white;
flex: 20; flex: 20;
} }
@ -58,13 +56,14 @@
padding: 8px; padding: 8px;
margin-bottom: 4px; margin-bottom: 4px;
padding-bottom: 4px; padding-bottom: 4px;
border-bottom: 1px solid #e9e9e9; border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.emoji-picker .section-header .title { .emoji-picker .section-header .title {
color: $primary;
} }
.emoji-picker .section-header .clear-recent .fa{ .emoji-picker .section-header .clear-recent .fa{
@ -83,14 +82,14 @@
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
border-radius: 50%; border-radius: 50%;
background-color: #d1f0ff; background-color: lighten($tertiary, 30%);
} }
.emoji-picker .footer { .emoji-picker .footer {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-top: 1px solid #e9e9e9; border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
} }
.emoji-picker .info { .emoji-picker .info {
@ -164,7 +163,7 @@ body img.emoji {
.emoji-picker .filter { .emoji-picker .filter {
background-color: none; background-color: none;
border-bottom: 1px solid #e9e9e9; border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
padding: 5px; padding: 5px;
display: flex; display: flex;
position: relative; position: relative;
@ -186,6 +185,8 @@ body img.emoji {
box-shadow: none; box-shadow: none;
padding-right: 24px; padding-right: 24px;
outline: none; outline: none;
color: $primary;
background: $secondary;
&:focus { &:focus {
border: none; border: none;