1@import 'mmv.variables.less';
2@import 'mmv.mixins.less';
3
4.mw-mmv-wrapper {
5	top: 0;
6	left: 0;
7	right: 0;
8	z-index: 1001;
9	position: absolute;
10	bottom: auto;
11
12	.skin-monobook & {
13		font-size: medium;
14	}
15}
16
17.mw-mmv-main {
18	width: 100%;
19	height: auto;
20	position: relative;
21
22	.jq-fullscreened {
23		background-color: #000;
24	}
25}
26
27.mw-mmv-image-wrapper {
28	position: fixed;
29	top: 0;
30	bottom: @metadatabar-above-fold-height;
31	left: 0;
32	right: 0;
33	overflow-y: hidden;
34}
35
36.mw-mmv-image-inner-wrapper {
37	display: table;
38	width: 100%;
39	height: 100%;
40}
41
42.mw-mmv-pre-image {
43	position: absolute;
44	top: 0;
45	height: 32px;
46	width: 100%;
47	z-index: 1;
48}
49
50.mw-mmv-post-image {
51	position: absolute;
52	width: 100%;
53	bottom: auto;
54	height: auto;
55	color: @color-base;
56	background-color: @panel-above-fold-background-color;
57	min-height: ( @metadatabar-above-fold-inner-height + 1 );
58	z-index: 1005;
59}
60
61// above-the-fold part of the metadata panel
62.mw-mmv-above-fold {
63	width: 100%;
64	height: @metadatabar-above-fold-inner-height;
65	// min-height is used when the height is changed to auto to display long texts, to make sure the layout
66	// is not messed up wheen the text is short and does not fill the available place. It is also used by
67	// JavaScript to get the "default" height.
68	min-height: @metadatabar-above-fold-inner-height;
69	position: relative;
70	// make sure there is no content in the part which is overlapped by the revealed part of the below-fold content
71	// also used in JavaScript for the height calculations
72	padding-bottom: @metadatabar-below-fold-pushup-height;
73
74	.mw-mmv-untruncated & {
75		height: auto;
76	}
77}
78
79// Fullscreen styles
80
81.cursor-hidden {
82	cursor: none;
83}
84
85.mw-mmv-main.jq-fullscreened {
86	background-color: #000;
87}
88
89.jq-fullscreened {
90	// make the image occupy the whole screen
91	// make sure the panel fits in the screen and does not cause scrollbars to appear
92	.mw-mmv-image-wrapper,
93	.mw-mmv-post-image {
94		bottom: 0;
95	}
96
97	.mw-mmv-post-image {
98		position: fixed;
99		min-height: 0;
100		opacity: 0;
101		transition: opacity 0.25s;
102
103		&:hover {
104			opacity: 1;
105		}
106	}
107}
108