1 line
18 KiB
CSS
1 line
18 KiB
CSS
root--bg#e6e0d0--card-bg#f9f4e6--header-bg#8a6b52--header-text#fdf8f0--text#433628--text-muted#7a6d5c--border#d6cabc--shadow0 4px 10px rgba(6754400.12)--seed-opacity0.06--modal-bg#f8f5e6--input-bg#fffdf5--input-border#d1c7b7--bg-finished#dbe4ce--lock-btn-bg#ebe7da--lock-btn-text#9c8e7e--btn-secondary-bg#fdfcf5--btn-secondary-text#4a3b2a--danger#b56b54--success#7a8b4f--project-color#b56b54body.dark-mode--bg#2c3327--card-bg#3b342c--header-bg#4b3829--header-text#e9e4d7--text#e9e4d7--text-muted#b5aa9b--border#5f5245--shadow0 4px 10px rgba(0000.45)--modal-bg#3d362d--input-bg#2c2720--input-border#594e3f--bg-finished#2a382a--lock-btn-bg#4a4238--lock-btn-text#8c8276--btn-secondary-bg#4a4238--btn-secondary-text#d1c7b7*box-sizingborder-box-webkit-tap-highlight-colortransparentbodyfont-family'Quicksand'"Segoe UI"RobotoHelveticaArialsans-serifbackground-colorvar(--bg)min-height100vhcolorvar(--text)margin0padding0displayflexflex-directioncolumnoverflow-xhiddenscrollbar-gutterstabletransitionbackground-color 0.3scolor 0.3sbody.theme-animatinganimationthemeSwap 0.7s ease-in-out@keyframes themeSwap0%filterbrightness(1.08) saturate(1.06)opacity0.8545%filterbrightness(1.03) saturate(1.12) contrast(1.04)opacity0.9275%filterbrightness(0.98) saturate(1.04)opacity0.97100%filterbrightness(1) saturate(1)opacity1headerbackground-colorvar(--header-bg)colorvar(--header-text)padding0.8rem 1remdisplayflexjustify-contentspace-betweenalign-itemscenterbox-shadow0 2px 10px rgba(0000.1)positionstickytop0z-index100border-bottom2px solid rgba(0000.05)transitionbackground-color 0.3sh1margin0font-size1.3remfont-weight800letter-spacing0.5pxcolorvar(--header-text)text-shadow1px 1px 2px rgba(0000.1)font-family'Cormorant Garamond'Georgiaserifcursorpointeruser-selectnone.branddisplayflexalign-itemscentergap10px.brand-iconwidth52pxheight52pxborder-radius8pxobject-fitcontaindisplayblockbackgroundrgba(2552552550.12)padding4pxbox-shadowinset 0 1px 2px rgba(0000.08).header-controlsdisplayflexgap10px.header-btnbackgroundrgba(2552552550.2)bordernoneborder-radius50%width40pxheight40pxdisplayflexalign-itemscenterjustify-contentcenterfont-size1.2remcursorpointercolorvar(--header-text)transitiontransform 0.18s easebox-shadow 0.18s easebackground-color 0.2stransformtranslateY(0)font-familyinherit.header-btnhovertransformtranslateY(-1px) scale(1.03)box-shadow0 6px 14px rgba(0000.12).header-btnactivetransformtranslateY(0) scale(0.96)box-shadownone.header-btn.is-activebackgroundvar(--header-text)colorvar(--header-bg).hiddendisplaynone !important.hidden-inputdisplaynone.color-overlaypositionfixedinset0backgroundrgba(4435250.55)displaynonealign-itemscenterjustify-contentcenterz-index210padding20pxbackdrop-filterblur(2px).color-overlay.activedisplayflex.color-modalbackgroundvar(--card-bg)colorvar(--text)border-radius16pxpadding18px 18px 14pxwidthmin(420px90vw)box-shadow0 10px 30px rgba(0000.25)border1px solid var(--border).color-titlemargin0 0 12pxfont-family'Cormorant Garamond'Georgiaserif.color-griddisplaygridgrid-template-columnsrepeat(auto-fitminmax(60px1fr))gap10pxmargin-bottom12px.color-customdisplayflexalign-itemscentergap10pxmargin-bottom12px.color-custom input[type="color"]width42pxheight32pxborder1px solid var(--border)border-radius8pxbackgroundvar(--card-bg)padding0.color-swatchheight44pxborder-radius12pxborder2px solid var(--border)cursorpointerbox-shadowinset 0 0 0 2px rgba(2552552550.55)transitiontransform 0.15s easebox-shadow 0.15s ease.color-swatchhovertransformtranslateY(-1px) scale(1.02)box-shadowinset 0 0 0 2px rgba(2552552550.8).color-swatchactivetransformscale(0.98).color-swatch.customdisplayflexalign-itemscenterjustify-contentcenterfont-weight700colorvar(--text)backgroundlinear-gradient(45deg#f4ead8#d6cabc)box-shadowinset 0 0 0 2px rgba(0000.08).save-overlaypositionfixedinset0backgroundrgba(4435250.55)displaynonealign-itemscenterjustify-contentcenterz-index210padding20pxbackdrop-filterblur(2px).save-overlay.activedisplayflex.save-modalbackgroundvar(--card-bg)colorvar(--text)border-radius16pxpadding18px 18px 14pxwidthmin(420px90vw)box-shadow0 10px 30px rgba(0000.25)border1px solid var(--border).save-subtextmargin0 0 8pxcolorvar(--text-muted).save-listdisplaygridgap8pxmax-height220pxoverflow-yautomargin-bottom10px.save-itemdisplayflexalign-itemscentergap10pxpadding8px 10pxborder-radius10pxbackgroundvar(--input-bg)border1px solid var(--border).save-item inputwidth18pxheight18px.save-actionsdisplayflexjustify-contentflex-endgap8px.icon-woodlandwidth22pxheight22px.containermax-width1200pxmargin0 autopadding1.5rem 1.25rem calc(120px + env(safe-area-inset-bottom0px))positionrelativez-index1flex1.projects-griddisplaygridgrid-template-columnsrepeat(auto-fitminmax(320px1fr))gap20pxalign-itemsstart@media (min-width1280px).projects-gridgrid-template-columnsrepeat(3minmax(320px1fr)).project-containerbackgroundvar(--card-bg)border-radius18pxpadding5px 15px 15px 15pxmargin-bottom2rembox-shadowvar(--shadow)transitionbackground-color 0.3sborder1px solid var(--border)z-index10.project-headerdisplayflexjustify-contentspace-betweenalign-itemscenterpadding15px 5pxmargin-bottom10pxgap10px.project-title-groupdisplayflexalign-itemscentergap10px.project-titlefont-size1.4remfont-weight800colorvar(--project-color)text-transformuppercaseletter-spacing1pxfont-family'Cormorant Garamond'Georgiaserif.btn-toggle-projectbackgroundnonebordernonecolorvar(--project-color)font-size1.2remcursorpointertransitiontransform 0.2spadding5px.part-listmax-height2000pxopacity1transitionmax-height 0.35s easeopacity 0.3s easeoverflowhidden.project-collapsed .btn-toggle-projecttransformrotate(-90deg).project-collapsed .part-listmax-height0opacity0pointer-eventsnone.project-collapsedmargin-bottom1remopacity0.8box-shadownone.project-actionsdisplayflexgap8pxalign-itemscenter.btn-add-partbackgroundvar(--project-color)colorvar(--card-bg)bordernoneborder-radius20pxpadding6px 16pxfont-size0.9remfont-weightboldcursorpointerbox-shadow0 3px 8px rgba(0000.1)transitiontransform 0.1s.btn-add-partactivetransformscale(0.95).btn-delete-projectbackgroundnonebordernonecolorvar(--text-muted)font-size1.2remcursorpointerpadding5px.btn-delete-projecthovercolorvar(--danger).btn-rename-projectbackgroundnonebordernonecolorvar(--text-muted)padding5px 8pxborder-radius8pxfont-size1remcursorpointer.btn-rename-projecthovercolorvar(--project-color).icon-pencildisplayinline-blocktransformscaleX(-1).btn-colorwidth28pxheight28pxborder-radius50%border2px solid var(--border)backgroundvar(--project-color)cursorpointerpadding0displayinline-flexalign-itemscenterjustify-contentcenterbox-shadowinset 0 0 0 2px var(--card-bg).btn-colorhoverbox-shadowinset 0 0 0 2px var(--project-color).part-cardbackgroundvar(--card-bg)border-radius14pxpadding1remmargin-bottom0.8rembox-shadowvar(--shadow)positionrelativetransitionbackground-color 0.3soverflowhiddenborder-left7px solid var(--project-color)border-top1px solid var(--border)border-right1px solid var(--border)border-bottom1px solid var(--border).part-card.is-lockedbackground-colorvar(--bg)opacity0.9.part-card.is-finishedbackground-colorvar(--bg-finished)border-left-colorvar(--success)opacity0.9.finish-shimmeranimationfinishShimmer 0.8s ease@keyframes finishShimmer0%box-shadowvar(--shadow)0 0 0 0 rgba(122139790.32)60%box-shadowvar(--shadow)0 0 0 16px rgba(122139790)100%box-shadowvar(--shadow)0 0 0 0 rgba(122139790).part-card.is-minimizedpadding0.8rem 1rem.part-card.is-minimized .count-display.part-card.is-minimized .controlsdisplaynone.part-card.is-minimized .part-mini-countdisplayinline-block.part-card.is-minimized .btn-toggle-parttransformrotate(-90deg).part-card.is-minimized .count-subtext.part-card.is-minimized .btn-reset-part.part-card.is-minimized .btn-delete-partdisplaynone.part-headerdisplayflexjustify-contentspace-betweenalign-itemscenter.part-cardnot(.is-minimized) .part-headermargin-bottom15px.part-name-groupdisplayflexalign-itemscentergap12pxflex-grow1.check-containerpositionrelativecursorpointerwidth26pxheight26pxflex-shrink0.check-container inputopacity0cursorpointerheight0width0.checkmarkpositionabsolutetop0left0height26pxwidth26pxbackground-colorvar(--card-bg)border-radius50%border2px solid var(--text-muted)transitionall 0.2s.check-container inputchecked ~ .checkmarkbackground-colorvar(--success)border-colorvar(--success).checkmarkaftercontent""positionabsolutedisplaynone.check-container inputchecked ~ .checkmarkafterdisplayblock.check-container .checkmarkafterleft9pxtop5pxwidth6pxheight12pxbordersolid var(--card-bg)border-width0 2px 2px 0transformrotate(45deg).part-namefont-size1.1remfont-weight700colorvar(--text)border-bottom2px dashed var(--project-color)cursorpointerwhite-spacenowrapoverflowhiddentext-overflowellipsismax-width160px.part-mini-countdisplaynonefont-weight800colorvar(--project-color)margin-left8pxfont-size1.2rem.is-finished .part-nametext-decorationline-throughcolorvar(--success)border-bottomnone.is-finished .part-mini-countcolorvar(--success).part-actionsdisplayflexgap8pxalign-itemscenter.part-actionsjustify-contentflex-endmin-width120px.icon-btnbackgroundnonebordernonefont-size1.3rempadding5pxcolorvar(--text-muted)cursorpointertransitioncolor 0.2sdisplayinline-flexalign-itemscenterjustify-contentcenterwidth32pxheight32px.icon-btndisabledopacity0.4pointer-eventsnone.btn-delete-parthovercolorvar(--danger).btn-toggle-parttransitiontransform 0.2s.count-displayfont-size3.5remfont-weight800text-aligncentercolorvar(--project-color)margin0.5rem 0 0.4rem 0touch-actionmanipulationtext-shadow1px 1px 0px var(--card-bg).is-locked .count-displaycolorvar(--lock-btn-text)pointer-eventsnone.is-finished .count-displaycolorvar(--success)pointer-eventsnone.count-subtexttext-aligncenterfont-size0.9remcolorvar(--text-muted)margin0 0 0.6rem 0.count-subtext strongcolorvar(--project-color).count-bump-upanimationcountUp 0.26s ease.count-bump-downanimationcountDown 0.26s ease@keyframes countUp0%transformscale(0.95)colorvar(--btn-secondary-text)60%transformscale(1.08)colorvar(--project-color)100%transformscale(1)colorvar(--project-color)@keyframes countDown0%transformscale(1.05)colorvar(--project-color)60%transformscale(0.9)colorvar(--text-muted)100%transformscale(1)colorvar(--project-color).note-togglebackgroundnoneborder1px dashed var(--border)colorvar(--text-muted)padding4px 10pxborder-radius10pxcursorpointerfont-size0.9remmargin12px auto 6pxdisplayblock.note-togglehovercolorvar(--project-color)border-colorvar(--project-color).note-areadisplaynonemargin-top10px.note-area.showdisplayblock.note-area textareawidth100%min-height90pxborder-radius10pxborder1px solid var(--border)backgroundvar(--input-bg)colorvar(--text)padding10pxfont-size0.95remresizevertical.controlsdisplaygridgrid-template-columns1fr 1fr 1frgap10pxpadding0 5pxbutton.action-btnbordernoneborder-radius12pxpadding12px 0font-size1.5remcursorpointerdisplayflexalign-itemscenterjustify-contentcentertransitionall 0.1sbox-shadow0 3px 6px rgba(0000.05).btn-minusbackground-colorvar(--btn-secondary-bg)colorvar(--btn-secondary-text)border1px solid var(--border).btn-plusbackground-colorvar(--project-color)colorvar(--card-bg).btn-lockbackground-colorvar(--lock-btn-bg)colorvar(--lock-btn-text)font-size1.1rem.btn-lock.locked-activebackground-colorvar(--border)colorvar(--text-muted)border2px solid var(--text-muted)box-shadownone.hidden-controlsvisibilityhiddenpointer-eventsnone.dimmedopacity0.4pointer-eventsnonebuttonactivetransformscale(0.97)box-shadownone.fabpositionfixedbottom30pxright30pxbackground-colorvar(--text)colorvar(--bg)width65pxheight65pxborder-radius50%displayflexalign-itemscenterjustify-contentcenterfont-size2.2rembox-shadow0 6px 15px rgba(7459420.3)bordernonez-index3transitiontransform 0.2s easebox-shadow 0.2s ease.fabhovertransformtranslateY(-3px) scale(1.04) rotate(-2deg)box-shadow0 10px 24px rgba(0000.18).fabactivetransformtranslateY(0) scale(0.94)box-shadow0 3px 8px rgba(0000.2).fabz-index2.modal-overlaypositionfixedtop0left0width100%height100%background-colorrgba(4435250.6)z-index200align-itemscenterjustify-contentcenterbackdrop-filterblur(2px)displayflexopacity0visibilityhiddenpointer-eventsnonetransitionopacity 0.3s easevisibility 0.3s ease.modal-overlay.activeopacity1visibilityvisiblepointer-eventsauto.modal-contentbackgroundvar(--modal-bg)colorvar(--text)padding25pxborder-radius20pxwidth85%max-width400pxanimationnonebox-shadowvar(--shadow)border1px solid var(--border)transform-origincenter.modal-overlay.active .modal-contentanimationmodalIn 0.32s ease@keyframes modalIn0%transformtranslateY(10px) scale(0.96)opacity060%transformtranslateY(-4px) scale(1.02)opacity1100%transformtranslateY(0) scale(1)opacity1.modal-titlemargin0 0 15px 0font-size1.3remcolorvar(--text)font-weight800.modal-inputwidth100%padding15pxfont-size1.2rembackgroundvar(--input-bg)colorvar(--text)border2px solid var(--input-border)border-radius12pxmargin-bottom25pxoutlinenonetransitionborder-color 0.2s.modal-inputfocusborder-colorvar(--project-color).modal-actionsdisplayflexjustify-contentflex-endgap10px.modal-btnpadding12px 24pxbordernoneborder-radius10pxfont-size1remfont-weight600cursorpointer.btn-cancelbackgroundvar(--lock-btn-bg)colorvar(--text-muted).btn-savebackgroundvar(--text)colorvar(--bg).empty-statetext-aligncentercolorvar(--text-muted)margin-top80pxfont-size1.2remfont-styleitalic.footer-bgpositionfixedleft0right0bottom-180pxheightclamp(760px1200px1200px)backgroundurl('textures/mushroom.svg') no-repeat center bottombackground-sizecoveropacity1width125vwpointer-eventsnonez-index0.firefly-wrappositionfixedwidth28pxheight28pxanimationfireflyGlide var(--fly-duration14s) linear forwardsz-index0pointer-eventsnone.fireflywidth100%height100%border-radius50%backgroundradial-gradient(circlergba(2552452000.9) 0%rgba(2552452000.4) 45%rgba(2552452000.1) 70%rgba(2552452000) 85%)opacity0.9mix-blend-modescreenfilterblur(1px) drop-shadow(0 0 14px rgba(2552452000.8)) brightness(1.15)animationfireflyFlutter 1.6s ease-in-out infinite alternatefireflyFlicker 1.1s ease-in-out infinite alternate.seed-wrappositionfixedwidth36pxheight36pxanimationseedGlide var(--seed-duration16s) linear forwardsz-index0pointer-eventsnone.seedwidth200pxheight200pxbackgroundurl('textures/seed.svg') no-repeat center/containopacityvar(--seed-opacity0.07)mix-blend-modescreenfilterdrop-shadow(0 4px 10px rgba(2001901600.55))animationseedDrift 2.6s ease-in-out infinite alternateseedFlicker 1.4s ease-in-out infinite alternateseedFlip var(--seed-flip-duration6s) ease-in-out infinite@keyframes fireflyGlide0%transformtranslate3d(var(--fly-start-x-10vw)var(--fly-start-y0)0) scale(var(--fly-scale1))opacity012%opacity0.5535%transformtranslate3d(var(--fly-mid-x25vw)var(--fly-mid-y-6px)0) scale(var(--fly-scale1))opacity0.6565%transformtranslate3d(var(--fly-mid2-x65vw)var(--fly-mid2-y6px)0) scale(var(--fly-scale1))opacity0.5590%opacity0.35100%transformtranslate3d(var(--fly-end-x110vw)var(--fly-end-y0)0) scale(var(--fly-scale1))opacity0@keyframes fireflyFlutter0%transformtranslateY(-2px) translateX(-3px) scale(0.95)50%transformtranslateY(3px) translateX(2px) scale(1.05)100%transformtranslateY(-2px) translateX(1px) scale(0.97)@keyframes fireflyFlicker0%opacity0.65filterblur(1px) drop-shadow(0 0 10px rgba(2552452000.65))50%opacity1filterblur(0.5px) drop-shadow(0 0 16px rgba(2552452001))100%opacity0.75filterblur(1px) drop-shadow(0 0 12px rgba(2552452000.75))@keyframes seedGlide0%transformtranslate3d(var(--seed-start-12vw)00) scale(var(--seed-scale1))opacity010%opacity0.3540%transformtranslate3d(calc(var(--seed-mid30vw))-10px0) scale(var(--seed-scale1))opacity0.570%transformtranslate3d(calc(var(--seed-mid30vw) * 2)8px0) scale(var(--seed-scale1))opacity0.4100%transformtranslate3d(var(--seed-end110vw)-6px0) scale(var(--seed-scale1))opacity0@keyframes seedDrift0%transformtranslateY(-4px) translateX(calc(var(--seed-sway6px) * -1)) rotate(calc(var(--seed-tilt10deg) * -0.6)) scale(0.94)opacity0.6550%transformtranslateY(5px) translateX(calc(var(--seed-sway6px) * 0.8)) rotate(calc(var(--seed-tilt10deg))) scale(1.05)opacity0.9100%transformtranslateY(-3px) translateX(calc(var(--seed-sway6px) * 0.4)) rotate(calc(var(--seed-tilt10deg) * 0.2)) scale(0.97)opacity0.7@keyframes seedFlicker0%opacity0.65filterdrop-shadow(0 2px 4px rgba(2001901600.35))50%opacity0.9filterdrop-shadow(0 4px 8px rgba(2001901600.5))100%opacity0.7filterdrop-shadow(0 3px 6px rgba(2001901600.4))@keyframes seedFlip0%transformrotate(0deg) scale(1)20%transformrotate(8deg) scale(1.02)40%transformrotate(-10deg) scale(0.98)60%transformrotate(14deg) scale(1.03)80%transformrotate(-6deg) scale(0.99)100%transformrotate(0deg) scale(1)@media (max-width768px).footer-bgbottom-40pxheightclamp(260px24vh450px)@media (max-width1024px) and (min-width769px).containerpadding1.5rem 1.25rem calc(140px + env(safe-area-inset-bottom0px)).footer-bgheightclamp(300px28vh480px)bottom-180px.swal-overlaypositionfixedinset0backgroundrgba(4435250.55)displayflexalign-itemscenterjustify-contentcenterz-index300padding20pxanimationoverlayFade 0.22s ease.swal-dialogbackgroundvar(--card-bg)colorvar(--text)border-radius16pxpadding22px 20px 18pxwidthmin(420px90vw)box-shadow0 10px 30px rgba(0000.25)border1px solid var(--border)text-aligncenterpositionrelativeanimationdialogPop 0.28s ease.swal-titlefont-family'Cormorant Garamond'Georgiaseriffont-size1.4remmargin0 0 8px.swal-textmargin0 0 16pxcolorvar(--text-muted).swal-actionsdisplayflexjustify-contentcentergap10px.swal-btnbordernoneborder-radius12pxpadding12px 18pxfont-weight700cursorpointermin-width110pxtransitiontransform 0.08s.swal-btnactivetransformscale(0.97).swal-confirmbackgroundvar(--project-color)colorvar(--card-bg).swal-cancelbackgroundvar(--lock-btn-bg)colorvar(--text).swal-dangerbackgroundvar(--danger)colorvar(--card-bg)@keyframes overlayFadefromopacity0toopacity1@keyframes dialogPop0%transformtranslateY(8px) scale(0.96)opacity060%transformtranslateY(-3px) scale(1.02)opacity1100%transformtranslateY(0) scale(1)opacity1 |