panikweb_studioneau/static/css/style.scss

   1 $width: 1400px;
   2 $inner-width: 920px;
   3 $header-height: 130px;
   4 $mobile-header-height: 100px;
   5 $font-size-title: 26px;
   6 $font-size-subtitle: 20px;
   7 $nav-button-background: white;
   8 $nav-button-color: black;
   9 $nav-button-side: 35px;
  10
  11 @font-face {
  12         font-family: 'FontAwesome';
  13         src: url('../xstatic/fonts/fontawesome-webfont.eot');
  14         src: url('../xstatic/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
  15              url('../xstatic/fonts/fontawesome-webfont.woff') format('woff'),
  16              url('../xstatic/fonts/fontawesome-webfont.ttf') format('truetype'),
  17              url('../xstatic/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  18         font-weight: normal;
  19         font-style: normal;
  20 }
  21
  22 %hero-height {
  23         height: 100vh;
  24         height: calc(100vh - #{$header-height});
  25         @media screen and (max-width: 600px) {
  26                 height: calc(100vh - #{$mobile-header-height});
  27         }
  28 }
  29
  30 %hero-width {
  31         max-width: none;
  32         @media screen and (max-width: $inner-width) {
  33                 padding-left: 0;
  34                 padding-right: 0;
  35         }
  36 }
  37
  38 %button {
  39         text-decoration: none;
  40         display: inline-block;
  41         border: 2px solid black;
  42         font-weight: bold;
  43         text-transform: uppercase;
  44         text-decoration: none;
  45         color: black;
  46         background: white;
  47         &:hover {
  48                 background: black;
  49                 color: white;
  50         }
  51         &:focus-visible {
  52                 outline: 2px solid black;
  53                 outline-offset: 1px;
  54         }
  55 }
  56
  57 html, body {
  58         margin: 0;
  59         padding: 0;
  60         font-family: Helvetica, sans-serif;
  61         background: white;
  62         color: #222222;
  63 }
  64
  65 a {
  66         text-decoration: none;
  67         color: inherit;
  68         &:hover {
  69                 color: #444;
  70         }
  71 }
  72
  73 ul, li {
  74         margin: 0;
  75         padding: 0;
  76         list-style: none;
  77 }
  78
  79 p {
  80         overflow-wrap: break-word;
  81         word-break: break-word;
  82         line-height: 1.4;
  83 }
  84
  85 #All {
  86         background: white;
  87         max-width: $width;
  88         margin: 0 auto;
  89         position: relative;
  90 }
  91
  92 #metaNav {
  93         position: absolute;
  94         top: 16px;
  95         right: 20px;
  96         height: 30px;
  97         nav {
  98                 display: flex;
  99                 line-height: 60px;
 100                 ul.platforms {
 101                         line-height: 32px;
 102                         margin-top: 2px;
 103                         margin-right: 10px;
 104                         @media screen and (max-width: 600px) {
 105                                 display: none;
 106                         }
 107                 }
 108                 ul#nav-language {
 109                         display: flex;
 110                         li {
 111                                 margin-right: 1em;
 112                                 span {
 113                                         cursor: pointer;
 114                                 }
 115                         }
 116                         .lang-on {
 117                                 text-decoration: underline;
 118                         }
 119                 }
 120                 button#chat-button {
 121                         background: none;
 122                         cursor: pointer;
 123                         border: none;
 124                         font-size: 100%;
 125                         font-weight: bold;
 126                         margin-right: 2em;
 127                         @media screen and (max-width: 600px) {
 128                                 margin-right: 1em;
 129                         }
 130                         &.icon-check {
 131                                 background: black;
 132                                 color: white;
 133                         }
 134                 }
 135                 button#opener {
 136                         cursor: pointer;
 137                         background: none;
 138                         border: none;
 139                         display: block;
 140                         z-index: 200;
 141                         position: relative;
 142                         width: calc(#{$nav-button-side} + 2px);
 143                         height: $nav-button-side;
 144                         padding: 0;
 145                         margin: 0;
 146                         background: $nav-button-background;
 147                         transition: all 0.25s ease;
 148                         border: 0;
 149                         & .icon-bar {
 150                                 position: absolute;
 151                                 left: 17%;
 152                                 width: 66%;
 153                                 margin: 0;
 154                                 border: 2px solid $nav-button-color;
 155                                 background: $nav-button-color;
 156                                 transition: all 0.25s ease;
 157                         }
 158                         & .icon-bar-1 {
 159                                 top: 25%;
 160                         }
 161                         & .icon-bar-2 {
 162                                 top: 50%;
 163                         }
 164                         & .icon-bar-3 {
 165                                 top: 75%;
 166                         }
 167                         &.toggled {
 168                                 & .icon-bar-1 {
 169                                         top: 50%;
 170                                         transform: rotate(45deg);
 171                                 }
 172                                 & .icon-bar-2 {
 173                                         opacity: 0;
 174                                 }
 175                                 & .icon-bar-3 {
 176                                         top: 50%;
 177                                         transform: rotate(-45deg);
 178                                 }
 179                         }
 180                 }
 181                 #extra-menu {
 182                         position: absolute;
 183                         display: none;
 184                         background: white;
 185                         text-align: right;
 186                         right: -20px;
 187                         top: 50px;
 188                         width: 200px;
 189                         z-index: 10000;
 190                         padding: 1em;
 191                         li {
 192                                 line-height: 1.5em;
 193                                 font-size: 1.3em;
 194                                 font-weight: bold;
 195                                 a {
 196                                         display: block;
 197                                 }
 198                         }
 199                         ul + ul {
 200                                 margin-top: 1em;
 201                         }
 202                 }
 203         }
 204 }
 205
 206 #mainHeader {
 207         display: block;
 208         max-width: 1000px;
 209         margin: 0 auto;
 210 }
 211
 212 #logo {
 213         display: block;
 214         width: 155px;
 215         height: $header-height;
 216         background: white url(studio-neau-logo.png) bottom left no-repeat;
 217         text-indent: -10000px;
 218         margin: 0 auto;
 219         @media screen and (max-width: 600px) {
 220                 height: $mobile-header-height;
 221                 background-size: 50%;
 222                 background-position: center 10px;
 223         }
 224 }
 225
 226 #Player {
 227         position: absolute;
 228         top: 0;
 229         left: 0;
 230 }
 231
 232 #focus {
 233         @extend %hero-width;
 234         position: relative;
 235         button {
 236                 position: absolute;
 237                 cursor: pointer;
 238                 top: calc(50% - 50px);
 239                 z-index: 100;
 240                 color: white;
 241                 background: rgba(0, 0, 0, 0.1);
 242                 font-size: 40px;
 243                 border: none;
 244                 width: 100px;
 245                 height: 100px;
 246                 &#prev {
 247                         left: 10px;
 248                         &::before {
 249                                 font-family: FontAwesome;
 250                                 content: "\f053";
 251                         }
 252                 }
 253                 &#next {
 254                         right: 10px;
 255                         &::before {
 256                                 font-family: FontAwesome;
 257                                 content: "\f054";
 258                         }
 259                 }
 260         }
 261         @extend %hero-height;
 262         overflow: hidden;
 263         .item {
 264                 width: 100%;
 265                 position: relative;
 266                 &.transition {
 267                         position: absolute;
 268                         z-index: 90;
 269                         transition: opacity ease-out 1s;
 270                         opacity: 1;
 271                         &.faded {
 272                                 opacity: 0;
 273                         }
 274                 }
 275                 .img {
 276                         background-position: center;
 277                         background-size: cover;
 278                         background-repeat: no-repeat;
 279                         @extend %hero-height;
 280                 }
 281                 .infos {
 282                         position: absolute;
 283                         box-sizing: border-box;
 284                         bottom: 0;
 285                         left: 25%;
 286                         width: 50%;
 287                         @media screen and (max-width: 600px) {
 288                                 left: 10%;
 289                                 width: 80%;
 290                         }
 291                         padding: 10px 20px;
 292                         background: white;
 293                         height: 100px;
 294                         @media screen and (max-width: 600px) {
 295                                 .tags-will-be-here {
 296                                         display: none;
 297                                 }
 298                         }
 299                         .title {
 300                                 display: block;
 301                                 width: 100%;
 302                                 font-size: $font-size-title;
 303                                 font-weight: bold;
 304                         }
 305                 }
 306         }
 307 }
 308
 309 h2 {
 310         border-top: 2px ridge black;
 311         border-bottom: 2px ridge black;
 312         padding: 0.9em 0 0.6em 0;
 313         margin: 1rem 0;
 314 }
 315
 316 #footer, .main > div {
 317         max-width: $inner-width;
 318         margin: 0 auto;
 319         @media screen and (max-width: #{$inner-width + 30px}) {
 320                 padding: 0 1rem;
 321                 font-size: 90%;
 322         }
 323 }
 324
 325 div.program.tabs {
 326         nav ul {
 327                 display: flex;
 328                 list-style: none;
 329                 margin: 1rem 0;
 330                 padding: 0;
 331                 justify-content: space-around;
 332                 li {
 333                         margin: 0;
 334                         padding: 0;
 335                         &.week-arrow {
 336                                 width: 30px;
 337                         }
 338                 }
 339                 button {
 340                         @extend %button;
 341                         font-size: 24px;
 342                         text-transform: capitalize;
 343                         &[disabled] {
 344                                 color: #aaa;
 345                                 border: 2px solid #aaa;
 346                                 cursor: not-allowed;
 347                                 &.active {
 348                                         outline: 2px solid black;
 349                                         background: white;
 350                                 }
 351                         }
 352                 }
 353                 @media screen and (max-width: 600px) {
 354                         li {
 355                                 button {
 356                                         font-size: 14px;
 357                                         border-right: 0;
 358                                 }
 359                                 &.weektab-7 button {
 360                                         border-right: 2px solid black;
 361                                 }
 362                         }
 363                 }
 364
 365                 a.icon-chevron-sign-right,
 366                 a.icon-chevron-sign-left {
 367                         font-family: 'FontAwesome';
 368                         color: inherit;
 369                         text-decoration: none;
 370                         line-height: 36px;
 371                         &.icon-chevron-sign-left::before {
 372                                 content: "\f053";
 373                         }
 374                         &.icon-chevron-sign-right::before {
 375                                 content: "\f054";
 376                         }
 377                 }
 378                 li.week-arrow-next {
 379                         text-align: right;
 380                 }
 381         }
 382 }
 383
 384 ul.program-week {
 385         list-style: none;
 386         margin: 0;
 387         margin-top: 10px;
 388         padding: 0;
 389         border-bottom: 2px ridge black;
 390         margin-bottom: 6em;
 391         li {
 392                 border-top: 2px ridge black;
 393                 padding: 0.7em 0 0.5em 0;
 394                 &.past {
 395                         color: #bbbbbb;
 396                 }
 397                 &.current .programCellTitle {
 398                         font-weight: bold;
 399                 }
 400                 a {
 401                         display: flex;
 402                         .programDate {
 403                                 width: 8em;
 404                         }
 405                         .programCellTitle {
 406                                 margin-left: 1em;
 407                                 flex: 1;
 408                         }
 409                         .programCellSubtitle {
 410                                 flex: 1;
 411                         }
 412                 }
 413         }
 414 }
 415
 416 ul.main-flex,
 417 ul.collection {
 418         margin: 0;
 419         padding: 0;
 420         list-style: none;
 421         display: flex;
 422         flex-wrap: wrap;
 423         justify-content: space-between;
 424         li {
 425                 margin: 0;
 426                 padding: 0;
 427                 width: 32%;
 428                 @media screen and (max-width: 600px) {
 429                         width: 49%;
 430                 }
 431                 .image {
 432                         height: 200px;
 433                         background-color: #ccc;
 434                         background-position: center;
 435                         background-size: cover;
 436                         background-repeat: no-repeat;
 437                 }
 438                 .tags {
 439                         margin-top: 0.8em;
 440                         margin-bottom: 0px;
 441                         font-size: 80%;
 442                 }
 443                 h3 {
 444                         margin-top: 0.2em;
 445                         a {
 446                                 display: block;
 447                                 text-decoration: none;
 448                                 color: inherit;
 449                                 background: url(link.png) bottom left no-repeat;
 450                                 padding-bottom: 30px;
 451                         }
 452                 }
 453         }
 454 }
 455
 456 .episodes ul.collection h3 a {
 457         background: none;
 458         padding-bottom: 0;
 459         span.diffusion-date {
 460                 display: block;
 461                 font-weight: normal;
 462                 font-size: 14px;
 463                 padding-top: 3px;
 464         }
 465 }
 466
 467 .tags {
 468         margin-bottom: 10px;
 469         a {
 470                 text-transform: uppercase;
 471                 color: inherit;
 472                 text-decoration: underline;
 473                 display: inline-block;
 474                 margin-right: 0.6em;
 475         }
 476         &:empty:after {
 477                 content: " ";
 478         }
 479 }
 480
 481 h1 + .tags {
 482         margin-top: -0.7rem;
 483 }
 484
 485 .mehr-button {
 486         margin: 0 auto 4em auto;
 487         text-align: center;
 488         a {
 489                 @extend %button;
 490                 font-size: 24px;
 491                 padding: 0.2em 0.2em 0 0.2em;
 492                 &:active {
 493                         animation: rotating-borders 2s infinite;
 494                 }
 495         }
 496 }
 497
 498 #footer {
 499         border-top: 2px ridge black;
 500         margin-top: 4em;
 501         padding-top: 2em;
 502         nav {
 503                 display: flex;
 504                 background: url(logo-label.png) top left no-repeat;
 505                 justify-content: flex-end;
 506                 min-height: 160px;
 507                 line-height: 1.2em;
 508                 font-weight: bold;
 509                 ul {
 510                         width: 25%;
 511                         list-style: none;
 512                         margin: 0;
 513                         padding: 0;
 514                 }
 515                 @media screen and (max-width: #{$inner-width + 30px}) {
 516                         margin-top: 1em;
 517                 }
 518                 @media screen and (max-width: 600px) {
 519                         background-position: bottom 1em left 0;
 520                         flex-wrap: wrap;
 521                         ul {
 522                                 width: 70%;
 523                                 text-align: right;
 524                                 margin-bottom: 1em;
 525                                 a {
 526                                         display: inline-block;
 527                                         height: 1.7em;
 528                                 }
 529                         }
 530                 }
 531         }
 532 }
 533
 534 ul.platforms {
 535         text-align: right;
 536         li a {
 537                 display: inline-block;
 538                 text-align: center;
 539                 border: 1px solid black;
 540                 width: 2rem;
 541                 height: 2rem;
 542                 &::before {
 543                         line-height: 2rem;
 544                 }
 545         }
 546         li:last-child {
 547                 margin-right: 0;
 548         }
 549 }
 550
 551
 552 @keyframes live-pulse {
 553         0% {opacity: 1;}
 554         50% {opacity: .1;}
 555 }
 556
 557 @keyframes rotating-borders {
 558         0%  {border-left-color: white;}
 559         25% {border-top-color: white;}
 560         50% {border-right-color: white;}
 561         75% {border-bottom-color: white;}
 562 }
 563
 564 #audioPlayer {
 565         margin-top: 1em;
 566         margin-left: 20px;
 567         audio {
 568                 display: none;
 569         }
 570         font-size: 120%;
 571         #streamSymbol {
 572                 border-radius: 100%;
 573                 background: #fe0000;
 574                 width: 16px;
 575                 height: 16px;
 576                 display: inline-block;
 577                 cursor: pointer;
 578                 animation: live-pulse 2s infinite steps(10);
 579                 will-change: opacity;
 580         }
 581         .label {
 582                 cursor: pointer;
 583                 display: inline-block;
 584                 border: 2px solid black;
 585                 text-transform: uppercase;
 586                 font-weight: bold;
 587                 padding: 5px 9px 0 5px;
 588                 &::before {
 589                         font-family: FontAwesome;
 590                         content: "\f04b";
 591                         padding-right: 0.5em;
 592                         display: inline-block;
 593                         width: 16px;
 594                 }
 595         }
 596         #streamSymbol.icon-stop + .label::before,
 597         #streamSymbol.icon-pause + .label::before {
 598                 content: "\f04d";
 599         }
 600         #CurrentlyPlaying {
 601                 margin-top: 1em;
 602                 font-size: 75%;
 603                 @media screen and (max-width: 600px) {
 604                         margin-top: 1.7em;
 605                 }
 606         }
 607         #WhatsOnAir {
 608                 display: block;
 609                 white-space: pre;
 610                 overflow: hidden;
 611                 text-overflow: ellipsis;
 612                 max-width: calc(100vw - 2em);
 613         }
 614 }
 615
 616 .onair--nonstop-span {
 617         display: none;
 618         & + .onair--nonstop-track-separator {
 619                 display: none;
 620         }
 621 }
 622
 623 .nothing-playing {
 624         #Player {
 625                 opacity: 0.2;
 626                 pointer-events: none;
 627                 #streamSymbol {
 628                         background: #666;
 629                         animation: none;
 630                         cursor: not-allowed;
 631                 }
 632                 .label {
 633                         cursor: not-allowed;
 634                         &::before {
 635                                 content: "\f026";  // volume-off
 636                         }
 637                 }
 638         }
 639         #chat-button {
 640                 opacity: 0.2;
 641                 pointer-events: none;
 642         }
 643 }
 644
 645 #hero {
 646         @extend %hero-width;
 647         .img {
 648                 background-position: center;
 649                 background-size: cover;
 650                 background-repeat: no-repeat;
 651                 display: block;
 652                 @extend %hero-height;
 653         }
 654         margin-bottom: 2em;
 655 }
 656
 657 .inner-page {
 658         h1 {
 659                 margin-top: 0;
 660                 margin-bottom: 1.1rem;
 661                 font-size: $font-size-title;
 662                 font-weight: bold;
 663         }
 664         .diffusions {
 665                 margin: 0;
 666         }
 667 }
 668
 669 .innest-page {
 670         position: relative;
 671         width: 80%;
 672         max-width: 700px;
 673         box-sizing: border-box;
 674         margin: 0 auto;
 675         margin-top: 2em;
 676         background: white;
 677         padding: 10px 20px;
 678
 679         @media screen and (max-width: 600px) {
 680                 div.episode-text, div.emission-text, div.bottom-line, div.main-sound, div.more-text {
 681                         /* use more width */
 682                         margin-left: -3em;
 683                         margin-right: -3em;
 684                 }
 685                 div.emission-text {
 686                         margin-top: 4em;
 687                 }
 688                 h1.with-subtitle + div.emission-text {
 689                         /* subtitle -> less margin */
 690                         margin-top: 2em;
 691                 }
 692         }
 693 }
 694
 695 #hero + .inner-page .innest-page {
 696         margin-top: calc(-2em - 100px);
 697 }
 698
 699 .other-emissions {
 700         margin-top: 6em;
 701         border-top: 2px ridge black;
 702         padding-top: 2em;
 703 }
 704
 705 #tag-items h2 {
 706         text-transform: uppercase;
 707 }
 708
 709 #tags ul {
 710         display: flex;
 711         flex-wrap: wrap;
 712         li a {
 713                 @extend %button;
 714                 font-size: 20px;
 715                 padding: 0.2em 0.2em 0 0.2em;
 716                 margin-bottom: 1em;
 717         }
 718 }
 719
 720 a.back {
 721         position: absolute;
 722         right: 20px;
 723         top: 10px;
 724         background: url(back-to-emission.png) top left no-repeat;
 725         width: 50px;
 726         height: 49px;
 727         overflow: hidden;
 728         text-indent: -1000px;
 729 }
 730
 731 .program-page-top {
 732         padding-top: 2em;
 733 }
 734
 735 .event {
 736         width: 100%;
 737         display: flex;
 738         min-height: 200px;
 739         margin-bottom: 20px;
 740         @media screen and (max-width: 600px) {
 741                 flex-direction: column;
 742         }
 743         .image {
 744                 flex: 1;
 745                 margin-right: 10px;
 746                 height: 200px;
 747                 background-color: #ccc;
 748                 background-position: center;
 749                 background-size: cover;
 750                 background-repeat: no-repeat;
 751                 @media screen and (max-width: 600px) {
 752                         width: 100%;
 753                         flex: auto;
 754                         margin-right: 0;
 755                         margin-bottom: 10px;
 756                 }
 757         }
 758         .info {
 759                 flex: 2;
 760                 h3 {
 761                         margin: 0;
 762                         font-size: $font-size-title;
 763                 }
 764                 h4 {
 765                         margin: 0;
 766                         font-size: $font-size-subtitle;
 767                 }
 768         }
 769 }
 770
 771 .sr-only {
 772         position: absolute !important;
 773         width: 1px !important;
 774         height: 1px !important;
 775         padding: 0 !important;
 776         margin: -1px !important;
 777         overflow: hidden !important;
 778         clip: rect(0, 0, 0, 0) !important;
 779         white-space: nowrap !important;
 780         border: 0 !important;
 781 }
 782
 783 .urls {
 784         margin: 2em 0 0 0;
 785 }
 786
 787 .platforms li,
 788 .urls li {
 789         display: inline-block;
 790         margin-right: 1ex;
 791         a {
 792                 &::before {
 793                         font-family: FontAwesome;
 794                         content: "\f0ac";
 795                         width: 1.5em;
 796                         height: 1.5em;
 797                         line-height: 1.5em;
 798                         display: inline-block;
 799                         text-align: center;
 800                 }
 801         }
 802         a span {
 803                 @extend .sr-only;
 804         }
 805         &.facebook a::before { content: "\f09a"; }
 806         &.twitter a::before { content: "\f099"; }
 807         &.instagram a::before { content: "\f16d"; }
 808         &.twitch a::before { content: "\f1e8"; }
 809         &.youtube a::before { content: "\f16a"; }
 810         &.soundcloud a::before { content: "\f1be"; }
 811         &.mixcloud a::before { content: "\f289"; }
 812         &.bandcamp a::before { content: "\f2d5"; }
 813         &.whatsapp a::before { content: "\f232"; }
 814 }
 815
 816 .main-sound {
 817         margin: 1em 0;
 818 }
 819
 820 .bottom-line {
 821         display: flex;
 822         justify-content: space-between;
 823         position: relative;
 824         .share {
 825                 .share-label {
 826                         background: white;
 827                         cursor: pointer;
 828                         border: 2px solid black;
 829                         font-weight: bold;
 830                         width: 4rem;
 831                         &.icon-check {
 832                                 background: black;
 833                                 color: white;
 834                         }
 835                 }
 836                 ul {
 837                         display: none;
 838                         width: 4rem;
 839                         text-align: center;
 840                         background: white;
 841                         position: absolute;
 842                         bottom: 1.7em;
 843                         li {
 844                                 margin-right: 0;
 845                                 width: 4rem;
 846                                 a {
 847                                         height: auto;
 848                                         width: auto;
 849                                         display: block;
 850                                         margin-right: 0;
 851                                         &::before {
 852                                                 padding: 3px;
 853                                         }
 854                                 }
 855                         }
 856                 }
 857         }
 858 }
 859
 860 #chat-window {
 861         box-sizing: border-box;
 862         box-shadow: 0 0px 10px 5px #333;
 863         display: flex;
 864         position: fixed;
 865         z-index: 1000;
 866         padding: 1em;
 867         top: 80px;
 868         right: 0px;
 869         width: 500px;
 870         height: calc(100vh - 80px);
 871         @media screen and (max-width: 600px) {
 872                 width: auto;
 873                 left: 0;
 874                 top: 100px;
 875                 height: calc(100vh - 100px);
 876         }
 877         background: white;
 878         display: flex;
 879         flex-direction: column;
 880         justify-content: flex-end;
 881         .nick {
 882                 position: absolute;
 883                 top: 0;
 884                 right: 0;
 885                 left: 0;
 886                 bottom: 0;
 887                 display: flex;
 888                 flex-direction: column;
 889                 justify-content: center;
 890                 * {
 891                         margin: 0.5em 5rem;
 892                         font-size: 18px;
 893                 }
 894         }
 895         button {
 896                 border: 2px solid black;
 897                 font-weight: bold;
 898                 text-transform: uppercase;
 899         }
 900         .commands {
 901                 display: flex;
 902                 align-items: baseline;
 903                 flex-wrap: wrap;
 904                 span.prompt {
 905                         overflow: hidden;
 906                         text-overflow: ellipsis;
 907                         width: 100%;
 908                 }
 909                 span, input {
 910                         margin-right: 1em;
 911                 }
 912                 input {
 913                         flex: 1;
 914                         font-size: 100%;
 915                         border: 1px solid black;
 916                 }
 917         }
 918         .moderation + .commands span.prompt::after {
 919                 content: " ✅";
 920         }
 921         #chat {
 922                 display: flex;
 923                 flex: 1;
 924                 margin-bottom: 1em;
 925                 flex-direction: column-reverse;
 926                 overflow: hidden;
 927
 928                 div.msg {
 929                         position: relative;
 930                         margin-bottom: 1ex;
 931                         transition: opacity 1s ease;
 932                         display: flex;
 933                         flex-direction: column;
 934                         border: 1px solid black;
 935                         border-radius: 10px;
 936                         padding: 5px;
 937                         &.new {
 938                                 opacity: 0;
 939                         }
 940                         &.msg-out span.content {
 941                                 font-size: 90%;
 942                                 color: #444;
 943                         }
 944                         &.info {
 945                                 border: none;
 946                                 span.content {
 947                                         padding-left: 1rem;
 948                                         font-style: italic;
 949                                         color: #666;
 950                                 }
 951                         }
 952                         &.info.joined {
 953                                 display: none;
 954                         }
 955
 956                         span.content {
 957                                 display: block;
 958                         }
 959
 960                         span.from {
 961                                 order: 1;
 962                                 padding-top: 3px;
 963                                 display: inline-block;
 964                                 max-width: 10em;
 965                                 overflow: hidden;
 966                                 text-overflow: ellipsis;
 967                                 color: #888;
 968                                 font-size: 80%;
 969                         }
 970
 971                 }
 972
 973                 &.moderation div.msg {
 974                         span.from {
 975                                 cursor: pointer;
 976                         }
 977                 }
 978
 979         }
 980 }
 981
 982 .leaflet-container .leaflet-control-attribution a {
 983         color: black;
 984         font-weight: bold;
 985 }
 986
 987 #grid {
 988         @media screen and (max-width: 600px) {
 989                 max-width: 100%;
 990                 overflow-x: scroll;
 991         }
 992 }
 993
 994 .calendar-weeks table,
 995 #grid > table {
 996         width: 100%;
 997         min-width: 800px;
 998         table-layout: fixed;
 999         border-collapse: collapse;
1000         border-spacing: 0;
1001         border: 2px solid white;
1002         background: repeating-linear-gradient(45deg, white 0px, white 40px, black 40px, black 80px);
1003         td, th {
1004                 border-spacing: 0;
1005                 border-collapse: collapse;
1006                 vertical-align: middle;
1007         }
1008         th {
1009                 border: 2px solid black;
1010         }
1011         th.day {
1012                 padding: 0.8em 0 0.5em 0;
1013                 text-transform: uppercase;
1014                 background: white;
1015         }
1016         td.corner,
1017         th.corner,
1018         th.heure {
1019                 font-weight: normal;
1020                 font-size: 80%;
1021                 border: none;
1022         }
1023         td.cell {
1024                 border: 2px solid black;
1025                 border-color: black;
1026                 text-align: center;
1027                 padding: 0.5em;
1028                 background: white;
1029                 &.empty,
1030                 &.nonstop {
1031                         padding: 0.1em;
1032                         border: none;
1033                         background: transparent;
1034                 }
1035                 span {
1036                         word-break: normal;
1037                         overflow-wrap: break-word;
1038                         overflow-wrap: anywhere;
1039                         -webkit-hyphens: auto;
1040                         hyphens: auto;
1041                 }
1042         }
1043         td.sidebug {
1044                 width: 0;
1045         }
1046         .time-label, .week-no-string {
1047                 font-size: 80%;
1048         }
1049 }
1050
1051 #grid > table {
1052         margin-top: 2em;
1053         td.corner,
1054         th.heure {
1055                 display: none;
1056         }
1057 }
1058
1059 .calendar-weeks {
1060         h3 {
1061                 margin-top: 2em;
1062                 margin-bottom: 0;
1063         }
1064         table {
1065                 margin-top: 0.5em;
1066         }
1067 }
1068
1069 #subscribe-form {
1070         display: flex;
1071         input {
1072                 margin-right: 1em;
1073                 &:focus-visible {
1074                         outline: 2px solid black;
1075                         outline-offset: 1px;
1076                 }
1077         }
1078         input, button {
1079                 font-size: 20px;
1080                 padding: 2px;
1081         }
1082         input {
1083                 border: 2px solid transparent;
1084                 border-bottom: 2px ridge black;
1085                 width: 20em;
1086                 max-width: 100%;
1087         }
1088         button {
1089                 @extend %button;
1090                 padding: 0.2em 0.2em 0.2em 0.2em;
1091                 text-decoration: none;
1092         }
1093         &.error {
1094                 input,
1095                 button {
1096                         border-color: red;
1097                 }
1098         }
1099         @media screen and (max-width: 600px) {
1100                 flex-direction: column;
1101                 input {
1102                         width: calc(100% - 0.5rem);
1103                         margin: 0;
1104                         margin-bottom: 10px;
1105                 }
1106         }
1107 }
1108
1109 #CurrentlyChatting {
1110         display: none;
1111 }
1112
1113 /* disable tags for now, add fake <div> for layout purpose */
1114 .tags-will-be-here {
1115         height: 0.5em;
1116 }
1117
1118 .emission-title-and-date {
1119         display: flex;
1120         justify-content: space-between;
1121         .emission-date {
1122                 font-weight: normal;
1123                 font-size: 80%;
1124         }
1125 }