@charset "UTF-8"; .sticker-gif-container { width: 660px; /*height: 405px;*/ min-height: 74px; overflow: hidden; position: absolute; display: none; background-color: #fff; border-radius: 4px; border-top-left-radius: 0; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; animation: fade-in 0.3s; z-index: 1000; } .sticker-gif-container.gif-box { top: 29px !important; left: 118px !important; } .sticker-gif-container.sticker-box { top: 29px !important; left: 176px !important; } .sticker-gif-container .sticker-item-list:empty:before { content: 'Không có sticker nào trong danh sách này, xin vui lòng chọn bộ sticker khác'; font-size: 12px; line-height: 1.4em; color: #333; padding-bottom: 15px; } .sticker-gif-container.sticker-box { width: 610px; /*height: 452px;*/ } .sticker-gif-container.active{ display: block; } .sticker-gif-container * { box-sizing: border-box; outline: none; } .sticker-gif-container .top-bar { padding: 10px; border: 1px solid #ddd; background: #efefef; } .sticker-gif-container .search-gif { border: 1px solid #ccc; background: #fff; border-radius: 3px; width: calc(100% - 165px); display: inline-block; vertical-align: middle; box-sizing: border-box; margin-right: 6px; } .sticker-gif-container .search-gif input { width: calc(100% - 30px); height: 30px; padding: 10px; font-size: 12px; border: 0; } .sticker-gif-container .search-gif > i { font-size: 14px; color: #80b4d2; text-align: center; display: inline-block; width: 30px; } .sticker-gif-container .upload-btn { vertical-align: middle; } .sticker-gif-container .osc-uploader { position: relative; display: inline-block; } .sticker-gif-container .osc-uploader .drag-drop-area { display: none; position: relative; padding: 8px 20px; background: #fff; border: 1px solid #fae1e1; border-radius: 2px; color: #ffc5c7; } .sticker-gif-container .osc-uploader .browser-btn { position: relative; direction: ltr; text-decoration: none; cursor: pointer; border: 0; overflow: hidden; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; } .sticker-gif-container .osc-uploader input[type="file"] { position: absolute; right: 0; top: 0; font-family: arial; font-size: 118px; margin: 0; padding: 0; cursor: pointer; opacity: 0; width: 100%; height: 100%; } .sticker-gif-container .upload-btn .browser-btn > div { display: inline-block; cursor: pointer; vertical-align: middle; width: 150px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 3px; background: linear-gradient(to top, #dadada, #f5f5f5); box-shadow: inset 0 1px #fff, 0 1px #f3f3f3; padding: 7px 10px 8px; font-weight: bold; font-size: 12px; } .sticker-gif-container .gif-list { max-height: 350px; overflow-y: auto; overflow-x: hidden; position: relative; box-sizing: border-box; text-align: left; border: 1px solid #ddd; border-top: 0; background-color: #fff; z-index: 10; } .sticker-gif-container .gif-list ul { margin: 0; list-style-type: none; padding: 10px; position: relative; } .sticker-gif-container .gif-list ul:empty:before { content: 'Bạn không có GIF nào trong recent list, xin sử dụng ô tìm kiếm để tìm GIFs bạn muốn'; } .sticker-gif-container .gif-list li { position: relative; background: #ddd; } .sticker-gif-container .gif-list li { display: inline-block; width: 192px; display: inline-block; background: #FEFEFE; margin: 0 0 10px 10px; position: relative; background: #ddd; } .sticker-gif-container .gif-list li video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer; } .sticker-gif-container .sticker-item-list { display: flex; width: 100%; flex-wrap: wrap; max-height: 400px; overflow: auto; border: 1px solid #d5d5d5; padding: 15px 0 0 15px; } .sticker-gif-container .sticker-img > img { width: 80px; height: 80px; display: block; text-align: center; margin: 0 15px 15px 0; cursor: pointer; } .sticker-gif-container .sticker-list { float: left; width: 75%; margin-right: 15px; position: relative; overflow: hidden; } .sticker-gif-container .more-list { float: right; height: auto; position: relative; display: inline-flex; width: 40px; background: #efefef; } .sticker-gif-container .sticker-list .fa { font-size: 32px; color: #666; cursor: pointer; line-height: 34px; } .sticker-gif-container .more-list span { background-color: #fa3e3e; border-radius: 2px; color: #fff; padding: 1px 3px; cursor: pointer; position: absolute; right: 4px; top: 4px; } .sticker-gif-container ul { margin: 0; padding: 0; } .sticker-gif-container .add-btn { display: inline-block; cursor: pointer; width: 130px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 3px; background: linear-gradient(to top, #dadada, #f5f5f5); box-shadow: inset 0 1px #fff, 0 1px #f3f3f3; padding: 7px 10px 8px; font-weight: bold; font-size: 12px; vertical-align: middle; } .sticker-gif-container .sticker-collection { position: absolute; display: block; padding-left: 34px; margin: 0; /*width: 4000px;*/ display: flex; } .sticker-gif-container .sticker-collection li { float: left; width: 34px; height: 34px; display: block; margin-right: 15px; text-align: center; } .sticker-gif-container .sticker-collection li img { max-width: 100%; max-height: 100%; cursor: pointer; } .sticker-gif-container .sticker-list .next-btn { float: right; /*width: 130px;*/ width: 38px; height: auto; position: relative; background: #efefef; text-align: right; padding-right: 15px; cursor: pointer; } .sticker-gif-container .sticker-list .previous-btn { float: left; width: 34px; height: auto; position: relative; background: #efefef; text-align: center; } .store-stickers-container { display: none; }