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

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