105 lines
1.9 KiB
CSS
105 lines
1.9 KiB
CSS
/* 九宫格弹窗：深色模糊遮罩 + 4 列应用图标 + 底部关闭按钮（对齐 huangguocg.com） */
|
||
.nine-grid-mask {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 1900;
|
||
padding: 40px 24px;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(0, 0, 0, 0.85);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
backdrop-filter: blur(12px);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.nine-grid-mask.is-open {
|
||
display: flex;
|
||
}
|
||
|
||
.nine-grid-panel {
|
||
width: min(520px, 100%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 24px;
|
||
}
|
||
|
||
.nine-grid-list {
|
||
width: 100%;
|
||
max-height: 70vh;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 28px 24px;
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
.nine-grid-item {
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: #fff;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nine-grid-item[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.nine-grid-icon {
|
||
width: 100%;
|
||
max-width: 80px;
|
||
aspect-ratio: 1;
|
||
display: block;
|
||
object-fit: cover;
|
||
border-radius: 18px;
|
||
}
|
||
|
||
.nine-grid-name {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
font-size: 15px;
|
||
line-height: 22px;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.nine-grid-close {
|
||
width: 36px;
|
||
height: 36px;
|
||
padding: 0;
|
||
background: transparent;
|
||
border: 0;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nine-grid-close img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.nine-grid-panel {
|
||
width: min(360px, 100%);
|
||
}
|
||
|
||
.nine-grid-list {
|
||
gap: 20px 12px;
|
||
}
|
||
|
||
.nine-grid-icon {
|
||
max-width: 70px;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.nine-grid-name {
|
||
font-size: 13px;
|
||
line-height: 18px;
|
||
}
|
||
}
|