LiveFFN by MaelFr

/* ==UserStyle==
@name           liveffn.com
@namespace      github.com/openstyles/stylus
@version        1.6.2
@description    Responsive stylesheet, use an extension to add meta viewport tag
@author         MaelFr
==/UserStyle== */
@-moz-document domain("liveffn.com") {
  @media(max-width: 600px) {
    :root {
      color-scheme: dark light;
    }

    * {
      box-sizing: border-box;
      float: unset !important;
      /*
      width: unset !important;
      height: unset !important;
      */
    }
    html,
    body,
    #global {
      min-height: 100vh;
      width: 100vw;
    }
  
    #global {
      padding: 0.5rem;
      @media (prefers-color-scheme: dark) {
        background-color: #111
      }
    }
  }
}

@-moz-document url-prefix("https://www.liveffn.com/cgi-bin/liste_live.php") {
  @media(max-width: 600px) {
    #tetiere,
    [name="tetiereLien"],
    .lienHeader,
    .clear {
      display: none !important;
    }

    #containeur_filtre_niveau {
      margin: unset;
      margin-block-end: 1rem;
      display: flex;
      justify-content: space-evenly;
      gap: 1rem;

      div {
        margin: unset;
      }
    }

    div[class*=containeur_] {
      width: unset;
      display: grid;
      margin: unset;
      margin-block-end: 1rem;
      padding: 0.5rem;
      grid-template:
        "date   date" auto
        "visuel informations" auto
        "label  label" auto / auto 1fr;
      gap: 0.5rem;
      [class*=date] {
        grid-area: date;
        margin: unset;
      }
      .visuel_img {
        grid-area: visuel;
      }
      .information_box {
        grid-area: informations;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: unset;
        [class*=competition_nom] {
          margin: unset;
        }
      }
      [class*=libelle_niveau] {
        grid-area: label;
        margin: unset;
        padding: 0.5rem;
      }
    }
  }
}

@-moz-document url-prefix("https://www.liveffn.com/cgi-bin/index.php?competition="), url-prefix("https://www.liveffn.com/cgi-bin/programme.php?competition="), url-prefix("https://www.liveffn.com/cgi-bin/startlist.php"), url-prefix("https://www.liveffn.com/cgi-bin/resultats.php?competition="), url-prefix("https://www.liveffn.com/cgi-bin/live_contenaire.php?competition="), url-prefix("https://www.liveffn.com/cgi-bin/news.php?competition=") {
  @media (max-width: 600px) {
    #global {
      background-image: unset;
      background-color: light-dark(#F7F7F0, #111);
      color: light-dark(#111, #F7F7F0);
      display: flex;
      flex-direction: column;
      gap: 1rem;
      #footer {
        margin-block-start: auto;
      }
    }
    .spacer {
      display: none;
    }

    /* Header */
    #header {
      background-image: none;
      height: unset;
      display: grid;
      grid-template:
        "retour avertissement"
        "lieu lieu"
        "titre titre"
        "date date" auto / 1fr auto;
      gap: 0.5rem;


      #retourPortailLiveffn, #avertissementDonnees {
        margin: unset;
        padding: unset;
        color: inherit;
        font-size: medium;
        position: relative;
      }
      #retourPortailLiveffn:before {
        content: "< ";
      }
      #avertissementDonnees {
        justify-self: end;
      }

      .langue, #popLangue, .ffnatation {
        display: none;
      }
      .lieu {
        grid-area: lieu;
        padding: 0;
        font-size: medium;
        text-align: start;
      }
      .titre {
        grid-area: titre;
        padding: 0;
        text-wrap: balance;
      }
      .date {
        grid-area: date;
        padding: 0;
      }
    }

    /* Menu */
    ul.sdt_menu {
      margin: unset;
      width: unset;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-flow: dense;
      position: relative;

      li {
        width: unset;
        height: unset;
        position: relative;
        padding: 0.25rem;
        a {
          display: block;
          position: relative;
          padding: 0.25rem;
          img {
            display: none !important;
          }
          .sdt_active {
            top: 0;
            height: 0 !important;
          }
          .sdt_wrap {
            top: unset !important;
            left: unset;
            z-index: unset;
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            > span {
              margin: 0;
              padding: 0
            }
          }
        }
        div.sdt_box {
          /*display: block !important; /**/
          left: 0 !important;
          top: 0;
          height: 100%;
        }
      }
    }
  }
}

@-moz-document url-prefix("https://www.liveffn.com/cgi-bin/index.php?competition=") {
  @media (max-width: 600px) {
    /* Page d'accueil */
    #accueil {
      table.affiche {
        display: none;
      }
      .news_accueil {
        width: unset;
        margin: unset;
        text-align: start;
        text-wrap: pretty;
        background-image: unset;
        background-color: #333;
        .news_entete_accueil {
          padding: 0.5rem;
          height: unset;
          .news_titre_accueil {
            margin: unset;
            padding: unset;
          }
        }
      }
    }
  }
}

@-moz-document url-prefix("https://www.liveffn.com/cgi-bin/startlist.php?competition=") {
  @media (max-width: 600px) {
    /* Start List */
    #container {
      margin: unset;
      width: unset;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;

      #left {
        width: unset;
        padding: unset;
        .navigation li:last-of-type {
          border-bottom: none;
        }
      }

      #right {
        width: unset;
        border: unset;
        padding: unset;
        padding-block-end: 1rem;
        .titrePage {
          margin: unset;
        }
        h2 {
          margin: unset;
        }
        
        /* Statistiques */
        /* TODO */
        
        /* Épreuves */
        /* TODO */
        
        /* Structures */
        .tableau {
          margin: unset;
          margin-inline: 0.5rem;
        }
        
        /* Participants */
        .ln-letters {
          display: grid;
          padding-inline: 0.5rem;
          grid: 1fr 1fr / auto-flow;
          a {
            border: none;
            width: unset;
            padding: 0.25rem;
          }
        }
        #myList {
          padding-inline: 0.5rem;
          display: flex;
          flex-direction: column;
          gap: 1rem;
          .survol {
            &[style*=list-item] {
              display: grid !important;
            }
            grid-template: auto / 1fr auto auto;
            gap: 0.5rem;
            .nageur, .structure {
              width: unset;
              font-weight: bold;
              a {
                padding: unset;
              }
            }
            .naissance {
              width: unset;
              :before {
                content: "(";
              }
              :after {
                content: ")";
              }
            }
            .nationalite {
              width: unset;
            }
          }
        }
      }
    }
  }
}

@-moz-document url-prefix("https://www.liveffn.com/cgi-bin/programme.php?competition=") {
  @media (max-width: 600px) {
    /* Programme */
    #programme {
      width: unset;
      margin: unset;
      padding: unset;
      
      padding-block-end: 1rem;
      
      display: grid;
      gap: 1rem;
      
      > br {
        display: none;
      }
      
      [name=ancres] {
        position: absolute;
      }
      
      .titrePage {
        margin: unset;
      }
      .ProgrammeEpreuve {
        width: unset;
        grid-row: 2;
      }
      .ProgrammeDetail {
        width: unset;
        background: unset;
        border: unset;
        padding: unset;
      }
    }
  }
}

@-moz-document url-prefix("https://www.liveffn.com/cgi-bin/resultats.php?competition=") {
  @media (max-width: 600px) {
    #programme {
      width: unset;
      margin: unset;
      padding: unset;
      
      padding-block-end: 1rem;
      
      .titrePage {
        margin: unset;
      }
      h1 {
        margin: unset;
      }
      table.programme {
        width: unset;
        tr {
          display: flex;
          flex-direction: column;
          td {
            width: unset;
            border: unset !important;
          }
        }
      }
    }
    #container {
      margin: unset;
      width: unset;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      
      #left {
        width: unset;
        padding: unset;
        .navigation li:last-of-type {
          border-bottom: none;
        }
      }

      #right {
        width: unset;
        border: unset;
        padding: unset;
        padding-block-end: 1rem;
        .titrePage {
          margin: unset;
        }
        form[name=choix] {
          padding: 0.5rem;
          select {
            color: light-dark(#3c3c3c, #eee)
          }
        }
        
        table.tableau {
          margin: unset;
          margin-inline: 0.5rem;
          tbody {
            display: flex;
            flex-direction: column;
            td.epreuve {
              display: flex;
              flex-direction: column;
              gap: 0.125rem;
              span {
                padding: unset;
              }
            }
            tr.survol {
              display: grid;
             grid-template:
                "place name          name year time"
                ".     nat           club club points"
                ".     qualification .    .    reaction" auto / auto 1fr auto auto auto;
              margin-bottom: 0.25rem;
              td:nth-child(1) {
                grid-area: place;
                text-align: unset;
              }
              td:nth-child(2) {
             ...