panikdb/static/css/style.scss

   1 div#header {
   2         background: #282f2e url(../images/banner-1054.png) no-repeat 0px top;
   3         height: 93px;
   4         z-index: 100;
   5         h1 a {
   6                 opacity: 1;
   7                 padding: 0;
   8                 margin: 0;
   9         }
  10 }
  11
  12 div#top {
  13         float: right;
  14         background: rgba(0, 0, 0, 0.8);
  15         height: auto;
  16         box-sizing: border-box;
  17         padding: 1ex;
  18         color: #eee;
  19         position: relative;
  20         z-index: 1000;
  21         border-radius: 0 0 0 1ex;
  22 }
  23
  24 div#top a {
  25         padding: 0 1ex;
  26         color: white;
  27 }
  28
  29 div#main-content {
  30         padding-top: 0;
  31         overflow: visible;
  32 }
  33
  34 div#more-user-links {
  35         margin-top: -1ex;
  36         margin-bottom: 1em;
  37 }
  38
  39 div#content {
  40         margin-top: 1ex;
  41 }
  42
  43 div#content h3 {
  44         margin-top: 0;
  45         font-weight: normal;
  46         color: #656551;
  47         font-size: 18px;
  48         letter-spacing: -1px;
  49         line-height: 25px;
  50         margin-bottom: 20px;
  51 }
  52
  53 ul.episode-list {
  54         line-height: 1.5em;
  55         padding: 1ex 2ex 1ex 3ex;
  56 }
  57
  58 hr {
  59         clear: both;
  60         border: 0;
  61         border-bottom: 1px solid #888;
  62         margin: 10px auto 20px auto;
  63         width: 80%;
  64 }
  65
  66 body.login div#search,
  67 body.login div#more-user-links {
  68         display: none;
  69 }
  70
  71 body.login #header {
  72         border: 1px solid #666;
  73 }
  74
  75 body.login #main {
  76         max-width: 100ex;
  77         margin: 0 auto;
  78 }
  79
  80 body.login #content {
  81         background: white;
  82         padding: 1rem;
  83 }
  84
  85 body.login div#main-content {
  86         border-width: 0 1px 1px 1px;
  87         box-sizing: border-box;
  88 }
  89
  90 form#login-form p {
  91         float: left;
  92         width: 40%;
  93 }
  94
  95 form#login-form button {
  96         margin-top: 1.8rem;
  97 }
  98
  99 div.login-actions {
 100         clear: both;
 101         padding-top: 2em;
 102 }
 103
 104 div.login-actions p {
 105         margin: 0;
 106 }
 107
 108 form.inline p label {
 109   display: inline;
 110 }
 111
 112 form .inline label {
 113   display: inline;
 114 }
 115 form .inline li {
 116   display: inline;
 117 }
 118
 119 span.add-on {
 120         padding: 5px;
 121         border: 1px solid #cccccc;
 122         color:#666666;
 123         background: white;
 124         color: black;
 125         border-radius: 4px;
 126 }
 127
 128 div#content h4 {
 129         margin-bottom: 5px;
 130         margin-top: 30px;
 131 }
 132
 133 abbr {
 134         border-bottom: 1px dotted #8c8c73;
 135         cursor: help;
 136 }
 137
 138 pre.code, pre.sample {
 139         border: 1px solid #babdb6;
 140         padding: 0.5em 1em;
 141         background: #fefefe;
 142 }
 143
 144 div.description {
 145 background: #eee;
 146 border: 1px solid #ccc;
 147 padding: 0em 1em 0 1em;
 148 margin: 1em 0;
 149 }
 150
 151 /* makes the font 33% larger relative to the icon container */
 152 .icon-large:before {
 153   vertical-align: top;
 154   font-size: 1.3333333333333333em;
 155 }
 156
 157 ul.emission-list {
 158   column-count: 4;
 159 }
 160
 161 ul.episode-list {
 162   column-count: 2;
 163 }
 164
 165 ul.newsitem-list {
 166   column-count: 2;
 167 }
 168
 169 aside ul.episode-list {
 170         column-count: 1;
 171 }
 172
 173 .fileprogress {
 174         border: 1px solid #888;
 175         overflow: hidden;
 176 }
 177
 178 .fileprogress .bar {
 179         background: #09f;
 180         line-height: 1.5em;
 181         padding-left: 1ex;
 182         font-weight: bold;
 183         white-space: nowrap;
 184 }
 185
 186 .fileinfo {
 187         line-height: 1.5em;
 188 }
 189
 190 #soundfiles th,
 191 #soundfiles td {
 192         padding: 1ex 1ex;
 193         border: 1px solid #aaa;
 194         border-width: 1px 0;
 195 }
 196
 197 a.big-friendly-button {
 198         text-decoration: none;
 199         display: inline-block;
 200         padding: 1ex;
 201         margin: 0 1em;
 202         color: #ffffff;
 203         background: #4690d6;
 204         border: 1px solid #2a567f;
 205         font-weight: bold;
 206         border-radius: 5px;
 207 }
 208
 209 a.big-friendly-button:hover {
 210         background: #2a567f;
 211 }
 212
 213 #appbar span.actions > a.delete-button {
 214         border-color: #F52F2D;
 215         color: #F52F2D;
 216         &:hover {
 217                 color: white;
 218                 background: #d01311;
 219         }
 220 }
 221
 222 a.actually-not-that-friendly {
 223         border-color: #F52F2D;
 224         color: #F52F2D;
 225         position: absolute;
 226         right: -10px;
 227         padding: 0 1ex;
 228 }
 229
 230 a.actually-not-that-friendly:hover {
 231         background: #d01311;
 232 }
 233
 234 div.two-columns ul.episode-list {
 235   column-count: 1;
 236 }
 237
 238 div.two-columns > div {
 239         width: 48%;
 240         margin-right: 1%;
 241         float: left;
 242 }
 243
 244 .input-append {
 245         margin-left: 10px;
 246         margin-bottom: 10px;
 247 }
 248
 249 #content ul.select2-choices {
 250         min-width: 15em;
 251         padding: 0;
 252 }
 253
 254 span.add-on {
 255         background: #eee;
 256         margin-left: 3px;
 257 }
 258
 259 #s2id_id_category,
 260 #s2id_id_emission {
 261         width: 30em;
 262 }
 263
 264 .image {
 265         text-align: right;
 266 }
 267
 268 .image img {
 269         padding: 5px;
 270         max-width: 200px;
 271         border: 1px solid #666;
 272         float: right;
 273         margin: 1em;
 274 }
 275
 276 .image img.large {
 277         max-width: 100%;
 278 }
 279
 280 span.tag {
 281         border: 1px solid #888;
 282         border-radius: 1ex;
 283         padding: 0 1ex;
 284         background: #eee;
 285 }
 286
 287 div.text {
 288         border-bottom: 1px solid #aaa;
 289         margin-bottom: 1em;
 290 }
 291
 292 #piece-details {
 293         float: right;
 294         margin: 1em;
 295 }
 296
 297 #piece-details img {
 298         padding: 5px;
 299         max-width: 200px;
 300         border: 1px solid #666;
 301 }
 302
 303 .matos-piece #id_comment, .matos-piece #id_location_details {
 304         height: 4em;
 305         width: 100%;
 306 }
 307
 308 #locations-legend {
 309         ul, li {
 310                 list-style: none;
 311                 margin: 0;
 312                 padding: 0;
 313         }
 314         ul {
 315                 display: flex;
 316         }
 317         li {
 318                 border-left: 20px solid transparent;
 319                 padding-left: 3px;
 320                 margin-right: 1rem;
 321         }
 322 }
 323 .pieces-list {
 324         padding: 1rem 1rem;
 325         background: white;
 326         column-width: 19em;
 327         display: flex;
 328         flex-wrap: wrap;
 329         align-content: flex-start;
 330         align-items: baseline;
 331 }
 332
 333 .pieces-list li {
 334         flex: 25%;
 335         margin-bottom: 6px;
 336         margin-right: 2rem;
 337         list-style: none;
 338         padding-left: 5px;
 339         border-left: 20px solid transparent;
 340         a {
 341                 display: block;
 342         }
 343         @media screen and (max-device-width: 700px) {
 344                 flex: 100%;
 345         }
 346 }
 347
 348 .matos-loan .loan-infos {
 349         float: left;
 350         width: 48%;
 351 }
 352
 353 .matos-loan .loan-pieces {
 354         float: right;
 355         width: 48%;
 356 }
 357
 358 .matos-loan .buttons {
 359         clear: both;
 360 }
 361
 362 .soma-list .filepath {
 363         font-size: 80%;
 364         color: #888;
 365 }
 366
 367 .trackartist {
 368         font-size: 80%;
 369 }
 370
 371 .artists-list {
 372         column-width: 15em;
 373 }
 374
 375 .on-air-False {
 376         opacity: 0.5;
 377 }
 378
 379 [class^="icon-"]:after, [class*=" icon-"]:after,
 380 [class^="icon-"]:before, [class*=" icon-"]:before {
 381   font-family: FontAwesome;
 382   font-weight: normal;
 383   font-style: normal;
 384   display: inline-block;
 385   text-decoration: none;
 386 }
 387 a [class^="icon-"], a [class*=" icon-"] {
 388   display: inline-block;
 389   text-decoration: none;
 390 }
 391
 392 .icon-edit:before                 { content: "\f044"; }
 393 .icon-remove-sign:before          { content: "\f057"; }
 394 .icon-remove:before               { content: "\f00d"; }
 395 .icon-minus:before                { content: "\f068"; }
 396 .icon-envelope:before             { content: "\f003"; }
 397 .icon-comment:before              { content: "\f075"; }
 398 .icon-home-space:before           { content: "\f015 "; }
 399 .icon-user-space:before           { content: "\f007 "; }
 400 .icon-circle-arrow-left:before    { content: "\f0a8"; }
 401 .icon-circle-arrow-right:before   { content: "\f0a9"; }
 402 .icon-music:before                { content: "\f001"; }
 403 .icon-th:before                   { content: "\f00a"; }
 404 .icon-eye-open:before             { content: "\f06e "; }
 405 .icon-bar-chart:before            { content: "\f080 "; }
 406 .icon-search:before               { content: "\f002 "; }
 407 .icon-signout:before              { content: "\f08b "; }
 408 .icon-pushpin:before              { content: "\f08d "; }
 409 .icon-music::before               { content: "\f001 "; }
 410 .icon-newsletter::before          { content: "\f1ea "; }
 411 .icon-members::before             { content: "\f0c0 "; }
 412 .icon-wiki::before                { content: "\f05a "; }
 413 .icon-cms::before                 { content: "\f016 "; }
 414 .icon-forums::before              { content: "\f0e6 "; }
 415 .icon-regie::before              { content: "\f130 "; }
 416 .icon-download::before            { content: "\f019 "; }
 417 .icon-image::before { content: "\f03e "; }
 418 .icon-agenda::before { content: "\f073 "; }
 419
 420 .icon-circle-arrow-down:after     { content: "  \f0ab"; }
 421 .icon-arrow-left:after            { content: "\f060"; }
 422 .icon-arrow-right:after           { content: "\f061"; }
 423
 424 div#placeholders {
 425         overflow: hidden;
 426 }
 427
 428 div#placeholders h3 {
 429         margin-bottom: 0;
 430         line-height: 100%;
 431         padding: 0.5ex 1ex;
 432 }
 433
 434 body.combo div.select2-container {
 435         width: 100%;
 436 }
 437
 438 body.combo a.view-online {
 439         display: none;
 440 }
 441
 442 div.nonstop-stats h3 span {
 443         font-weight: normal;
 444         font-size: 70%;
 445 }
 446
 447 .objects-list li.disabled {
 448         background: #ddd;
 449         span.tag {
 450                 background: #666;
 451         }
 452 }
 453
 454 div#content div#available-cells ul {
 455         padding: 0;
 456 }
 457
 458 div.poll {
 459         border-radius: 10px;
 460         margin: 0 auto;
 461         text-align: center;
 462         max-width: 30em;
 463         background: #FF7600;
 464         border: 1px solid red;
 465 }
 466
 467 div.poll a {
 468         display: inline-block;
 469         width: 100%;
 470         padding: 3em;
 471         color: white;
 472         font-weight: bold;
 473 }
 474
 475 form.poll img {
 476         margin-left: 1em;
 477         margin-right: 4em;
 478 }
 479
 480 form.poll p {
 481         margin-top: 1em;
 482 }
 483
 484 form.poll textarea {
 485         width: 100%;
 486         max-width: 40em;
 487         height: 10em;
 488 }
 489
 490 form.poll div.buttons {
 491         margin-top: 1em;
 492 }
 493
 494 form.poll div.error {
 495         padding: 1ex;
 496         max-width: 40em;
 497         margin: 2em;
 498         border: 2px solid red;
 499 }
 500
 501 table#playlist {
 502         border-spacing: 1em;
 503         border-collapse: unset;
 504         width: 100%;
 505 }
 506
 507 table#playlist td.playlist-title {
 508         border: 1px outset black;
 509         background: #eee;
 510         text-align: center;
 511         padding: 1ex;
 512         cursor: pointer;
 513         position: relative;
 514 }
 515
 516 table#playlist .shortcut {
 517         position: absolute;
 518         right: 1ex;
 519         font-size: 90%;
 520 }
 521
 522 table#playlist td:last-child {
 523         color: #444;
 524         font-style: italic;
 525 }
 526
 527 .button-done {
 528         opacity: 0.5;
 529 }
 530
 531 table#playlist td.handle {
 532         width: 10px;
 533         color: white;
 534         background: #666;
 535         cursor: grab;
 536 }
 537
 538 body.submitting {
 539         opacity: 0.5;
 540         pointer-events: none;
 541 }
 542
 543 div#content ul.team {
 544         padding: 0;
 545         padding-left: 1ex;
 546         margin: 0;
 547 }
 548
 549 ul.team li {
 550         display: inline;
 551         padding: 0;
 552         margin: 0;
 553 }
 554
 555 ul.team li::after {
 556         content: " / ";
 557 }
 558
 559 div.two-columns.schedule-team {
 560         width: 60%;
 561 }
 562
 563 div.two-columns.schedule-team > div:first-child {
 564         width: 30%;
 565 }
 566
 567 div.two-columns.schedule-team > div:nth-child(2) {
 568         width: 68%;
 569 }
 570
 571 .extra-actions-menu {
 572         display: none;
 573 }
 574
 575 ul.gallery li {
 576         display: inline-block;
 577         position: relative;
 578         padding-bottom: 20px;
 579 }
 580
 581 ul.gallery li span.image-actions {
 582         position: absolute;
 583         bottom: 0;
 584         right: 0;
 585 }
 586
 587 table {
 588         max-width: 100%;
 589         border-collapse: collapse;
 590         border-spacing: 0;
 591 }
 592
 593 .dropdown-menu {
 594         position: absolute;
 595         top: 100%;
 596         left: 0;
 597         z-index: 1000;
 598         display: none;
 599         float: left;
 600         min-width: 160px;
 601         padding: 5px 0;
 602         margin: 2px 0 0;
 603         margin-top: 2px;
 604         font-size: 14px;
 605         list-style: none;
 606         background-color: #ffffff;
 607         border: 1px solid #cccccc;
 608         border: 1px solid rgba(0, 0, 0, 0.15);
 609         border-radius: 4px;
 610         -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 611         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 612         background-clip: padding-box;
 613 }
 614
 615 div#search {
 616         position: absolute;
 617         top: 40px;
 618         right: 10px;
 619 }
 620
 621 select#id_datetime_0, select#id_datetime_1, select#id_datetime_2 {
 622         width: auto;
 623         margin-right: 1em;
 624 }
 625
 626 div.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::after {
 627         content: "×";
 628 }
 629
 630 form#track-search {
 631         display: flex;
 632         align-items: end;
 633         p {
 634                 margin-right: 1em;
 635                 margin-bottom: 0;
 636         }
 637         button {
 638                 height: max-content;
 639                 margin-bottom: 0.2em;
 640         }
 641         margin-bottom: 1em;
 642 }
 643
 644 #more-user-links a {
 645         background: white;
 646         border: 1px solid #386ede;
 647         padding: 1ex;
 648         border-radius: 3px;
 649         font-weight: bold;
 650 }
 651
 652 .home #content .block {
 653         background: white;
 654         padding: 1rem;
 655         margin-bottom: 1rem;
 656         border-radius: 3px;
 657 }
 658
 659 .home #content .block hr {
 660         border-color: white;
 661 }
 662
 663 div#content .block.service-message {
 664         display: none;
 665         margin: 1rem 0;
 666         padding: 0.5rem;
 667
 668         .edit-service-message {
 669                 position: absolute;
 670                 top: 0.5em;
 671                 right: 0.5em;
 672                 z-index: 100;
 673         }
 674
 675         position: relative;
 676         a.close {
 677                 position: absolute;
 678                 top: 0;
 679                 right: 0;
 680                 padding: 0 0.5em;
 681                 text-decoration: none;
 682                 border: none;
 683                 cursor: pointer;
 684                 color: black;
 685                 font-weight: bold;
 686         }
 687
 688         h2:first-child,
 689         h3:first-child {
 690                 margin-bottom: 0;
 691         }
 692 }
 693
 694 .action-see-online {
 695         display: none;
 696 }
 697
 698 .select2-container {
 699         min-width: 90%;
 700 }
 701
 702 .block.program {
 703         ul, li {
 704                 list-style: none;
 705                 margin: 0;
 706                 padding: 0;
 707         }
 708         li.now {
 709                 font-weight: bold;
 710         }
 711 }
 712
 713 .regie-home div#content {
 714         form#login-form {
 715                 padding: 0 1em;
 716                 display: flex;
 717                 align-items: baseline;
 718                 p,
 719                 button {
 720                         margin: 0;
 721                         width: auto;
 722                 }
 723                 input, button {
 724                         margin-right: 1em;
 725                 }
 726         }
 727         h3 {
 728                 margin-bottom: 0;
 729                 a {
 730                         float: right;
 731                         border: none;
 732                         &:hover {
 733                                 font-weight: bold;
 734                         }
 735                 }
 736         }
 737         #clock {
 738                 text-align: center;
 739         }
 740         #hour {
 741                 font-size: 300%;
 742         }
 743         #playing {
 744                 font-size: 200%;
 745                 visibility: hidden;
 746         }
 747         .timer {
 748                 padding-left: 2em;
 749                 font-size: 80%;
 750         }
 751
 752         #tracks {
 753                 ul {
 754                         padding: 0;
 755                         margin: 1em 0;
 756                 }
 757                 li {
 758                         display: flex;
 759                         padding: 0;
 760                         margin: 0;
 761                         margin-bottom: 0.5em;
 762                         audio {
 763                                 width: 50%;
 764                         }
 765                         audio, button, span {
 766                                 margin-right: 1em;
 767                         }
 768                         span {
 769                                 display: block;
 770                                 align-self: center;
 771                         }
 772                         span.handle {
 773                                 cursor: move;
 774                         }
 775                 }
 776         }
 777 }
 778
 779 #add-track-form {
 780         div {
 781                 display: flex;
 782                 input {
 783                         flex: 1;
 784                         margin-right: 1em;
 785                 }
 786         }
 787         ul {
 788                 padding: 0;
 789                 margin: 1em 0;
 790         }
 791         li {
 792                 display: flex;
 793                 padding: 0;
 794                 margin: 0;
 795                 margin-bottom: 0.5em;
 796                 button, span {
 797                         margin-right: 1em;
 798                 }
 799                 span {
 800                         display: block;
 801                         align-self: center;
 802                 }
 803         }
 804 }
 805
 806 #pige {
 807         .row {
 808                 display: flex;
 809                 align-items: baseline;
 810                 justify-content: space-between;
 811         }
 812         label {
 813                 width: 40%;
 814                 display: inline-block;
 815         }
 816         select#src {
 817                 width: 100%;
 818         }
 819         select#start_hour, select#start_min, select#end_hour, select#end_min {
 820                 padding-right: 1em;
 821                 background-image: none;
 822         }
 823 }
 824
 825 .regie-home #switch {
 826         margin-top: 1.5em;
 827         text-align: center;
 828         &.disabled {
 829                 button {
 830                         cursor: not-allowed;
 831                         pointer-events: none;
 832                 }
 833         }
 834         button.active {
 835                 background: #2a567f;
 836                 color: white;
 837         }
 838 }
 839
 840 .nonstop-days {
 841         display: flex;
 842         justify-content: space-between;
 843         > div {
 844                 width: 16%;
 845                 background: white;
 846                 padding: 0.5em 1em;
 847         }
 848 }
 849
 850 #id_start_p {
 851         float: left;
 852         margin-right: 2em;
 853 }
 854
 855 #id_jingles_p,
 856 #id_zones_p,
 857 #id_extra_zones_p {
 858         clear: both;
 859         ul {
 860                 column-width: 15em;
 861         }
 862 }
 863
 864 #content .bo-block.team {
 865         h3, ul.team {
 866                 display: inline-block;
 867                 margin-bottom: 0;
 868         }
 869 }
 870
 871 table#edit-metadata {
 872         th {
 873                 padding: 0 0.6em 1em 0;
 874         }
 875         td {
 876                 padding: 0 1.6em;
 877         }
 878         thead {
 879                 background: white;
 880                 position: sticky;
 881                 top: 0;
 882         }
 883         tr:hover {
 884                 background: #eee;
 885         }
 886         button.play-track {
 887                 padding: 0 0.6em;
 888         }
 889 }
 890
 891 form div[id^="id_weight"] {
 892         display: flex;
 893         align-items: center;
 894         div.title {
 895                 display: inline-block;
 896                 width: 25em;
 897         }
 898         div.content {
 899                 display: inline-flex;
 900         }
 901         margin-bottom: 0.5em;
 902 }
 903
 904 div#content div.section > h3 {
 905         align-items: center;
 906         background: linear-gradient(to right, #386ede 30%, #00d6eb 100%);
 907         color: white;
 908         margin-bottom: 0;
 909 }
 910
 911 body.loading {
 912         cursor: wait;
 913 }
 914
 915 body.loading::before {
 916         content: "";
 917         position: fixed;
 918         top: 0;
 919         left: 0;
 920         right: 0;
 921         height: 10px;
 922         background: #386ede;
 923         z-index: 1100;
 924         animation-name: load_animation;
 925         animation-duration: 1000ms;
 926         animation-timing-function: ease-out;
 927         transition: opacity 500ms linear;
 928 }
 929
 930 @keyframes load_animation {
 931         0% { right: 100%; }
 932         100% { right: 0%; }
 933 }
 934
 935 div.section > div > *:first-child {
 936         margin-top: 0;
 937 }
 938
 939 #id_groups {
 940         list-style: none;
 941         margin-left: 0;
 942         padding-left: 0.6em;
 943         + span.helptext {
 944                 display: none;
 945         }
 946 }
 947
 948 .members-pagination {
 949         display: flex;
 950         justify-content: space-between;
 951         p {
 952                 margin: 4ex 1px;
 953         }
 954 }
 955
 956 #add-track-form.searching {
 957         opacity: 0.5;
 958         button {
 959                 &::before {
 960                         font-family: FontAwesome;
 961                         content: "\f110";
 962                         margin-right: 0.5em;
 963                         display: inline-block;
 964                         animation: spinner_animation 5s linear infinite;
 965                 }
 966         }
 967 }
 968
 969 @keyframes spinner_animation {
 970         from {
 971                 transform: rotate(0deg);
 972         }
 973         to {
 974                 transform: rotate(360deg);
 975         }
 976 }
 977
 978 .register-membership-form {
 979         #id_notes {
 980                 height: 4em;
 981         }
 982 }
 983
 984 .members-filter {
 985         display: flex;
 986         form input {
 987                 margin-top: 0;
 988                 margin-bottom: 0;
 989         }
 990         a.button {
 991                 margin-left: 1em;
 992                 line-height: normal;
 993         }
 994 }
 995
 996 a.button {
 997         display: inline;
 998 }
 999
1000 .search--form {
1001         display: flex;
1002         column-gap: 1em;
1003         input {
1004                 flex: 1;
1005                 margin: 0;
1006         }
1007 }
1008
1009 .search--hits {
1010         display: flex;
1011         column-gap: 1em;
1012         .section {
1013                 flex: 1;
1014                 margin: 0;
1015         }
1016 }