Hugging Face's logo

Spaces:
Metapp
/
Jayli_q
Running

App Files Community
Kgshop commited on
Commit
1b0c94d
·
verified ·
1 Parent(s): b86da75

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +181 -14
style.css CHANGED
@@ -1,28 +1,195 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
  p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
  .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
  .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Общие стили */
2
  body {
3
+ padding: 0;
4
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
5
+ margin: 0;
6
+ overflow: hidden;
7
  }
8
 
9
  h1 {
10
+ font-size: 1.2rem;
11
+ margin-top: 0;
12
  }
13
 
14
  p {
15
+ color: rgb(107, 114, 128);
16
+ font-size: 0.9rem;
17
+ margin-bottom: 0.5rem;
18
+ margin-top: 0.25rem;
19
  }
20
 
21
  .card {
22
+ max-width: 100%;
23
+ margin: 0 auto;
24
+ padding: 0.5rem;
25
+ border: 1px solid lightgray;
26
+ border-radius: 0.5rem;
27
  }
28
 
29
  .card p:last-child {
30
+ margin-bottom: 0;
31
  }
32
+
33
+ @media (min-width: 640px) {
34
+ body {
35
+ padding: 0;
36
+ }
37
+ h1 {
38
+ font-size: 1.6rem;
39
+ }
40
+ p {
41
+ font-size: 1rem;
42
+ }
43
+ .card {
44
+ max-width: 620px;
45
+ padding: 1rem;
46
+ border-radius: 1rem;
47
+ }
48
+ }
49
+
50
+ iframe {
51
+ position: fixed;
52
+ top: 0;
53
+ left: 0;
54
+ width: 100%;
55
+ height: 100%;
56
+ border: none;
57
+ margin: 0;
58
+ padding: 0;
59
+ }
60
+
61
+ #installButton, #iosInstallPrompt {
62
+ display: none;
63
+ position: fixed;
64
+ bottom: 20px;
65
+ left: 50%;
66
+ transform: translateX(-50%);
67
+ padding: 12px 20px;
68
+ background-color: #007bff;
69
+ color: white;
70
+ border: none;
71
+ border-radius: 5px;
72
+ cursor: pointer;
73
+ z-index: 1000;
74
+ font-size: 16px;
75
+ text-transform: uppercase;
76
+ letter-spacing: 1px;
77
+ box-shadow: 0 0 10px #007bff;
78
+ transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
79
+ }
80
+
81
+ #installButton:hover, #iosInstallPrompt:hover {
82
+ box-shadow: 0 0 20px #007bff, 0 0 30px #007bff;
83
+ transform: translateX(-50%) scale(1.05);
84
+ }
85
+
86
+ @keyframes pulse {
87
+ 0% {
88
+ box-shadow: 0 0 10px #007bff;
89
+ }
90
+ 50% {
91
+ box-shadow: 0 0 20px #007bff, 0 0 30px #007bff;
92
+ }
93
+ 100% {
94
+ box-shadow: 0 0 10px #007bff;
95
+ }
96
+ }
97
+
98
+ #installButton.pulse-animation, #iosInstallPrompt.pulse-animation {
99
+ animation: pulse 2s infinite;
100
+ }
101
+
102
+ #iosInstallPrompt {
103
+ background-color: #28a745;
104
+ box-shadow: 0 0 10px #28a745;
105
+ }
106
+
107
+ #iosInstallPrompt:hover {
108
+ box-shadow: 0 0 20px #28a745, 0 0 30px #28a745;
109
+ }
110
+
111
+ #iosInstallModal {
112
+ display: none;
113
+ position: fixed;
114
+ top: 0;
115
+ left: 0;
116
+ width: 100%;
117
+ height: 100%;
118
+ background-color: rgba(0, 0, 0, 0.7);
119
+ z-index: 1001;
120
+ }
121
+
122
+ #iosInstallModal .modal-content {
123
+ position: absolute;
124
+ top: 50%;
125
+ left: 50%;
126
+ transform: translate(-50%, -50%);
127
+ background-color: white;
128
+ padding: 20px;
129
+ border-radius: 10px;
130
+ text-align: center;
131
+ max-width: 80%;
132
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
133
+ }
134
+
135
+ #iosInstallModal img {
136
+ max-width: 100%;
137
+ height: auto;
138
+ margin-bottom: 10px;
139
+ border: 1px solid #ddd;
140
+ cursor: pointer;
141
+ }
142
+
143
+ #iosInstallModal h2 {
144
+ font-size: 1.5rem;
145
+ margin-bottom: 1rem;
146
+ }
147
+
148
+ #closeIosModal {
149
+ background-color: #007bff;
150
+ color: white;
151
+ padding: 10px 20px;
152
+ border: none;
153
+ border-radius: 5px;
154
+ cursor: pointer;
155
+ margin-top: 15px;
156
+ font-size: 1rem;
157
+ transition: background-color 0.3s ease;
158
+ }
159
+
160
+ #closeIosModal:hover {
161
+ background-color: #0056b3;
162
+ }
163
+
164
+ #imageZoomModal {
165
+ display: none;
166
+ position: fixed;
167
+ top: 0;
168
+ left: 0;
169
+ width: 100%;
170
+ height: 100%;
171
+ background-color: rgba(0, 0, 0, 0.9);
172
+ z-index: 1002;
173
+ overflow: auto;
174
+ }
175
+
176
+ #zoomedImage {
177
+ margin: auto;
178
+ display: block;
179
+ max-width: 90%;
180
+ max-height: 90%;
181
+ position: absolute;
182
+ top: 50%;
183
+ left: 50%;
184
+ transform: translate(-50%, -50%);
185
+ }
186
+
187
+ #closeZoomModal {
188
+ color: white;
189
+ position: absolute;
190
+ top: 15px;
191
+ right: 35px;
192
+ font-size: 40px;
193
+ font-weight: bold;
194
+ cursor: pointer;
195
+ }