1.popupviewerContentStyle() {
2    box-shadow: 0.2em 0.2em 3em rgba(255, 255, 255, 0.4);
3    border-radius: 6px;
4}
5
6#popupviewer, #popupviewer:before {
7    position: fixed;
8    top: 0; left: 0; right: 0; bottom: 0;
9    z-index: 11000;
10}
11
12#popupviewer:before {
13    content: '';
14    background-color: rgba(0,0,0,0.8);
15    pointer-events: none;
16}
17
18#popupviewer > .controls > a {
19
20    background: url(images/modifier-images.png);
21    position: absolute;
22    cursor: pointer;
23    width: 24px;
24    display: none;
25    height: 24px;
26
27    top: 0px;
28    right: 0px;
29
30    margin-top: -13px;
31    margin-right: -13px;
32    z-index: 11010;
33
34    &.next {
35        background-position: -24px 0;
36        margin-right: 26px;
37    }
38
39    &.close {
40        background-position: -48px 0;
41    }
42
43    &.previous {
44        margin-right: 50px;
45    }
46
47    &.inactive {
48        opacity: 0.5;
49        cursor: default;
50    }
51
52    &.visible {
53        display: block;
54    }
55}
56
57#popupviewer > .controls > .content.isImage > a {
58    display: block;
59}
60
61#popupviewer > .controls > .content.isImage img {
62    .popupviewerContentStyle();
63}
64
65#popupviewer > .controls > .content {
66    background-color: #fff;
67    border: 2px solid #999;
68    z-index: 11002;
69    padding: 10px;
70    overflow: auto;
71    box-sizing: border-box;
72    .popupviewerContentStyle();
73
74    &.isImage, &:empty {
75        padding: 0px;
76        border: none;
77        background-color: transparent;
78        overflow: visible;
79    }
80
81    &:empty {
82        background: url(images/loading.gif);
83        width: 208px;
84        height: 13px;
85        margin: auto;
86        position: relative;
87    }
88
89    &:empty ~ a.next,
90    &:empty ~ a.previous {
91        display: none;
92    }
93}
94
95#popupviewer > .controls > .additionalContent {
96
97    .popupviewerContentStyle();
98    background-color: #fff;
99    padding: 0px 30px;
100    position:relative;
101    border: 1px solid #333;
102
103    &:empty {
104        display: none;
105    }
106}
107
108#popupviewer > .controls {
109    position:absolute;
110
111    /* by default it is empty thus showing the loader */
112    left:50%;
113    top:50%;
114    margin-left: -104px;
115
116    z-index: 11004;
117}
118