| from __future__ import annotations |
|
|
| from gradio.themes.base import Base |
| from gradio.themes.utils import colors, fonts, sizes |
|
|
|
|
| class Magic(Base):
|
| def __init__(
|
| self,
|
| *,
|
| primary_hue=colors.amber,
|
| secondary_hue=colors.orange,
|
| neutral_hue=colors.stone,
|
| spacing_size=sizes.spacing_md,
|
| radius_size=sizes.radius_none,
|
| text_size=sizes.text_md,
|
| font=(
|
| fonts.GoogleFont("Grenze Gotisch"),
|
| "Georgia",
|
| "Times New Roman",
|
| "serif",
|
| ),
|
| font_mono=(
|
| "Consolas",
|
| "Courier New",
|
| "monospace",
|
| ),
|
| ):
|
| super().__init__(
|
| primary_hue=primary_hue,
|
| secondary_hue=secondary_hue,
|
| neutral_hue=neutral_hue,
|
| spacing_size=spacing_size,
|
| radius_size=radius_size,
|
| text_size=text_size,
|
| font=font,
|
| font_mono=font_mono,
|
| )
|
|
|
| self.name = "magic"
|
|
|
| super().set(
|
|
|
|
|
|
|
| body_background_fill="#fdfbf7",
|
| body_background_fill_dark="#17130e",
|
|
|
| body_text_color="#362d22",
|
| body_text_color_dark="#efe4cf",
|
|
|
| body_text_color_subdued="#5a4c3d",
|
| body_text_color_subdued_dark="#c8b89f",
|
|
|
|
|
|
|
|
|
| background_fill_primary="#fdfbf7",
|
| background_fill_primary_dark="#211b14",
|
|
|
| background_fill_secondary="#f4ecdf",
|
| background_fill_secondary_dark="#2b2318",
|
|
|
|
|
|
|
|
|
| block_background_fill="#fdfbf7",
|
| block_background_fill_dark="#2b2318",
|
|
|
| block_border_width="2px",
|
|
|
| block_border_color="#362d22",
|
| block_border_color_dark="#d4c4a3",
|
|
|
| block_shadow="4px 4px 0 #362d22",
|
| block_shadow_dark="4px 4px 0 #000000",
|
|
|
|
|
|
|
|
|
| block_label_background_fill="#efe4cf",
|
| block_label_background_fill_dark="#3a3024",
|
|
|
| block_label_text_color="#362d22",
|
| block_label_text_color_dark="#efe4cf",
|
|
|
| block_label_text_weight="700",
|
|
|
| block_title_background_fill="#efe4cf",
|
| block_title_background_fill_dark="#3a3024",
|
|
|
| block_title_text_color="#362d22",
|
| block_title_text_color_dark="#efe4cf",
|
|
|
| block_title_text_weight="700",
|
|
|
|
|
|
|
|
|
| input_background_fill="#fdfbf7",
|
| input_background_fill_dark="#31271d",
|
|
|
| input_border_width="2px",
|
|
|
| input_border_color="#362d22",
|
| input_border_color_dark="#d4c4a3",
|
|
|
| input_border_color_focus="#8a6a38",
|
| input_border_color_focus_dark="#eac88a",
|
|
|
| input_shadow="none",
|
| input_shadow_focus="0 0 0 2px rgba(234,200,138,.35)",
|
| input_shadow_focus_dark="0 0 0 2px rgba(234,200,138,.5)",
|
|
|
|
|
|
|
|
|
| button_primary_background_fill="#362d22",
|
| button_primary_background_fill_hover="#504333",
|
|
|
| button_primary_background_fill_dark="#4a3d2e",
|
| button_primary_background_fill_hover_dark="#5d4f3d",
|
|
|
| button_primary_text_color="#fdfbf7",
|
| button_primary_text_color_dark="#fffdf0",
|
|
|
| button_primary_border_color="#362d22",
|
| button_primary_border_color_dark="#d4c4a3",
|
|
|
|
|
|
|
| button_primary_shadow="2px 2px 0 rgba(0,0,0,.25)",
|
| button_primary_shadow_hover="2px 2px 0 rgba(0,0,0,.35)",
|
|
|
|
|
|
|
|
|
| button_secondary_background_fill="#fdfbf7",
|
| button_secondary_background_fill_dark="#31271d",
|
|
|
| button_secondary_background_fill_hover="#eadeca",
|
| button_secondary_background_fill_hover_dark="#433528",
|
|
|
| button_secondary_text_color="#362d22",
|
| button_secondary_text_color_dark="#efe4cf",
|
|
|
| button_secondary_border_color="#362d22",
|
| button_secondary_border_color_dark="#d4c4a3",
|
|
|
|
|
|
|
|
|
| checkbox_background_color_selected="#8a6a38",
|
| checkbox_background_color_selected_dark="#eac88a",
|
|
|
| checkbox_border_color="#362d22",
|
| checkbox_border_color_dark="#d4c4a3",
|
|
|
| checkbox_border_color_selected="#8a6a38",
|
| checkbox_border_color_selected_dark="#eac88a",
|
|
|
| checkbox_label_background_fill="#fdfbf7",
|
| checkbox_label_background_fill_dark="#31271d",
|
|
|
| checkbox_label_background_fill_hover="#efe4cf",
|
| checkbox_label_background_fill_hover_dark="#433528",
|
|
|
| checkbox_label_background_fill_selected="#8a6a38",
|
| checkbox_label_background_fill_selected_dark="#5a4729",
|
|
|
| checkbox_label_text_color_selected="#ffffff",
|
| checkbox_label_text_color_selected_dark="#fff8e7",
|
|
|
|
|
|
|
|
|
| slider_color="#b58b4f",
|
| slider_color_dark="#eac88a",
|
|
|
|
|
|
|
|
|
| color_accent="#b58b4f",
|
| color_accent_soft="#efe4cf",
|
| color_accent_soft_dark="#433528",
|
|
|
|
|
|
|
|
|
| table_even_background_fill="#fdfbf7",
|
| table_even_background_fill_dark="#2b2318",
|
|
|
| table_odd_background_fill="#f4ecdf",
|
| table_odd_background_fill_dark="#211b14",
|
|
|
| table_border_color="#362d22",
|
| table_border_color_dark="#d4c4a3",
|
|
|
| table_row_focus="#efe4cf",
|
| table_row_focus_dark="#433528",
|
|
|
|
|
|
|
|
|
| panel_border_width="2px",
|
|
|
| panel_border_color="#362d22",
|
| panel_border_color_dark="#d4c4a3",
|
|
|
|
|
|
|
|
|
| loader_color="#b58b4f", |
| loader_color_dark="#eac88a", |
| ) |
|
|
|
|
| MAGIC_CSS = """ |
| .gradio-container { |
| background: linear-gradient(135deg, #2b2318 0%, #17130e 100%) !important; |
| font-family: Georgia, "Times New Roman", serif; |
| position: relative; |
| overflow-x: hidden; |
| min-height: 100vh !important; |
| } |
| |
| .gradio-container::before, |
| .gradio-container::after, |
| .container::before { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| pointer-events: none; |
| background-repeat: repeat; |
| z-index: 0; |
| } |
| |
| .gradio-container::before { |
| background-image: |
| radial-gradient(circle at 10% 15%, #fffdf0 1.5px, transparent 1.5px), |
| radial-gradient(circle at 45% 65%, #fffdf0 1px, transparent 1px), |
| radial-gradient(circle at 85% 35%, #fffdf0 2px, transparent 2px), |
| radial-gradient(circle at 30% 85%, #fffdf0 1px, transparent 1px); |
| background-size: 300px 300px; |
| animation: magicTwinkle 2s infinite ease-in-out; |
| } |
| |
| .gradio-container::after { |
| background-image: |
| radial-gradient(circle at 70% 15%, rgba(234, 200, 138, 0.9) 2px, transparent 2px), |
| radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.8) 1.5px, transparent 1.5px), |
| radial-gradient(circle at 60% 90%, rgba(234, 200, 138, 0.9) 2.5px, transparent 2.5px); |
| background-size: 250px 250px; |
| animation: magicTwinkle 3s infinite ease-in-out alternate; |
| animation-delay: 0.7s; |
| } |
| |
| .container::before { |
| background-image: |
| radial-gradient(circle at 50% 25%, #fffdf0 1.5px, transparent 1.5px), |
| radial-gradient(circle at 90% 75%, #fffdf0 2px, transparent 2px); |
| background-size: 200px 200px; |
| animation: magicTwinkle 4s infinite ease-in-out reverse; |
| animation-delay: 1.3s; |
| } |
| |
| @keyframes magicTwinkle { |
| 0%, 100% { opacity: 0.2; transform: scale(0.98); } |
| 50% { opacity: 1; transform: scale(1.02); } |
| } |
| |
| .container { |
| max-width: 950px !important; |
| margin: 30px auto !important; |
| padding: 20px !important; |
| background: rgba(244, 237, 222, 0.03) !important; |
| border: 1px solid rgba(212, 196, 163, 0.15) !important; |
| border-radius: 8px !important; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .block { |
| background: #fdfbf7 !important; |
| border: 2px solid #362d22 !important; |
| border-radius: 0 !important; |
| box-shadow: 4px 4px 0 #362d22 !important; |
| padding: 12px !important; |
| } |
| |
| .gradio-container .gr-group { |
| background: #fdfbf7 !important; |
| border: 2px solid #362d22 !important; |
| box-shadow: 4px 4px 0 #362d22 !important; |
| padding: 12px !important; |
| border-radius: 0 !important; |
| margin-bottom: 15px !important; |
| } |
| |
| .gradio-container .gr-group textarea { |
| border: none !important; |
| background: transparent !important; |
| box-shadow: none !important; |
| padding: 5px 0 !important; |
| } |
| |
| h1, h2, h3, p, label, span { |
| color: #362d22 !important; |
| font-family: Georgia, "Times New Roman", serif !important; |
| } |
| |
| h1 { |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| border-bottom: 4px double #362d22; |
| padding-bottom: 5px; |
| margin-bottom: 20px !important; |
| text-align: center; |
| } |
| |
| button.primary { |
| background: #362d22 !important; |
| color: #fdfbf7 !important; |
| border: none !important; |
| border-radius: 0 !important; |
| box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); |
| font-weight: bold; |
| } |
| |
| button.primary:hover { |
| background: #504333 !important; |
| } |
| |
| .filter-btn { |
| background: #fdfbf7 !important; |
| color: #362d22 !important; |
| border: 2px solid #362d22 !important; |
| border-radius: 0 !important; |
| font-weight: bold; |
| box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); |
| } |
| |
| .filter-btn:hover { |
| background: #eadeca !important; |
| } |
| |
| centered-button-row { |
| display: flex !important; |
| justify-content: center !important; |
| align-items: center !important; |
| width: 100% !important; |
| } |
| |
| .greeter-shell { |
| position: fixed; |
| inset: 0; |
| z-index: 9999; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 24px; |
| background: |
| radial-gradient(circle at top, rgba(234, 200, 138, 0.18), transparent 42%), |
| rgba(18, 13, 9, 0.88); |
| backdrop-filter: blur(8px); |
| } |
| |
| .workspace-unlocked .greeter-shell { |
| backdrop-filter: none !important; |
| background: transparent !important; |
| opacity: 0 !important; |
| pointer-events: none !important; |
| } |
| |
| .greeter-card { |
| width: min(920px, 100%); |
| display: grid; |
| grid-template-columns: minmax(240px, 320px) 1fr; |
| gap: 24px; |
| padding: 24px; |
| background: #fdfbf7; |
| border: 3px solid #362d22; |
| box-shadow: 10px 10px 0 #362d22; |
| } |
| |
| .greeter-portrait { |
| border: 2px solid #362d22; |
| background: #efe4cf; |
| padding: 8px; |
| } |
| |
| .greeter-portrait img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| display: block; |
| } |
| |
| .greeter-copy { |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| gap: 14px; |
| } |
| |
| .greeter-copy h2 { |
| margin: 0; |
| font-size: 2rem; |
| } |
| |
| .greeter-copy p { |
| margin: 0; |
| font-size: 1.05rem; |
| line-height: 1.6; |
| } |
| |
| .greeter-badge { |
| display: inline-block; |
| width: fit-content; |
| padding: 6px 10px; |
| border: 2px solid #362d22; |
| background: #eadeca; |
| font-weight: bold; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| font-size: 0.82rem; |
| } |
| |
| .greeter-actions { |
| display: flex; |
| gap: 12px; |
| flex-wrap: wrap; |
| margin-top: 6px; |
| } |
| |
| .greeter-note { |
| font-size: 0.92rem; |
| opacity: 0.9; |
| } |
| |
| @media (max-width: 760px) { |
| .greeter-card { |
| grid-template-columns: 1fr; |
| } |
| } |
| """ |
|
|
|
|
