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

250 lines
5.1 KiB
SCSS

img.emoji {
width: 20px;
height: 20px;
vertical-align: middle;
}
.emoji-picker {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background-clip: padding-box;
z-index: 10000;
position: fixed;
display: none;
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%);
}
.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%);
min-width: 36px;
}
.emoji-picker .category-icon {
display: block;
margin: 4px auto;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
button.emoji {
margin: 0;
padding: 0;
}
}
.emoji-picker .category-icon.current, .emoji-picker .category-icon:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.emoji-picker .main-column {
display: flex;
flex-direction: column;
flex: 20;
}
.emoji-picker .list {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
padding: 0px;
flex: 1;
flex-direction: column;
}
.emoji-picker .section-header {
padding: 8px;
margin-bottom: 4px;
padding-bottom: 4px;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
justify-content: space-between;
display: flex;
align-items: center;
}
.emoji-picker .section-header .title {
color: $primary;
}
.emoji-picker .section-header .clear-recent .fa{
margin: 0;
padding: 0;
color: dark-light-choose($header_primary-medium, $header_primary);
&:hover {
color: $primary;
}
}
.emoji-picker .section-group {
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 4px;
}
.emoji-picker .footer {
align-items: center;
display: flex;
justify-content: space-between;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
}
.emoji-picker .info {
text-overflow: ellipsis;
max-width: 232px;
padding-left: 8px;
white-space: nowrap;
overflow: hidden;
font-weight: 700;
max-width: 125px;
}
.emoji-picker .diversity-picker {
display: flex;
justify-content: flex-end;
padding: 8px;
}
.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;
cursor: pointer;
}
.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;
font-size: 12px;
text-shadow: 0.5px 1.5px 0 rgba(0,0,0,0.3);
}
.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;
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%);
}
.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 {
background-color: none;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
padding: 5px;
display: flex;
position: relative;
align-items: center;
}
.emoji-picker .filter .d-icon-search {
color: dark-light-choose($header_primary-medium, $header_primary);
font-size: 16px;
margin-left: 5px;
margin-right: 5px;
}
.emoji-picker .filter input {
height: 24px;
margin: 0;
flex: 1;
border: none;
box-shadow: none;
padding-right: 24px;
outline: none;
color: $primary;
background: $secondary;
&:focus {
border: none;
box-shadow: none;
}
}
.emoji-picker .filter input::-ms-clear {
display: none;
}
.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;
right: 5px;
top: 12px;
border: 0;
background: none;
color: dark-light-choose($header_primary-medium, $header_primary);
outline: none;
display: none;
&:hover {
color: $primary;
}
}