Skip to content

Commit 5969ef9

Browse files
Shree2124Shree2124
committed
refactor(UI): Redesign the icons style
1 parent 3305a76 commit 5969ef9

3 files changed

Lines changed: 144 additions & 20 deletions

File tree

‎.gitignore‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ mood_analysis/mood_cache.json
66
*.cache
77

88
# Environment variables
9-
/.env
10-
/.env.local
11-
/.env.production
12-
/.env.development
9+
*/.env
10+
*/.env.local
11+
*/.env.production
12+
*/.env.development
1313

1414
# Sensitive local files
1515
*.token

‎frontend/css/style.css‎

Lines changed: 69 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -505,7 +505,7 @@ textarea:focus {
505505
transform: rotateY(180deg);
506506
background: var(--paper-color);
507507
/* Paper color */
508-
padding: 1.5rem;
508+
padding: 1.2rem 0.6rem;
509509
display: flex;
510510
flex-direction: column;
511511
justify-content: space-between;
@@ -634,10 +634,13 @@ textarea:focus {
634634
}
635635

636636
.book__face--back .book-actions {
637-
justify-content: space-around;
638-
padding: 0 10px;
637+
display: flex;
638+
justify-content: center;
639+
gap: 6px;
640+
padding: 8px 4px;
639641
width: 100%;
640-
margin-bottom: -6px;
642+
margin-top: auto;
643+
margin-bottom: 2px;
641644
}
642645

643646
.book-actions {
@@ -663,6 +666,66 @@ textarea:focus {
663666
transform: scale(1.08);
664667
}
665668

669+
/* Elegant, high-visibility tactile action buttons on flipped cards */
670+
.book__face--back .book-actions .btn-icon {
671+
width: 28px !important;
672+
height: 28px !important;
673+
border-radius: 50% !important;
674+
background: #ffffff !important;
675+
border: 1.5px solid #5d4037 !important;
676+
color: #5d4037 !important;
677+
opacity: 1 !important;
678+
box-shadow: 0 2px 4px rgba(93, 64, 55, 0.12) !important;
679+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
680+
display: inline-flex !important;
681+
align-items: center !important;
682+
justify-content: center !important;
683+
padding: 0 !important;
684+
margin: 0 !important;
685+
flex-shrink: 0 !important;
686+
box-sizing: border-box !important;
687+
}
688+
689+
.book__face--back .book-actions .btn-icon i {
690+
font-size: 11px !important;
691+
width: auto !important;
692+
height: auto !important;
693+
display: inline-flex !important;
694+
align-items: center !important;
695+
justify-content: center !important;
696+
}
697+
698+
.book__face--back .book-actions .btn-icon:hover {
699+
opacity: 1 !important;
700+
background: #3e2723 !important;
701+
color: #fffdf9 !important;
702+
border-color: #3e2723 !important;
703+
transform: translateY(-2px) scale(1.08) !important;
704+
box-shadow: 0 3px 8px rgba(62, 39, 35, 0.25) !important;
705+
}
706+
707+
/* Mood magic button custom contrast */
708+
.book__face--back .book-actions .btn-icon.mood-btn {
709+
color: #b58d12 !important;
710+
border-color: #e5c158 !important;
711+
background: #fffef2 !important;
712+
}
713+
714+
.book__face--back .book-actions .btn-icon.mood-btn:hover {
715+
background: #b58d12 !important;
716+
color: #fffdf9 !important;
717+
border-color: #b58d12 !important;
718+
}
719+
720+
/* Add to library button when checked */
721+
.book__face--back .book-actions .btn-icon .fa-check {
722+
color: #2e7d32 !important;
723+
}
724+
725+
.book__face--back .book-actions .btn-icon:hover .fa-check {
726+
color: #fffdf9 !important;
727+
}
728+
666729
/* --- Virtual Shelves --- */
667730
.shelves-container {
668731
width: 100%;
@@ -4956,7 +5019,7 @@ textarea:focus {
49565019
transform: rotateY(180deg) translateZ(calc(var(--book-thick) * 0.5));
49575020
background: var(--paper-color);
49585021
border-radius: 6px 4px 4px 6px;
4959-
padding: 1.5rem;
5022+
padding: 1rem;
49605023
display: flex;
49615024
flex-direction: column;
49625025
justify-content: space-between;
@@ -6927,7 +6990,7 @@ body.night-mode .tooltip-author {
69276990
color: var(--text-muted);
69286991
}
69296992

6930-
/* PR 881 - Centering Fixes for Library Icons */
6993+
/* PR 881 - Centering Fixes for Library Icons - Removed duplicate button size override to prevent squished layout */
69316994
.book__face--back .book-actions .btn-icon i,
69326995
.library-actions-group button i {
69336996
font-size: 16px !important;
@@ -6938,15 +7001,6 @@ body.night-mode .tooltip-author {
69387001
justify-content: center;
69397002
}
69407003

6941-
.book__face--back .book-actions .btn-icon {
6942-
width: 32px;
6943-
height: 32px;
6944-
padding: 0;
6945-
display: inline-flex;
6946-
align-items: center;
6947-
justify-content: center;
6948-
}
6949-
69507004
.library-actions-group button {
69517005
padding: 0.5rem 1rem;
69527006
display: inline-flex;

‎frontend/css/style_main.css‎

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,7 @@ main {
355355
transform: rotateY(180deg);
356356
background: var(--paper-color);
357357
/* Paper color */
358-
padding: 1.5rem;
358+
padding: 1.2rem 0.6rem;
359359
display: flex;
360360
flex-direction: column;
361361
justify-content: space-between;
@@ -472,6 +472,76 @@ main {
472472
transform: scale(1.1);
473473
}
474474

475+
/* Elegant, high-visibility tactile action buttons on flipped cards */
476+
.book__face--back .book-actions {
477+
display: flex;
478+
justify-content: center;
479+
gap: 6px;
480+
padding: 8px 4px;
481+
width: 100%;
482+
margin-top: auto;
483+
margin-bottom: 2px;
484+
}
485+
486+
.book__face--back .book-actions .btn-icon {
487+
width: 28px !important;
488+
height: 28px !important;
489+
border-radius: 50% !important;
490+
background: #ffffff !important;
491+
border: 1.5px solid #5d4037 !important;
492+
color: #5d4037 !important;
493+
opacity: 1 !important;
494+
box-shadow: 0 2px 4px rgba(93, 64, 55, 0.12) !important;
495+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
496+
display: inline-flex !important;
497+
align-items: center !important;
498+
justify-content: center !important;
499+
padding: 0 !important;
500+
margin: 0 !important;
501+
flex-shrink: 0 !important;
502+
box-sizing: border-box !important;
503+
}
504+
505+
.book__face--back .book-actions .btn-icon i {
506+
font-size: 11px !important;
507+
width: auto !important;
508+
height: auto !important;
509+
display: inline-flex !important;
510+
align-items: center !important;
511+
justify-content: center !important;
512+
}
513+
514+
.book__face--back .book-actions .btn-icon:hover {
515+
opacity: 1 !important;
516+
background: #3e2723 !important;
517+
color: #fffdf9 !important;
518+
border-color: #3e2723 !important;
519+
transform: translateY(-2px) scale(1.08) !important;
520+
box-shadow: 0 3px 8px rgba(62, 39, 35, 0.25) !important;
521+
}
522+
523+
/* Mood magic button custom contrast */
524+
.book__face--back .book-actions .btn-icon.mood-btn {
525+
color: #b58d12 !important;
526+
border-color: #e5c158 !important;
527+
background: #fffef2 !important;
528+
}
529+
530+
.book__face--back .book-actions .btn-icon.mood-btn:hover {
531+
background: #b58d12 !important;
532+
color: #fffdf9 !important;
533+
border-color: #b58d12 !important;
534+
}
535+
536+
/* Add to library button when checked */
537+
.book__face--back .book-actions .btn-icon .fa-check {
538+
color: #2e7d32 !important;
539+
}
540+
541+
.book__face--back .book-actions .btn-icon:hover .fa-check {
542+
color: #fffdf9 !important;
543+
}
544+
475545
/* --- Virtual Shelves --- */
476546
.shelves-container {
477547
display: flex;

0 commit comments

Comments
 (0)