mediawiki-extensions-Multim.../resources/mmv/ui/mmv.ui.metadataPanel.less
Gergő Tisza 07f7b837fa Close panel on canvas click + fullscreen mouseleave
Also remove the unused mmv-image-click event and fix a bug
where links got right-aligned when the panel was opened in
fullscreen mode.

Change-Id: If538ac420da4aae3908ac96978491f89c5b53493
Bug: T76029
2014-12-08 14:52:52 +01:00

294 lines
5.7 KiB
Plaintext

@import "../mmv.globals";
@import "../mmv.mixins";
@info-box-color: #FFFFFF;
@info-box-border-color: #DDDDDD;
@info-box-border-shadow-color: #C9C9C9;
@secondary-text-color: rgb(136, 136, 136);
@panel-below-fold-background-color: #f5f5f5;
@fold-separator-border-width: 1px;
@vertical-padding: 10px;
@horizontal-padding: 20px;
@space-above-credit: 2px;
.mw-mmv-info-box {
display: inline-block;
overflow: hidden;
border: 1px solid @info-box-border-color;
border-bottom: 2px solid @info-box-border-shadow-color;
.box-round(3px);
background-color: @info-box-color;
}
.mw-mmv-title-contain {
position: relative;
}
.mw-mmv-title-para {
@height: @metadatabar-above-fold-inner-height - 2 * @vertical-padding; // needs explicit height for text truncation logic
margin: 0 0 @vertical-padding; // use margin instead of padding for bottom so text is not visible
padding: @vertical-padding @horizontal-padding 0 @horizontal-padding;
height: @height;
line-height: @height;
&.mw-mmv-ttf-normal {
font-size: 20px;
}
&.mw-mmv-title-small {
font-size: 18px;
}
&.mw-mmv-title-smaller {
@vertical-padding: 6px;
@height: @metadatabar-above-fold-inner-height - 2 * @vertical-padding;
height: @height;
margin: 0 0 @horizontal-padding;
padding: @vertical-padding @horizontal-padding 0 @horizontal-padding ;
line-height: floor(@height / 2); // two lines
font-size: 16px;
}
// this should be after the size-specific styles so it can override any height set there
&.mw-mmv-ttf-untruncated {
height: auto;
}
.mw-mmv-ttf-ellipsis {
right: @horizontal-padding;
bottom: 3px;
background-color: @panel-above-fold-background-color; // clip text
&:before {
.fade-out-horizontal(@panel-above-fold-background-color);
}
}
}
.mw-mmv-credit {
@padding-right: 5px;
margin: 0;
color: #555;
padding: 0 0 @padding-right;
font-size: 0.85em;
height: @metadatabar-below-fold-pushup-height - @space-above-credit - @fold-separator-border-width; // needs explicit height for text truncation logic
&.mw-mmv-ttf-untruncated {
height: auto;
}
&.empty {
height: 0.85em;
}
.mw-mmv-ttf-ellipsis {
right: @padding-right;
bottom: 13px;
background-color: @panel-below-fold-background-color; // clip text
&:before {
.fade-out-horizontal(@panel-below-fold-background-color);
}
}
}
.mw-mmv-source-author {
line-height: 1.8em;
}
.mw-mmv-title {
// this element is the click target for text untruncation; with the default display:inline it would be an
// inline box which can have "gaps" between the lines, making clicks seem to have no effect
display: inline-block;
}
.mw-mmv-image-metadata {
width: 100%;
position: relative;
margin-top: -@metadatabar-below-fold-pushup-height;
border-top: @fold-separator-border-width solid #ddd;
background-color: @panel-below-fold-background-color;
padding-top: @space-above-credit;
.jq-fullscreened & {
// Make sure content fits into the screen. This assumes no paddings.
height: @metadatabar-below-fold-pushup-height - @fold-separator-border-width - @space-above-credit;
overflow: hidden;
}
.jq-fullscreened .mw-mmv-untruncated & {
height: auto;
}
}
.mw-mmv-author:before {
display: inline-block;
vertical-align: middle;
height: 16px;
width: 16px;
content: ' ';
margin-right: 7px;
margin-bottom: 2px;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
/* @embed */
background-image: url(img/user-ltr.svg);
}
.mw-mmv-image-desc-div {
overflow-y: auto;
&.empty {
display: none;
}
}
.mw-mmv-image-desc-div,
.mw-mmv-image-links-div {
display: inline-block;
vertical-align: top;
}
.mw-mmv-image-desc-div {
max-height: 150px;
margin-bottom: 15px;
}
@littlefont: 0.85em;
@mediumfont: 0.95em;
.mw-mmv-image-desc {
font-size: @mediumfont;
color: #555555;
}
.mw-mmv-image-links {
margin: 0 20px;
li {
list-style: none;
font-size: @littlefont;
color: #3f4040;
&.empty {
display: none;
}
&:before {
display: inline-block;
vertical-align: middle;
height: 16px;
width: 16px;
content: ' ';
margin-right: 7px;
margin-bottom: 2px;
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
}
&.mw-mmv-license-li:before {
/* @embed */
background-image: url(img/license.svg);
}
&.mw-mmv-license-li.cc-license:before {
/* @embed */
background-image: url(img/cc.svg);
}
&.mw-mmv-license-li.pd-license:before {
/* @embed */
background-image: url(img/pd.svg);
}
&.mw-mmv-datetime-li:before {
/* @embed */
background-image: url(img/time.svg);
}
&.mw-mmv-username-li:before {
/* @embed */
background-image: url(img/uploader-ltr.svg);
width: 18px;
margin-right: 5px;
}
&.mw-mmv-location-li:before {
/* @embed */
background-image: url(img/location.svg);
}
&.empty:before {
background-image: none !important;
}
}
}
.mw-mmv-license-contain,
.mw-mmv-license {
text-align: right;
}
.mw-mmv-title-para,
.mw-mmv-credit,
.mw-mmv-image-desc {
padding-left: @horizontal-padding;
}
.mw-mmv-about-links {
font-size: @littlefont;
padding: @horizontal-padding;
width: 50%;
}
.mw-mmv-label {
color: #333333;
margin-left: 6px;
.box-round(3px);
padding: 2px 5px;
background-color: #dddddd;
font-size: 0.9em;
&:hover {
background-color: #c9c9c9;
}
}
.mw-mmv-image-metadata-column {
float: left;
}
.mw-mmv-image-metadata-desc-column {
width: 66.5%;
}
.mw-mmv-image-metadata-links-column {
max-width: 33.5%;
width: 25%;
text-align: right;
float: right;
transition: width 0.2s ease-out;
.mw-mmv-untruncated & {
width: 33.5%;
text-align: left;
}
}
.mw-mmv-permission-link {
cursor: pointer;
.jq-fullscreened & {
display: none;
}
}
.mw-mmv-optout-link.pending {
cursor: wait;
color: #555;
}
.mw-mmv-about-links {
clear: both;
}