text-to-image-/style.css at main · Harshsahu-8/text-to-image- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;600&display=swap');

:root{
  --bg:#171616;
  --card1: linear-gradient(90deg,#031316,#a0a1eb);
  --accent: rgba(4,160,177,0.9);
}

*{box-sizing:border-box;font-family:"Rajdhani",sans-serif}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:#eaeaea;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.container{
  width:920px;
  max-width:96%;
  display:flex;
  flex-direction:column;
  gap:18px;
}

h1{ text-align:center; font-size:28px; margin-bottom:6px }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  border-radius:12px;
  padding:16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

.input-card{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:space-between }
.input-card label{ flex:1 1 100%; font-size:14px; color:#cfcfcf }
#input{
  flex:1 1 60%;
  min-width:220px;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(10,46,49,0.68);
  border:none;
  color:#fff;
  font-size:16px;
  outline:none;
  box-shadow: inset 2px 2px 8px rgba(0,0,0,0.5);
}
.row{ display:flex; gap:10px; align-items:center; }

button{
  padding:10px 14px;
  border-radius:10px;
  border:none;
  background:var(--accent);
  color:#031316;
  font-weight:600;
  cursor:pointer;
  transition:all .18s ease;
}
button:hover{ transform:translateY(-2px); opacity:0.95; }

.output-card{ display:flex; gap:12px; align-items:center; justify-content:space-between }
.image-wrap{
  width:68%;
  height:380px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--card1);
  border-radius:10px;
  position:relative;
  overflow:hidden;
}
.image-wrap img{ max-width:100%; max-height:100%; display:block; object-fit:cover; }
#placeholder{ opacity:.6 }

.controls{ display:flex; flex-direction:column; gap:12px; width:28%; align-items:center; }

.note{ font-size:12px; color:#bbb; margin-top:8px; text-align:center }

@media (max-width:720px){
  .output-card{ flex-direction:column }
  .controls{ width:100%; flex-direction:row; justify-content:center }
  .image-wrap{ width:100%; height:320px }
  #input{ width:100% }
}