Spaces:
Sleeping
Sleeping
| """UI theme assets — CSS and decorative HTML.""" | |
| LAMP_HTML = """ | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: #D8D2C2; | |
| transition: background 0.4s ease; | |
| } | |
| body.night { | |
| background: radial-gradient(#555, #111); | |
| } | |
| body.night h1 { | |
| color: #f5f0e8 !important; | |
| } | |
| body.night .app-footer .app-footer-text, | |
| body.night .app-footer div { | |
| color: #f5f0e8 !important; | |
| } | |
| .lamp-fixed { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| width: 100px; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| z-index: 9999; | |
| pointer-events: none; | |
| } | |
| .mount { | |
| width: 30px; | |
| height: 5px; | |
| background: #111; | |
| border-radius: 6px; | |
| pointer-events: none; | |
| } | |
| .wire { | |
| width: 4px; | |
| height: 120px; | |
| background: #000; | |
| margin: 0; | |
| pointer-events: none; | |
| } | |
| .blub { | |
| position: relative; | |
| width: 47px; | |
| height: 47px; | |
| background: #444; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| margin-top: -1px; | |
| transition: all 0.3s ease; | |
| z-index: 2; | |
| pointer-events: auto; | |
| } | |
| .blub.night { | |
| background: #ffec99; | |
| box-shadow: 0 0 28px #ffec99, 0 0 56px #ffec99, | |
| 0 0 84px #ffec99, 0 0 168px #ffec99; | |
| } | |
| .blub.night::before { | |
| background: #ffec99; | |
| } | |
| .blub.night::after { | |
| content: ""; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-60%, -50%); | |
| width: 78px; | |
| height: 78px; | |
| background: #ffec99; | |
| border-radius: 100%; | |
| filter: blur(26px); | |
| z-index: -1; | |
| } | |
| .blub::before { | |
| content: ""; | |
| position: absolute; | |
| top: -30px; | |
| left: 11px; | |
| width: 25px; | |
| height: 47px; | |
| background: #444; | |
| border-top: 19px solid #000; | |
| border-radius: 8px; | |
| transition: background 0.3s ease; | |
| } | |
| .blub span:nth-child(1) { | |
| position: absolute; | |
| top: -10px; | |
| left: -2px; | |
| width: 20px; | |
| height: 18px; | |
| background: transparent; | |
| transform: rotate(343deg); | |
| border-bottom-right-radius: 40px; | |
| box-shadow: 12px 12px 0 5px #444; | |
| transition: box-shadow 0.3s ease; | |
| } | |
| .blub.night span:nth-child(1) { | |
| box-shadow: 12px 12px 0 5px #ffec99; | |
| } | |
| .blub span:nth-child(2) { | |
| position: absolute; | |
| top: -10px; | |
| right: -2px; | |
| width: 20px; | |
| height: 18px; | |
| background: transparent; | |
| transform: rotate(18deg); | |
| border-bottom-left-radius: 50px; | |
| box-shadow: -12px 12px 0 5px #444; | |
| transition: box-shadow 0.3s ease; | |
| } | |
| .blub.night span:nth-child(2) { | |
| box-shadow: -12px 12px 0 5px #ffec99; | |
| } | |
| </style> | |
| <div class="lamp-fixed"> | |
| <div class="mount"></div> | |
| <div class="wire"></div> | |
| <div class="blub" onclick="this.classList.toggle('night'); document.body.classList.toggle('night')"> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| """ | |
| APP_CSS = """ | |
| body { | |
| margin: 0; | |
| background: #4B352A; | |
| font-family: 'Segoe UI', sans-serif; | |
| color: #222; | |
| display: flex; | |
| justify-content: center; | |
| padding: 2rem; | |
| transition: background 0.3s, color 0.3s; | |
| } | |
| .gradio-container { | |
| max-width: 1200px; | |
| width: 100%; | |
| margin: 0 auto; | |
| h1 { | |
| font-size: 24px !important; | |
| font-weight: 700 !important; | |
| margin-bottom: 1rem !important; | |
| color: #4B352A !important; | |
| text-align: center !important; | |
| } | |
| body.night .gradio-container h1, | |
| body.night h1 { | |
| color: #f5f0e8 !important; | |
| } | |
| .panel { | |
| background: white; | |
| padding: 1rem; | |
| border-radius: 6px; | |
| border: 1px solid #ddd; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.05); | |
| } | |
| #clear-btn, #stop-btn { | |
| margin-top: 1rem; | |
| font-size: 0.85rem !important; | |
| font-weight: 600 !important; | |
| padding: 0.5rem 1rem !important; | |
| border-radius: 8px !important; | |
| border: none !important; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; | |
| transition: background-color 0.2s ease !important; | |
| width: 100% !important; | |
| } | |
| .btn-row { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 0.5rem; | |
| } | |
| #clear-btn { | |
| background-color: #e74c3c !important; | |
| color: white !important; | |
| width: 50% !important; | |
| } | |
| #clear-btn:hover { | |
| background-color: #c0392b !important; | |
| cursor: pointer !important; | |
| } | |
| #stop-btn { | |
| background-color: #CA7842 !important; | |
| color: white !important; | |
| width: 50% !important; | |
| } | |
| #stop-btn:hover { | |
| background-color: #FFA55D !important; | |
| cursor: pointer !important; | |
| } | |
| .gradio-container .gr-row > div { | |
| padding: 4px !important; | |
| } | |
| #process-btn-url { | |
| background-color: #A4B465 !important; | |
| color: #333 !important; | |
| } | |
| #fetch-btn { | |
| background-color: #cfbed7 !important; | |
| color: #333 !important; | |
| } | |
| .workbook-section { | |
| width: 100% !important; | |
| gap: 0 !important; | |
| } | |
| .workbook-header-row { | |
| display: flex !important; | |
| flex-direction: row !important; | |
| align-items: center !important; | |
| justify-content: flex-start !important; | |
| gap: 1rem !important; | |
| flex-wrap: wrap !important; | |
| width: 100% !important; | |
| margin-bottom: 0.35rem !important; | |
| } | |
| .workbook-header-row > div { | |
| flex: 0 0 auto !important; | |
| width: auto !important; | |
| min-width: unset !important; | |
| max-width: none !important; | |
| height: auto !important; | |
| } | |
| .workbook-header-row > #template-download-btn, | |
| .workbook-header-row button { | |
| flex: 0 0 auto !important; | |
| width: auto !important; | |
| align-self: center !important; | |
| } | |
| .workbook-upload-label { | |
| font-size: 12px !important; | |
| font-weight: 400 !important; | |
| color: rgb(113, 113, 122) !important; | |
| line-height: 1.4 !important; | |
| } | |
| #template-download-btn { | |
| background: transparent !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| color: #6b8e3d !important; | |
| font-size: 0.875rem !important; | |
| font-weight: 500 !important; | |
| padding: 0 !important; | |
| margin: 0 !important; | |
| height: auto !important; | |
| min-height: unset !important; | |
| width: auto !important; | |
| min-width: unset !important; | |
| white-space: nowrap !important; | |
| text-decoration: underline !important; | |
| text-underline-offset: 2px !important; | |
| } | |
| #template-download-btn:hover { | |
| color: #4a6a28 !important; | |
| background: transparent !important; | |
| cursor: pointer !important; | |
| } | |
| .app-footer { | |
| width: 100% !important; | |
| margin-top: 1rem !important; | |
| padding-bottom: 1rem !important; | |
| } | |
| .app-footer .app-footer-text, | |
| .app-footer div { | |
| width: 100% !important; | |
| text-align: center !important; | |
| color: #4B352A !important; | |
| font-size: 0.9rem !important; | |
| } | |
| body.night .app-footer .app-footer-text, | |
| body.night .app-footer div { | |
| color: #f5f0e8 !important; | |
| } | |
| #status-box { | |
| background-color: #ffffff; | |
| border: 2px solid #cfbed7; | |
| border-radius: 6px; | |
| padding: 1rem; | |
| font-size: 0.95rem; | |
| color: #333; | |
| } | |
| #zip-download-btn { | |
| transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease; | |
| } | |
| #zip-download-btn.zip-ready, | |
| #zip-download-btn.primary, | |
| button#zip-download-btn.zip-ready { | |
| background: linear-gradient(135deg, #A4B465 0%, #6b8e3d 100%) !important; | |
| color: #fff !important; | |
| border: 2px solid #889E46 !important; | |
| box-shadow: 0 0 0 3px rgba(164, 180, 101, 0.45), 0 4px 14px rgba(107, 142, 61, 0.35) !important; | |
| animation: zip-ready-pulse 1.4s ease-in-out 3; | |
| font-weight: 700 !important; | |
| } | |
| @keyframes zip-ready-pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.03); } | |
| } | |
| #duplicates-box { | |
| background-color: #ffffff; | |
| border: 2px solid #cfbed7; | |
| border-radius: 6px; | |
| padding: 1rem; | |
| font-size: 0.9rem; | |
| color: #333; | |
| font-family: monospace; | |
| } | |
| /* Styling the toggle radio buttons */ | |
| .gradio-container label.svelte-1ipelgc { | |
| font-weight: 600 !important; | |
| border: 2px solid #A4B465 !important; | |
| padding: 0.4rem 1rem !important; | |
| border-radius: 12px !important; | |
| margin: 0.25rem !important; | |
| background-color: #f5fbe8 !important; | |
| transition: all 0.3s ease-in-out; | |
| cursor: pointer; | |
| } | |
| /* Selected option */ | |
| input[type="radio"]:checked + label.svelte-1ipelgc { | |
| background-color: #A4B465 !important; | |
| color: white !important; | |
| border-color: #889E46 !important; | |
| } | |
| /* Unselected hover */ | |
| .gradio-container input[type="radio"] + label.svelte-1ipelgc:hover { | |
| background-color: #e0f1c4 !important; | |
| } | |
| } | |
| """ | |