mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-16 19:10:34 +00:00
181 lines
3.6 KiB
Plaintext
181 lines
3.6 KiB
Plaintext
/*
|
|
* Citizen - MultimediaViewer Styles
|
|
* https://starcitizen.tools
|
|
*/
|
|
|
|
@import '../../../resources/variables.less';
|
|
|
|
.skin-citizen {
|
|
.mw-mmv {
|
|
&-progress {
|
|
top: 0;
|
|
height: 2px;
|
|
background-color: transparent;
|
|
|
|
&-percent {
|
|
height: inherit;
|
|
}
|
|
}
|
|
|
|
&-post-image {
|
|
overflow: hidden;
|
|
border-radius: var( --border-radius--large ) var( --border-radius--large ) 0 0;
|
|
background-color: var( --color-surface-1 );
|
|
color: var( --color-base--emphasized );
|
|
}
|
|
|
|
&-image-metadata {
|
|
border-color: var( --border-color-base );
|
|
background-color: var( --color-surface-2 );
|
|
color: var( --color-base );
|
|
}
|
|
|
|
&-info-box {
|
|
border-color: var( --border-color-base );
|
|
background-color: var( --color-surface-3 );
|
|
}
|
|
|
|
&--label {
|
|
background-color: var( --color-surface-3 );
|
|
color: var( --color-base );
|
|
}
|
|
|
|
&-credit,
|
|
&-image-links li {
|
|
color: var( --color-base--subtle );
|
|
}
|
|
|
|
&-stripe-button.mw-mmv-description-page-button {
|
|
margin: 11px var( --padding-page );
|
|
font-size: @ui-menu-text;
|
|
}
|
|
|
|
&-permission-box {
|
|
h3 {
|
|
color: var( --color-base );
|
|
}
|
|
|
|
.mw-mmv-permission-text {
|
|
.mw-mmv-permission-text-fader {
|
|
background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ) 0%, var( --color-surface-1 ) 100% );
|
|
}
|
|
}
|
|
}
|
|
|
|
&-title-para .mw-mmv-ttf-ellipsis {
|
|
background-color: var( --color-surface-1 );
|
|
box-shadow: none;
|
|
}
|
|
|
|
&-ttf-container .mw-mmv-ttf-ellipsis:before {
|
|
background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ) 0%, var( --color-surface-1 ) 100% );
|
|
}
|
|
|
|
&-dialog {
|
|
background-color: var( --color-surface-1 );
|
|
box-shadow: var( --box-shadow-dialog );
|
|
|
|
.mw-mmv-dialog-down-arrow {
|
|
background-color: var( --color-surface-1 );
|
|
}
|
|
}
|
|
|
|
&-reuse-dialog .mw-mmv-reuse-tabs {
|
|
border-color: var( --border-color-base );
|
|
}
|
|
|
|
&-options-dialog-header {
|
|
color: var( --color-base--emphasized );
|
|
}
|
|
|
|
&-options-text-header {
|
|
color: var( --color-base );
|
|
}
|
|
|
|
&-options-text-body {
|
|
color: var( --color-base--subtle );
|
|
}
|
|
|
|
&-download-dialog .mw-mmv-dialog-down-arrow {
|
|
background-color: var( --background-color-framed );
|
|
}
|
|
|
|
&-download-pane {
|
|
.mw-mmv-download {
|
|
&-area .mw-mmv-download-preview-link {
|
|
color: var( --color-base--subtle );
|
|
}
|
|
|
|
&-attribution {
|
|
background-color: var( --background-color-framed );
|
|
color: var( --color-base );
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-framed--hover );
|
|
color: var( --color-base--emphasized );
|
|
}
|
|
|
|
&-attribution-cta-invite {
|
|
color: var( --color-base--subtle );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-download-button,
|
|
&-reuse-button,
|
|
&-options-button,
|
|
&-close,
|
|
&-fullscreen,
|
|
&-next-image,
|
|
&-prev-image {
|
|
background-position: center;
|
|
background-size: 20px; // smaller icon
|
|
}
|
|
|
|
/* So that tapping the border won't open the file */
|
|
&-next-image {
|
|
right: 0;
|
|
}
|
|
|
|
&-prev-image {
|
|
left: 0;
|
|
}
|
|
|
|
/* Increase click area */
|
|
&-next-image,
|
|
&-prev-image {
|
|
z-index: 1002; // avoid covering other buttons
|
|
top: 20vh !important; // override inline style
|
|
height: 50vh;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and ( max-width: @width-breakpoint-tablet ) {
|
|
.skin-citizen {
|
|
.mw-mmv {
|
|
&-image {
|
|
/* So that the image is not clickable on mobile */
|
|
img {
|
|
cursor: auto;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&-metadata-links-column {
|
|
width: auto; // Fix mobile bouncing
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
&-untruncated {
|
|
.mw-mmv-image-metadata-desc-column,
|
|
.mw-mmv-image-metadata-links-column {
|
|
width: auto;
|
|
max-width: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|