tazpanel view styles/default/style.css @ rev 44

Add a loading mechanism for page that take long to be generated
author Christophe Lincoln <pankso@slitaz.org>
date Fri Apr 08 01:17:37 2011 +0200 (2011-04-08)
parents a7b1d69663c3
children 5b7e9a6565c9
line source
1 /*
2 CSS style for TazPanel - (C) 2011 SliTaz GNU/Linux
3 */
4
5 /* To always have a scroll bar */
6 html {
7 min-height: 102%;
8 }
9
10 body {
11 background: #ffffff;
12 color: black;
13 font: 13px sans-serif, vernada, arial;
14 margin: 25px 0 0;
15 }
16
17 h1 { color: #d66018; padding: 10px 0 0 40px;}
18 h2 { color: #444; margin: 10px 0 10px; }
19 h3 { color: #666; font-size: 140%; }
20 h4 { color: #888; font-size: 120%; margin: 10px 0 5px; }
21 img { border: 0pt none; vertical-align: middle; padding: 0px 6px 2px 0;}
22 p { margin: 6px 0; }
23 ul { list-style-type: none; padding: 0; }
24 li { padding: 4px 0; }
25 a { text-decoration: none; color: #666; }
26 a:hover { color: #000; }
27
28 #loading {
29 /* font-weight: bold; */
30 color: #666;
31 position: fixed;
32 top: 92px;
33 right: 80px;
34 width: 200px;
35 }
36
37 /* Header and main title */
38
39 #header {
40 height: 52px;
41 border-bottom: 1px dotted #ddd;
42 }
43
44 /* Desktop gui style bar */
45
46 #toolbar {
47 position: fixed;
48 top: 0;
49 left: 0;
50 height: 24px;
51 width: 100%;
52 padding: 0 0 0 0;
53 background-color: #f1efeb;
54 border-bottom: 1px solid #c1baad;
55 z-index: 200;
56 cursor: default;
57 }
58
59 #menu { margin: 4px 8px; }
60 #menu a { padding: 2px 4px; color: #000;
61 cursor: default; }
62 #menu a:hover { color: #444; }
63 #icons { margin: 2px 8px; float: right; }
64 #icons img { padding: 0; }
65
66 .progress { cursor: progress; }
67
68 /* Blocks */
69
70 #block { float: left; }
71
72 /* Sidebar menus */
73
74 #sidebar {
75 position: fixed;
76 top: 187px;
77 right: 5px;
78 width: 116px;
79 }
80
81 #sidebar a {
82 display: block;
83 padding: 1px 0 1px 12px;
84 margin:0;
85 }
86
87 #sidebar a.active {
88 color: #000;
89 font-weight: bold;
90 /* Vertical tab alike menu
91 background-color: #f8f8f8;
92 border-top: 1px solid #ddd;
93 border-bottom: 1px solid #ddd;
94 border-right: 1px solid #ddd;
95 border-top-right-radius: 4px;
96 border-bottom-right-radius: 4px; */
97 }
98 #sidebar h4 { margin: 0 0 2px 12px; }
99
100 /* Content */
101
102 #content { margin: 20px 40px 20px 40px; }
103 #content-sidebar { margin: 20px 120px 20px 40px; }
104 #wrapper { margin: 10px 0 20px; }
105
106 .search {
107 position: absolute;
108 right: 40px;
109 top: 32px;
110 }
111
112 .search input[type=submit] {
113 padding: 4px;
114 margin-left: -5px;
115 background-color: #f1f1f1;
116 border: 1px solid #ddd;
117 cursor: pointer;
118 color: #000;
119 font-weight: bold;
120 border-top-right-radius: 4px;
121 border-bottom-right-radius: 4px;
122 border-top-left-radius: 0px;
123 border-bottom-left-radius: 0px;
124 }
125
126 .search input[type=text] {
127 border: 1px solid #ddd;
128 padding: 4px;
129 height: 17px;
130 margin: 0;
131 border-top-left-radius: 4px;
132 border-bottom-left-radius: 4px;
133 }
134
135 #actions {
136 height: 20px;
137 margin: 16px 0;
138 }
139
140 .box {
141 margin: 10px 0;
142 padding: 12px;
143 background: #f8f8f8;
144 border: 1px solid #ddd;
145 }
146
147 .debug {
148 position: fixed;
149 top: 20px;
150 left: 5px;
151 padding: 6px 20px;
152 background-color: #f8f8f8;
153 border: 1px solid #ddd;
154 }
155
156 .float-left { float: left; }
157 .float-right { float: right; }
158
159 /* Table */
160
161 table {
162 background-color: #f8f8f8;
163 border: 1px solid #ddd;
164 padding: 10px;
165 width: 100%;
166 margin: 0 0 6px 0;
167 }
168
169 table a { color: #000; }
170 table a:hover { color: #666; }
171 td.pkg { max-width: 160px; }
172 td.desc { max-width: 300px; }
173
174 #thead, .thead, thead {
175 height: 10px;
176 font-weight: bold;
177 }
178
179 /* Misc */
180
181 pre, .pre-main {
182 background-color: #f8f8f8;
183 border: 1px solid #ddd;
184 padding: 10px;
185 margin: 10px 0;
186 overflow: auto;
187 }
188
189 .pre-main { margin: 16px 0; }
190
191 input[type=submit], select, .button {
192 padding: 4px;
193 margin: 0;
194 background-color: #f1f1f1;
195 border: 1px solid #ddd;
196 cursor: pointer;
197 color: #000;
198 }
199
200 input[type=submit]:hover, select:hover, .button:hover {
201 background-color: #ddd;
202 border: 1px solid #999;
203 }
204
205 input[type=text] { height: 18px; }
206
207 div.scroll { height: 200px; overflow: auto;
208 border: 1px solid #ddd; }
209 div.scroll table { border: 0px solid #fff; }
210
211 /* Round corner */
212
213 table, pre, input[type=submit], .debug, .box,
214 .button, div.scroll {
215 /*-moz-border-radius: 4px;
216 -webkit-border-radius: 4px; */
217 border-radius: 4px;
218 }
219
220 /* Footer */
221
222 #footer {
223 /* border-bottom: 1px solid #c1baad; */
224 height: 25px;
225 text-align: center;
226 padding: 40px 10px;
227 font-size: 11px;
228 }