Skip to content

Commit 679a018

Browse files
bajrangCoderbajrangCoder
authored
fix: scaling issue (#1431)
1 parent e4318c9 commit 679a018

File tree

10 files changed

+1313
-540
lines changed

10 files changed

+1313
-540
lines changed

‎src/components/contextmenu/style.scss

Lines changed: 156 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,156 @@
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+
}

‎src/components/searchbar/style.scss

Lines changed: 81 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,81 @@
1-
#search-bar {
2-
position: fixed;
3-
top: 0;
4-
left: 0;
5-
height: 45px;
6-
width: 100%;
7-
animation: show-searchbar 300ms ease 1;
8-
z-index: 200;
9-
background-color: inherit;
10-
display: flex;
11-
12-
input {
13-
flex: 1;
14-
border-radius: 4px;
15-
box-shadow: rgba(0, 0, 0, 0.2);
16-
box-shadow: var(--box-shadow-color);
17-
border: none;
18-
margin: 5px;
19-
box-sizing: border-box;
20-
color: var(--primary-text-color);
21-
22-
&:focus {
23-
outline: none;
24-
box-shadow: rgba(0, 0, 0, 0.5);
25-
}
26-
27-
&::-webkit-search-decoration,
28-
&::-webkit-search-cancel-button,
29-
&::-webkit-search-results-button,
30-
&::-webkit-search-results-decoration {
31-
display: none;
32-
}
33-
}
34-
35-
.icon {
36-
height: 45px;
37-
width: 45px;
38-
font-size: 1.2em;
39-
color: rgb(255, 255, 255);
40-
}
41-
42-
&.hide {
43-
transition: all 300ms ease;
44-
opacity: 0;
45-
transform: translate(0, -100%, 0);
46-
}
47-
}
1+
#search-bar {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
height: 45px;
6+
width: 100%;
7+
animation: show-searchbar 300ms ease 1;
8+
z-index: 200;
9+
background-color: inherit;
10+
display: flex;
11+
12+
input {
13+
flex: 1;
14+
border-radius: 4px;
15+
box-shadow: rgba(0, 0, 0, 0.2);
16+
box-shadow: var(--box-shadow-color);
17+
border: none;
18+
margin: 5px;
19+
box-sizing: border-box;
20+
color: var(--primary-text-color);
21+
22+
&:focus {
23+
outline: none;
24+
box-shadow: rgba(0, 0, 0, 0.5);
25+
}
26+
27+
&::-webkit-search-decoration,
28+
&::-webkit-search-cancel-button,
29+
&::-webkit-search-results-button,
30+
&::-webkit-search-results-decoration {
31+
display: none;
32+
}
33+
}
34+
35+
.icon {
36+
height: 45px;
37+
width: 45px;
38+
font-size: 1.2em;
39+
color: rgb(255, 255, 255);
40+
}
41+
42+
&.hide {
43+
transition: all 300ms ease;
44+
opacity: 0;
45+
transform: translate(0, -100%, 0);
46+
}
47+
48+
@media (min-width: 769px) {
49+
height: 60px;
50+
51+
input {
52+
margin: 8px;
53+
border-radius: 6px;
54+
font-size: 1.1em;
55+
padding: 0 12px;
56+
}
57+
58+
.icon {
59+
height: 60px;
60+
width: 60px;
61+
font-size: 1.4em;
62+
}
63+
}
64+
65+
@media (min-width: 1024px) {
66+
height: 70px;
67+
68+
input {
69+
margin: 10px;
70+
border-radius: 8px;
71+
font-size: 1.2em;
72+
padding: 0 16px;
73+
}
74+
75+
.icon {
76+
height: 70px;
77+
width: 70px;
78+
font-size: 1.6em;
79+
}
80+
}
81+
}

0 commit comments

Comments
 (0)