mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-11-29 18:34:25 +00:00
7157729ae8
Aligning to WikimediaUI style guide by replacing colors with standard color palette equivalents, merging close colors (ex: `#E6E6E6` & `#eee` become `#eaecf0` ) and slightly increase contrast on a few to meet WCAG 2.0 level AA criteria. Also: - following other code bases like MobileFrontend or OOjs UI in using `border-radius` property instead of obsolete mixin - removing non-existing browser vendor prefixes in mixins - removing non-used Less variables - bringing CSS/Less code closer to coding standards and - simplifying Less code where applicable Change-Id: Icb936e14ff613471ea1da6df6341ec1b0543cfaf
57 lines
1.2 KiB
Plaintext
57 lines
1.2 KiB
Plaintext
@import '../mmv.globals';
|
|
@import '../mmv.mixins';
|
|
|
|
.mw-mmv-tipsy-dialog {
|
|
@arrow-height: 8px;
|
|
@background-color: #eaecf0;
|
|
@border-color: #a2a9b1;
|
|
@padding: 20px; // must be larger than @arrow-height / sqrt(2), otherwise the arrow overlaps the text
|
|
|
|
padding-bottom: @arrow-height; // the actual arrow height is @arrow-height / sqrt(2)
|
|
|
|
.tipsy-inner {
|
|
max-width: 400px;
|
|
background-color: @background-color;
|
|
border: 1px solid @border-color;
|
|
border-radius: @border-radius;
|
|
padding: @padding;
|
|
color: #54595d;
|
|
|
|
.mw-mmv-tipsy-dialog-title {
|
|
margin-bottom: 1em;
|
|
color: #222;
|
|
font-size: 130%;
|
|
}
|
|
}
|
|
|
|
.tipsy-arrow {
|
|
width: 2 * @arrow-height;
|
|
height: 2 * @arrow-height;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 10px + @arrow-height;
|
|
background: @background-color;
|
|
border: 1px solid @border-color;
|
|
border-width: 0 0 1px 1px;
|
|
.rotate( -45deg );
|
|
}
|
|
|
|
.mw-mmv-tipsy-dialog-disable {
|
|
@distanceFromBorder: 8px;
|
|
@topRightMargin: @distanceFromBorder - @padding;
|
|
width: 15px;
|
|
height: 15px;
|
|
float: right;
|
|
margin: @topRightMargin @topRightMargin @padding @padding;
|
|
cursor: pointer;
|
|
/* @embed */
|
|
background-image: url( img/x_gray.svg );
|
|
background-repeat: no-repeat;
|
|
opacity: 0.75;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|