模版:CSS/首页.css:修订间差异
< 模版:CSS
HW(留言 | 贡献) (创建页面,内容为“.page-header-info { display: none !important; } .recent-article { max-height: 40vh; overflow-y: auto; } .other-sites { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; justify-content: center; background: var(--color-surface-1); } .other-sites .site { position: relative; cursor: pointer; display: block; background-size: contain; background-repeat: no-repeat; background-position: center; margin-bottom: 30px;…”) |
|||
| (未显示同一用户的12个中间版本) | |||
| 第16行: | 第16行: | ||
.other-sites .site { | .other-sites .site { | ||
position: relative; | /*position: relative;*/ | ||
cursor: pointer; | cursor: pointer; | ||
display: block; | display: block; | ||
| 第75行: | 第75行: | ||
grid-template-columns:1fr; | grid-template-columns:1fr; | ||
} | } | ||
} | |||
@media only screen and (max-width: 800px){ | |||
.other-sites { | |||
grid-template-columns: repeat(3, 1fr); | |||
} | |||
.other-sites .site{ | |||
margin-bottom:20px; | |||
margin-top:20px; | |||
} | |||
.site::after { | |||
white-space: normal; | |||
width: min(75px, 33vw); | |||
} | |||
} | |||
.other-sites .site a{ | |||
pointer-events: none; | |||
} | |||
.other-sites .site:hover a{ | |||
pointer-events: auto; | |||
} | |||
.flex-box { | |||
display: flex; | |||
align-items: flex-end; | |||
gap: 1rem; | |||
margin: 0 auto; | |||
width: fit-content | |||
} | |||
.flex-logo { | |||
height: 100%; | |||
display: flex; | |||
align-items: center; | |||
mask-image: linear-gradient(to bottom right, #000 0%, transparent 100%); | |||
-webkit-mask-image: linear-gradient(to bottom right, #000 0%, transparent 100%); | |||
} | |||
.flex-logo img { | |||
height: 100%; | |||
width: auto; | |||
object-fit: contain; | |||
max-height: 8em; | |||
} | |||
.flex-text { | |||
display: flex; | |||
flex-direction: column; | |||
position: relative; | |||
overflow: hidden; | |||
white-space: nowrap; | |||
transform:translateY(-60%); | |||
} | |||
.flex-title { | |||
font-size: 1.25rem; | |||
font-weight: 600; | |||
margin-bottom: 0.3rem; | |||
line-height: 1.2; | |||
} | |||
.flex-subtitle { | |||
font-size: 1rem; | |||
line-height: 1.2; | |||
} | |||
@media (max-width:768px) { | |||
.flex-box { | |||
flex-direction: column; | |||
align-items: center; | |||
} | |||
.flex-text{ | |||
text-align: center; | |||
} | |||
} | |||
.发现列表{ | |||
display: flex; | |||
flex-direction: column-reverse; | |||
} | |||
.发现列表 p{ | |||
display:none; | |||
} | |||
.发现列表 dl{ | |||
--space-md: 0; | |||
} | } | ||
2026年5月17日 (日) 09:26的最新版本
.page-header-info {
display: none !important;
}
.recent-article {
max-height: 40vh;
overflow-y: auto;
}
.other-sites {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
justify-content: center;
background: var(--color-surface-1);
}
.other-sites .site {
/*position: relative;*/
cursor: pointer;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-bottom: 30px;
margin-top: 30px;
transition: all 0.3s ease;
}
.other-sites .site img{
width: 50px;
height: 50px;
}
.site::after {
content: attr(data-name);
position: absolute;
top: calc(100% + 8px);
left: 50%;
background: var(--color-surface-0);
transform: translateX(-50%) translateY(80%);
color: var(--color-base);
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 0 5px 0px var(--color-base);
z-index: 30;
}
.site:hover{
transform:scale(1.3);
}
.site:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0%);
}
.darkblock .mw-heading3{
margin-top:0;
}
.grid-container{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}
@media (max-width:768px){
.grid-container{
grid-template-columns:1fr;
}
}
@media only screen and (max-width: 800px){
.other-sites {
grid-template-columns: repeat(3, 1fr);
}
.other-sites .site{
margin-bottom:20px;
margin-top:20px;
}
.site::after {
white-space: normal;
width: min(75px, 33vw);
}
}
.other-sites .site a{
pointer-events: none;
}
.other-sites .site:hover a{
pointer-events: auto;
}
.flex-box {
display: flex;
align-items: flex-end;
gap: 1rem;
margin: 0 auto;
width: fit-content
}
.flex-logo {
height: 100%;
display: flex;
align-items: center;
mask-image: linear-gradient(to bottom right, #000 0%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom right, #000 0%, transparent 100%);
}
.flex-logo img {
height: 100%;
width: auto;
object-fit: contain;
max-height: 8em;
}
.flex-text {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
white-space: nowrap;
transform:translateY(-60%);
}
.flex-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.3rem;
line-height: 1.2;
}
.flex-subtitle {
font-size: 1rem;
line-height: 1.2;
}
@media (max-width:768px) {
.flex-box {
flex-direction: column;
align-items: center;
}
.flex-text{
text-align: center;
}
}
.发现列表{
display: flex;
flex-direction: column-reverse;
}
.发现列表 p{
display:none;
}
.发现列表 dl{
--space-md: 0;
}