Server IP : 80.87.202.40 / Your IP : 216.73.216.169 Web Server : Apache System : Linux rospirotorg.ru 5.14.0-539.el9.x86_64 #1 SMP PREEMPT_DYNAMIC Thu Dec 5 22:26:13 UTC 2024 x86_64 User : bitrix ( 600) PHP Version : 8.2.27 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/bitrix/ext_www/cvetdv.ru/bitrix/components/bitrix/catalog.item/templates/store_v3/ |
Upload File : |
.catalog-section-item { background-color: #fff; margin-bottom: 4px; width: 100%; display: flex; flex-direction: column; justify-content: space-between; } @media (min-width: 576px) { .catalog-section-item { border: 1px solid rgba(0, 0, 0, 0.11); } } /*region Slider */ .catalog-section-item-slider-container { position: relative; max-width: 100%; background: transparent; transition: background 800ms ease; z-index: 90; overflow: hidden; } .catalog-section-item-slider-block { position: relative; box-sizing: border-box; padding-top: 56.25%; height: 0; background: #fff; border-bottom: 1px solid #f0efed; overflow: hidden; } .catalog-section-item-slider-block.catalog-section-item-slider-block-square { padding-top: 100%; } @media (min-width: 576px) { .catalog-section-item-slider-block { padding-top: 100% !important; } } .catalog-section-item-slider-images-container { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; } .catalog-section-item-slider-images-container::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; z-index: 8; background: #fff; } .catalog-section-item-slider-image { position: absolute; top: 100%; right: 0; bottom: 0; left: 0; margin-left: 0; text-align: center; opacity: 0; z-index: 5; width: 100%; } .catalog-section-item-slider-image-overlay { z-index: 9; position: absolute; background-size: cover; background-repeat: no-repeat; background-position: center; top: 0; right: 0; bottom: 0; left: 0; filter: blur(44px); } .catalog-section-item-slider-image-overlay:before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)); } .catalog-section-item-slider-images-slider-pager { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; display: flex; align-items: stretch; z-index: 10; } .catalog-section-item-slider-images-slider-pager-item { flex: 1 1 0; position: relative; } .catalog-section-item-slider-image.active, .catalog-section-item-slider-image.next, .catalog-section-item-slider-image.prev { z-index: 10; opacity: 1; top: 0; } .catalog-section-item-slider-animation .catalog-section-item-slider-image.left.active { animation: catalogSectionItemSliderImage_left_active 250ms ease-in-out 1 forwards; } @keyframes catalogSectionItemSliderImage_left_active { from { margin-left: 0; } to { margin-left: -100%; } } .catalog-section-item-slider-animation .catalog-section-item-slider-image.right.active { animation: catalogSectionItemSliderImage_right_active 250ms ease-in-out 1 forwards; } @keyframes catalogSectionItemSliderImage_right_active { from { margin-left: 0; } to { margin-left: 100%; } } .catalog-section-item-slider-animation .catalog-section-item-slider-image.left.next { animation: catalogSectionItemSliderImage_left_next 250ms ease-in-out 1 forwards; } @keyframes catalogSectionItemSliderImage_left_next { from { margin-left: 100%; } to { margin-left: 0; } } .catalog-section-item-slider-animation .catalog-section-item-slider-image.right.prev { animation: catalogSectionItemSliderImage_right_prev 250ms ease-in-out 1 forwards; } @keyframes catalogSectionItemSliderImage_right_prev { from { margin-left: -100%; } to { margin-left: 0; } } .catalog-section-item-slider-image img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; width: auto; height: auto; z-index: 10; outline: 1px solid transparent; background-position: center; background-repeat: no-repeat; transform: translateY(-50%) translateX(-50%); } .catalog-section-item-slider-progress-bar { position: absolute; bottom: 0; left: 0; z-index: 180; height: 3px; background: var(--theme-color-primary, #63aa28); } /*endregion*/ /*region Slider Controls*/ .catalog-section-item-slider-controls-block { padding: 4px 16px; text-align: center; display: flex; align-items: center; justify-content: center; } .catalog-section-item-slider-controls-block.selected { display: flex; } .catalog-section-item-slider-controls-image { position: relative; padding: 4px; overflow: hidden; opacity: .3; text-align: center; cursor: pointer; flex-grow: 1; } .catalog-section-item-slider-controls-image:hover, .catalog-section-item-slider-controls-image.active { opacity: 1; } .catalog-section-item-slider-controls-dot { height: 4px; background-color: #c4c4c4; border-radius: 2px; } .catalog-section-item-slider-close { display: none; } .catalog-section-item-slider-container.popup .catalog-section-item-slider-close { position: absolute; top: 4px; right: 110px; bottom: 0; z-index: 150; display: block; width: 50px; height: 50px; background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpolygon%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20points%3D%2216%2015.1%208.944%208%2016%201%2015.006%200%208.05%207%20.994%200%200%201%207.056%208%200%2015.1%20.994%2016%208.05%209%2015.006%2016%22%2F%3E%3C%2Fsvg%3E') no-repeat center; opacity: .27; cursor: pointer; transition: all 300ms ease; } .catalog-section-item-slider-container.popup .catalog-section-item-slider-close:hover { opacity: 1; } .catalog-section-item-slider-container.popup .catalog-section-item-slider-right { right: 105px; } /*endregion*/ /*region LABEL*/ .catalog-section-item-label-container { position: absolute; left: 0; top: 9px; z-index: 50; display: flex; flex-direction: column; align-items: flex-start; } .catalog-section-item-label-text { background: #63aa28; color: #fff; padding: 1px 16px; border: 1px solid #fff; border-left: none; font-weight: 500; font-size: 16px; line-height: 25px; margin-bottom: 3px; } /*endregion*/ .catalog-section-item-description { padding: 12px 16px 23px 16px; } /*region NAME*/ .catalog-section-item-name, .catalog-section-item-name a, .catalog-section-item-name-link { color: #777; text-decoration: none; font: normal 16px/23px "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .catalog-section-item-name-link:hover { } /*endregion*/ /*region PRICE*/ .catalog-section-item-price { font-weight: 500; font-size: 26px; line-height: 31px; color: #121212; } .catalog-section-item-price-discount-container { padding-bottom: 2px; } .catalog-section-item-price-discount { font-style: normal; font-weight: 500; font-size: 11px; line-height: 15px; text-decoration-line: line-through; color: #121212; opacity: 0.5; margin-right: 1px; } .catalog-section-item-price-discount-diff { font-style: normal; font-weight: 500; font-size: 12px; line-height: 15px; text-align: center; text-transform: capitalize; color: #fff; padding: 0 6px; background: #63aa28; border-radius: 4px; } /*endregion*/ /*region BUTTONS*/ .catalog-section-item-buy-btn { margin: 0 auto; width: 100%; max-width: 260px; min-width: 120px; transition: background-color .3s; } .btn.catalog-section-item-buy-btn[disabled], .btn.catalog-section-item-buy-btn.disabled { background-color: #121212; border-color: #121212; color: #fff; opacity: .2; } .btn.catalog-section-item-buy-btn:hover { background-color: #404040; } .catalog-section-item-popup-buy-btn { min-width: 290px; margin: 0 auto; width: 100%; } /*endregion*/ /*region DETAIL POPUP*/ .catalog-section-item-detail-wrapper { position: fixed; bottom: 0; left: 0; right: 0; z-index: 198; transition: 180ms linear background; background: rgba(0, 0, 0, 0); } .catalog-section-item-detail-wrapper.opened { top: 0; display: flex; } .catalog-section-item-detail-cover { z-index: 190; position: absolute; bottom: 0; left: 0; right: 0; top: 0; pointer-events: none; background: rgba(0, 0, 0, 0); transition: 180ms linear background; } .catalog-section-item-detail-wrapper.opened .catalog-section-item-detail-cover { background: rgba(0, 0, 0, 0.8); pointer-events: auto; } .catalog-section-item-detail-container { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 615px; max-height: 90vh; z-index: 200; transition: 200ms linear all; display: flex; align-items: stretch; width: 100%; flex-direction: column; } .catalog-section-item-detail-wrapper.closed .catalog-section-item-detail-container { max-height: 0; bottom: -20px; } @media (min-width: 615px) { .catalog-section-item-detail-swipe-btn-container { display: none !important; } .catalog-section-item-detail-container { max-width: 400px; transition: 200ms linear height, 200ms linear opacity; max-height: 80vh; opacity: 0; } .catalog-section-item-detail-wrapper.opened .catalog-section-item-detail-container { position: relative; transform: none; left: 0; margin: 0 auto; align-self: center; opacity: 1; } .catalog-section-item-detail-offers { border-radius: 0 0 12px 12px; } } /*region DETAIL POPUP HEADER*/ .catalog-section-item-detail-header { padding: 7px 14px; } .catalog-section-item-detail-header-separate { flex: 1; padding-bottom: 6px; } /**/ .catalog-section-item-detail-swipe-btn-container { flex: 2; display: flex; align-items: flex-end; justify-content: center; align-self: flex-end; cursor: pointer; padding-top: 15px; } .catalog-section-item-detail-swipe-btn { width: 52px; height: 5px; background: #fff; opacity: .5; border-radius: 2.5px; } /**/ .catalog-section-item-detail-close-btn-container { flex: 1; padding-bottom: 5px; } .catalog-section-item-detail-close-btn { display: flex; align-items: center; justify-content: flex-end; opacity: .5; transition: 180ms linear all; } .catalog-section-item-detail-close-btn:hover { opacity: 1; text-decoration: none; border-bottom: none; cursor: pointer; } .catalog-section-item-detail-close-btn-text, .catalog-section-item-detail-close-btn-text:hover { font-style: normal; font-weight: normal; font-size: 16px; line-height: 21px; color: #fff; } /*endregion*/ .catalog-section-item-detail { background: #fff; padding: 22px 16px 0; flex: 1; border-radius: 12px 12px 0 0; } .catalog-section-item-detail-offers { flex: auto; border-top: 1px solid #e7e7e7; padding: 0 16px 20px; background: #fff; } .catalog-section-item-detail-preview-image { width: 50px; height: auto; } .catalog-section-item-detail-title { font-style: normal; font-weight: normal; font-size: 16px; line-height: 23px; color: #777; } .catalog-section-item-detail { overflow: auto; max-height: 80vh; } .catalog-section-item-detail-props-container { /*padding: 0 16px;*/ background: #fff; overflow-y: auto; } .catalog-section-item-detail-props-container-inner { padding: 8px 16px; border: 1px solid #e7e7e7; margin-bottom: 20px; } /*region PROPS*/ .catalog-section-item-info-container { margin-bottom: 11px; } .catalog-section-item-propertie-item { margin-bottom: 1px; } .catalog-section-item-properties { font-style: normal; font-weight: normal; font-size: 15px; line-height: 25px; } /*endregion*/ /*region SKU*/ .catalog-section-item-scu-container-title { color: #333; font-size: 12px; } .catalog-section-item-scu-block { } .catalog-section-item-scu-block-title { font-style: normal; font-weight: normal; font-size: 15px; line-height: 25px; margin-bottom: 2px; } .catalog-section-item-scu-list { margin: 0; } .catalog-section-item-scu-item-list { margin: 0 -4px; padding: 0; list-style: none; position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; } .catalog-section-item-scu-item-color-container, .catalog-section-item-scu-item-text-container { display: inline-block; box-sizing: border-box; min-width: 53px; padding: 0 4px 5px; max-width: 100%; } .catalog-section-item-scu-item-color-block { position: relative; width: 54px; height: 33px; border: 2px solid #c0cfda; cursor: pointer; border-radius: 2px; box-sizing: border-box; transition: 190ms linear color, 190ms linear background-color, 190ms linear border-color; } .catalog-section-item-scu-item-color { position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; padding: 5px; background-color: #fff; background-position: center; background-size: cover; background-repeat: no-repeat; } .catalog-section-item-scu-item-text-block { position: relative; padding: 3px 15px; min-width: 53px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.3); cursor: pointer; border-radius: 2px; transition: 190ms linear color, 190ms linear background-color, 190ms linear border-color; } .catalog-section-item-scu-item-text { overflow: hidden; max-width: 100%; vertical-align: middle; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-weight: normal; font-size: 15px; line-height: 25px; } .catalog-section-item-scu-item-color-container.notallowed .catalog-section-item-scu-item-color-block, .catalog-section-item-scu-item-text-container.notallowed .catalog-section-item-scu-item-text-block { position: relative; border-color: #a9adb4 !important; } .catalog-section-item-scu-item-color-container.notallowed .catalog-section-item-scu-item-color-block:after, .catalog-section-item-scu-item-text-container.notallowed .catalog-section-item-scu-item-text-block:after { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; background: rgba(255, 255, 255, 0.75) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiIgdmlld0JveD0iMCAwIDI2IDI2Ij4gIDxwYXRoIGZpbGw9IiNBOUFEQjQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE0LjM5MjEyNjgsMTMuMjMyMzAyOSBMMjUuOTkyLDEuNDE4IEwyNC42LDAgTDEyLjk5OTk5NTYsMTEuODE0NDM2NCBMMS40LDAgTDAuMDA5LDEuNDE5IEwxMS42MDc4Njg3LDEzLjIzMjI5NzUgTDAuNDczLDI0LjU3MyBMMS44NjUsMjUuOTkxIEwxMi45OTk5OTkzLDE0LjY1MDE2NDUgTDI0LjEzNCwyNS45OSBMMjUuNTI2LDI0LjU3MiBMMTQuMzkyMTI2OCwxMy4yMzIzMDI5IFoiLz48L3N2Zz4=) no-repeat center; background-size: 80% 80%; content: ""; } .catalog-section-item-scu-item-text-block:hover, .catalog-section-item-scu-item-text-container.selected .catalog-section-item-scu-item-text-block { border-color: #000; background-color: #000; color: #fff; } .catalog-section-item-scu-item-color-block:hover, .catalog-section-item-scu-item-color-container.selected .catalog-section-item-scu-item-color-block { border-color: #000; } /*endregion*/ /*region QUANTITY*/ .catalog-section-item-quantity-container { padding: 15px 0; position: relative; } .catalog-section-item-quantity-title { text-align: center; font-style: normal; font-weight: normal; font-size: 12px; line-height: 25px; color: #999; position: absolute; bottom: calc(100% - 20px); left: 0; right: 0; vertical-align: bottom; } .catalog-section-item-quantity-field-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 110px; margin: 0; } .catalog-section-item-quantity-btn-plus, .catalog-section-item-quantity-btn-minus { position: relative; display: block; min-width: 26px; height: 26px; border-radius: 50%; background-color: #f2f2f2; color: #fff; vertical-align: middle; text-align: center; cursor: pointer; transition: background 180ms ease, opacity 180ms ease; } .catalog-section-item-quantity-btn-plus:hover, .catalog-section-item-quantity-btn-minus:hover { background: #d3d3d3; } .catalog-section-item-quantity-btn-plus:after, .catalog-section-item-quantity-btn-minus:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; opacity: .8; transition: opacity 300ms ease, background 300ms ease; } .catalog-section-item-quantity-btn-minus:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; opacity: .8; transition: opacity 300ms ease; } .catalog-section-item-quantity-btn-plus:after { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4gIDxwYXRoIGZpbGw9IiM1MjVDNjgiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE4LDEyIEwxOCwwIEwxMiwwIEwxMiwxMiBMMCwxMiBMMCwxOCBMMTIsMTggTDEyLDMwIEwxOCwzMCBMMTgsMTggTDMwLDE4IEwzMCwxMiBMMTgsMTIgWiIvPjwvc3ZnPg==) no-repeat center; background-size: 10px; } .catalog-section-item-quantity-btn-minus:after { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4gIDxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSI2IiB5PSIxMiIgZmlsbD0iIzUyNUM2OCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+) no-repeat center; background-size: 10px; } .catalog-section-item-quantity-btn-disabled.catalog-section-item-quantity-btn-plus:after, .catalog-section-item-quantity-btn-disabled.catalog-section-item-quantity-btn-minus:after { opacity: .3 !important; cursor: default; } .catalog-section-item-quantity-btn-disabled.catalog-section-item-quantity-btn-plus:hover, .catalog-section-item-quantity-btn-disabled.catalog-section-item-quantity-btn-minus:hover { background-color: #f2f2f2; } .catalog-section-item-quantity-btn-plus:hover:after, .catalog-section-item-quantity-btn-minus:hover:after { opacity: 1; } .catalog-section-item-quantity-field-block { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 5px; position: relative; } input.catalog-section-item-quantity-field { position: absolute; left: 5px; top: 0; display: block; max-width: calc(100% - 10px); margin: 0; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } div.catalog-section-item-quantity-field { position: relative; pointer-events: none; z-index: 10; opacity: 0; transition: 190ms linear width; } .catalog-section-item-quantity-field { display: block; padding: 0 5px; width: 100%; box-sizing: border-box; min-width: 20px; height: 26px; border: 1px solid transparent; border-radius: 2px; background: transparent !important; vertical-align: middle; text-align: center; transition: border 200ms ease; font-style: normal; font-weight: normal; font-size: 15px; line-height: 25px; color: #121212; } .catalog-section-item-quantity-field:focus { outline: none !important; border-color: var(--theme-color-primary, #63aa28); } .bx-no-touch input.catalog-section-item-quantity-field::-webkit-outer-spin-button, .bx-no-touch input.catalog-section-item-quantity-field::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .catalog-section-item-quantity-description { position: absolute; top: calc(100% - 12px); left: 0; right: 0; white-space: nowrap; text-align: center; font-style: normal; font-weight: normal; font-size: 12px; line-height: 15px; color: #999; vertical-align: bottom; letter-spacing: -0.4px; } .catalog-item-quantity-description-text {} .catalog-item-quantity-description-price { white-space: nowrap; } .catalog-item-quantity-description-price span {color: #121212;} .catalog-item-quantity-label-container { margin: 5px 0; color: #a5a5a5; font-weight: bold; font-size: 12px; } /**/ .product-item-quantity { color: #333; font-weight: normal; font-size: 12px; } /*endregion*/ /*endregion*/ .ovh { overflow: hidden; }