streamerbot-overlay/modules/killfeed/css/killfeed.less

// out: killfeed.css, sourcemap: false, compress: false

////////////////////////////////////
// ⚙️ VARIABLES GLOBALES DE STYLE //
////////////////////////////////////

// --- Position et taille du module ---
@pos-top:        20px;
@pos-left:       auto;      // mettre à "20px" pour ancrer à gauche
@pos-right:      20px;      // mettre à "auto" pour ancrer à gauche
@feed-width:     620px;
@feed-height:    400px;

// --- Couleurs Joueur 1 ---
@p1-bg:              #66c4ff;         // fond du bloc joueur 1
@p1-avatar-bg:       rgba(0,0,0,0.2); // fond derrière la PP joueur 1
@p1-avatar-border:   2px solid rgba(255,255,255,0); // bordure de la PP joueur 1

// --- Couleurs Joueur 2 ---
@p2-bg:              #e44848;         // fond du bloc joueur 2
@p2-avatar-bg:       rgba(0,0,0,0.2); // fond derrière la PP joueur 2
@p2-avatar-border:   2px solid rgba(255,255,255,0); // bordure de la PP joueur 2

// --- Style global ---
@text:           #f0f0f0;
@shadow:         rgba(0,0,0,0.35);
@radius:         8px;
@gapX:           10px;
@gapY:           6px;
@avatarSize:     36px;
@fontName:       0.95rem;


//////////////////////////////
// 💬 CONTAINER PRINCIPAL  //
//////////////////////////////

#killfeed-container {
  position: absolute;
  top: @pos-top;
  left: @pos-left;
  right: @pos-right;
  width: @feed-width;
  height: @feed-height;
  display: flex;
  flex-direction: column;
  align-items: flex-end;    // ✅ aligné à droite
  overflow: hidden;
  z-index: 250;
  color: @text;

  ul#killfeed-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: @gapY;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  //////////////////////////////
  // 🧩 ÉLÉMENT DU KILLFEED  //
  //////////////////////////////
  .killfeed-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: @gapX;
    opacity: 1;
    transition: opacity 0.5s ease-out, transform 0.4s ease;
    transform: translateY(0);

    // animation d'apparition
    &.appearing {
      transform: translateY(10px);
      opacity: 0;
      animation: kf-slidein 0.35s ease-out forwards;
    }

    // Trois zones : joueur 1 / event / joueur 2
    .kf-left,
    .kf-center,
    .kf-right {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: @radius;
      box-shadow: 0 2px 6px @shadow;
      padding: 0 8px;
      gap: 6px;
      height: @avatarSize;
    }

    ///////////////////////////
    // 🎯 JOUEUR 1 (à gauche)
    ///////////////////////////
    .kf-left {
      background: @p1-bg;
      color: #0b2a3a;

      .kf-name-left {
        font-size: @fontName;
        font-weight: 700;
        white-space: nowrap;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .kf-avatar-left {
        width: @avatarSize;
        height: @avatarSize;
        object-fit: cover;
        border-radius: 6px;
        background: @p1-avatar-bg;
        border: @p1-avatar-border;
        box-sizing: border-box;   // ✅ empêche le débordement vertical
        display: block;           // ✅ supprime l’espace baseline
      }
    }

    ///////////////////////////
    // ⚡ EVENT CENTRAL
    ///////////////////////////
    .kf-center {
      background: transparent;
      box-shadow: none;
      padding: 0 2px;

      .kf-event {
        display: block;
        height: @avatarSize;
        max-width: 120px;
        object-fit: contain;
        filter: drop-shadow(0 2px 4px @shadow);
      }
    }

    ///////////////////////////
    // 🔥 JOUEUR 2 (à droite)
    ///////////////////////////
    .kf-right {
      background: @p2-bg;
      color: #2a0b0b;

      .kf-avatar-right {
        width: @avatarSize;
        height: @avatarSize;
        object-fit: cover;
        border-radius: 6px;
        background: @p2-avatar-bg;
        border: @p2-avatar-border;
        box-sizing: border-box;   // ✅ idem : la bordure ne dépasse pas
        display: block;
      }

      .kf-name-right {
        font-size: @fontName;
        font-weight: 700;
        white-space: nowrap;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  /////////////////////////////////////
  // 🧱 MODE OUTLINE (sans fond bloc)
  /////////////////////////////////////
  &.outline-mode {
    .killfeed-item {
      .kf-left,
      .kf-right {
        background: transparent;
        box-shadow: none;
        padding: 0 4px;
      }

      .kf-left .kf-avatar-left {
        background: @p1-avatar-bg;
        border: @p1-avatar-border;
      }

      .kf-right .kf-avatar-right {
        background: @p2-avatar-bg;
        border: @p2-avatar-border;
      }

      .kf-left .kf-name-left,
      .kf-right .kf-name-right {
        color: @text;
        text-shadow: 0 1px 2px @shadow;
      }
    }
  }
}

//////////////////////////
// ✨ ANIMATION ENTRÉE ✨
//////////////////////////
@keyframes kf-slidein {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}