Hugging Face's logo

Spaces:
Natthathida
/
project-image-captioning
Runtime error

App Files Community
Natthathida commited on
Commit
eb804d4
·
verified ·
1 Parent(s): 3fefa68

Update css

Browse files
Files changed (1) hide show
  1. frontend/src/App.css +71 -28
frontend/src/App.css CHANGED
@@ -2,37 +2,80 @@
2
  text-align: center;
3
  }
4
 
5
- .App-logo {
6
- height: 40vmin;
7
- pointer-events: none;
8
- }
 
 
 
 
 
 
9
 
10
- @media (prefers-reduced-motion: no-preference) {
11
- .App-logo {
12
- animation: App-logo-spin infinite 20s linear;
13
- }
14
- }
15
 
16
- .App-header {
17
- background-color: #282c34;
18
- min-height: 100vh;
19
- display: flex;
20
- flex-direction: column;
21
- align-items: center;
22
- justify-content: center;
23
- font-size: calc(10px + 2vmin);
24
- color: white;
25
- }
 
 
 
 
 
 
 
 
 
 
26
 
27
- .App-link {
28
- color: #61dafb;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  }
30
 
31
- @keyframes App-logo-spin {
32
- from {
33
- transform: rotate(0deg);
34
- }
35
- to {
36
- transform: rotate(360deg);
37
- }
38
  }
 
 
 
 
 
2
  text-align: center;
3
  }
4
 
5
+ .file-card {
6
+ padding: 1em;
7
+ display: flex;
8
+ flex-direction: column;
9
+ justify-content: center;
10
+ align-items: center;
11
+ border: 3px dashed #cbd5e0;
12
+ background-color: #edf2f7;
13
+ min-width: 380px;
14
+ min-height: 230px;
15
 
16
+ .file-inputs {
17
+ position: relative;
18
+ margin-bottom: 1.5em;
 
 
19
 
20
+ input {
21
+ position: relative;
22
+ text-align: right;
23
+ opacity: 0;
24
+ z-index: 2;
25
+ cursor: pointer;
26
+ height: 46px;
27
+ max-width: 200px;
28
+ }
29
+
30
+ button {
31
+ position: absolute;
32
+ top: 0px;
33
+ left: 0px;
34
+ width: 100%;
35
+ height: 100%;
36
+ z-index: 1;
37
+ display: flex;
38
+ justify-content: center;
39
+ align-items: center;
40
 
41
+ color: #fff;
42
+ background-color: #f55e30;
43
+ font-size: 1.1rem;
44
+ cursor: pointer;
45
+ border-radius: 4px;
46
+ border: none;
47
+ outline: none;
48
+ transition: background-color 0.4s;
49
+ box-shadow: 0px 8px 24px rgba(149, 157, 165, 0.5);
50
+
51
+ i {
52
+ width: 1.5em;
53
+ height: 1.5em;
54
+ padding: 0.4em;
55
+ background-color: #fff;
56
+ color: #f55e30;
57
+ border-radius: 50%;
58
+ display: flex;
59
+ justify-content: center;
60
+ align-items: center;
61
+ margin-right: 0.8em;
62
+ font-size: 0.8em;
63
+ }
64
+ }
65
+
66
+ &:hover {
67
+ button {
68
+ background-color: #f15120;
69
+ }
70
+ }
71
+ }
72
  }
73
 
74
+ .main {
75
+ font-weight: bold;
76
+ margin-bottom: 0.4em;
 
 
 
 
77
  }
78
+
79
+ .info {
80
+ font-size: 0.8rem;
81
+ }