SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.7k
1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="utf-8">5 <!--[if lt IE 9]>6 7 <![endif]-->8 <title>9 Entrada | Bruce Hucko Photography10 </title>11 <meta content="Images and Poems by Bruce Hucko and David Lee" name="description">12 <meta content="WideRange Galleries 5.9" name="generator">13 <meta content="Bruce Hucko" name="copyright">14 <meta content="initial-scale=1.0, width=device-width" name="viewport">15 <meta content="" property="og:image">16 <meta content="image/jpeg" property="og:image:type">17 <meta content="1527" property="og:image:width">18 <meta content="1200" property="og:image:height">19 <meta content="" property="og:url">20 <meta content="Entrada" property="og:title">21 <meta content="Images and Poems by Bruce Hucko and David Lee" property="og:description">22 <meta content="Bruce Hucko Photography" property="og:site_name">23 <meta content="summary_large_image" name="twitter:card">24 <style>25 @font-face {26 font-family: 'Marcellus SC';27 font-style: normal;28 font-weight: 400;29 font-display: swap;30 src: url(https://fonts.gstatic.com/s/marcellussc/v13/ke8iOgUHP1dg-Rmi6RWjbLEPgQ.ttf) format('truetype');31}32@font-face {33 font-family: 'Open Sans';34 font-style: normal;35 font-weight: 400;36 font-stretch: normal;37 font-display: swap;38 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf) format('truetype');39}40@font-face {41 font-family: 'Open Sans';42 font-style: normal;43 font-weight: 600;44 font-stretch: normal;45 font-display: swap;46 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4n.ttf) format('truetype');47}48@font-face {49 font-family: 'Open Sans';50 font-style: normal;51 font-weight: 700;52 font-stretch: normal;53 font-display: swap;54 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf) format('truetype');55}56 57 58 59#navShell {60 display: table;61 margin-left: auto;62}63/* remove the list style */64#nav {65 margin: 0;66 padding: 0;67 list-style: none;68}69/* make the LI display inline */70/* it's position relative so that position absolute */71/* can be used in submenu */72#nav li {73 float: left;74 display: block;75 background: none;76 position: relative;77 z-index: 50000;78 margin: 0 1px;79}80/* this is the parent menu */81#nav li a {82 display: block;83 padding: 8px 12px;84 padding: 0.8rem 1.2rem;85 height: 16px;86 height: 1.6rem;87 text-decoration: none;88 /*color:#fff;*/89 text-align: left;90}91#nav li a:hover {92 background: none;93 text-decoration: underline;94 /*background-color: #fff;*/95}96/* you can make a different style for default selected value */97#nav a.selected {98 /*color:#f00;*/99}100/* submenu, it's hidden by default */101#nav ul {102 position: absolute;103 left: 0;104 display: none;105 margin: 0 0 0 -1px;106 padding: 12px 0 16px 0;107 padding: 1.2rem 0 1.6rem 0;108 list-style: none;109 background-color: #FFF;110 -moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);111 -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);112 box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);113}114#nav ul li {115 text-transform: none;116 width: 170px;117 width: 17rem;118 float: left;119 line-height: 1.2;120 /*border-top:1px solid #fff;*/121}122/* display block will make the link fill the whole area of LI */123#nav ul a {124 display: block;125 height: auto;126 padding: 8px 12px;127 padding: 0.8rem 1.2rem;128 /*color:#666;*/129}130#nav ul a:hover {131 /*text-decoration:underline;*/132}133/* fix ie6 small issue */134/* we should always avoid using hack like this */135/* should put it into separate file : ) */136*html #nav ul {137 margin:0 0 0 -2px;138}139 140 141/* avoid browser default inconsistent heading font-sizes */142/* and pre/code too */143h1,h2,h3,h4,h5,h6,pre,code {144 font-size: 1em;145}146/* remove the inconsistent (among browsers) default ul,ol padding or margin */147/* the default spacing on headings does not match nor align with148 normal interline spacing at all, so let's get rid of it. */149/* zero out the spacing around pre, form, body, html, p, blockquote as well */150/* form elements are oddly inconsistent, and not quite CSS emulatable. */151/* nonetheless strip their margin and padding as well */152/* ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { */153h1,h2,h3,h4,h5,h6,pre,form,body,html,p,fieldset,input,figure,figcaption {154 margin: 0;155 padding: 0;156}157figure {158 margin-before: 0;159 margin-after: 0;160 margin-start: 0;161 margin-end: 0;162}163/* whoever thought blue linked image borders were a good idea? */164a img,:link img,:visited img, img {165 border: none;166}167a:hover {168 cursor: pointer;169}170/* Make HTML 5 elements display block-level for consistent styling */171header, nav, article, main, footer, address, figure, figcaption {172 display: block;173}174html {175 font-size: 62.5%;176 -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */177 scroll-behavior: smooth;178}179a {180 outline: none;181}182/* prevent html5 strict doctype img spaces under images */183img {184 vertical-align: bottom;185 height: auto;186}187/* set a standard bottom margin on common html elements and others */188p,189h1, h2, h3, h4, h5, h6,190.galleryParagraph,191.pageNav,192.pageNav1,193.photoCaption,194.photoGals,195.photoRelated {196 margin-bottom: 12px;197 margin-bottom: 1.2rem;198}199/* all cleared elements */200.clear,201h1,202footer,203.galleryParagraph,204.newsHeader,205.pageNav,206.photoActions,207.submenusIntro {208 clear: both;209}210/* images 100% */211figure, .img, .imgLarge, .main img {212 max-width: 100%;213}214.img,215.imgLarge,216.content figure img,217.galleryParagraph figure img {218 -moz-box-sizing: border-box;219 -webkit-box-sizing: border-box;220 box-sizing: border-box;221}222 223/* ===================== SEARCH ============================ */224 225.searchBkg {226 margin-top: 40px;227 margin-top: 4rem;228}229.searchBkg li, .searchBkg ul {230 list-style: none;231 margin: 0;232 padding: 0;233 text-align: left;234}235.searchBkg ul {236 margin: 0 40px 40px 0;237 margin: 0 4rem 4rem 0;238 float: left;239}240.searchBkg li ul {241 margin: 0;242 float: none;243}244.searchBkg li li {245 padding-left: 20px;246 padding-left: 2rem;247 padding-top: 10px;248 padding-top: 1rem;249 border-top: 1px solid #1E1E1C;250 margin-top: 10px;251 margin-top: 1rem;252}253.searchBkg li li li {254 border: none;255 padding-top: 0;256 margin: 0;257}258 259/* ===================== BLOG =============================== */260 261.categoriesMenu,262.categoriesSpan {263 white-space: nowrap;264}265.categoriesSelect {266 max-width: 200px;267 max-width: 20rem;268}269.galNavShell {270 padding: 10px 0;271 padding: 1rem 0;272 margin-top: 40px;273 margin-top: 4rem;274}275.galNavLinks {276 width: 100%;277}278.galNavLeft {279 max-width: 48%;280 float: left;281 padding-right: 10px;282 padding-right: 1rem;283 text-align: left;284}285.galNavRight {286 max-width: 48%;287 float: right;288 text-align: right;289 padding-left: 10px;290 padding-left: 1rem;291 text-align: right;292}293.journalMenuTiled .captionTeaser {294 margin-top: 10px;295 margin-top: 1rem;296}297.menuContent .captionDate {298 margin-bottom: 12px;299 margin-bottom: 1.2rem;300}301.pageNav1 {302 line-height: 2;303}304.subtitle {305 margin-top: -12px;306 margin-top: -1.2rem;307 margin-bottom: 24px;308 margin-bottom: 2.4rem;309}310.tagline {311 clear: both;312 margin-top: 60px;313 margin-top: 6rem;314}315.relatedGals {316 margin-top: 100px;317 margin-top: 10rem;318}319.relatedGal {320 display: inline-block;321 vertical-align: top;322}323.relatedText {324 margin-top: 10px;325 margin-top: 1rem;326}327.wg-comments {328 clear: both;329 padding-top: 100px;330 padding-top: 10rem;331 margin-bottom: 60px;332 margin-bottom: 6rem;333}334 335/* ===================== REDACTOR CONTENT & PHOTOS ============================ */336 337.content h1,338.linkCat {339 clear: both;340 margin-top: 40px;341 margin-top: 4rem;342}343.content h1:first-of-type,344.linkCat:first-of-type {345 margin-top: 0;346}347.content h2,348.content h3,349.content h4,350.content h5,351.content h6 {352 clear: none;353 text-align: left;354 margin-top: 24px;355 margin-top: 2.4rem;356}357.content li {358 text-align: left !important;359}360.content > ol,361.content > ul,362.content div > ol,363.content div > ul {364 padding-left: 1em;365}366/*.content p {367 text-align: left;368}*/369.content figcaption {370 font-style: italic;371 margin-top: 12px;372 margin-top: 1.2rem;373 padding-left: 12px;374 padding-left: 1.2rem;375 padding-right: 12px;376 padding-right: 1.2rem;377}378.content figcaption h1,379.content figcaption h2,380.content figcaption h3,381.content figcaption h4,382.content figcaption h5,383.content figcaption h6 {384 font-style: normal;385}386.content figcaption .photoTitle {387 margin: 16px 0 -6px 0;388 margin: 1.6rem 0 -0.6rem 0;389}390.content figcaption .photoLocation,391.content figcaption .photoCaption {392 margin-top: 12px;393 margin-top: 1.2rem;394}395.content figcaption .printsLink {396 /*margin-top: -6px !important;397 margin-top: -0.6rem !important;*/398 margin-top: 8px;399 margin-top: 0.8rem;400}401.image-full {402 margin-top: 40px;403 margin-top: 4rem;404 margin-bottom: 40px;405 margin-bottom: 4rem;406 clear: both;407}408.footerCell .image-full,409.footerCell .image-full img {410 margin-top: 10px;411 margin-top: 1rem;412 margin-bottom: 20px;413 margin-bottom: 2rem;414 max-width: 100%;415 margin-left: 0;416 -webkit-transform: none;417 -moz-transform: none;418 -ms-transform: none;419 -o-transform: none;420 transform: none;421}422.image-center {423 margin-left: auto;424 margin-right: auto;425}426.image-left {427 float: left;428 max-width: 55%;429 margin: 0 20px 20px 0 !important;430 margin: 0 2rem 2rem 0 !important;431}432.image-right {433 float: right;434 max-width: 55%;435 margin: 0 0 20px 20px !important;436 margin: 0 0 2rem 2rem !important;437}438.image-center img,439.image-left img,440.image-right img {441 max-width: 100% !important;442 height: auto !important;443}444.image-resized {445 margin-bottom: 20px;446 margin-bottom: 2rem;447}448.video-container {449 overflow: hidden;450 padding-bottom: 56.25%;451 position: relative;452 height: 0;453 margin-top: 40px;454 margin-top: 4rem;455 margin-bottom: 40px;456 margin-bottom: 4rem;457 clear: both;458}459.video-container iframe {460 left: 0;461 top: 0;462 height: 100%;463 width: 100%;464 position: absolute;465}466 467/* ===================== SLIDESHOWS ============================= */468 469.fotorama img {470 -moz-box-sizing: border-box;471 -webkit-box-sizing: border-box;472 box-sizing: border-box;473}474.fotorama__html div,475.fotorama__html a {476 display: block;477 height: 100%;478 /* Transparent links are not clickable in IE,479 but non-existent background fixes this.480 (Put an empty 1Ã1 image here to avoid481 errors in console.) */482 background: url(https://www.widerangegalleries.com/widerange/5.0/images/blank.gif);483}484.fotorama__nav {485 overflow: hidden !important;486 margin-top: 20px !important;487 margin-top: 2rem !important;488}489.fotorama__nav::before, .fotorama__stage::before,490.fotorama__nav::after, .fotorama__stage::after {491 background-image: none !important;492}493.sliderContainer {494 margin-bottom: 40px;495 margin-bottom: 4rem;496}497 498/* ===================== RESPONSIVE STANDARD STUFF ============================= */499body {500 line-height: 1.5;501}502footer {503 clear: both;504 padding-top: 50px;505 padding-top: 5rem;506}507header {508 margin-bottom: 32px;509 margin-bottom: 3.2rem;510}511hr {512 clear: both;513 margin-top: 30px;514 margin-top: 3rem;515 margin-bottom: 30px;516 margin-bottom: 3rem;517}518img[src$=".png"] {519 background-color: transparent !important;520 border: none !important;521 -moz-box-shadow: none !important;522 -webkit-box-shadow: none !important;523 box-shadow: none !important;524}525nav {526 line-height: 2;527 margin-top: 12px;528 margin-top: 1.2rem;529}530h1 {531 margin-bottom: 18px;532 margin-bottom: 1.8rem;533}534#logo img {535 max-width: 100%;536}537#page2 {538 margin: 0 20px 20px 20px;539 margin: 0 2rem 2rem 2rem;540}541.agreement {542 clear: both;543 padding: 10px;544 padding: 1rem;545 max-width: 300px;546 max-width: 30rem;547 margin-top: 20px;548 margin-top: 2rem;549 margin-bottom: 20px;550 margin-bottom: 2rem;551 line-height: 1.5;552}553.captionTeaser ul,554.printsCategory ul {555 list-style-position: inside;556 padding-left: 0;557}558.captionTitle,559.thumbLinkSub {560 margin-top: 12px;561 margin-top: 1.2rem;562}563.captionTitle a:link,564.captionTitle a:visited,565.captionTitle a:hover,566.thumbLinkSub a:link,567.thumbLinkSub a:visited,568.thumbLinkSub a:hover {569 text-decoration: none;570}571.center,572.center h1 {573 text-align: center;574}575.contactForm {576 clear: both;577 margin-top: 24px;578 margin-top: 2.4rem;579}580.copyright {581 font-size: 10px;582 font-size: 1rem;583}584.error {585 color: #FF0000;586}587.fancybox {588 cursor: pointer;589}590.floatLeft {591 text-align: left;592 float: left;593 margin: 0 12px 12px 0;594 margin: 0 1.2rem 1.2rem 0;595}596.floatRight {597 float: right;598 margin: 0 0 12px 12px;599 margin: 0 0 1.2rem 1.2rem;600}601.googleSearch {602 text-align: left;603}604.hidden {605 display: none;606}607.input {608 width: 360px;609 width: 36rem;610 max-width: 100%;611}612.input2 {613 width: 150px;614 width: 15rem;615 max-width: 100%;616}617.input3 {618 width: 200px;619 width: 20rem;620 max-width: 100%;621}622.input4 {623 width: 196px;624 width: 19.6rem;625 max-width: 100%;626}627.journalText .price {628 margin-top: 36px;629 margin-top: 3.6rem;630}631.largeLink {632 font-weight: bold;633 text-transform: uppercase;634}635.largePhotos {636 margin-top: 40px;637 margin-top: 4rem;638}639.left,640.left h2,641.left h3,642.left p {643 text-align: left;644}645.linkSection {646 margin-bottom: 32px;647 margin-bottom: 3.2rem;648}649.menu {650 margin: 40px 0 0 0;651 margin: 4rem 0 0 0;652}653.menuItem {654 clear: both;655 overflow: hidden;656 width: 100%;657}658.menuThumb {659 margin-bottom: 16px;660 margin-bottom: 1.6rem;661}662.narrow {663 width: 360px;664 width: 36rem;665 text-align: justify;666}667.nav2 {668 margin: 6px 0 6px 0;669 margin: .6rem 0 .6rem 0;670}671.newsHeader {672 clear: both;673 text-align: left !important;674 margin: 30px 0 12px 0;675 margin: 3rem 0 1.2rem 0;676}677.newsItem {678 margin-bottom: 24px;679 margin-bottom: 2.4rem;680 clear: both;681}682.newsPic {683 float: left;684 margin: 0 20px 20px 0;685 margin: 0 2rem 2rem 0;686 max-width: 50%;687 height: auto;688}689.newsText, .newsText p {690 text-align: left;691}692.newsThumbs {693 float: left;694}695.newsTitle {696 text-align: left;697 margin-bottom: 12px;698 margin-bottom: 1.2rem;699}700.noBorder {701 border: none;702}703.notice,704.vacation {705 color: #00ccff;706 font-size: 1.1em;707 font-weight: bold;708}709.padding-none {710 padding: 0;711}712.pageColumn1 {713 float: left;714}715.pageNav,716.pageNav1 {717 word-wrap: break-word;718}719.pageSidebar {720 float: right;721 text-align: left;722}723.pageNav {724 font-size: 15px;725 font-size: 1.5rem;726 letter-spacing: .1em;727 margin-top: 24px;728 margin-top: 2.4rem;729}730.pageNav a {731 font-size: 14px;732 font-size: 1.4rem;733}734.pageNav2 {735 clear: both;736 margin: 18px 0 12px 0;737 margin: 1.8rem 0 1.2rem 0;738}739.pageNumbers,740.pageNumbers1 {741 word-wrap: normal;742}743.pageNumbers a {744 font-size: 24px;745 font-size: 2.4rem;746}747.peeps {748 visibility: hidden;749 display: none;750}751.photo1 {752 max-width: 100%;753}754.photoCell {755 max-width: 86%;756 display: inline-block;757}758.photoNavText {759 margin-top: 12px;760 margin-top: 1.2rem;761}762.photoNav-left {763 display: inline-block;764 max-width: 6%;765 margin-left: -1px;766 margin-left: -0.1rem;767}768.photoNav-right {769 display: inline-block;770 max-width: 6%;771 margin-right: -1px;772 margin-right: -0.1rem;773}774.photoNav-left img,775.photoNav-right img {776 max-width: 100%;777}778.photo,779.photo1,780.contentPhoto,781.defaultimg {782 margin-bottom: 20px;783 margin-bottom: 2rem;784}785.photoActions {786 font-weight: bold;787 margin: 24px 0;788 margin: 2.4rem 0;789 line-height: 2;790}791.photoActionItem {792 display: inline-block;793 padding: 0 16px;794 padding: 0 1.6rem;795}796.photoLocation {797 padding: 0;798 text-transform: none;799 font-variant: normal;800 font-weight: normal;801 letter-spacing: 0;802}803.photoNav {804 margin: 36px 0;805 margin: 3.6rem 0;806}807.photoNav a {808 text-decoration: none;809}810.photoNavText {811 margin-top: 12px;812 margin-top: 1.2rem;813}814.photoTitle {815 margin: 18px 0 0 0;816 margin: 1.8rem 0 0 0;817}818.photoTitle a:link,819.photoTitle a:visited,820.photoTitle a:hover {821 text-decoration: none;822}823.price {824 line-height: 2;825 margin-top: 40px;826 margin-top: 4rem;827}828.price-select {829 line-height: 2;830 margin-top: 20px;831 margin-top: 2rem;832}833.prints {834 margin-top: 40px;835 margin-top: 4rem;836}837.printColumn1 {838 margin-bottom: 32px;839 margin-bottom: 3.2rem;840}841.printForm {842 margin-bottom: 20px;843 margin-bottom: 2rem;844}845.printForm h3 {846 margin-bottom: 0;847}848.printFormSolo {849 max-width: 400px;850 max-width: 40rem;851 margin: 0 auto;852}853.printTable {854 clear: both;855 margin-top: 50px;856 margin-top: 5rem;857}858.printThumb {859 margin-top: 24px;860 margin-top: 2.4rem;861 margin-bottom: 36px;862 margin-bottom: 3.6rem;863}864.printsCategory img {865 max-width: 50%;866}867.printsCategory .price {868 text-align: left;869}870.previewImg {871 max-width: 100% !important;872 margin-top: 4px;873 margin-top: 0.4rem;874 margin-bottom: 12px;875 margin-bottom: 1.2rem;876}877.right {878 text-align: right;879}880.selectPrints {881 width: 100%;882 max-width: 300px;883 max-width: 30rem;884}885.selectShipping {886 max-width: 180px;887 max-width: 18rem;888}889.subgallery,890.subgalleryTease {891 clear: both;892 padding-top: 3rem;893}894.subgalleryTease {895 clear: both;896 padding-top: 2rem;897}898.siteTitle {899 margin-top: 30px;900 margin-top: 3rem;901}902.siteTitle a:link,903.siteTitle a:visited {904 text-decoration: none;905}906.text-center {907 text-align: center !important;908}909.text-left {910 text-align: left !important;911}912.text-right {913 text-align: right !important;914}915.thumbButton {916 margin-bottom: 3rem;917}918.thumbNumber {919 font-size: 10px;920 font-size: 1rem;921 margin-top: 4px;922 margin-top: .4rem;923}924.thumbLinkSub {925 font-size: 1.15em;926}927.thumbNumber {928 margin-top: 0;929}930.tinyText {931 font-size: 12px;932 font-size: 1.2rem;933}934.welcome {935 margin-top: 24px;936 margin-top: 2.4rem;937}938 939 940body {941 background-size: 100% auto;942}943nav, #logo {944 text-align: center;945}946ul, li {947 max-width: 800px;948 max-width: 80rem;949 margin-left: auto;950 margin-right: auto;951}952#nav ul {953 visibility: hidden;954}955#navShell {956 margin-left: auto;957 margin-right: auto;958}959.galleryParagraph ul {960 text-align: left;961}962.input, .inputs, .input2, .input3 {963 padding: 2px;964}965/*.imgLarge {966 max-height: 700px;967 max-height: 70rem;968}*/969.photoNav-left, .photoNav-right {970 vertical-align: bottom;971 /*margin-top: 30%;*/972}973.photoTitle {974 margin-top: 24px;975 margin-top: 2.4rem;976}977@media screen and (min-width: 600px) {978 #nav ul {979 visibility: visible;980 }981}982@media screen and (min-width: 900px) {983 header {984 margin-bottom: 0;985 }986 nav {987 position: relative;988 top: -80px;989 top: -8rem;990 max-width: 1000px;991 max-width: 100rem;992 margin: 0 auto;993 text-align: right;994 }995 #logo {996 max-width: 1000px;997 max-width: 100rem;998 text-align: left;999 margin: 0 auto;1000 }1001 #navShell {1002 margin-left: auto;1003 margin-right: 0;1004 }1005}1006/*@media screen and (min-width: 1200px) {1007 .photoNav-left, .photoNav-right {1008 margin-top: 350px;1009 }1010}*/1011/* homepage */1012.triptych {1013 max-width: 1648px;1014 max-width: 164.8rem;1015 padding-left: 10px;1016 padding-left: 1rem;1017 padding-right: 10px;1018 padding-right: 1rem;1019 margin: 0 auto;1020}1021.pic1, .pic2, .pic3 {1022 float: left;1023 background-color: #FFF;1024 padding: 0.74626866%;1025 -moz-box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);1026 -webkit-box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);1027 box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);1028}1029.pic1 img, .pic2 img, .pic3 img {1030 width: 100%;1031 overflow: hidden;1032 vertical-align: middle;1033}1034.pic1, .pic3 {1035 width: 20.708955%1036}1037.pic2 {1038 width: 46.641791%;1039}1040.pic1, .pic2 {1041 margin-right: 3.7313433%;1042}1043.welcome {1044 clear: both;1045 padding-top: 40px;1046 padding-top: 4rem;1047}1048 1049 1050/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */1051 1052.pswp {1053 --pswp-bg: #000;1054 --pswp-placeholder-bg: #222;1055 1056 1057 --pswp-root-z-index: 100000;1058 1059 --pswp-preloader-color: rgba(79, 79, 79, 0.4);1060 --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);1061 1062 /* defined via js:1063 --pswp-transition-duration: 333ms; */1064 1065 --pswp-icon-color: #fff;1066 --pswp-icon-color-secondary: #4f4f4f;1067 --pswp-icon-stroke-color: #4f4f4f;1068 --pswp-icon-stroke-width: 2px;1069 1070 --pswp-error-text-color: var(--pswp-icon-color);1071}1072 1073 1074/*1075 Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)1076*/1077 1078.pswp {1079 position: fixed;1080 top: 0;1081 left: 0;1082 width: 100%;1083 height: 100%;1084 z-index: var(--pswp-root-z-index);1085 display: none;1086 touch-action: none;1087 outline: 0;1088 opacity: 0.003;1089 contain: layout style size;1090 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);1091}1092 1093/* Prevents focus outline on the root element,1094 (it may be focused initially) */1095.pswp:focus {1096 outline: 0;1097}1098 1099.pswp * {1100 box-sizing: border-box;1101}1102 1103.pswp img {1104 max-width: none;1105}1106 1107.pswp--open {1108 display: block;1109}1110 1111.pswp,1112.pswp__bg {1113 transform: translateZ(0);1114 will-change: opacity;1115}1116 1117.pswp__bg {1118 opacity: 0.005;1119 background: var(--pswp-bg);1120}1121 1122.pswp,1123.pswp__scroll-wrap {1124 overflow: hidden;1125}1126 1127.pswp__scroll-wrap,1128.pswp__bg,1129.pswp__container,1130.pswp__item,1131.pswp__content,1132.pswp__img,1133.pswp__zoom-wrap {1134 position: absolute;1135 top: 0;1136 left: 0;1137 width: 100%;1138 height: 100%;1139}1140 1141.pswp__img,1142.pswp__zoom-wrap {1143 width: auto;1144 height: auto;1145}1146 1147.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {1148 cursor: -webkit-zoom-in;1149 cursor: -moz-zoom-in;1150 cursor: zoom-in;1151}1152 1153.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {1154 cursor: move;1155 cursor: -webkit-grab;1156 cursor: -moz-grab;1157 cursor: grab;1158}1159 1160.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {1161 cursor: -webkit-grabbing;1162 cursor: -moz-grabbing;1163 cursor: grabbing;1164}1165 1166/* :active to override grabbing cursor */1167.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,1168.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,1169.pswp__img {1170 cursor: -webkit-zoom-out;1171 cursor: -moz-zoom-out;1172 cursor: zoom-out;1173}1174 1175 1176/* Prevent selection and tap highlights */1177.pswp__container,1178.pswp__img,1179.pswp__button,1180.pswp__counter {1181 -webkit-user-select: none;1182 -moz-user-select: none;1183 -ms-user-select: none;1184 user-select: none;1185}1186 1187.pswp__item {1188 /* z-index for fade transition */1189 z-index: 1;1190 overflow: hidden;1191}1192 1193.pswp__hidden {1194 display: none !important;1195}1196 1197/* Allow to click through pswp__content element, but not its children */1198.pswp__content {1199 pointer-events: none;1200}