mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-13 06:51:29 +00:00
362dcd01cc
- .wikitable--border to enable vertical divider - .wikitable--stripe to enable striped rows
127 lines
2.7 KiB
Plaintext
127 lines
2.7 KiB
Plaintext
.mask-gradient(@direction, @color1, @color2, @color3: null, @color4: null) {
|
|
& when (@color3 =null),
|
|
(@color4 =null) {
|
|
-webkit-mask-image: linear-gradient( @direction, @color1, @color2 );
|
|
mask-image: linear-gradient( @direction, @color1, @color2 );
|
|
}
|
|
|
|
& when not(@color3 =null),
|
|
not(@color4 =null) {
|
|
-webkit-mask-image: linear-gradient( @direction, @color1, @color2, @color3, @color4 );
|
|
mask-image: linear-gradient( @direction, @color1, @color2, @color3, @color4 );
|
|
}
|
|
}
|
|
|
|
.hideOverflowButton() {
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.showOverflowButton() {
|
|
z-index: @z-index-stacking-3;
|
|
pointer-events: auto;
|
|
visibility: visible;
|
|
}
|
|
|
|
// Elements enhanced by overflowElements.js
|
|
.citizen-overflow {
|
|
&-wrapper {
|
|
position: relative;
|
|
display: flex; /* So that it respects float elements (#878) */
|
|
max-width: max-content;
|
|
|
|
&:has( .citizen-overflow-content > .wikitable ) {
|
|
margin-top: var( --space-md );
|
|
margin-bottom: var( --space-md );
|
|
border-radius: var( --border-radius-medium );
|
|
box-shadow: var( --box-shadow-border );
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
width: 100%;
|
|
overflow: auto hidden;
|
|
|
|
> .wikitable {
|
|
display: table;
|
|
max-width: none;
|
|
/* Handle margin and box-shadow on outer wrapper */
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
overflow: initial;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.citizen-overflow--left > & {
|
|
.mask-gradient(90deg, transparent, #000 var( --overflow-gradient-size ));
|
|
}
|
|
|
|
.citizen-overflow--right > & {
|
|
.mask-gradient(270deg, transparent, #000 var( --overflow-gradient-size ));
|
|
}
|
|
|
|
.citizen-overflow--left.citizen-overflow--right > & {
|
|
.mask-gradient(90deg, transparent, #000 var( --overflow-gradient-size ), #000 ~'calc( 100% - var( --overflow-gradient-size ) )', transparent);
|
|
}
|
|
}
|
|
|
|
&-nav {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&-navButton {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 100%;
|
|
padding: 0;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: var( --border-radius-medium );
|
|
.hideOverflowButton();
|
|
|
|
&::before {
|
|
width: 1.25rem;
|
|
}
|
|
|
|
&-left {
|
|
.citizen-overflow--left & {
|
|
.showOverflowButton();
|
|
}
|
|
|
|
&::before {
|
|
transform: rotate( -90deg );
|
|
}
|
|
}
|
|
|
|
&-right {
|
|
.citizen-overflow--right & {
|
|
.showOverflowButton();
|
|
}
|
|
|
|
&::before {
|
|
transform: rotate( 90deg );
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-button-quiet--hover );
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --background-color-button-quiet--active );
|
|
}
|
|
}
|
|
}
|
|
|
|
.citizen-animations-ready .citizen-overflow-content {
|
|
scroll-behavior: smooth;
|
|
}
|