1- .poem-dialog {
2- width : 540px ;
3- max-width : 90% ;
4- height : 600px ;
5- border : 3px solid var (--color );
6- border-radius : 24px ;
7- background-color : var (--container-bg );
8- padding : 1.5rem ;
9- box-shadow : 0 15px 30px rgba (0 , 0 , 0 , 0.2 );
10- position : fixed;
11- transform : translate (-50% , -50% );
12- overflow : hidden;
13- color : var (--color );
14- }
15-
16- /* === Modal Content === */
17- .modal-content {
18- display : flex;
19- flex-direction : column;
20- justify-content : flex-start;
21- height : 100% ;
22- position : relative;
23- }
24-
25- /* === Top bar: speaker + close === */
26- .modal-content > .model-buttons > button .speaker-btn ,
27- .modal-content > .model-buttons > button .close {
28- background : none;
29- border : none;
30- padding : 0 ;
31- cursor : pointer;
32- width : 48px ;
33- height : 48px ;
34- }
35-
36- .modal-content > .model-buttons > button svg {
37- width : 44px ;
38- height : 44px ;
39- stroke : var (--color );
40- fill : none;
41- }
42-
43- .modal-content > .model-buttons > button : focus {
44- outline : none;
45- box-shadow : none;
46- }
47-
48- .modal-content .model-buttons {
49- display : flex;
50- align-items : center;
51- justify-content : space-between;
52- }
53-
54- /* === Title & Lines === */
55- .modal-title {
56- margin-top : 3.2rem ;
57- font-size : 3rem ;
58- font-weight : 600 ;
59- text-align : center;
60- }
61-
62- .lines {
63- white-space : pre-line;
64- line-height : 1.6 ;
65- padding : 0 1rem ;
66- overflow-y : auto;
67- flex-grow : 1 ;
68- font-size : 1.5rem ;
69- text-align : center;
70- }
71-
72- /* === Scroll styling (optional) === */
73- .lines ::-webkit-scrollbar {
74- width : 6px ;
75- }
76-
77- .lines ::-webkit-scrollbar-thumb {
78- background : rgba (0 , 0 , 0 , 0.2 );
79- border-radius : 3px ;
80- }
81-
82- /* === Responsive === */
83- @media (max-width : 480px ) {
84- .poem-dialog {
85- width : 90% ;
86- height : 400px ;
87- }
88-
89- .title {
90- font-size : 1.25rem ;
91- }
92-
93- .lines {
94- font-size : 0.95rem ;
95- }
96- }
1+ .poem-dialog {
2+ width : 540px ;
3+ max-width : 90% ;
4+ height : 600px ;
5+ border : 3px solid var (--color );
6+ border-radius : 24px ;
7+ background-color : var (--container-bg );
8+ padding : 1.5rem ;
9+ box-shadow : 0 15px 30px rgba (0 , 0 , 0 , 0.2 );
10+ position : fixed;
11+ transform : translate (-50% , -50% );
12+ overflow : hidden;
13+ color : var (--color );
14+ }
15+
16+ /* === Modal Content === */
17+ .modal-content {
18+ display : flex;
19+ flex-direction : column;
20+ justify-content : flex-start;
21+ height : 100% ;
22+ position : relative;
23+ }
24+
25+ /* === Top bar: speaker + close === */
26+ .modal-content > .model-buttons > button .speaker-btn ,
27+ .modal-content > .model-buttons > button .close {
28+ background : none;
29+ border : none;
30+ padding : 0 ;
31+ cursor : pointer;
32+ width : 48px ;
33+ height : 48px ;
34+ }
35+
36+ .modal-content > .model-buttons > button svg {
37+ width : 44px ;
38+ height : 44px ;
39+ stroke : var (--color );
40+ fill : none;
41+ }
42+
43+ .modal-content > .model-buttons > button : focus {
44+ outline : none;
45+ box-shadow : none;
46+ }
47+
48+ .modal-content .model-buttons {
49+ display : flex;
50+ align-items : center;
51+ justify-content : space-between;
52+ }
53+
54+ /* === Title & Lines === */
55+ .modal-title {
56+ margin-top : 3.2rem ;
57+ font-size : 3rem ;
58+ font-weight : 600 ;
59+ text-align : center;
60+ }
61+
62+ .lines {
63+ white-space : pre-line;
64+ line-height : 1.6 ;
65+ padding : 0 1rem ;
66+ overflow-y : auto;
67+ flex-grow : 1 ;
68+ font-size : 1.5rem ;
69+ text-align : center;
70+ }
71+
72+ /* === Scroll styling (optional) === */
73+ .lines ::-webkit-scrollbar {
74+ width : 6px ;
75+ }
76+
77+ .lines ::-webkit-scrollbar-thumb {
78+ background : rgba (0 , 0 , 0 , 0.2 );
79+ border-radius : 3px ;
80+ }
81+
82+ /* === Responsive === */
83+ @media (max-width : 480px ) {
84+ .poem-dialog {
85+ width : 90% ;
86+ height : 400px ;
87+ }
88+
89+ .title {
90+ font-size : 1.25rem ;
91+ }
92+
93+ .lines {
94+ font-size : 0.95rem ;
95+ }
96+ }
0 commit comments