You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
3.3 KiB
1 lines
3.3 KiB
.characterPicker{min-height:0;width:100%;height:100%;background:#fff;padding:30px 30px 24px;box-sizing:border-box}.characterPicker__surface{position:relative;width:100%;max-height:100%;margin:0 auto;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.characterPicker__surface::-webkit-scrollbar{display:none}.characterPicker__close{position:absolute;top:10px;right:10px;width:20px;height:20px;padding:0;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.characterPicker__close img{width:20px;height:20px;display:block;object-fit:cover}.characterPicker__topBar{display:flex;align-items:center;justify-content:space-between;gap:12px}.characterPicker__title{margin:0;font-size:14px;font-weight:500;line-height:26px;color:#333}.characterPicker__search{width:228px;height:27px;border:1px solid #e5e6eb;border-radius:9px;display:flex;align-items:center;padding:0 9px;gap:6px;background:#fff}.characterPicker__searchIcon{width:20px;height:20px;object-fit:cover}.characterPicker__searchInput{flex:1;border:0;outline:0;background:transparent;font-size:14px;font-weight:500;line-height:26px;color:#333}.characterPicker__searchInput::placeholder{color:#999}.characterPicker__grid{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:15px}.characterPicker__card{position:relative;height:168px;padding:0;border:2px solid #f0f0f0;border-radius:9px;background:#d6ceef;overflow:hidden;cursor:pointer}.characterPicker__cardImage{width:100%;height:100%;object-fit:cover;display:block}.characterPicker__cardTag{position:absolute;right:0;bottom:0;width:77px;height:26px;border-radius:24px 0 9px;background:linear-gradient(90deg,#333,#5c3bc7);font-size:14px;font-weight:500;line-height:24px;color:#fff;text-align:center}.characterPicker__sectionHeader{margin-top:27px;display:flex;align-items:center;justify-content:space-between;gap:12px}.characterPicker__tabs{display:inline-flex;align-items:center;gap:18px}.characterPicker__tab{border:0;background:transparent;padding:0;font-size:14px;font-weight:500;line-height:26px;color:#999;cursor:pointer}.characterPicker__tab--active{color:#333}.characterPicker__categoryButton{width:105px;height:27px;border:1px solid #e5e6eb;border-radius:9px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:6px;background:#fff;font-size:14px;font-weight:500;line-height:26px;color:#333;cursor:pointer}.characterPicker__categoryButton img{width:15px;height:15px;object-fit:cover;transform:rotate(90deg)}.characterPicker__categoryDropdown{min-width:120px;max-height:300px;overflow:auto;border:1px solid #e5e6eb;border-radius:9px;background:#fff;padding:6px}.characterPicker__categoryItem{width:100%;border:0;border-radius:7px;background:#fff;text-align:left;padding:6px 8px;font-size:14px;color:#333;cursor:pointer}.characterPicker__categoryItem--active{background:#f5f5f5}.character-picker-arco-modal .arco-modal{overflow:hidden}.character-picker-arco-modal .arco-modal-content{height:871px;max-height:80vh;padding:0;overflow:hidden}.character-picker-arco-modal .arco-modal-body{height:100%;padding:0;overflow:hidden}@media (max-width: 1200px){.characterPicker__surface{width:calc(100vw - 24px);padding-top:16px}.characterPicker__search{width:180px}.characterPicker__grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.characterPicker__card{height:140px}}
|
|
|