html { /* background-image: url("../images/background.jpg"); */ background-size: cover; filter: blur("2px"); } body { z-index: 1; } html, body { padding: 0; margin: 0; height: 100%; box-sizing: border-box; /* 将内外边距计入 */ } /* album .song-br li { display: inline-block; width: 22%; text-align: center; } .song-br img { display: block; margin: 5px auto; width: 100px; height: 100px; } */ /* search result */ .song-item { display: flex; align-items: flex-end; /* 底部对齐 */ margin: 1% auto; padding: 1%; border: solid 1px transparent; width: 90%; height: 110px; overflow: auto; } .song-item > img { width: 100px; height: 100px; } .song-info { display: inline-block; max-width: 40%; min-width: 40%; padding-left: 5px; } .song-info a { display: inline-block; /* 限制宽度父元素 100% */ width: 100%; font-weight: bold; } .song-info p { padding-left: 5px; font-size: 0.8em; color: gray; } .column2 { display: grid; /* grid-template-columns: repeat(2, 1fr); */ grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } .stared, .addQueue, .moreOpt { margin-right: 10px; } .stared > a, .addQueue > a, .moreOpt > a { display: inline-block; width: 32px; height: 32px; } .stared img, .addQueue img, .moreOpt img { width: 32px; height: 32px; } .playing { background-color: #D2A577a0; } .action-bt img { width: 25px; height: 25px; } .playlist-song img { width: 30px; height: 30px; } /* Main 窗口 */ .main-window-p { position: absolute; z-index: 999; width: 100%; height: 100%; background-color: #101010a1; } .main-window { width: 400px; height: 300px; left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%); border: solid 1px transparent; background-color: #FFF5DA; border-radius: 5px; color: white; padding: 10px; } /* Notify 窗口 */ .main-notify { width: 240px; height: 120px; position: absolute; left: 100%; top: 50px; border: solid 1px transparent; border-radius: 5px; transform: translate(-110%, 0%); background-color: #FFF5DA; display: flex; align-items: center; z-index: 1000; padding: 5px; } .main-notify-header { width: 40%; display: flex; justify-content: center; align-items: center; } .main-notify-icon { width: 32px; height: 32px; } .main-notify-content { height: 100%; } .main-notify-title { display: flex; align-items: center; justify-content: center; height: 40%; } .main-notify-title > h2 { margin: 0; } .main-notify-msg { display: flex; align-items: center; }