source: EWD/ewdapps/so/pages/ewdTemplate.ewd@ 1286

Last change on this file since 1286 was 1286, checked in by Sam Habiel, 12 years ago

Now menu system sort of works
File size: 12.3 KB
Line 
1<ewd:comment>
2Sign On Template File.
3Contains CSS and JS
4V 0.1
5Author: Sam Habiel
6License: Same as EWD License
7
8CSS inspired by:
9http://www.red-team-design.com/slick-login-form-with-html5-css3?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+redteamdesign+%28Red+Team+Design%29&utm_content=FeedBurner
10</ewd:comment>
11
12<ewd:Template>
13 <ewd:config defaultTimeout="99999999999" homePage="index.ewd">
14 <ewd:execute method="r^ewdu" type="procedure" param1="#ewd_sessid">
15 <ewd:head>
16 <style type="text/css">
17 html, body
18 {
19 height: 100%;
20 }
21
22 body
23 {
24 font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
25 margin: 0;
26 background-color: #d9dee2;
27 background-repeat: no-repeat;
28 background-image: -webkit-gradient(linear, left top, left bottom, from(#ebeef2), to(#d9dee2));
29 background-image: -webkit-linear-gradient(top, #ebeef2, #d9dee2);
30 background-image: -moz-linear-gradient(top, #ebeef2, #d9dee2);
31 background-image: -ms-linear-gradient(top, #ebeef2, #d9dee2);
32 background-image: -o-linear-gradient(top, #ebeef2, #d9dee2);
33 background-image: linear-gradient(top, #ebeef2, #d9dee2);
34 }
35
36 /*--------------------*/
37
38 #login, #content, #menu
39 {
40 text-align: center;
41 background-color: #fff;
42 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
43 background-image: -webkit-linear-gradient(top, #fff, #eee);
44 background-image: -moz-linear-gradient(top, #fff, #eee);
45 background-image: -ms-linear-gradient(top, #fff, #eee);
46 background-image: -o-linear-gradient(top, #fff, #eee);
47 background-image: linear-gradient(top, #fff, #eee);
48 /*height: 240px;*/
49 width: 600px;
50 margin: 0px 0 0 -300px;
51 padding: 30px;
52 position: absolute;
53 top: 5%;
54 left: 49%;
55 z-index: 0;
56 -moz-border-radius: 3px;
57 -webkit-border-radius: 3px;
58 border-radius: 3px;
59 -webkit-box-shadow:
60 0 0 2px rgba(0, 0, 0, 0.2),
61 0 1px 1px rgba(0, 0, 0, .2),
62 0 3px 0 #fff,
63 0 4px 0 rgba(0, 0, 0, .2),
64 0 6px 0 #fff,
65 0 7px 0 rgba(0, 0, 0, .2);
66 -moz-box-shadow:
67 0 0 2px rgba(0, 0, 0, 0.2),
68 1px 1px 0 rgba(0, 0, 0, .1),
69 3px 3px 0 rgba(255, 255, 255, 1),
70 4px 4px 0 rgba(0, 0, 0, .1),
71 6px 6px 0 rgba(255, 255, 255, 1),
72 7px 7px 0 rgba(0, 0, 0, .1);
73 box-shadow:
74 0 0 2px rgba(0, 0, 0, 0.2),
75 0 1px 1px rgba(0, 0, 0, .2),
76 0 3px 0 #fff,
77 0 4px 0 rgba(0, 0, 0, .2),
78 0 6px 0 #fff,
79 0 7px 0 rgba(0, 0, 0, .2);
80 }
81
82 #login:before, #content:before
83 {
84 content: '';
85 position: absolute;
86 z-index: -1;
87 border: 1px dashed #ccc;
88 top: 5px;
89 bottom: 5px;
90 left: 5px;
91 right: 5px;
92 -moz-box-shadow: 0 0 0 1px #fff;
93 -webkit-box-shadow: 0 0 0 1px #fff;
94 box-shadow: 0 0 0 1px #fff;
95 }
96
97 /*--------------------*/
98
99 h1
100 {
101 text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
102 text-transform: uppercase;
103 text-align: center;
104 color: #666;
105 margin: 0 0 30px 0;
106 letter-spacing: 4px;
107 font: normal 26px/1 Verdana, Helvetica;
108 position: relative;
109 }
110
111 h1:after, h1:before
112 {
113 background-color: #777;
114 content: "";
115 height: 1px;
116 position: absolute;
117 top: 15px;
118 width: 20px;
119 }
120
121 h1:after
122 {
123 background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
124 background-image: -webkit-linear-gradient(left, #777, #fff);
125 background-image: -moz-linear-gradient(left, #777, #fff);
126 background-image: -ms-linear-gradient(left, #777, #fff);
127 background-image: -o-linear-gradient(left, #777, #fff);
128 background-image: linear-gradient(left, #777, #fff);
129 right: 0;
130 }
131
132 h1:before
133 {
134 background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
135 background-image: -webkit-linear-gradient(right, #777, #fff);
136 background-image: -moz-linear-gradient(right, #777, #fff);
137 background-image: -ms-linear-gradient(right, #777, #fff);
138 background-image: -o-linear-gradient(right, #777, #fff);
139 background-image: linear-gradient(right, #777, #fff);
140 left: 0;
141 }
142
143 /*--------------------*/
144
145 fieldset
146 {
147 border: 0;
148 padding: 0;
149 margin: 0;
150 }
151
152 /*--------------------*/
153
154 #inputs input[type="password"]
155 {
156 background: #f1f1f1 ;
157 padding: 15px 15px 15px 30px;
158 margin: 0 0 10px 0;
159 width: 353px; /* 353 + 2 + 45 = 400 */
160 border: 1px solid #ccc;
161 -moz-border-radius: 5px;
162 -webkit-border-radius: 5px;
163 border-radius: 5px;
164 -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
165 -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
166 box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
167 }
168
169 #inputs input[type="checkbox"]
170 {
171 background: #f1f1f1 ;
172 padding: 15px 15px 15px 30px;
173 margin: 0 0 10px 0;
174 border: 1px solid #ccc;
175 -moz-border-radius: 5px;
176 -webkit-border-radius: 5px;
177 border-radius: 5px;
178 -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
179 -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
180 box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
181 }
182
183 #username
184 {
185 background-position: 5px -2px !important;
186 }
187
188 #password
189 {
190 background-position: 5px -52px !important;
191 }
192
193 #inputs input:focus
194 {
195 background-color: #fff;
196 border-color: #e8c291;
197 outline: none;
198 -moz-box-shadow: 0 0 0 1px #e8c291 inset;
199 -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
200 box-shadow: 0 0 0 1px #e8c291 inset;
201 }
202
203 /*--------------------*/
204 #actions
205 {
206 margin: 25px 0 0 0;
207 }
208
209 input[type="button"],input[type="submit"]
210 {
211 background-color: #ffb94b;
212 background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b));
213 background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b);
214 background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b);
215 background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b);
216 background-image: -o-linear-gradient(top, #fddb6f, #ffb94b);
217 background-image: linear-gradient(top, #fddb6f, #ffb94b);
218
219 -moz-border-radius: 3px;
220 -webkit-border-radius: 3px;
221 border-radius: 3px;
222
223 text-shadow: 0 1px 0 rgba(255,255,255,0.5);
224
225 -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
226 -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
227 box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
228
229 border-width: 1px;
230 border-style: solid;
231 border-color: #d69e31 #e3a037 #d5982d #e3a037;
232
233 float: left;
234 height: 35px;
235 padding: 0;
236 width: 120px;
237 cursor: pointer;
238 font: bold 15px Arial, Helvetica;
239 color: #8f5a0a;
240 }
241
242 input[type="button"]:hover,input[type="button"]:focus,input[type="submit"]:hover,input[type="submit"]:focus
243 {
244 background-color: #fddb6f;
245 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb94b), to(#fddb6f));
246 background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f);
247 background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f);
248 background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f);
249 background-image: -o-linear-gradient(top, #ffb94b, #fddb6f);
250 background-image: linear-gradient(top, #ffb94b, #fddb6f);
251 }
252
253 input[type="button"]:active,input[type="submit"]:active
254 {
255 outline: none;
256
257 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
258 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
259 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
260 }
261
262 input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner
263 {
264 border: none;
265 }
266
267 #actions a
268 {
269 color: #3151A2;
270 float: right;
271 line-height: 35px;
272 margin-left: 10px;
273 }
274
275 /*--------------------*/
276
277 #back
278 {
279 display: block;
280 text-align: center;
281 position: relative;
282 top: 60px;
283 color: #999;
284 }
285
286 #intro
287 {
288 height: 200px;
289 overflow: auto;
290 margin-bottom: 30px;
291 }
292
293 #error
294 {
295 font-weight: bold;
296 color: red;
297 }
298
299 table
300 {
301 width: 90%;
302 margin-left: 5%;
303 margin-right: 5%;
304 border: 0;
305 }
306
307 table td
308 {
309 text-align: right;
310 vertical-align: middle;
311 }
312
313 .small
314 {
315 font-size: x-small
316 }
317
318 .small a
319 {
320 color: white;
321 }
322
323 .small a:hover
324 {
325 color: yellow;
326 }
327
328 .footer
329 {
330 color: white;
331 background-color: black;
332 border-top: 1px solid gray ;
333 padding: 2px ;
334 position: fixed;
335 bottom: 0
336 }
337
338 .left
339 {
340 left: 0;
341 }
342
343 .right
344 {
345 right: 0;
346 }
347 </style>
348 </ewd:head>
349 <ewd:body>
350 <ewd:header>
351 </ewd:header>
352
353 <ewd:footer>
354 <div class="footer left small">
355 <span>EWD Session # <?= #ewd_sessid ?></span>
356 <a href="ewdLogout.ewd">Sign Out</a>
357 </div>
358 <div class="footer right small">
359 <span>DUZ <?= #DUZ ?></span>
360 <span>U <?= #U ?></span>
361 <span>IO <?= #IO ?></span>
362 </div>
363 </ewd:footer>
364</ewd:body>
365</ewd:Template>
Note: See TracBrowser for help on using the repository browser.