/* Results Block - Glassmorphism */
.results-block {
background: var(--gradient-card);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: var(--radius-xl);
padding: 1.5rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-light);
}
.results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-light);
}
.result-count {
font-weight: 600;
color: var(--text-secondary);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sort-select {
padding: 0.5rem 1rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--bg-primary);
color: var(--text-primary);
cursor: pointer;
}
.results-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Grid View for Results */
.results-list.grid-view {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.results-list.grid-view .result-item {
flex-direction: column;
text-align: center;
padding: 1.5rem 1rem;
}
.results-list.grid-view .result-char {
font-size: 3rem;
margin-bottom: 0.5rem;
}
.results-list.grid-view .result-info {
align-items: center;
}
.results-list.grid-view .result-meaning {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.results-list.grid-view .save-word-btn {
top: 0.5rem;
right: 0.5rem;
}
/* Result Item - Modern Card */
.result-item {
display: flex;
gap: 1.25rem;
padding: 1.25rem;
background: var(--bg-primary);
border: 1px solid var(--border-light);
border-radius: var(--radius-xl);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.result-item:hover {
border-color: var(--primary-color);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.save-word-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 2.25rem;
height: 2.25rem;
border: none;
background: var(--bg-glass);
backdrop-filter: blur(4px);
border-radius: var(--radius-md);
font-size: 1.25rem;
cursor: pointer;
opacity: 0.7;
transition: all 0.3s ease;
z-index: 10;
}
.save-word-btn:hover {
opacity: 1;
transform: scale(1.15);
background: var(--gradient-accent);
color: white;
}
.result-char {
font-family: var(--font-chinese);
font-size: 3.5rem;
line-height: 1;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
min-width: 5rem;
text-align: center;
font-weight: 600;
}
/* Character length variations */
.result-char.char-medium {
font-size: 2.5rem;
}
.result-char.char-long {
font-size: 1.8rem;
min-width: 6rem;
}
.result-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.result-pinyin {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.5px;
}
.result-meaning {
color: var(--text-secondary);
font-size: 1.05rem;
line-height: 1.65;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--border-light, #e5e7eb);
}
/* Hán Việt reading highlight */
.result-meaning .han-viet {
font-weight: 700;
color: #b91c1c;
font-size: 1.1em;
background: linear-gradient(135deg, #fef2f2, #fee2e2);
padding: 0.2rem 0.6rem;
border-radius: 4px;
margin-right: 0.35rem;
display: inline-block;
}
.result-meaning .no-meaning {
color: var(--text-tertiary);
font-style: italic;
}
.result-meta {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
margin-top: 0.25rem;
}
.badge {
display: inline-block;
padding: 0.3rem 0.75rem;
background: var(--gradient-primary);
color: white;
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 600;
}
.badge.hsk {
background: var(--gradient-accent);
}
/* Reading Badges for different pronunciation systems */
.reading-badge {
display: inline-block;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.03em;
vertical-align: middle;
margin-right: 0.35rem;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.reading-badge.pinyin {
background: linear-gradient(135deg, #2563eb, #1e40af);
color: white;
}
.reading-badge.hanviet {
background: linear-gradient(135deg, #dc2626, #991b1b);
color: white;
font-size: 0.75rem;
padding: 0.25rem 0.6rem;
}
.reading-badge.nom {
background: linear-gradient(135deg, #d97706, #92400e);
color: white;
}
.reading-badge.cantonese {
background: linear-gradient(135deg, #7c3aed, #5b21b6);
color: white;
}
.reading-badge.korean {
background: linear-gradient(135deg, #db2777, #9d174d);
color: white;
}
.reading-badge.japanese {
background: linear-gradient(135deg, #e11d48, #9f1239);
color: white;
}
/* Primary and secondary readings layout */
.primary-reading {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 1.15rem;
font-weight: 500;
color: var(--text-primary);
flex-wrap: wrap;
line-height: 1.4;
}
.secondary-readings {
display: flex;
gap: 1rem;
margin-top: 0.35rem;
flex-wrap: wrap;
padding-top: 0.25rem;
border-top: 1px dashed var(--border-color);
}
.secondary-reading {
font-size: 0.9rem;
color: var(--text-secondary);
display: inline-flex;
align-items: center;
font-weight: 500;
}
.strokes {
font-size: 0.875rem;
color: var(--text-tertiary);
}
/* Enhanced Empty State */
.empty-state {
text-align: center;
padding: 3rem 2rem;
color: var(--text-tertiary);
}
.empty-illustration {
margin-bottom: 1.5rem;
color: var(--primary-light);
}
.empty-illustration i {
opacity: 0.6;
}
.empty-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.empty-description {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.empty-suggestions {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.suggestion-label {
font-size: 0.875rem;
color: var(--text-tertiary);
}
.suggestion-chip {
padding: 0.5rem 1rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
font-family: var(--font-chinese);
font-size: 1rem;
color: var(--text-primary);
cursor: pointer;
transition: all 0.3s ease;
}
.suggestion-chip:hover {
background: var(--gradient-primary);
color: white;
border-color: transparent;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Results Header Enhanced */
.results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-light);
flex-wrap: wrap;
gap: 1rem;
}
.results-info {
display: flex;
align-items: center;
gap: 0.75rem;
}
.results-icon {
color: var(--primary-color);
width: 20px;
height: 20px;
}
.results-controls {
display: flex;
align-items: center;
gap: 0.75rem;
}
.view-toggle {
display: flex;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
padding: 0.25rem;
}
.view-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.view-btn:hover {
color: var(--text-primary);
}
.view-btn.active {
background: var(--bg-primary);
color: var(--primary-color);
box-shadow: var(--shadow-sm);
}
.view-btn i {
width: 18px;
height: 18px;
}
/* Stats Section */
.stats-section {
display: flex;
justify-content: center;
gap: 2rem;
padding: 2rem;
margin-top: 2rem;
background: var(--gradient-card);
backdrop-filter: blur(10px);
border-radius: var(--radius-xl);
border: 1px solid var(--border-light);
flex-wrap: wrap;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
text-align: center;
min-width: 100px;
}
.stat-item i {
width: 24px;
height: 24px;
color: var(--primary-color);
margin-bottom: 0.25rem;
}
.stat-value {
font-size: 1.5rem;
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-size: 0.8rem;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
@media (max-width: 768px) {
.stats-section {
gap: 1.5rem;
padding: 1.5rem;
}
.stat-item {
min-width: 80px;
}
.stat-value {
font-size: 1.25rem;
}
}
/* Load More Button */
.btn-load-more {
width: 100%;
padding: 1rem;
margin-top: 1.5rem;
background: var(--gradient-secondary);
color: white;
border: none;
border-radius: var(--radius-lg);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(236, 72, 153, 0.2);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.btn-load-more:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.3);
}
/* Modal - Glassmorphism with full viewport slide animation */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1000;
align-items: flex-end;
justify-content: center;
padding: 0;
overflow-x: hidden;
opacity: 0;
transition: opacity 0.3s ease;
}
.detail-header {
background: linear-gradient(135deg, rgba(32, 128, 128, 0.08), rgba(147, 197, 253, 0.12));
color: #1e293b;
padding: 2rem 2rem;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
text-align: center;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(32, 128, 128, 0.1);
}
@media (max-width: 600px) {
.char-meta {
grid-template-columns: 1fr;
}
}
.char-meta .meta-label {
font-size: 0.8rem;
font-weight: 500;
color: var(--text-tertiary);
min-width: 70px;
flex-shrink: 0;
}
.char-meta .meta-value {
font-size: 0.95rem;
color: var(--text-primary);
flex: 1;
}
.char-meta .unicode {
font-family: 'Courier New', monospace;
color: var(--text-tertiary);
font-size: 0.85rem;
}
.char-meta .pinyin {
color: var(--accent-color);
font-size: 1rem;
}
.char-meta .hanviet {
color: var(--primary-color);
font-weight: 600;
}
.char-meta .radical {
color: var(--text-primary);
}
.char-meta .cangjie {
font-family: 'Courier New', monospace;
letter-spacing: 1px;
}
.char-meta .four-corner {
font-family: 'Courier New', monospace;
letter-spacing: 0.5px;
}
.char-meta .liushu {
font-size: 0.9rem;
}
.char-meta .meaning {
color: var(--text-primary);
}
.detail-tabs {
display: flex;
gap: 0.25rem;
padding: 1.25rem 1.5rem 0;
border-bottom: 2px solid var(--border-light);
background: var(--bg-tertiary);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.detail-tabs::-webkit-scrollbar {
height: 6px;
}
.detail-tabs::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.6);
border-radius: 999px;
}
.tab-btn {
padding: 0.875rem 1.5rem;
border: none;
background: transparent;
color: var(--text-secondary);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
flex: 0 0 auto;
white-space: nowrap;
}
.tab-btn::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-primary);
border-radius: 3px 3px 0 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.tab-btn:hover {
color: var(--text-primary);
background: var(--bg-primary);
}
.tab-btn.active {
color: var(--primary-color);
background: var(--bg-primary);
}
.tab-btn.active::after {
opacity: 1;
}
.detail-body {
padding: 2rem;
background: var(--bg-primary);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.info-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.info-item.full-width {
grid-column: 1 / -1;
}
.info-item label {
font-size: 0.875rem;
color: var(--text-tertiary);
font-weight: 600;
}
.info-item span {
font-size: 1rem;
color: var(--text-primary);
}
/* Etymology Tab Styles */
.etymology-section {
padding: 1rem 0;
}
.etymology-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
background: var(--bg-tertiary);
padding: 1.25rem;
border-radius: var(--radius-lg);
}
.etym-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.etym-item label {
font-size: 0.8rem;
color: var(--text-tertiary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.etym-item span {
font-size: 1rem;
color: var(--text-primary);
font-family: var(--font-chinese);
}
.etym-section {
margin-bottom: 1.5rem;
}
.etym-section h4 {
margin-bottom: 0.75rem;
color: var(--text-primary);
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.classical-text {
background: var(--bg-tertiary);
padding: 1rem 1.25rem;
border-radius: var(--radius-md);
font-family: var(--font-chinese);
line-height: 1.8;
color: var(--text-primary);
border-left: 3px solid var(--primary-color);
}
.classical-text:empty::before {
content: '-';
color: var(--text-tertiary);
}
.historical-forms {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.form-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
min-width: 100px;
}
.form-label {
font-size: 0.8rem;
color: var(--text-tertiary);
}
.form-char {
font-size: 2rem;
font-family: var(--font-chinese);
color: var(--text-primary);
}
.form-char img {
max-width: 60px;
max-height: 60px;
}
.meanings-section {
margin-top: 1.5rem;
}
.meanings-section h4 {
margin-bottom: 1rem;
color: var(--text-primary);
}
.meaning-group {
padding: 1rem;
background: var(--bg-tertiary);
border-radius: var(--radius-lg);
margin-bottom: 1rem;
}
.meaning-group h4 {
font-size: 1.125rem;
margin-bottom: 0.75rem;
color: var(--primary-color);
}
.meaning-def {
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 0.75rem;
}
.meaning-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.meaning-item {
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
}
.meaning-number {
color: var(--primary-color);
font-weight: 600;
margin-right: 0.5rem;
}
.example-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.example-list li {
padding-left: 1.5rem;
position: relative;
}
.example-list li:before {
content: "→";
position: absolute;
left: 0;
color: var(--primary-color);
}
.stroke-order-section {
text-align: center;
}
#strokeOrderCanvas {
margin: 0 auto 1rem;
}
.stroke-controls {
display: flex;
gap: 0.5rem;
justify-content: center;
}
.examples-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.example-card {
padding: 1.5rem;
background: var(--bg-tertiary);
border-radius: var(--radius-lg);
border-left: 4px solid var(--primary-color);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.example-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.example-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.example-card:hover::before {
opacity: 0.03;
}
.ex-zh {
font-family: var(--font-chinese);
font-size: 1.25rem;
margin-bottom: 0.625rem;
color: var(--text-primary);
font-weight: 500;
}
.ex-pinyin {
color: var(--primary-color);
margin-bottom: 0.375rem;
font-style: italic;
}
.ex-vi {
color: var(--text-primary);
font-weight: 500;
font-size: 1rem;
line-height: 1.6;
}
.audio-btn {
margin-top: 0.75rem;
padding: 0.625rem 1.25rem;
background: var(--gradient-primary);
color: white;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(32, 128, 128, 0.2);
}
.audio-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(32, 128, 128, 0.3);
}
.tag-group {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
.tag {
padding: 0.625rem 1.125rem;
background: var(--bg-tertiary);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.tag:hover {
background: var(--gradient-primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(32, 128, 128, 0.3);
}
.related-section {
margin-bottom: 1.5rem;
}
.related-section h4 {
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.1rem;
}
/* Related Words and Compound Words Styles */
.related-word-tag,
.compound-word-tag {
display: inline-flex;
flex-direction: column;
gap: 0.375rem;
padding: 0.875rem 1rem;
background: var(--gradient-card);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.3s ease;
min-width: 120px;
max-width: 200px;
backdrop-filter: blur(4px);
}
.related-word-tag:hover,
.compound-word-tag:hover {
background: var(--gradient-primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(32, 128, 128, 0.35);
}
.related-word-tag strong,
.compound-word-tag strong {
font-size: 1.125rem;
color: var(--primary-color);
}
.related-word-tag:hover strong,
.compound-word-tag:hover strong {
color: white;
}
.pinyin-small {
font-size: 0.75rem;
color: #64748b;
}
.related-word-tag:hover .pinyin-small,
.compound-word-tag:hover .pinyin-small {
color: rgba(255, 255, 255, 0.9);
}
.meaning-small {
font-size: 0.813rem;
color: #475569;
line-height: 1.3;
}
.related-word-tag:hover .meaning-small,
.compound-word-tag:hover .meaning-small {
color: rgba(255, 255, 255, 0.85);
}
.similarity-badge {
align-self: flex-end;
padding: 0.125rem 0.375rem;
background: var(--primary-color);
color: white;
border-radius: 0.25rem;
font-size: 0.688rem;
font-weight: 600;
}
.related-word-tag:hover .similarity-badge {
background: white;
color: var(--primary-color);
}
.compound-group {
margin-bottom: 1.25rem;
}
.compound-group:last-child {
margin-bottom: 0;
}
/* Meanings Tab Styles */
.meanings-detailed {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.meaning-section {
padding: 1.25rem;}
.meaning-section h4 {
margin: 0 0 1rem 0;
color: var(--primary-color);
font-size: 1.125rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.meaning-section:empty {
display: none;
}
.xinhua-content {
font-family: var(--font-chinese);
font-size: 1rem;
line-height: 1.8;
color: var(--text-primary);
}
.xinhua-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.xinhua-item {
padding: 0.5rem 0.75rem;
background: rgba(32, 128, 128, 0.05);
border-radius: var(--radius-sm);
line-height: 1.6;
}
.xinhua-item.numbered {
border-left: 3px solid var(--primary-color);
padding-left: 1rem;
}
.xinhua-origin {
padding: 0.75rem;
border-radius: var(--radius-md);
font-style: italic;
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
.xinhua-category {
font-weight: 600;
color: var(--primary-color);
padding: 0.25rem 0;
margin-top: 0.5rem;
}
.primary-meaning {
border-left: 4px solid var(--success-color);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), transparent);
}
.meaning-list {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.meaning-item:hover {
background: var(--bg-secondary);
border-left-color: var(--secondary-color);
transform: translateX(4px);
}
.meaning-number {
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
min-width: 1.75rem;
flex-shrink: 0;
font-size: 1.1rem;
}
#vietnameseMeaningContent,
#englishMeaningContent,
#derivationContent,
#abbreviationContent {
font-size: 1rem;
line-height: 1.8;
color: var(--text-secondary);
}
#vietnameseMeaningContent ul,
#englishMeaningContent ul {
margin: 0.5rem 0;
padding-left: 1.5rem;
}
#vietnameseMeaningContent ul li,
#englishMeaningContent ul li {
margin: 0.5rem 0;
}
/* Hamburger Menu */
.hamburger-menu {
display: none;
flex-direction: column;
gap: 0.25rem;
width: 2.5rem;
height: 2.5rem;
background: var(--bg-tertiary);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
padding: 0.625rem;
transition: all 0.2s;
}
.hamburger-menu:hover {
background: var(--bg-hover);
}
.hamburger-line {
width: 100%;
height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: all 0.3s;
}
.hamburger-menu.active .hamburger-line:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.hamburger-menu.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.hamburger-menu.active .hamburger-line:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* Responsive Design */
@media (max-width: 768px) {
/* Header responsive */
.header-content {
flex-wrap: nowrap;
gap: 0.75rem;
}
.logo {
flex-shrink: 0;
}
.logo-text {
display: none;
}
.logo-image {
width: 36px;
height: 36px;
}
.nav {
position: fixed;
top: 4rem;
left: 0;
right: 0;
background: var(--bg-primary);
flex-direction: column;
padding: 1rem;
box-shadow: var(--shadow-lg);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s;
z-index: 999;
}
.nav.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.nav-link {
width: 100%;
text-align: center;
padding: 0.875rem;
}
.hamburger-menu {
display: flex;
order: -1;
}
.header-actions {
margin-left: auto;
}
/* Content responsive */
.container {
padding: 0 1rem;
}
.search-block {
padding: 1.25rem;
}
.search-modes {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.search-modes::-webkit-scrollbar {
height: 4px;
}
.results-grid {
grid-template-columns: 1fr;
}
.detail-header {
padding: 1.25rem 1rem;
border-radius: 0;
}
.detail-tabs {
padding: 0.75rem 0.75rem 0;
}
.tab-btn {
padding: 0.75rem 1rem;
}
.detail-body {
padding: 1rem;
}
.character-display {
font-size: 4rem;
}
.tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.info-grid {
grid-template-columns: 1fr;
}
/* Handwriting canvas responsive */
#hwCanvas {
max-width: 100%;
}
.hw-candidates {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 480px) {
.search-input {
font-size: 1rem;
}
.character-display {
font-size: 3rem;
}
.btn {
padding: 0.625rem 1rem;
font-size: 0.875rem;
}
.filter-tag {
padding: 0.375rem 0.75rem;
font-size: 0.8125rem;
}
.result-card {
padding: 1rem;
}
}
/* ============================================
TRANSLATION UI STYLES
============================================ */
.btn-translate {
background: linear-gradient(135deg, #208080 0%, #002040 100%);
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
}
.btn-translate:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(32, 128, 128, 0.3);
}
.translation-block {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--bg-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
box-shadow: var(--shadow-xl);
z-index: 1000;
max-width: 600px;
width: 90vw;
max-height: 90vh;
overflow-y: auto;
}
.translation-block.active {
display: block;
}
/* Overlay backdrop for translation */
.translation-overlay {
display: none;
position: fixed;
inset: 0;
background: var(--bg-overlay);
z-index: 999;
}
.translation-overlay.active {
display: block;
}
.translation-form {
margin-bottom: 20px;
}
.language-selectors {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.lang-group {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 120px;
}
.lang-group label {
font-size: 12px;
color: #6b7280;
font-weight: 500;
}
.lang-select {
padding: 8px 12px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
background: white;
transition: border-color 0.2s;
}
.lang-select:focus {
outline: none;
border-color: #208080;
}
.swap-langs {
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
margin-top: 16px;
}
.swap-langs:hover {
background: #e5e7eb;
transform: rotate(180deg);
}
.translation-input {
position: relative;
margin-bottom: 16px;
}
.translation-input textarea {
width: 100%;
padding: 12px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
resize: vertical;
transition: border-color 0.2s;
font-family: inherit;
}
.translation-input textarea:focus {
outline: none;
border-color: #208080;
}
.char-counter {
position: absolute;
bottom: 8px;
right: 12px;
font-size: 12px;
color: #9ca3af;
background: white;
padding: 2px 4px;
}
.translate-btn {
width: 100%;
background: linear-gradient(135deg, #208080 0%, #002040 100%);
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.translate-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(32, 128, 128, 0.3);
}
.translate-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.translation-results {
border-top: 1px solid #e5e7eb;
padding-top: 20px;
}
.result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.result-header h4 {
margin: 0;
color: #1f2937;
font-size: 16px;
}
.performance-info {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-end;
}
.confidence-score {
font-size: 12px;
color: #6b7280;
}
.confidence-score span:last-child {
font-weight: 600;
color: #059669;
}
.method-info {
font-size: 10px;
color: #9ca3af;
font-family: monospace;
}
.method-info:empty {
display: none;
}
.translated-text {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 16px;
font-size: 15px;
line-height: 1.6;
color: #1e293b;
margin-bottom: 16px;
white-space: pre-wrap;
transition: opacity 0.3s ease, transform 0.2s ease;
transform: translateY(0);
}
.translated-text.loading {
opacity: 0.6;
transform: translateY(-2px);
}
/* Animation for performance indicators */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.animate-pulse {
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
/* Button transitions */
.translate-btn {
transition: all 0.2s ease;
}
.translate-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.translate-btn:active:not(:disabled) {
transform: translateY(0);
}
.translate-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
/* Optimistic UI classes */
.text-gray-400 {
color: #9ca3af;
}
.text-gray-500 {
color: #6b7280;
}
.text-sm {
font-size: 0.875rem;
}
.translation-feedback {
background: #fafbfc;
border-radius: 8px;
padding: 16px;
border: 1px solid #e5e7eb;
}
.rating-section {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.rating-section span:first-child {
font-size: 14px;
color: #374151;
font-weight: 500;
}
.star-rating {
display: flex;
gap: 2px;
}
.star {
font-size: 20px;
color: #d1d5db;
cursor: pointer;
transition: color 0.2s;
user-select: none;
}
.star:hover,
.star.active {
color: #fbbf24;
}
.star.active {
text-shadow: 0 0 4px rgba(251, 191, 36, 0.3);
}
.feedback-section {
margin-top: 12px;
}
.feedback-section textarea,
.feedback-section input {
width: 100%;
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 13px;
margin-bottom: 8px;
transition: border-color 0.2s;
}
.feedback-section textarea:focus,
.feedback-section input:focus {
outline: none;
border-color: #208080;
}
.feedback-section textarea {
resize: vertical;
min-height: 60px;
}
#submitFeedback {
background: #10b981;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: background-color 0.2s;
}
#submitFeedback:hover {
background: #059669;
}
/* Responsive design for translation block */
@media (max-width: 768px) {
.language-selectors {
flex-direction: column;
gap: 8px;
}
.lang-group {
width: 100%;
}
.swap-langs {
margin-top: 0;
align-self: center;
}
.rating-section {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
/* Performance Optimizations & Animations */
.animate-spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Smooth transitions for better UX */
.translation-block {
transition: all 0.3s ease-in-out;
transform-origin: top;
}
.translation-results {
transition: all 0.3s ease-out;
will-change: opacity, transform;
}
.feedback-section {
transition: opacity 0.3s ease-in-out;
will-change: opacity;
}
/* Loading states */
.translation-input:disabled {
opacity: 0.7;
transition: opacity 0.2s ease;
}
.translate-btn {
transition: all 0.2s ease;
will-change: background-color, transform;
}
.translate-btn:active {
transform: scale(0.98);
}
/* Star rating animations */
.star {
transition: all 0.2s ease;
will-change: color, transform;
}
.star:hover {
transform: scale(1.1);
}
.star.filled {
animation: starFill 0.3s ease-out;
}
@keyframes starFill {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* Toast notifications */
#errorToast, #successToast {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
backdrop-filter: blur(8px);
will-change: transform;
}
/* Optimized scrolling */
html {
scroll-behavior: smooth;
}
/* Hardware acceleration for performance */
.header, .translation-block, .search-results {
backface-visibility: hidden;
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
.animate-spin {
animation: none;
}
.translation-block,
.translation-results,
.feedback-section,
.star {
transition: none;
}
html {
scroll-behavior: auto;
}
}
/* Cache indicator styling */
.confidence-score {
position: relative;
}
.confidence-score .cache-indicator {
position: absolute;
top: -8px;
right: -20px;
background: #e5e7eb;
color: #6b7280;
font-size: 10px;
padding: 2px 4px;
border-radius: 4px;
font-weight: normal;
}
/* Enhanced input focus states */
.translation-input:focus {
transform: scale(1.01);
transition: all 0.2s ease;
}
/* Micro-interactions for buttons */
.btn-icon, .translate-btn, .close-btn {
position: relative;
overflow: hidden;
}
.btn-icon::before, .translate-btn::before, .close-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease;
}
.btn-icon:active::before, .translate-btn:active::before, .close-btn:active::before {
width: 200px;
height: 200px;
}
/* Optimized font loading */
.font-chinese {
font-display: swap;
}
/* Preload important UI elements */
.translation-block::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
pointer-events: none;
}
/* Favorites Modal */
.favorites-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: var(--bg-overlay);
z-index: 1200;
align-items: center;
justify-content: center;
padding: 1rem;
}
.favorites-modal-overlay.active {
display: flex;
}
.favorites-modal-content {
background: var(--bg-primary);
border-radius: var(--radius-xl);
width: 100%;
max-width: 900px;
max-height: 90vh;
overflow: hidden;
box-shadow: var(--shadow-xl);
display: flex;
flex-direction: column;
}
.favorites-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid var(--border-color);
background: var(--bg-tertiary);
}
.favorites-header h2 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: 1.5rem;
color: var(--text-primary);
}
.favorites-controls {
display: flex;
gap: 1rem;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border-color);
background: var(--bg-secondary);
flex-wrap: wrap;
align-items: center;
}
.favorites-search {
position: relative;
flex: 1;
min-width: 200px;
}
.favorites-search input {
width: 100%;
padding: 0.5rem 2.5rem 0.5rem 1rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 0.875rem;
}
.favorites-search i {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-tertiary);
width: 16px;
height: 16px;
}
.favorites-sort {
display: flex;
align-items: center;
gap: 0.5rem;
}
.favorites-sort label {
font-size: 0.875rem;
color: var(--text-secondary);
white-space: nowrap;
}
.favorites-sort select {
padding: 0.5rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 0.875rem;
}
.favorites-actions {
display: flex;
gap: 0.5rem;
}
.favorites-actions .btn-secondary,
.favorites-actions .btn-danger {
padding: 0.5rem;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s;
}
.favorites-actions .btn-secondary {
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.favorites-actions .btn-secondary:hover {
background: var(--border-color);
color: var(--text-primary);
}
.favorites-actions .btn-danger {
background: var(--danger-color);
color: white;
}
.favorites-actions .btn-danger:hover {
background: #dc2626;
}
.favorites-stats {
padding: 1rem 1.5rem;
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border-color);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
}
.stat-item {
text-align: center;
}
.stat-value {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.stat-label {
font-size: 0.75rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hsk-stats {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--border-color);
font-size: 0.875rem;
color: var(--text-secondary);
}
.favorites-list {
flex: 1;
overflow-y: auto;
padding: 1rem 1.5rem;
}
.empty-favorites {
text-align: center;
padding: 4rem 2rem;
color: var(--text-tertiary);
}
.empty-favorites i {
margin-bottom: 1rem;
color: var(--text-tertiary);
}
.empty-favorites p {
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
.favorite-item {
display: flex;
gap: 1rem;
padding: 1rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
margin-bottom: 0.75rem;
cursor: pointer;
transition: all 0.2s;
}
.favorite-item:hover {
border-color: var(--primary-color);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.favorite-char {
font-family: var(--font-chinese);
font-size: 2.5rem;
line-height: 1;
color: var(--primary-color);
min-width: 3rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.favorite-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.favorite-pinyin {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.favorite-meaning {
color: var(--text-secondary);
font-size: 0.875rem;
}
.favorite-meta {
display: flex;
gap: 0.75rem;
align-items: center;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.hsk-badge {
background: var(--warning-color);
color: white;
padding: 0.125rem 0.5rem;
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 600;
}
.strokes {
font-size: 0.75rem;
color: var(--text-tertiary);
}
.added-date {
font-size: 0.75rem;
color: var(--text-tertiary);
}
.favorite-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
justify-content: center;
}
.favorite-actions .btn-view,
.favorite-actions .btn-remove-favorite {
padding: 0.5rem;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s;
background: transparent;
}
.favorite-actions .btn-view {
color: var(--primary-color);
}
.favorite-actions .btn-view:hover {
background: rgba(59, 130, 246, 0.1);
}
.favorite-actions .btn-remove-favorite {
color: var(--danger-color);
}
.favorite-actions .btn-remove-favorite:hover {
background: rgba(239, 68, 68, 0.1);
}
/* Save/favorite button in search results */
.save-word-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 2rem;
height: 2rem;
border: none;
background: transparent;
font-size: 1.25rem;
cursor: pointer;
color: var(--text-tertiary);
transition: all 0.2s;
z-index: 10;
}
.save-word-btn:hover {
transform: scale(1.1);
color: var(--danger-color);
}
.save-word-btn.favorited {
color: var(--danger-color);
}
/* Responsive favorites modal */
@media (max-width: 768px) {
.favorites-modal-content {
margin: 0.5rem;
max-height: 95vh;
}
.favorites-controls {
flex-direction: column;
gap: 0.75rem;
align-items: stretch;
}
.favorites-search {
min-width: auto;
}
.favorites-sort {
justify-content: space-between;
}
.stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.favorite-item {
gap: 0.75rem;
padding: 0.75rem;
}
.favorite-char {
font-size: 2rem;
min-width: 2.5rem;
}
.favorite-actions {
flex-direction: row;
}
}
/* ========================================
Etymology Admin Interface Styles
======================================== */
.etymology-admin-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1100;
display: none;
padding: 2rem;
box-sizing: border-box;
}
.etymology-admin-overlay.active {
display: flex;
align-items: center;
justify-content: center;
}
.etymology-admin-content {
background: var(--background-color);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 1200px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.etymology-admin-header {
padding: 1.5rem 2rem;
border-bottom: 1px solid var(--border-color);
background: var(--surface-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.etymology-admin-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-color);
margin: 0;
}
.etymology-admin-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--text-tertiary);
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.etymology-admin-close:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.etymology-admin-body {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.etymology-admin-toolbar {
padding: 1rem 2rem;
background: var(--surface-color);
border-bottom: 1px solid var(--border-color);
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
.etymology-toolbar-group {
display: flex;
gap: 0.5rem;
align-items: center;
}
.etymology-toolbar-btn {
padding: 0.5rem 1rem;
border: 1px solid var(--border-color);
background: var(--background-color);
border-radius: var(--radius-md);
cursor: pointer;
font-size: 0.875rem;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.5rem;
}
.etymology-toolbar-btn:hover {
background: var(--bg-hover);
border-color: var(--primary-color);
}
.etymology-toolbar-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.etymology-toolbar-btn.primary {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.etymology-toolbar-btn.primary:hover {
background: var(--primary-dark);
}
.etymology-character-display {
font-family: var(--font-chinese);
font-size: 2rem;
font-weight: bold;
color: var(--primary-color);
padding: 0.5rem 1rem;
border: 2px solid var(--primary-color);
border-radius: var(--radius-lg);
background: rgba(var(--primary-rgb), 0.1);
}
.etymology-admin-main {
flex: 1;
overflow: hidden;
display: flex;
}
.etymology-admin-tabs {
display: flex;
background: var(--surface-color);
border-bottom: 1px solid var(--border-color);
}
.etymology-tab {
padding: 1rem 1.5rem;
border: none;
background: transparent;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
font-size: 0.875rem;
font-weight: 500;
}
.etymology-tab:hover {
background: var(--bg-hover);
}
.etymology-tab.active {
border-bottom-color: var(--primary-color);
color: var(--primary-color);
background: var(--background-color);
}
.etymology-tab-content {
flex: 1;
overflow: auto;
padding: 2rem;
}
.etymology-form-section {
margin-bottom: 2rem;
}
.etymology-form-section h3 {
margin: 0 0 1rem 0;
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.etymology-form-section h3 i {
color: var(--primary-color);
}
.etymology-form-group {
margin-bottom: 1.5rem;
}
.etymology-form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--text-primary);
font-size: 0.875rem;
}
.etymology-form-label.required:after {
content: ' *';
color: var(--danger-color);
}
.etymology-form-input,
.etymology-form-textarea,
.etymology-form-select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 0.875rem;
transition: all 0.2s;
background: var(--background-color);
box-sizing: border-box;
}
.etymology-form-input:focus,
.etymology-form-textarea:focus,
.etymology-form-select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}
.etymology-form-textarea {
min-height: 100px;
resize: vertical;
font-family: inherit;
}
.etymology-form-textarea.large {
min-height: 150px;
}
.etymology-character-input {
font-family: var(--font-chinese);
font-size: 1.5rem;
text-align: center;
max-width: 100px;
}
.etymology-components-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.etymology-component-item {
display: flex;
gap: 1rem;
align-items: center;
padding: 1rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
background: var(--surface-color);
}
.etymology-component-char {
font-family: var(--font-chinese);
font-size: 1.5rem;
font-weight: bold;
min-width: 3rem;
text-align: center;
color: var(--primary-color);
}
.etymology-component-fields {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: 1rem;
}
.etymology-component-remove {
background: var(--danger-color);
color: white;
border: none;
border-radius: var(--radius-md);
width: 2rem;
height: 2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.etymology-component-remove:hover {
background: var(--danger-dark);
transform: scale(1.1);
}
.etymology-add-component {
padding: 1rem;
border: 2px dashed var(--border-color);
border-radius: var(--radius-lg);
background: transparent;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--text-tertiary);
font-size: 0.875rem;
}
.etymology-add-component:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(var(--primary-rgb), 0.05);
}
.etymology-preview {
background: var(--surface-color);
border-radius: var(--radius-lg);
padding: 2rem;
margin-top: 1rem;
}
.etymology-preview h4 {
margin: 0 0 1rem 0;
color: var(--primary-color);
font-size: 1.125rem;
}
.etymology-preview-character {
font-family: var(--font-chinese);
font-size: 3rem;
font-weight: bold;
color: var(--primary-color);
text-align: center;
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--background-color);
border-radius: var(--radius-lg);
border: 2px solid var(--primary-color);
}
.etymology-preview-section {
margin-bottom: 1.5rem;
}
.etymology-preview-section h5 {
margin: 0 0 0.5rem 0;
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.etymology-preview-text {
color: var(--text-secondary);
line-height: 1.6;
padding: 0.75rem;
background: var(--background-color);
border-radius: var(--radius-md);
border-left: 3px solid var(--primary-color);
}
.etymology-preview-components {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.etymology-preview-component {
background: var(--background-color);
border-radius: var(--radius-md);
padding: 1rem;
border: 1px solid var(--border-color);
}
.etymology-preview-component-char {
font-family: var(--font-chinese);
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
text-align: center;
margin-bottom: 0.5rem;
}
.etymology-history-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.etymology-history-item {
background: var(--surface-color);
border-radius: var(--radius-lg);
padding: 1.5rem;
border: 1px solid var(--border-color);
}
.etymology-history-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.etymology-history-version {
font-weight: 600;
color: var(--primary-color);
}
.etymology-history-date {
color: var(--text-tertiary);
font-size: 0.875rem;
}
.etymology-history-changes {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.etymology-history-change {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.5rem;
background: var(--background-color);
border-radius: var(--radius-md);
font-size: 0.875rem;
}
.etymology-history-field {
font-weight: 500;
min-width: 100px;
color: var(--text-primary);
}
.etymology-history-value {
flex: 1;
color: var(--text-secondary);
}
.etymology-history-value.added {
color: var(--success-color);
background: rgba(var(--success-rgb), 0.1);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
}
.etymology-history-value.removed {
color: var(--danger-color);
background: rgba(var(--danger-rgb), 0.1);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
}
.etymology-status-indicator {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
}
.etymology-status-indicator.saved {
background: rgba(var(--success-rgb), 0.1);
color: var(--success-color);
}
.etymology-status-indicator.modified {
background: rgba(var(--warning-rgb), 0.1);
color: var(--warning-color);
}
.etymology-status-indicator.error {
background: rgba(var(--danger-rgb), 0.1);
color: var(--danger-color);
}
.etymology-image-upload {
border: 2px dashed var(--border-color);
border-radius: var(--radius-lg);
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.2s;
background: var(--surface-color);
}
.etymology-image-upload:hover {
border-color: var(--primary-color);
background: rgba(var(--primary-rgb), 0.05);
}
.etymology-image-upload.drag-over {
border-color: var(--primary-color);
background: rgba(var(--primary-rgb), 0.1);
}
.etymology-image-preview {
max-width: 200px;
max-height: 200px;
border-radius: var(--radius-md);
margin: 1rem auto;
display: block;
border: 1px solid var(--border-color);
}
/* Responsive etymology admin */
@media (max-width: 1024px) {
.etymology-admin-overlay {
padding: 1rem;
}
.etymology-admin-content {
max-width: 95%;
}
.etymology-component-fields {
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.etymology-preview-components {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.etymology-admin-overlay {
padding: 0.5rem;
}
.etymology-admin-header {
padding: 1rem;
}
.etymology-admin-toolbar {
padding: 0.75rem 1rem;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.etymology-toolbar-group {
justify-content: center;
}
.etymology-tab-content {
padding: 1rem;
}
.etymology-component-item {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.etymology-component-fields {
grid-template-columns: 1fr;
}
.etymology-component-char {
min-width: auto;
padding: 0.5rem;
background: var(--background-color);
border-radius: var(--radius-md);
}
.etymology-preview-character {
font-size: 2.5rem;
padding: 0.75rem;
}
.etymology-history-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
/* New responsive styles for refactored layout */
.search-input-wrapper {
min-width: 100%;
}
.search-input-container {
flex-direction: column;
}
.btn-search {
width: 100%;
justify-content: center;
}
.search-actions {
flex-direction: row;
justify-content: center;
}
.action-btn {
flex: 1;
min-width: 0;
padding: 0.625rem 0.75rem;
font-size: 0.85rem;
}
.action-btn span {
display: none;
}
.action-btn i {
margin: 0;
}
.filter-label {
display: none;
}
.filter-tag {
padding: 0.375rem 0.75rem;
font-size: 0.8rem;
}
.results-header {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.results-controls {
justify-content: space-between;
}
.empty-suggestions {
flex-direction: column;
}
.stats-section {
gap: 1rem;
padding: 1rem;
}
.stat-item {
min-width: 70px;
}
.stat-value {
font-size: 1.1rem;
}
.stat-label {
font-size: 0.7rem;
}
}