.Theme_color_external { /* Общие переменные для переиспользования */ --color-base: #333f48; --color-background-base: #fff; --color-control-background-default: #8168f0; --color-control-error: #f06; --color-accent-yellow: #f9b941; --color-control-border-color-focus: rgba(76, 61, 140, 0.308); --color-control-border-color-hover: #9199a3; --color-control-background-disable: transparent; --color-control-icon: #576875; --color-control-placeholder: #576875; --color-control-label: #576875; /* TextInput */ --textinput-variant-default-background-state-error-default: transparent; --textinput-variant-default-border-color-state-error-hovered: #f06; --textinput-variant-default-border-color-state-error-default: #f06; --textinput-variant-default-color-state-error-label: #f06; --textinput-variant-default-color-state-error-hint: #f06; --textinput-variant-default-color-state-error-icon: var(--color-control-icon); --textinput-variant-default-color-input-shadow-autofill: #fff; --textinput-variant-default-color-border-autofill: var(--textinput-variant-default-border-color-default); --textinput-variant-default-color-border-autofill-hovered: var(--color-control-border-color-hover); --textinput-variant-default-color-border-autofill-focused: var(--textinput-variant-default-border-color-focused); --textinput-variant-default-background-default: var(--color-background-base); --textinput-variant-default-background-disable: var(--color-control-background-disable); --textinput-variant-default-border-color-disable: #dee1eb; --textinput-variant-default-color-label-disable: #576875; --textinput-variant-default-color-hint-disable: #576875; --textinput-variant-default-color-icon-disable: var(--color-control-icon); --textinput-variant-default-color-default: var(--color-base); --textinput-variant-default-color-disable: var(--color-base); --textinput-variant-default-color-hint: #576875; --textinput-variant-default-color-counter: #576875; --textinput-variant-default-color-required: #353848; --textinput-variant-default-color-placeholder: var(--color-control-placeholder); --textinput-variant-default-color-label: #576875; --textinput-variant-default-color-label-active: #8168f0; --textinput-variant-default-icon-color-default: var(--color-control-icon); --textinput-variant-default-border-color-focused: var(--color-control-border-color-focus); --textinput-variant-default-border-color-default: #dee1eb; /* Button */ --button-variant-filled-background-default: var(--color-control-background-default); --button-variant-filled-background-hover: #6345dc; --button-variant-filled-color-disabled: #fff; --button-variant-filled-background-check: #563fa3; --button-variant-filled-background-check-hover: #4525c4; --button-variant-filled-background-disabled: #cec3fc; --button-variant-outlined-background-default: #fff; --button-variant-outlined-background-hover: #fff; --button-variant-outlined-color-disabled: #8168f0; --button-variant-outlined-background-check: #fff; --button-variant-outlined-background-check-hover: #fff; --button-variant-outlined-background-disabled: #fff; --button-variant-clear-color: var(--color-control-background-default); --button-variant-clear-color-hover: #6345dc; --button-variant-clear-color-active: rgba(38, 49, 129, 0.3); /* Badge */ --badge-background-default: #f06; /* TabBar */ --tab-bar-text-color: #9199A3; --tab-bar-active-text-color: #8168f0; /* Popup */ --popup-border-color-default: var(--color-control-border-color-default); /* Tooltip */ --tooltip-bg-color-default: rgba(87, 104, 117, 0.9); /* Skeleton */ --skeleton-background-default: #f6f7fa; /* Rating */ --rating-font-color: var(--color-accent-yellow); /* AmountCounter */ --amount-counter-color-accent-default: var(--color-control-background-default); --amount-counter-color-accent-hover: #563fa3; --amount-counter-color-neutral-default: #dee1eb; --amount-counter-color-neutral-text: var(--color-base); /* Tag */ --tag-color-default: #576875; --tag-border-color-default: #dee1eb; --tag-background-default-hover: #eee8fe; --tag-color-default-checked: var(--color-control-background-default); --tag-color-default-disabled: #dee1eb; --tag-color-link: var(--tag-color-default); --tag-border-color-link: var(--tag-border-color-default); /* Breadcrumbs */ --breadcrumbs-color: #576875; --breadcrumbs-color-current: #576875; --breadcrumbs-color-hover: var(--color-control-background-default); --breadcrumbs-color-separator: #9199a3; --breadcrumbs-color-siblings: #9199a3; /* Specs */ --specs-name-color: #576875; --specs-border-bottom: #dee1eb; /* RadioButton */ --radio-button-color-unchecked: #9199a3; --radio-button-color-active: #563fa3; --radio-button-color-checked: var(--color-control-background-default); --radio-button-color-focused: rgba(129, 104, 240, 0.43); --radio-button-color-disabled: #edeef0; /* Checkbox */ --checkbox-variant-default-border-color: #9199a3; --checkbox-variant-default-color-disabled: #9199a3; --checkbox-variant-filled-background-active: #563fa3; /* Notification */ --notification-text-color: #576875; --notification-dark-background-color: var(--color-base); --notification-minified-background-color: #f6efef; --notification-dark-minified-background-color: var(--notification-text-color); --notification-dark-title-color: var(--color-background-base); --notification-dark-text-color: #dee1eb; /* Select */ --select-border-color: #e2e2e2; --select-border-color-focus: #8168f0; /* Favorite */ --favorite-icon-fill-checked: #f06; --favorite-background-checked: #e6e1fc; --favorite-box-shadow-color: rgba(230, 225, 252, 0.4); --favorite-box-shadow-color-svg: #8168f0; /* Delivery */ --delivery-color-default: #576875; --delivery-color-attention: #f06; --delivery-color-warning: #ff8000; --delivery-color-icon: #8168f0; /* Price */ --price-color-current: #333f48; --price-color-old: #576875; --price-border-color-counter: #dee1eb; /* ProductCard */ --product-card-color-text: #333f48; --product-card-color-notification: #dee1eb; --product-card-color-extra-link: #8168f0; /* Banner */ --banner-color-title: #333f48; --banner-color-text: #576875; --banner-background: #fff; --banner-color-icon: #9199a3; /* Textarea */ --textarea-variant-default-disabled-background: #fff; --textarea-variant-default-disabled-border-color: #e2e2e2; --textarea-variant-default-error-background: transparent; --textarea-variant-default-error-border-color: #f06; --textarea-variant-default-error-color: #f06; --textarea-variant-default-border-color: #e2e2e2; --textarea-variant-default-background: #fff; --textarea-variant-filled-background: #f6f7fa; --textarea-variant-default-active-color: var(--color-control-background-default); --textarea-variant-default-color: var(--color-base); --textarea-variant-default-placeholder: var(--color-control-background-disable); --textarea-variant-default-icon-color-default: var(--color-control-icon); --textarea-hint-color: var(--color-control-label); /* PinInput */ --pininput-color-default: #333f48; --pininput-color-disabled: #9199a3; --pininput-border-color-default: #8168f0; --pininput-border-color-error: #feb3d2; --pininput-border-color-disabled: #dee1eb; --pininput-background-color-disabled: #fff; --pininput-color-hint: #333f48; --pininput-color-hint-error: #f06; /* MessageBubble */ --message-bubble-background-default: #fff; --message-bubble-background-client: #8168f0; --message-bubble-background-operator: #eef3ff; --message-bubble-border-color-default: #cec3fc; --message-bubble-color-default: #8168f0; --message-bubble-color-client: #fff; --message-bubble-color-operator: #333f48; --message-bubble-color-operator-name: #8168f0; --message-bubble-color-time: #8168f0; --message-bubble-color-time-operator: #576875; --message-bubble-color-time-client: #fff; /* Link */ --link-color: #8168f0; --link-color-hover: #6345dc; --link-color-black: #000; --link-color-black-hover: #8168f0; --link-color-success: #31c2a7; --link-color-success-hover: #29a18b; --link-color-warning: #f08c1a; --link-color-warning-hover: #d3770e; --link-color-danger: #f06; --link-color-danger-hover: #d60056; /* PharmacyCard */ --pharmacy-card-color: #576875; --pharmacy-card-color-note-danger: #f06; --pharmacy-card-color-address: #333f48; /* RatingPanel */ --rating-panel-color: #fff; /* ShortProductCard */ --message-card-background-color: #fff; --message-card-background-color-image: #f5f6f9; /* ProgressIndicator */ --progress-indicator-color: var(--color-base); --progress-indicator-color-status: #576875; --progress-indicator-background-color-track: #f6f7fa; --progress-indicator-background-color-thumb: #8168f0; --progress-indicator-background-color-thumb-danger: #f06; --progress-indicator-color-status-danger: #f06; /* Switcher */ --switcher-background-color: #9199a3; --switcher-background-color-pressed: #576875; --switcher-background-color-active: #8168f0; --switcher-background-color-unpressed: #563fa3; --switcher-background-color-hover: #576875; --switcher-background-color-hover-pressed: #6345dc; /* Tabs */ --tabs-default-font-color: #576875; --tabs-default-disabled-font-color: #9199a3; --tabs-selected-default-font-color: #333f48; --tabs-selected-default-disabled-font-color: #828991; --tabs-selected-colourful-font-color: #8168f0; --tabs-selected-colourful-disabled-font-color: #cec3fc; --tabs-colourful-underline-color: #8168f0; --tabs-colourful-underline-disabled-color: #cec3fc; --tabs-container-filled-bg-color-neutral: #dee1eb; --tabs-container-filled-bg-color-light: #fff; --tabs-slider-filled-bg-color-neutral: #fff; --tabs-slider-filled-bg-color-light: #cec3fc; /* Calendar */ --calendar-text-default: #000; --calendar-text-disabled: #828991; --calendar-text-selected: #fff; --calendar-text-info: #9199a3; --calendar-button-today: #8168f0; --calendar-divider: #e2e2e2; --calendar-nav: #9199a3; --calendar-select-year-background: #6345dcbc; --calendar-highlighted-current-range: #eef3ff; --calendar-highlighted-other-range: #f8faff; --calendar-highlighed-current-date: #8168f0; --calendar-highlighed-other-date: #d4cdf3; /* PriceSummary */ --price-summary-color: var(--color-control-icon); --price-summary-total-color: var(--color-base); --price-summary-total-border: #dee1eb; /* DatePicker */ --datepicker-border-color: #e2e2e2; --datepicker-border-color-focus: #8168f0; /* SmsForm */ --smsform-headline-color: var(--color-base); --smsform-description-color: var(--color-control-icon); --smsform-error-color: #ff1f78; /* TextField */ --field-text-control-color: var(--color-base); --field-text-control-color-is-disabled: #576875; --field-text-background-color-is-disabled: #f6f7fa; --field-text-background-color: #fff; --field-text-background-color-has-error: var(--field-text-background-color); --field-text-border-color: #dee1eb; --field-text-border-color-has-focus: var(--color-control-background-default); --field-text-border-color-is-disabled: var(--field-text-border-color); --field-text-border-color-has-error: #ff1f78; --field-text-border-color-is-hover: #9199a3; --field-text-label-color: #9199a3; --field-text-label-color-has-focus: var(--color-control-background-default); --field-text-label-color-has-value: #576875; --field-text-label-color-has-error: #ff1f78; --field-text-label-color-is-disabled: #9199a3; --field-text-label-color-is-disabled-has-value: var(--field-text-border-color-is-disabled); --field-text-label-color-is-disabled-has-error: #9199a3; --field-text-label-asterisk-color: #ff1f78; --field-text-label-asterisk-color-has-focus: var(--field-text-label-asterisk-color); --field-text-label-asterisk-color-has-value: var(--field-text-label-asterisk-color); --field-text-label-asterisk-color-has-value-is-disabled: #9199a3; --field-text-label-asterisk-color-is-disabled: #9199a3; --field-text-error-color: #ff1f78; --field-text-error-color-is-disabled: #9199a3; --field-text-error-color-independent: #ff1f78; --field-text-counter-color: #333f48; --field-text-clear-error-color: #576875; --field-text-clear-is-disabled-color: #dee1eb; /* Input Text */ --input-text-clear-color: #576875; /* Card */ --color-control-border-color-focus: rgba(76, 61, 140, 0.308); /* List */ --list-background-color: #f6f7fa; --list-border-color: #dee1eb; /* ListItem */ --listitem-background-color: var(--list-background-color); --listitem-border-color: var(--list-border-color); /* Pagination */ --pagination-text-inactive-color: #8168F0; --pagination-arrow-background-inactive-color: none; --pagination-arrow-background-hover-color: none; --pagination-arrow-color-inactive-color: #5b6774; --pagination-arrow-color-hover-color: #9399a2; --pagination-item-background-inactive-color: none; --pagination-item-background-active-color: #8168F0; --pagination-item-typography-inactive-color: #8168F0; --pagination-item-typography-active-color: #fff; } .Theme_root_external { /* Общие переменные для переиспользования */ --control-font-family: 'SBSansText', opensans, 'Helvetica Neue', helvetica, arial, sans-serif; --display-font-family: 'SBSansDisplay', opensans, 'Helvetica Neue', helvetica, arial, sans-serif; --interface-font-family: 'SBSansInterface', opensans, 'Helvetica Neue', helvetica, arial, sans-serif; --interface-caps-font-family: 'SBSansInterfaceCaps', opensans, 'Helvetica Neue', helvetica, arial, sans-serif; /* TextInput */ /* в дизайне только один размер - l. Размеры m и s заложили на всякий случай */ --textinput-size-l-height: 48px; --textinput-size-m-height: 44px; --textinput-size-s-height: 36px; --textinput-font-family: var(--control-font-family); --textinput-disable-opacity: 0.6; --textinput-size-l-icon-width: var(--textinput-size-l-height); --textinput-size-l-icon-height: var(--textinput-size-l-height); --textinput-size-l-font-size: 0.875rem; --textinput-size-l-line-height: 1.28; --textinput-size-l-font-size-label-active: 0.75rem; --textinput-size-l-line-height-label-active: 1.25; --textinput-size-l-font-size-hint: 0.875rem; --textinput-size-l-line-height-hint: 1.42; --textinput-size-l-font-size-label: 0.875rem; --textinput-size-l-line-height-label: 1.42; --textinput-size-l-font-size-counter: 0.875rem; --textinput-size-l-line-height-counter: 1.42; --textinput-size-l-font-size-required: 0.5rem; --textinput-size-m-icon-width: var(--textinput-size-m-height); --textinput-size-m-icon-height: var(--textinput-size-m-height); --textinput-size-m-font-size: 0.812rem; --textinput-size-m-line-height: 1.3; --textinput-size-m-font-size-label-active: 0.687rem; --textinput-size-m-line-height-label-active: 1.27; --textinput-size-m-font-size-hint: 0.725rem; --textinput-size-m-line-height-hint: 1.3; --textinput-size-m-font-size-label: 0.725rem; --textinput-size-m-line-height-label: 1.3; --textinput-size-m-font-size-counter: 0.725rem; --textinput-size-m-line-height-counter: 1.3; --textinput-size-m-font-size-required: 0.4rem; --textinput-size-s-icon-width: var(--textinput-size-s-height); --textinput-size-s-icon-height: var(--textinput-size-s-height); --textinput-size-s-font-size: 0.75rem; --textinput-size-s-line-height: 1.33; --textinput-size-s-font-size-label-active: 0.625rem; --textinput-size-s-line-height-label-active: 1.3; --textinput-size-s-font-size-hint: 0.675rem; --textinput-size-s-line-height-hint: 1.2; --textinput-size-s-font-size-label: 0.675rem; --textinput-size-s-line-height-label: 1.2; --textinput-size-s-font-size-counter: 0.675rem; --textinput-size-s-line-height-counter: 1.2; --textinput-size-s-font-size-required: 0.3rem; /* Title */ --title-h1-font-size: 1.5rem; --title-h1-line-height: 1.25; --title-h2-font-size: 1.375rem; --title-h2-line-height: 1.27; --title-h3-font-size: 1.25rem; --title-h3-line-height: 1.2; --title-h4-font-size: 1rem; --title-h4-line-height: 1.25; --title-h5-font-size: 0.875rem; --title-h5-line-height: 1.28; --title-h6-font-size: 0.75rem; --title-h6-line-height: 1; --title-font-family: var(--display-font-family); --typography-font-family: var(--control-font-family); /* Typography */ --typography-p1-font-size: 16px; --typography-p1-line-height: 20px; --typography-p2-font-size: 14px; --typography-p2-line-height: 18px; --typography-p3-font-size: 12px; --typography-p3-line-height: 15px; --typography-p4-font-size: 16px; --typography-p4-line-height: 22px; --typography-p-font-weight-default: 400; --typography-p-font-weight-strong: 700; /* Button */ --button-font-family: var(--display-font-family); --button-border-radius: 30px; --button-s-size: 44px; --button-m-size: 56px; --button-l-size: 56px; --button-border-width: 2px; --button-font-size: 1.125rem; /* Badge */ --badge-font-family: var(--display-font-family); --badge-font-size: 1rem; --badge-line-height: 0.8; --badge-font-weight: 400; --badge-l-size: 24px; --badge-m-size: 18px; --badge-s-size: 16px; /* TabBar */ --tab-bar-font-family: var(--display-font-family); --tab-bar-font-size: 11px; --tab-bar-line-height: 15px; --tab-bar-letter-spacing: -0.02em; /* Tooltip */ --tooltip-font-family: var(--control-font-family); /* Rating */ --rating-font-family: var(--display-font-family); /* Search */ --search-font-family: var(--control-font-family); --search-background-color-normal: #f6f7fa; --search-background-color-pressed: #dee1eb; --search-placeholder-color-normal: #576875; --search-placeholder-color-focused: #9199a3; --search-action-button-color: #9199a3; --search-action-button-background-color-pressed: #dee1eb; --search-icon-color: #8168f0; /* Tag */ --tag-font-family: var(--control-font-family); --tag-height: 2.25rem; --tag-border-radius: 1rem; --tag-font-size: 0.875rem; --tag-line-height: 1.125rem; /* Breadcrumbs */ --breadcrumbs-font-size: 0.875rem; --breadcrumbs-spacing-x-separator: 1rem; --breadcrumbs-font-weight-current: 600; /* RadioButton */ --radio-button-size: 1.5rem; --radio-button-border-width-active: calc(var(--radio-button-size) / 2); /* Notification */ --notification-border-radius: 16px; --notification-shadow: 4px 8px 15px rgba(0, 0, 0, 0.05); /* Price */ --price-current-value-font-size: 1rem; --price-current-value-line-heigth: 1rem; --price-old-value-font-size: 0.875rem; --price-old-value-line-heigth: 0.875rem; --price-current-value-font-size-l: 1.375rem; --price-current-value-line-heigth-l: 1.375rem; --price-old-value-font-size-l: 1rem; --price-old-value-line-heigth-l: 1rem; /* ProductThumbnail */ --product-thumbnail-height-default: 152px; /* ProductCard */ --product-card-font-size: 0.875rem; --product-card-line-height: 1rem; --product-card-font-size-row: 1rem; --product-card-line-height-row: 1.25rem; --product-card-font-size-notification: 1rem; --product-card-line-height-notification: 1.2rem; --product-card-font-size-extra-link: 0.75rem; --product-card-line-height-extra-link: 0.875rem; /* Banner */ --banner-font-size: 0.875rem; --banner-line-height: 1.125rem; /* Textarea */ --textarea-size-m-minWidth: 328px; --textarea-size-m-minHeight: 101px; --textarea-size-m-spaceAll: 23px 12px 6px 16px; --textarea-size-m-fontSize: 0.875rem; --textarea-font-family: var(--control-font-family); --textarea-padding-control: 0 9px 0 0; --textarea-hint-fz: 0.875rem; /* PinInput */ --pininput-font-size-item: 1.8rem; --pininput-line-height-item: 1.62; --pininput-font-size-hint: 0.875rem; --pininput-line-height-hint: 1.28; /* PharmacyCard */ --pharmacy-card-font-size: 0.875rem; --pharmacy-card-line-height: 1.28; --pharmacy-card-font-size-address: 1rem; --pharmacy-card-line-height-address: 1.25; /* Checkbox */ --checkbox-box-size: 24px; --checkbox-box-border-active-width: 12px; /* ProgressIndicator */ --progress-indicator-font-size: 1rem; --progress-indicator-line-height: 1.5; --progress-indicator-font-size-status: 0.875rem; --progress-indicator-line-height-status: 1.28; /* MessageBubble */ --message-bubble-font-size: 0.875rem; --message-bubble-line-height: 1.28; --message-bubble-font-size-time: 0.75rem; --message-bubble-line-height-time: 1; /* Tabs */ --tabs-container-border-radius-squared: 8px; --tabs-container-border-radius-rounded: 2rem; --tabs-tab-squared-border-radius: 6px; --tabs-tab-rounded-border-radius: 2rem; --tabs-tab-font-size: 0.875rem; --tabs-tab-line-height: 1.28; --tabs-tab-font-weight: 600; /* Adress */ --address-font-size: 0.875rem; --address-line-height: 1.285; --address-font-size-label: 1.25rem; --address-line-height-label: 1.2; /* Calendar */ --calendar-font-size: 1rem; /* FieldText */ --field-text-label-top: 18px; --field-text-label-top-has-focus: 8px; --field-text-m-label-top: 15px; --field-text-m-label-top-has-focus: 6px; --field-text-label-font: var(--control-font-family); --field-text-label-font-size: 1em; --field-text-m-label-font-size: 0.875em; --field-text-independent-label-font-size: 0.875em; --field-text-m-independent-label-font-size: 0.75em; --field-text-label-stuck-textarea-padding-top: 24px; --field-text-label-transition: all 0.15s linear; --field-text-counter-font: var(--control-font-family); --field-text-counter-font-size: 0.75em; --field-text-counter-lineheight: 1.25; --field-text-label-is-stuck-left: 8px; --field-text-label-is-stuck-font-size: 0.75em; --field-text-label-is-stuck-transform: translateY(-10px); --field-text-is-multiline-label-top: 16px; --field-text-is-multiline-label-top-has-focus: 16px; /* InputText */ --input-text-height: 56px; --input-text-m-height: 48px; --input-text-min-height: 101px; --input-text-input-padding: 0 16px; --input-text-input-padding-focus: 24px 16px 5px; --input-text-textarea-padding: 15px 16px; --input-text-textarea-padding-focus: 35px 16px 6px; --input-text-textarea-padding-top: 15px; --input-text-font: var(--control-font-family); --input-text-font-size: 1em; --input-text-m-font-size: 0.875em; --input-text-addon-after-padding-right: 4px; --input-text-addon-after-buttons-margin-left: 8px; --input-text-textarea-min-height: 160px; /* List */ --list-border-radius: 16px; /* ListItem */ --listitem-border-radius: var(--list-border-radius); /* Pagination */ --pagination-container-margin: 0.4em; --pagination-arrow-border: none; --pagination-item-border-radius: 2.4em; --pagination-item-border: none; --pagination-item-inline-margin: 0.6em; --pagination-item-inline-padding: 0.8em; --pagination-item-block-padding: 0.6em; } /* Mobile */ @media only screen and (max-width: 768px) { .Theme_root_external { /* Button */ --button-s-size: 32px; --button-m-size: 48px; --button-l-size: 48px; --button-border-width: 1px; --badge-font-size: 0.75rem; --badge-font-weight: 600; /* InputText */ --input-text-height: 48px; --input-text-textarea-min-height: 120px; --input-text-font-size: 0.875em; /* FieldText */ --field-text-label-top: 16px; --field-text-label-top-has-focus: 5px; --field-text-label-font-size: .875em; } } .Theme_color_external { /* Общие переменные для переиспользования */ --color-base: #333f48; --color-background-base: #fff; --color-control-background-default: #8168f0; --color-control-error: #f06; --color-accent-yellow: #f9b941; --color-control-border-color-focus: rgba(76, 61, 140, 0.308); --color-control-border-color-hover: #9199a3; --color-control-background-disable: transparent; --color-control-icon: #576875; --color-control-placeholder: #576875; --color-control-label: #576875; /* TextInput */ --textinput-variant-default-background-state-error-default: transparent; --textinput-variant-default-border-color-state-error-hovered: #f06; --textinput-variant-default-border-color-state-error-default: #f06; --textinput-variant-default-color-state-error-label: #f06; --textinput-variant-default-color-state-error-hint: #f06; --textinput-variant-default-color-state-error-icon: var(--color-control-icon); --textinput-variant-default-color-input-shadow-autofill: #fff; --textinput-variant-default-color-border-autofill: var(--textinput-variant-default-border-color-default); --textinput-variant-default-color-border-autofill-hovered: var(--color-control-border-color-hover); --textinput-variant-default-color-border-autofill-focused: var(--textinput-variant-default-border-color-focused); --textinput-variant-default-background-default: var(--color-background-base); --textinput-variant-default-background-disable: var(--color-control-background-disable); --textinput-variant-default-border-color-disable: #dee1eb; --textinput-variant-default-color-label-disable: #576875; --textinput-variant-default-color-hint-disable: #576875; --textinput-variant-default-color-icon-disable: var(--color-control-icon); --textinput-variant-default-color-default: var(--color-base); --textinput-variant-default-color-disable: var(--color-base); --textinput-variant-default-color-hint: #576875; --textinput-variant-default-color-counter: #576875; --textinput-variant-default-color-required: #353848; --textinput-variant-default-color-placeholder: var(--color-control-placeholder); --textinput-variant-default-color-label: #576875; --textinput-variant-default-color-label-active: #8168f0; --textinput-variant-default-icon-color-default: var(--color-control-icon); --textinput-variant-default-border-color-focused: var(--color-control-border-color-focus); --textinput-variant-default-border-color-default: #dee1eb; /* Button */ --button-variant-filled-background-default: var(--color-control-background-default); --button-variant-filled-background-hover: #6345dc; --button-variant-filled-color-disabled: #fff; --button-variant-filled-background-check: #563fa3; --button-variant-filled-background-check-hover: #4525c4; --button-variant-filled-background-disabled: #cec3fc; --button-variant-outlined-background-default: #fff; --button-variant-outlined-background-hover: #fff; --button-variant-outlined-color-disabled: #8168f0; --button-variant-outlined-background-check: #fff; --button-variant-outlined-background-check-hover: #fff; --button-variant-outlined-background-disabled: #fff; --button-variant-clear-color: var(--color-control-background-default); --button-variant-clear-color-hover: #6345dc; --button-variant-clear-color-active: rgba(38, 49, 129, 0.3); /* Badge */ --badge-background-default: #f06; /* TabBar */ --tab-bar-text-color: #9199A3; --tab-bar-active-text-color: #8168f0; /* Popup */ --popup-border-color-default: var(--color-control-border-color-default); /* Tooltip */ --tooltip-bg-color-default: rgba(87, 104, 117, 0.9); /* Skeleton */ --skeleton-background-default: #f6f7fa; /* Rating */ --rating-font-color: var(--color-accent-yellow); /* AmountCounter */ --amount-counter-color-accent-default: var(--color-control-background-default); --amount-counter-color-accent-hover: #563fa3; --amount-counter-color-neutral-default: #dee1eb; --amount-counter-color-neutral-text: var(--color-base); /* Tag */ --tag-color-default: #576875; --tag-border-color-default: #dee1eb; --tag-background-default-hover: #eee8fe; --tag-color-default-checked: var(--color-control-background-default); --tag-color-default-disabled: #dee1eb; --tag-color-link: var(--tag-color-default); --tag-border-color-link: var(--tag-border-color-default); /* Breadcrumbs */ --breadcrumbs-color: #576875; --breadcrumbs-color-current: #576875; --breadcrumbs-color-hover: var(--color-control-background-default); --breadcrumbs-color-separator: #9199a3; --breadcrumbs-color-siblings: #9199a3; /* Specs */ --specs-name-color: #576875; --specs-border-bottom: #dee1eb; /* RadioButton */ --radio-button-color-unchecked: #9199a3; --radio-button-color-active: #563fa3; --radio-button-color-checked: var(--color-control-background-default); --radio-button-color-focused: rgba(129, 104, 240, 0.43); --radio-button-color-disabled: #edeef0; /* Checkbox */ --checkbox-variant-default-border-color: #9199a3; --checkbox-variant-default-color-disabled: #9199a3; --checkbox-variant-filled-background-active: #563fa3; /* Notification */ --notification-text-color: #576875; --notification-dark-background-color: var(--color-base); --notification-minified-background-color: #f6efef; --notification-dark-minified-background-color: var(--notification-text-color); --notification-dark-title-color: var(--color-background-base); --notification-dark-text-color: #dee1eb; /* Select */ --select-border-color: #e2e2e2; --select-border-color-focus: #8168f0; /* Favorite */ --favorite-icon-fill-checked: #f06; --favorite-background-checked: #e6e1fc; --favorite-box-shadow-color: rgba(230, 225, 252, 0.4); --favorite-box-shadow-color-svg: #8168f0; /* Delivery */ --delivery-color-default: #576875; --delivery-color-attention: #f06; --delivery-color-warning: #ff8000; --delivery-color-icon: #8168f0; /* Price */ --price-color-current: #333f48; --price-color-old: #576875; --price-border-color-counter: #dee1eb; /* ProductCard */ --product-card-color-text: #333f48; --product-card-color-notification: #dee1eb; --product-card-color-extra-link: #8168f0; /* Banner */ --banner-color-title: #333f48; --banner-color-text: #576875; --banner-background: #fff; --banner-color-icon: #9199a3; /* Textarea */ --textarea-variant-default-disabled-background: #fff; --textarea-variant-default-disabled-border-color: #e2e2e2; --textarea-variant-default-error-background: transparent; --textarea-variant-default-error-border-color: #f06; --textarea-variant-default-error-color: #f06; --textarea-variant-default-border-color: #e2e2e2; --textarea-variant-default-background: #fff; --textarea-variant-filled-background: #f6f7fa; --textarea-variant-default-active-color: var(--color-control-background-default); --textarea-variant-default-color: var(--color-base); --textarea-variant-default-placeholder: var(--color-control-background-disable); --textarea-variant-default-icon-color-default: var(--color-control-icon); --textarea-hint-color: var(--color-control-label); /* PinInput */ --pininput-color-default: #333f48; --pininput-color-disabled: #9199a3; --pininput-border-color-default: #8168f0; --pininput-border-color-error: #feb3d2; --pininput-border-color-disabled: #dee1eb; --pininput-background-color-disabled: #fff; --pininput-color-hint: #333f48; --pininput-color-hint-error: #f06; /* MessageBubble */ --message-bubble-background-default: #fff; --message-bubble-background-client: #8168f0; --message-bubble-background-operator: #eef3ff; --message-bubble-border-color-default: #cec3fc; --message-bubble-color-default: #8168f0; --message-bubble-color-client: #fff; --message-bubble-color-operator: #333f48; --message-bubble-color-operator-name: #8168f0; --message-bubble-color-time: #8168f0; --message-bubble-color-time-operator: #576875; --message-bubble-color-time-client: #fff; /* Link */ --link-color: #8168f0; --link-color-hover: #6345dc; --link-color-black: #000; --link-color-black-hover: #8168f0; --link-color-success: #31c2a7; --link-color-success-hover: #29a18b; --link-color-warning: #f08c1a; --link-color-warning-hover: #d3770e; --link-color-danger: #f06; --link-color-danger-hover: #d60056; /* PharmacyCard */ --pharmacy-card-color: #576875; --pharmacy-card-color-note-danger: #f06; --pharmacy-card-color-address: #333f48; /* RatingPanel */ --rating-panel-color: #fff; /* ShortProductCard */ --message-card-background-color: #fff; --message-card-background-color-image: #f5f6f9; /* ProgressIndicator */ --progress-indicator-color: var(--color-base); --progress-indicator-color-status: #576875; --progress-indicator-background-color-track: #f6f7fa; --progress-indicator-background-color-thumb: #8168f0; --progress-indicator-background-color-thumb-danger: #f06; --progress-indicator-color-status-danger: #f06; /* Switcher */ --switcher-background-color: #9199a3; --switcher-background-color-pressed: #576875; --switcher-background-color-active: #8168f0; --switcher-background-color-unpressed: #563fa3; --switcher-background-color-hover: #576875; --switcher-background-color-hover-pressed: #6345dc; /* Tabs */ --tabs-default-font-color: #576875; --tabs-default-disabled-font-color: #9199a3; --tabs-selected-default-font-color: #333f48; --tabs-selected-default-disabled-font-color: #828991; --tabs-selected-colourful-font-color: #8168f0; --tabs-selected-colourful-disabled-font-color: #cec3fc; --tabs-colourful-underline-color: #8168f0; --tabs-colourful-underline-disabled-color: #cec3fc; --tabs-container-filled-bg-color-neutral: #dee1eb; --tabs-container-filled-bg-color-light: #fff; --tabs-slider-filled-bg-color-neutral: #fff; --tabs-slider-filled-bg-color-light: #cec3fc; /* Calendar */ --calendar-text-default: #000; --calendar-text-disabled: #828991; --calendar-text-selected: #fff; --calendar-text-info: #9199a3; --calendar-button-today: #8168f0; --calendar-divider: #e2e2e2; --calendar-nav: #9199a3; --calendar-select-year-background: #6345dcbc; --calendar-highlighted-current-range: #eef3ff; --calendar-highlighted-other-range: #f8faff; --calendar-highlighed-current-date: #8168f0; --calendar-highlighed-other-date: #d4cdf3; /* PriceSummary */ --price-summary-color: var(--color-control-icon); --price-summary-total-color: var(--color-base); --price-summary-total-border: #dee1eb; /* DatePicker */ --datepicker-border-color: #e2e2e2; --datepicker-border-color-focus: #8168f0; /* SmsForm */ --smsform-headline-color: var(--color-base); --smsform-description-color: var(--color-control-icon); --smsform-error-color: #ff1f78; /* TextField */ --field-text-control-color: var(--color-base); --field-text-control-color-is-disabled: #576875; --field-text-background-color-is-disabled: #f6f7fa; --field-text-background-color: #fff; --field-text-background-color-has-error: var(--field-text-background-color); --field-text-border-color: #dee1eb; --field-text-border-color-has-focus: var(--color-control-background-default); --field-text-border-color-is-disabled: var(--field-text-border-color); --field-text-border-color-has-error: #ff1f78; --field-text-border-color-is-hover: #9199a3; --field-text-label-color: #9199a3; --field-text-label-color-has-focus: var(--color-control-background-default); --field-text-label-color-has-value: #576875; --field-text-label-color-has-error: #ff1f78; --field-text-label-color-is-disabled: #9199a3; --field-text-label-color-is-disabled-has-value: var(--field-text-border-color-is-disabled); --field-text-label-color-is-disabled-has-error: #9199a3; --field-text-label-asterisk-color: #ff1f78; --field-text-label-asterisk-color-has-focus: var(--field-text-label-asterisk-color); --field-text-label-asterisk-color-has-value: var(--field-text-label-asterisk-color); --field-text-label-asterisk-color-has-value-is-disabled: #9199a3; --field-text-label-asterisk-color-is-disabled: #9199a3; --field-text-error-color: #ff1f78; --field-text-error-color-is-disabled: #9199a3; --field-text-error-color-independent: #ff1f78; --field-text-counter-color: #333f48; --field-text-clear-error-color: #576875; --field-text-clear-is-disabled-color: #dee1eb; /* Input Text */ --input-text-clear-color: #576875; /* Card */ --color-control-border-color-focus: rgba(76, 61, 140, 0.308); /* List */ --list-background-color: #f6f7fa; --list-border-color: #dee1eb; /* ListItem */ --listitem-background-color: var(--list-background-color); --listitem-border-color: var(--list-border-color); /* Pagination */ --pagination-text-inactive-color: #8168F0; --pagination-arrow-background-inactive-color: none; --pagination-arrow-background-hover-color: none; --pagination-arrow-color-inactive-color: #5b6774; --pagination-arrow-color-hover-color: #9399a2; --pagination-item-background-inactive-color: none; --pagination-item-background-active-color: #8168F0; --pagination-item-typography-inactive-color: #8168F0; --pagination-item-typography-active-color: #fff; } .Theme_root_external { /* Общие переменные для переиспользования */ --control-font-family: 'SBSansText', opensans, 'Helvetica Neue', helvetica, arial, sans-serif; --display-font-family: 'SBSansDisplay', opensans, 'Helvetica Neue', helvetica, arial, sans-serif; --interface-font-family: 'SBSansInterface', opensans, 'Helvetica Neue', helvetica, arial, sans-serif; --interface-caps-font-family: 'SBSansInterfaceCaps', opensans, 'Helvetica Neue', helvetica, arial, sans-serif; /* TextInput */ /* в дизайне только один размер - l. Размеры m и s заложили на всякий случай */ --textinput-size-l-height: 48px; --textinput-size-m-height: 44px; --textinput-size-s-height: 36px; --textinput-font-family: var(--control-font-family); --textinput-disable-opacity: 0.6; --textinput-size-l-icon-width: var(--textinput-size-l-height); --textinput-size-l-icon-height: var(--textinput-size-l-height); --textinput-size-l-font-size: 0.875rem; --textinput-size-l-line-height: 1.28; --textinput-size-l-font-size-label-active: 0.75rem; --textinput-size-l-line-height-label-active: 1.25; --textinput-size-l-font-size-hint: 0.875rem; --textinput-size-l-line-height-hint: 1.42; --textinput-size-l-font-size-label: 0.875rem; --textinput-size-l-line-height-label: 1.42; --textinput-size-l-font-size-counter: 0.875rem; --textinput-size-l-line-height-counter: 1.42; --textinput-size-l-font-size-required: 0.5rem; --textinput-size-m-icon-width: var(--textinput-size-m-height); --textinput-size-m-icon-height: var(--textinput-size-m-height); --textinput-size-m-font-size: 0.812rem; --textinput-size-m-line-height: 1.3; --textinput-size-m-font-size-label-active: 0.687rem; --textinput-size-m-line-height-label-active: 1.27; --textinput-size-m-font-size-hint: 0.725rem; --textinput-size-m-line-height-hint: 1.3; --textinput-size-m-font-size-label: 0.725rem; --textinput-size-m-line-height-label: 1.3; --textinput-size-m-font-size-counter: 0.725rem; --textinput-size-m-line-height-counter: 1.3; --textinput-size-m-font-size-required: 0.4rem; --textinput-size-s-icon-width: var(--textinput-size-s-height); --textinput-size-s-icon-height: var(--textinput-size-s-height); --textinput-size-s-font-size: 0.75rem; --textinput-size-s-line-height: 1.33; --textinput-size-s-font-size-label-active: 0.625rem; --textinput-size-s-line-height-label-active: 1.3; --textinput-size-s-font-size-hint: 0.675rem; --textinput-size-s-line-height-hint: 1.2; --textinput-size-s-font-size-label: 0.675rem; --textinput-size-s-line-height-label: 1.2; --textinput-size-s-font-size-counter: 0.675rem; --textinput-size-s-line-height-counter: 1.2; --textinput-size-s-font-size-required: 0.3rem; /* Title */ --title-h1-font-size: 1.5rem; --title-h1-line-height: 1.25; --title-h2-font-size: 1.375rem; --title-h2-line-height: 1.27; --title-h3-font-size: 1.25rem; --title-h3-line-height: 1.2; --title-h4-font-size: 1rem; --title-h4-line-height: 1.25; --title-h5-font-size: 0.875rem; --title-h5-line-height: 1.28; --title-h6-font-size: 0.75rem; --title-h6-line-height: 1; --title-font-family: var(--display-font-family); --typography-font-family: var(--control-font-family); /* Typography */ --typography-p1-font-size: 16px; --typography-p1-line-height: 20px; --typography-p2-font-size: 14px; --typography-p2-line-height: 18px; --typography-p3-font-size: 12px; --typography-p3-line-height: 15px; --typography-p4-font-size: 16px; --typography-p4-line-height: 22px; --typography-p-font-weight-default: 400; --typography-p-font-weight-strong: 700; /* Button */ --button-font-family: var(--display-font-family); --button-border-radius: 30px; --button-s-size: 44px; --button-m-size: 56px; --button-l-size: 56px; --button-border-width: 2px; --button-font-size: 1.125rem; /* Badge */ --badge-font-family: var(--display-font-family); --badge-font-size: 1rem; --badge-line-height: 0.8; --badge-font-weight: 400; --badge-l-size: 24px; --badge-m-size: 18px; --badge-s-size: 16px; /* TabBar */ --tab-bar-font-family: var(--display-font-family); --tab-bar-font-size: 11px; --tab-bar-line-height: 15px; --tab-bar-letter-spacing: -0.02em; /* Tooltip */ --tooltip-font-family: var(--control-font-family); /* Rating */ --rating-font-family: var(--display-font-family); /* Search */ --search-font-family: var(--control-font-family); --search-background-color-normal: #f6f7fa; --search-background-color-pressed: #dee1eb; --search-placeholder-color-normal: #576875; --search-placeholder-color-focused: #9199a3; --search-action-button-color: #9199a3; --search-action-button-background-color-pressed: #dee1eb; --search-icon-color: #8168f0; /* Tag */ --tag-font-family: var(--control-font-family); --tag-height: 2.25rem; --tag-border-radius: 1rem; --tag-font-size: 0.875rem; --tag-line-height: 1.125rem; /* Breadcrumbs */ --breadcrumbs-font-size: 0.875rem; --breadcrumbs-spacing-x-separator: 1rem; --breadcrumbs-font-weight-current: 600; /* RadioButton */ --radio-button-size: 1.5rem; --radio-button-border-width-active: calc(var(--radio-button-size) / 2); /* Notification */ --notification-border-radius: 16px; --notification-shadow: 4px 8px 15px rgba(0, 0, 0, 0.05); /* Price */ --price-current-value-font-size: 1rem; --price-current-value-line-heigth: 1rem; --price-old-value-font-size: 0.875rem; --price-old-value-line-heigth: 0.875rem; --price-current-value-font-size-l: 1.375rem; --price-current-value-line-heigth-l: 1.375rem; --price-old-value-font-size-l: 1rem; --price-old-value-line-heigth-l: 1rem; /* ProductThumbnail */ --product-thumbnail-height-default: 152px; /* ProductCard */ --product-card-font-size: 0.875rem; --product-card-line-height: 1rem; --product-card-font-size-row: 1rem; --product-card-line-height-row: 1.25rem; --product-card-font-size-notification: 1rem; --product-card-line-height-notification: 1.2rem; --product-card-font-size-extra-link: 0.75rem; --product-card-line-height-extra-link: 0.875rem; /* Banner */ --banner-font-size: 0.875rem; --banner-line-height: 1.125rem; /* Textarea */ --textarea-size-m-minWidth: 328px; --textarea-size-m-minHeight: 101px; --textarea-size-m-spaceAll: 23px 12px 6px 16px; --textarea-size-m-fontSize: 0.875rem; --textarea-font-family: var(--control-font-family); --textarea-padding-control: 0 9px 0 0; --textarea-hint-fz: 0.875rem; /* PinInput */ --pininput-font-size-item: 1.8rem; --pininput-line-height-item: 1.62; --pininput-font-size-hint: 0.875rem; --pininput-line-height-hint: 1.28; /* PharmacyCard */ --pharmacy-card-font-size: 0.875rem; --pharmacy-card-line-height: 1.28; --pharmacy-card-font-size-address: 1rem; --pharmacy-card-line-height-address: 1.25; /* Checkbox */ --checkbox-box-size: 24px; --checkbox-box-border-active-width: 12px; /* ProgressIndicator */ --progress-indicator-font-size: 1rem; --progress-indicator-line-height: 1.5; --progress-indicator-font-size-status: 0.875rem; --progress-indicator-line-height-status: 1.28; /* MessageBubble */ --message-bubble-font-size: 0.875rem; --message-bubble-line-height: 1.28; --message-bubble-font-size-time: 0.75rem; --message-bubble-line-height-time: 1; /* Tabs */ --tabs-container-border-radius-squared: 8px; --tabs-container-border-radius-rounded: 2rem; --tabs-tab-squared-border-radius: 6px; --tabs-tab-rounded-border-radius: 2rem; --tabs-tab-font-size: 0.875rem; --tabs-tab-line-height: 1.28; --tabs-tab-font-weight: 600; /* Adress */ --address-font-size: 0.875rem; --address-line-height: 1.285; --address-font-size-label: 1.25rem; --address-line-height-label: 1.2; /* Calendar */ --calendar-font-size: 1rem; /* FieldText */ --field-text-label-top: 18px; --field-text-label-top-has-focus: 8px; --field-text-m-label-top: 15px; --field-text-m-label-top-has-focus: 6px; --field-text-label-font: var(--control-font-family); --field-text-label-font-size: 1em; --field-text-m-label-font-size: 0.875em; --field-text-independent-label-font-size: 0.875em; --field-text-m-independent-label-font-size: 0.75em; --field-text-label-stuck-textarea-padding-top: 24px; --field-text-label-transition: all 0.15s linear; --field-text-counter-font: var(--control-font-family); --field-text-counter-font-size: 0.75em; --field-text-counter-lineheight: 1.25; --field-text-label-is-stuck-left: 8px; --field-text-label-is-stuck-font-size: 0.75em; --field-text-label-is-stuck-transform: translateY(-10px); --field-text-is-multiline-label-top: 16px; --field-text-is-multiline-label-top-has-focus: 16px; /* InputText */ --input-text-height: 56px; --input-text-m-height: 48px; --input-text-min-height: 101px; --input-text-input-padding: 0 16px; --input-text-input-padding-focus: 24px 16px 5px; --input-text-textarea-padding: 15px 16px; --input-text-textarea-padding-focus: 35px 16px 6px; --input-text-textarea-padding-top: 15px; --input-text-font: var(--control-font-family); --input-text-font-size: 1em; --input-text-m-font-size: 0.875em; --input-text-addon-after-padding-right: 4px; --input-text-addon-after-buttons-margin-left: 8px; --input-text-textarea-min-height: 160px; /* List */ --list-border-radius: 16px; /* ListItem */ --listitem-border-radius: var(--list-border-radius); /* Pagination */ --pagination-container-margin: 0.4em; --pagination-arrow-border: none; --pagination-item-border-radius: 2.4em; --pagination-item-border: none; --pagination-item-inline-margin: 0.6em; --pagination-item-inline-padding: 0.8em; --pagination-item-block-padding: 0.6em; } /* Mobile */ @media only screen and (max-width: 768px) { .Theme_root_external { /* Button */ --button-s-size: 32px; --button-m-size: 48px; --button-l-size: 48px; --button-border-width: 1px; --badge-font-size: 0.75rem; --badge-font-weight: 600; /* InputText */ --input-text-height: 48px; --input-text-textarea-min-height: 120px; --input-text-font-size: 0.875em; /* FieldText */ --field-text-label-top: 16px; --field-text-label-top-has-focus: 5px; --field-text-label-font-size: .875em; } }