mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-09-29 13:17:35 +00:00
8423974c6a
* make top of "below-the-fold" be actually above the fold * put all above-the-fold content except title and more details button into that area * kep below-the-fold area in fullscreen mode when title/credit gets untruncated * increase title length to 180 (140 before reducing font size) - works nicely on my 1600x900 laptop * remove old styles which were intended to make the button smaller when the panel is close but were mostly broken anyway and only caused the button to twitch To avoid redoing all the size calculation logic, we cheat and use a negative margin to pull the below-the-fold content above the fold. Change-Id: I18d7bdb7dbbdfb8201c0d66257731febfac31263 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/833
69 lines
1.6 KiB
Plaintext
69 lines
1.6 KiB
Plaintext
@import "../mmv.globals";
|
|
@import "../mmv.mixins";
|
|
|
|
@button-vertical-padding: 20px;
|
|
@button-height: 25px;
|
|
@repo-button-width: 50px;
|
|
|
|
// The buttons need to be positioned to the bottom right corner of .mw-mmv-title-contain, and
|
|
// other text in that element must not overlap them. Their width is not known (depends on the
|
|
// translation) so we float them to the right and calculate the top margin required to make them
|
|
// full height.
|
|
.mw-mmv-stripe-button {
|
|
@button-text-color: rgb(136, 136, 136);
|
|
|
|
float: right;
|
|
margin-top: @metadatabar-above-fold-inner-height - ( @button-height + 2 * @button-vertical-padding );
|
|
|
|
.unselectable;
|
|
font-size: 1.25em;
|
|
color: @button-text-color;
|
|
cursor: pointer;
|
|
transition: opacity 0.25s;
|
|
|
|
&.empty {
|
|
display: none;
|
|
}
|
|
|
|
&:before {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
|
|
// fix odd position caused by bottom of icon and bottom of SVG not being aligned
|
|
position: relative;
|
|
top: 0.1em;
|
|
|
|
background-size: 100% 100%;
|
|
content: ' ';
|
|
vertical-align: baseline;
|
|
|
|
/* @embed */
|
|
background-image: url(img/page.svg);
|
|
|
|
margin-right: 0.7em;
|
|
}
|
|
&.has-label:before {
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
&.mw-mmv-description-page-button,
|
|
&.mw-mmv-description-page-button:active,
|
|
&.mw-mmv-description-page-button:visited {
|
|
border-radius: 4px;
|
|
color: white;
|
|
padding: 7px 16px;
|
|
margin: 7px 10px;
|
|
}
|
|
|
|
&.mw-mmv-description-page-button.mw-mmv-repo-button-commons:before {
|
|
/* @embed */
|
|
background-image: url(img/commons_white.svg);
|
|
width: 1.3em;
|
|
height: 1.3em;
|
|
position: relative;
|
|
top: 0.15em;
|
|
margin: -0.3em 0.4em 0 0;
|
|
}
|
|
}
|