jappixmini/jappix/css/manager.css

   1 /*
   2
   3 Jappix - An open social platform
   4 This is the manager CSS stylesheet for Jappix
   5
   6 -------------------------------------------------
   7
   8 License: AGPL
   9 Author: Vanaryon
  10 Last revision: 31/08/11
  11
  12 */
  13
  14 #manager {
  15         background-color: rgb(20,20,20);
  16         background-color: rgba(20,20,20,0.85);
  17         width: 945px;
  18         margin: 0 auto 25px;
  19         padding-bottom: 17px;
  20         border-bottom-left-radius: 4px;
  21         border-bottom-right-radius: 4px;
  22         -moz-border-radius-bottomleft: 4px;
  23         -moz-border-radius-bottomright: 4px;
  24         -webkit-border-bottom-left-radius: 4px;
  25         -webkit-border-bottom-right-radius: 4px;
  26         box-shadow: 0 0 35px #5c5c5c;
  27         -moz-box-shadow: 0 0 35px #5c5c5c;
  28         -webkit-box-shadow: 0 0 35px #5c5c5c;
  29 }
  30
  31 #manager a {
  32         color: black;
  33         text-decoration: underline;
  34 }
  35
  36 #manager .clear {
  37         clear: both;
  38 }
  39
  40 #manager fieldset {
  41         border: 1px solid black;
  42         margin: 22px 0 15px 0;
  43         padding: 7px 2px 5px 2px;
  44         border-radius: 3px;
  45         -moz-border-radius: 3px;
  46         -webkit-border-radius: 3px;
  47 }
  48
  49 #manager legend {
  50         font-size: 0.9em;
  51         margin: 0 0 0 15px;
  52         padding: 0 2px;
  53         text-transform: uppercase;
  54 }
  55
  56 #manager label {
  57         width: 200px;
  58         display: block;
  59         float: left;
  60         clear: both;
  61         margin: 0 0 9px 12px;
  62 }
  63
  64 #manager label.master {
  65         text-decoration: underline;
  66 }
  67
  68 #manager input,
  69 #manager select {
  70         float: left;
  71         margin-bottom: 5px;
  72 }
  73
  74 #manager input[type=radio] {
  75         margin: 2px 8px 5px 0;
  76 }
  77
  78 #manager input[type=text],
  79 #manager input[type=url],
  80 #manager input[type=password],
  81 #manager select {
  82         margin-top: -2px;
  83         font-size: 0.95em;
  84 }
  85
  86 #manager input[type=text],
  87 #manager input[type=url],
  88 #manager input[type=password] {
  89         padding: 3px;
  90         min-width: 220px;
  91 }
  92
  93 #manager input.icon {
  94         padding-left: 24px;
  95         min-width: 199px;
  96         max-height: 18px;
  97 }
  98
  99 #manager input.icon#admin_name {
 100         background-position: 4px -510px;
 101 }
 102
 103 #manager input.icon#admin_password,
 104 #manager input.icon#user_repassword {
 105         background-position: 4px -532px;
 106 }
 107
 108 #manager input.icon#user_name,
 109 #manager input.icon#music_artist {
 110         background-position: 4px -554px;
 111 }
 112
 113 #manager input.icon#user_password {
 114         background-position: 4px -576px;
 115 }
 116
 117 #manager input.icon#music_title {
 118         background-position: 4px -598px;
 119 }
 120
 121 #manager input.icon#music_album {
 122         background-position: 4px -620px;
 123 }
 124
 125 #manager input.icon#background_image_color,
 126 #manager input.icon#background_color_color {
 127         background-position: 4px -641px;
 128 }
 129
 130 #manager select {
 131         min-width: 160px;
 132         max-width: 230px;
 133 }
 134
 135 #manager-top {
 136         padding: 25px 45px 30px;
 137 }
 138
 139 #manager-top .logo {
 140         background-position: 0 0;
 141         min-width: 89px;
 142         height: 40px;
 143         padding: 28px 0 0 65px;
 144         font-size: 32px;
 145         color: white;
 146         text-transform: lowercase;
 147         float: left;
 148         text-shadow: 0 1px 1px black;
 149 }
 150
 151 #manager-top .meta {
 152         background-color: #e0eaec;
 153         font-size: 0.9em;
 154         padding: 12px 7px 12px 14px;
 155         float: right;
 156         border-radius: 3px;
 157         -moz-border-radius: 3px;
 158         -webkit-border-radius: 3px;
 159         box-shadow: 0 0 10px #202020;
 160         -moz-box-shadow: 0 0 10px #202020;
 161         -webkit-box-shadow: 0 0 10px #202020;
 162 }
 163
 164 #manager-top .meta span {
 165         margin-right: 10px;
 166         color: black;
 167 }
 168
 169 #manager-top .meta a {
 170         background-color: #f1f6fd;
 171         border: 1px solid #b9cbcf;
 172         color: #224249;
 173         padding: 4px 8px 4px 21px;
 174         margin-left: 2px;
 175         text-decoration: none;
 176         border-radius: 2px;
 177         -moz-border-radius: 2px;
 178         -webkit-border-radius: 2px;
 179 }
 180
 181 #manager-top .meta a:hover,
 182 #manager-top .meta a:focus {
 183         border: 1px solid #95b1b7;
 184 }
 185
 186 #manager-top .meta a:active {
 187         border: 1px solid #77989f;
 188 }
 189
 190 #manager-top .meta a.logout {
 191         background-position: 3px -69px;
 192 }
 193
 194 #manager-top .meta a.close {
 195         background-position: 3px -90px;
 196 }
 197
 198 #manager-tabs {
 199         margin-left: 12px;
 200 }
 201
 202 #manager-tabs a {
 203         background-color: #d9e7ea;
 204         color: #204249;
 205         width: 107px;
 206         height: 17px;
 207         padding: 4px 4px 4px 16px;
 208         margin-left: 4px;
 209         font-size: 0.94em;
 210         text-decoration: none;
 211         overflow: hidden;
 212         float: left;
 213         border-top-right-radius: 3px;
 214         border-top-left-radius: 3px;
 215         -moz-border-radius-topright: 3px;
 216         -moz-border-radius-topleft: 3px;
 217         -webkit-border-top-right-radius: 3px;
 218         -webkit-border-top-left-radius: 3px;
 219 }
 220
 221 #manager-tabs a:hover,
 222 #manager-tabs a:focus {
 223         background-color: #cedee1;
 224         text-decoration: none;
 225 }
 226
 227 #manager-tabs a:active {
 228         background-color: #c3d3d7;
 229         text-decoration: none;
 230 }
 231
 232 #manager-tabs a.tab-active {
 233         background-color: #e4eef9 !important;
 234 }
 235
 236 #manager-content {
 237         background: #e4eef9;
 238         background: -moz-linear-gradient(top, #e4eef9, #d0e5fa);
 239         background: -webkit-gradient(linear, left top, left bottom, from(#e4eef9), to(#d0e5fa));
 240         color: black;
 241         font-size: 0.9em;
 242         margin: 0 10px;
 243         padding: 20px 24px;
 244         min-height: 260px;
 245         clear: both;
 246         right: 10px;
 247         border-radius: 3px;
 248         -moz-border-radius: 3px;
 249         -webkit-border-radius: 3px;
 250         box-shadow: 0 0 20px #202020;
 251         -moz-box-shadow: 0 0 20px #202020;
 252         -webkit-box-shadow: 0 0 20px #202020;
 253 }
 254
 255 #manager-content h3 {
 256         padding-left: 24px;
 257         margin-bottom: 15px;
 258 }
 259
 260 #manager-content h3.login {
 261         background-position: 0 -466px;
 262 }
 263
 264 #manager-content h3.statistics {
 265         background-position: 0 -203px;
 266 }
 267
 268 #manager-content h3.configuration {
 269         background-position: 0 -224px;
 270 }
 271
 272 #manager-content h3.hosts {
 273         background-position: 0 -246px;
 274 }
 275
 276 #manager-content h3.storage {
 277         background-position: 0 -268px;
 278 }
 279
 280 #manager-content h3.design {
 281         background-position: 0 -290px;
 282 }
 283
 284 #manager-content h3.users {
 285         background-position: 0 -312px;
 286 }
 287
 288 #manager-content h3.updates {
 289         background-position: 0 -334px;
 290 }
 291
 292 #manager-content h4 {
 293         border-top: 1px dotted black;
 294         padding-top: 5px;
 295         margin: 20px 0 14px;
 296         clear: both;
 297 }
 298
 299 #manager-content ul,
 300 #manager-content ol {
 301         width: 380px;
 302         margin: 8px 0 20px 18px;
 303 }
 304
 305 #manager-content li {
 306         margin-bottom: 3px;
 307 }
 308
 309 #manager-content li.total {
 310         margin-bottom: 14px;
 311 }
 312
 313 #manager-content li b {
 314         width: 190px;
 315         float: left;
 316 }
 317
 318 #manager-content li span {
 319         margin-left: 10px;
 320         float: left;
 321 }
 322
 323 #manager-content ul.stats,
 324 #manager-content ol.stats {
 325         float: left;
 326 }
 327
 328 #manager-content object.stats {
 329         border: 1px dotted #bed4d9;
 330         width: 450px;
 331         height: 270px;
 332         margin-bottom: 20px;
 333         float: right;
 334 }
 335
 336 #manager-content p,
 337 #manager-content div {
 338         margin-bottom: 10px;
 339 }
 340
 341 #manager-content .info {
 342         color: black;
 343         border-width: 1px;
 344         border-style: dashed;
 345         padding: 6px 8px;
 346         display: block;
 347         text-decoration: none;
 348 }
 349
 350 #manager-content .info.bottomspace {
 351         margin-bottom: 16px;
 352 }
 353
 354 #manager-content .info.smallspace {
 355         margin: 14px 0 10px 0;
 356 }
 357
 358 #manager-content .info.bigspace {
 359         margin: 35px 0 20px 0;
 360 }
 361
 362 #manager-content .info.neutral {
 363         background-color: #f0f19d;
 364         border-color: #b3ad4f;
 365 }
 366
 367 #manager-content a.info.neutral:hover,
 368 #manager-content a.info.neutral:focus {
 369         background-color: #eced96;
 370 }
 371
 372 #manager-content a.info.neutral:active {
 373         background-color: #e9ea93;
 374 }
 375
 376 #manager-content .info.success {
 377         background-color: #a8dca9;
 378         border-color: #5e9f5f;
 379 }
 380
 381 #manager-content a.info.success:hover,
 382 #manager-content a.info.success:focus {
 383         background-color: #a0d5a1;
 384 }
 385
 386 #manager-content a.info.success:active {
 387         background-color: #9ad09b;
 388 }
 389
 390 #manager-content .info.fail {
 391         background-color: #f19d9d;
 392         border-color: #b34f4f;
 393 }
 394
 395 #manager-content a.info.fail:hover,
 396 #manager-content a.info.fail:focus {
 397         background-color: #ea9595;
 398 }
 399
 400 #manager-content a.info.fail:active {
 401         background-color: #e59090;
 402 }
 403
 404 #manager-content .browse {
 405         margin: 2px 0 6px;
 406         max-height: 243px;
 407         overflow: auto;
 408 }
 409
 410 #manager-content .browse .one-browse {
 411         padding: 5px 10px 5px 34px;
 412         height: 17px;
 413 }
 414
 415 #manager-content .browse .user {
 416         background-position: 9px -111px;
 417 }
 418
 419 #manager-content .browse .other {
 420         background-position: 9px -133px;
 421 }
 422
 423 #manager-content .browse .folder {
 424         background-position: 9px -178px;
 425 }
 426
 427 #manager-content .browse .audio {
 428         background-position: 9px -154px;
 429 }
 430
 431 #manager-content .browse .alert {
 432         background-position: 9px -353px;
 433 }
 434
 435 #manager-content .browse .image {
 436         background-position: 9px -374px;
 437 }
 438
 439 #manager-content .browse .video {
 440         background-position: 9px -397px;
 441 }
 442
 443 #manager-content .browse .document {
 444         background-position: 9px -418px;
 445 }
 446
 447 #manager-content .browse .package {
 448         background-position: 9px -441px;
 449 }
 450
 451 #manager-content .browse .previous {
 452         background-position: 9px -485px;
 453         margin-bottom: 4px;
 454 }
 455
 456 #manager-content .browse div {
 457         margin: 0;
 458 }
 459
 460 #manager-content .browse input {
 461         float: right;
 462         margin: 1px 0;
 463 }
 464
 465 #manager-content .browse .odd {
 466         background-color: #e9f1fd;
 467 }
 468
 469 #manager-content .browse .even {
 470         background-color: #f1f6fd;
 471 }
 472
 473 #manager-content .sub {
 474         border-left: 1px solid black;
 475         margin: 5px 0 20px 22px;
 476         padding-left: 12px;
 477         clear: both;
 478 }
 479
 480 #manager span.logo_links a {
 481         width: 16px;
 482         height: 16px;
 483         margin-right: 6px;
 484         float: left;
 485 }
 486
 487 #manager span.logo_links a.remove {
 488         background-position: 0 -688px;
 489 }
 490
 491 #manager span.logo_links a.view {
 492         background-position: 0 -666px;
 493 }
 494
 495 #manager-content .clear {
 496         margin: 0;
 497 }
 498
 499 #manager-content textarea.notice-text {
 500         height: 70px;
 501         width: 600px;
 502         margin-left: 4px;
 503         padding: 5px;
 504         font-size: 1.2em;
 505 }
 506
 507 #manager-buttons {
 508         margin-top: 22px;
 509 }
 510
 511 #manager-buttons input {
 512         border: 1px solid white;
 513         background-color: rgb(255,255,255);
 514         background-color: rgba(255,255,255,0.1);
 515         color: white;
 516         padding: 4px 8px;
 517         margin-left: -12px;
 518         margin-right: 20px;
 519         font-size: 1em;
 520         text-shadow: 0 1px 1px black;
 521         float: right;
 522         border-radius: 3px;
 523         -moz-border-radius: 3px;
 524         -webkit-border-radius: 3px;
 525         box-shadow: 0 0 5px #202020;
 526         -moz-box-shadow: 0 0 5px #202020;
 527         -webkit-box-shadow: 0 0 5px #202020;
 528 }
 529
 530 #manager-buttons input:hover,
 531 #manager-buttons input:focus {
 532         cursor: pointer;
 533         background-color: rgb(255,255,255);
 534         background-color: rgba(255,255,255,0.2);
 535         box-shadow: 0 0 15px #202020;
 536         -moz-box-shadow: 0 0 15px #202020;
 537         -webkit-box-shadow: 0 0 15px #202020;
 538 }
 539
 540 #manager-buttons input:active {
 541         background-color: rgb(255,255,255);
 542         background-color: rgba(255,255,255,0.3);
 543 }