mirror of
https://github.com/Qortal/emoji-picker-js.git
synced 2025-01-30 14:52:15 +00:00
496 lines
11 KiB
CSS
496 lines
11 KiB
CSS
@keyframes show {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(0.8, 0.8, 0.8);
|
|
}
|
|
|
|
50% {
|
|
transform: scale3d(1.05, 1.05, 1.05);
|
|
}
|
|
|
|
100% {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes hide {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale3d(0.8, 0.8, 0.8);
|
|
}
|
|
}
|
|
|
|
@keyframes grow {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(0.8, 0.8, 0.8);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes shrink {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale3d(0.8, 0.8, 0.8);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
0% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
.emoji-picker {
|
|
--animation-duration: 0.2s;
|
|
--animation-easing: ease-in-out;
|
|
|
|
--emoji-size: 1.8em;
|
|
--emoji-size-multiplier: 1.5;
|
|
--emoji-preview-size: 2em;
|
|
--emoji-per-row: 8;
|
|
--row-count: 6;
|
|
|
|
--content-height: calc((var(--emoji-size) * var(--emoji-size-multiplier)) * var(--row-count) + var(--category-name-size) + var(--category-button-height) + 0.5em);
|
|
|
|
--category-name-size: 0.85em;
|
|
|
|
--category-button-height: 2em;
|
|
--category-button-size: 1.1em;
|
|
--category-border-bottom-size: 4px;
|
|
|
|
--focus-indicator-color: #999999;
|
|
|
|
--search-height: 2em;
|
|
|
|
--blue-color: #4F81E5;
|
|
|
|
--border-color: #CCCCCC;
|
|
--background-color: #FFFFFF;
|
|
--text-color: #000000;
|
|
--secondary-text-color: #666666;
|
|
--hover-color: #E8F4F9;
|
|
--search-focus-border-color: var(--blue-color);
|
|
--search-icon-color: #CCCCCC;
|
|
--overlay-background-color: rgba(0, 0, 0, 0.8);
|
|
--popup-background-color: #FFFFFF;
|
|
--category-button-color: #666666;
|
|
--category-button-active-color: var(--blue-color);
|
|
|
|
--dark-border-color: #666666;
|
|
--dark-background-color: #333333;
|
|
--dark-text-color: #FFFFFF;
|
|
--dark-secondary-text-color: #999999;
|
|
--dark-hover-color: #666666;
|
|
--dark-search-background-color: #666666;
|
|
--dark-search-border-color: #999999;
|
|
--dark-search-placeholder-color: #999999;
|
|
--dark-search-focus-border-color: #DBE5F9;
|
|
--dark-popup-background-color: #333333;
|
|
--dark-category-button-color: #FFFFFF;
|
|
}
|
|
|
|
.emoji-picker__wrapper {
|
|
outline: 0;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.emoji-picker {
|
|
font-size: 16px;
|
|
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 5px;
|
|
background: var(--background-color);
|
|
width: calc(var(--emoji-per-row) * var(--emoji-size) * var(--emoji-size-multiplier) + 1em + 1.5rem);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
overflow: hidden;
|
|
animation: show var(--animation-duration) var(--animation-easing);
|
|
}
|
|
|
|
.emoji-picker h2 {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.emoji-picker__overlay {
|
|
background: rgba(0, 0, 0, 0.75);
|
|
z-index: 1000;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.emoji-picker.hiding {
|
|
animation: hide var(--animation-duration) var(--animation-easing);
|
|
}
|
|
|
|
.emoji-picker.dark {
|
|
background: var(--dark-background-color);
|
|
color: var(--dark-text-color);
|
|
border-color: var(--dark-border-color);
|
|
}
|
|
|
|
.emoji-picker__content {
|
|
padding: 0.5em;
|
|
height: var(--content-height);
|
|
position: relative;
|
|
}
|
|
|
|
.emoji-picker__preview {
|
|
height: var(--emoji-preview-size);
|
|
padding: 0.5em;
|
|
border-top: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.emoji-picker.dark .emoji-picker__preview {
|
|
border-top-color: var(--dark-border-color);
|
|
}
|
|
|
|
.emoji-picker__preview-emoji {
|
|
font-size: var(--emoji-preview-size);
|
|
margin-right: 0.25em;
|
|
font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji";
|
|
}
|
|
|
|
.emoji-picker__preview-emoji img.emoji {
|
|
height: 1em;
|
|
width: 1em;
|
|
margin: 0 .05em 0 .1em;
|
|
vertical-align: -0.1em;
|
|
}
|
|
|
|
.emoji-picker__preview-name {
|
|
color: var(--text-color);
|
|
font-size: 0.85em;
|
|
overflow-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.emoji-picker.dark .emoji-picker__preview-name {
|
|
color: var(--dark-text-color);
|
|
}
|
|
|
|
.emoji-picker__container {
|
|
display: grid;
|
|
justify-content: center;
|
|
grid-template-columns: repeat(var(--emoji-per-row), calc(var(--emoji-size) * var(--emoji-size-multiplier)));
|
|
grid-auto-rows: calc(var(--emoji-size) * var(--emoji-size-multiplier));
|
|
}
|
|
|
|
.emoji-picker__container.search-results {
|
|
height: var(--content-height);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.emoji-picker__custom-emoji {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.emoji-picker__emoji {
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
font-size: var(--emoji-size);
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
padding: 0;
|
|
margin: 0;
|
|
outline: none;
|
|
font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji";
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.emoji-picker__emoji img.emoji {
|
|
height: 1em;
|
|
width: 1em;
|
|
margin: 0 .05em 0 .1em;
|
|
vertical-align: -0.1em;
|
|
}
|
|
|
|
.emoji-picker__emoji:focus, .emoji-picker__emoji:hover {
|
|
background: var(--hover-color);
|
|
}
|
|
|
|
.emoji-picker__emoji:focus {
|
|
outline: 1px dotted var(--focus-indicator-color);
|
|
}
|
|
|
|
.emoji-picker.dark .emoji-picker__emoji:focus, .emoji-picker.dark .emoji-picker__emoji:hover {
|
|
background: var(--dark-hover-color);
|
|
}
|
|
|
|
.emoji-picker__plugin-container {
|
|
margin: 0.5em;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.emoji-picker__search-container {
|
|
margin: 0.5em;
|
|
position: relative;
|
|
height: var(--search-height);
|
|
display: flex;
|
|
}
|
|
|
|
.emoji-picker__search {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
border-radius: 3px;
|
|
border: 1px solid var(--border-color);
|
|
padding-right: 2em;
|
|
padding: 0.5em 2.25em 0.5em 0.5em;
|
|
font-size: 0.85em;
|
|
outline: none;
|
|
}
|
|
|
|
.emoji-picker.dark .emoji-picker__search {
|
|
background: var(--dark-search-background-color);
|
|
color: var(--dark-text-color);
|
|
border-color: var(--dark-search-border-color);
|
|
}
|
|
|
|
.emoji-picker.dark .emoji-picker__search::placeholder {
|
|
color: var(--dark-search-placeholder-color);
|
|
}
|
|
|
|
.emoji-picker__search:focus {
|
|
border: 1px solid var(--search-focus-border-color);
|
|
}
|
|
|
|
.emoji-picker.dark .emoji-picker__search:focus {
|
|
border-color: var(--dark-search-focus-border-color);
|
|
}
|
|
|
|
.emoji-picker__search-icon {
|
|
position: absolute;
|
|
color: var(--search-icon-color);
|
|
width: 1em;
|
|
height: 1em;
|
|
right: 0.75em;
|
|
top: calc(50% - 0.5em);
|
|
}
|
|
|
|
.emoji-picker__search-icon img {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.emoji-picker__search-not-found {
|
|
color: var(--secondary-text-color);
|
|
text-align: center;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.emoji-picker__search-not-found h2 {
|
|
color: var(--secondary-text-color);
|
|
}
|
|
|
|
.emoji-picker.dark .emoji-picker__search-not-found {
|
|
color: var(--dark-secondary-text-color);
|
|
}
|
|
|
|
.emoji-picker.dark .emoji-picker__search-not-found h2 {
|
|
color: var(--dark-secondary-text-color);
|
|
}
|
|
|
|
.emoji-picker__search-not-found-icon {
|
|
font-size: 3em;
|
|
}
|
|
|
|
.emoji-picker__search-not-found-icon img {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.emoji-picker__search-not-found h2 {
|
|
margin: 0.5em 0;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.emoji-picker__variant-overlay {
|
|
background: var(--overlay-background-color);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
animation: fade-in var(--animation-duration) var(--animation-easing);
|
|
}
|
|
|
|
.emoji-picker__variant-overlay.hiding {
|
|
animation: fade-out var(--animation-duration) var(--animation-easing);
|
|
}
|
|
|
|
.emoji-picker__variant-popup {
|
|
background: var(--popup-background-color);
|
|
margin: 0.5em;
|
|
padding: 0.5em;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
animation: grow var(--animation-duration) var(--animation-easing);
|
|
user-select: none;
|
|
}
|
|
|
|
.emoji-picker__variant-overlay.hiding .emoji-picker__variant-popup {
|
|
animation: shrink var(--animation-duration) var(--animation-easing);
|
|
}
|
|
|
|
.emoji-picker.dark .emoji-picker__variant-popup {
|
|
background: var(--dark-popup-background-color);
|
|
}
|
|
|
|
.emoji-picker__emojis {
|
|
overflow-y: auto;
|
|
position: relative;
|
|
height: calc((var(--emoji-size) * var(--emoji-size-multiplier)) * var(--row-count) + var(--category-name-size));
|
|
}
|
|
|
|
.emoji-picker__emojis.hiding {
|
|
animation: fade-out 0.05s var(--animation-easing);
|
|
}
|
|
|
|
.emoji-picker__emojis h2.emoji-picker__category-name {
|
|
font-size: 0.85em;
|
|
color: var(--secondary-text-color);
|
|
text-transform: uppercase;
|
|
margin: 0.25em 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.emoji-picker.dark h2.emoji-picker__category-name {
|
|
color: var(--dark-secondary-text-color);
|
|
}
|
|
|
|
.emoji-picker__category-buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
height: var(--category-button-height);
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
button.emoji-picker__category-button {
|
|
flex-grow: 1;
|
|
background: transparent;
|
|
padding: 0;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: var(--category-button-size);
|
|
vertical-align: middle;
|
|
color: var(--category-button-color);
|
|
border-bottom: var(--category-border-bottom-size) solid transparent;
|
|
outline: none;
|
|
}
|
|
|
|
button.emoji-picker__category-button img {
|
|
width: var(--category-button-size);
|
|
height: var(--category-button-size);
|
|
}
|
|
|
|
.emoji-picker.keyboard button.emoji-picker__category-button:focus {
|
|
outline: 1px dotted var(--focus-indicator-color);
|
|
}
|
|
|
|
.emoji-picker.dark button.emoji-picker__category-button.active {
|
|
color: var(--category-button-active-color);
|
|
}
|
|
|
|
.emoji-picker.dark button.emoji-picker__category-button {
|
|
color: var(--dark-category-button-color);
|
|
}
|
|
|
|
button.emoji-picker__category-button.active {
|
|
color: var(--category-button-active-color);
|
|
border-bottom: var(--category-border-bottom-size) solid var(--category-button-active-color);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.emoji-picker.auto {
|
|
background: var(--dark-background-color);
|
|
color: var(--dark-text-color);
|
|
border-color: var(--dark-border-color);
|
|
}
|
|
|
|
.emoji-picker.auto .emoji-picker__preview {
|
|
border-top-color: var(--dark-border-color);
|
|
}
|
|
|
|
.emoji-picker.auto .emoji-picker__preview-name {
|
|
color: var(--dark-text-color);
|
|
}
|
|
|
|
.emoji-picker.auto button.emoji-picker__category-button {
|
|
color: var(--dark-category-button-color);
|
|
}
|
|
|
|
.emoji-picker.auto button.emoji-picker__category-button.active {
|
|
color: var(--category-button-active-color);
|
|
}
|
|
|
|
.emoji-picker.auto .emoji-picker__emoji:focus, .emoji-picker.auto .emoji-picker__emoji:hover {
|
|
background: var(--dark-hover-color);
|
|
}
|
|
|
|
.emoji-picker.auto .emoji-picker__search {
|
|
background: var(--dark-search-background-color);
|
|
color: var(--dark-text-color);
|
|
border-color: var(--dark-search-border-color);
|
|
}
|
|
|
|
.emoji-picker.auto h2.emoji-picker__category-name {
|
|
color: var(--dark-secondary-text-color);
|
|
}
|
|
|
|
.emoji-picker.auto .emoji-picker__search::placeholder {
|
|
color: var(--dark-search-placeholder-color);
|
|
}
|
|
|
|
.emoji-picker.auto .emoji-picker__search:focus {
|
|
border-color: var(--dark-search-focus-border-color);
|
|
}
|
|
|
|
.emoji-picker.auto .emoji-picker__search-not-found {
|
|
color: var(--dark-secondary-text-color);
|
|
}
|
|
|
|
.emoji-picker.auto .emoji-picker__search-not-found h2 {
|
|
color: var(--dark-secondary-text-color);
|
|
}
|
|
|
|
.emoji-picker.auto .emoji-picker__variant-popup {
|
|
background: var(--dark-popup-background-color);
|
|
}
|
|
} |