mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-09-29 21:28:12 +00:00
8d05dd8a6d
Rearrange the above-the-fold part of the metadata panel so that the link to the file descriprion page and the button for the download/share/embed widgets are easier to find. One gotcha is that favicons are blown up to 32x32px (a small icon in the middle of a big empty space would really look ridiculous) so if a site uses 16x16px favicons it will look pixelated. None of the WMF sites do that though, and if anyone else does, they should just fix it, 16px favicons suck anyway (e.g. not retina friendly). Change-Id: Icce12174b6ed89731fe75f8069c0b4a2b7161a34 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/732
103 lines
2.4 KiB
Plaintext
103 lines
2.4 KiB
Plaintext
@import "../mmv.globals";
|
|
@import "../mmv.mixins";
|
|
|
|
@button-vertical-padding: 15px;
|
|
@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);
|
|
@border-text-color: #cccccc;
|
|
|
|
float: right;
|
|
height: @button-height;
|
|
margin-top: @metadatabar-above-fold-height - ( @button-height + 2 * @button-vertical-padding );
|
|
.jq-fullscreened & {
|
|
margin-top: @metadatabar-above-fold-fullscreen-height - ( @button-height + 2 * @button-vertical-padding );
|
|
}
|
|
border-left: 1px solid @border-text-color;
|
|
padding: @button-vertical-padding 20px;
|
|
|
|
.unselectable;
|
|
font-size: 1.25em;
|
|
color: @button-text-color;
|
|
cursor: pointer;
|
|
.opacity(0.8);
|
|
transition: opacity 0.25s;
|
|
|
|
// when the button is a link, we need more selector specificity
|
|
a&, a&:visited, a&:hover {
|
|
color: @button-text-color;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.empty {
|
|
display: none;
|
|
}
|
|
|
|
&.open,
|
|
&:hover {
|
|
.opacity(1);
|
|
}
|
|
|
|
&: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;
|
|
}
|
|
&.has-label:before {
|
|
margin-right: 0.25em;
|
|
}
|
|
&-reuse:before {
|
|
/* @embed */
|
|
background-image: url(img/use-ltr.svg);
|
|
}
|
|
&-feedback:before {
|
|
/* @embed */
|
|
background-image: url(img/horn_grey.svg);
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.mw-mmv-title-contain {
|
|
margin-left: @repo-button-width;
|
|
padding-left: 14px;
|
|
/* @embed */
|
|
background-image: url(img/angle-separator.svg);
|
|
background-repeat: no-repeat;
|
|
}
|
|
.mw-mmv-repo-button {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: -@repo-button-width;
|
|
width: @repo-button-width;
|
|
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
background-size: auto 50%;
|
|
|
|
&-commons {
|
|
/* @embed */
|
|
background-image: url(img/commons_gray.svg);
|
|
background-position: 50% 40%; // visually it looks much better when the middle of the circle is centered
|
|
}
|
|
&-dynamic {
|
|
// for repos other than Wikimedia Commons we manipulate :before dynamically from JS; this is a fallback
|
|
.grayscale();
|
|
background-image: url(img/repo.svg);
|
|
}
|
|
}
|