Update fancy.css
Browse files
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 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|