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
 419 .icon-circle-arrow-down:after     { content: "  \f0ab"; }
 420 .icon-arrow-left:after            { content: "\f060"; }
 421 .icon-arrow-right:after           { content: "\f061"; }
 422
 423 div#placeholders {
 424         overflow: hidden;
 425 }
 426
 427 div#placeholders h3 {
 428         margin-bottom: 0;
 429         line-height: 100%;
 430         padding: 0.5ex 1ex;
 431 }
 432
 433 body.combo div.select2-container {
 434         width: 100%;
 435 }
 436
 437 body.combo a.view-online {
 438         display: none;
 439 }
 440
 441 div.nonstop-stats h3 span {
 442         font-weight: normal;
 443         font-size: 70%;
 444 }
 445
 446 .objects-list li.disabled {
 447         background: #ddd;
 448         span.tag {
 449                 background: #666;
 450         }
 451 }
 452
 453 div#content div#available-cells ul {
 454         padding: 0;
 455 }
 456
 457 div.poll {
 458         border-radius: 10px;
 459         margin: 0 auto;
 460         text-align: center;
 461         max-width: 30em;
 462         background: #FF7600;
 463         border: 1px solid red;
 464 }
 465
 466 div.poll a {
 467         display: inline-block;
 468         width: 100%;
 469         padding: 3em;
 470         color: white;
 471         font-weight: bold;
 472 }
 473
 474 form.poll img {
 475         margin-left: 1em;
 476         margin-right: 4em;
 477 }
 478
 479 form.poll p {
 480         margin-top: 1em;
 481 }
 482
 483 form.poll textarea {
 484         width: 100%;
 485         max-width: 40em;
 486         height: 10em;
 487 }
 488
 489 form.poll div.buttons {
 490         margin-top: 1em;
 491 }
 492
 493 form.poll div.error {
 494         padding: 1ex;
 495         max-width: 40em;
 496         margin: 2em;
 497         border: 2px solid red;
 498 }
 499
 500 table#playlist {
 501         border-spacing: 1em;
 502         border-collapse: unset;
 503         width: 100%;
 504 }
 505
 506 table#playlist td.playlist-title {
 507         border: 1px outset black;
 508         background: #eee;
 509         text-align: center;
 510         padding: 1ex;
 511         cursor: pointer;
 512         position: relative;
 513 }
 514
 515 table#playlist .shortcut {
 516         position: absolute;
 517         right: 1ex;
 518         font-size: 90%;
 519 }
 520
 521 table#playlist td:last-child {
 522         color: #444;
 523         font-style: italic;
 524 }
 525
 526 .button-done {
 527         opacity: 0.5;
 528 }
 529
 530 table#playlist td.handle {
 531         width: 10px;
 532         color: white;
 533         background: #666;
 534         cursor: grab;
 535 }
 536
 537 body.submitting {
 538         opacity: 0.5;
 539         pointer-events: none;
 540 }
 541
 542 div#content ul.team {
 543         padding: 0;
 544         padding-left: 1ex;
 545         margin: 0;
 546 }
 547
 548 ul.team li {
 549         display: inline;
 550         padding: 0;
 551         margin: 0;
 552 }
 553
 554 ul.team li::after {
 555         content: " / ";
 556 }
 557
 558 div.two-columns.schedule-team {
 559         width: 60%;
 560 }
 561
 562 div.two-columns.schedule-team > div:first-child {
 563         width: 30%;
 564 }
 565
 566 div.two-columns.schedule-team > div:nth-child(2) {
 567         width: 68%;
 568 }
 569
 570 .extra-actions-menu {
 571         display: none;
 572 }
 573
 574 ul.gallery li {
 575         display: inline-block;
 576         position: relative;
 577         padding-bottom: 20px;
 578 }
 579
 580 ul.gallery li span.image-actions {
 581         position: absolute;
 582         bottom: 0;
 583         right: 0;
 584 }
 585
 586 table {
 587         max-width: 100%;
 588         border-collapse: collapse;
 589         border-spacing: 0;
 590 }
 591
 592 .dropdown-menu {
 593         position: absolute;
 594         top: 100%;
 595         left: 0;
 596         z-index: 1000;
 597         display: none;
 598         float: left;
 599         min-width: 160px;
 600         padding: 5px 0;
 601         margin: 2px 0 0;
 602         margin-top: 2px;
 603         font-size: 14px;
 604         list-style: none;
 605         background-color: #ffffff;
 606         border: 1px solid #cccccc;
 607         border: 1px solid rgba(0, 0, 0, 0.15);
 608         border-radius: 4px;
 609         -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 610         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 611         background-clip: padding-box;
 612 }
 613
 614 div#search {
 615         position: absolute;
 616         top: 40px;
 617         right: 10px;
 618 }
 619
 620 select#id_datetime_0, select#id_datetime_1, select#id_datetime_2 {
 621         width: auto;
 622         margin-right: 1em;
 623 }
 624
 625 div.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::after {
 626         content: "×";
 627 }
 628
 629 form#track-search p {
 630         float: left;
 631         margin-right: 1em;
 632 }
 633
 634 form#track-search button {
 635         margin-top: 2.5ex;
 636 }
 637
 638 #more-user-links a {
 639         background: white;
 640         border: 1px solid #386ede;
 641         padding: 1ex;
 642         border-radius: 3px;
 643         font-weight: bold;
 644 }
 645
 646 .home #content .block {
 647         background: white;
 648         padding: 1rem;
 649         margin-bottom: 1rem;
 650         border-radius: 3px;
 651 }
 652
 653 .home #content .block hr {
 654         border-color: white;
 655 }
 656
 657 div#content .block.service-message {
 658         display: none;
 659         margin: 1rem 0;
 660         padding: 0.5rem;
 661
 662         .edit-service-message {
 663                 position: absolute;
 664                 top: 0.5em;
 665                 right: 0.5em;
 666                 z-index: 100;
 667         }
 668
 669         position: relative;
 670         a.close {
 671                 position: absolute;
 672                 top: 0;
 673                 right: 0;
 674                 padding: 0 0.5em;
 675                 text-decoration: none;
 676                 border: none;
 677                 cursor: pointer;
 678                 color: black;
 679                 font-weight: bold;
 680         }
 681
 682         h2:first-child,
 683         h3:first-child {
 684                 margin-bottom: 0;
 685         }
 686 }
 687
 688 .action-see-online {
 689         display: none;
 690 }
 691
 692 .select2-container {
 693         min-width: 90%;
 694 }
 695
 696 .block.program {
 697         ul, li {
 698                 list-style: none;
 699                 margin: 0;
 700                 padding: 0;
 701         }
 702         li.now {
 703                 font-weight: bold;
 704         }
 705 }
 706
 707 .regie-home div#content {
 708         form#login-form {
 709                 padding: 0 1em;
 710                 display: flex;
 711                 align-items: baseline;
 712                 p,
 713                 button {
 714                         margin: 0;
 715                         width: auto;
 716                 }
 717                 input, button {
 718                         margin-right: 1em;
 719                 }
 720         }
 721         h3 {
 722                 margin-bottom: 0;
 723                 a {
 724                         float: right;
 725                         border: none;
 726                         &:hover {
 727                                 font-weight: bold;
 728                         }
 729                 }
 730         }
 731         #clock {
 732                 text-align: center;
 733         }
 734         #hour {
 735                 font-size: 300%;
 736         }
 737         #playing {
 738                 font-size: 200%;
 739                 visibility: hidden;
 740         }
 741         .timer {
 742                 padding-left: 2em;
 743                 font-size: 80%;
 744         }
 745
 746         #tracks {
 747                 ul {
 748                         padding: 0;
 749                         margin: 1em 0;
 750                 }
 751                 li {
 752                         display: flex;
 753                         padding: 0;
 754                         margin: 0;
 755                         margin-bottom: 0.5em;
 756                         audio {
 757                                 width: 50%;
 758                         }
 759                         audio, button, span {
 760                                 margin-right: 1em;
 761                         }
 762                         span {
 763                                 display: block;
 764                                 align-self: center;
 765                         }
 766                         span.handle {
 767                                 cursor: move;
 768                         }
 769                 }
 770         }
 771 }
 772
 773 #add-track-form {
 774         div {
 775                 display: flex;
 776                 input {
 777                         flex: 1;
 778                         margin-right: 1em;
 779                 }
 780         }
 781         ul {
 782                 padding: 0;
 783                 margin: 1em 0;
 784         }
 785         li {
 786                 display: flex;
 787                 padding: 0;
 788                 margin: 0;
 789                 margin-bottom: 0.5em;
 790                 button, span {
 791                         margin-right: 1em;
 792                 }
 793                 span {
 794                         display: block;
 795                         align-self: center;
 796                 }
 797         }
 798 }
 799
 800 #pige {
 801         .row {
 802                 display: flex;
 803                 align-items: baseline;
 804                 justify-content: space-between;
 805         }
 806         label {
 807                 width: 40%;
 808                 display: inline-block;
 809         }
 810         select#src {
 811                 width: 100%;
 812         }
 813         select#start_hour, select#start_min, select#end_hour, select#end_min {
 814                 padding-right: 1em;
 815                 background-image: none;
 816         }
 817 }
 818
 819 .regie-home #switch {
 820         margin-top: 1.5em;
 821         text-align: center;
 822         &.disabled {
 823                 button {
 824                         cursor: not-allowed;
 825                         pointer-events: none;
 826                 }
 827         }
 828         button.active {
 829                 background: #2a567f;
 830                 color: white;
 831         }
 832 }
 833
 834 .nonstop-days {
 835         display: flex;
 836         justify-content: space-between;
 837         > div {
 838                 width: 16%;
 839                 background: white;
 840                 padding: 0.5em 1em;
 841         }
 842 }
 843
 844 #id_start_p {
 845         float: left;
 846         margin-right: 2em;
 847 }
 848
 849 #id_jingles_p,
 850 #id_zones_p,
 851 #id_extra_zones_p {
 852         clear: both;
 853         ul {
 854                 column-width: 15em;
 855         }
 856 }
 857
 858 #content .bo-block.team {
 859         h3, ul.team {
 860                 display: inline-block;
 861                 margin-bottom: 0;
 862         }
 863 }
 864
 865 table#edit-metadata {
 866         th {
 867                 padding: 0 0.6em 1em 0;
 868         }
 869         td {
 870                 padding: 0 1.6em;
 871         }
 872         thead {
 873                 background: white;
 874                 position: sticky;
 875                 top: 0;
 876         }
 877         tr:hover {
 878                 background: #eee;
 879         }
 880         button.play-track {
 881                 padding: 0 0.6em;
 882         }
 883 }
 884
 885 form div[id^="id_weight"] {
 886         display: flex;
 887         align-items: center;
 888         div.title {
 889                 display: inline-block;
 890                 width: 25em;
 891         }
 892         div.content {
 893                 display: inline-flex;
 894         }
 895         margin-bottom: 0.5em;
 896 }
 897
 898 div#content div.section > h3 {
 899         align-items: center;
 900         background: linear-gradient(to right, #386ede 30%, #00d6eb 100%);
 901         color: white;
 902         margin-bottom: 0;
 903 }
 904
 905 body.loading {
 906         cursor: wait;
 907 }
 908
 909 body.loading::before {
 910         content: "";
 911         position: fixed;
 912         top: 0;
 913         left: 0;
 914         right: 0;
 915         height: 10px;
 916         background: #386ede;
 917         z-index: 1100;
 918         animation-name: load_animation;
 919         animation-duration: 1000ms;
 920         animation-timing-function: ease-out;
 921         transition: opacity 500ms linear;
 922 }
 923
 924 @keyframes load_animation {
 925         0% { right: 100%; }
 926         100% { right: 0%; }
 927 }
 928
 929 div.section > div > *:first-child {
 930         margin-top: 0;
 931 }
 932
 933 #id_groups {
 934         list-style: none;
 935         margin-left: 0;
 936         padding-left: 0.6em;
 937         + span.helptext {
 938                 display: none;
 939         }
 940 }
 941
 942 .members-pagination {
 943         display: flex;
 944         justify-content: space-between;
 945         p {
 946                 margin: 4ex 1px;
 947         }
 948 }
 949
 950 #add-track-form.searching {
 951         opacity: 0.5;
 952         button {
 953                 &::before {
 954                         font-family: FontAwesome;
 955                         content: "\f110";
 956                         margin-right: 0.5em;
 957                         display: inline-block;
 958                         animation: spinner_animation 5s linear infinite;
 959                 }
 960         }
 961 }
 962
 963 @keyframes spinner_animation {
 964         from {
 965                 transform: rotate(0deg);
 966         }
 967         to {
 968                 transform: rotate(360deg);
 969         }
 970 }
 971
 972 .register-membership-form {
 973         #id_notes {
 974                 height: 4em;
 975         }
 976 }
 977
 978 .members-filter {
 979         display: flex;
 980         form input {
 981                 margin-top: 0;
 982                 margin-bottom: 0;
 983         }
 984         a.button {
 985                 margin-left: 1em;
 986                 line-height: normal;
 987         }
 988 }
 989
 990 a.button {
 991         display: inline;
 992 }
 993
 994 .search--form {
 995         display: flex;
 996         column-gap: 1em;
 997         input {
 998                 flex: 1;
 999                 margin: 0;
1000         }
1001 }
1002
1003 .search--hits {
1004         display: flex;
1005         column-gap: 1em;
1006         .section {
1007                 flex: 1;
1008                 margin: 0;
1009         }
1010 }