[{"data":1,"prerenderedAt":2345},["ShallowReactive",2],{"docs-navigation:en":3,"content-page:docs:bVys_3-TlWjFl21853m5NQEFAHabvCxJFgXwExuqvpE":188,"content-page-surround:docs:bVys_3-TlWjFl21853m5NQEFAHabvCxJFgXwExuqvpE":2327,"i-logos:nuxt-icon":2330,"i-logos:vue":2335,"i-lucide:braces":2338,"i-lucide:clipboard":2341,"i-lucide:code":2343},[4,49,110,172],{"title":5,"page":6,"canonicalKey":7,"locale":8,"id":9,"draft":6,"icon":10,"sidebar":11,"children":12},"Start",false,"1","en","content:docs:1.start:.navigation.yml","i-lucide-rocket","section",[13,19,24,29,34,39,44],{"title":14,"id":15,"canonicalKey":16,"locale":8,"draft":6,"navigation":17,"path":18},"Introduction","content:docs:1.start:1.introduction.md","1\u002F1",{"title":14},"\u002Fdocs\u002Fstart\u002Fintroduction",{"title":20,"id":21,"canonicalKey":22,"locale":8,"draft":6,"path":23},"Get started","content:docs:1.start:2.get-started.md","1\u002F2","\u002Fdocs\u002Fstart\u002Fget-started",{"title":25,"id":26,"canonicalKey":27,"locale":8,"draft":6,"path":28},"Examples","content:docs:1.start:3.examples.md","1\u002F3","\u002Fdocs\u002Fstart\u002Fexamples",{"title":30,"id":31,"canonicalKey":32,"locale":8,"draft":6,"path":33},"AI coding agents","content:docs:1.start:4.ai-agents.md","1\u002F4","\u002Fdocs\u002Fstart\u002Fai-agents",{"title":35,"id":36,"canonicalKey":37,"locale":8,"draft":6,"path":38},"Use Nuxt Photo with Vue","content:docs:1.start:5.plain-vue.md","1\u002F5","\u002Fdocs\u002Fstart\u002Fplain-vue",{"title":40,"id":41,"canonicalKey":42,"locale":8,"draft":6,"path":43},"Compare gallery approaches","content:docs:1.start:6.compare-approaches.md","1\u002F6","\u002Fdocs\u002Fstart\u002Fcompare-approaches",{"title":45,"id":46,"canonicalKey":47,"locale":8,"draft":6,"path":48},"Performance and bundle size","content:docs:1.start:7.performance-and-bundle-size.md","1\u002F7","\u002Fdocs\u002Fstart\u002Fperformance-and-bundle-size",{"title":50,"page":6,"canonicalKey":51,"locale":8,"id":52,"draft":6,"icon":53,"children":54},"Guides","2","content:docs:2.guides:.navigation.yml","i-lucide-route",[55,60,65,70,75,80,85,90,95,100,105],{"title":56,"id":57,"canonicalKey":58,"locale":8,"draft":6,"path":59},"Use your own photos","content:docs:2.guides:1.use-your-photos.md","2\u002F1","\u002Fdocs\u002Fguides\u002Fuse-your-photos",{"title":61,"id":62,"canonicalKey":63,"locale":8,"draft":6,"path":64},"Responsive layouts and SSR","content:docs:2.guides:2.responsive-layouts.md","2\u002F2","\u002Fdocs\u002Fguides\u002Fresponsive-layouts",{"title":66,"id":67,"canonicalKey":68,"locale":8,"draft":6,"path":69},"Share one lightbox","content:docs:2.guides:3.share-one-lightbox.md","2\u002F3","\u002Fdocs\u002Fguides\u002Fshare-one-lightbox",{"title":71,"id":72,"canonicalKey":73,"locale":8,"draft":6,"path":74},"Build a carousel","content:docs:2.guides:4.build-a-carousel.md","2\u002F4","\u002Fdocs\u002Fguides\u002Fbuild-a-carousel",{"title":76,"id":77,"canonicalKey":78,"locale":8,"draft":6,"path":79},"Deliver images","content:docs:2.guides:5.deliver-images.md","2\u002F5","\u002Fdocs\u002Fguides\u002Fdeliver-images",{"title":81,"id":82,"canonicalKey":83,"locale":8,"draft":6,"path":84},"Integrate a custom image service","content:docs:2.guides:6.integrate-a-custom-image-service.md","2\u002F6","\u002Fdocs\u002Fguides\u002Fintegrate-a-custom-image-service",{"title":86,"id":87,"canonicalKey":88,"locale":8,"draft":6,"path":89},"Style and theme","content:docs:2.guides:7.style-and-theme.md","2\u002F7","\u002Fdocs\u002Fguides\u002Fstyle-and-theme",{"title":91,"id":92,"canonicalKey":93,"locale":8,"draft":6,"path":94},"Customize the lightbox","content:docs:2.guides:8.customize-the-built-in-lightbox.md","2\u002F8","\u002Fdocs\u002Fguides\u002Fcustomize-the-built-in-lightbox",{"title":96,"id":97,"canonicalKey":98,"locale":8,"draft":6,"path":99},"Create a custom thumbnail layout","content:docs:2.guides:9.create-a-custom-thumbnail-layout.md","2\u002F9","\u002Fdocs\u002Fguides\u002Fcreate-a-custom-thumbnail-layout",{"title":101,"id":102,"canonicalKey":103,"locale":8,"draft":6,"path":104},"Build a lightbox from primitives","content:docs:2.guides:10.build-a-lightbox-from-primitives.md","2\u002F10","\u002Fdocs\u002Fguides\u002Fbuild-a-lightbox-from-primitives",{"title":106,"id":107,"canonicalKey":108,"locale":8,"draft":6,"path":109},"Control the lightbox from code","content:docs:2.guides:11.control-the-lightbox.md","2\u002F11","\u002Fdocs\u002Fguides\u002Fcontrol-the-lightbox",{"title":111,"id":112,"canonicalKey":113,"locale":8,"draft":6,"icon":114,"sidebar":11,"path":115,"children":116},"Reference","content:docs:3.reference:.navigation.yml","3","i-lucide-braces","\u002Fdocs\u002Freference",[117,122,127,132,137,142,147,152,157,162,167],{"title":118,"id":119,"canonicalKey":120,"locale":8,"draft":6,"path":121},"Photo","content:docs:3.reference:2.photo.md","3\u002F2","\u002Fdocs\u002Freference\u002Fphoto",{"title":123,"id":124,"canonicalKey":125,"locale":8,"draft":6,"path":126},"PhotoAlbum","content:docs:3.reference:3.photo-album.md","3\u002F3","\u002Fdocs\u002Freference\u002Fphoto-album",{"title":128,"id":129,"canonicalKey":130,"locale":8,"draft":6,"path":131},"PhotoGroup","content:docs:3.reference:4.photo-group.md","3\u002F4","\u002Fdocs\u002Freference\u002Fphoto-group",{"title":133,"id":134,"canonicalKey":135,"locale":8,"draft":6,"path":136},"PhotoCarousel","content:docs:3.reference:5.photo-carousel.md","3\u002F5","\u002Fdocs\u002Freference\u002Fphoto-carousel",{"title":138,"id":139,"canonicalKey":140,"locale":8,"draft":6,"path":141},"Lightbox","content:docs:3.reference:6.lightbox.md","3\u002F6","\u002Fdocs\u002Freference\u002Flightbox",{"title":143,"id":144,"canonicalKey":145,"locale":8,"draft":6,"path":146},"Primitives","content:docs:3.reference:7.primitives.md","3\u002F7","\u002Fdocs\u002Freference\u002Fprimitives",{"title":148,"id":149,"canonicalKey":150,"locale":8,"draft":6,"path":151},"Composables","content:docs:3.reference:8.composables.md","3\u002F8","\u002Fdocs\u002Freference\u002Fcomposables",{"title":153,"id":154,"canonicalKey":155,"locale":8,"draft":6,"path":156},"Configuration and labels","content:docs:3.reference:9.configuration-and-labels.md","3\u002F9","\u002Fdocs\u002Freference\u002Fconfiguration-and-labels",{"title":158,"id":159,"canonicalKey":160,"locale":8,"draft":6,"path":161},"Types","content:docs:3.reference:10.types.md","3\u002F10","\u002Fdocs\u002Freference\u002Ftypes",{"title":163,"id":164,"canonicalKey":165,"locale":8,"draft":6,"path":166},"CSS","content:docs:3.reference:11.css.md","3\u002F11","\u002Fdocs\u002Freference\u002Fcss",{"title":168,"id":169,"canonicalKey":170,"locale":8,"draft":6,"path":171},"Package exports","content:docs:3.reference:12.package-exports.md","3\u002F12","\u002Fdocs\u002Freference\u002Fpackage-exports",{"title":173,"page":6,"canonicalKey":174,"locale":8,"id":175,"draft":6,"icon":176,"children":177},"Help","4","content:docs:4.help:.navigation.yml","i-lucide-life-buoy",[178,183],{"title":179,"id":180,"canonicalKey":181,"locale":8,"draft":6,"path":182},"Troubleshooting","content:docs:4.help:1.troubleshooting.md","4\u002F1","\u002Fdocs\u002Fhelp\u002Ftroubleshooting",{"title":184,"id":185,"canonicalKey":186,"locale":8,"draft":6,"path":187},"Known constraints","content:docs:4.help:2.known-constraints.md","4\u002F2","\u002Fdocs\u002Fhelp\u002Fknown-constraints",{"title":86,"description":189,"redirectFrom":190,"body":192,"type":2314,"id":87,"canonicalKey":88,"draft":6,"partial":6,"locale":8,"collection":2315,"navigationFile":6,"file":2316,"route":2322,"resolution":2324},"Change the look of albums and the lightbox - css all vs structure, CSS variables for colors, buttons, mat, glow and placeholders, ui classes, scoped styles, dark themes, and Tailwind CSS with a complete Tailwind lightbox.",[191],"\u002Fdocs\u002Fguides\u002Fstyle-with-tailwind",{"type":193,"children":194,"toc":2304},"root",[195,218,318,329,336,354,751,927,932,1015,1029,1035,1047,1157,1163,1175,1305,1434,1452,1586,1592,1597,1832,1862,1872,2024,2034,2253,2271,2280,2286],{"type":196,"tag":197,"props":198,"children":199},"element","p",{},[200,203,209,211,216],{"type":201,"value":202},"text","Nuxt Photo splits its CSS in two. The ",{"type":196,"tag":204,"props":205,"children":206},"strong",{},[207],{"type":201,"value":208},"structure CSS",{"type":201,"value":210}," does the layout: row\nand column geometry, the lightbox position, gestures, and transitions. The\n",{"type":196,"tag":204,"props":212,"children":213},{},[214],{"type":201,"value":215},"theme CSS",{"type":201,"value":217}," does the look: colors, buttons, shadows, and the glow. Keep the\nstructure CSS and choose who owns the look.",{"type":196,"tag":219,"props":220,"children":221},"table",{},[222,250],{"type":196,"tag":223,"props":224,"children":225},"thead",{},[226],{"type":196,"tag":227,"props":228,"children":229},"tr",{},[230,240,245],{"type":196,"tag":231,"props":232,"children":233},"th",{},[234],{"type":196,"tag":235,"props":236,"children":237},"code",{},[238],{"type":201,"value":239},"nuxtPhoto.css",{"type":196,"tag":231,"props":241,"children":242},{},[243],{"type":201,"value":244},"Loads",{"type":196,"tag":231,"props":246,"children":247},{},[248],{"type":201,"value":249},"Use it when",{"type":196,"tag":251,"props":252,"children":253},"tbody",{},[254,276,297],{"type":196,"tag":227,"props":255,"children":256},{},[257,266,271],{"type":196,"tag":258,"props":259,"children":260},"td",{},[261],{"type":196,"tag":235,"props":262,"children":263},{},[264],{"type":201,"value":265},"'all'",{"type":196,"tag":258,"props":267,"children":268},{},[269],{"type":201,"value":270},"Structure and theme",{"type":196,"tag":258,"props":272,"children":273},{},[274],{"type":201,"value":275},"You adjust the included look with CSS variables.",{"type":196,"tag":227,"props":277,"children":278},{},[279,287,292],{"type":196,"tag":258,"props":280,"children":281},{},[282],{"type":196,"tag":235,"props":283,"children":284},{},[285],{"type":201,"value":286},"'structure'",{"type":196,"tag":258,"props":288,"children":289},{},[290],{"type":201,"value":291},"Structure only. Default.",{"type":196,"tag":258,"props":293,"children":294},{},[295],{"type":201,"value":296},"Your own CSS or Tailwind owns the look.",{"type":196,"tag":227,"props":298,"children":299},{},[300,308,313],{"type":196,"tag":258,"props":301,"children":302},{},[303],{"type":196,"tag":235,"props":304,"children":305},{},[306],{"type":201,"value":307},"'none'",{"type":196,"tag":258,"props":309,"children":310},{},[311],{"type":201,"value":312},"Nothing",{"type":196,"tag":258,"props":314,"children":315},{},[316],{"type":201,"value":317},"You rewrite every structural rule. Rarely right.",{"type":196,"tag":197,"props":319,"children":320},{},[321,323,327],{"type":201,"value":322},"With ",{"type":196,"tag":235,"props":324,"children":325},{},[326],{"type":201,"value":307},{"type":201,"value":328},", albums collapse and the lightbox cannot position photos until\nyour CSS replaces all structural rules.",{"type":196,"tag":330,"props":331,"children":333},"h2",{"id":332},"adjust-the-included-look",[334],{"type":201,"value":335},"Adjust the included look",{"type":196,"tag":197,"props":337,"children":338},{},[339,340,345,347,352],{"type":201,"value":322},{"type":196,"tag":235,"props":341,"children":342},{},[343],{"type":201,"value":344},"css: 'all'",{"type":201,"value":346},", set CSS variables on ",{"type":196,"tag":235,"props":348,"children":349},{},[350],{"type":201,"value":351},".np-lightbox",{"type":201,"value":353},":",{"type":196,"tag":355,"props":356,"children":360},"pre",{"language":357,"filename":358,"class":359},"css","app\u002Fassets\u002Fcss\u002Fmain.css","shiki shiki-themes material-theme-lighter material-theme-palenight dark:material-theme-palenight",[361],{"type":196,"tag":235,"props":362,"children":364},{"class":363},"language-css",[365,377,379,399,400,428,429,451,452,472,473,533,534,559,560,585,586,640,641,665,666,691,692,716,717,742,743],{"type":196,"tag":366,"props":367,"children":370},"span",{"class":368,"style":369},"line","display: inline",[371],{"type":196,"tag":366,"props":372,"children":374},{"style":373},"color:#90A4AE;--shiki-light-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[375],{"type":201,"value":376},"\u002F* A light room, square photos, and no glow *\u002F",{"type":201,"value":378},"\n",{"type":196,"tag":366,"props":380,"children":381},{"class":368,"style":369},[382,388,394],{"type":196,"tag":366,"props":383,"children":385},{"style":384},"color:#39ADB5;--shiki-dark:#89DDFF",[386],{"type":201,"value":387},".",{"type":196,"tag":366,"props":389,"children":391},{"style":390},"color:#E2931D;--shiki-dark:#FFCB6B",[392],{"type":201,"value":393},"np-lightbox",{"type":196,"tag":366,"props":395,"children":396},{"style":384},[397],{"type":201,"value":398}," {",{"type":201,"value":378},{"type":196,"tag":366,"props":401,"children":402},{"class":368,"style":369},[403,409,413,418,423],{"type":196,"tag":366,"props":404,"children":406},{"style":405},"color:#90A4AE;--shiki-dark:#BABED8",[407],{"type":201,"value":408},"  --np-backdrop-bg",{"type":196,"tag":366,"props":410,"children":411},{"style":384},[412],{"type":201,"value":353},{"type":196,"tag":366,"props":414,"children":415},{"style":384},[416],{"type":201,"value":417}," #",{"type":196,"tag":366,"props":419,"children":420},{"style":405},[421],{"type":201,"value":422},"f4f2ee",{"type":196,"tag":366,"props":424,"children":425},{"style":384},[426],{"type":201,"value":427},";",{"type":201,"value":378},{"type":196,"tag":366,"props":430,"children":431},{"class":368,"style":369},[432,437,441,447],{"type":196,"tag":366,"props":433,"children":434},{"style":405},[435],{"type":201,"value":436},"  --np-ambient-opacity",{"type":196,"tag":366,"props":438,"children":439},{"style":384},[440],{"type":201,"value":353},{"type":196,"tag":366,"props":442,"children":444},{"style":443},"color:#F76D47;--shiki-dark:#F78C6C",[445],{"type":201,"value":446}," 0",{"type":196,"tag":366,"props":448,"children":449},{"style":384},[450],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":453,"children":454},{"class":368,"style":369},[455,460,464,468],{"type":196,"tag":366,"props":456,"children":457},{"style":405},[458],{"type":201,"value":459},"  --np-img-radius",{"type":196,"tag":366,"props":461,"children":462},{"style":384},[463],{"type":201,"value":353},{"type":196,"tag":366,"props":465,"children":466},{"style":443},[467],{"type":201,"value":446},{"type":196,"tag":366,"props":469,"children":470},{"style":384},[471],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":474,"children":475},{"class":368,"style":369},[476,481,485,491,496,501,506,511,515,519,523,528],{"type":196,"tag":366,"props":477,"children":478},{"style":405},[479],{"type":201,"value":480},"  --np-btn-bg",{"type":196,"tag":366,"props":482,"children":483},{"style":384},[484],{"type":201,"value":353},{"type":196,"tag":366,"props":486,"children":488},{"style":487},"color:#6182B8;--shiki-dark:#82AAFF",[489],{"type":201,"value":490}," rgba",{"type":196,"tag":366,"props":492,"children":493},{"style":384},[494],{"type":201,"value":495},"(",{"type":196,"tag":366,"props":497,"children":498},{"style":443},[499],{"type":201,"value":500},"255",{"type":196,"tag":366,"props":502,"children":503},{"style":384},[504],{"type":201,"value":505},",",{"type":196,"tag":366,"props":507,"children":508},{"style":443},[509],{"type":201,"value":510}," 255",{"type":196,"tag":366,"props":512,"children":513},{"style":384},[514],{"type":201,"value":505},{"type":196,"tag":366,"props":516,"children":517},{"style":443},[518],{"type":201,"value":510},{"type":196,"tag":366,"props":520,"children":521},{"style":384},[522],{"type":201,"value":505},{"type":196,"tag":366,"props":524,"children":525},{"style":443},[526],{"type":201,"value":527}," 0.8",{"type":196,"tag":366,"props":529,"children":530},{"style":384},[531],{"type":201,"value":532},");",{"type":201,"value":378},{"type":196,"tag":366,"props":535,"children":536},{"class":368,"style":369},[537,542,546,550,555],{"type":196,"tag":366,"props":538,"children":539},{"style":405},[540],{"type":201,"value":541},"  --np-btn-hover-bg",{"type":196,"tag":366,"props":543,"children":544},{"style":384},[545],{"type":201,"value":353},{"type":196,"tag":366,"props":547,"children":548},{"style":384},[549],{"type":201,"value":417},{"type":196,"tag":366,"props":551,"children":552},{"style":405},[553],{"type":201,"value":554},"fff",{"type":196,"tag":366,"props":556,"children":557},{"style":384},[558],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":561,"children":562},{"class":368,"style":369},[563,568,572,576,581],{"type":196,"tag":366,"props":564,"children":565},{"style":405},[566],{"type":201,"value":567},"  --np-btn-color",{"type":196,"tag":366,"props":569,"children":570},{"style":384},[571],{"type":201,"value":353},{"type":196,"tag":366,"props":573,"children":574},{"style":384},[575],{"type":201,"value":417},{"type":196,"tag":366,"props":577,"children":578},{"style":405},[579],{"type":201,"value":580},"1c1b19",{"type":196,"tag":366,"props":582,"children":583},{"style":384},[584],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":587,"children":588},{"class":368,"style":369},[589,594,598,602,606,611,615,619,623,627,631,636],{"type":196,"tag":366,"props":590,"children":591},{"style":405},[592],{"type":201,"value":593},"  --np-btn-border",{"type":196,"tag":366,"props":595,"children":596},{"style":384},[597],{"type":201,"value":353},{"type":196,"tag":366,"props":599,"children":600},{"style":487},[601],{"type":201,"value":490},{"type":196,"tag":366,"props":603,"children":604},{"style":384},[605],{"type":201,"value":495},{"type":196,"tag":366,"props":607,"children":608},{"style":443},[609],{"type":201,"value":610},"0",{"type":196,"tag":366,"props":612,"children":613},{"style":384},[614],{"type":201,"value":505},{"type":196,"tag":366,"props":616,"children":617},{"style":443},[618],{"type":201,"value":446},{"type":196,"tag":366,"props":620,"children":621},{"style":384},[622],{"type":201,"value":505},{"type":196,"tag":366,"props":624,"children":625},{"style":443},[626],{"type":201,"value":446},{"type":196,"tag":366,"props":628,"children":629},{"style":384},[630],{"type":201,"value":505},{"type":196,"tag":366,"props":632,"children":633},{"style":443},[634],{"type":201,"value":635}," 0.08",{"type":196,"tag":366,"props":637,"children":638},{"style":384},[639],{"type":201,"value":532},{"type":201,"value":378},{"type":196,"tag":366,"props":642,"children":643},{"class":368,"style":369},[644,649,653,657,661],{"type":196,"tag":366,"props":645,"children":646},{"style":405},[647],{"type":201,"value":648},"  --np-focus-ring",{"type":196,"tag":366,"props":650,"children":651},{"style":384},[652],{"type":201,"value":353},{"type":196,"tag":366,"props":654,"children":655},{"style":384},[656],{"type":201,"value":417},{"type":196,"tag":366,"props":658,"children":659},{"style":405},[660],{"type":201,"value":580},{"type":196,"tag":366,"props":662,"children":663},{"style":384},[664],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":667,"children":668},{"class":368,"style":369},[669,674,678,682,687],{"type":196,"tag":366,"props":670,"children":671},{"style":405},[672],{"type":201,"value":673},"  --np-counter-color",{"type":196,"tag":366,"props":675,"children":676},{"style":384},[677],{"type":201,"value":353},{"type":196,"tag":366,"props":679,"children":680},{"style":384},[681],{"type":201,"value":417},{"type":196,"tag":366,"props":683,"children":684},{"style":405},[685],{"type":201,"value":686},"4a4843",{"type":196,"tag":366,"props":688,"children":689},{"style":384},[690],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":693,"children":694},{"class":368,"style":369},[695,700,704,708,712],{"type":196,"tag":366,"props":696,"children":697},{"style":405},[698],{"type":201,"value":699},"  --np-caption-color",{"type":196,"tag":366,"props":701,"children":702},{"style":384},[703],{"type":201,"value":353},{"type":196,"tag":366,"props":705,"children":706},{"style":384},[707],{"type":201,"value":417},{"type":196,"tag":366,"props":709,"children":710},{"style":405},[711],{"type":201,"value":580},{"type":196,"tag":366,"props":713,"children":714},{"style":384},[715],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":718,"children":719},{"class":368,"style":369},[720,725,729,733,738],{"type":196,"tag":366,"props":721,"children":722},{"style":405},[723],{"type":201,"value":724},"  --np-caption-secondary",{"type":196,"tag":366,"props":726,"children":727},{"style":384},[728],{"type":201,"value":353},{"type":196,"tag":366,"props":730,"children":731},{"style":384},[732],{"type":201,"value":417},{"type":196,"tag":366,"props":734,"children":735},{"style":405},[736],{"type":201,"value":737},"6b6862",{"type":196,"tag":366,"props":739,"children":740},{"style":384},[741],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":744,"children":745},{"class":368,"style":369},[746],{"type":196,"tag":366,"props":747,"children":748},{"style":384},[749],{"type":201,"value":750},"}",{"type":196,"tag":355,"props":752,"children":755},{"language":753,"filename":754,"class":359},"ts","nuxt.config.ts",[756],{"type":196,"tag":235,"props":757,"children":759},{"class":758},"language-ts",[760,788,789,831,832,869,870,914,915],{"type":196,"tag":366,"props":761,"children":762},{"class":368,"style":369},[763,769,774,779,783],{"type":196,"tag":366,"props":764,"children":766},{"style":765},"color:#39ADB5;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[767],{"type":201,"value":768},"export",{"type":196,"tag":366,"props":770,"children":771},{"style":765},[772],{"type":201,"value":773}," default",{"type":196,"tag":366,"props":775,"children":776},{"style":487},[777],{"type":201,"value":778}," defineNuxtConfig",{"type":196,"tag":366,"props":780,"children":781},{"style":405},[782],{"type":201,"value":495},{"type":196,"tag":366,"props":784,"children":785},{"style":384},[786],{"type":201,"value":787},"{",{"type":201,"value":378},{"type":196,"tag":366,"props":790,"children":791},{"class":368,"style":369},[792,798,802,807,812,818,822,827],{"type":196,"tag":366,"props":793,"children":795},{"style":794},"color:#E53935;--shiki-dark:#F07178",[796],{"type":201,"value":797},"  modules",{"type":196,"tag":366,"props":799,"children":800},{"style":384},[801],{"type":201,"value":353},{"type":196,"tag":366,"props":803,"children":804},{"style":405},[805],{"type":201,"value":806}," [",{"type":196,"tag":366,"props":808,"children":809},{"style":384},[810],{"type":201,"value":811},"'",{"type":196,"tag":366,"props":813,"children":815},{"style":814},"color:#91B859;--shiki-dark:#C3E88D",[816],{"type":201,"value":817},"@lupinum\u002Fnuxt-photo",{"type":196,"tag":366,"props":819,"children":820},{"style":384},[821],{"type":201,"value":811},{"type":196,"tag":366,"props":823,"children":824},{"style":405},[825],{"type":201,"value":826},"]",{"type":196,"tag":366,"props":828,"children":829},{"style":384},[830],{"type":201,"value":505},{"type":201,"value":378},{"type":196,"tag":366,"props":833,"children":834},{"class":368,"style":369},[835,840,844,848,852,857,861,865],{"type":196,"tag":366,"props":836,"children":837},{"style":794},[838],{"type":201,"value":839},"  css",{"type":196,"tag":366,"props":841,"children":842},{"style":384},[843],{"type":201,"value":353},{"type":196,"tag":366,"props":845,"children":846},{"style":405},[847],{"type":201,"value":806},{"type":196,"tag":366,"props":849,"children":850},{"style":384},[851],{"type":201,"value":811},{"type":196,"tag":366,"props":853,"children":854},{"style":814},[855],{"type":201,"value":856},"~\u002Fassets\u002Fcss\u002Fmain.css",{"type":196,"tag":366,"props":858,"children":859},{"style":384},[860],{"type":201,"value":811},{"type":196,"tag":366,"props":862,"children":863},{"style":405},[864],{"type":201,"value":826},{"type":196,"tag":366,"props":866,"children":867},{"style":384},[868],{"type":201,"value":505},{"type":201,"value":378},{"type":196,"tag":366,"props":871,"children":872},{"class":368,"style":369},[873,878,882,886,891,895,900,905,909],{"type":196,"tag":366,"props":874,"children":875},{"style":794},[876],{"type":201,"value":877},"  nuxtPhoto",{"type":196,"tag":366,"props":879,"children":880},{"style":384},[881],{"type":201,"value":353},{"type":196,"tag":366,"props":883,"children":884},{"style":384},[885],{"type":201,"value":398},{"type":196,"tag":366,"props":887,"children":888},{"style":794},[889],{"type":201,"value":890}," css",{"type":196,"tag":366,"props":892,"children":893},{"style":384},[894],{"type":201,"value":353},{"type":196,"tag":366,"props":896,"children":897},{"style":384},[898],{"type":201,"value":899}," '",{"type":196,"tag":366,"props":901,"children":902},{"style":814},[903],{"type":201,"value":904},"all",{"type":196,"tag":366,"props":906,"children":907},{"style":384},[908],{"type":201,"value":811},{"type":196,"tag":366,"props":910,"children":911},{"style":384},[912],{"type":201,"value":913}," },",{"type":201,"value":378},{"type":196,"tag":366,"props":916,"children":917},{"class":368,"style":369},[918,922],{"type":196,"tag":366,"props":919,"children":920},{"style":384},[921],{"type":201,"value":750},{"type":196,"tag":366,"props":923,"children":924},{"style":405},[925],{"type":201,"value":926},")",{"type":196,"tag":197,"props":928,"children":929},{},[930],{"type":201,"value":931},"The mat around the photo is structure, so its variables work in both modes:",{"type":196,"tag":355,"props":933,"children":934},{"language":357,"class":359},[935],{"type":196,"tag":235,"props":936,"children":937},{"class":363},[938,953,954,980,981,1007,1008],{"type":196,"tag":366,"props":939,"children":940},{"class":368,"style":369},[941,945,949],{"type":196,"tag":366,"props":942,"children":943},{"style":384},[944],{"type":201,"value":387},{"type":196,"tag":366,"props":946,"children":947},{"style":390},[948],{"type":201,"value":393},{"type":196,"tag":366,"props":950,"children":951},{"style":384},[952],{"type":201,"value":398},{"type":201,"value":378},{"type":196,"tag":366,"props":955,"children":956},{"class":368,"style":369},[957,962,966,971,975],{"type":196,"tag":366,"props":958,"children":959},{"style":405},[960],{"type":201,"value":961},"  --np-frame-inset-inline",{"type":196,"tag":366,"props":963,"children":964},{"style":384},[965],{"type":201,"value":353},{"type":196,"tag":366,"props":967,"children":968},{"style":443},[969],{"type":201,"value":970}," 72px",{"type":196,"tag":366,"props":972,"children":973},{"style":384},[974],{"type":201,"value":427},{"type":196,"tag":366,"props":976,"children":977},{"style":373},[978],{"type":201,"value":979}," \u002F* space left and right of the photo *\u002F",{"type":201,"value":378},{"type":196,"tag":366,"props":982,"children":983},{"class":368,"style":369},[984,989,993,998,1002],{"type":196,"tag":366,"props":985,"children":986},{"style":405},[987],{"type":201,"value":988},"  --np-caption-reserve",{"type":196,"tag":366,"props":990,"children":991},{"style":384},[992],{"type":201,"value":353},{"type":196,"tag":366,"props":994,"children":995},{"style":443},[996],{"type":201,"value":997}," 120px",{"type":196,"tag":366,"props":999,"children":1000},{"style":384},[1001],{"type":201,"value":427},{"type":196,"tag":366,"props":1003,"children":1004},{"style":373},[1005],{"type":201,"value":1006}," \u002F* room below the photo for the caption *\u002F",{"type":201,"value":378},{"type":196,"tag":366,"props":1009,"children":1010},{"class":368,"style":369},[1011],{"type":196,"tag":366,"props":1012,"children":1013},{"style":384},[1014],{"type":201,"value":750},{"type":196,"tag":197,"props":1016,"children":1017},{},[1018,1020,1027],{"type":201,"value":1019},"The ",{"type":196,"tag":1021,"props":1022,"children":1024},"a",{"href":1023},"\u002Fdocs\u002Freference\u002Fcss#css-variables",[1025],{"type":201,"value":1026},"CSS reference",{"type":201,"value":1028}," lists every variable and\nclass.",{"type":196,"tag":330,"props":1030,"children":1032},{"id":1031},"match-the-placeholder-to-your-page",[1033],{"type":201,"value":1034},"Match the placeholder to your page",{"type":196,"tag":197,"props":1036,"children":1037},{},[1038,1040,1045],{"type":201,"value":1039},"Before a photo loads, its frame shows the photo's blurred preview or average\ncolor. Photos without either show ",{"type":196,"tag":235,"props":1041,"children":1042},{},[1043],{"type":201,"value":1044},"--np-placeholder-bg",{"type":201,"value":1046},", a light gray. Set\nit for dark pages:",{"type":196,"tag":355,"props":1048,"children":1049},{"language":357,"filename":358,"class":359},[1050],{"type":196,"tag":235,"props":1051,"children":1052},{"class":363},[1053,1069,1070,1095,1096,1103,1104,1107,1108,1124,1125,1149,1150],{"type":196,"tag":366,"props":1054,"children":1055},{"class":368,"style":369},[1056,1060,1065],{"type":196,"tag":366,"props":1057,"children":1058},{"style":384},[1059],{"type":201,"value":353},{"type":196,"tag":366,"props":1061,"children":1063},{"style":1062},"color:#9C3EDA;--shiki-dark:#C792EA",[1064],{"type":201,"value":193},{"type":196,"tag":366,"props":1066,"children":1067},{"style":384},[1068],{"type":201,"value":398},{"type":201,"value":378},{"type":196,"tag":366,"props":1071,"children":1072},{"class":368,"style":369},[1073,1078,1082,1086,1091],{"type":196,"tag":366,"props":1074,"children":1075},{"style":405},[1076],{"type":201,"value":1077},"  --np-placeholder-bg",{"type":196,"tag":366,"props":1079,"children":1080},{"style":384},[1081],{"type":201,"value":353},{"type":196,"tag":366,"props":1083,"children":1084},{"style":384},[1085],{"type":201,"value":417},{"type":196,"tag":366,"props":1087,"children":1088},{"style":405},[1089],{"type":201,"value":1090},"e7e5e4",{"type":196,"tag":366,"props":1092,"children":1093},{"style":384},[1094],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":1097,"children":1098},{"class":368,"style":369},[1099],{"type":196,"tag":366,"props":1100,"children":1101},{"style":384},[1102],{"type":201,"value":750},{"type":201,"value":378},{"type":196,"tag":366,"props":1105,"children":1106},{"class":368,"style":369},[],{"type":201,"value":378},{"type":196,"tag":366,"props":1109,"children":1110},{"class":368,"style":369},[1111,1115,1120],{"type":196,"tag":366,"props":1112,"children":1113},{"style":384},[1114],{"type":201,"value":387},{"type":196,"tag":366,"props":1116,"children":1117},{"style":390},[1118],{"type":201,"value":1119},"dark",{"type":196,"tag":366,"props":1121,"children":1122},{"style":384},[1123],{"type":201,"value":398},{"type":201,"value":378},{"type":196,"tag":366,"props":1126,"children":1127},{"class":368,"style":369},[1128,1132,1136,1140,1145],{"type":196,"tag":366,"props":1129,"children":1130},{"style":405},[1131],{"type":201,"value":1077},{"type":196,"tag":366,"props":1133,"children":1134},{"style":384},[1135],{"type":201,"value":353},{"type":196,"tag":366,"props":1137,"children":1138},{"style":384},[1139],{"type":201,"value":417},{"type":196,"tag":366,"props":1141,"children":1142},{"style":405},[1143],{"type":201,"value":1144},"292524",{"type":196,"tag":366,"props":1146,"children":1147},{"style":384},[1148],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":1151,"children":1152},{"class":368,"style":369},[1153],{"type":196,"tag":366,"props":1154,"children":1155},{"style":384},[1156],{"type":201,"value":750},{"type":196,"tag":330,"props":1158,"children":1160},{"id":1159},"add-classes-to-albums-and-carousels",[1161],{"type":201,"value":1162},"Add classes to albums and carousels",{"type":196,"tag":197,"props":1164,"children":1165},{},[1166,1168,1173],{"type":201,"value":1167},"Ready-made components take a ",{"type":196,"tag":235,"props":1169,"children":1170},{},[1171],{"type":201,"value":1172},"ui",{"type":201,"value":1174}," object. Its classes are added to the component's own classes:",{"type":196,"tag":355,"props":1176,"children":1178},{"language":1177,"class":359},"vue",[1179],{"type":196,"tag":235,"props":1180,"children":1182},{"class":1181},"language-vue",[1183],{"type":196,"tag":366,"props":1184,"children":1185},{"class":368,"style":369},[1186,1191,1195,1200,1205,1210,1215,1219,1223,1227,1231,1235,1239,1243,1248,1252,1256,1261,1265,1269,1274,1278,1282,1287,1291,1296,1300],{"type":196,"tag":366,"props":1187,"children":1188},{"style":384},[1189],{"type":201,"value":1190},"\u003C",{"type":196,"tag":366,"props":1192,"children":1193},{"style":794},[1194],{"type":201,"value":123},{"type":196,"tag":366,"props":1196,"children":1197},{"style":384},[1198],{"type":201,"value":1199}," :",{"type":196,"tag":366,"props":1201,"children":1202},{"style":1062},[1203],{"type":201,"value":1204},"photos",{"type":196,"tag":366,"props":1206,"children":1207},{"style":384},[1208],{"type":201,"value":1209},"=",{"type":196,"tag":366,"props":1211,"children":1212},{"style":384},[1213],{"type":201,"value":1214},"\"",{"type":196,"tag":366,"props":1216,"children":1217},{"style":405},[1218],{"type":201,"value":1204},{"type":196,"tag":366,"props":1220,"children":1221},{"style":384},[1222],{"type":201,"value":1214},{"type":196,"tag":366,"props":1224,"children":1225},{"style":384},[1226],{"type":201,"value":1199},{"type":196,"tag":366,"props":1228,"children":1229},{"style":1062},[1230],{"type":201,"value":1172},{"type":196,"tag":366,"props":1232,"children":1233},{"style":384},[1234],{"type":201,"value":1209},{"type":196,"tag":366,"props":1236,"children":1237},{"style":384},[1238],{"type":201,"value":1214},{"type":196,"tag":366,"props":1240,"children":1241},{"style":384},[1242],{"type":201,"value":787},{"type":196,"tag":366,"props":1244,"children":1245},{"style":794},[1246],{"type":201,"value":1247}," item",{"type":196,"tag":366,"props":1249,"children":1250},{"style":384},[1251],{"type":201,"value":353},{"type":196,"tag":366,"props":1253,"children":1254},{"style":384},[1255],{"type":201,"value":899},{"type":196,"tag":366,"props":1257,"children":1258},{"style":814},[1259],{"type":201,"value":1260},"gallery-item",{"type":196,"tag":366,"props":1262,"children":1263},{"style":384},[1264],{"type":201,"value":811},{"type":196,"tag":366,"props":1266,"children":1267},{"style":384},[1268],{"type":201,"value":505},{"type":196,"tag":366,"props":1270,"children":1271},{"style":794},[1272],{"type":201,"value":1273}," img",{"type":196,"tag":366,"props":1275,"children":1276},{"style":384},[1277],{"type":201,"value":353},{"type":196,"tag":366,"props":1279,"children":1280},{"style":384},[1281],{"type":201,"value":899},{"type":196,"tag":366,"props":1283,"children":1284},{"style":814},[1285],{"type":201,"value":1286},"gallery-image",{"type":196,"tag":366,"props":1288,"children":1289},{"style":384},[1290],{"type":201,"value":811},{"type":196,"tag":366,"props":1292,"children":1293},{"style":384},[1294],{"type":201,"value":1295}," }",{"type":196,"tag":366,"props":1297,"children":1298},{"style":384},[1299],{"type":201,"value":1214},{"type":196,"tag":366,"props":1301,"children":1302},{"style":384},[1303],{"type":201,"value":1304}," \u002F>",{"type":196,"tag":219,"props":1306,"children":1307},{},[1308,1328],{"type":196,"tag":223,"props":1309,"children":1310},{},[1311],{"type":196,"tag":227,"props":1312,"children":1313},{},[1314,1319],{"type":196,"tag":231,"props":1315,"children":1316},{},[1317],{"type":201,"value":1318},"Component",{"type":196,"tag":231,"props":1320,"children":1321},{},[1322,1326],{"type":196,"tag":235,"props":1323,"children":1324},{},[1325],{"type":201,"value":1172},{"type":201,"value":1327}," keys",{"type":196,"tag":251,"props":1329,"children":1330},{},[1331,1361,1389],{"type":196,"tag":227,"props":1332,"children":1333},{},[1334,1341],{"type":196,"tag":258,"props":1335,"children":1336},{},[1337],{"type":196,"tag":235,"props":1338,"children":1339},{},[1340],{"type":201,"value":118},{"type":196,"tag":258,"props":1342,"children":1343},{},[1344,1348,1350,1355,1356],{"type":196,"tag":235,"props":1345,"children":1346},{},[1347],{"type":201,"value":193},{"type":201,"value":1349},", ",{"type":196,"tag":235,"props":1351,"children":1352},{},[1353],{"type":201,"value":1354},"img",{"type":201,"value":1349},{"type":196,"tag":235,"props":1357,"children":1358},{},[1359],{"type":201,"value":1360},"caption",{"type":196,"tag":227,"props":1362,"children":1363},{},[1364,1371],{"type":196,"tag":258,"props":1365,"children":1366},{},[1367],{"type":196,"tag":235,"props":1368,"children":1369},{},[1370],{"type":201,"value":123},{"type":196,"tag":258,"props":1372,"children":1373},{},[1374,1378,1379,1384,1385],{"type":196,"tag":235,"props":1375,"children":1376},{},[1377],{"type":201,"value":193},{"type":201,"value":1349},{"type":196,"tag":235,"props":1380,"children":1381},{},[1382],{"type":201,"value":1383},"item",{"type":201,"value":1349},{"type":196,"tag":235,"props":1386,"children":1387},{},[1388],{"type":201,"value":1354},{"type":196,"tag":227,"props":1390,"children":1391},{},[1392,1399],{"type":196,"tag":258,"props":1393,"children":1394},{},[1395],{"type":196,"tag":235,"props":1396,"children":1397},{},[1398],{"type":201,"value":133},{"type":196,"tag":258,"props":1400,"children":1401},{},[1402,1406,1407,1412,1413,1417,1418,1423,1424,1428,1429],{"type":196,"tag":235,"props":1403,"children":1404},{},[1405],{"type":201,"value":193},{"type":201,"value":1349},{"type":196,"tag":235,"props":1408,"children":1409},{},[1410],{"type":201,"value":1411},"slide",{"type":201,"value":1349},{"type":196,"tag":235,"props":1414,"children":1415},{},[1416],{"type":201,"value":1354},{"type":201,"value":1349},{"type":196,"tag":235,"props":1419,"children":1420},{},[1421],{"type":201,"value":1422},"thumb",{"type":201,"value":1349},{"type":196,"tag":235,"props":1425,"children":1426},{},[1427],{"type":201,"value":1360},{"type":201,"value":1349},{"type":196,"tag":235,"props":1430,"children":1431},{},[1432],{"type":201,"value":1433},"controls",{"type":196,"tag":197,"props":1435,"children":1436},{},[1437,1439,1444,1446,1451],{"type":201,"value":1438},"In a ",{"type":196,"tag":235,"props":1440,"children":1441},{},[1442],{"type":201,"value":1443},"\u003Cstyle scoped>",{"type":201,"value":1445}," block, reach the component's own classes with ",{"type":196,"tag":235,"props":1447,"children":1448},{},[1449],{"type":201,"value":1450},":deep()",{"type":201,"value":353},{"type":196,"tag":355,"props":1453,"children":1454},{"language":1177,"class":359},[1455],{"type":196,"tag":235,"props":1456,"children":1457},{"class":1181},[1458,1480,1481,1516,1517,1539,1540,1561,1562,1569,1570],{"type":196,"tag":366,"props":1459,"children":1460},{"class":368,"style":369},[1461,1465,1470,1475],{"type":196,"tag":366,"props":1462,"children":1463},{"style":384},[1464],{"type":201,"value":1190},{"type":196,"tag":366,"props":1466,"children":1467},{"style":794},[1468],{"type":201,"value":1469},"style",{"type":196,"tag":366,"props":1471,"children":1472},{"style":1062},[1473],{"type":201,"value":1474}," scoped",{"type":196,"tag":366,"props":1476,"children":1477},{"style":384},[1478],{"type":201,"value":1479},">",{"type":201,"value":378},{"type":196,"tag":366,"props":1482,"children":1483},{"class":368,"style":369},[1484,1488,1493,1498,1502,1507,1512],{"type":196,"tag":366,"props":1485,"children":1486},{"style":384},[1487],{"type":201,"value":387},{"type":196,"tag":366,"props":1489,"children":1490},{"style":390},[1491],{"type":201,"value":1492},"portfolio",{"type":196,"tag":366,"props":1494,"children":1495},{"style":405},[1496],{"type":201,"value":1497}," :deep(",{"type":196,"tag":366,"props":1499,"children":1500},{"style":384},[1501],{"type":201,"value":387},{"type":196,"tag":366,"props":1503,"children":1504},{"style":390},[1505],{"type":201,"value":1506},"np-album__item",{"type":196,"tag":366,"props":1508,"children":1509},{"style":405},[1510],{"type":201,"value":1511},") ",{"type":196,"tag":366,"props":1513,"children":1514},{"style":384},[1515],{"type":201,"value":787},{"type":201,"value":378},{"type":196,"tag":366,"props":1518,"children":1519},{"class":368,"style":369},[1520,1526,1530,1535],{"type":196,"tag":366,"props":1521,"children":1523},{"style":1522},"color:#8796B0;--shiki-dark:#B2CCD6",[1524],{"type":201,"value":1525},"  border-radius",{"type":196,"tag":366,"props":1527,"children":1528},{"style":384},[1529],{"type":201,"value":353},{"type":196,"tag":366,"props":1531,"children":1532},{"style":443},[1533],{"type":201,"value":1534}," 8px",{"type":196,"tag":366,"props":1536,"children":1537},{"style":384},[1538],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":1541,"children":1542},{"class":368,"style":369},[1543,1548,1552,1557],{"type":196,"tag":366,"props":1544,"children":1545},{"style":1522},[1546],{"type":201,"value":1547},"  overflow",{"type":196,"tag":366,"props":1549,"children":1550},{"style":384},[1551],{"type":201,"value":353},{"type":196,"tag":366,"props":1553,"children":1554},{"style":405},[1555],{"type":201,"value":1556}," hidden",{"type":196,"tag":366,"props":1558,"children":1559},{"style":384},[1560],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":1563,"children":1564},{"class":368,"style":369},[1565],{"type":196,"tag":366,"props":1566,"children":1567},{"style":384},[1568],{"type":201,"value":750},{"type":201,"value":378},{"type":196,"tag":366,"props":1571,"children":1572},{"class":368,"style":369},[1573,1578,1582],{"type":196,"tag":366,"props":1574,"children":1575},{"style":384},[1576],{"type":201,"value":1577},"\u003C\u002F",{"type":196,"tag":366,"props":1579,"children":1580},{"style":794},[1581],{"type":201,"value":1469},{"type":196,"tag":366,"props":1583,"children":1584},{"style":384},[1585],{"type":201,"value":1479},{"type":196,"tag":330,"props":1587,"children":1589},{"id":1588},"own-the-look-with-tailwind",[1590],{"type":201,"value":1591},"Own the look with Tailwind",{"type":196,"tag":197,"props":1593,"children":1594},{},[1595],{"type":201,"value":1596},"Load only the structure CSS, and add Tailwind:",{"type":196,"tag":355,"props":1598,"children":1599},{"language":753,"filename":754,"class":359},[1600],{"type":196,"tag":235,"props":1601,"children":1602},{"class":758},[1603,1634,1635,1638,1639,1662,1663,1698,1699,1734,1735,1775,1776,1820,1821],{"type":196,"tag":366,"props":1604,"children":1605},{"class":368,"style":369},[1606,1611,1616,1621,1625,1630],{"type":196,"tag":366,"props":1607,"children":1608},{"style":765},[1609],{"type":201,"value":1610},"import",{"type":196,"tag":366,"props":1612,"children":1613},{"style":405},[1614],{"type":201,"value":1615}," tailwindcss ",{"type":196,"tag":366,"props":1617,"children":1618},{"style":765},[1619],{"type":201,"value":1620},"from",{"type":196,"tag":366,"props":1622,"children":1623},{"style":384},[1624],{"type":201,"value":899},{"type":196,"tag":366,"props":1626,"children":1627},{"style":814},[1628],{"type":201,"value":1629},"@tailwindcss\u002Fvite",{"type":196,"tag":366,"props":1631,"children":1632},{"style":384},[1633],{"type":201,"value":811},{"type":201,"value":378},{"type":196,"tag":366,"props":1636,"children":1637},{"class":368,"style":369},[],{"type":201,"value":378},{"type":196,"tag":366,"props":1640,"children":1641},{"class":368,"style":369},[1642,1646,1650,1654,1658],{"type":196,"tag":366,"props":1643,"children":1644},{"style":765},[1645],{"type":201,"value":768},{"type":196,"tag":366,"props":1647,"children":1648},{"style":765},[1649],{"type":201,"value":773},{"type":196,"tag":366,"props":1651,"children":1652},{"style":487},[1653],{"type":201,"value":778},{"type":196,"tag":366,"props":1655,"children":1656},{"style":405},[1657],{"type":201,"value":495},{"type":196,"tag":366,"props":1659,"children":1660},{"style":384},[1661],{"type":201,"value":787},{"type":201,"value":378},{"type":196,"tag":366,"props":1664,"children":1665},{"class":368,"style":369},[1666,1670,1674,1678,1682,1686,1690,1694],{"type":196,"tag":366,"props":1667,"children":1668},{"style":794},[1669],{"type":201,"value":797},{"type":196,"tag":366,"props":1671,"children":1672},{"style":384},[1673],{"type":201,"value":353},{"type":196,"tag":366,"props":1675,"children":1676},{"style":405},[1677],{"type":201,"value":806},{"type":196,"tag":366,"props":1679,"children":1680},{"style":384},[1681],{"type":201,"value":811},{"type":196,"tag":366,"props":1683,"children":1684},{"style":814},[1685],{"type":201,"value":817},{"type":196,"tag":366,"props":1687,"children":1688},{"style":384},[1689],{"type":201,"value":811},{"type":196,"tag":366,"props":1691,"children":1692},{"style":405},[1693],{"type":201,"value":826},{"type":196,"tag":366,"props":1695,"children":1696},{"style":384},[1697],{"type":201,"value":505},{"type":201,"value":378},{"type":196,"tag":366,"props":1700,"children":1701},{"class":368,"style":369},[1702,1706,1710,1714,1718,1722,1726,1730],{"type":196,"tag":366,"props":1703,"children":1704},{"style":794},[1705],{"type":201,"value":839},{"type":196,"tag":366,"props":1707,"children":1708},{"style":384},[1709],{"type":201,"value":353},{"type":196,"tag":366,"props":1711,"children":1712},{"style":405},[1713],{"type":201,"value":806},{"type":196,"tag":366,"props":1715,"children":1716},{"style":384},[1717],{"type":201,"value":811},{"type":196,"tag":366,"props":1719,"children":1720},{"style":814},[1721],{"type":201,"value":856},{"type":196,"tag":366,"props":1723,"children":1724},{"style":384},[1725],{"type":201,"value":811},{"type":196,"tag":366,"props":1727,"children":1728},{"style":405},[1729],{"type":201,"value":826},{"type":196,"tag":366,"props":1731,"children":1732},{"style":384},[1733],{"type":201,"value":505},{"type":201,"value":378},{"type":196,"tag":366,"props":1736,"children":1737},{"class":368,"style":369},[1738,1742,1746,1750,1754,1758,1762,1767,1771],{"type":196,"tag":366,"props":1739,"children":1740},{"style":794},[1741],{"type":201,"value":877},{"type":196,"tag":366,"props":1743,"children":1744},{"style":384},[1745],{"type":201,"value":353},{"type":196,"tag":366,"props":1747,"children":1748},{"style":384},[1749],{"type":201,"value":398},{"type":196,"tag":366,"props":1751,"children":1752},{"style":794},[1753],{"type":201,"value":890},{"type":196,"tag":366,"props":1755,"children":1756},{"style":384},[1757],{"type":201,"value":353},{"type":196,"tag":366,"props":1759,"children":1760},{"style":384},[1761],{"type":201,"value":899},{"type":196,"tag":366,"props":1763,"children":1764},{"style":814},[1765],{"type":201,"value":1766},"structure",{"type":196,"tag":366,"props":1768,"children":1769},{"style":384},[1770],{"type":201,"value":811},{"type":196,"tag":366,"props":1772,"children":1773},{"style":384},[1774],{"type":201,"value":913},{"type":201,"value":378},{"type":196,"tag":366,"props":1777,"children":1778},{"class":368,"style":369},[1779,1784,1788,1792,1797,1801,1805,1810,1815],{"type":196,"tag":366,"props":1780,"children":1781},{"style":794},[1782],{"type":201,"value":1783},"  vite",{"type":196,"tag":366,"props":1785,"children":1786},{"style":384},[1787],{"type":201,"value":353},{"type":196,"tag":366,"props":1789,"children":1790},{"style":384},[1791],{"type":201,"value":398},{"type":196,"tag":366,"props":1793,"children":1794},{"style":794},[1795],{"type":201,"value":1796}," plugins",{"type":196,"tag":366,"props":1798,"children":1799},{"style":384},[1800],{"type":201,"value":353},{"type":196,"tag":366,"props":1802,"children":1803},{"style":405},[1804],{"type":201,"value":806},{"type":196,"tag":366,"props":1806,"children":1807},{"style":487},[1808],{"type":201,"value":1809},"tailwindcss",{"type":196,"tag":366,"props":1811,"children":1812},{"style":405},[1813],{"type":201,"value":1814},"()] ",{"type":196,"tag":366,"props":1816,"children":1817},{"style":384},[1818],{"type":201,"value":1819},"},",{"type":201,"value":378},{"type":196,"tag":366,"props":1822,"children":1823},{"class":368,"style":369},[1824,1828],{"type":196,"tag":366,"props":1825,"children":1826},{"style":384},[1827],{"type":201,"value":750},{"type":196,"tag":366,"props":1829,"children":1830},{"style":405},[1831],{"type":201,"value":926},{"type":196,"tag":355,"props":1833,"children":1834},{"language":357,"filename":358,"class":359},[1835],{"type":196,"tag":235,"props":1836,"children":1837},{"class":363},[1838],{"type":196,"tag":366,"props":1839,"children":1840},{"class":368,"style":369},[1841,1846,1850,1854,1858],{"type":196,"tag":366,"props":1842,"children":1843},{"style":765},[1844],{"type":201,"value":1845},"@import",{"type":196,"tag":366,"props":1847,"children":1848},{"style":384},[1849],{"type":201,"value":899},{"type":196,"tag":366,"props":1851,"children":1852},{"style":814},[1853],{"type":201,"value":1809},{"type":196,"tag":366,"props":1855,"children":1856},{"style":384},[1857],{"type":201,"value":811},{"type":196,"tag":366,"props":1859,"children":1860},{"style":384},[1861],{"type":201,"value":427},{"type":196,"tag":197,"props":1863,"children":1864},{},[1865,1867,1871],{"type":201,"value":1866},"Style albums with ",{"type":196,"tag":235,"props":1868,"children":1869},{},[1870],{"type":201,"value":1172},{"type":201,"value":353},{"type":196,"tag":355,"props":1873,"children":1874},{"language":1177,"class":359},[1875],{"type":196,"tag":235,"props":1876,"children":1877},{"class":1181},[1878,1889,1890,1918,1919,1942,1943,1972,1973,2002,2003,2015,2016],{"type":196,"tag":366,"props":1879,"children":1880},{"class":368,"style":369},[1881,1885],{"type":196,"tag":366,"props":1882,"children":1883},{"style":384},[1884],{"type":201,"value":1190},{"type":196,"tag":366,"props":1886,"children":1887},{"style":794},[1888],{"type":201,"value":123},{"type":201,"value":378},{"type":196,"tag":366,"props":1891,"children":1892},{"class":368,"style":369},[1893,1898,1902,1906,1910,1914],{"type":196,"tag":366,"props":1894,"children":1895},{"style":384},[1896],{"type":201,"value":1897},"  :",{"type":196,"tag":366,"props":1899,"children":1900},{"style":1062},[1901],{"type":201,"value":1204},{"type":196,"tag":366,"props":1903,"children":1904},{"style":384},[1905],{"type":201,"value":1209},{"type":196,"tag":366,"props":1907,"children":1908},{"style":384},[1909],{"type":201,"value":1214},{"type":196,"tag":366,"props":1911,"children":1912},{"style":405},[1913],{"type":201,"value":1204},{"type":196,"tag":366,"props":1915,"children":1916},{"style":384},[1917],{"type":201,"value":1214},{"type":201,"value":378},{"type":196,"tag":366,"props":1920,"children":1921},{"class":368,"style":369},[1922,1926,1930,1934,1938],{"type":196,"tag":366,"props":1923,"children":1924},{"style":384},[1925],{"type":201,"value":1897},{"type":196,"tag":366,"props":1927,"children":1928},{"style":1062},[1929],{"type":201,"value":1172},{"type":196,"tag":366,"props":1931,"children":1932},{"style":384},[1933],{"type":201,"value":1209},{"type":196,"tag":366,"props":1935,"children":1936},{"style":384},[1937],{"type":201,"value":1214},{"type":196,"tag":366,"props":1939,"children":1940},{"style":384},[1941],{"type":201,"value":787},{"type":201,"value":378},{"type":196,"tag":366,"props":1944,"children":1945},{"class":368,"style":369},[1946,1951,1955,1959,1964,1968],{"type":196,"tag":366,"props":1947,"children":1948},{"style":794},[1949],{"type":201,"value":1950},"    item",{"type":196,"tag":366,"props":1952,"children":1953},{"style":384},[1954],{"type":201,"value":353},{"type":196,"tag":366,"props":1956,"children":1957},{"style":384},[1958],{"type":201,"value":899},{"type":196,"tag":366,"props":1960,"children":1961},{"style":814},[1962],{"type":201,"value":1963},"group overflow-hidden rounded-xl bg-stone-900",{"type":196,"tag":366,"props":1965,"children":1966},{"style":384},[1967],{"type":201,"value":811},{"type":196,"tag":366,"props":1969,"children":1970},{"style":384},[1971],{"type":201,"value":505},{"type":201,"value":378},{"type":196,"tag":366,"props":1974,"children":1975},{"class":368,"style":369},[1976,1981,1985,1989,1994,1998],{"type":196,"tag":366,"props":1977,"children":1978},{"style":794},[1979],{"type":201,"value":1980},"    img",{"type":196,"tag":366,"props":1982,"children":1983},{"style":384},[1984],{"type":201,"value":353},{"type":196,"tag":366,"props":1986,"children":1987},{"style":384},[1988],{"type":201,"value":899},{"type":196,"tag":366,"props":1990,"children":1991},{"style":814},[1992],{"type":201,"value":1993},"transition duration-300 group-hover:scale-[1.02]",{"type":196,"tag":366,"props":1995,"children":1996},{"style":384},[1997],{"type":201,"value":811},{"type":196,"tag":366,"props":1999,"children":2000},{"style":384},[2001],{"type":201,"value":505},{"type":201,"value":378},{"type":196,"tag":366,"props":2004,"children":2005},{"class":368,"style":369},[2006,2011],{"type":196,"tag":366,"props":2007,"children":2008},{"style":384},[2009],{"type":201,"value":2010},"  }",{"type":196,"tag":366,"props":2012,"children":2013},{"style":384},[2014],{"type":201,"value":1214},{"type":201,"value":378},{"type":196,"tag":366,"props":2017,"children":2018},{"class":368,"style":369},[2019],{"type":196,"tag":366,"props":2020,"children":2021},{"style":405},[2022],{"type":201,"value":2023},"\u002F>",{"type":196,"tag":197,"props":2025,"children":2026},{},[2027,2028,2032],{"type":201,"value":322},{"type":196,"tag":235,"props":2029,"children":2030},{},[2031],{"type":201,"value":286},{"type":201,"value":2033},", the built-in lightbox has no colors: the color variables\nabove belong to the theme CSS and do nothing. Give it a look with your own\nrules on its classes:",{"type":196,"tag":355,"props":2035,"children":2036},{"language":357,"filename":358,"class":359},[2037],{"type":196,"tag":235,"props":2038,"children":2039},{"class":363},[2040,2063,2064,2067,2068,2084,2085,2102,2103,2110,2111,2114,2115,2131,2132,2148,2149,2165,2166,2182,2183,2190,2191,2194,2195,2211,2212,2228,2229,2245,2246],{"type":196,"tag":366,"props":2041,"children":2042},{"class":368,"style":369},[2043,2047,2051,2055,2059],{"type":196,"tag":366,"props":2044,"children":2045},{"style":765},[2046],{"type":201,"value":1845},{"type":196,"tag":366,"props":2048,"children":2049},{"style":384},[2050],{"type":201,"value":899},{"type":196,"tag":366,"props":2052,"children":2053},{"style":814},[2054],{"type":201,"value":1809},{"type":196,"tag":366,"props":2056,"children":2057},{"style":384},[2058],{"type":201,"value":811},{"type":196,"tag":366,"props":2060,"children":2061},{"style":384},[2062],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":2065,"children":2066},{"class":368,"style":369},[],{"type":201,"value":378},{"type":196,"tag":366,"props":2069,"children":2070},{"class":368,"style":369},[2071,2075,2080],{"type":196,"tag":366,"props":2072,"children":2073},{"style":384},[2074],{"type":201,"value":387},{"type":196,"tag":366,"props":2076,"children":2077},{"style":390},[2078],{"type":201,"value":2079},"np-lightbox__backdrop",{"type":196,"tag":366,"props":2081,"children":2082},{"style":384},[2083],{"type":201,"value":398},{"type":201,"value":378},{"type":196,"tag":366,"props":2086,"children":2087},{"class":368,"style":369},[2088,2093,2098],{"type":196,"tag":366,"props":2089,"children":2090},{"style":765},[2091],{"type":201,"value":2092},"  @apply",{"type":196,"tag":366,"props":2094,"children":2095},{"style":405},[2096],{"type":201,"value":2097}," bg-stone-950",{"type":196,"tag":366,"props":2099,"children":2100},{"style":384},[2101],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":2104,"children":2105},{"class":368,"style":369},[2106],{"type":196,"tag":366,"props":2107,"children":2108},{"style":384},[2109],{"type":201,"value":750},{"type":201,"value":378},{"type":196,"tag":366,"props":2112,"children":2113},{"class":368,"style":369},[],{"type":201,"value":378},{"type":196,"tag":366,"props":2116,"children":2117},{"class":368,"style":369},[2118,2122,2127],{"type":196,"tag":366,"props":2119,"children":2120},{"style":384},[2121],{"type":201,"value":387},{"type":196,"tag":366,"props":2123,"children":2124},{"style":390},[2125],{"type":201,"value":2126},"np-lightbox__btn",{"type":196,"tag":366,"props":2128,"children":2129},{"style":384},[2130],{"type":201,"value":398},{"type":201,"value":378},{"type":196,"tag":366,"props":2133,"children":2134},{"class":368,"style":369},[2135,2139,2144],{"type":196,"tag":366,"props":2136,"children":2137},{"style":765},[2138],{"type":201,"value":2092},{"type":196,"tag":366,"props":2140,"children":2141},{"style":405},[2142],{"type":201,"value":2143}," grid size-10 place-items-center rounded-full bg-white\u002F10 text-white",{"type":196,"tag":366,"props":2145,"children":2146},{"style":384},[2147],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":2150,"children":2151},{"class":368,"style":369},[2152,2156,2161],{"type":196,"tag":366,"props":2153,"children":2154},{"style":765},[2155],{"type":201,"value":2092},{"type":196,"tag":366,"props":2157,"children":2158},{"style":405},[2159],{"type":201,"value":2160}," hover:bg-white\u002F20 disabled:opacity-35",{"type":196,"tag":366,"props":2162,"children":2163},{"style":384},[2164],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":2167,"children":2168},{"class":368,"style":369},[2169,2173,2178],{"type":196,"tag":366,"props":2170,"children":2171},{"style":765},[2172],{"type":201,"value":2092},{"type":196,"tag":366,"props":2174,"children":2175},{"style":405},[2176],{"type":201,"value":2177}," focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white",{"type":196,"tag":366,"props":2179,"children":2180},{"style":384},[2181],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":2184,"children":2185},{"class":368,"style":369},[2186],{"type":196,"tag":366,"props":2187,"children":2188},{"style":384},[2189],{"type":201,"value":750},{"type":201,"value":378},{"type":196,"tag":366,"props":2192,"children":2193},{"class":368,"style":369},[],{"type":201,"value":378},{"type":196,"tag":366,"props":2196,"children":2197},{"class":368,"style":369},[2198,2202,2207],{"type":196,"tag":366,"props":2199,"children":2200},{"style":384},[2201],{"type":201,"value":387},{"type":196,"tag":366,"props":2203,"children":2204},{"style":390},[2205],{"type":201,"value":2206},"np-lightbox__counter",{"type":196,"tag":366,"props":2208,"children":2209},{"style":384},[2210],{"type":201,"value":505},{"type":201,"value":378},{"type":196,"tag":366,"props":2213,"children":2214},{"class":368,"style":369},[2215,2219,2224],{"type":196,"tag":366,"props":2216,"children":2217},{"style":384},[2218],{"type":201,"value":387},{"type":196,"tag":366,"props":2220,"children":2221},{"style":390},[2222],{"type":201,"value":2223},"np-lightbox__label",{"type":196,"tag":366,"props":2225,"children":2226},{"style":384},[2227],{"type":201,"value":398},{"type":201,"value":378},{"type":196,"tag":366,"props":2230,"children":2231},{"class":368,"style":369},[2232,2236,2241],{"type":196,"tag":366,"props":2233,"children":2234},{"style":765},[2235],{"type":201,"value":2092},{"type":196,"tag":366,"props":2237,"children":2238},{"style":405},[2239],{"type":201,"value":2240}," text-sm text-white\u002F80",{"type":196,"tag":366,"props":2242,"children":2243},{"style":384},[2244],{"type":201,"value":427},{"type":201,"value":378},{"type":196,"tag":366,"props":2247,"children":2248},{"class":368,"style":369},[2249],{"type":196,"tag":366,"props":2250,"children":2251},{"style":384},[2252],{"type":201,"value":750},{"type":196,"tag":197,"props":2254,"children":2255},{},[2256,2258,2263,2265,2270],{"type":201,"value":2257},"For full control over the markup, build the lightbox from the lower-level\ncomponents. This one uses only Tailwind utilities. The mat comes from the\n",{"type":196,"tag":235,"props":2259,"children":2260},{},[2261],{"type":201,"value":2262},"--np-frame-inset-*",{"type":201,"value":2264}," variables, and the caption and arrows follow the photo\nthrough ",{"type":196,"tag":235,"props":2266,"children":2267},{},[2268],{"type":201,"value":2269},"--np-frame-*",{"type":201,"value":353},{"type":196,"tag":2272,"props":2273,"children":2279},"example",{"name":2274,"also":2275,"photos":2276,"$":2277},"tailwind-gallery","tailwind-lightbox","0-11",{"component":2278,"block":2278},1,[],{"type":196,"tag":330,"props":2281,"children":2283},{"id":2282},"check-the-result",[2284],{"type":201,"value":2285},"Check the result",{"type":196,"tag":197,"props":2287,"children":2288},{},[2289,2291,2296,2298,2302],{"type":201,"value":2290},"Open the lightbox in light and dark mode, and at phone width. Every button\nshows a visible focus ring with ",{"type":196,"tag":235,"props":2292,"children":2293},{},[2294],{"type":201,"value":2295},"Tab",{"type":201,"value":2297},", and disabled buttons look disabled. With\n",{"type":196,"tag":235,"props":2299,"children":2300},{},[2301],{"type":201,"value":286},{"type":201,"value":2303},", check that the backdrop is not transparent.",{"title":2305,"searchDepth":2306,"depth":2306,"links":2307},"",4,[2308,2310,2311,2312,2313],{"id":332,"depth":2309,"text":335},2,{"id":1031,"depth":2309,"text":1034},{"id":1159,"depth":2309,"text":1162},{"id":1588,"depth":2309,"text":1591},{"id":2282,"depth":2309,"text":2285},"markdown","docs",{"source":2317,"path":2318,"stem":2319,"dir":2320,"extension":2321},"content","docs\u002F2.guides\u002F7.style-and-theme.md","docs\u002F2.guides\u002F7.style-and-theme","guides","md",{"requestedPath":89,"resolvedPath":89,"alternates":2323},[],{"requested":2325,"resolved":2326,"usedFallback":6},{},{"locale":8},{"previous":2328,"next":2329},{"title":81,"id":82,"canonicalKey":83,"locale":8,"draft":6,"path":84},{"title":91,"id":92,"canonicalKey":93,"locale":8,"draft":6,"path":94},{"left":2331,"top":2331,"width":2332,"height":2333,"rotate":2331,"vFlip":6,"hFlip":6,"body":2334},0,256,168,"\u003Cpath fill=\"#00dc82\" d=\"M143.618 167.029h95.166c3.023 0 5.992-.771 8.61-2.237a16.96 16.96 0 0 0 6.302-6.115a16.3 16.3 0 0 0 2.304-8.352c0-2.932-.799-5.811-2.312-8.35L189.778 34.6a16.97 16.97 0 0 0-6.301-6.113a17.6 17.6 0 0 0-8.608-2.238c-3.023 0-5.991.772-8.609 2.238a16.96 16.96 0 0 0-6.3 6.113l-16.342 27.473l-31.95-53.724a17 17 0 0 0-6.304-6.112A17.64 17.64 0 0 0 96.754 0c-3.022 0-5.992.772-8.61 2.237a17 17 0 0 0-6.303 6.112L2.31 141.975a16.3 16.3 0 0 0-2.31 8.35c0 2.932.793 5.813 2.304 8.352a16.96 16.96 0 0 0 6.302 6.115a17.6 17.6 0 0 0 8.61 2.237h59.737c23.669 0 41.123-10.084 53.134-29.758l29.159-48.983l15.618-26.215l46.874 78.742h-62.492zm-67.64-26.24l-41.688-.01L96.782 35.796l31.181 52.492l-20.877 35.084c-7.976 12.765-17.037 17.416-31.107 17.416\"\u002F>",{"left":2331,"top":2331,"width":2332,"height":2336,"rotate":2331,"vFlip":6,"hFlip":6,"body":2337},221,"\u003Cpath fill=\"#41b883\" d=\"M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0z\"\u002F>\u003Cpath fill=\"#41b883\" d=\"m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0z\"\u002F>\u003Cpath fill=\"#35495e\" d=\"M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0z\"\u002F>",{"left":2331,"top":2331,"width":2339,"height":2339,"rotate":2331,"vFlip":6,"hFlip":6,"body":2340},24,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2a2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1m8 0h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1\"\u002F>",{"left":2331,"top":2331,"width":2339,"height":2339,"rotate":2331,"vFlip":6,"hFlip":6,"body":2342},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"\u002F>\u003Cpath d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\u002F>\u003C\u002Fg>",{"left":2331,"top":2331,"width":2339,"height":2339,"rotate":2331,"vFlip":6,"hFlip":6,"body":2344},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 18l6-6l-6-6M8 6l-6 6l6 6\"\u002F>",1791310387437]