discourse/app/assets/stylesheets/common/base/emoji.scss

250 lines
5.2 KiB
SCSS
Raw Normal View History

body img.emoji {
width: 20px;
height: 20px;
vertical-align: middle;
}
2017-07-11 11:51:53 -04:00
.emoji-picker {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background-clip: padding-box;
z-index: 10000;
position: fixed;
display: none;
2017-07-11 11:51:53 -04:00
flex-direction: row;
height: 300px;
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%);
}
2017-07-11 11:51:53 -04:00
.emoji-picker .categories-column {
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
justify-content: space-between;
border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
2017-07-11 11:51:53 -04:00
min-width: 36px;
}
2017-07-11 11:51:53 -04:00
.emoji-picker .category-icon {
display: block;
2017-07-11 11:51:53 -04:00
margin: 4px auto;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
button.emoji {
margin: 0;
padding: 0;
}
}
2017-07-11 11:51:53 -04:00
.emoji-picker .category-icon.current, .emoji-picker .category-icon:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
2017-07-11 11:51:53 -04:00
.emoji-picker .main-column {
display: flex;
flex-direction: column;
flex: 20;
}
2017-07-11 11:51:53 -04:00
.emoji-picker .list {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
padding: 0px;
flex: 1;
flex-direction: column;
}
2017-07-11 11:51:53 -04:00
.emoji-picker .section-header {
padding: 8px;
2017-07-11 11:51:53 -04:00
margin-bottom: 4px;
padding-bottom: 4px;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
2017-07-11 11:51:53 -04:00
justify-content: space-between;
display: flex;
align-items: center;
}
2017-07-11 11:51:53 -04:00
.emoji-picker .section-header .title {
color: $primary;
}
2017-07-11 11:51:53 -04:00
.emoji-picker .section-header .clear-recent .fa{
margin: 0;
2017-07-21 08:19:04 -04:00
padding: 0;
color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
&:hover {
color: $primary;
}
}
2017-07-19 14:29:39 -04:00
.emoji-picker .section-group {
2017-07-11 11:51:53 -04:00
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 4px;
}
2017-07-11 11:51:53 -04:00
.emoji-picker .footer {
align-items: center;
2017-07-11 11:51:53 -04:00
display: flex;
justify-content: space-between;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
}
2017-07-11 11:51:53 -04:00
.emoji-picker .info {
text-overflow: ellipsis;
max-width: 232px;
padding-left: 8px;
white-space: nowrap;
overflow: hidden;
font-weight: 700;
max-width: 125px;
}
2017-07-11 11:51:53 -04:00
.emoji-picker .diversity-picker {
display: flex;
2017-07-11 11:51:53 -04:00
justify-content: flex-end;
padding: 8px;
}
2017-07-11 11:51:53 -04:00
.emoji-picker .diversity-picker .diversity-scale {
width: 20px;
height: 20px;
margin-left: 5px;
border: 0;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
2017-06-28 18:27:16 -04:00
cursor: pointer;
}
2017-07-11 11:51:53 -04:00
.emoji-picker .diversity-picker .diversity-scale.default { background: #ffcc4d; }
.emoji-picker .diversity-picker .diversity-scale.light { background: #f7dece; }
.emoji-picker .diversity-picker .diversity-scale.medium-light { background: #f3d2a2; }
.emoji-picker .diversity-picker .diversity-scale.medium { background: #d5ab88; }
.emoji-picker .diversity-picker .diversity-scale.medium-dark { background: #af7e57; }
.emoji-picker .diversity-picker .diversity-scale.dark { background: #7c533e; }
.emoji-picker .diversity-picker .diversity-scale.selected i {
display: block;
}
.emoji-picker .diversity-picker i {
display: none;
}
.emoji-picker .diversity-picker .d-icon {
color: #fff;
2017-07-11 11:51:53 -04:00
font-size: 12px;
text-shadow: 0.5px 1.5px 0 rgba(0,0,0,0.3);
}
2017-07-11 11:51:53 -04:00
.emoji-picker button.emoji {
background: transparent;
background-position: center;
background-repeat: no-repeat;
border-radius: 0;
background-size: 20px 20px;
-moz-box-sizing: content-box;
box-sizing: content-box;
2017-07-11 11:51:53 -04:00
height: 20px;
margin: 0;
padding: 0;
border: 0;
vertical-align: top;
width: 20px;
outline: none;
padding: 3px;
margin: 2px;
}
.emoji-picker .section-group button.emoji:hover, .emoji-picker .results button.emoji:hover {
display: inline-block;
vertical-align: top;
border-radius: 50%;
background-color: lighten($tertiary, 40%);
2017-07-11 11:51:53 -04:00
}
.wmd-emoji-button:before {
content: "\f118";
}
.emoji-picker-modal.fadeIn {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .8;
background-color: black;
}
.emoji-picker .filter {
2017-07-19 14:20:52 -04:00
background-color: none;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
2017-07-11 11:51:53 -04:00
padding: 5px;
display: flex;
position: relative;
2017-07-19 14:20:52 -04:00
align-items: center;
}
.emoji-picker .filter .d-icon-search {
2017-07-21 08:19:04 -04:00
color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
2017-07-19 14:20:52 -04:00
font-size: 16px;
margin-left: 5px;
margin-right: 5px;
2017-07-11 11:51:53 -04:00
}
.emoji-picker .filter input {
height: 24px;
margin: 0;
flex: 1;
2017-07-19 14:20:52 -04:00
border: none;
box-shadow: none;
2017-07-11 11:51:53 -04:00
padding-right: 24px;
2017-07-19 14:20:52 -04:00
outline: none;
color: $primary;
background: $secondary;
2017-07-19 14:20:52 -04:00
&:focus {
border: none;
box-shadow: none;
}
2017-07-11 11:51:53 -04:00
}
2017-07-19 08:28:08 -04:00
.emoji-picker .filter input::-ms-clear {
display: none;
}
2017-07-11 11:51:53 -04:00
.emoji-picker .results {
display: none;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
padding: 4px;
flex: 1;
}
.emoji-picker .filter .clear-filter {
position: absolute;
2017-07-19 14:20:52 -04:00
right: 5px;
2017-07-11 11:51:53 -04:00
top: 12px;
border: 0;
background: none;
color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
2017-07-11 11:51:53 -04:00
outline: none;
display: none;
&:hover {
color: $primary;
2017-07-11 11:51:53 -04:00
}
}