1- body .no-animation {
2- .context-menu {
3- border : solid 1px rgba ($color : #000000 , $alpha : 0.2 );
4- }
5- }
6-
7- .context-menu {
8- z-index : 111 ;
9- box-sizing : border-box ;
10- position : fixed ;
11- width : fit-content ;
12- min-width : 220px ;
13- max-width : 320px ;
14- min-height : 40px ;
15- max-height : calc (100vh - 38px );
16- overflow-y : auto ;
17- user-select : none ;
18- background-color : rgb (255 , 255 , 255 );
19- background-color : var (--popup-background-color );
20- box-shadow : 0 0 4px rgba (0 , 0 , 0 , 0.2 );
21- box-shadow : 0 0 4px var (--box-shadow-color );
22- border-radius : 4px ;
23-
24- transform-origin : top center ;
25- animation : menu- grow 100ms ease 1 ;
26-
27- list-style : none ;
28- padding : 0 ;
29- border : solid 1px transparent ;
30- border : solid 1px var (--popup-border-color );
31-
32- & +.mask {
33- z-index : 110 ;
34- }
35-
36- & .disabled {
37- li {
38- pointer-events : none ;
39- opacity : 0.5 ;
40- }
41- }
42-
43- hr {
44- border : none ;
45- border-bottom : solid 1px rgba (122 , 122 , 122 , 0.227 );
46- border-bottom : solid 1px var (--border-color );
47- }
48-
49- li {
50- display : flex ;
51- height : 50px ;
52- align-items : center ;
53- padding : 0 10px ;
54- user-select : none ;
55-
56- & .notice ::after {
57- content : ' •' ;
58- color : rgb (255 , 218 , 12 );
59- font-size : 1.2em ;
60- margin-left : 2.5px ;
61- text-shadow : 0px 0px 4px rgba (0 , 0 , 0 , 0.5 );
62- }
63-
64- & :focus {
65- background-color : rgba ($color : #000000 , $alpha : 0.1 );
66- }
67-
68- * {
69- pointer-events : none ;
70- }
71-
72- [data-action ],
73- [action ] {
74- pointer-events : all !important ;
75- }
76-
77- .text {
78- flex : 1 ;
79- color : rgb (37 , 37 , 37 );
80- color : var (--popup-text-color );
81-
82- .value {
83- display : block ;
84- opacity : 0.6 ;
85- font-size : 0.8em ;
86- }
87- }
88-
89- .icon {
90- color : rgb (153 , 153 , 255 );
91- color : var (--popup-icon-color );
92- }
93-
94- & .disabled {
95- pointer-events : none ;
96- opacity : 0.5 ;
97- }
98- }
99-
100- & .hide {
101- transition : all 100ms ease ;
102- opacity : 0 ;
103- }
104- }
1+ body .no-animation {
2+ .context-menu {
3+ border : solid 1px rgba ($color : #000000 , $alpha : 0.2 );
4+ }
5+ }
6+
7+ .context-menu {
8+ z-index : 111 ;
9+ box-sizing : border-box ;
10+ position : fixed ;
11+ width : fit-content ;
12+ min-width : 220px ;
13+ max-width : 320px ;
14+ min-height : 40px ;
15+ max-height : calc (100vh - 38px );
16+ overflow-y : auto ;
17+ user-select : none ;
18+ background-color : rgb (255 , 255 , 255 );
19+ background-color : var (--popup-background-color );
20+ box-shadow : 0 0 4px rgba (0 , 0 , 0 , 0.2 );
21+ box-shadow : 0 0 4px var (--box-shadow-color );
22+ border-radius : var (--popup-border-radius );
23+
24+ transform-origin : top center ;
25+ animation : menu- grow 100ms ease 1 ;
26+
27+ list-style : none ;
28+ padding : 0 ;
29+ border : solid 1px transparent ;
30+ border : solid 1px var (--popup-border-color );
31+
32+ @media (min-width : 769px ) {
33+ min-width : 260px ;
34+ max-width : 400px ;
35+ min-height : 48px ;
36+ box-shadow : 0 0 8px var (--box-shadow-color );
37+ }
38+
39+ @media (min-width : 1024px ) {
40+ min-width : 300px ;
41+ max-width : 480px ;
42+ min-height : 56px ;
43+ box-shadow : 0 0 16px var (--box-shadow-color );
44+ }
45+
46+ & + .mask {
47+ z-index : 110 ;
48+ }
49+
50+ & .disabled {
51+ li {
52+ pointer-events : none ;
53+ opacity : 0.5 ;
54+ }
55+ }
56+
57+ hr {
58+ border : none ;
59+ border-bottom : solid 1px rgba (122 , 122 , 122 , 0.227 );
60+ border-bottom : solid 1px var (--border-color );
61+ }
62+
63+ li {
64+ display : flex ;
65+ height : 50px ;
66+ align-items : center ;
67+ padding : 0 10px ;
68+ user-select : none ;
69+
70+ & .notice ::after {
71+ content : " •" ;
72+ color : rgb (255 , 218 , 12 );
73+ font-size : 1.2em ;
74+ margin-left : 2.5px ;
75+ text-shadow : 0px 0px 4px rgba (0 , 0 , 0 , 0.5 );
76+ }
77+
78+ & :focus {
79+ background-color : rgba ($color : #000000 , $alpha : 0.1 );
80+ }
81+
82+ * {
83+ pointer-events : none ;
84+ }
85+
86+ [data-action ],
87+ [action ] {
88+ pointer-events : all !important ;
89+ }
90+
91+ .text {
92+ flex : 1 ;
93+ color : rgb (37 , 37 , 37 );
94+ color : var (--popup-text-color );
95+
96+ .value {
97+ display : block ;
98+ opacity : 0.6 ;
99+ font-size : 0.8em ;
100+ }
101+ }
102+
103+ .icon {
104+ color : rgb (153 , 153 , 255 );
105+ color : var (--popup-icon-color );
106+ }
107+
108+ & .disabled {
109+ pointer-events : none ;
110+ opacity : 0.5 ;
111+ }
112+
113+ @media (min-width : 769px ) {
114+ height : 56px ;
115+ font-size : 1.05em ;
116+
117+ & .notice ::after {
118+ font-size : 1.3em ;
119+ }
120+
121+ .text {
122+ .value {
123+ font-size : 0.85em ;
124+ }
125+ }
126+
127+ .icon {
128+ font-size : 1.1em ;
129+ }
130+ }
131+
132+ @media (min-width : 1024px ) {
133+ height : 64px ;
134+ font-size : 1.1em ;
135+
136+ & .notice ::after {
137+ font-size : 1.4em ;
138+ }
139+
140+ .text {
141+ .value {
142+ font-size : 0.9em ;
143+ }
144+ }
145+
146+ .icon {
147+ font-size : 1.2em ;
148+ }
149+ }
150+ }
151+
152+ & .hide {
153+ transition : all 100ms ease ;
154+ opacity : 0 ;
155+ }
156+ }
0 commit comments