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