Hugging Face's logo

Spaces:
Natthathida
/
project-image-captioning
Runtime error

App Files Community
Natthathida commited on
Commit
a3c406b
·
verified ·
1 Parent(s): c5d3103

Update css onclick

Browse files
Files changed (1) hide show
  1. frontend/src/App.css +70 -63
frontend/src/App.css CHANGED
@@ -2,80 +2,87 @@
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
  }
 
2
  text-align: center;
3
  }
4
 
5
+ .title {
6
+ font-weight: bold;
7
+ font-size: 1.2rem;
8
+ margin-bottom: 1em;
9
+ }
10
+
11
  .file-card {
12
+ padding: 1em;
13
+ display: flex;
14
+ flex-direction: column;
15
+ justify-content: center;
16
+ align-items: center;
17
+ border: 3px dashed #cbd5e0;
18
+ background-color: #edf2f7;
19
+ min-width: 380px;
20
+ min-height: 230px;
21
 
22
+ .file-inputs {
23
+ position: relative;
24
+ margin-bottom: 1.5em;
25
 
26
+ input {
27
+ position: relative;
28
+ text-align: right;
29
+ opacity: 0;
30
+ z-index: 2;
31
+ cursor: pointer;
32
+ height: 46px;
33
+ max-width: 200px;
34
+ }
35
 
36
+ span {
37
+ position: absolute;
38
+ top: 0px;
39
+ left: 0px;
40
+ width: 100%;
41
+ height: 100%;
42
+ z-index: 1;
43
+ display: flex;
44
+ justify-content: center;
45
+ align-items: center;
46
 
47
+ color: #fff;
48
+ background-color: #f55e30;
49
+ font-size: 1.1rem;
50
+ cursor: pointer;
51
+ border-radius: 4px;
52
+ border: none;
53
+ outline: none;
54
+ /* padding: 1em; */
55
+ transition: background-color 0.4s;
56
+ box-shadow: 0px 8px 24px rgba(149, 157, 165, 0.5);
57
 
58
+ i {
59
+ width: 1.5em;
60
+ height: 1.5em;
61
+ padding: 0.4em;
62
+ background-color: #fff;
63
+ color: #f55e30;
64
+ border-radius: 50%;
65
+ display: flex;
66
+ justify-content: center;
67
+ align-items: center;
68
+ margin-right: 0.8em;
69
+ font-size: 0.8em;
70
+ }
71
+ }
72
 
73
+ &:hover {
74
+ span {
75
+ background-color: #f15120;
76
+ }
77
+ }
78
+ }
79
  }
80
 
81
  .main {
82
+ font-weight: bold;
83
+ margin-bottom: 0.4em;
84
  }
85
 
86
  .info {
87
+ font-size: 0.8rem;
88
  }