forked from appatalks/chatgpt-html
-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
137 lines (125 loc) · 2.59 KB
/
style.css
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
/* Default styles for desktop view */
body {
width: ;
height: 800px;
overflow: hidden;
background-image: url(background.jpg);
background-color: rgba(68,70,84);
color: #fff;
margin: 0; /* remove default margins */
display: flex; /* enable flexbox layout */
align-items: center; /* center elements vertically */
justify-content: center; /* center elements horizontally */
background-repeat: no-repeat; /* make image not repeat */
background-position: center center; /* center image */
background-size: 90% auto; /* set width and height of image */
}
#txtMsg {
width: 750px;
height: 100px;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
text-align: left;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #333;
background-color: #fff;
overflow-y: scroll;
white-space: pre-wrap;
outline: none;
}
#txtMsg img {
width: 55px;
height: 55px;
}
#txtOutput {
margin-top: 10px;
width: 750px;
height: 300px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: left;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #fff;
overflow-y: scroll;
white-space: pre-wrap;
}
#txtOutput img {
width: 250px;
height: auto;
}
#eEgg {
transition: opacity 0.5s ease-in-out;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Media query for screens smaller than 768px */
@media only screen and (max-width: 768px) {
body {
width: ;
height: ;
display: flex;
background-color: blue;
background-image: url(background.jpg);
background-size: ; /* set background-size to cover for mobile view */
}
}
/* Mic */
.container {
position: relative;
width: 40px;
height: 0px;
}
.mic-button {
position: absolute;
top: -60px;
right: -345px;
background-image: url('mic.png');
background-repeat: no-repeat;
background-size: contain;
border: none;
width: 45px;
height: 45px;
cursor: pointer;
}
.mic-button.pulsate {
animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
/* Covert to Speech Button */
.speakSend {
position: absolute;
display: block;
width: 45px;
height: 45px;
top: -65px;
right: -345px;
background-image: url(https://hoshisato.com/ai/generated/page/2/thumb/thumb-125.jpeg);
background-size: contain;
}
/* Position the pseudo-element over the original button */
.audio {
position: relative;
display: none;
z-index: 1;
background-color: transparent;
}