Brucekomike(讨论 | 贡献) (创建页面,内容为“→首页dpl列表相关样式: .mini-block { width: 100%; min-width: 20%; padding: 16px; margin-top: 8px; box-shadow: 0 3px 6px rgba(0,0,0,0.04); border: 1px solid; border-color: rgba(0,0,0,0.05); border-radius: 8px; word-break: break-all; box-sizing: border-box; position: relative; } .mini-block p { margin: 0 0 1em 0; } .mini-block p:last-child { margin: 0; } .mini-block-container { width: 100%; display: fle…”) |
Brucekomike(讨论 | 贡献) 无编辑摘要 |
||
第49行: | 第49行: | ||
} | } | ||
.mini-block-bg-text{ | .mini-block-bg-text{ | ||
font-size: 70px; | |||
font-weight: 200; | |||
text-align: right; | |||
height: 0; | |||
color: #f1f1f1; | |||
user-select: none; | |||
margin-bottom: 0; | |||
} | |||
.mini-block-bg-text-v{ | |||
font-size: 40px; | font-size: 40px; | ||
font-weight: 200; | font-weight: 200; |
2025年1月29日 (三) 18:55的版本
/* 首页dpl列表相关样式 */
.mini-block {
width: 100%;
min-width: 20%;
padding: 16px;
margin-top: 8px;
box-shadow: 0 3px 6px rgba(0,0,0,0.04);
border: 1px solid; border-color: rgba(0,0,0,0.05);
border-radius: 8px;
word-break: break-all;
box-sizing: border-box;
position: relative;
}
.mini-block p {
margin: 0 0 1em 0;
}
.mini-block p:last-child {
margin: 0;
}
.mini-block-container {
width: 100%;
display: flex;
justify-content: space-between;
gap: 8px;
box-sizing: border-box;
}
.mini-block-list a{
/*color: #212121;*/
}
.mini-block-list a.new{
/*color: #212121;*/
}
.mini-block-list a:hover{
/*color: #00aeec;*/
}
.mini-block-list li a:hover {
/*color: #212121;*/
}
.mini-block-container li{
border-radius: 4px;
margin: 0;
list-style: none;
cursor: pointer;
transition: background cubic-bezier(0.22,0.58,0.12,0.98) 0.4s;
}
.mini-block-title {
font-size: 24px;
font-weight: 500;
}
.mini-block-bg-text{
font-size: 70px;
font-weight: 200;
text-align: right;
height: 0;
color: #f1f1f1;
user-select: none;
margin-bottom: 0;
}
.mini-block-bg-text-v{
font-size: 40px;
font-weight: 200;
color: #f1f1f1;
user-select: none;
position: absolute;
right:0;
top:0;
/*text-wrap-mode: nowrap;*/
writing-mode: vertical-rl;
}
@media screen and (min-width: 851px) {
.mini-block-container li:hover {
background: #000000;
}
.mini-block-container li:hover a {
transform: translateX(5px);
}
}
.mini-block-container ul {
margin: 0;
padding: 0;
}
.mini-block-container li a {
padding: .5em .4em;
display: inline-block;
width: 100%;
transition: transform cubic-bezier(0.22,0.58,0.12,0.98) 0.4s;
}
@media screen and (max-width: 850px) {
.mini-block {
align-self: stretch;
width: auto;
}
.mini-block-container {
flex-direction: column;
}
}