@import '../mmv.variables.less'; @import '../mmv.mixins.less'; @panel-below-fold-background-color: #f8f9fa; @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 #c8ccd1; border-radius: @border-radius; background-color: #fff; } .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: #54595d; padding: 0 0 @padding-right; font-size: 0.85em; .metadata-panel-is-closed { height: @metadatabar-below-fold-pushup-height - @space-above-credit - @fold-separator-border-width; // needs explicit height for text truncation logic line-height: @metadatabar-below-fold-pushup-height - @space-above-credit - @fold-separator-border-width; } &.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 #c8ccd1; 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 { /* @embed */ background-image: url( img/user-avatar.svg ); background-position: center center; background-repeat: no-repeat; background-size: contain; display: inline-block; vertical-align: middle; height: 16px; width: 16px; content: ' '; margin-right: 7px; margin-bottom: 2px; } .mw-mmv-image-desc-div { overflow-y: auto; max-height: 150px; margin-bottom: 15px; &.empty { display: none; } } .mw-mmv-image-desc-div, .mw-mmv-image-links-div { display: inline-block; vertical-align: top; } @littlefont: 0.85em; @mediumfont: 0.95em; .mw-mmv-image-desc { font-size: @mediumfont; color: #54595d; } .mw-mmv-image-links { margin: 0 20px; word-break: break-word; li { list-style: none; font-size: @littlefont; &.empty { display: none; } // Make sure the next list item is not visible when the // metadata panel is closed .metadata-panel-is-closed &.mw-mmv-license-li { height: @metadatabar-below-fold-pushup-height - @space-above-credit; line-height: @metadatabar-below-fold-pushup-height - @space-above-credit; } &::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-filename-li::before { /* @embed */ background-image: url( img/file.svg ); } &.mw-mmv-datetime-li::before { /* @embed */ background-image: url( img/time.svg ); } &.mw-mmv-location-li::before { /* @embed */ background-image: url( img/location.svg ); } &.empty::before { background-image: none !important; /* stylelint-disable-line declaration-no-important */ } } } .mw-mmv-license-contain, .mw-mmv-license { text-align: right; } .mw-mmv-filename-prefix { padding-right: 4px; cursor: text; } .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%; clear: both; } .mw-mmv-label { background-color: #eaecf0; color: @color-base; margin-left: 6px; margin-top: 1px; border-radius: @border-radius; padding: 2px 5px; font-size: 0.9em; &:hover { background-color: #c8ccd1; } } .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-restrictions { display: inline-block; line-height: 14px; } .mw-mmv-restriction-label { cursor: default; display: inline-block; height: 16px; &, &:hover { background-color: #fc6; } } .mw-mmv-restriction-label-inner { display: inline-block; width: 14px; height: 14px; text-indent: -9999px; text-align: left; background-size: contain; &::after { float: right; text-indent: 0; } } .mw-mmv-restriction-2257 { /* @embed */ background-image: url( img/restrict-2257.svg ); } .mw-mmv-restriction-aus-reserve { /* @embed */ background-image: url( img/restrict-aus-reserve.svg ); } .mw-mmv-restriction-communist { /* @embed */ background-image: url( img/restrict-communist.svg ); } .mw-mmv-restriction-costume { /* @embed */ background-image: url( img/restrict-costume.svg ); } .mw-mmv-restriction-currency { /* @embed */ background-image: url( img/restrict-currency.svg ); } .mw-mmv-restriction-design { /* @embed */ background-image: url( img/restrict-design.svg ); } .mw-mmv-restriction-fan-art { /* @embed */ background-image: url( img/restrict-fan-art.svg ); } .mw-mmv-restriction-ihl { /* @embed */ background-image: url( img/restrict-ihl.svg ); } .mw-mmv-restriction-insignia { /* @embed */ background-image: url( img/restrict-insignia.svg ); } .mw-mmv-restriction-ita-mibac { /* @embed */ background-image: url( img/restrict-ita-mibac.svg ); } .mw-mmv-restriction-nazi { /* @embed */ background-image: url( img/restrict-nazi.svg ); } .mw-mmv-restriction-personality { /* @embed */ background-image: url( img/restrict-personality.svg ); } .mw-mmv-restriction-trademarked::after { content: '\002122'; } .mw-mmv-restriction-default { /* @embed */ background-image: url( img/restrict-default.svg ); } .mw-mmv-permission-link { cursor: pointer; .jq-fullscreened & { display: none; } } .mw-mmv-optout-link.pending { cursor: wait; color: #54595d; }