Add killfeed module
This commit is contained in:
Stephane Bouvard
138
modules/killfeed/css/killfeed.css
Normal file
138
modules/killfeed/css/killfeed.css
Normal file
@@ -0,0 +1,138 @@
|
||||
#killfeed-container {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: auto;
|
||||
right: 20px;
|
||||
width: 620px;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
overflow: hidden;
|
||||
z-index: 250;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
#killfeed-container ul#killfeed-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#killfeed-container .killfeed-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease-out, transform 0.4s ease;
|
||||
transform: translateY(0);
|
||||
}
|
||||
#killfeed-container .killfeed-item.appearing {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
animation: kf-slidein 0.35s ease-out forwards;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-left,
|
||||
#killfeed-container .killfeed-item .kf-center,
|
||||
#killfeed-container .killfeed-item .kf-right {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
|
||||
padding: 0 8px;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-left {
|
||||
background: #66c4ff;
|
||||
color: #0b2a3a;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-left .kf-name-left {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-left .kf-avatar-left {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0);
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-center {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 0 2px;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-center .kf-event {
|
||||
display: block;
|
||||
height: 36px;
|
||||
max-width: 120px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-right {
|
||||
background: #e44848;
|
||||
color: #2a0b0b;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-right .kf-avatar-right {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0);
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-right .kf-name-right {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#killfeed-container.outline-mode .killfeed-item .kf-left,
|
||||
#killfeed-container.outline-mode .killfeed-item .kf-right {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 0 4px;
|
||||
}
|
||||
#killfeed-container.outline-mode .killfeed-item .kf-left .kf-avatar-left {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0);
|
||||
}
|
||||
#killfeed-container.outline-mode .killfeed-item .kf-right .kf-avatar-right {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0);
|
||||
}
|
||||
#killfeed-container.outline-mode .killfeed-item .kf-left .kf-name-left,
|
||||
#killfeed-container.outline-mode .killfeed-item .kf-right .kf-name-right {
|
||||
color: #f0f0f0;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
@keyframes kf-slidein {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
216
modules/killfeed/css/killfeed.less
Normal file
216
modules/killfeed/css/killfeed.less
Normal file
@@ -0,0 +1,216 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user