iconGroupBox.1705924948177.css 1.7 KB

1
  1. .model{position:relative;width:calc(((var(--iconWidth) + 26px) * 8) + 60px);height:calc(4 * (var(--iconWidth) + 35px) + 60px);display:flex;align-items:center;justify-content:center;transform:translateY(-30px)!important}@media (max-width: 900px){.model{width:calc(((var(--iconWidth) + 26px) * 4) + 60px)}}#iconGroupBox{position:fixed;width:100vw;height:100vh;z-index:10;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all .5s;background-color:#3d3d3da1;display:flex;flex-direction:column;align-items:center;justify-content:center}#iconGroupBox .groupName{margin-bottom:30px;transform:translateY(-30px)}#iconGroupBox .groupName>.el-input{width:200px;height:35px;background-color:transparent}#iconGroupBox .groupName>.el-input>.el-input__wrapper{border-radius:10px;background-color:#8b8b8b53;border:3px solid rgba(255,255,255,.53);box-shadow:none!important}#iconGroupBox .groupName>.el-input>.el-input__wrapper>.el-input__inner{text-align:center;color:#fff}#iconGroupBox .iconGroupItem{overflow-y:scroll;transition:all .3s;transform:translateZ(0);width:-moz-max-content;width:max-content;height:calc(4 * (var(--iconWidth) + 40px));border-radius:var(--iconRadius);display:grid;padding:20px;background-color:#ffffff7d;grid-template-columns:repeat(8,var(--iconWidth));grid-column-gap:26px;grid-row-gap:5px;grid-auto-flow:dense;grid-template-rows:repeat(auto-fit,calc(var(--iconWidth) + 35px))}#iconGroupBox .iconGroupItem::-webkit-scrollbar{display:none}@media (max-width: 900px){#iconGroupBox .iconGroupItem{grid-template-columns:repeat(4,var(--iconWidth))}}.groupBox-enter-active,.groupBox-leave-active{transition:opacity .5s ease}.groupBox-enter-from,.groupBox-leave-to{opacity:0}