panikdb/static/css/style.css

   1 div#header {
   2         background: #282f2e url(../images/banner-1054.png) no-repeat 0px top;
   3         height: 93px;
   4 }
   5
   6 div#top {
   7         float: right;
   8         background: rgba(0, 0, 0, 0.8);
   9         height: auto;
  10         box-sizing: border-box;
  11         padding: 1ex;
  12         color: #eee;
  13         position: relative;
  14         z-index: 1000;
  15         border-radius: 0 0 0 1ex;
  16 }
  17
  18 div#top a {
  19         padding: 0 1ex;
  20         color: white;
  21 }
  22
  23 div#main-content {
  24         padding-top: 0;
  25         overflow: visible;
  26 }
  27
  28 div#more-user-links {
  29         margin-top: -1ex;
  30         margin-bottom: 1em;
  31 }
  32
  33 div#content {
  34         margin-top: 1ex;
  35 }
  36
  37 div#appbar button,
  38 div#appbar span {
  39         position: absolute;
  40         padding-left: 15px;
  41         padding-right: 15px;
  42         right: 10px;
  43         top: 20px;
  44         z-index: 10;
  45 }
  46
  47 div#appbar button {
  48         left: -20px;
  49         top: -55px;
  50 }
  51
  52 div#appbar a {
  53         font-size: 80%;
  54         font-weight: normal;
  55 }
  56
  57 div#content h3 {
  58         margin-top: 0;
  59         font-weight: normal;
  60         color: #656551;
  61         font-size: 18px;
  62         letter-spacing: -1px;
  63         line-height: 25px;
  64         margin-bottom: 20px;
  65 }
  66
  67 ul.episode-list {
  68         line-height: 1.5em;
  69         padding: 1ex 2ex 1ex 3ex;
  70 }
  71
  72 hr {
  73         clear: both;
  74         border: 0;
  75         border-bottom: 1px solid #888;
  76         margin: 10px auto 20px auto;
  77         width: 80%;
  78 }
  79
  80 body.login div#search,
  81 body.login div#more-user-links {
  82         display: none;
  83 }
  84
  85 body.login #header {
  86         border: 1px solid #666;
  87 }
  88
  89 body.login #main {
  90         max-width: 100ex;
  91         margin: 0 auto;
  92 }
  93
  94 body.login #content {
  95         background: white;
  96         padding: 1rem;
  97 }
  98
  99 body.login div#main-content {
 100         border-width: 0 1px 1px 1px;
 101         box-sizing: border-box;
 102 }
 103
 104 form#login-form p {
 105         float: left;
 106         width: 40%;
 107 }
 108
 109 form#login-form button {
 110         margin-top: 1.8rem;
 111 }
 112
 113 div.login-actions {
 114         clear: both;
 115         padding-top: 2em;
 116 }
 117
 118 div.login-actions p {
 119         margin: 0;
 120 }
 121
 122 form.inline p label {
 123   display: inline;
 124 }
 125
 126 form .inline label {
 127   display: inline;
 128 }
 129 form .inline li {
 130   display: inline;
 131 }
 132
 133 span.add-on {
 134         padding: 5px;
 135         border: 1px solid #cccccc;
 136         color:#666666;
 137         background: white;
 138         color: black;
 139         -webkit-border-radius: 4px;
 140         -moz-border-radius: 4px;
 141         border-radius: 4px;
 142 }
 143
 144 div#content h4 {
 145         margin-bottom: 5px;
 146         margin-top: 30px;
 147 }
 148
 149 abbr {
 150         border-bottom: 1px dotted #8c8c73;
 151         cursor: help;
 152 }
 153
 154 pre.code, pre.sample {
 155         border: 1px solid #babdb6;
 156         padding: 0.5em 1em;
 157         background: #fefefe;
 158 }
 159
 160 div.description {
 161 background: #eee;
 162 border: 1px solid #ccc;
 163 padding: 0em 1em 0 1em;
 164 margin: 1em 0;
 165 }
 166
 167 /* makes the font 33% larger relative to the icon container */
 168 .icon-large:before {
 169   vertical-align: top;
 170   font-size: 1.3333333333333333em;
 171 }
 172
 173 ul.emission-list {
 174   column-count: 4;
 175   -moz-column-count: 4;
 176   -webkit-column-count: 4;
 177 }
 178
 179 ul.episode-list {
 180   column-count: 2;
 181   -moz-column-count: 2;
 182   -webkit-column-count: 2;
 183 }
 184
 185 ul.newsitem-list {
 186   column-count: 2;
 187   -moz-column-count: 2;
 188   -webkit-column-count: 2;
 189 }
 190
 191 .fileprogress {
 192         border: 1px solid #888;
 193 }
 194
 195 .fileprogress .bar {
 196         background: #09f;
 197         line-height: 1.5em;
 198         padding-left: 1ex;
 199         font-weight: bold;
 200         white-space: nowrap;
 201 }
 202
 203 .fileinfo {
 204         line-height: 1.5em;
 205 }
 206
 207 #soundfiles th,
 208 #soundfiles td {
 209         padding: 1ex 1ex;
 210         border: 1px solid #aaa;
 211         border-width: 1px 0;
 212 }
 213
 214 a.big-friendly-button {
 215         text-decoration: none;
 216         display: inline-block;
 217         padding: 1ex;
 218         margin: 0 1em;
 219         color: #ffffff;
 220         background: #4690d6;
 221         border: 1px solid #2a567f;
 222         font-weight: bold;
 223         border-radius: 5px;
 224 }
 225
 226 a.big-friendly-button:hover {
 227         background: #2a567f;
 228 }
 229
 230 a.actually-not-that-friendly {
 231         border-color: #F52F2D;
 232         color: #F52F2D;
 233         position: absolute;
 234         right: -10px;
 235         padding: 0 1ex;
 236 }
 237
 238 a.actually-not-that-friendly:hover {
 239         background: #d01311;
 240 }
 241
 242 div.two-columns ul.episode-list {
 243   column-count: 1;
 244   -moz-column-count: 1;
 245   -webkit-column-count: 1;
 246 }
 247
 248 div.two-columns > div {
 249         width: 48%;
 250         margin-right: 1%;
 251         float: left;
 252 }
 253
 254 .input-append {
 255         margin-left: 10px;
 256         margin-bottom: 10px;
 257 }
 258
 259 #content ul.select2-choices {
 260         min-width: 15em;
 261         padding: 0;
 262 }
 263
 264 span.add-on {
 265         background: #eee;
 266         margin-left: 3px;
 267 }
 268
 269 #s2id_id_category,
 270 #s2id_id_emission {
 271         width: 30em;
 272 }
 273
 274 .image {
 275         text-align: right;
 276 }
 277
 278 .image img {
 279         padding: 5px;
 280         max-width: 200px;
 281         border: 1px solid #666;
 282         float: right;
 283         margin: 1em;
 284 }
 285
 286 .image img.large {
 287         max-width: 100%;
 288 }
 289
 290 span.tag {
 291         border: 1px solid #888;
 292         border-radius: 1ex;
 293         padding: 0 1ex;
 294         background: #eee;
 295 }
 296
 297 div.text {
 298         border-bottom: 1px solid #aaa;
 299         margin-bottom: 1em;
 300 }
 301
 302 #piece-details {
 303         float: right;
 304         margin: 1em;
 305 }
 306
 307 #piece-details img {
 308         padding: 5px;
 309         max-width: 200px;
 310         border: 1px solid #666;
 311 }
 312
 313 .matos-piece #id_comment, .matos-piece #id_location {
 314         height: 4em;
 315         width: 100%;
 316 }
 317
 318 .pieces-list {
 319         padding: 1rem 2rem;
 320         background: white;
 321         -webkit-column-width: 19em;
 322         -moz-column-width: 19em;
 323         column-width: 19em;
 324 }
 325
 326 .pieces-list li {
 327         margin-bottom: 6px;
 328         margin-right: 2rem;
 329 }
 330
 331 .matos-loan .loan-infos {
 332         float: left;
 333         width: 48%;
 334 }
 335
 336 .matos-loan .loan-pieces {
 337         float: right;
 338         width: 48%;
 339 }
 340
 341 .matos-loan .buttons {
 342         clear: both;
 343 }
 344
 345 .soma-list .filepath {
 346         font-size: 80%;
 347         color: #888;
 348 }
 349
 350 .trackartist {
 351         font-size: 80%;
 352 }
 353
 354 .artists-list {
 355         -webkit-column-width: 15em;
 356         -moz-column-width: 15em;
 357         column-width: 15em;
 358 }
 359
 360 .on-air-False {
 361         opacity: 0.5;
 362 }
 363
 364 [class^="icon-"]:after, [class*=" icon-"]:after,
 365 [class^="icon-"]:before, [class*=" icon-"]:before {
 366   font-family: FontAwesome;
 367   font-weight: normal;
 368   font-style: normal;
 369   display: inline-block;
 370   text-decoration: none;
 371 }
 372 a [class^="icon-"], a [class*=" icon-"] {
 373   display: inline-block;
 374   text-decoration: none;
 375 }
 376
 377 .icon-edit:before                 { content: "\f044"; }
 378 .icon-remove-sign:before          { content: "\f057"; }
 379 .icon-remove:before               { content: "\f00d"; }
 380 .icon-minus:before                { content: "\f068"; }
 381 .icon-envelope:before             { content: "\f003"; }
 382 .icon-comment:before              { content: "\f075"; }
 383 .icon-home-space:before           { content: "\f015 "; }
 384 .icon-user-space:before           { content: "\f007 "; }
 385 .icon-circle-arrow-left:before    { content: "\f0a8"; }
 386 .icon-circle-arrow-right:before   { content: "\f0a9"; }
 387 .icon-music:before                { content: "\f001"; }
 388 .icon-th:before                   { content: "\f00a"; }
 389 .icon-eye-open:before             { content: "\f06e "; }
 390 .icon-bar-chart:before            { content: "\f080 "; }
 391 .icon-search:before               { content: "\f002 "; }
 392 .icon-signout:before              { content: "\f08b "; }
 393 .icon-pushpin:before              { content: "\f08d "; }
 394
 395 .icon-circle-arrow-down:after     { content: "  \f0ab"; }
 396 .icon-arrow-left:after            { content: "\f060"; }
 397 .icon-arrow-right:after           { content: "\f061"; }
 398
 399 div#placeholders {
 400         overflow: hidden;
 401 }
 402
 403 div#placeholders h3 {
 404         margin-bottom: 0;
 405         line-height: 100%;
 406         padding: 0.5ex 1ex;
 407 }
 408
 409 body.combo div.select2-container {
 410         width: 100%;
 411 }
 412
 413 body.combo a.view-online {
 414         display: none;
 415 }
 416
 417 div.nonstop-stats h3 span {
 418         font-weight: normal;
 419         font-size: 70%;
 420 }
 421
 422 div#content div#available-cells ul {
 423         padding: 0;
 424 }
 425
 426 div.poll {
 427         border-radius: 10px;
 428         margin: 0 auto;
 429         text-align: center;
 430         max-width: 30em;
 431         background: #FF7600;
 432         border: 1px solid red;
 433 }
 434
 435 div.poll a {
 436         display: inline-block;
 437         width: 100%;
 438         padding: 3em;
 439         color: white;
 440         font-weight: bold;
 441 }
 442
 443 form.poll img {
 444         margin-left: 1em;
 445         margin-right: 4em;
 446 }
 447
 448 form.poll p {
 449         margin-top: 1em;
 450 }
 451
 452 form.poll textarea {
 453         width: 100%;
 454         max-width: 40em;
 455         height: 10em;
 456 }
 457
 458 form.poll div.buttons {
 459         margin-top: 1em;
 460 }
 461
 462 form.poll div.error {
 463         padding: 1ex;
 464         max-width: 40em;
 465         margin: 2em;
 466         border: 2px solid red;
 467 }
 468
 469 table#playlist {
 470         border-spacing: 1em;
 471         border-collapse: unset;
 472         width: 100%;
 473 }
 474
 475 table#playlist td.playlist-title {
 476         border: 1px outset black;
 477         background: #eee;
 478         text-align: center;
 479         padding: 1ex;
 480         cursor: pointer;
 481         position: relative;
 482 }
 483
 484 table#playlist .shortcut {
 485         position: absolute;
 486         right: 1ex;
 487         font-size: 90%;
 488 }
 489
 490 table#playlist td:last-child {
 491         color: #444;
 492         font-style: italic;
 493 }
 494
 495 .button-done {
 496         opacity: 0.5;
 497 }
 498
 499 table#playlist td.handle {
 500         width: 10px;
 501         color: white;
 502         background: #666;
 503         cursor: grab;
 504 }
 505
 506 body.submitting {
 507         opacity: 0.5;
 508         pointer-events: none;
 509 }
 510
 511 div#content ul.team {
 512         padding: 0;
 513         padding-left: 1ex;
 514         margin: 0;
 515 }
 516
 517 ul.team li {
 518         display: inline;
 519         padding: 0;
 520         margin: 0;
 521 }
 522
 523 ul.team li::after {
 524         content: " / ";
 525 }
 526
 527 div.two-columns.schedule-team {
 528         width: 60%;
 529 }
 530
 531 div.two-columns.schedule-team > div:first-child {
 532         width: 30%;
 533 }
 534
 535 div.two-columns.schedule-team > div:nth-child(2) {
 536         width: 68%;
 537 }
 538
 539 .extra-actions-menu {
 540         display: none;
 541 }
 542
 543 ul.gallery li {
 544         display: inline-block;
 545         position: relative;
 546         padding-bottom: 20px;
 547 }
 548
 549 ul.gallery li span.image-actions {
 550         position: absolute;
 551         bottom: 0;
 552         right: 0;
 553 }
 554
 555 table {
 556         max-width: 100%;
 557         border-collapse: collapse;
 558         border-spacing: 0;
 559 }
 560
 561 .dropdown-menu {
 562         position: absolute;
 563         top: 100%;
 564         left: 0;
 565         z-index: 1000;
 566         display: none;
 567         float: left;
 568         min-width: 160px;
 569         padding: 5px 0;
 570         margin: 2px 0 0;
 571         margin-top: 2px;
 572         font-size: 14px;
 573         list-style: none;
 574         background-color: #ffffff;
 575         border: 1px solid #cccccc;
 576         border: 1px solid rgba(0, 0, 0, 0.15);
 577         border-radius: 4px;
 578         -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 579         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 580         background-clip: padding-box;
 581 }
 582
 583 div#search {
 584         position: absolute;
 585         top: 40px;
 586         right: 10px;
 587 }
 588
 589 select#id_datetime_0, select#id_datetime_1, select#id_datetime_2 {
 590         width: auto;
 591         margin-right: 1em;
 592 }
 593
 594 div.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::after {
 595         content: "×";
 596 }
 597
 598 form#track-search p {
 599         float: left;
 600         margin-right: 1em;
 601 }
 602
 603 form#track-search button {
 604         margin-top: 2.5ex;
 605 }
 606
 607 #more-user-links a {
 608         background: white;
 609         border: 1px solid #386ede;
 610         padding: 1ex;
 611         border-radius: 3px;
 612         font-weight: bold;
 613 }
 614
 615 .home .block {
 616         background: white;
 617         padding: 1rem;
 618         margin-bottom: 1rem;
 619         border-radius: 3px;
 620 }
 621
 622 .home .block hr {
 623         border-color: white;
 624 }
 625
 626 .action-see-online {
 627         display: none;
 628 }
 629
 630 .select2-container {
 631         min-width: 90%;
 632 }