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

229 lines
3.9 KiB
SCSS

img.emoji {
width: 20px;
height: 20px;
vertical-align: middle;
}
img.emoji.only-emoji {
width: 32px;
height: 32px;
margin: 0.5em 0;
}
a,
.md-table,
.poll {
img.emoji.only-emoji {
width: 20px;
height: 20px;
margin: 0;
}
}
small img.emoji,
sub img.emoji,
sup img.emoji {
height: 1.1em;
width: 1.1em;
}
.emoji-picker {
width: 100%;
color: var(--primary);
background-color: var(--secondary);
border: 1px solid var(--primary-low);
display: flex;
box-sizing: border-box;
background-clip: padding-box;
z-index: z("modal", "content");
flex-direction: row;
height: 320px;
max-height: 50vh;
max-width: 420px;
img.emoji {
// custom emojis might import images of various sizes
// we don't want the picker to be difformed
width: 20px !important;
height: 20px !important;
}
.emoji-picker-content {
display: flex;
flex-direction: column;
flex: 20;
}
.emoji-picker-emoji-area {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
box-sizing: border-box;
padding: 0.25em;
padding-left: 0.75em;
height: 100%;
background: var(--secondary);
.section {
margin-bottom: 1em;
.trash-recent {
background: none;
font-size: $font-down-1;
}
}
.section-header {
font-weight: 900;
padding: 0.25em 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.section-group,
.results {
img.emoji {
padding: 0.25em;
cursor: pointer;
&:hover {
background: $tertiary-low;
}
}
}
.results {
padding: 0.25em 0;
img.emoji {
padding: 0.5em;
}
}
}
.emoji-picker-category-buttons {
overflow-y: auto;
width: 50px;
padding-left: 0.5em;
display: flex;
flex-wrap: wrap;
border-right: 1px solid var(--primary-low);
.category-button {
background: none;
border: none;
padding: 0.5em;
outline: none;
.emoji {
pointer-events: none;
filter: grayscale(100%);
}
&:hover .emoji,
&.current .emoji {
filter: grayscale(0);
}
}
}
}
.emoji-picker-search-container {
display: flex;
width: 100%;
position: relative;
padding: 0.75em;
border-bottom: 1px solid var(--primary-low);
box-sizing: border-box;
align-items: center;
.filter {
flex: 1 0 auto;
margin: 0;
width: calc(100% - 50px);
margin-right: 0.5em;
}
.d-icon {
color: var(--primary-medium);
cursor: pointer;
padding: 0.25em;
&:hover {
color: var(--tertiary);
}
}
}
.emoji-picker-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--primary-low);
}
.emoji-picker-emoji-info {
display: flex;
align-items: center;
padding-left: 0.5em;
img.emoji {
height: 32px !important;
width: 32px !important;
}
}
.emoji-picker-diversity-picker {
border: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0.5em;
.diversity-scale {
display: flex;
align-items: center;
justify-content: center;
min-height: auto;
border-radius: 3px;
margin: 0.15em;
height: 24px;
width: 24px;
.d-icon {
color: #fff;
filter: drop-shadow(0.5px 1.5px 0 rgba(0, 0, 0, 0.3));
}
}
.diversity-scale.default {
background: #ffcc4d;
}
.diversity-scale.light {
background: #f7dece;
}
.diversity-scale.medium-light {
background: #f3d2a2;
}
.diversity-scale.medium {
background: #d5ab88;
}
.diversity-scale.medium-dark {
background: #af7e57;
}
.diversity-scale.dark {
background: #7c533e;
}
}
.emoji-picker-modal-overlay {
z-index: z("modal", "overlay");
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.8;
background-color: var(--primary);
}