tazpanel annotate styles/default/style.css @ rev 373

hardware.cgi: add loop support
author Pascal Bellard <pascal.bellard@slitaz.org>
date Wed Jul 24 15:14:47 2013 +0000 (2013-07-24)
parents 448b0f6d7311
children 6a8ad3b2b789
rev   line source
pankso@1 1 /*
al@311 2 * CSS style for TazPanel - (C) 2011-12 SliTaz GNU/Linux
pankso@1 3 */
pankso@1 4
pankso@17 5 /* To always have a scroll bar */
pankso@17 6 html {
pankso@17 7 min-height: 102%;
al@311 8 }
al@311 9
pankso@17 10 body {
pankso@17 11 background: #ffffff;
pankso@17 12 color: black;
al@303 13 font: 13px "DejaVu Sans", Ubuntu, "Droid Sans", "Liberation Sans", FreeSans, sans-serif;
pankso@17 14 margin: 25px 0 0;
pankso@17 15 }
pankso@17 16
pankso@185 17 h1 { color: #d66018; padding: 6px 0 0 20px; font-size: 180%; }
pankso@185 18 h2 { color: #444; margin: 10px 0 10px; font-size: 150%; }
pankso@17 19 h3 { color: #666; font-size: 140%; }
pankso@42 20 h4 { color: #888; font-size: 120%; margin: 10px 0 5px; }
pankso@41 21 img { border: 0pt none; vertical-align: middle; padding: 0px 6px 2px 0;}
pankso@110 22 p { margin: 10px 0; }
pankso@73 23 ul { list-style-type: square; }
pankso@1 24 li { padding: 4px 0; }
pankso@1 25 a { text-decoration: none; color: #666; }
pankso@1 26 a:hover { color: #000; }
pankso@1 27
pankso@17 28 /* Header and main title */
pankso@17 29
pankso@17 30 #header {
pankso@185 31 height: 42px;
pankso@17 32 border-bottom: 1px dotted #ddd;
pankso@1 33 }
pankso@1 34
pankso@17 35 /* Desktop gui style bar */
pankso@14 36
pankso@31 37 #toolbar {
pankso@14 38 position: fixed;
pankso@14 39 top: 0;
pankso@14 40 left: 0;
pankso@246 41 height: 23px;
pankso@14 42 width: 100%;
pankso@45 43 padding: 0;
pankso@14 44 background-color: #f1efeb;
pankso@17 45 border-bottom: 1px solid #c1baad;
pankso@14 46 z-index: 200;
pankso@17 47 cursor: default;
pankso@14 48 }
pankso@44 49
pankso@246 50 #menu {
pankso@246 51 margin: 0;
pankso@246 52 padding: 0;
pankso@246 53 }
pankso@246 54 #menu li {
pankso@246 55 list-style: none;
pankso@246 56 float: left;
pankso@246 57 padding: 0;
pankso@246 58 }
pankso@246 59 #menu li a {
pankso@246 60 display: block;
pankso@246 61 padding: 4px 6px;
pankso@246 62 background-color: inherit;
pankso@246 63 text-decoration: none;
pankso@246 64 cursor: default;
pankso@246 65 color: #000;
pankso@246 66 }
pankso@246 67 #menu li a:hover {
pankso@246 68 color: #ffffff;
pankso@246 69 background-color: #d66018;
pankso@246 70 border-top-right-radius: 3px;
pankso@246 71 border-top-left-radius: 3px;
pankso@246 72 }
pankso@246 73 #menu li ul {
al@311 74 display: none;
al@303 75 min-width: 180px;
pankso@246 76 background-color: #f1efeb;
pankso@246 77 border: 1px solid #c1baad;
pankso@246 78 }
pankso@246 79 #menu li ul a {
pankso@246 80 padding: 4px 6px;
pankso@246 81 }
pankso@246 82 #menu li:hover ul {
pankso@246 83 display: block;
pankso@246 84 position: absolute;
pankso@246 85 margin: 0;
pankso@246 86 padding: 0;
pankso@246 87 }
pankso@246 88 #menu li:hover li {
pankso@246 89 float: none;
pascal@368 90 position: relative;
pankso@246 91 }
pankso@246 92 #menu li:hover li a {
pankso@246 93 background-color: #f1efeb;
pankso@246 94 color: #000;
pankso@246 95 }
pankso@246 96 #menu li li a { border: 1px solid #f1efeb; }
pankso@246 97 #menu li li a:hover {
pankso@246 98 background-color: #d66018;
pankso@246 99 color: #ffffff;
pankso@246 100 border-radius: 2px;
pankso@246 101 /* border: 1px solid #c1baad; */
pankso@246 102 }
al@303 103
pascal@368 104 /* submenus */
pascal@368 105 #menu li:hover li ul {
pascal@368 106 display: none;
pascal@368 107 position: absolute;
pascal@368 108 left: 180px;
pascal@368 109 top: 0px;
pascal@373 110 z-index:1;
pascal@368 111 }
pascal@368 112 #menu li:hover li:hover ul {
pascal@368 113 display: block;
pascal@368 114 }
pankso@246 115
pankso@246 116 #icons { margin: 3px 8px; float: right; }
pankso@17 117 #icons img { padding: 0; }
pankso@14 118
pankso@45 119 #loading {
pankso@191 120 /* font-weight: bold; */
pankso@191 121 background-color: #f8f8f8;
pankso@191 122 border: 1px solid #ddd;
pankso@191 123 color: #666;
pankso@191 124 cursor: progress;
pankso@191 125 position: fixed;
pankso@191 126 top: 92px;
pankso@191 127 right: 120px;
pankso@191 128 width: 248px;
pankso@191 129 padding: 4px 4px 2px;
pankso@45 130 }
pankso@17 131
pankso@41 132 /* Blocks */
pankso@41 133
pankso@41 134 #block { float: left; }
pankso@41 135
pankso@41 136 /* Sidebar menus */
pankso@41 137
pankso@41 138 #sidebar {
pankso@41 139 position: fixed;
pankso@185 140 top: 92px;
pankso@41 141 right: 5px;
pankso@41 142 width: 116px;
pankso@41 143 }
pankso@41 144
pankso@41 145 #sidebar a {
pankso@41 146 display: block;
pankso@73 147 padding: 0px 0 0px 12px;
pankso@73 148 margin: 0;
pankso@41 149 }
pankso@41 150
pankso@41 151 #sidebar a.active {
pankso@41 152 color: #000;
pankso@41 153 font-weight: bold;
pankso@41 154 }
pankso@73 155
pankso@41 156 #sidebar h4 { margin: 0 0 2px 12px; }
pankso@73 157 #sidebar ul { list-style-type: none; padding: 0; }
pankso@41 158
al@312 159
pankso@41 160 /* Content */
pankso@41 161
pankso@185 162 #content { margin: 20px; }
pankso@185 163 #content-sidebar { margin: 20px 120px 20px 20px; }
pankso@41 164 #wrapper { margin: 10px 0 20px; }
pankso@41 165
pankso@120 166 #actions {
al@303 167 min-height: 20px;
al@303 168 padding: 16px 0;
pankso@120 169 }
pankso@120 170
pankso@120 171 #actions p { margin: 6px 0; }
pankso@120 172
pankso@41 173 .search {
pankso@41 174 position: absolute;
pankso@41 175 right: 40px;
pankso@185 176 top: 23px;
pankso@41 177 }
pankso@41 178
pankso@41 179 .search input[type=submit] {
pankso@246 180 padding: 5px;
pankso@80 181 margin-left: -4px;
pankso@41 182 background-color: #f1f1f1;
pankso@41 183 border: 1px solid #ddd;
pankso@41 184 cursor: pointer;
pankso@41 185 color: #000;
pankso@41 186 font-weight: bold;
pankso@80 187 border-radius: 0px;
pankso@80 188 }
pankso@80 189
pankso@80 190 .search input[type=submit].radius {
pankso@41 191 border-top-right-radius: 4px;
pankso@41 192 border-bottom-right-radius: 4px;
pankso@41 193 border-top-left-radius: 0px;
pankso@41 194 border-bottom-left-radius: 0px;
pankso@41 195 }
pankso@41 196
pankso@41 197 .search input[type=text] {
pankso@41 198 border: 1px solid #ddd;
pankso@41 199 padding: 4px;
pankso@41 200 height: 17px;
pankso@41 201 margin: 0;
pankso@49 202 width: 200px;
pankso@41 203 border-top-left-radius: 4px;
pankso@41 204 border-bottom-left-radius: 4px;
pankso@41 205 }
pankso@41 206
pankso@41 207 .box {
pankso@41 208 margin: 10px 0;
pankso@41 209 padding: 12px;
pankso@41 210 background: #f8f8f8;
pankso@41 211 border: 1px solid #ddd;
pankso@41 212 }
pankso@41 213
pankso@89 214 .box ul { list-style-type: none; padding: 0; }
pankso@89 215
pankso@41 216 .debug {
pankso@41 217 position: fixed;
pankso@45 218 bottom: 0px;
pankso@70 219 right: 10px;
pankso@70 220 left: 10px;
pankso@70 221 margin: 5px;
pankso@70 222 padding: 4px 10px;
pankso@70 223 background-color: #111;
pankso@70 224 color: #fff;
pankso@70 225 border: 0;
pankso@70 226 font-size: 12px;
pankso@70 227 opacity: 0.9;
pankso@41 228 }
pankso@41 229
al@303 230 .float-left {
al@303 231 float: left;
al@303 232 }
al@303 233 .float-right {
al@303 234 float: right;
al@303 235 }
pankso@41 236
al@312 237
pankso@41 238 /* Table */
pankso@41 239
pankso@41 240 table {
pankso@41 241 background-color: #f8f8f8;
pankso@41 242 border: 1px solid #ddd;
pankso@41 243 padding: 10px;
pankso@41 244 width: 100%;
pankso@41 245 margin: 0 0 6px 0;
pankso@41 246 }
pankso@41 247
pankso@41 248 table a { color: #000; }
pankso@41 249 table a:hover { color: #666; }
pankso@46 250 td.small { min-width: 60px; }
pankso@41 251 td.pkg { max-width: 160px; }
pankso@41 252 td.desc { max-width: 300px; }
pankso@153 253 td.pct { min-width: 200px; background: #eee; }
pascal@217 254 div.pct { background: #ccc; }
pankso@153 255 td.pct, div.pct { border-radius: 2px; }
pankso@41 256
pankso@42 257 #thead, .thead, thead {
pankso@41 258 height: 10px;
pankso@41 259 font-weight: bold;
pankso@41 260 }
pankso@41 261
al@303 262 /*
al@303 263 * Table Zebra
al@303 264 */
al@303 265
al@303 266 table.zebra {
al@303 267 border: none;
al@303 268 border-collapse: collapse;
al@311 269 margin: 0;
al@303 270 }
al@303 271 table.zebra tr:nth-child(even) {
al@303 272 background-color: rgba(0,0,0,0.05);
al@303 273 }
al@303 274 table.zebra thead tr td {
al@303 275 height: 22px;
al@303 276 background-color: #eee;
al@303 277 text-align: center;
al@303 278 vertical-align: middle;
al@303 279 }
al@303 280 table.zebra td + td {
al@303 281 border-left: 1px solid #ddd;
al@303 282 }
al@311 283 .outbox {
al@311 284 box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ccc;
al@311 285 }
al@311 286 .fixed {
al@311 287 table-layout: fixed;
al@311 288 }
al@303 289
al@303 290 /*
al@303 291 * syntax_highlighter
al@303 292 */
pankso@74 293
pankso@74 294 span.conf-comment { color: #666; }
pankso@76 295 span.conf-var { color: #392600; }
pankso@75 296 span.conf-val, span.sh-val { color: #f35a00; }
pankso@75 297 span.sh-comment { color: #b20000; }
al@303 298 span.activity-log { color: #888; }
pankso@120 299 span.diff-rm { color: red; }
pankso@120 300 span.diff-add { color: green; }
pankso@153 301 span.diff-at { color: blue; }
al@303 302 span.top { color: #00c800; font-weight: normal; }
al@303 303 span.kernel-hex { color: #18A423; }
al@303 304 span.kernel-id { color: #287FC7; }
al@303 305 span.kernel-id2 { color: #843523; }
al@363 306 span.lsusb-h, span.lspci-h { color: #800; font-weight: bold; }
al@363 307 span.lsusb-t, span.lspci-t { color: #448; font-weight: bold; }
pankso@153 308
pankso@29 309 /* Misc */
pankso@17 310
al@311 311 pre, .pre-main {
al@303 312 font: 13px "DejaVu Sans Mono", "Droid Sans Mono", "Liberation Mono", FreeMono, monospace;
al@311 313 background-color: #f8f8f8;
al@311 314 border: 1px solid #ddd;
pankso@17 315 padding: 10px;
pankso@17 316 margin: 10px 0;
pankso@17 317 overflow: auto;
pankso@17 318 }
pankso@17 319
pankso@41 320 .pre-main { margin: 16px 0; }
pankso@41 321
pankso@41 322 input[type=submit], select, .button {
pankso@41 323 padding: 4px;
pankso@41 324 margin: 0;
pankso@17 325 background-color: #f1f1f1;
pankso@17 326 border: 1px solid #ddd;
pankso@17 327 cursor: pointer;
pankso@41 328 color: #000;
pankso@17 329 }
al@303 330 a.button {
al@303 331 white-space: nowrap;
al@303 332 height: 16px;
al@303 333 margin: 2px 0;
al@303 334 display: inline-block;
al@303 335 }
pankso@17 336
pankso@41 337 input[type=submit]:hover, select:hover, .button:hover {
pankso@17 338 background-color: #ddd;
pankso@17 339 border: 1px solid #999;
pankso@17 340 }
pankso@17 341
pankso@49 342 input[type=text], input[type=password] { height: 18px; }
pankso@14 343
pankso@44 344 div.scroll { height: 200px; overflow: auto;
pankso@44 345 border: 1px solid #ddd; }
pankso@42 346 div.scroll table { border: 0px solid #fff; }
pankso@42 347
pankso@191 348 #terminal {
pankso@191 349 background: #000;
pankso@191 350 color: #fff;
pankso@191 351 border: 1px solid #444;
pankso@191 352 min-height: 180px;
pankso@191 353 opacity: 0.8;
pankso@191 354 }
pankso@191 355
pankso@1 356 /* Round corner */
pankso@10 357
pankso@45 358 #loading, table, pre, input[type=submit], .debug, .box,
al@312 359 .button, div.scroll, .outbox, section {
al@312 360 -moz-border-radius: 4px;
al@312 361 -webkit-border-radius: 4px;
pankso@1 362 border-radius: 4px;
pankso@1 363 }
pankso@41 364
pankso@112 365 /* Help page */
pankso@112 366
pankso@112 367 #help { text-align: justify; }
pankso@112 368 #help a { color: #215090; text-decoration: underline; }
pankso@112 369 #help a:hover { text-decoration: none; color: blue; }
pankso@112 370
pankso@41 371 /* Footer */
pankso@41 372
pankso@41 373 #footer {
pankso@41 374 /* border-bottom: 1px solid #c1baad; */
pankso@41 375 height: 25px;
pankso@41 376 text-align: center;
pankso@41 377 padding: 40px 10px;
pankso@41 378 font-size: 11px;
pankso@116 379 color: #bbb;
pankso@112 380 }
pankso@112 381
pankso@116 382 #footer a { color: #bbb; }
pankso@116 383 #footer a:hover { color: #555; }
al@303 384
al@303 385 /* HTML5 Meter */
al@303 386 .meter {
al@303 387 height: 22px;
al@303 388 min-width: 200px;
al@303 389 cursor: default;
al@303 390 }
al@303 391 .meter meter {
al@303 392 height: inherit;
al@303 393 width: 100%;
al@303 394 display: block;
al@303 395 border: 1px solid #ddd;
al@303 396 border-radius: 4px;
al@303 397 }
al@303 398 .meter span {
al@303 399 height: 22px;
al@303 400 display: block;
al@303 401 white-space: nowrap;
al@303 402 position: absolute;
al@303 403 margin: -18px auto 0 2px;
al@303 404 }
al@303 405
al@303 406
al@303 407 a.button, input {
al@303 408 -webkit-transition: all 0.3s ease-in-out;
al@303 409 -moz-transition: all 0.3s ease-in-out;
al@303 410 -o-transition: all 0.3s ease-in-out;
al@303 411 -ms-transition: all 0.3s ease-in-out;
al@303 412 transition: all 0.3s ease-in-out;
al@303 413 }
al@312 414
al@312 415 section {
al@312 416 margin: 20pt -0.7em;
al@312 417 padding: 0.7em;
al@312 418 background-color: #fdfdfd;
al@312 419 border: 1px solid #ddd;
al@312 420 border-radius: 1em;
al@312 421 /*box-shadow: 0 0 3pt 2pt #eee;*/
al@312 422 }
al@312 423 section h4 {
al@312 424 margin: 0 0 0.5em 0;
al@312 425 }
al@312 426 section h3 {
al@312 427 margin: 0 0 0.5em 0;