Hugging Face's logo

Spaces:
yxmnjxzx
/
prompt_plus
Running

App Files Community
yxmnjxzx commited on
Commit
f32a8f6
·
verified ·
1 Parent(s): 5c24d81

Create custom_css.py

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