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