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