Hugging Face's logo

Spaces:
Temuzin64
/
ImageGen
Running

App Files
Temuzin64 commited on
Commit
75ef8cf
·
verified ·
1 Parent(s): 739d933

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +104 -20
style.css CHANGED
@@ -1,28 +1,112 @@
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
+ .container {
3
+ margin-top: 20px;
4
+ display: flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+ text-align: center;
8
+ margin-bottom: 20px;
9
  }
10
+ .inputArea{
11
+ display: flex;
12
+ width: 80%;
13
+ justify-content: space-between;
14
+ text-align: center;
15
+ margin: auto;
16
+ margin-bottom: 2em;
17
 
18
+
19
+ }
20
+ .imageHolder{
21
+ display: flex;
22
+ width :50vw;
23
+ height:70vh;
24
+ justify-content: center;
25
+ align-items:center;
26
+ margin: auto;
27
+ }
28
+ #imageBox {
29
+ width: 100%;
30
+ height: 100%;
31
+ margin-bottom: auto;
32
+ /* background-color: blueviolet; */
33
  }
34
+ #lable{
35
+ max-width: 12%;
36
+ min-width:12%;
37
+ text-align: center;
38
+ }
39
+ #promptText{
40
+ font-size: 1em;
41
+ width: 60%;
42
+ text-align: center;
43
 
 
 
 
 
 
 
44
  }
45
+ #btn-gen, #btn-clear{
46
+ max-width: 12%;
47
+ min-width: 12%;
48
+ text-align: center;
49
+ cursor:pointer;
50
 
 
 
51
  }
52
+ #download{
53
+ max-width: 12%;
54
+ min-width: 12%;
55
+ font-size: 1em;
56
+ text-align: center;
57
+ cursor:pointer;
58
+ border-radius : 5px;
59
+ }
60
+
61
+ @media only screen and (max-width: 380px) {
62
+ .imageHolder{
63
+ display: flex;
64
+ width :98vw;
65
+ height:50vh;
66
+ justify-content: center;
67
+ align-items:center;
68
+
69
+ }
70
+ .inputArea{
71
+ display: flex;
72
+ width: 100%;
73
+ justify-content: space-between;
74
+ text-align: center;
75
+ margin: auto;
76
+ margin-bottom: 2em;
77
+
78
+ }
79
+
80
+ #promptText{
81
+ font-size:0.8em;
82
+ width: 50%;
83
+ text-align: center;
84
+
85
+ }
86
+
87
+ #btn-gen, #btn-clear {
88
+ min-width: 15%;
89
+ min-height:10%;
90
+ max-height:10%;
91
+ font-size: 50%;
92
+ text-align: center;
93
+ cursor:pointer;
94
+ border-radius:5px;
95
+
96
+ }
97
+ #lable{
98
+ font-size: 50%;
99
+ max-width: 15%;
100
+ text-align: center;
101
+ }
102
+ #download{
103
+ max-width: 35%;
104
+ min-width: 35%;
105
+ font-size: 60%;
106
+ text-align: center;
107
+ cursor:pointer;
108
+ border-radius : 5px;
109
+ }
110
+
111
+
112
+ }