模板:Gallery/styles.css:修订间差异

来自决策链云智库
无编辑摘要
无编辑摘要
标签已被回退
第1行: 第1行:
.template-gallery {
.template-gallery {
margin-top: var( --space-md );
    margin-top: var(--space-md);
display: flex;
    display: flex;
overflow: auto;
    overflow: auto; /* 启用滚动条 */
gap: var( --space-xs );
    gap: var(--space-xs);
    flex-wrap: nowrap; /* 禁止元素换行 */
}
}


.template-gallery a.mw-file-description {
.template-gallery a.mw-file-description {
display: block;
    display: block;
     border-radius: var( --border-radius--small );
     border-radius: var(--border-radius--small);
     overflow: hidden;
     overflow: hidden;
}
}
第14行: 第15行:
.template-gallery a.mw-file-description img {
.template-gallery a.mw-file-description img {
     transition: transform 250ms ease;
     transition: transform 250ms ease;
    max-width: 100%; /* 确保图片不超过其父元素的宽度 */
    height: auto; /* 保持图片的宽高比 */
}
}


第21行: 第24行:


.template-gallery video {
.template-gallery video {
max-width: none !important;
    max-width: none !important;
max-height: 120px !important;
    max-height: 120px !important;
     width: auto !important;
     width: auto !important;
     overflow: hidden;
     overflow: hidden;
     border-radius: var( --border-radius--small );
     border-radius: var(--border-radius--small);
}
}

2024年1月24日 (三) 23:57的版本

.template-gallery {
    margin-top: var(--space-md);
    display: flex;
    overflow: auto; /* 启用滚动条 */
    gap: var(--space-xs);
    flex-wrap: nowrap; /* 禁止元素换行 */
}

.template-gallery a.mw-file-description {
    display: block;
    border-radius: var(--border-radius--small);
    overflow: hidden;
}

.template-gallery a.mw-file-description img {
    transition: transform 250ms ease;
    max-width: 100%; /* 确保图片不超过其父元素的宽度 */
    height: auto; /* 保持图片的宽高比 */
}

.template-gallery a.mw-file-description:hover img {
    transform: scale(1.1);
}

.template-gallery video {
    max-width: none !important;
    max-height: 120px !important;
    width: auto !important;
    overflow: hidden;
    border-radius: var(--border-radius--small);
}