feat: card redesign with new placeholder format, confetti & layout
- New placeholder format {{label.w/o:uuid}} parsed in all card types
- 1:1 image ratio, header below image, section labels (Satz/Frage/Vokabeln)
- Chips styled as underline-italic in sentences
- Vocabulary pill chips (Lora italic, rounded)
- TTS + hold-to-translate buttons in PairSentenceCard
- Confetti on correct answers (canvas-confetti)
- Picture loaded via object_pairs join in feed API
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -15,41 +15,77 @@
|
||||
0 12px 40px rgba(60, 40, 20, 0.06);
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
/* ── Header (sits below image) ── */
|
||||
.pair-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 16px 12px;
|
||||
padding: 14px 20px 10px;
|
||||
}
|
||||
.pair-lang-pill {
|
||||
background: #5C3D22;
|
||||
color: #F5EDE0;
|
||||
font-size: 10.5px;
|
||||
font-weight: 800;
|
||||
padding: 5px 13px;
|
||||
border-radius: 99px;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
letter-spacing: 0.1em;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.09em;
|
||||
color: #6B6556;
|
||||
font-family: 'DM Sans', 'Nunito', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pair-points-pill {
|
||||
color: #B07840;
|
||||
color: #C4A85A;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 5px 13px;
|
||||
border-radius: 99px;
|
||||
border: 1.5px solid #E8C9A8;
|
||||
background: #FFF6EC;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-weight: 500;
|
||||
font-family: 'DM Sans', 'Nunito', sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Thin divider below header */
|
||||
.pair-header-divider {
|
||||
height: 0.5px;
|
||||
background: #E0DDD5;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
/* ── Section labels ── */
|
||||
.pair-section-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.10em;
|
||||
text-transform: uppercase;
|
||||
color: #A89F8C;
|
||||
font-family: 'DM Sans', 'Nunito', sans-serif;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ── Icon buttons (TTS / translate) ── */
|
||||
.pair-icon-btn {
|
||||
background: #F0EDE3;
|
||||
border: 0.5px solid #D8D3C5;
|
||||
border-radius: 10px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.15s;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.pair-icon-btn:hover { background: #E0DAC8; }
|
||||
.pair-icon-btn.active { background: #E0DAC8; }
|
||||
|
||||
/* ── Image area ── */
|
||||
.pair-image-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
aspect-ratio: 1 / 1;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
.pair-image {
|
||||
width: 100%;
|
||||
@@ -66,6 +102,7 @@
|
||||
.pair-image-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 220px;
|
||||
background: linear-gradient(145deg, #EDE0CE 0%, #C8A882 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -125,34 +162,67 @@
|
||||
|
||||
/* ── Card body ── */
|
||||
.pair-card-body {
|
||||
padding: 20px 20px 22px;
|
||||
padding: 18px 20px 22px;
|
||||
}
|
||||
|
||||
/* Word chips inside sentences */
|
||||
/* ── Vocabulary chips section ── */
|
||||
.pair-vocab-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.pair-vocab-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.pair-vocab-word {
|
||||
padding: 6px 14px;
|
||||
background: #F0EDE3;
|
||||
border-radius: 30px;
|
||||
border: 0.5px solid #D8D3C5;
|
||||
font-family: 'Lora', Georgia, serif;
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
color: #7A5C2E;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Sentence action row (sentence + icon buttons) */
|
||||
.pair-sentence-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
.pair-sentence-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Word chips inside sentences — underline italic style */
|
||||
.pair-word-chip {
|
||||
display: inline-block;
|
||||
background: #FFF0E0;
|
||||
color: #6B4430;
|
||||
border-radius: 7px;
|
||||
padding: 2px 9px 3px;
|
||||
font-size: inherit;
|
||||
font-weight: 700;
|
||||
font-family: inherit;
|
||||
border: 1.5px solid #E0BFA0;
|
||||
vertical-align: baseline;
|
||||
display: inline;
|
||||
font-style: italic;
|
||||
color: #7A5C2E;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #C4A85A;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-thickness: 1.5px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
|
||||
transition: color 0.15s, text-decoration-color 0.15s;
|
||||
user-select: none;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
font-weight: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.pair-word-chip:hover {
|
||||
background: #FFE4C4;
|
||||
border-color: #C8956A;
|
||||
color: #5C3D22;
|
||||
text-decoration-color: #B07840;
|
||||
}
|
||||
.pair-word-chip.active {
|
||||
background: #B07840;
|
||||
color: #FFF8F0;
|
||||
border-color: #B07840;
|
||||
transform: scale(1.04);
|
||||
color: #B07840;
|
||||
text-decoration-color: #B07840;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
/* Sentence text (text-type cards) */
|
||||
|
||||
Reference in New Issue
Block a user