vendor/store.shopware.com/solidadvancedsliderelements/src/Resources/views/storefront/layout/meta.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/layout/meta.html.twig' %}
  2. {% block layout_head_stylesheet %}
  3.   {{ parent() }}
  4.   {% block solid_ase_content_slider_styles %}
  5.     {% if page.cmsPage %}
  6.       {% for section in page.cmsPage.sections %}
  7.         {% for block in section.blocks %}
  8.           {% for element in block.slots.elements %}
  9.             {% if element.type == 'solid-ase-content-slider' %}
  10.               {% set sliderSettings = element.translated.config.sliderSettings.value %}
  11.               {% set settings = element.translated.config.settings.value %}
  12.               {% block solid_ase_content_slider_style_tag %}
  13.                 <style>
  14.                   {% block solid_ase_content_slider_styles_responsive_min_height %}
  15.                     {# responsive min height #}
  16.                     {% if settings.sizingMode == 'responsive-min-height' %}
  17.                       {% if settings.minHeightMobile %}
  18.                         .solid-ase-content-slider-{{ element.id }}
  19.                           .slide-container {
  20.                           min-height: {{ settings.minHeightMobile }};
  21.                         }
  22.                       {% endif %}
  23.                       {% if settings.minHeightTablet %}
  24.                         @media (min-width: 768px) {
  25.                           .solid-ase-content-slider-{{ element.id }}
  26.                             .slide-container {
  27.                             min-height: {{ settings.minHeightTablet }};
  28.                           }
  29.                         }
  30.                       {% endif %}
  31.                       {% if settings.minHeightDesktop %}
  32.                         @media (min-width: 1200px) {
  33.                           .solid-ase-content-slider-{{ element.id }}
  34.                             .slide-container {
  35.                             min-height: {{ settings.minHeightDesktop }};
  36.                           }
  37.                         }
  38.                       {% endif %}
  39.                     {% endif %}
  40.                   {% endblock %}
  41.                   {% block solid_ase_content_slider_styles_min_aspect_ratio %}
  42.                     {# min aspect ratio #}
  43.                     {% if settings.sizingMode == 'min-aspect-ratio' %}
  44.                       {% if settings.minAspectRatioWidth and
  45.                         settings.minAspectRatioHeight %}
  46.                         .solid-ase-content-slider-{{ element.id }}::before {
  47.                           padding-top: {{ (settings.minAspectRatioHeight /
  48.                             settings.minAspectRatioWidth * 100) ~ '%' }};
  49.                         }
  50.                       {% endif %}
  51.                     {% endif %}
  52.                   {% endblock %}
  53.                   {% block solid_ase_content_slider_styles_content_animation %}
  54.                     {# content animation #}
  55.                     {% if settings.contentAnimation != 'none' %}
  56.                       .solid-ase-content-slider-{{ element.id }} .content {
  57.                         transition-delay: {{ (sliderSettings.speed + 200) ~ 'ms' }};
  58.                       }
  59.                     {% endif %}
  60.                   {% endblock %}
  61.                   {% block solid_ase_content_slider_styles_small_headline_size %}
  62.                     {# small headline size #}
  63.                     {% if settings.smallHeadlineSizeMobile %}
  64.                       .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  65.                         font-size: {{ settings.smallHeadlineSizeMobile }};
  66.                       }
  67.                     {% endif %}
  68.                     {% if settings.smallHeadlineSizeTablet %}
  69.                       @media (min-width: 768px) {
  70.                         .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  71.                           font-size: {{ settings.smallHeadlineSizeTablet }};
  72.                         }
  73.                       }
  74.                     {% endif %}
  75.                     {% if settings.smallHeadlineSizeDesktop %}
  76.                       @media (min-width: 1200px) {
  77.                         .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  78.                           font-size: {{ settings.smallHeadlineSizeDesktop }};
  79.                         }
  80.                       }
  81.                     {% endif %}
  82.                   {% endblock %}
  83.                   {% block solid_ase_content_slider_styles_small_headline_weight %}
  84.                     {# small headline weight #}
  85.                     {% if settings.smallHeadlineWeight %}
  86.                       .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  87.                         font-weight: {{ settings.smallHeadlineWeight }};
  88.                       }
  89.                     {% endif %}
  90.                   {% endblock %}
  91.                   {% block solid_ase_content_slider_styles_headline_size %}
  92.                     {# headline size #}
  93.                     {% if settings.headlineSizeMobile %}
  94.                       .solid-ase-content-slider-{{ element.id }} .content .headline {
  95.                         font-size: {{ settings.headlineSizeMobile }};
  96.                       }
  97.                     {% endif %}
  98.                     {% if settings.headlineSizeTablet %}
  99.                       @media (min-width: 768px) {
  100.                         .solid-ase-content-slider-{{ element.id }} .content .headline {
  101.                           font-size: {{ settings.headlineSizeTablet }};
  102.                         }
  103.                       }
  104.                     {% endif %}
  105.                     {% if settings.headlineSizeDesktop %}
  106.                       @media (min-width: 1200px) {
  107.                         .solid-ase-content-slider-{{ element.id }} .content .headline {
  108.                           font-size: {{ settings.headlineSizeDesktop }};
  109.                         }
  110.                       }
  111.                     {% endif %}
  112.                   {% endblock %}
  113.                   {% block solid_ase_content_slider_styles_headline_weight %}
  114.                     {# headline weight #}
  115.                     {% if settings.headlineWeight %}
  116.                       .solid-ase-content-slider-{{ element.id }} .content .headline {
  117.                         font-weight: {{ settings.headlineWeight }};
  118.                       }
  119.                     {% endif %}
  120.                   {% endblock %}
  121.                   {% block solid_ase_content_slider_styles_text_size %}
  122.                     {# text size #}
  123.                     {% if settings.textSizeMobile %}
  124.                       .solid-ase-content-slider-{{ element.id }} .content .text {
  125.                         font-size: {{ settings.textSizeMobile }};
  126.                       }
  127.                     {% endif %}
  128.                     {% if settings.textSizeTablet %}
  129.                       @media (min-width: 768px) {
  130.                         .solid-ase-content-slider-{{ element.id }} .content .text {
  131.                           font-size: {{ settings.textSizeTablet }};
  132.                         }
  133.                       }
  134.                     {% endif %}
  135.                     {% if settings.textSizeDesktop %}
  136.                       @media (min-width: 1200px) {
  137.                         .solid-ase-content-slider-{{ element.id }} .content .text {
  138.                           font-size: {{ settings.textSizeDesktop }};
  139.                         }
  140.                       }
  141.                     {% endif %}
  142.                   {% endblock %}
  143.                   {% block solid_ase_content_slider_styles_text_weight %}
  144.                     {# text weight #}
  145.                     {% if settings.textWeight %}
  146.                       .solid-ase-content-slider-{{ element.id }} .content .text {
  147.                         font-weight: {{ settings.textWeight }};
  148.                       }
  149.                     {% endif %}
  150.                   {% endblock %}
  151.                   {% block solid_ase_content_slider_styles_button_label_size %}
  152.                     {# button label size #}
  153.                     {% if settings.buttonLabelSizeMobile %}
  154.                       .solid-ase-content-slider-{{ element.id }} .content .btn {
  155.                         font-size: {{ settings.buttonLabelSizeMobile }};
  156.                       }
  157.                     {% endif %}
  158.                     {% if settings.buttonLabelSizeTablet %}
  159.                       @media (min-width: 768px) {
  160.                         .solid-ase-content-slider-{{ element.id }} .content .btn {
  161.                           font-size: {{ settings.buttonLabelSizeTablet }};
  162.                         }
  163.                       }
  164.                     {% endif %}
  165.                     {% if settings.buttonLabelSizeDesktop %}
  166.                       @media (min-width: 1200px) {
  167.                         .solid-ase-content-slider-{{ element.id }} .content .btn {
  168.                           font-size: {{ settings.buttonLabelSizeDesktop }};
  169.                         }
  170.                       }
  171.                     {% endif %}
  172.                   {% endblock %}
  173.                   {% block solid_ase_content_slider_styles_button_label_weight %}
  174.                     {# button label weight #}
  175.                     {% if settings.buttonLabelWeight %}
  176.                       .solid-ase-content-slider-{{ element.id }} .content .btn {
  177.                         font-weight: {{ settings.buttonLabelWeight }};
  178.                       }
  179.                     {% endif %}
  180.                   {% endblock %}
  181.                   {% block solid_ase_content_slider_styles_small_headline_margin_bottom %}
  182.                     {# small headline margin bottom #}
  183.                     {% if settings.smallHeadlineMarginBottomMobile %}
  184.                       .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  185.                         margin-bottom: {{ settings.smallHeadlineMarginBottomMobile }};
  186.                       }
  187.                     {% endif %}
  188.                     {% if settings.smallHeadlineMarginBottomTablet %}
  189.                       @media (min-width: 768px) {
  190.                         .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  191.                           margin-bottom: {{ settings.smallHeadlineMarginBottomTablet }};
  192.                         }
  193.                       }
  194.                     {% endif %}
  195.                     {% if settings.smallHeadlineMarginBottomDesktop %}
  196.                       @media (min-width: 1200px) {
  197.                         .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  198.                           margin-bottom: {{ settings.smallHeadlineMarginBottomDesktop }};
  199.                         }
  200.                       }
  201.                     {% endif %}
  202.                   {% endblock %}
  203.                   {% block solid_ase_content_slider_styles_headline_margin_bottom %}
  204.                     {# headline margin bottom #}
  205.                     {% if settings.headlineMarginBottomMobile %}
  206.                       .solid-ase-content-slider-{{ element.id }} .content .headline {
  207.                         margin-bottom: {{ settings.headlineMarginBottomMobile }};
  208.                       }
  209.                     {% endif %}
  210.                     {% if settings.headlineMarginBottomTablet %}
  211.                       @media (min-width: 768px) {
  212.                         .solid-ase-content-slider-{{ element.id }} .content .headline {
  213.                           margin-bottom: {{ settings.headlineMarginBottomTablet }};
  214.                         }
  215.                       }
  216.                     {% endif %}
  217.                     {% if settings.headlineMarginBottomDesktop %}
  218.                       @media (min-width: 1200px) {
  219.                         .solid-ase-content-slider-{{ element.id }} .content .headline {
  220.                           margin-bottom: {{ settings.headlineMarginBottomDesktop }};
  221.                         }
  222.                       }
  223.                     {% endif %}
  224.                   {% endblock %}
  225.                   {% block solid_ase_content_slider_styles_text_margin_bottom %}
  226.                     {# text margin bottom #}
  227.                     {% if settings.textMarginBottomMobile %}
  228.                       .solid-ase-content-slider-{{ element.id }} .content .text {
  229.                         margin-bottom: {{ settings.textMarginBottomMobile }};
  230.                       }
  231.                     {% endif %}
  232.                     {% if settings.textMarginBottomTablet %}
  233.                       @media (min-width: 768px) {
  234.                         .solid-ase-content-slider-{{ element.id }} .content .text {
  235.                           margin-bottom: {{ settings.textMarginBottomTablet }};
  236.                         }
  237.                       }
  238.                     {% endif %}
  239.                     {% if settings.textMarginBottomDesktop %}
  240.                       @media (min-width: 1200px) {
  241.                         .solid-ase-content-slider-{{ element.id }} .content .text {
  242.                           margin-bottom: {{ settings.textMarginBottomDesktop }};
  243.                         }
  244.                       }
  245.                     {% endif %}
  246.                   {% endblock %}
  247.                   {% block solid_ase_content_slider_styles_small_headline_color %}
  248.                     {# small headline color #}
  249.                     {% if settings.smallHeadlineColor %}
  250.                       .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  251.                         color: {{ settings.smallHeadlineColor }};
  252.                       }
  253.                     {% endif %}
  254.                   {% endblock %}
  255.                   {% block solid_ase_content_slider_styles_headline_color %}
  256.                     {# headline color #}
  257.                     {% if settings.headlineColor %}
  258.                       .solid-ase-content-slider-{{ element.id }} .content .headline {
  259.                         color: {{ settings.headlineColor }} !important;
  260.                       }
  261.                     {% endif %}
  262.                   {% endblock %}
  263.                   {% block solid_ase_content_slider_styles_text_color %}
  264.                     {# text color #}
  265.                     {% if settings.textColor %}
  266.                       .solid-ase-content-slider-{{ element.id }} .content .text {
  267.                         color: {{ settings.textColor }};
  268.                       }
  269.                     {% endif %}
  270.                   {% endblock %}
  271.                   {% block solid_ase_content_slider_styles_button_color %}
  272.                     {# button color #}
  273.                     {% if settings.buttonColor %}
  274.                       {% if 'outline' in settings.buttonVariant %}
  275.                         .solid-ase-content-slider-{{ element.id }} .content .btn {
  276.                           color: {{ settings.buttonColor }};
  277.                           border-color: {{ settings.buttonColor }};
  278.                         }
  279.                         .solid-ase-content-slider-{{ element.id }} .content .btn:hover,
  280.                         .solid-ase-content-slider-{{ element.id }} .content .btn:active {
  281.                           color: {{ hexContrast(settings.buttonColor) }} !important;
  282.                           border-color: {{ settings.buttonColor }} !important;
  283.                           background-color: {{ settings.buttonColor }} !important;
  284.                         }
  285.                       {% else %}
  286.                         .solid-ase-content-slider-{{ element.id }} .content .btn {
  287.                           color: {{ hexContrast(settings.buttonColor) }};
  288.                           border-color: {{ settings.buttonColor }};
  289.                           background-color: {{ settings.buttonColor }};
  290.                         }
  291.                         .solid-ase-content-slider-{{ element.id }} .content .btn:hover {
  292.                           border-color: {{ hexDarken(settings.buttonColor, '36%') }} !important;
  293.                           background-color: {{ hexDarken(settings.buttonColor, '24%') }} !important;
  294.                         }
  295.                         .solid-ase-content-slider-{{ element.id }} .content .btn:active {
  296.                           color: {{ hexContrast(settings.buttonColor) }} !important;
  297.                           border-color: {{ hexDarken(settings.buttonColor, '45%') }} !important;
  298.                           background-color: {{ hexDarken(settings.buttonColor, '36%') }} !important;
  299.                         }
  300.                       {% endif %}
  301.                     {% endif %}
  302.                   {% endblock %}
  303.                   {% block solid_ase_content_slider_styles_content_background_color %}
  304.                     {# content background color #}
  305.                     {% if settings.contentBackgroundColor %}
  306.                       {% if 'boxed' in settings.layoutVariant %}
  307.                         .solid-ase-content-slider-{{ element.id }} .content {
  308.                           background-color: {{ settings.contentBackgroundColor }} !important;
  309.                         }
  310.                       {% elseif settings.layoutVariant == 'gradient-top' %}
  311.                         .solid-ase-content-slider-{{ element.id }} .content-container {
  312.                           background: linear-gradient({{ settings.contentBackgroundColor }}, {{ hexOpacity(settings.contentBackgroundColor, 0) }}) !important;
  313.                         }
  314.                       {% elseif settings.layoutVariant == 'gradient-bottom' %}
  315.                         .solid-ase-content-slider-{{ element.id }} .content-container {
  316.                           background: linear-gradient({{ hexOpacity(settings.contentBackgroundColor, 0) }}, {{ settings.contentBackgroundColor }}) !important;
  317.                         }
  318.                       {% else %}
  319.                         .solid-ase-content-slider-{{ element.id }} .content-container {
  320.                           background-color: {{ settings.contentBackgroundColor }} !important;
  321.                         }
  322.                       {% endif %}
  323.                     {% endif %}
  324.                   {% endblock %}
  325.                   {% block solid_ase_content_slider_styles_controls_color %}
  326.                     {# controls color #}
  327.                     {% if settings.controlsColor %}
  328.                       {% if 'icon' in settings.controlsVariant %}
  329.                         .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:not(:disabled) .icon {
  330.                           color: {{ settings.controlsColor }};
  331.                         }
  332.                         {% if 'outside' in settings.controlsPosition %}
  333.                           .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:hover:not(:disabled) .icon {
  334.                             color: {{ hexDarken(settings.controlsColor, '24%') }};
  335.                           }
  336.                         {% endif %}
  337.                         .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:active:not(:disabled) .icon {
  338.                           color: {{ hexDarken(settings.controlsColor, '36%') }};
  339.                         }
  340.                       {% else %}
  341.                         .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:not(:disabled) {
  342.                           border-color: {{ settings.controlsColor }};
  343.                           background-color: {{ settings.controlsColor }};
  344.                         }
  345.                         .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:not(:disabled) .icon {
  346.                           color: {{ hexContrast(settings.controlsColor) }};
  347.                         }
  348.                         {% if 'inside' in settings.controlsPosition %}
  349.                           .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:hover:not(:disabled) {
  350.                             border-color: {{ settings.controlsColor }} !important;
  351.                             background-color: {{ settings.controlsColor }} !important;
  352.                           }
  353.                         {% else %}
  354.                           .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:hover:not(:disabled) {
  355.                             border-color: {{ hexDarken(settings.controlsColor, '36%') }} !important;
  356.                             background-color: {{ hexDarken(settings.controlsColor, '24%') }} !important;
  357.                           }
  358.                         {% endif %}
  359.                         .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:active:not(:disabled) {
  360.                           border-color: {{ hexDarken(settings.controlsColor, '45%') }} !important;
  361.                           background-color: {{ hexDarken(settings.controlsColor, '36%') }} !important;
  362.                         }
  363.                       {% endif %}
  364.                     {% endif %}
  365.                   {% endblock %}
  366.                   {% block solid_ase_content_slider_styles_nav_color %}
  367.                     {# nav color #}
  368.                     {% if settings.navColor %}
  369.                       {% if settings.navVariant == 'dots-fill' %}
  370.                         .solid-ase-content-slider-{{ element.id }} .tns-nav button {
  371.                           border-color: {{ settings.navColor }} !important;
  372.                         }
  373.                         .solid-ase-content-slider-{{ element.id }} .tns-nav button::after {
  374.                           background-color: {{ settings.navColor }} !important;
  375.                         }
  376.                       {% else %}
  377.                         .solid-ase-content-slider-{{ element.id }} .tns-nav button {
  378.                           background-color: {{ settings.navColor }} !important;
  379.                         }
  380.                       {% endif %}
  381.                     {% endif %}
  382.                   {% endblock %}
  383.                   {% block solid_ase_content_slider_styles_custom_css %}
  384.                     {# custom css #}
  385.                     {% if settings.customCss %}
  386.                       {{ settings.customCss | raw }}
  387.                     {% endif %}
  388.                   {% endblock %}
  389.                 </style>
  390.               {% endblock %}
  391.             {% endif %}
  392.           {% endfor %}
  393.         {% endfor %}
  394.       {% endfor %}
  395.     {% endif %}
  396.   {% endblock %}
  397. {% endblock %}