Skip to content

Commit ff13740

Browse files
rodrigomiquilinorodrigomiquilino
committed
feat: implement glossary and translation features with dedicated pages, styles, and scripts
1 parent 8c3bcc8 commit ff13740

File tree

5 files changed

+822
-100
lines changed

5 files changed

+822
-100
lines changed

‎docs/assets/css/glossary.css‎

Lines changed: 123 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -420,16 +420,16 @@
420420
cursor: not-allowed;
421421
}
422422

423-
/* ========== TERM MODAL ========== */
423+
/* ========== TERM MODAL - NOTION STYLE REDESIGN ========== */
424424
.modal-overlay {
425425
display: none;
426426
position: fixed;
427427
top: 0;
428428
left: 0;
429429
width: 100%;
430430
height: 100%;
431-
background: rgba(0, 0, 0, 0.8);
432-
backdrop-filter: blur(5px);
431+
background: rgba(0, 0, 0, 0.85);
432+
backdrop-filter: blur(8px);
433433
z-index: 1000;
434434
justify-content: center;
435435
align-items: center;
@@ -441,70 +441,94 @@
441441
}
442442

443443
.term-modal-content {
444-
background: linear-gradient(135deg, var(--bg-darker), var(--bg-dark));
445-
border: 1px solid rgba(201, 162, 39, 0.3);
444+
background: linear-gradient(180deg, #1a1a22 0%, #12121a 100%);
445+
border: 1px solid rgba(255, 255, 255, 0.08);
446446
border-radius: 16px;
447447
width: 100%;
448-
max-width: 600px;
448+
max-width: 640px;
449449
max-height: 90vh;
450-
overflow-y: auto;
451-
animation: modalSlideIn 0.3s ease;
450+
overflow: hidden;
451+
box-shadow:
452+
0 25px 50px -12px rgba(0, 0, 0, 0.7),
453+
0 0 0 1px rgba(255, 255, 255, 0.05);
454+
animation: notionModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
452455
}
453456

454-
@keyframes modalSlideIn {
457+
@keyframes notionModalIn {
455458
from {
456459
opacity: 0;
457-
transform: translateY(-20px);
460+
transform: translateY(-10px) scale(0.98);
458461
}
459462
to {
460463
opacity: 1;
461-
transform: translateY(0);
464+
transform: translateY(0) scale(1);
462465
}
463466
}
464467

468+
/* Modal Header */
465469
.term-modal-content .modal-header {
466470
display: flex;
467471
justify-content: space-between;
468472
align-items: center;
469473
padding: 1.25rem 1.5rem;
470-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
474+
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
475+
background: rgba(255, 255, 255, 0.02);
471476
}
472477

473478
.term-modal-content .modal-header h3 {
474479
font-family: 'Cinzel', serif;
480+
font-size: 1.25rem;
481+
font-weight: 600;
475482
color: var(--gold);
476-
font-size: 1.5rem;
477483
margin: 0;
484+
text-shadow: 0 0 20px rgba(201, 162, 39, 0.3);
478485
}
479486

480487
.modal-close {
481-
background: none;
488+
width: 32px;
489+
height: 32px;
490+
display: flex;
491+
align-items: center;
492+
justify-content: center;
493+
background: transparent;
482494
border: none;
495+
border-radius: 8px;
483496
color: var(--text-secondary);
484-
font-size: 2rem;
497+
font-size: 1.5rem;
485498
cursor: pointer;
486-
line-height: 1;
487-
transition: color 0.3s ease;
499+
transition: all 0.15s ease;
488500
}
489501

490502
.modal-close:hover {
503+
background: rgba(255, 255, 255, 0.06);
491504
color: var(--gold);
492505
}
493506

507+
/* Modal Body */
494508
.term-modal-content .modal-body {
495509
padding: 1.5rem;
510+
overflow-y: auto;
511+
max-height: calc(90vh - 160px);
496512
}
497513

514+
/* Detail Grid - Notion Property Layout */
498515
.term-detail-grid {
499-
display: grid;
500-
grid-template-columns: 1fr 1fr;
501-
gap: 1rem;
516+
display: flex;
517+
flex-direction: column;
518+
gap: 0.75rem;
502519
}
503520

504521
.detail-section {
505-
background: rgba(0, 0, 0, 0.2);
506-
border-radius: 8px;
507-
padding: 1rem;
522+
background: rgba(255, 255, 255, 0.02);
523+
border: 1px solid rgba(255, 255, 255, 0.05);
524+
border-radius: 10px;
525+
padding: 1rem 1.25rem;
526+
transition: all 0.2s ease;
527+
}
528+
529+
.detail-section:hover {
530+
background: rgba(255, 255, 255, 0.04);
531+
border-color: rgba(255, 255, 255, 0.08);
508532
}
509533

510534
.detail-section.full-width {
@@ -515,35 +539,48 @@
515539
display: flex;
516540
align-items: center;
517541
gap: 0.5rem;
518-
font-size: 0.8rem;
542+
font-size: 0.7rem;
543+
font-weight: 600;
519544
color: var(--text-secondary);
520-
margin-bottom: 0.5rem;
521545
text-transform: uppercase;
522-
letter-spacing: 0.5px;
546+
letter-spacing: 0.8px;
547+
margin-bottom: 0.6rem;
523548
}
524549

525550
.detail-section label i {
551+
font-size: 0.8rem;
526552
color: var(--gold);
553+
opacity: 0.8;
527554
}
528555

529556
.detail-value {
530557
font-size: 1rem;
531558
color: var(--text-primary);
532559
word-break: break-word;
560+
line-height: 1.5;
533561
}
534562

535563
.detail-value.translation {
536564
color: var(--gold);
537565
font-weight: 600;
566+
font-size: 1.1rem;
567+
padding: 0.5rem 0.75rem;
568+
background: rgba(201, 162, 39, 0.1);
569+
border-radius: 6px;
570+
border-left: 3px solid var(--gold);
538571
}
539572

540573
.detail-value.chinese {
541-
font-size: 1.5rem;
574+
font-size: 1.75rem;
575+
letter-spacing: 2px;
576+
padding: 0.5rem 0;
542577
}
543578

544579
.detail-value.context {
545-
line-height: 1.5;
580+
line-height: 1.6;
546581
color: var(--text-secondary);
582+
font-size: 0.9rem;
583+
font-style: italic;
547584
}
548585

549586
.detail-value.aliases {
@@ -553,79 +590,111 @@
553590
}
554591

555592
.detail-value.aliases span {
556-
background: rgba(201, 162, 39, 0.2);
557-
padding: 0.25rem 0.5rem;
558-
border-radius: 4px;
559-
font-size: 0.85rem;
593+
display: inline-flex;
594+
align-items: center;
595+
padding: 0.35rem 0.7rem;
596+
background: rgba(201, 162, 39, 0.12);
597+
border: 1px solid rgba(201, 162, 39, 0.25);
598+
border-radius: 6px;
599+
font-size: 0.8rem;
600+
font-weight: 500;
560601
color: var(--gold);
602+
transition: all 0.15s ease;
561603
}
562604

605+
.detail-value.aliases span:hover {
606+
background: rgba(201, 162, 39, 0.2);
607+
border-color: var(--gold);
608+
}
609+
610+
/* Category Badge */
563611
.category-badge {
564612
display: inline-flex;
565613
align-items: center;
566-
gap: 0.4rem;
567-
padding: 0.4rem 0.8rem;
568-
border-radius: 6px;
614+
gap: 0.5rem;
615+
padding: 0.5rem 0.9rem;
616+
border-radius: 8px;
569617
font-size: 0.85rem;
618+
font-weight: 500;
619+
transition: all 0.2s ease;
620+
}
621+
622+
.category-badge:hover {
623+
transform: scale(1.02);
570624
}
571625

626+
/* Status Badge */
572627
.status-badge {
573-
display: inline-block;
574-
padding: 0.4rem 0.8rem;
575-
border-radius: 6px;
628+
display: inline-flex;
629+
align-items: center;
630+
padding: 0.5rem 0.9rem;
631+
border-radius: 8px;
576632
font-size: 0.85rem;
577633
font-weight: 600;
634+
letter-spacing: 0.3px;
578635
}
579636

580637
.status-badge.translate {
581-
background: rgba(39, 174, 96, 0.2);
582-
color: #27ae60;
638+
background: rgba(39, 174, 96, 0.15);
639+
color: #4ade80;
640+
border: 1px solid rgba(39, 174, 96, 0.3);
583641
}
584642

585643
.status-badge.no-translate {
586-
background: rgba(231, 76, 60, 0.2);
587-
color: #e74c3c;
644+
background: rgba(231, 76, 60, 0.15);
645+
color: #f87171;
646+
border: 1px solid rgba(231, 76, 60, 0.3);
588647
}
589648

649+
/* Modal Footer */
590650
.term-modal-content .modal-footer {
591651
display: flex;
592652
justify-content: flex-end;
593-
gap: 1rem;
653+
gap: 0.75rem;
594654
padding: 1rem 1.5rem;
595-
border-top: 1px solid rgba(255, 255, 255, 0.1);
655+
border-top: 1px solid rgba(255, 255, 255, 0.06);
656+
background: rgba(0, 0, 0, 0.15);
596657
}
597658

598659
.btn-copy {
599-
display: flex;
660+
display: inline-flex;
600661
align-items: center;
601662
gap: 0.5rem;
602-
padding: 0.75rem 1.25rem;
663+
padding: 0.65rem 1.25rem;
603664
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
604665
border: none;
605666
border-radius: 8px;
606667
color: var(--bg-dark);
607668
font-weight: 600;
669+
font-size: 0.85rem;
608670
cursor: pointer;
609-
transition: all 0.3s ease;
671+
transition: all 0.2s ease;
610672
}
611673

612674
.btn-copy:hover {
613-
transform: translateY(-2px);
614-
box-shadow: 0 4px 15px rgba(201, 162, 39, 0.3);
675+
transform: translateY(-1px);
676+
box-shadow: 0 4px 12px rgba(201, 162, 39, 0.35);
677+
}
678+
679+
.btn-copy:active {
680+
transform: translateY(0);
615681
}
616682

617683
.btn-close {
618-
padding: 0.75rem 1.25rem;
619-
background: rgba(255, 255, 255, 0.1);
620-
border: 1px solid rgba(255, 255, 255, 0.2);
684+
padding: 0.65rem 1.25rem;
685+
background: transparent;
686+
border: 1px solid rgba(255, 255, 255, 0.12);
621687
border-radius: 8px;
622688
color: var(--text-primary);
689+
font-size: 0.85rem;
690+
font-weight: 500;
623691
cursor: pointer;
624-
transition: all 0.3s ease;
692+
transition: all 0.15s ease;
625693
}
626694

627695
.btn-close:hover {
628-
border-color: var(--text-primary);
696+
background: rgba(255, 255, 255, 0.04);
697+
border-color: rgba(255, 255, 255, 0.2);
629698
}
630699

631700
/* ========== RESPONSIVE ========== */

0 commit comments

Comments
 (0)