1 | /**
|
---|
2 | * Colorbox Core Style:
|
---|
3 | * The following CSS is consistent between example themes and should not be altered.
|
---|
4 | */
|
---|
5 | #colorbox,
|
---|
6 | #cboxOverlay,
|
---|
7 | #cboxWrapper {
|
---|
8 | position: absolute;
|
---|
9 | top: 0;
|
---|
10 | left: 0;
|
---|
11 | z-index: 9999;
|
---|
12 | overflow: hidden;
|
---|
13 | }
|
---|
14 | #cboxOverlay {
|
---|
15 | position: fixed;
|
---|
16 | width: 100%;
|
---|
17 | height: 100%;
|
---|
18 | }
|
---|
19 | #cboxMiddleLeft,
|
---|
20 | #cboxBottomLeft {
|
---|
21 | clear: left;
|
---|
22 | }
|
---|
23 | #cboxContent {
|
---|
24 | position: relative;
|
---|
25 | }
|
---|
26 | #cboxLoadedContent {
|
---|
27 | overflow: auto;
|
---|
28 | -webkit-overflow-scrolling: touch;
|
---|
29 | }
|
---|
30 | #cboxTitle {
|
---|
31 | margin: 0;
|
---|
32 | }
|
---|
33 | #cboxLoadingOverlay,
|
---|
34 | #cboxLoadingGraphic {
|
---|
35 | position: absolute;
|
---|
36 | top: 0;
|
---|
37 | left: 0;
|
---|
38 | width: 100%;
|
---|
39 | height: 100%;
|
---|
40 | }
|
---|
41 | /**
|
---|
42 | * These elements are buttons, and may need to have additional
|
---|
43 | * styles reset to avoid unwanted base styles.
|
---|
44 | */
|
---|
45 | #cboxPrevious,
|
---|
46 | #cboxNext,
|
---|
47 | #cboxClose,
|
---|
48 | #cboxSlideshow {
|
---|
49 | border: 0;
|
---|
50 | padding: 0;
|
---|
51 | margin: 0;
|
---|
52 | overflow: visible;
|
---|
53 | width: auto;
|
---|
54 | background: none;
|
---|
55 | cursor: pointer;
|
---|
56 | }
|
---|
57 | /**
|
---|
58 | * Avoid outlines on :active (mouseclick),
|
---|
59 | * but preserve outlines on :focus (tabbed navigating)
|
---|
60 | */
|
---|
61 | #cboxPrevious:active,
|
---|
62 | #cboxNext:active,
|
---|
63 | #cboxClose:active,
|
---|
64 | #cboxSlideshow:active {
|
---|
65 | outline: 0;
|
---|
66 | }
|
---|
67 | .cboxPhoto {
|
---|
68 | float: left;
|
---|
69 | margin: auto;
|
---|
70 | border: 0;
|
---|
71 | display: block;
|
---|
72 | max-width: none;
|
---|
73 | }
|
---|
74 | .cboxIframe {
|
---|
75 | width: 100%;
|
---|
76 | height: 100%;
|
---|
77 | display: block;
|
---|
78 | border: 0;
|
---|
79 | }
|
---|
80 | /* Reset box sizing to content-box if theme is using border-box. */
|
---|
81 | #colorbox,
|
---|
82 | #cboxContent,
|
---|
83 | #cboxLoadedContent {
|
---|
84 | -moz-box-sizing: content-box;
|
---|
85 | -webkit-box-sizing: content-box;
|
---|
86 | box-sizing: content-box;
|
---|
87 | }
|
---|
88 |
|
---|
89 | /**
|
---|
90 | * Colorbox module default style:
|
---|
91 | * The styles are ordered & tabbed in a way that represents
|
---|
92 | * the nesting of the generated HTML.
|
---|
93 | */
|
---|
94 | #cboxOverlay {
|
---|
95 | background: #000;
|
---|
96 | }
|
---|
97 | #colorbox {
|
---|
98 | outline: 0;
|
---|
99 | }
|
---|
100 | #cboxWrapper {
|
---|
101 | background: #fff;
|
---|
102 | -moz-border-radius: 5px;
|
---|
103 | -webkit-border-radius: 5px;
|
---|
104 | border-radius: 5px;
|
---|
105 | }
|
---|
106 | #cboxTopLeft {
|
---|
107 | width: 15px;
|
---|
108 | height: 15px;
|
---|
109 | }
|
---|
110 | #cboxTopCenter {
|
---|
111 | height: 15px;
|
---|
112 | }
|
---|
113 | #cboxTopRight {
|
---|
114 | width: 15px;
|
---|
115 | height: 15px;
|
---|
116 | }
|
---|
117 | #cboxBottomLeft {
|
---|
118 | width: 15px;
|
---|
119 | height: 10px;
|
---|
120 | }
|
---|
121 | #cboxBottomCenter {
|
---|
122 | height: 10px;
|
---|
123 | }
|
---|
124 | #cboxBottomRight {
|
---|
125 | width: 15px;
|
---|
126 | height: 10px;
|
---|
127 | }
|
---|
128 | #cboxMiddleLeft {
|
---|
129 | width: 15px;
|
---|
130 | }
|
---|
131 | #cboxMiddleRight {
|
---|
132 | width: 15px;
|
---|
133 | }
|
---|
134 | #cboxContent {
|
---|
135 | background: #fff;
|
---|
136 | overflow: hidden;
|
---|
137 | }
|
---|
138 | #cboxError {
|
---|
139 | padding: 50px;
|
---|
140 | border: 1px solid #ccc;
|
---|
141 | }
|
---|
142 | #cboxLoadedContent {
|
---|
143 | margin-bottom: 28px;
|
---|
144 | }
|
---|
145 | #cboxTitle {
|
---|
146 | position: absolute;
|
---|
147 | background: rgba(255, 255, 255, 0.7);
|
---|
148 | bottom: 28px;
|
---|
149 | left: 0;
|
---|
150 | color: #535353;
|
---|
151 | width: 100%;
|
---|
152 | padding: 4px 6px;
|
---|
153 | -moz-box-sizing: border-box;
|
---|
154 | -webkit-box-sizing: border-box;
|
---|
155 | box-sizing: border-box;
|
---|
156 | }
|
---|
157 | #cboxCurrent {
|
---|
158 | position: absolute;
|
---|
159 | bottom: 4px;
|
---|
160 | left: 60px;
|
---|
161 | color: #949494;
|
---|
162 | }
|
---|
163 | .cboxSlideshow_on #cboxSlideshow {
|
---|
164 | position: absolute;
|
---|
165 | bottom: 0;
|
---|
166 | right: 30px;
|
---|
167 | background: url(images/controls.png) no-repeat -75px -50px;
|
---|
168 | width: 25px;
|
---|
169 | height: 25px;
|
---|
170 | text-indent: -9999px;
|
---|
171 | }
|
---|
172 | .cboxSlideshow_on #cboxSlideshow:hover {
|
---|
173 | background-position: -101px -50px;
|
---|
174 | }
|
---|
175 | .cboxSlideshow_off #cboxSlideshow {
|
---|
176 | position: absolute;
|
---|
177 | bottom: 0;
|
---|
178 | right: 30px;
|
---|
179 | background: url(images/controls.png) no-repeat -25px -50px;
|
---|
180 | width: 25px;
|
---|
181 | height: 25px;
|
---|
182 | text-indent: -9999px;
|
---|
183 | }
|
---|
184 | .cboxSlideshow_off #cboxSlideshow:hover {
|
---|
185 | background-position: -49px -50px;
|
---|
186 | }
|
---|
187 | #cboxPrevious {
|
---|
188 | position: absolute;
|
---|
189 | bottom: 0;
|
---|
190 | left: 0;
|
---|
191 | background: url(images/controls.png) no-repeat -75px 0;
|
---|
192 | width: 25px;
|
---|
193 | height: 25px;
|
---|
194 | text-indent: -9999px;
|
---|
195 | }
|
---|
196 | #cboxPrevious:hover {
|
---|
197 | background-position: -75px -25px;
|
---|
198 | }
|
---|
199 | #cboxNext {
|
---|
200 | position: absolute;
|
---|
201 | bottom: 0;
|
---|
202 | left: 27px;
|
---|
203 | background: url(images/controls.png) no-repeat -50px 0;
|
---|
204 | width: 25px;
|
---|
205 | height: 25px;
|
---|
206 | text-indent: -9999px;
|
---|
207 | }
|
---|
208 | #cboxNext:hover {
|
---|
209 | background-position: -50px -25px;
|
---|
210 | }
|
---|
211 | #cboxLoadingOverlay {
|
---|
212 | background: #fff;
|
---|
213 | }
|
---|
214 | #cboxLoadingGraphic {
|
---|
215 | background: url(images/loading_animation.gif) no-repeat center center;
|
---|
216 | }
|
---|
217 | #cboxClose {
|
---|
218 | position: absolute;
|
---|
219 | bottom: 0;
|
---|
220 | right: 0;
|
---|
221 | background: url(images/controls.png) no-repeat -25px 0;
|
---|
222 | width: 25px;
|
---|
223 | height: 25px;
|
---|
224 | text-indent: -9999px;
|
---|
225 | }
|
---|
226 | #cboxClose:hover {
|
---|
227 | background-position: -25px -25px;
|
---|
228 | }
|
---|