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

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