plozia commited on
Commit
db9046a
·
verified ·
1 Parent(s): f2590d0

Update fancy.css

Browse files
Files changed (1) hide show
  1. fancy.css +13 -18
fancy.css CHANGED
@@ -1,8 +1,7 @@
1
  body, .gradio-container {
2
- background: #f9f7fa !important;
3
- color: #313146 !important;
4
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
5
  }
 
6
  #header, h1, .gradio-container h1 {
7
  color: #d72660 !important;
8
  text-shadow: 0 2px 10px #f6abb6cc;
@@ -10,12 +9,13 @@ body, .gradio-container {
10
  font-size: 2.2rem !important;
11
  font-weight: 900 !important;
12
  }
 
13
  .markdown, .gr-markdown-content {
14
- color: #7c6f9c !important;
15
  background: none !important;
16
  font-size: 1.05em;
17
  border-radius: 1.2em !important;
18
  }
 
19
  .gr-block, .gr-box, .gradio-container .gr-panel, .gradio-container .gr-form {
20
  background: #fff7fd !important;
21
  border-radius: 1.5em !important;
@@ -24,10 +24,12 @@ body, .gradio-container {
24
  padding: 1em 1.3em !important;
25
  transition: box-shadow 0.16s, transform 0.16s;
26
  }
 
27
  .gr-block:hover, .gr-box:hover, .gradio-container .gr-panel:hover, .gradio-container .gr-form:hover {
28
  box-shadow: 0 8px 28px #e0c8efbb;
29
  transform: translateY(-2px) scale(1.01);
30
  }
 
31
  .gr-file, .gr-textbox, .gradio-container .gr-input, .gradio-container input[type="text"] {
32
  background: #f4eaf7 !important;
33
  border: 1.5px solid #b4aee8 !important;
@@ -35,17 +37,20 @@ body, .gradio-container {
35
  color: #422046 !important;
36
  transition: border 0.14s, box-shadow 0.14s;
37
  }
 
38
  .gr-file:focus-within, .gr-textbox:focus-within, .gradio-container .gr-input:focus-within, .gradio-container input[type="text"]:focus {
39
  border: 1.5px solid #d72660 !important;
40
  box-shadow: 0 0 0 3px #fad0c4aa;
41
  background: #fff !important;
42
  color: #d72660 !important;
43
  }
 
44
  .gradio-container label, .gradio-container .label, .gradio-container .gr-label {
45
  color: #a365d6 !important;
46
  font-weight: 700 !important;
47
  font-size: 1.08em !important;
48
  }
 
49
  .gr-button, button, [data-testid="button"] {
50
  background: linear-gradient(90deg,#fbb1f3,#b3cfff 90%) !important;
51
  color: #36374b !important;
@@ -58,12 +63,14 @@ body, .gradio-container {
58
  box-shadow: 0 2px 12px #ffd6e633;
59
  transition: transform 0.14s, box-shadow 0.14s, background 0.14s;
60
  }
 
61
  .gr-button:hover, button:hover, [data-testid="button"]:hover {
62
  background: linear-gradient(93deg,#b3cfff,#fbb1f3 90%) !important;
63
  color: #d72660 !important;
64
  transform: scale(1.04);
65
  box-shadow: 0 5px 24px #d6c1ec66;
66
  }
 
67
  input[type="file"]::file-selector-button {
68
  background: #b3cfff !important;
69
  color: #5d3865 !important;
@@ -76,32 +83,20 @@ input[type="file"]::file-selector-button {
76
  margin-right: 0.8em;
77
  transition: background 0.18s, transform 0.18s;
78
  }
 
79
  input[type="file"]::file-selector-button:hover {
80
  background: #fbb1f3 !important;
81
  color: #d72660 !important;
82
  transform: scale(1.07);
83
  }
 
84
  .gr-output label, .gradio-container .gr-label {
85
  color: #b589d6 !important;
86
  font-weight: 700 !important;
87
  }
 
88
  .gradio-container .gr-textbox[aria-disabled="true"], .gradio-container .gr-textbox[readonly] {
89
  background: #fde4e9 !important;
90
  color: #d72660 !important;
91
  border: 1.5px solid #fbb1f3 !important;
92
  }
93
- html[data-theme="dark"] body, html[data-theme="dark"] .gradio-container {
94
- background: #2e2e2e !important;
95
- }
96
- html[data-theme="dark"] body, html[data-theme="dark"] .gradio-container, html[data-theme="dark"] .markdown, html[data-theme="dark"] .gr-markdown-content, html[data-theme="dark"] #header, html[data-theme="dark"] h1, html[data-theme="dark"] p, html[data-theme="dark"] .gr-label, html[data-theme="dark"] label {
97
- color: #ffffff !important;
98
- }
99
- @media (max-width: 768px) {
100
- html[data-theme="dark"] body, html[data-theme="dark"] .gradio-container {
101
- background: #f9f7fa !important;
102
- color: #313146 !important;
103
- }
104
- html[data-theme="dark"] .markdown, html[data-theme="dark"] .gr-markdown-content, html[data-theme="dark"] #header, html[data-theme="dark"] h1, html[data-theme="dark"] p, html[data-theme="dark"] label, html[data-theme="dark"] .gr-label {
105
- color: #313146 !important;
106
- }
107
- }
 
1
  body, .gradio-container {
 
 
2
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
3
  }
4
+
5
  #header, h1, .gradio-container h1 {
6
  color: #d72660 !important;
7
  text-shadow: 0 2px 10px #f6abb6cc;
 
9
  font-size: 2.2rem !important;
10
  font-weight: 900 !important;
11
  }
12
+
13
  .markdown, .gr-markdown-content {
 
14
  background: none !important;
15
  font-size: 1.05em;
16
  border-radius: 1.2em !important;
17
  }
18
+
19
  .gr-block, .gr-box, .gradio-container .gr-panel, .gradio-container .gr-form {
20
  background: #fff7fd !important;
21
  border-radius: 1.5em !important;
 
24
  padding: 1em 1.3em !important;
25
  transition: box-shadow 0.16s, transform 0.16s;
26
  }
27
+
28
  .gr-block:hover, .gr-box:hover, .gradio-container .gr-panel:hover, .gradio-container .gr-form:hover {
29
  box-shadow: 0 8px 28px #e0c8efbb;
30
  transform: translateY(-2px) scale(1.01);
31
  }
32
+
33
  .gr-file, .gr-textbox, .gradio-container .gr-input, .gradio-container input[type="text"] {
34
  background: #f4eaf7 !important;
35
  border: 1.5px solid #b4aee8 !important;
 
37
  color: #422046 !important;
38
  transition: border 0.14s, box-shadow 0.14s;
39
  }
40
+
41
  .gr-file:focus-within, .gr-textbox:focus-within, .gradio-container .gr-input:focus-within, .gradio-container input[type="text"]:focus {
42
  border: 1.5px solid #d72660 !important;
43
  box-shadow: 0 0 0 3px #fad0c4aa;
44
  background: #fff !important;
45
  color: #d72660 !important;
46
  }
47
+
48
  .gradio-container label, .gradio-container .label, .gradio-container .gr-label {
49
  color: #a365d6 !important;
50
  font-weight: 700 !important;
51
  font-size: 1.08em !important;
52
  }
53
+
54
  .gr-button, button, [data-testid="button"] {
55
  background: linear-gradient(90deg,#fbb1f3,#b3cfff 90%) !important;
56
  color: #36374b !important;
 
63
  box-shadow: 0 2px 12px #ffd6e633;
64
  transition: transform 0.14s, box-shadow 0.14s, background 0.14s;
65
  }
66
+
67
  .gr-button:hover, button:hover, [data-testid="button"]:hover {
68
  background: linear-gradient(93deg,#b3cfff,#fbb1f3 90%) !important;
69
  color: #d72660 !important;
70
  transform: scale(1.04);
71
  box-shadow: 0 5px 24px #d6c1ec66;
72
  }
73
+
74
  input[type="file"]::file-selector-button {
75
  background: #b3cfff !important;
76
  color: #5d3865 !important;
 
83
  margin-right: 0.8em;
84
  transition: background 0.18s, transform 0.18s;
85
  }
86
+
87
  input[type="file"]::file-selector-button:hover {
88
  background: #fbb1f3 !important;
89
  color: #d72660 !important;
90
  transform: scale(1.07);
91
  }
92
+
93
  .gr-output label, .gradio-container .gr-label {
94
  color: #b589d6 !important;
95
  font-weight: 700 !important;
96
  }
97
+
98
  .gradio-container .gr-textbox[aria-disabled="true"], .gradio-container .gr-textbox[readonly] {
99
  background: #fde4e9 !important;
100
  color: #d72660 !important;
101
  border: 1.5px solid #fbb1f3 !important;
102
  }