Untitled

.ya-theme-light, .ya-theme-dark, .ya-container, .ya-recommendation-widget, .ya-units-grid, .grid, .grid-row, .grid-item, .unit-wrapper { position: unset; height: 100%; } /** Из-за различия в наполнении, проще растягиваться на размеры grid в этаже */ .root, .card { width: 100%; height: 100%; } .root { --banner-mailsans: "VK Sans Display", mailsans, helvetica, arial, sans-serif; --banner-arial: arial, helvetica, sans-serif; box-sizing: border-box; border-radius: 20px; background: initial; font-family: var( --banner-font-family, "VK Sans Display", 'mailsans', -apple-system, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, 'Helvetica Neue', 'Helvetica', roboto, arial, sans-serif ); font-style: normal; transition: all 200ms ease 100ms; } .root::before { content: ''; border-radius: inherit; position: absolute; top: 0; bottom: 1px; left: 0; right: 0; border: 0.5px solid var(--vkui--color_field_border_alpha); z-index: 1; pointer-events: none; opacity: 1; } [data-feedback] { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1 !important; border-radius: 20px !important; overflow: hidden; isolation: isolate; background: var(--vkui--color_background_secondary); border: 0.5px solid var(--vkui--color_field_border_alpha); } .card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; isolation: isolate; } .image div[data-asset-click='warning'] { background: var(--zenColorTextSecondary, rgba(0, 0, 0, 0.45)); padding: 4px; fill: var(--zenColorTextStaticWhitePrimary, rgb(255, 255, 255)); fill-opacity: 0.69; } .image div[data-asset-click='warning'] svg { height: 27px; } .image { box-sizing: border-box; border-bottom: 0.5px solid var(--vkui--color_field_border_alpha); } .image .yrw-img-component { padding-bottom: 56.25%; } .image .ya-image-gallery-button { background: var(--zenColorBgMediaSecondary, rgba(0, 0, 0, 0.24)); } .image .ya-image-gallery-indicators { background: var(--zenColorBgMediaSecondary, rgba(0, 0, 0, 0.24)); } .image .ya-image-gallery-indicator[data-active] { background: var(--zenColorTextStaticWhitePrimary, rgb(255, 255, 255)); } .content { min-height: 76px; flex: 1; display: flex; flex-direction: column; position: relative; padding: 12px 16px; } .header { display: flex; align-items: center; } .body { flex: 1 0 auto; } .title { flex: 1 1 auto; word-break: break-word; font-size: 15px; line-height: 20px; font-style: normal; font-weight: 500; color: var(--zenColorTextPrimary, rgba(6, 6, 15, 0.87)); font-family: var(--banner-mailsans); padding-right: 44px; } .description { margin-top: 4px; font-family: var(--banner-arial); font-size: 15px; font-style: normal; font-weight: 400; line-height: 20px; text-align: left; color: var(--zenColorTextSecondary, rgba(6, 6, 15, 0.6)); padding-right: 45px; } .price { margin-top: 10px; height: 20px; display: flex; align-items: center; font-family: var(--banner-arial); } .price .ya-unit-price-current { font-family: var(--banner-mailsans); color: var(--zenColorTextPrimary, rgba(6, 6, 15, 0.87)); font-size: 15px; font-style: normal; font-weight: 500; line-height: 20px; order: 1; } .price .ya-unit-discount { font-family: var(--banner-arial); margin-left: 8px; display: block; padding: 3px 6px; border-radius: 6px; font-size: 13px; font-style: normal; font-weight: 400; line-height: 18px; color: var(--vkui--color_icon_negative); background: var(--vkui--color_background_negative_tint); order: 3; } .price .ya-unit-price-old { margin-left: 8px; font-family: var(--banner-arial); font-size: 13px; font-weight: 400; line-height: 18px; color: var(--zenColorTextSecondary, rgba(6, 6, 15, 0.6)); order: 2; } .price .ya-unit-price-old::after { transform: translateX(-50%) translateY(-60%); top: 62%; } .sitelinks { max-height: 20px; overflow: hidden; margin-top: 8px; padding-right: 48px; font-family: var(--banner-arial); } .sitelinks .ya-unit-sitelink { display: inline-block; overflow: hidden; font-size: 15px; font-style: normal; font-weight: 400; line-height: 20px; color: var(--vkui--color-text-link, #005bd1); } .sitelinks .ya-unit-sitelink:hover { color: var(--zenColorStateHoverTextLink, rgb(77, 153, 240)); } .sitelinks .ya-unit-sitelink:not(:first-child) { margin-left: 12px; } .category { display: flex; align-items: center; position: absolute; top: 12px; left: 12px; z-index: 1; color: white; background: var(--zenColorBgOverlay, rgba(0, 0, 0, 0.72)); border-radius: 36px; font-family: var(--banner-arial); font-size: 9px; line-height: 12px; font-style: normal; font-weight: 400; padding: 6px 8px; } .category:has(span.yrw-unit-category__age) { padding: 6px 5px 6px 8px; } .category .ya-unit-business-unit { margin-left: 0; margin-right: 4px; order: -1; } .domain { flex: 0 0 auto; color: var(--zenColorTextSecondary, rgba(6, 6, 15, 0.6)); font-size: 13px; line-height: 18px; font-weight: 400; font-style: normal; padding-right: 40px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: auto; font-family: var(--banner-arial); } .kebab { opacity: 1; transition: opacity 0.5s ease; } .kebab .ya-unit-kebab_button { top: 12px; right: 4px; width: 32px; height: 32px; color: var(--vkui--color_icon_medium); } .kebab .ya-unit-kebab_bg { opacity: 0 !important; border-radius: 8px; background: var(--vkui--color-states-transparent-hover, rgba(0, 16, 61, 0.04)); } .button { position: absolute; bottom: 12px; right: 12px; display: flex; justify-content: center; align-items: center; border-radius: 12px; overflow: hidden; font-size: 15px; font-weight: 590; font-synthesis: none; line-height: 20px; letter-spacing: -0.12px; padding: 8px; background: var(--zenColorPastelGlacierShallow, rgba(0, 95, 249, 0.1)); color: var(--vkui--color_icon_accent_themed); } .button:hover { background: linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%), var(--zenColorPastelGlacierShallow, rgb(233, 242, 251)); } .ya-image-gallery.ya-image-gallery button.ya-image-gallery-button { cursor: pointer; fill: var(--zenColorTextStaticWhitePrimary, rgb(255, 255, 255)); background: var(--zenColorBgMediaSecondary, rgba(0, 0, 0, 0.24)); width: 32px; height: 32px; } .ya-image-gallery.ya-image-gallery button.ya-image-gallery-button:before { transition: all 0.15s ease-in; content: ''; opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--zenColorStateHover, rgba(0, 11, 33, 0.06)); border-radius: 50%; } .ya-image-gallery.ya-image-gallery button.ya-image-gallery-button:hover:before { opacity: 1; } .ya-image-gallery.ya-image-gallery .ya-image-gallery-indicators { background: var(--zenColorBgMediaSecondary, rgba(0, 0, 0, 0.24)); } .ya-image-gallery .ya-image-gallery-button_next { right: 8px; } .ya-image-gallery .ya-image-gallery-button_prev { left: 8px; } .ya-image-gallery-indicators { padding: 4px; } .ya-image-gallery.ya-image-gallery .ya-image-gallery-indicator { width: 8px; height: 8px; opacity: 1; background: var(--zenColorTextStaticWhiteSecondary, rgba(255, 255, 255, 0.7)); } .ya-image-gallery .ya-image-gallery-indicator[data-active] { background: var(--zenColorTextStaticWhitePrimary, rgb(255, 255, 255)); } @media (hover: hover) and (pointer: fine) { .kebab { opacity: 0; } .root:hover { box-shadow: 0px 6px 20px 0px rgba(0, 16, 61, 0.07); } .root:hover::before { opacity: 0; } .root:hover .kebab { opacity: 1; } .ya-theme-dark .root:hover { background: var(--vkui--color_background_secondary); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04); } .kebab:hover .ya-unit-kebab_bg { opacity: 1 !important; } [data-feedback]:hover { border-color: transparent; } }