.api_images_credits_box_fade_out { left: calc(var(--footer-bar-height) + var(--mp)); bottom: var(--footer-page-bottom-stripe-height); } .api_images_credits_box_fade_out div.popup { bottom: calc(var(--footer-page-bottom-stripe-height)); left: calc(var(--footer-bar-height) + var(--mp)); } .api_images_credits_box_fade_in, .api_images_credits_box_fade_out { font-size: 1rem !important; max-width: var(--contents-width) !important; margin: auto !important; left: unset; } .api_images_credits_box_fade_in div.popup, .api_images_credits_box_fade_out div.popup { max-width: var(--contents-width) !important; margin: auto !important; left: unset; overflow-x: hidden; } .api_images_credits_box_fade_out { position: fixed; transform-origin: 0% 0%; color: var(--elements-fg-color-flat); z-index: 0; transition: var(--transition-fast); border-top-width: 0px; transition: var(--transition-fast); } .api_images_credits_box_fade_in { transition: var(--transition-fast); } .api_images_credits_box_fade_out .image_credits_label { min-width: 16rem; transition: var(--transition-fast); background-color: var(--elements-bg-color-trans); backdrop-filter: var(--backdrop-filter-header); -webkit-backdrop-filter: var(--backdrop-filter-header); color: var(--elements-fg-color-flat); padding: calc(var(--mp) * 2); padding-top: calc(var(--mp) * 1); padding-bottom: calc(var(--mp) * 1); font-size: .85rem; border-top-left-radius: calc(var(--mp) * 1); border-top-right-radius: calc(var(--mp) * 1); cursor: pointer; } .api_images_credits_box_fade_out:hover .image_credits_label { opacity: 0; ; } .api_images_credits_box_fade_out div.popup { position: fixed; visibility: hidden; height: -moz-fit-content; height: fit-content; min-height: 4rem; min-width: 18rem; max-width: 33.3vw; display: grid; grid-template-columns: 25% auto; transform-origin: 0% 100%; border-radius: calc(var(--mp) * 1); padding: calc(var(--mp) * 2); text-transform: unset !important; box-shadow: var(--box-shadow-tiny); opacity: 0; background-color: var(--elements-bg-color-trans); backdrop-filter: var(--backdrop-filter-header); -webkit-backdrop-filter: var(--backdrop-filter-header); color: var(--elements-fg-color-flat); z-index: 0; transform: translateY(100%) rotateX(90deg) perspective(100%); overflow: hidden; word-break: break-all; } .api_images_credits_box_fade_in div.popup, .api_images_credits_box_fade_out div.popup { transition: var(--transition-fast); } .api_images_credits_box_fade_out img { width: 100%; overflow: hidden; border-radius: calc(var(--mp) * .5); border: 2pt solid var(--elements-fg-color-flat); background-color: var(--elements-fg-color-flat); border-radius: 50%; } .api_images_credits_box_fade_out .description { position: relative; display: flex; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: center; flex-direction: column; font-size: 1rem; padding-left: calc(var(--mp) * 2); line-height: 1.25rem; } .api_images_credits_box_fade_out .description .bio { font-size: 75%; padding-top: calc(var(--mp) * 1); padding-bottom: calc(var(--mp) * 1); } .api_images_credits_box_fade_out .description .photo_tools { margin-top: var(--mp); display: flex; align-items: flex-end; align-content: flex-end; justify-items: flex-end; justify-content: flex-end; } .api_images_credits_box_fade_out .description .photo_tools * { font-weight: normal !important; text-transform: lowercase !important; font-size: 1.25rem; } .api_images_credits_box_fade_out .description .exif { display: grid; grid-template-columns: auto 100%; margin: calc(var(--mp) * 1); border-radius: calc(var(--mp) * 1); overflow: hidden; width: 100%; } .api_images_credits_box_fade_out .description .exif .exif_title { grid-column: 1/3; font-size: 90% !important; background-color: var(--bg-dependent-bg-color-trans); padding: calc(var(--mp) * .5); } .api_images_credits_box_fade_out .description .description_label { font-weight: bold; text-align: right; } .api_images_credits_box_fade_out .description .description_content { padding-top: calc(var(--mp) * 1); font-weight: 400; max-width: inherit; white-space: normal !important; word-break: normal !important; text-overflow: clip; } .photographer_from { font-size: 85%; ; font-style: italic; } .api_images_credits_box_fade_out .description .exif .exif_label, .api_images_credits_box_fade_out .description .exif .exif_value { padding: calc(var(--mp) * .25); border-bottom: 1px dotted var(--elements-fg-color-flat); text-overflow: ellipsis; white-space: nowrap; } .api_images_credits_box_fade_out .description .exif * { font-size: 75% !important; } .api_images_credits_box_fade_out .description span.description_content_exif { text-transform: uppercase; } .api_images_credits_box_fade_out div.description b { font-weight: 700; } .api_images_credits_box_fade_out b { text-transform: capitalize; } .api_images_credits_box_fade_out a, .api_images_credits_box_fade_out a:visited { color: var(--elements-fg-color-flat); transition: var(--transition-fast); font-weight: 600; text-transform: capitalize; } .api_images_credits_box_fade_out a:hover { filter: brightness(150%); } .api_images_credits_box_fade_in:hover div.popup, .api_images_credits_box_fade_out:hover div.popup { opacity: 1; visibility: visible; transform: translateY(calc(var(--mp) * -2)); max-height: 100%; } .api_images_credits_box_fade_out div.description .description_title { font-size: 110%; padding: calc(var(--mp) * 1); border-radius: calc(var(--mp) * .5); margin-bottom: calc(var(--mp) * 1); background-color: #ffffff20; width: 100%; } .api_images_credits_box_fade_out div.description .social_icons_bar { text-align: right; width: 100%; margin-top: var(--mp); } .api_images_credits_box_fade_out div.description .social_icon_item { display: inline-flex; cursor: pointer; opacity: .75; transition: var(--transition-fast); margin-left: calc(var(--mp) * 1); aspect-ratio: 1 / 1; } .api_images_credits_box_fade_out div.description .social_icon_item:hover { opacity: 1; } .api_images_credits_box_fade_out div.description .social_icon_item img { --social-icon-size: 1.5rem; width: var(--social-icon-size); height: var(--social-icon-size); } @media screen and (max-width:720px) { .api_images_credits_box_fade_out { left: calc(var(--footer-bar-height) + var(--mp)); bottom: var(--footer-page-bottom-stripe-height); } .api_images_credits_box_fade_out div.popup { bottom: calc(var(--footer-page-bottom-stripe-height)); left: calc(var(--footer-bar-height) + var(--mp)); } .api_images_credits_box_fade_in, .api_images_credits_box_fade_out { font-size: 1rem !important; max-width: var(--contents-width) !important; margin: auto !important; left: unset; } .api_images_credits_box_fade_in div.popup, .api_images_credits_box_fade_out div.popup { max-width: var(--contents-width) !important; margin: auto !important; left: unset; overflow-x: hidden; } .api_images_credits_box_fade_out { text-align: center; } .api_images_credits_box_fade_out .image_credits_label { padding: var(--mp); } .api_images_credits_box_fade_out div.popup, .api_images_credits_box_fade_out { left: 0px; right: 0px; bottom: 0px; } } @media screen and (min-width:721px) { .api_images_credits_box_fade_out { right: calc(var(--mp) * 3); bottom: var(--footer-page-bottom-stripe-height); } .api_images_credits_box_fade_out div.popup { bottom: calc(var(--footer-page-bottom-stripe-height)); right: calc(var(--mp) * 3); } }