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