Hugging Face's logo

Spaces:
WhartonHackAIthon
/
MoodShaker
Running

App Files Community
tywei08 commited on
Commit
bb12dd4
·
verified ·
1 Parent(s): 497e545

Create style.css

Browse files
Files changed (1) hide show
  1. style.css +167 -0
style.css ADDED
@@ -0,0 +1,167 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .gradio-container {
2
+ background: url('https://images.unsplash.com/photo-1514361726087-38371321b5cd?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
3
+ }
4
+ .centered-image {
5
+ display: block;
6
+ margin-left: auto;
7
+ margin-right: auto;
8
+ margin-bottom: -20px;
9
+ max-width: 500px; /* Maximum width of the image */
10
+ width: 100%;
11
+ }
12
+ .custom-input {
13
+ background: linear-gradient(to right, rgba(232, 243, 214, 0.8), rgba(252, 249, 190, 0.8)); /* Or any color you'd like */
14
+ opacity: 0.8
15
+ color: #333; /* Text color */
16
+ padding: 10px; /* Padding inside the input */
17
+ border: 2px solid #ddd; /* Border color */
18
+ border-radius: 5px; /* Rounded corners */
19
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
20
+ transition: all 0.3s ease; /* Smooth transition for interactions */
21
+ }
22
+ .custom-input:focus {
23
+ border-color: #F0E68C; /* Highlight color when the input is focused */
24
+ box-shadow: 0 0 8px rgba(240, 230, 140, 0.8); /* Glow effect on focus */
25
+ }
26
+ .custom-checkbox-group1 {
27
+ background: linear-gradient(to right, rgba(252, 249, 190, 0.8), rgba(255, 220, 169, 0.8));
28
+ padding: 10px;
29
+ border: 2px solid #ddd;
30
+ border-radius: 5px;
31
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
32
+ }
33
+ .custom-checkbox-group1 input[type="checkbox"] + label {
34
+ margin-right: 10px; /* Space between checkboxes */
35
+ cursor: pointer; /* Mouse pointer changes to indicate clickable area */
36
+ }
37
+ .custom-checkbox-group1 input[type="checkbox"]:checked + label {
38
+ color: #FF6347; /* Text color when checkbox is checked */
39
+ font-weight: bold;
40
+ }
41
+ .custom-checkbox-group2 {
42
+ background: linear-gradient(to right, rgba(255, 220, 169, 0.8), rgba(250, 171, 120, 0.8));
43
+ padding: 10px;
44
+ border: 2px solid #ddd;
45
+ border-radius: 5px;
46
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
47
+ }
48
+ .custom-input1 {
49
+ background: linear-gradient(to right, rgba(232, 243, 214, 0.8), rgba(255, 220, 169, 0.8));
50
+ color: #333; /* Text color */
51
+ padding: 10px; /* Padding inside the input */
52
+ border: 20px solid #FFDA42; /* Initial border color, change as needed */
53
+ border-color: #FFDA42
54
+ border-radius: 5px; /* Rounded corners */
55
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
56
+ transition: all 0.3s ease; /* Smooth transition for interactions */
57
+ }
58
+ .custom-input2 {
59
+ background: linear-gradient(to right, rgba(255, 220, 169, 0.8), rgba(250, 171, 120, 0.8));
60
+ color: #333; /* Text color */
61
+ padding: 10px; /* Padding inside the input */
62
+ border: 20px solid #FFDA42; /* Initial border color, change as needed */
63
+ border-color: #FFDA42
64
+ border-radius: 5px; /* Rounded corners */
65
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
66
+ transition: all 0.3s ease; /* Smooth transition for interactions */
67
+ }
68
+
69
+ .custom-input2:focus {
70
+ border-color: #FFDA42; /* Highlight color when the input is focused */
71
+ box-shadow: 0 0 8px rgba(240, 230, 140, 0.8); /* Glow effect on focus */
72
+ }
73
+
74
+ .slider-sweetness {
75
+ background: linear-gradient(to right, rgba(232, 243, 214, 0.8), rgba(252, 249, 190, 0.8));
76
+ padding: 10px;
77
+ border: 2px solid #ddd;
78
+ border-radius: 5px;
79
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
80
+ }
81
+ .slider-sweetness::-webkit-slider-runnable-track {
82
+ background: rgba(200, 152, 152, 0.8);
83
+ }
84
+ .slider-sour {
85
+ background: linear-gradient(to right, rgba(252, 249, 190, 0.8), rgba(251, 230, 180, 0.8));
86
+ padding: 10px;
87
+ border: 2px solid #ddd;
88
+ border-radius: 5px;
89
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
90
+ }
91
+ .slider-sour::-webkit-slider-runnable-track {
92
+ background: rgba(200, 152, 152, 0.8);
93
+ }
94
+ .slider-savory {
95
+ background: linear-gradient(to right,rgba(251, 230, 180, 0.8), rgba(255, 220, 169, 0.8));
96
+ padding: 10px;
97
+ border: 2px solid #ddd;
98
+ border-radius: 5px;
99
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
100
+ }
101
+ .slider-savory::-webkit-slider-runnable-track {
102
+ background: rgba(200, 152, 152, 0.8);
103
+ }
104
+ .slider-bitter {
105
+ background: linear-gradient(to right,rgba(255, 220, 169, 0.8), rgba(252, 200, 135, 0.8));
106
+ padding: 10px;
107
+ border: 2px solid #ddd;
108
+ border-radius: 5px;
109
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
110
+ }
111
+ .slider-bitter::-webkit-slider-runnable-track {
112
+ background: rgba(200, 152, 152, 0.8);
113
+ }
114
+ .slider-soberness_level {
115
+ background: linear-gradient(to right, rgba(252, 200, 135, 0.8), rgba(250, 171, 120, 0.8));
116
+ padding: 10px;
117
+ border: 2px solid #ddd;
118
+ border-radius: 5px;
119
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
120
+ }
121
+ .slider-soberness_level::-webkit-slider-runnable-track {
122
+ background: rgba(200, 152, 152, 0.8);
123
+ }
124
+ .custom-checkbox-group2 input[type="checkbox"] + label {
125
+ margin-right: 10px; /* Space between checkboxes */
126
+ cursor: pointer; /* Mouse pointer changes to indicate clickable area */
127
+ }
128
+ .custom-checkbox-group2 input[type="checkbox"]:checked + label {
129
+ color: #FF6347; /* Text color when checkbox is checked */
130
+ font-weight: bold;
131
+ }
132
+ .generate-button {
133
+ background: linear-gradient(to right, #F0E68C, #E0FFFF, #FF6347);
134
+ color: black;
135
+ padding: 10px 20px;
136
+ border: none;
137
+ border-radius: 5px;
138
+ cursor: pointer;
139
+ font-weight: bold;
140
+ text-transform: uppercase;
141
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
142
+ transition: all 0.3s ease;
143
+ outline: none; /* Removes the outline on focus for some browsers */
144
+ }
145
+ .generate-button:hover, .generate-button:active {
146
+ background: linear-gradient(to right, #E0FFFF, #FF6347, #F0E68C);
147
+ /* Combines the glow from each color in the gradient */
148
+ box-shadow:
149
+ 0 0 15px rgba(240, 230, 140, 0.7),
150
+ 0 0 25px rgba(240, 230, 140, 0.7),
151
+ 0 0 15px rgba(224, 255, 255, 0.7),
152
+ 0 0 25px rgba(224, 255, 255, 0.7),
153
+ 0 0 15px rgba(255, 99, 71, 0.7),
154
+ 0 0 25px rgba(255, 99, 71, 0.7);
155
+ transform: translateY(2px); /* Optional: Slightly push the button down on active */
156
+ }
157
+ .generate-button:active {
158
+ /* You may want to add an extra inset shadow to give a sense of depth when clicked */
159
+ box-shadow:
160
+ 0 0 15px rgba(240, 230, 140, 0.7),
161
+ 0 0 25px rgba(240, 230, 140, 0.7),
162
+ 0 0 15px rgba(224, 255, 255, 0.7),
163
+ 0 0 25px rgba(224, 255, 255, 0.7),
164
+ 0 0 15px rgba(255, 99, 71, 0.7),
165
+ 0 0 25px rgba(255, 99, 71, 0.7),
166
+ 0 0 20px rgba(30, 255, 255, 0.5) inset;
167
+ }