/modules/mod_base/lib/css/zp-dialog.css

  1/* Dialog styesheet.
  2----------------------------------------------------------
  3
  4@package:	Zotonic 2009	
  5@Author: 	Tim Benniks <tim@timbenniks.nl>
  6
  7Copyright 2009 Tim Benniks
  8
  9Licensed under the Apache License, Version 2.0 (the "License");
 10you may not use this file except in compliance with the License.
 11You may obtain a copy of the License at
 12 
 13http://www.apache.org/licenses/LICENSE-2.0
 14 
 15Unless required by applicable law or agreed to in writing, software
 16distributed under the License is distributed on an "AS IS" BASIS,
 17WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 18See the License for the specific language governing permissions and
 19limitations under the License.
 20
 21---------------------------------------------------------- */
 22
 23.dialog {
 24	position: absolute !important;
 25	color: #f9f9f9;
 26	top: 200px;
 27	width: 450px;
 28	height: auto;
 29	z-index: 998;
 30}
 31
 32.dialog-top {
 33	background: transparent url(/lib/images/dialog_top_middle.png) repeat-x;
 34	height: auto;
 35	left: 0;
 36	margin: 0 25px;
 37	padding: 25px 0 0 0;
 38	position: relative;
 39	top: 0;
 40	width: 100%;
 41	cursor: move;
 42}
 43
 44.dialog-top-left {
 45	background: transparent url(/lib/images/dialog_top_left.png) no-repeat;
 46	height: 100%;
 47	left: -25px;
 48	position: absolute;
 49	top: 0;
 50	width: 25px;
 51	height: 25px;
 52}
 53
 54.dialog-top-right {
 55	background: transparent url(/lib/images/dialog_top_right.png) no-repeat;
 56	height: 100%;
 57	right: -25px;
 58	position: absolute;
 59	top: 0;
 60	width: 25px;
 61	height: 25px;
 62}
 63
 64.dialog-content {
 65	background: transparent url(/lib/images/dialog_content_left.png) repeat-y;
 66	height: auto;
 67	padding: 0 25px;
 68	position: relative;
 69	width: 100%;
 70	overflow: hidden;
 71}
 72
 73.dialog-inner-content {
 74	background: transparent url(/lib/images/dialog_content.png) repeat;
 75	float: left;
 76	padding: 10px 0 0 0;
 77	width: 100%;
 78	overflow: hidden;
 79}
 80
 81.dialog-content-right {
 82	background: transparent url(/lib/images/dialog_content_right.png) repeat-y;
 83	height: 100%;
 84	position: absolute;
 85	right: 0;
 86	top: 0;
 87	width: 25px;
 88}
 89
 90.dialog-bottom {
 91	background: transparent url(/lib/images/dialog_bottom_middle.png) repeat-x;
 92	height: auto;
 93	left: 0;
 94	margin: 0 25px;
 95	padding: 41px 0 0 0;
 96	position: relative;
 97	top: 0;
 98	width: 100%;
 99	z-index: 999;
100}
101
102.dialog-bottom-left {
103	background: transparent url(/lib/images/dialog_bottom_left.png) no-repeat;
104	height: 100%;
105	left: -25px;
106	position: absolute;
107	top: 0;
108	width: 25px;
109	height: 41px;
110}
111
112.dialog-bottom-right {
113	background: transparent url(/lib/images/dialog_bottom_right.png) no-repeat;
114	height: 100%;
115	right: -25px;
116	position: absolute;
117	top: 0;
118	width: 25px;
119	height: 41px;
120}
121
122.dialog-close {
123	background: transparent url(/lib/images/close.png) no-repeat top;
124	height: 15px;
125	width: 15px;
126	left: -17px;
127	top: 7px;
128	position: absolute;
129	cursor: pointer;
130}
131
132	.dialog-close:hover,
133	.dialog-close:focus,
134	.dialog-close:active {
135		background-position: bottom;
136	}
137
138h5.dialog-title {
139	display: block;
140	font-size: 11px;
141	position: absolute;
142	text-align: center;
143	top: 6px;
144	width: 100%;
145	text-shadow: 1px 2px 2px #444;
146	font-weight: bold;
147}
148
149.dialog .ui-resizable-se {
150	bottom: -34px;
151	cursor: se-resize;
152	height: 17px;
153	right: 6px;
154	width: 23px;
155}
156
157.dialog .ui-resizable-handle {
158	display: block;
159	font-size: 0.1px;
160	position: absolute;
161	z-index: 99999;
162}
163
164.dialog input, .dialog textarea, .dialog select {
165	background: #333;
166	color: #eee;
167	border-color: #666;
168	padding: 4px;
169	width: 300px;
170	-moz-border-radius: 3px;
171	-webkit-border-radius: 3px;
172	border-width: 1px;
173}
174
175	.dialog select {
176		width: 310px;
177	}
178	
179		.dialog option {
180			background: #333;
181			color: #eee;
182			border: none;
183		}
184
185	.dialog input:focus, .dialog textarea:focus {
186		background: #444;
187	}
188	
189	.dialog label {
190		margin: 2px 12px 0 0;
191		width: 90px;
192	}
193	
194.dialog button, 
195.dialog a.button {
196	-moz-border-radius: 10px;
197	-webkit-border-radius: 10px;
198	background: #333;
199	border-color: #666;
200	color: #eee;
201	text-transform: lowercase;
202}
203
204	.dialog button:hover, 
205	.dialog a.button:hover {
206		-moz-border-radius: 10px;
207		-webkit-border-radius: 10px;
208		color: #fff;
209		background: #444;
210		border-color: #111;
211	}
212	
213.dialog label, .dialog p, .dialog h3, .dialog h4, .dialog h5 {
214	color: #eee;
215}
216
217.dialog input.form-field-error,
218.dialog textarea.form-field-error {
219	background: #603d3d; 
220	color: #fff; 
221	margin-right: 3px;
222	border-color: #be2727;
223}
224
225	.dialog .z_invalid {
226		color: #ff0000;
227		font-size: 18px;
228	}
229	
230/* tabs in dialog
231------------------------------------------------------- */
232
233.dialog .ui-tabs-nav {
234	margin: 0;
235}
236
237.dialog .ui-tabs-nav li {
238	display: block;
239	float: left;
240	background-color: transparent;
241	margin: 0 1px 0 0;
242	border: 0;
243	padding: 0;
244}
245
246	.dialog .ui-tabs-nav li a {
247		color: #fff;
248		padding: 4px 8px;
249		-moz-border-radius-topright: 6px;
250		-moz-border-radius-topleft: 6px;
251		-webkit-border-top-left-radius: 6px;
252		-webkit-border-top-right-radius: 6px;
253		text-decoration: none;
254		background: #555 url(/lib/images/dialog_top_middle.png) repeat-x left -5px;
255		color: #b6b6b6;
256		font-size: 11px;
257	}
258	
259	.dialog li.ui-state-active a {
260		text-shadow: 1px 2px 2px #000;
261		color: #fff;
262	}
263	
264	.dialog .ui-tabs-panel {
265		padding: 9px;
266		-moz-border-radius-bottomleft: 6px;
267		-moz-border-radius-bottomright: 6px;
268		-moz-border-radius-topright: 6px;
269		-webkit-border-bottom-left-radius: 6px;
270		-webkit-border-bottom-right-radius: 6px;
271		-webkit-border-top-right-radius: 6px;
272		background: none;
273		border: solid #555;
274		border-width: 2px 1px 1px;
275		color: #eee;
276		margin: 0 0 16px 0;
277		min-height: 40px;
278	}
279
280	.dialog .ui-tabs-hide {
281		display: none !important; 
282	}
283
284	.dialog .ui-tabs .ui-tabs-selected {
285		font-weight: normal;
286	}
287