Hugging Face's logo

Spaces:
baconnier
/
prompt-plus-plus
Running

App Files Community
2
baconnier commited on
Commit
965663c
•
1 Parent(s): 2819e15

Create custom_css.py

Browse files
Files changed (1) hide show
  1. custom_css.py +173 -0
custom_css.py ADDED
@@ -0,0 +1,173 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ custom_css = """
2
+ .container {
3
+ border: 2px solid #2196F3;
4
+ border-radius: 10px;
5
+ padding: 12px;
6
+ margin: 6px;
7
+ background: white;
8
+ position: relative;
9
+ width: 100% !important;
10
+ max-width: 1200px !important;
11
+ margin: 0 auto 20px auto !important;
12
+ }
13
+
14
+ .container::before {
15
+ position: absolute;
16
+ top: -10px;
17
+ left: 20px;
18
+ background: white;
19
+ padding: 0 10px;
20
+ color: #2196F3;
21
+ font-weight: bold;
22
+ font-size: 1.2em;
23
+ }
24
+
25
+ .title-container {
26
+ width: fit-content !important;
27
+ margin: 0 auto !important;
28
+ padding: 2px 40px !important;
29
+ border: 1px solid #0066cc !important;
30
+ border-radius: 10px !important;
31
+ background-color: rgba(0, 102, 204, 0.05) !important;
32
+ }
33
+
34
+ .title-container * {
35
+ text-align: center;
36
+ margin: 0 !important;
37
+ line-height: 1.2 !important;
38
+ }
39
+
40
+ .title-container h1 {
41
+ font-size: 28px !important;
42
+ margin-bottom: 1px !important;
43
+ }
44
+
45
+ .title-container h3 {
46
+ font-size: 18px !important;
47
+ margin-bottom: 1px !important;
48
+ }
49
+
50
+ .title-container p {
51
+ font-size: 14px !important;
52
+ margin-bottom: 1px !important;
53
+ }
54
+
55
+ .input-container::before {
56
+ content: 'PROMPT REFINEMENT';
57
+ }
58
+
59
+ .analysis-container::before {
60
+ content: 'ANALYSIS';
61
+ }
62
+
63
+ .model-container::before {
64
+ content: 'MODEL APPLICATION';
65
+ }
66
+
67
+ .examples-container::before {
68
+ content: 'EXAMPLES';
69
+ }
70
+
71
+ /* Resizable textbox */
72
+ .input-container textarea {
73
+ resize: vertical !important;
74
+ min-height: 100px !important;
75
+ max-height: 500px !important;
76
+ width: 100% !important;
77
+ border: 1px solid #ddd !important;
78
+ border-radius: 4px !important;
79
+ padding: 8px !important;
80
+ transition: all 0.3s ease !important;
81
+ }
82
+
83
+ .input-container textarea:focus {
84
+ border-color: #2196F3 !important;
85
+ box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1) !important;
86
+ }
87
+
88
+ /* Radio group styling */
89
+ .radio-group {
90
+ background-color: rgba(0, 102, 204, 0.05) !important;
91
+ padding: 10px !important;
92
+ border-radius: 8px !important;
93
+ border: 1px solid rgba(0, 102, 204, 0.1) !important;
94
+ display: flex !important;
95
+ justify-content: center !important;
96
+ flex-wrap: wrap !important;
97
+ gap: 8px !important;
98
+ width: 100% !important;
99
+ }
100
+
101
+ .gradio-radio {
102
+ display: flex !important;
103
+ justify-content: center !important;
104
+ flex-wrap: wrap !important;
105
+ gap: 8px !important;
106
+ }
107
+
108
+ .gradio-radio label {
109
+ display: flex !important;
110
+ align-items: center !important;
111
+ padding: 6px 12px !important;
112
+ border: 1px solid #ddd !important;
113
+ border-radius: 4px !important;
114
+ cursor: pointer !important;
115
+ background: white !important;
116
+ margin: 4px !important;
117
+ }
118
+
119
+ .gradio-radio input[type="radio"]:checked + label {
120
+ background: rgba(0, 102, 204, 0.1) !important;
121
+ border-color: #0066cc !important;
122
+ color: #0066cc !important;
123
+ font-weight: bold !important;
124
+ }
125
+
126
+ /* Button styling */
127
+ .gradio-button {
128
+ background-color: white !important;
129
+ color: #2196F3 !important;
130
+ border: 2px solid #2196F3 !important;
131
+ border-radius: 4px !important;
132
+ padding: 8px 16px !important;
133
+ margin: 10px 0 !important;
134
+ font-weight: bold !important;
135
+ transition: all 0.3s ease !important;
136
+ }
137
+
138
+ .gradio-button:hover {
139
+ background-color: #2196F3 !important;
140
+ color: white !important;
141
+ box-shadow: 0 2px 5px rgba(33, 150, 243, 0.3) !important;
142
+ }
143
+
144
+ /* Accordion styling */
145
+ .gradio-accordion {
146
+ margin: 10px 0 !important;
147
+ border: none !important;
148
+ }
149
+
150
+ /* Container alignment */
151
+ .gradio-container {
152
+ display: flex !important;
153
+ flex-direction: column !important;
154
+ align-items: center !important;
155
+ width: 100% !important;
156
+ max-width: 1200px !important;
157
+ margin: 0 auto !important;
158
+ }
159
+
160
+ /* Dropdown styling */
161
+ .gradio-dropdown {
162
+ width: 100% !important;
163
+ max-width: 300px !important;
164
+ }
165
+
166
+ /* JSON container */
167
+ .full-response-json {
168
+ margin-top: 20px !important;
169
+ padding: 10px !important;
170
+ background-color: rgba(0, 102, 204, 0.05) !important;
171
+ border-radius: 8px !important;
172
+ }
173
+ """