Hugging Face's logo

Spaces:
Nuzwa
/
_ChatGPT5_Free_
Running

App Files Community
Nuzwa commited on
Commit
9be8966
·
verified ·
1 Parent(s): acc5349

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +133 -130
style.css CHANGED
@@ -1,151 +1,154 @@
1
- :root{
2
- --purple:#8A2BE2;
3
- --accent:#F3E5F5;
4
- --text:#6A1B9A;
5
- --bg:#ffffff;
6
- --container:#f9f9f9;
7
- --btn-border:#D1C4E9;
 
 
8
  }
9
 
10
- *{box-sizing:border-box}
11
- html,body{
12
- height:100%;
13
- margin:0;
14
- background:var(--bg);
15
- font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
16
- color:#333;
 
17
  }
18
 
19
- .chat-container{
20
- max-width:450px;
21
- margin:40px auto;
22
- background:var(--container);
23
- border-radius:15px;
24
- border-top:5px solid var(--purple);
25
- box-shadow:0 4px 15px rgba(0,0,0,0.1);
26
- padding:30px;
 
27
  }
28
 
29
- .chat-header{
30
- display:flex;
31
- align-items:center;
32
- justify-content:center;
33
- margin-bottom:20px;
34
- }
35
- #logo{
36
- height:50px;
37
- object-fit:contain;
38
  }
 
39
 
40
- .input-area{
41
- display:grid;
42
- grid-template-columns:1fr auto;
43
- gap:12px;
44
- margin-bottom:16px;
45
- }
46
- .input-area input{
47
- padding:20px;
48
- border:1px solid #ddd;
49
- border-radius:8px;
50
- font-size:18px;
51
- outline:none;
52
- }
53
- .input-area input:focus{
54
- border-color:var(--purple);
55
- box-shadow:0 0 0 3px rgba(138,43,226,.15);
56
  }
57
 
58
- #start-chat-btn{
59
- padding:20px;
60
- border-radius:8px;
61
- border:1px solid var(--btn-border);
62
- background:var(--purple);
63
- color:#fff;
64
- font-weight:700;
65
- font-size:18px;
66
- cursor:pointer;
67
- transition:.2s ease;
68
- }
69
- #start-chat-btn:hover,
70
- #start-chat-btn:focus{
71
- background:#6f1fcb;
72
- outline:none;
73
- }
74
 
75
- .options-container{
76
- display:grid;
77
- grid-template-columns:1fr 1fr;
78
- gap:12px;
79
- margin-bottom:16px;
80
- }
81
- .option-item{
82
- display:flex;
83
- flex-direction:column;
84
- gap:6px;
85
- }
86
- .option-item label{
87
- font-size:14px;
88
- color:#555;
89
- }
90
- .option-item select{
91
- padding:12px;
92
- border:1px solid #ddd;
93
- border-radius:8px;
94
- background:#fff;
95
- outline:none;
96
- }
97
- .option-item select:focus{
98
- border-color:var(--purple);
99
- box-shadow:0 0 0 3px rgba(138,43,226,.15);
 
 
 
 
 
 
100
  }
101
 
102
- .chat-output{
103
- min-height:140px;
104
- background:var(--accent);
105
- border:1px solid var(--btn-border);
106
- border-radius:8px;
107
- padding:20px;
108
- font-size:16px;
109
- line-height:1.6;
110
- color:var(--text);
111
- white-space:pre-wrap;
 
 
 
 
 
 
112
  }
113
 
114
- .action-footer{
115
- margin-top:16px;
116
- display:flex;
117
- justify-content:flex-end;
118
- }
119
- #copy-and-open-btn{
120
- padding:14px 16px;
121
- border-radius:8px;
122
- border:1px solid var(--btn-border);
123
- background:#fff;
124
- color:var(--purple);
125
- font-weight:700;
126
- font-size:16px;
127
- cursor:pointer;
128
- transition:.2s ease;
129
- }
130
- #copy-and-open-btn:hover,
131
- #copy-and-open-btn:focus{
132
- background:var(--purple);
133
- color:#fff;
134
- outline:none;
135
  }
136
 
137
- .hidden{display:none}
 
 
 
 
 
 
138
 
139
- /* Accessibility focus outline */
140
- button:focus-visible, select:focus-visible, input:focus-visible{
141
- outline:3px solid rgba(138,43,226,.35);
142
- outline-offset:2px;
143
  }
144
 
145
- /* Responsive */
146
- @media (max-width:520px){
147
- .chat-container{margin:20px 12px; padding:22px;}
148
- .options-container{grid-template-columns:1fr}
149
- .input-area{grid-template-columns:1fr}
150
- #start-chat-btn{width:100%}
151
  }
 
1
+ :root {
2
+ --primary-color-start: #4F46E5; /* Indigo */
3
+ --primary-color-end: #8B5CF6; /* Violet */
4
+ --background-color: #f8f9fc;
5
+ --container-bg: #ffffff;
6
+ --text-color: #1f2937;
7
+ --label-color: #374151;
8
+ --border-color: #d1d5db;
9
+ --shadow-color: rgba(0, 0, 0, 0.08);
10
  }
11
 
12
+ /* Base */
13
+ * { box-sizing: border-box; }
14
+ html, body {
15
+ height: 100%;
16
+ margin: 0;
17
+ background: var(--background-color);
18
+ color: var(--text-color);
19
+ font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
20
  }
21
 
22
+ /* Container */
23
+ .chat-container {
24
+ max-width: 450px;
25
+ margin: 40px auto;
26
+ background: var(--container-bg);
27
+ border-radius: 15px;
28
+ border-top: 6px solid var(--primary-color-start);
29
+ box-shadow: 0 4px 15px var(--shadow-color);
30
+ padding: 30px;
31
  }
32
 
33
+ /* Header */
34
+ .chat-header {
35
+ display: flex;
36
+ justify-content: center;
37
+ margin-bottom: 18px;
 
 
 
 
38
  }
39
+ #logo { height: 50px; object-fit: contain; }
40
 
41
+ /* Short input */
42
+ .input-area { margin-bottom: 14px; }
43
+ .input-area input {
44
+ width: 100%;
45
+ padding: 18px;
46
+ border: 1px solid var(--border-color);
47
+ border-radius: 8px;
48
+ font-size: 17px;
49
+ outline: none;
50
+ background: #fff;
51
+ }
52
+ .input-area input:focus {
53
+ border-color: var(--primary-color-start);
54
+ box-shadow: 0 0 0 3px rgba(79,70,229,.15);
 
 
55
  }
56
 
57
+ /* Options */
58
+ .options-stack { display: grid; gap: 12px; margin-bottom: 14px; }
59
+ .option-group {
60
+ background: #fff;
61
+ border: 1px solid var(--border-color);
62
+ border-radius: 10px;
63
+ padding: 10px;
64
+ }
65
+ .group-label {
66
+ font-size: 13px;
67
+ font-weight: 600;
68
+ color: var(--label-color);
69
+ margin-bottom: 6px;
70
+ }
71
+ .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
 
72
 
73
+ /* Buttons */
74
+ .btn {
75
+ padding: 12px 14px;
76
+ border-radius: 8px;
77
+ border: 1px solid var(--border-color);
78
+ background: #fff;
79
+ color: var(--primary-color-start);
80
+ font-weight: 700;
81
+ font-size: 14px;
82
+ cursor: pointer;
83
+ transition: .2s ease;
84
+ }
85
+ .btn:hover,
86
+ .btn:focus {
87
+ background: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
88
+ color: #fff;
89
+ outline: none;
90
+ }
91
+ .btn.primary {
92
+ width: 100%;
93
+ padding: 18px;
94
+ font-size: 18px;
95
+ background: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
96
+ color: #fff;
97
+ border: none;
98
+ }
99
+ .btn.primary:hover { opacity: .92; }
100
+ .btn.ghost { background: #fff; color: var(--primary-color-start); }
101
+ .toggle.selected {
102
+ background: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
103
+ color: #fff;
104
  }
105
 
106
+ /* Composer */
107
+ .composer { display: grid; gap: 10px; margin-bottom: 14px; }
108
+ #long-input {
109
+ width: 100%;
110
+ padding: 16px;
111
+ border: 1px solid var(--border-color);
112
+ border-radius: 8px;
113
+ resize: vertical;
114
+ min-height: 120px;
115
+ font-size: 16px;
116
+ background: #fff;
117
+ outline: none;
118
+ }
119
+ #long-input:focus {
120
+ border-color: var(--primary-color-start);
121
+ box-shadow: 0 0 0 3px rgba(79,70,229,.15);
122
  }
123
 
124
+ /* Response area */
125
+ .chat-output {
126
+ min-height: 160px;
127
+ background: #f3f4f6;
128
+ border: 1px solid var(--border-color);
129
+ border-radius: 8px;
130
+ padding: 20px;
131
+ font-size: 16px;
132
+ line-height: 1.6;
133
+ color: var(--text-color);
134
+ white-space: pre-wrap;
 
 
 
 
 
 
 
 
 
 
135
  }
136
 
137
+ /* Footer */
138
+ .action-footer {
139
+ margin-top: 12px;
140
+ display: flex;
141
+ justify-content: flex-end;
142
+ }
143
+ .hidden { display: none; }
144
 
145
+ /* Accessibility */
146
+ button:focus-visible, textarea:focus-visible, input:focus-visible {
147
+ outline: 3px solid rgba(79,70,229,.35);
148
+ outline-offset: 2px;
149
  }
150
 
151
+ /* Mobile */
152
+ @media (max-width: 520px) {
153
+ .chat-container { margin: 20px 12px; padding: 22px; }
 
 
 
154
  }