wok-6.x annotate tazpanel-theme-sandfive/stuff/style.css @ rev 17092

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