diff --git a/app/css/app.css b/app/css/app.css index 867a0276..d3031c61 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -1697,17 +1697,23 @@ img.img_fullsize { .emoji-menu { position: absolute; z-index: 999; - width: 180px; - margin-left: -91px; - margin-top: -260px; + width: 206px; + margin-left: -100px; + margin-top: -233px; overflow: hidden; -} -.emoji-items-wrap1 { - background: rgba(0,0,0, 0.65); - padding: 5px 2px 5px 5px; + + border: 1px #dfdfdf solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + overflow: hidden; + -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); +} +.emoji-items-wrap1 { + background: #FFF; + padding: 8px 2px 5px 5px; } .emoji-items-wrap1 .emoji-menu-tabs { width: 100%; @@ -1717,50 +1723,58 @@ img.img_fullsize { color: white; } .emoji-menu-tabs .emoji-menu-tab { - display: inline-block; - width: 24px; - height: 24px; - background: url(../img/icons/EmojiTabSheet.png) no-repeat; - background-size: 120px 48px; -} -.icon-smile { - background-position: 0 0 !important; -} -.icon-smile-selected { - background-position: 0 -24px !important; - border-bottom: 1px solid white; -} -.icon-flower { - background-position: -24px 0 !important; -} -.icon-flower-selected { - background-position: -24px -24px !important; - border-bottom: 1px solid white; -} -.icon-bell { - background-position: -48px 0 !important; -} -.icon-bell-selected { - background-position: -48px -24px !important; - border-bottom: 1px solid white; -} -.icon-car { - background-position: -72px 0 !important; + display: inline-block; + width: 24px; + height: 24px; + background: url(../img/icons/IconsetSmiles.png) no-repeat; + background-size: 42px 350px; } -.icon-car-selected { - background-position: -72px -24px !important; - border-bottom: 1px solid white; +.is_1x .emoji-menu-tabs .emoji-menu-tab { + background-image: url(../img/icons/IconsetSmiles_1x.png); } -.icon-grid { - background-position: -96px 0 !important; +.emoji-menu-tabs .icon-smile {background-position: -9px -34px; } +.emoji-menu-tabs .icon-smile-selected {background-position: -9px -5px; } + +.is_2x .emoji-menu-tabs .icon-smile {background-position: -9px -37px; } +.is_2x .emoji-menu-tabs .icon-smile-selected {background-position: -9px -8px; } + +.emoji-menu-tabs .icon-flower {background-position: -9px -145px; } +.emoji-menu-tabs .icon-flower-selected {background-position: -9px -118px; } + +.is_2x .emoji-menu-tabs .icon-flower {background-position: -9px -145px; } +.is_2x .emoji-menu-tabs .icon-flower-selected {background-position: -9px -119px; } + +.emoji-menu-tabs .icon-bell {background-position: -9px -90px; } +.emoji-menu-tabs .icon-bell-selected {background-position: -9px -62px; } + +.is_2x .emoji-menu-tabs .icon-bell {background-position: -9px -91px; } +.is_2x .emoji-menu-tabs .icon-bell-selected {background-position: -9px -64px; } + +.emoji-menu-tabs .icon-car {background-position: -9px -196px; } +.emoji-menu-tabs .icon-car-selected {background-position: -9px -170px; } + +.emoji-menu-tabs .icon-grid {background-position: -9px -248px; } +.emoji-menu-tabs .icon-grid-selected {background-position: -9px -222px; } + +.emoji-menu-tabs .icon-smile, +.emoji-menu-tabs .icon-flower, +.emoji-menu-tabs .icon-bell, +.emoji-menu-tabs .icon-car, +.emoji-menu-tabs .icon-grid { + opacity: 0.7; } -.icon-grid-selected { - background-position: -96px -24px !important; - border-bottom: 1px solid white; +.emoji-menu-tabs .icon-smile:hover, +.emoji-menu-tabs .icon-flower:hover, +.emoji-menu-tabs .icon-bell:hover, +.emoji-menu-tabs .icon-car:hover, +.emoji-menu-tabs .icon-grid:hover { + opacity: 1; } + + .emoji-menu .emoji-items-wrap { position: relative; - height: 190px; + height: 162px; } .emoji-menu .emoji-items { padding-right: 8px; @@ -1781,8 +1795,8 @@ img.img_fullsize { border-radius: 2px; } .emoji-menu .emoji-items a:hover { - background-color: rgba(0,0,0, 0.5); - /*background-color: #fffae7;*/ + /*background-color: rgba(0,0,0, 0.5);*/ + background-color: #edf2f5; } .emoji-menu:after { content: ' '; @@ -1794,6 +1808,7 @@ img.img_fullsize { } .emoji-menu-tail { + display: none; background: url(../img/icons/IconsetW.png?1) -14px -268px no-repeat; background-size: 42px 560px; width: 14px; @@ -1807,9 +1822,12 @@ img.img_fullsize { .emoji-menu .nano > .pane { background : rgba(255,255,255,.0); + right: -2px; } .emoji-menu .nano > .pane > .slider { - background: rgba(255,255,255,0.4); + /*background: rgba(255,255,255,0.4);*/ + background: #d1d1d1; + margin: 0 3px 0 4px; /*background: #A5B1B9;*/ /*margin: 0 5px;*/ /*-moz-border-radius : 0; diff --git a/app/img/icons/EmojiTabSheet.png b/app/img/icons/EmojiTabSheet.png deleted file mode 100644 index 026a37fe..00000000 Binary files a/app/img/icons/EmojiTabSheet.png and /dev/null differ diff --git a/app/img/icons/IconsetSmiles.png b/app/img/icons/IconsetSmiles.png new file mode 100644 index 00000000..c58ed712 Binary files /dev/null and b/app/img/icons/IconsetSmiles.png differ diff --git a/app/img/icons/IconsetSmiles_1x.png b/app/img/icons/IconsetSmiles_1x.png new file mode 100644 index 00000000..9679265d Binary files /dev/null and b/app/img/icons/IconsetSmiles_1x.png differ