Ajout d'un easteregg
This commit is contained in:
Esteban
@@ -0,0 +1,897 @@
|
||||
/* ---- Presse-Citron : easter egg Konami code (mini-jeu incrémental) ---- */
|
||||
|
||||
:root {
|
||||
--lemon-hue: 48; /* dérive lentement avec la progression (voir JS) */
|
||||
--lemon: hsl(var(--lemon-hue), 92%, 56%);
|
||||
--lemon-light: hsl(var(--lemon-hue), 100%, 74%);
|
||||
--lemon-pale: hsl(var(--lemon-hue), 100%, 88%);
|
||||
--lemon-dark: hsl(calc(var(--lemon-hue) - 6), 82%, 40%);
|
||||
--leaf: hsl(100, 45%, 42%);
|
||||
--bg: hsl(calc(var(--lemon-hue) + 8), 38%, 8%);
|
||||
--bg-soft: hsl(calc(var(--lemon-hue) + 8), 30%, 11%);
|
||||
--surface: hsl(calc(var(--lemon-hue) + 8), 24%, 14%);
|
||||
--surface-2: hsl(calc(var(--lemon-hue) + 8), 20%, 19%);
|
||||
--surface-3: hsl(calc(var(--lemon-hue) + 8), 18%, 24%);
|
||||
--border: hsl(calc(var(--lemon-hue) + 8), 18%, 26%);
|
||||
--accent-soft: hsla(var(--lemon-hue), 92%, 56%, 0.14);
|
||||
--text: #fbf8ef;
|
||||
--text-muted: #b9b3a2;
|
||||
--radius: 16px;
|
||||
--radius-sm: 11px;
|
||||
--shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
|
||||
--font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font);
|
||||
background:
|
||||
radial-gradient(circle at 18% -10%, hsla(var(--lemon-hue), 80%, 45%, 0.25), transparent 45%),
|
||||
radial-gradient(circle at 85% 110%, hsla(calc(var(--lemon-hue) + 40), 70%, 40%, 0.18), transparent 50%),
|
||||
var(--bg);
|
||||
color: var(--text);
|
||||
overflow-x: hidden;
|
||||
transition: background 0.6s ease;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--lemon);
|
||||
color: #2a1c00;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--surface-3);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.citron-shell {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ---- Le citron dessiné en CSS (aucun emoji) : logo, écran d'accueil, cible cliquable ---- */
|
||||
.lemon-mark {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 22px;
|
||||
border-radius: 52% 52% 46% 46% / 62% 62% 38% 38%;
|
||||
background: radial-gradient(circle at 34% 28%, var(--lemon-pale) 0%, var(--lemon) 48%, var(--lemon-dark) 100%);
|
||||
position: relative;
|
||||
box-shadow: inset -3px -3px 5px rgba(0, 0, 0, 0.2), inset 2px 2px 4px rgba(255, 255, 255, 0.35);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.lemon-mark-leaf {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 50%;
|
||||
width: 10px;
|
||||
height: 15px;
|
||||
background: linear-gradient(135deg, #8bc34a, var(--leaf));
|
||||
border-radius: 0 100% 0 100%;
|
||||
transform: translateX(-50%) rotate(-18deg);
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.lemon-mark-big {
|
||||
width: 68px;
|
||||
height: 58px;
|
||||
margin: 0 auto 10px;
|
||||
display: block;
|
||||
animation: citron-bob 2.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.lemon-mark-big .lemon-mark-leaf {
|
||||
width: 22px;
|
||||
height: 32px;
|
||||
top: -16px;
|
||||
}
|
||||
|
||||
@keyframes citron-bob {
|
||||
0%, 100% { transform: translateY(0) rotate(-4deg); }
|
||||
50% { transform: translateY(-8px) rotate(4deg); }
|
||||
}
|
||||
|
||||
/* ---- En-tête ---- */
|
||||
.citron-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 22px;
|
||||
background: rgba(0, 0, 0, 0.28);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.citron-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 19px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.citron-player-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
font-size: 13.5px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.citron-player-info i {
|
||||
color: var(--lemon-light);
|
||||
}
|
||||
|
||||
.citron-player-info strong {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ---- Photo de profil (en-tête du jeu) ---- */
|
||||
.citron-avatar-wrap {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex: none;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.citron-avatar-fallback,
|
||||
.citron-avatar-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.citron-avatar-fallback {
|
||||
background: linear-gradient(135deg, var(--lemon-light), var(--lemon-dark));
|
||||
color: #2a1c00;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.citron-avatar-img {
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--surface-2);
|
||||
}
|
||||
|
||||
.citron-avatar-edit {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.citron-avatar-wrap:hover .citron-avatar-edit {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.citron-btn {
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
padding: 9px 16px;
|
||||
font-family: var(--font);
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.citron-btn:hover {
|
||||
background: var(--surface-3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.citron-btn.primary {
|
||||
background: linear-gradient(135deg, var(--lemon-light), var(--lemon) 60%, var(--lemon-dark));
|
||||
color: #2a1c00;
|
||||
box-shadow: 0 8px 20px var(--accent-soft);
|
||||
}
|
||||
|
||||
.citron-btn.primary:hover {
|
||||
filter: brightness(1.06);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.citron-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* ---- Écran d'authentification ---- */
|
||||
.citron-auth {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30px 16px;
|
||||
}
|
||||
|
||||
.citron-auth-card {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
background: linear-gradient(180deg, var(--surface), var(--bg-soft));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 30px 28px;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.citron-auth-card h1 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 21px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.citron-auth-card p.subtitle {
|
||||
margin: 0 0 22px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.citron-auth-tabs {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 18px;
|
||||
background: var(--surface-2);
|
||||
border-radius: 999px;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.citron-auth-tabs button {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font);
|
||||
font-weight: 700;
|
||||
font-size: 12.5px;
|
||||
padding: 9px;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.citron-auth-tabs button.active {
|
||||
background: linear-gradient(135deg, var(--lemon-light), var(--lemon));
|
||||
color: #2a1c00;
|
||||
}
|
||||
|
||||
.citron-field {
|
||||
text-align: left;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.citron-field label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.citron-field label i {
|
||||
color: var(--lemon-light);
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.citron-field input {
|
||||
width: 100%;
|
||||
padding: 11px 13px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
font-size: 14px;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.citron-field input:focus {
|
||||
outline: none;
|
||||
border-color: var(--lemon);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
|
||||
.citron-auth-error {
|
||||
background: rgba(220, 60, 40, 0.16);
|
||||
border: 1px solid rgba(220, 60, 40, 0.4);
|
||||
color: #ffb3a8;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 9px 12px;
|
||||
font-size: 12.5px;
|
||||
margin-bottom: 12px;
|
||||
display: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.citron-auth-error.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.citron-auth-submit {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 13px;
|
||||
font-size: 14px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ---- Écran de jeu ---- */
|
||||
.citron-game {
|
||||
flex: 1;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.citron-game.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.citron-score-bar {
|
||||
text-align: center;
|
||||
padding: 18px 12px 4px;
|
||||
}
|
||||
|
||||
.citron-score {
|
||||
font-size: clamp(32px, 6vw, 48px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--lemon-light);
|
||||
text-shadow: 0 4px 20px var(--accent-soft);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.citron-score-label {
|
||||
font-size: 12.5px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.09em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.citron-score-label i {
|
||||
color: var(--lemon);
|
||||
}
|
||||
|
||||
.citron-cps {
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.citron-main {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
/* minmax(0, ...) plutôt que 1fr/340px seuls : sans le "0", une piste de grille ne
|
||||
peut jamais devenir plus étroite que le plus large de ses enfants, ce qui fait
|
||||
déborder toute la page sur mobile dès qu'un item de liste est un peu large */
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
|
||||
gap: 18px;
|
||||
padding: 10px 18px 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.citron-main {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Le citron cliquable (dessiné en CSS) ---- */
|
||||
.citron-click-zone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-top: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.citron-press {
|
||||
position: relative;
|
||||
width: min(44vw, 230px);
|
||||
height: min(38vw, 200px);
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.citron-press::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -14%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, var(--accent-soft), transparent 70%);
|
||||
animation: lemon-pulse 3.2s ease-in-out infinite;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@keyframes lemon-pulse {
|
||||
0%, 100% { transform: scale(0.92); opacity: 0.55; }
|
||||
50% { transform: scale(1.05); opacity: 1; }
|
||||
}
|
||||
|
||||
.lemon-visual {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50% 50% 47% 47% / 60% 60% 40% 40%;
|
||||
background: radial-gradient(circle at 32% 26%, var(--lemon-pale) 0%, var(--lemon) 46%, var(--lemon-dark) 100%);
|
||||
box-shadow:
|
||||
0 22px 46px rgba(0, 0, 0, 0.4),
|
||||
inset -14px -18px 30px rgba(0, 0, 0, 0.16),
|
||||
inset 10px 12px 22px rgba(255, 255, 255, 0.3);
|
||||
transition: transform 0.08s ease;
|
||||
}
|
||||
|
||||
.lemon-shine {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 18%;
|
||||
width: 24%;
|
||||
height: 16%;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
border-radius: 50%;
|
||||
filter: blur(3px);
|
||||
}
|
||||
|
||||
.lemon-leaf {
|
||||
position: absolute;
|
||||
top: -7%;
|
||||
left: 50%;
|
||||
width: 16%;
|
||||
height: 25%;
|
||||
background: linear-gradient(135deg, #8bc34a, var(--leaf));
|
||||
border-radius: 0 100% 0 100%;
|
||||
transform: translateX(-50%) rotate(-18deg);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.citron-press:active .lemon-visual,
|
||||
.citron-press.squish .lemon-visual {
|
||||
transform: scale(0.87) rotate(-4deg);
|
||||
}
|
||||
|
||||
.citron-press-hint {
|
||||
margin-top: 14px;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.citron-float {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
pointer-events: none;
|
||||
font-weight: 800;
|
||||
color: var(--lemon-light);
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
|
||||
animation: citron-float-up 0.9s ease-out forwards;
|
||||
white-space: nowrap;
|
||||
font-size: 18px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@keyframes citron-float-up {
|
||||
0% { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
|
||||
100% { opacity: 0; transform: translate(-50%, -160%) scale(1.15); }
|
||||
}
|
||||
|
||||
.citron-drop {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
pointer-events: none;
|
||||
font-size: 15px;
|
||||
color: hsl(200, 90%, 65%);
|
||||
animation: citron-drop-fly 0.7s ease-out forwards;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@keyframes citron-drop-fly {
|
||||
0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) scale(1); }
|
||||
100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.4); }
|
||||
}
|
||||
|
||||
/* ---- Prestige ---- */
|
||||
.citron-prestige {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.citron-prestige-btn {
|
||||
background: linear-gradient(135deg, #ffd93d, #ff9d3d, #ff5e5e);
|
||||
color: #2a1c00;
|
||||
font-size: 14px;
|
||||
padding: 13px 24px;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 12px 28px rgba(255, 150, 30, 0.4);
|
||||
}
|
||||
|
||||
.citron-prestige-note {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
max-width: 320px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ---- Colonnes latérales ---- */
|
||||
.citron-panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
max-height: 72vh;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.citron-panel-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.citron-panel-tabs button {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 12px 4px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font);
|
||||
font-weight: 700;
|
||||
font-size: 11.5px;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.citron-panel-tabs button i {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.citron-panel-tabs button.active {
|
||||
color: var(--lemon-light);
|
||||
border-bottom-color: var(--lemon);
|
||||
}
|
||||
|
||||
.citron-panel-body {
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.citron-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
font-family: var(--font);
|
||||
color: var(--text);
|
||||
transition: background-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.citron-item:hover:not(:disabled) {
|
||||
background: var(--surface-3);
|
||||
border-color: var(--lemon-dark);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.citron-item:disabled {
|
||||
opacity: 0.42;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.citron-item .icon {
|
||||
flex: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
|
||||
color: var(--lemon-light);
|
||||
box-shadow: inset 0 0 0 1px var(--border);
|
||||
}
|
||||
|
||||
.citron-item .infos {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.citron-item .name {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
.citron-item .desc {
|
||||
display: block;
|
||||
font-size: 11.5px;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.citron-item .cost {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--lemon-light);
|
||||
flex: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.citron-item .cost i {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.citron-item .owned {
|
||||
flex: none;
|
||||
min-width: 28px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
background: var(--lemon-dark);
|
||||
color: #fff8e0;
|
||||
border-radius: 8px;
|
||||
padding: 4px 7px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.citron-empty {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
padding: 24px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.citron-empty i {
|
||||
font-size: 22px;
|
||||
color: var(--lemon-dark);
|
||||
}
|
||||
|
||||
/* ---- Classement ---- */
|
||||
.citron-leaderboard-row {
|
||||
display: grid;
|
||||
grid-template-columns: 26px 36px 1fr auto;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
padding: 10px 11px;
|
||||
background: var(--surface-2);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.citron-leaderboard-row.lb-me {
|
||||
border-color: var(--lemon);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.lb-rank {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.lb-rank-number {
|
||||
color: var(--text-muted);
|
||||
font-weight: 800;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.lb-gold { color: #ffd700; }
|
||||
.lb-silver { color: #d6d6e0; }
|
||||
.lb-bronze { color: #cd7f32; }
|
||||
|
||||
.lb-avatar-wrap {
|
||||
position: relative;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.lb-avatar {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--lemon-light), var(--lemon-dark));
|
||||
color: #2a1c00;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
font-size: 13.5px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.lb-avatar-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.lb-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.lb-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lb-prestige {
|
||||
flex: none;
|
||||
font-size: 10.5px;
|
||||
font-weight: 800;
|
||||
background: var(--lemon-dark);
|
||||
color: #fff8e0;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.lb-sub {
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lb-sub i {
|
||||
color: var(--lemon-dark);
|
||||
}
|
||||
|
||||
.lb-score {
|
||||
text-align: right;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.lb-score-value {
|
||||
font-weight: 800;
|
||||
color: var(--lemon-light);
|
||||
font-size: 14px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.lb-score-label {
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ---- Toast ---- */
|
||||
.citron-toast {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--lemon);
|
||||
color: var(--text);
|
||||
padding: 11px 20px;
|
||||
border-radius: 999px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
box-shadow: var(--shadow);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.citron-toast i {
|
||||
color: var(--lemon-light);
|
||||
}
|
||||
|
||||
.citron-toast.visible {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -6px);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.lemon-mark-big,
|
||||
.citron-press::before,
|
||||
.citron-float,
|
||||
.citron-drop {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user