User:Irukaza/common.css:修订间差异
跳到导航
跳到搜索
imported>=海豚= 无编辑摘要 |
imported>=海豚= 无编辑摘要 |
||
(未显示同一用户的1个中间版本) | |||
第1行: | 第1行: | ||
. | ul.gallery { | ||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
padding: 0; | |||
} | |||
} | |||
. | ul.mw-gallery { | ||
&-packed, | |||
&-packed-hover, | |||
&-packed-overlay { | |||
text-align: left; | |||
. | div.thumb img { | ||
width: 100% !important; // fill empty space | |||
height: auto; | |||
} | |||
} | |||
. | li.gallerybox { | ||
flex-grow: 1; | |||
margin: @gallery-clutter; | |||
. | div.gallerytextwrapper { | ||
right: 0; | |||
width: auto !important; // fill empty space | |||
margin: 0; | |||
background: transparent; | |||
} | transition: @transition-background-quick; | ||
} | |||
} | |||
} | |||
&-packed-hover, | |||
&-packed-overlay { | |||
div.thumb { | |||
/* Gallary text background */ | |||
&:after { | |||
/* | position: absolute; | ||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
display: block; | |||
} | height: 60%; | ||
border-radius: 0 0 @border-radius-small @border-radius-small; | |||
content: ''; | |||
} | |||
} | |||
div.gallerytextwrapper { | |||
border-radius: @border-radius-small; | |||
} | |||
div.gallerytext { | |||
color: #a2a9b1; // color-base50 | |||
} | |||
} | } | ||
. | &-packed-hover li.gallerybox:hover, | ||
&-packed-overlay li.gallerybox { | |||
} | div.thumb:after { | ||
background: linear-gradient( to top, #000, transparent ); | |||
} | |||
. | div.gallerytextwrapper:hover { | ||
/* Prevent overflow with long caption */ | |||
overflow: hidden; | |||
max-height: 90%; | |||
background: #000; | |||
} | } | ||
} | |||
&-traditional, | |||
&-nolines { | |||
margin-right: -@gallery-clutter * 2; | |||
margin-left: -@gallery-clutter * 2; | |||
. | li.gallerybox { | ||
margin: @gallery-clutter * 2; | |||
} | } | ||
} | |||
} | |||
. | li.gallerybox { | ||
display: block; | |||
> div { | |||
width: 100% !important; // fill empty space | |||
} | height: auto; | ||
} | |||
. | div.thumb { | ||
overflow: hidden; // for border radius | |||
width: 100% !important; // fill empty space | |||
height: auto; | |||
border-color: var( --border-color-base ); | |||
margin: 0; | |||
background-color: var( --background-color-framed ); | |||
} | border-radius: @border-radius-small; | ||
} | |||
} | |||
div.gallerytext { | |||
padding: @content-margin-top / 2 0; | |||
color: var( --color-base--subtle ); | |||
font-size: @content-caption-size; | |||
p { | |||
margin-top: 0; | |||
} | |||
a.image { | |||
display: inline; | |||
} | |||
} | |||
} | |||
2021年4月24日 (六) 22:08的版本
ul.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0;
}
ul.mw-gallery {
&-packed,
&-packed-hover,
&-packed-overlay {
text-align: left;
div.thumb img {
width: 100% !important; // fill empty space
height: auto;
}
li.gallerybox {
flex-grow: 1;
margin: @gallery-clutter;
div.gallerytextwrapper {
right: 0;
width: auto !important; // fill empty space
margin: 0;
background: transparent;
transition: @transition-background-quick;
}
}
}
&-packed-hover,
&-packed-overlay {
div.thumb {
/* Gallary text background */
&:after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: block;
height: 60%;
border-radius: 0 0 @border-radius-small @border-radius-small;
content: '';
}
}
div.gallerytextwrapper {
border-radius: @border-radius-small;
}
div.gallerytext {
color: #a2a9b1; // color-base50
}
}
&-packed-hover li.gallerybox:hover,
&-packed-overlay li.gallerybox {
div.thumb:after {
background: linear-gradient( to top, #000, transparent );
}
div.gallerytextwrapper:hover {
/* Prevent overflow with long caption */
overflow: hidden;
max-height: 90%;
background: #000;
}
}
&-traditional,
&-nolines {
margin-right: -@gallery-clutter * 2;
margin-left: -@gallery-clutter * 2;
li.gallerybox {
margin: @gallery-clutter * 2;
}
}
}
li.gallerybox {
display: block;
> div {
width: 100% !important; // fill empty space
height: auto;
}
div.thumb {
overflow: hidden; // for border radius
width: 100% !important; // fill empty space
height: auto;
border-color: var( --border-color-base );
margin: 0;
background-color: var( --background-color-framed );
border-radius: @border-radius-small;
}
}
div.gallerytext {
padding: @content-margin-top / 2 0;
color: var( --color-base--subtle );
font-size: @content-caption-size;
p {
margin-top: 0;
}
a.image {
display: inline;
}
}
}