Skip to content

Instantly share code, notes, and snippets.

@ronhornbaker
Created March 3, 2016 18:44
Show Gist options
  • Save ronhornbaker/1d6695a318b7febb2f6e to your computer and use it in GitHub Desktop.
Save ronhornbaker/1d6695a318b7febb2f6e to your computer and use it in GitHub Desktop.
Updated emojione-picker css for spritesheet, dark background, position:fixed search form, and cursor:pointer on clickable things
.emoji-dialog {
position:relative;
width: 276px;
height: 264px;
background-color: #555;
box-sizing: border-box;
border-radius: 2px;
overflow: hidden;
position: relative;
box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 2px 15px rgba(0,0,0,0.1);
}
.emoji-dialog .emoji-dialog-header {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 72px;
padding: 0;
background-color:#eee;
}
.emoji-dialog .emoji-dialog-header ul {
padding: 0;
margin: 0;
list-style: none;
background-color: #bbb;
}
.emoji-dialog .emoji-dialog-header li {
display: inline-block;
box-sizing: border-box;
width: 34px;
height: 34px;
padding: 3px 4px 0;
border-radius-top-left:5px;
cursor:pointer;
}
.emoji-dialog .emoji-dialog-header div{
outline:none;
}
.emoji-dialog .emoji-dialog-header span {
width: 26px;
height: 26px;
top:0;
margin:0;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.emoji-dialog .emoji-dialog-header li.active {
background-color: #eee;
}
.emoji-dialog .emoji-dialog-header li:hover {
background-color: #ddd;
}
div.emoji-dialog div.emoji-grandlist {
position: absolute;
top: 72px;
left: 0;
right: 0;
bottom: 0;
padding: 5px 10px;
box-sizing: border-box;
width: 100%;
height: calc(100% - 72px);
overflow-x: hidden;
overflow-y: auto;
}
.emoji-dialog .emoji-category-list {
padding: 0;
margin: 0;
list-style: none;
}
.emoji-dialog .emoji-category-list li {
display: inline-block;
box-sizing: border-box;
width: 32px;
height: 32px;
padding: 3px;
border-radius: 4px;
}
.emoji-dialog .emoji-category-header {
margin-top: 4px;
margin-bottom: 4px;
font-size: 14px;
font-family: sans-serif;
font-weight: normal;
color: #bbb;
padding: 0 4px;
}
.emoji-dialog .modifiers {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 44px;
right: 5px;
}
.emoji-dialog.with-search .modifiers {
top: 52px;
}
.emoji-dialog .modifiers li {
display: inline-block;
padding: 1px 2px;
width:20px;
height:20px;
cursor:pointer;
}
.emoji-dialog .modifiers li:hover {
background-color:transparent;
}
.emoji-dialog .modifiers .modifier {
display: inline-block;
border-radius: 10px;
width: 15px;
height: 15px;
position: relative;
}
.emoji-dialog .modifiers .modifier.active::after {
content: "";
display: block;
position: absolute;
width: 10px;
height: 10px;
border-radius: 10px;
border: 1px solid #555;
top: 1px;
left: 1px;
transform: scale(1.5);
}
.emoji-dialog .modifiers li:hover {
transition-duration: 200ms;
transform: scale(1.2);
}
.emoji-dialog .emoji-search-wrapper {
position:relative;
margin-top:3px;
width:140px;
padding: 0 5px;
}
.emoji-dialog .emoji-search {
font-size: 14px;
padding: 5px 4px;
width: 100%;
border: 1px solid #ddd;
border-radius: 4px;
outline:0;
background-color:#fff;
color:#222;
}
.emoji-dialog .emoji-category-list li {
border-radius:6px;
overflow:visible;
color:#555;
cursor:pointer;
}
.emoji-dialog .emoji-category-list li:hover {
background: #fff;
color:#fff;
}
.emoji-dialog .emoji-category-list .emoji{
outline:none;
}
.emoji-dialog .emoji-category-list .emoji span {
width: 26px;
height: 26px;
font-size:26px;
top:0;
margin:0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment