summaryrefslogtreecommitdiff
path: root/www/wiki/extensions/MultimediaViewer/resources/mmv/ui/mmv.ui.tipsyDialog.less
blob: bd21a13bf9040687059825646870748002b3bfda (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
@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;
		}
	}
}