panikdb/static/css/style.css

   1 /* theme derived and inspired by TerraFirma
   2  * <http://www.oswd.org/design/information/id/3557/>
   3  */
   4
   5 @font-face {
   6   font-family: "FontAwesome";
   7   src: url('fontawesome-webfont.eot');
   8   src: url('fontawesome-webfont.eot?#iefix') format('eot'), url('fontawesome-webfont.woff') format('woff'), url('fontawesome-webfont.ttf') format('truetype'), url('fontawesome-webfont.svg#FontAwesome') format('svg');
   9   font-weight: normal;
  10   font-style: normal;
  11 }
  12
  13 html {
  14         margin: 0;
  15         background: #F9F9F7 url(../images/a1.gif) repeat-x;
  16 }
  17
  18 /* bootstrap <sigh/> */
  19 h1, h2, h3, h4 {
  20         font-family: sans-serif;
  21 }
  22
  23 body {
  24         margin: 0;
  25         background: transparent;
  26         color: #8c8c73;
  27         line-height: inherit;
  28         font-size: 14px;
  29 }
  30
  31 a {
  32         color: #FF7800;
  33         text-decoration: underline;
  34         transition: all .2s ease-in-out;
  35         -webkit-transition: all .2s ease-in-out;
  36         -moz-transition: all .2s ease-in-out;
  37 }
  38
  39 a:hover {
  40         text-decoration: none;
  41         color: #D76500;
  42 }
  43
  44 div#wrap {
  45         background: white;
  46         margin: 1em auto 1em auto;
  47         margin-bottom: 0;
  48         padding: 15px;
  49         border-radius: 6px;
  50         -moz-border-radius: 6px;
  51         -webkit-border-radius:6px;
  52         box-shadow: 0 0 4px rgba(0,0,0,0.75);
  53         -moz-box-shadow: 0 0 4px rgba(0,0,0,0.75);
  54         -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.75);
  55         position: relative;
  56         width: 90%;
  57 }
  58
  59 .narrow div#wrap {
  60         width: 60%;
  61         min-width: 600px;
  62 }
  63
  64 #header
  65 {
  66         position: absolute;
  67         background: #FF7800 url(../images/a8.gif) repeat-x;
  68         border-radius: 6px 0 0 6px;
  69         -moz-border-radius: 6px 0 0 6px;
  70         -webkit-border-radius: 6px 0 0 6px;
  71         width: 212px;
  72         width: 212px;
  73         height: 92px;
  74         color: #fff;
  75         padding-left: 10px;
  76         z-index: 14;
  77 }
  78
  79 #header h1
  80 {
  81         font-size: 23px;
  82         letter-spacing: -1px;
  83         margin: 0;
  84         height: 100%;
  85 }
  86
  87 #header span
  88 {
  89         margin: 0;
  90         font-size: 10px;
  91         font-weight: normal;
  92         color: #FCE2CA;
  93 }
  94
  95 #header h1 a {
  96         color: white;
  97         text-decoration: none;
  98         display: block;
  99         height: 100%;
 100         padding-top: 30px;
 101 }
 102
 103 #splash
 104 {
 105         position: absolute;
 106         right: 15px;
 107         background: #282f2e url(../images/banner-1054.png) no-repeat 0px top;
 108         width: 90%;
 109         height: 92px;
 110         border-radius: 0 6px 6px 0;
 111         -moz-border-radius: 0 6px 6px 0;
 112         -webkit-border-radius: 0 6px 6px 0;
 113         z-index: 10;
 114         color: white;
 115         font-weight: bold;
 116         text-align: right;
 117         padding-top: 5px;
 118 }
 119
 120 div#content {
 121         margin: 1em 1ex;
 122         margin-top: 20px;
 123         padding: 7px;
 124         position: relative;
 125 }
 126
 127 div#appbar button,
 128 div#appbar span {
 129         position: absolute;
 130         padding-left: 15px;
 131         padding-right: 15px;
 132         right: 10px;
 133         top: 20px;
 134         z-index: 10;
 135 }
 136
 137 div#appbar button {
 138         left: -20px;
 139         top: -55px;
 140 }
 141
 142 div#appbar a {
 143         font-size: 80%;
 144         font-weight: normal;
 145 }
 146
 147 div#content h2 {
 148         margin-top: 0;
 149         font-weight: normal;
 150         color: #656551;
 151         font-size: 18px;
 152         letter-spacing: -1px;
 153         line-height: 25px;
 154         margin-bottom: 20px;
 155         padding: 0 0 10px 15px;
 156         position: relative;
 157         top: 4px;
 158         background: url(../images/a22.gif) bottom repeat-x;
 159         clear: both;
 160 }
 161
 162 div#content h2 a {
 163         color: inherit;
 164         text-decoration: inherit;
 165 }
 166
 167 div#content h2 a:hover {
 168         color: #FF7800;
 169         text-decoration: underline;
 170 }
 171
 172 div#content h3 {
 173         margin-top: 0;
 174         font-weight: normal;
 175         color: #656551;
 176         font-size: 18px;
 177         letter-spacing: -1px;
 178         line-height: 25px;
 179         margin-bottom: 20px;
 180 }
 181
 182 div#content ul {
 183         line-height: 1.5em;
 184         padding: 1ex 2ex 1ex 3ex;
 185 }
 186
 187 div.newsitems hr,
 188 div.emission hr {
 189         clear: both;
 190         border-bottom: 1px solid #888;
 191         margin: 10px auto 20px auto;
 192         width: 80%;
 193 }
 194
 195 #footer
 196 {
 197         font-size: 70%;
 198         position: relative;
 199         clear: both;
 200         height: 66px;
 201         text-align: center;
 202         line-height: 66px;
 203         background-image: url(../images/a50.gif);
 204         color: #A8A88D;
 205 }
 206
 207 #footer a
 208 {
 209         color: #8C8C73;
 210 }
 211
 212
 213 form#login-form p {
 214         float: left;
 215         width: 40%;
 216 }
 217
 218 form input.submit {
 219         float: right;
 220         width: 18%;
 221         margin-top: 30px;
 222 }
 223
 224 div.login-actions {
 225         clear: both;
 226         padding-top: 2em;
 227 }
 228
 229 div.login-actions p {
 230         margin: 0;
 231 }
 232
 233 form p {
 234         margin: 0 0 1em 0;
 235 }
 236
 237 form.inline p label {
 238   display: inline;
 239 }
 240
 241 form .inline label {
 242   display: inline;
 243 }
 244 form .inline li {
 245   display: inline;
 246 }
 247
 248 form p label {
 249         display: block;
 250 }
 251
 252 form p input,
 253 form p textarea {
 254         margin-left: 10px;
 255 }
 256
 257 ul.errorlist {
 258         margin: 0;
 259         padding: 0;
 260         color: #e80404;
 261         list-style: none;
 262 }
 263
 264 input, textarea, span.add-on {
 265         padding: 5px;
 266         border: 1px solid #cccccc;
 267         color:#666666;
 268         background: white;
 269         color: black;
 270         -webkit-border-radius: 4px;
 271         -moz-border-radius: 4px;
 272         border-radius: 4px;
 273 }
 274
 275 textarea:focus, input[type="text"]:focus, input[type="password"]:focus {
 276         border: 1px solid #4690d6;
 277         color:#333333;
 278 }
 279
 280 input[type=submit] {
 281         color: #ffffff;
 282         background:#4690d6;
 283         border: 1px solid #2a567f;
 284         font-weight: bold;
 285         padding: 2px 8px 2px 8px;
 286         margin: 0;
 287         cursor: pointer;
 288 }
 289
 290 input[type=submit]:hover {
 291         border-color: #0e1d2b;
 292 }
 293
 294 form#login-form ul.errorlist {
 295         margin-bottom: 1em;
 296         width: 80%;
 297         font-weight: normal;
 298 }
 299
 300 .form-row {
 301         margin: 1em 0;
 302 }
 303
 304 .form-row label {
 305         display: block;
 306 }
 307
 308 .form-row input {
 309         margin-left: 10px;
 310 }
 311
 312 div#content h4 {
 313         margin-bottom: 5px;
 314         margin-top: 30px;
 315 }
 316
 317 div.errors {
 318         margin: 0;
 319         padding: 0;
 320         color: #e80404;
 321         list-style: none;
 322 }
 323
 324 div#breadcrumb {
 325         font-size: 80%;
 326         margin-bottom: 1em;
 327 }
 328
 329 form input.submit {
 330         position: relative;
 331         top: -22px;
 332 }
 333
 334 form#login-form input.submit {
 335         position: relative;
 336         top: -5px;
 337 }
 338
 339 div.content {
 340         float: left;
 341         width: 82%;
 342         margin-left: 8px;
 343         margin-top: -10px;
 344 }
 345
 346 abbr {
 347         border-bottom: 1px dotted #8c8c73;
 348         cursor: help;
 349 }
 350
 351 pre.code, pre.sample {
 352         border: 1px solid #babdb6;
 353         padding: 0.5em 1em;
 354         background: #fefefe;
 355 }
 356
 357 div.description {
 358 background: #eee;
 359 border: 1px solid #ccc;
 360 padding: 0em 1em 0 1em;
 361 margin: 1em 0;
 362 }
 363
 364 /* makes the font 33% larger relative to the icon container */
 365 .icon-large:before {
 366   vertical-align: top;
 367   font-size: 1.3333333333333333em;
 368 }
 369
 370 ul.emission-list {
 371   column-count: 4;
 372   -moz-column-count: 4;
 373   -webkit-column-count: 4;
 374 }
 375
 376 ul.episode-list {
 377   column-count: 2;
 378   -moz-column-count: 2;
 379   -webkit-column-count: 2;
 380 }
 381
 382 ul.newsitem-list {
 383   column-count: 2;
 384   -moz-column-count: 2;
 385   -webkit-column-count: 2;
 386 }
 387
 388
 389
 390 .fileprogress {
 391         border: 1px solid #888;
 392 }
 393
 394 .fileprogress .bar {
 395         background: #09f;
 396         line-height: 1.5em;
 397         padding-left: 1ex;
 398         font-weight: bold;
 399         white-space: nowrap;
 400 }
 401
 402 .fileinfo {
 403         line-height: 1.5em;
 404 }
 405
 406 #soundfiles th,
 407 #soundfiles td {
 408         padding: 1ex 1ex;
 409         border: 1px solid #aaa;
 410         border-width: 1px 0;
 411 }
 412
 413 a.big-friendly-button {
 414         text-decoration: none;
 415         display: inline-block;
 416         padding: 1ex;
 417         margin: 0 1em;
 418         color: #ffffff;
 419         background: #4690d6;
 420         border: 1px solid #2a567f;
 421         font-weight: bold;
 422         border-radius: 5px;
 423 }
 424
 425 a.big-friendly-button:hover {
 426         background: #2a567f;
 427 }
 428
 429 a.actually-not-that-friendly {
 430         background: #F52F2D;
 431         position: absolute;
 432         right: -10px;
 433 }
 434
 435 a.actually-not-that-friendly:hover {
 436         background: #d01311;
 437 }
 438
 439 div.two-columns ul.episode-list {
 440   column-count: 1;
 441   -moz-column-count: 1;
 442   -webkit-column-count: 1;
 443 }
 444
 445 div.two-columns > div {
 446         width: 48%;
 447         margin-right: 1%;
 448         float: left;
 449 }
 450
 451 .input-append {
 452         margin-left: 10px;
 453         margin-bottom: 10px;
 454 }
 455
 456 #content ul.select2-choices {
 457         min-width: 15em;
 458         padding: 0;
 459 }
 460
 461 span.add-on {
 462         background: #eee;
 463         margin-left: 3px;
 464 }
 465
 466 #s2id_id_category,
 467 #s2id_id_emission {
 468         width: 30em;
 469 }
 470
 471 #user-links {
 472         color: black;
 473         margin-top: 100px;
 474 }
 475
 476 button,
 477 #user-links a {
 478         background: #ccc;
 479         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
 480         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 481         border: 1px solid #bbb;
 482         box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
 483         padding: 4px 12px;
 484         border-radius: 4px;
 485         color: black;
 486         text-decoration: none;
 487 }
 488
 489 button:hover,
 490 #user-links a:hover {
 491         background: #aaa;
 492 }
 493
 494 #user-links span.middle {
 495         padding-left: 15px;
 496 }
 497
 498 #user-links span.right {
 499         position: absolute;
 500         right: 20px;
 501         top: 80px;
 502         z-index: 100;
 503 }
 504
 505 #user-links span.right span {
 506         color: #ddd;
 507 }
 508
 509 .image {
 510         text-align: right;
 511 }
 512
 513 .image img {
 514         padding: 5px;
 515         max-width: 200px;
 516         border: 1px solid #666;
 517         float: right;
 518         margin: 1em;
 519 }
 520
 521 .image img.large {
 522         max-width: 100%;
 523 }
 524
 525 span.tag {
 526         border: 1px solid #888;
 527         border-radius: 1ex;
 528         padding: 0 1ex;
 529         background: #eee;
 530 }
 531
 532 div.text {
 533         border-bottom: 1px solid #aaa;
 534         margin-bottom: 1em;
 535 }
 536
 537 ul.messages {
 538         position: absolute;
 539         background: rgba(10, 10, 10, 0.8);
 540         display: block;
 541         top: 5px;
 542         right: 0px;
 543         color: white;
 544         border-radius: 1em;
 545         list-style: none;
 546         z-index: 10;
 547         box-shadow: 0px 0px 5px black;
 548 }
 549
 550 #piece-details {
 551         float: right;
 552         margin: 1em;
 553 }
 554
 555 #piece-details img {
 556         padding: 5px;
 557         max-width: 200px;
 558         border: 1px solid #666;
 559 }
 560
 561 .matos-piece #id_comment, .matos-piece #id_location {
 562         height: 4em;
 563         width: 100%;
 564 }
 565
 566 .pieces-list {
 567         -webkit-column-width: 15em;
 568         -moz-column-width: 15em;
 569         column-width: 15em;
 570 }
 571
 572 .matos-loan .loan-infos {
 573         float: left;
 574         width: 48%;
 575 }
 576
 577 .matos-loan .loan-pieces {
 578         float: right;
 579         width: 48%;
 580 }
 581
 582 .matos-loan .buttons {
 583         clear: both;
 584 }
 585
 586 .soma-list .filepath {
 587         font-size: 60%;
 588         color: #888;
 589 }
 590
 591 .trackartist {
 592         font-size: 80%;
 593 }
 594
 595 .artists-list {
 596         -webkit-column-width: 15em;
 597         -moz-column-width: 15em;
 598         column-width: 15em;
 599 }
 600
 601 .on-air-False {
 602         opacity: 0.5;
 603 }
 604
 605 [class^="icon-"]:after, [class*=" icon-"]:after,
 606 [class^="icon-"]:before, [class*=" icon-"]:before {
 607   font-family: FontAwesome;
 608   font-weight: normal;
 609   font-style: normal;
 610   display: inline-block;
 611   text-decoration: none;
 612 }
 613 a [class^="icon-"], a [class*=" icon-"] {
 614   display: inline-block;
 615   text-decoration: none;
 616 }
 617
 618 .icon-edit:before                 { content: "\f044"; }
 619 .icon-remove-sign:before          { content: "\f057"; }
 620 .icon-remove:before               { content: "\f00d"; }
 621 .icon-minus:before                { content: "\f068"; }
 622 .icon-envelope:before             { content: "\f003"; }
 623 .icon-comment:before              { content: "\f075"; }
 624 .icon-home-space:before           { content: "\f015 "; }
 625 .icon-user-space:before           { content: "\f007 "; }
 626 .icon-circle-arrow-left:before    { content: "\f0a8"; }
 627 .icon-circle-arrow-right:before   { content: "\f0a9"; }
 628 .icon-music:before                { content: "\f001"; }
 629 .icon-th:before                   { content: "\f00a"; }
 630 .icon-eye-open:before             { content: "\f06e "; }
 631 .icon-bar-chart:before            { content: "\f080 "; }
 632 .icon-search:before               { content: "\f002 "; }
 633 .icon-signout:before              { content: "\f08b "; }
 634 .icon-pushpin:before              { content: "\f08d "; }
 635
 636 .icon-circle-arrow-down:after     { content: "  \f0ab"; }
 637 .icon-arrow-left:after            { content: "\f060"; }
 638 .icon-arrow-right:after           { content: "\f061"; }
 639
 640 div#placeholders {
 641         overflow: hidden;
 642 }
 643
 644 div#placeholders h3 {
 645         margin-bottom: 0;
 646         line-height: 100%;
 647         padding: 0.5ex 1ex;
 648 }
 649
 650 div#appbar > a {
 651         position: relative;
 652         top: -45px;
 653         float: right;
 654         margin-left: 2em;
 655 }
 656
 657 body.combo div.select2-container {
 658         width: 100%;
 659 }
 660
 661 body.combo a.view-online {
 662         display: none;
 663 }
 664
 665 div.nonstop-stats h3 span {
 666         font-weight: normal;
 667         font-size: 70%;
 668 }
 669
 670 div#content div#available-cells ul {
 671         padding: 0;
 672 }
 673
 674 div.poll {
 675         border-radius: 10px;
 676         margin: 0 auto;
 677         text-align: center;
 678         max-width: 30em;
 679         background: #FF7600;
 680         border: 1px solid red;
 681 }
 682
 683 div.poll a {
 684         display: inline-block;
 685         width: 100%;
 686         padding: 3em;
 687         color: white;
 688         font-weight: bold;
 689 }
 690
 691 form.poll img {
 692         margin-left: 1em;
 693         margin-right: 4em;
 694 }
 695
 696 form.poll p {
 697         margin-top: 1em;
 698 }
 699
 700 form.poll textarea {
 701         width: 100%;
 702         max-width: 40em;
 703         height: 10em;
 704 }
 705
 706 form.poll div.buttons {
 707         margin-top: 1em;
 708 }
 709
 710 form.poll div.error {
 711         padding: 1ex;
 712         max-width: 40em;
 713         margin: 2em;
 714         border: 2px solid red;
 715 }
 716
 717 table#playlist {
 718         border-spacing: 1em;
 719         border-collapse: unset;
 720         width: 100%;
 721 }
 722
 723 table#playlist td.playlist-title {
 724         border: 1px outset black;
 725         background: #eee;
 726         text-align: center;
 727         padding: 1ex;
 728         cursor: pointer;
 729         position: relative;
 730 }
 731
 732 table#playlist .shortcut {
 733         position: absolute;
 734         right: 1ex;
 735         font-size: 90%;
 736 }
 737
 738 table#playlist td:last-child {
 739         color: #444;
 740         font-style: italic;
 741 }
 742
 743 .button-done {
 744         opacity: 0.5;
 745 }
 746
 747 table#playlist td.handle {
 748         width: 10px;
 749         color: white;
 750         background: #666;
 751         cursor: grab;
 752 }
 753
 754 body.submitting {
 755         opacity: 0.5;
 756         pointer-events: none;
 757 }