MediaWiki:Vector.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Vector skin */
.slider{
background: var(--background-color, #000);
width: 100%;
display: grid;
grid-template-columns: 1fr calc(var(--index-width, 120px) + var(--index-gap, 8px) * 2);
position: relative;
}
.slider>span{
width: 0;
height: var(--timerbar-height, 0px);
background: var(--timerbar-color, #808080);
position: absolute;
left: 0;
bottom: 0;
z-index: 5;
}
.slider > div{
width: var(--index-width, 120px);
padding: var(--index-gap, 8px);
display: flex;
flex-direction: column;
gap: var(--index-gap, 8px);
background: var(--background-color, #000);
}
.slider > div img{
width: 100% !important;
height: auto !important;
cursor: pointer;
opacity: var(--index-opacity, 0.6);
transition: opacity var(--index-transition-duartion, 0.3s);
}
.slider > div img.current{
opacity: 1;
}
.slider > ul{
margin: 0;
list-style: none;
width: 100%;
height: 100%;
position: relative;
}
.slider > ul > li{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
text-align: center;
opacity: 0;
transition: opacity var(--main-transition-duartion, 0.3s);
padding-left: min(var(--text-min-width, 50%), var(--image-max-width, 600px));
}
.slider > ul > li.current{
opacity: 1;
}
.slider > ul > li > *{
position: relative;
z-index: 1;
}
.slider > ul > li > img{
position: absolute;
left: 0;
top: 0;
width: auto !important;
height: 100% !important;
z-index: 0;
}
.slider > ul > li::before{
content: "";
display: block;
height: 100%;
width: max( calc(var(--text-min-width, 50%) + var(--gradient-width, 120px)), calc(100% - var(--image-max-width, 600px) + var(--gradient-width, 120px)));
position: absolute;
top: 0;
right: 0;
z-index: 1;
background: linear-gradient(to right, transparent, var(--background-color, #000) var(--gradient-width, 120px), var(--background-color, #000)) top right no-repeat;
}