source: trunk/web-app/css/login_panel.css @ 23

Last change on this file since 23 was 23, checked in by duh, 9 years ago
  • created new templates
  • moved default grails images and prototype library into obsolete (for deletion later)
  • added dynamic top navigation
  • added (currently non functional) login panel
File size: 4.7 KB
Line 
1/*
2Name: Sliding Login Panel with jQuery 1.3.2
3Author: Jeremie Tisseau
4Author URI: http://web-kreation.com/
5Script URI: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
6Date: March 26, 2009
7Version: 1.0
8
9        The CSS, XHTML and design is released under Creative Common License 3.0:
10        http://creativecommons.org/licenses/by-sa/3.0/
11
12*/ 
13
14/***** clearfix *****/
15.clear {clear: both;height: 0;line-height: 0;}
16.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
17.clearfix {display: inline-block;}
18/* Hides from IE-mac \*/
19* html .clearfix {height: 1%;}
20.clearfix {display: block;}
21/* End hide from IE-mac */
22.clearfix {height: 1%;}
23.clearfix {display: block;}
24
25.red { color: red; }
26
27/* Panel Tab/button */
28.tab {
29        background: url(../images/skin/login_panel/tab_b.png) repeat-x 0 0;
30        height: 42px;
31        position: relative;
32    top: 0;
33    z-index: 999;
34}
35
36.tab ul.login {
37        display: block;
38        position: relative;
39        float: right;
40        clear: right;
41        height: 42px;
42        width: auto;
43        font-weight: bold;
44        line-height: 42px;
45        margin: 0;
46        right: 150px;
47        color: white;
48        font-size: 80%;
49        text-align: center;
50}
51
52.tab ul.login li.left {
53        background: url(../images/skin/login_panel/tab_l.png) no-repeat left 0;
54        height: 42px;
55        width: 30px;
56        padding: 0;
57        margin: 0;
58        display: block;
59        float: left;
60}
61
62.tab ul.login li.right {
63        background: url(../images/skin/login_panel/tab_r.png) no-repeat left 0;
64        height: 42px;
65        width: 30px;
66        padding: 0;
67        margin: 0;
68        display: block;
69        float: left;
70}
71
72.tab ul.login li {
73        text-align: left;
74        padding: 0 6px;
75        display: block;
76        float: left;
77        height: 42px;
78        background: url(../images/skin/login_panel/tab_m.png) repeat-x 0 0;
79}
80
81.tab ul.login li a {
82        color: #15ADFF;
83}
84
85.tab ul.login li a:hover {
86        color: white;
87}
88
89.tab .sep {color:#414141}
90
91.tab a.open, .tab a.close {
92        height: 20px;
93        line-height: 20px !important;
94        padding-left: 30px !important;
95        cursor: pointer;
96        display: block;
97        width: 100px;
98        position: relative;
99        top: 11px;
100}
101
102.tab a.open {background: url(../images/skin/login_panel/bt_open.png) no-repeat left 0;}
103.tab a.close {background: url(../images/skin/login_panel/bt_close.png) no-repeat left 0;}
104.tab a:hover.open {background: url(../images/skin/login_panel/bt_open.png) no-repeat left -19px;}
105.tab a:hover.close {background: url(../images/skin/login_panel/bt_close.png) no-repeat left -19px;}
106
107/* sliding panel */
108#toppanel {
109    position: absolute;   /*Panel will overlap  content */
110    /*position: relative;*/   /*Panel will "push" the content down */
111    top: 0;
112    width: 100%;
113    z-index: 999;
114    text-align: center;
115    margin-left: auto;
116    margin-right: auto;
117}
118
119#panel {
120        width: 100%;
121        height: 270px;
122        color: #999999;
123        background: #272727;
124        overflow: hidden;
125        position: relative;
126        z-index: 3;
127        display: none;
128}
129
130#panel h1 {
131        font-size: 1.6em;
132        padding: 5px 0 10px;
133        margin: 0;
134        color: white;
135}
136
137#panel h2{
138        font-size: 1.2em;
139        padding: 10px 0 5px;
140        margin: 0;
141        color: white;
142}
143
144#panel p {
145        margin: 5px 0;
146        padding: 0;
147}
148
149#panel a {
150        text-decoration: none;
151        color: #15ADFF;
152}
153
154#panel a:hover {
155        color: white;
156}
157
158#panel a-lost-pwd {
159        display: block;
160        float: left;
161}
162
163#panel .content {
164        width: 960px;
165        margin: 0 auto;
166        padding-top: 15px;
167        text-align: left;
168        font-size: 0.85em;
169}
170
171#panel .content .left {
172        width: 280px;
173        float: left;
174        padding: 0 15px;
175        border-left: 1px solid #333;
176}
177
178#panel .content .right {
179        border-right: 1px solid #333;
180}
181
182#panel .content form {
183        margin: 0 0 10px 0;
184}
185
186#panel .content label {
187        float: left;
188        padding-top: 8px;
189        clear: both;
190        width: 280px;
191        display: block;
192}
193
194#panel .content input.field {
195        border: 1px #1A1A1A solid;
196        background: #414141;
197        margin-right: 5px;
198        margin-top: 4px;
199        width: 200px;
200        color: white;
201        height: 16px;
202}
203
204#panel .content input:focus.field {
205        background: #545454;
206}
207
208/* BUTTONS */
209/* Login and Register buttons */
210#panel .content input.bt_login,
211#panel .content input.bt_register {
212        display: block;
213        float: left;
214        clear: left;
215        height: 24px;
216        text-align: center;
217        cursor: pointer;
218        border: none;
219        font-weight: bold;
220        margin: 10px 0;
221}
222
223#panel .content input.bt_login {
224        width: 74px;
225        background: transparent url(../images/skin/login_panel/bt_login.png) no-repeat 0 0;
226}
227
228#panel .content input.bt_register {
229        width: 94px;
230        color: white;
231        background: transparent url(../images/skin/login_panel/bt_register.png) no-repeat 0 0;
232}
233
234#panel .lost-pwd {
235        display: block;
236        float:left;
237        clear: right;
238        padding: 15px 5px 0;
239        font-size: 0.95em;
240        text-decoration: underline;
241}
242
Note: See TracBrowser for help on using the repository browser.