<!-- sections/main-password-header.liquid -->

{%- style -%}.hdt-password-logo { max-width: {{ section.settings.logo_width }}px; } .hdt-password-header { padding: 3rem 0; display: flex; justify-content: space-between; align-items: center; flex-direction: column; color: rgb(var(--color-foreground)); max-width: var(--page-width); margin: 0 auto; text-align: center; gap:1rem; } .hdt-password-modal{ text-underline-offset: 0.3rem; text-decoration-thickness: 0.1rem; transition: text-decoration-thickness ease .1s; text-decoration: underline; grid-column: 3; } .hdt-password-modal svg{ width: 1.8rem; height: 1.8rem; margin-inline-end: 1rem; } .hdt-modal-password input.hdt-input{ padding: 1.55rem 1.8rem; border: 0.1rem solid rgb(var(--color-input-secondary)); color:rgb(var(--color-input-secondary)); background-color: rgb(var(--color-input-primary));; line-height: normal; resize: none; transition: border-color .1s ease-in-out; --height-input: var(--spacing-5); outline: none; } .hdt-modal-password .hdt-input::placeholder { opacity: 0; } .hdt-modal-password .hdt-field label{ left: 1.8rem; transform: scale(1); transform-origin: left top; transition: transform .2s ease-in-out; height:100%; color: rgb(var(--color-input-secondary)); } .hdt-modal-password .hdt-field label .hdt-required{margin-inline-start: 0.5rem;} .hdt-modal-password .hdt-field input:-webkit-autofill~label, .hdt-modal-password .hdt-field input:focus~label, .hdt-modal-password .hdt-field input:not(:placeholder-shown)~label { transform: translateY(-0.6rem) scale(.8); } .hdt-modal-password .hdt-field input:-webkit-autofill, .hdt-modal-password .hdt-field input:focus, .hdt-modal-password .hdt-field input:not(:placeholder-shown) { padding: 2.5rem 1.8rem 0.6rem; } .hdt-modal-password input.hdt-input{ padding: 1.55rem 1.8rem; border: 0.1rem solid rgb(var(--color-input-secondary)); color:rgb(var(--color-input-secondary)); background-color: rgb(var(--color-input-primary));; line-height: normal; resize: none; transition: border-color .1s ease-in-out; --height-input: var(--spacing-5); outline: none; } .hdt-modal-password .hdt-input::placeholder { opacity: 0; } .hdt-modal-password .hdt-select{ --height-input: var(--spacing-5); } .hdt-modal-password .hdt-field label{ left: 1.8rem; transform: scale(1); transform-origin: left top; transition: transform .2s ease-in-out; height:100%; color: rgb(var(--color-input-secondary)); } .hdt-modal-password .hdt-field label .hdt-required{margin-inline-start: 0.5rem;} .hdt-modal-password .hdt-field input:-webkit-autofill~label, .hdt-modal-password .hdt-field input:focus~label, .hdt-modal-password .hdt-field input:not(:placeholder-shown)~label { transform: translateY(-0.6rem) scale(.8); } .hdt-modal-password .hdt-field input:-webkit-autofill, .hdt-modal-password .hdt-field input:focus, .hdt-modal-password .hdt-field input:not(:placeholder-shown) { padding: 2.5rem 1.8rem 0.6rem; } .hdt-modal-password::part(content) { max-width: 62.5rem; max-height: 80vh; width: 100%; border-radius: var(--rounded-input); } .hdt-modal-password::part(header) { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.6rem; } .hdt-modal-password::part(close-button) { background-color: transparent; transition: color .3s ease; color: rgb(var(--color-foreground)); outline: none; border: none; cursor: pointer; } .hdt-modal-password::part(body) {padding:0} @media(min-width: 768px){ .hdt-password-header { display: grid; gap: 3rem; grid-template-columns: 1fr 1.5fr 1fr; padding: 5.5rem 0 2rem; text-align: start; } .hdt-modal-password::part(header) { margin-bottom:3.6rem; } .hdt-modal-password::part(wrapper) { align-items: center; } .hdt-modal-password::part(content) { padding: 3.6rem 3.5rem 4.2rem; } } .dir--rtl .hdt-modal-password .hdt-field label{ left: auto; right: 1.8rem; transform-origin: right top; } @media (-moz-touch-enabled: 0), (hover: hover) and (min-width: 1150px){ .hdt-modal-password::part(close-button):hover{ color: rgb(var(--color-accent)); } }{%- endstyle -%}
<div class="hdt-s-gradient" color-scheme="{{ section.settings.color_scheme }}">
  <div class="hdt-container">
    <div class="hdt-password-header">
      {%- if section.settings.logo != blank -%}
        {%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%}
        {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%}
        {{ section.settings.logo | image_url: width: 500 | image_tag: class: 'hdt-password-logo', widths: '50, 100, 150, 200, 250, 300, 400, 500', width: section.settings.logo_width, height: logo_height, alt: logo_alt }}
      {%- else -%}
        <h1 class="hdt-text-6xl hdt-font-medium">{{ shop.name }}</h1>
      {%- endif -%}
      {%- if shop.password_message != blank -%}
        <div class="hdt-password-content hdt-text-center">
          {{ shop.password_message }}
        </div>
      {%- endif -%}
      <button class="hdt-password-modal hdt-flex hdt-align-center hdt-justify-end" aria-controls="password-form-popup">
        <span class="hdt-icon-padlock">
          <svg aria-hidden="true" focusable="false" class="icon icon-padlock" viewBox="0 0 16 21" fill="currentColor">
            <path fill-rule="evenodd" d="M5.03 1.79A3.73 3.73 0 018 .5c1.28 0 2.28.48 2.97 1.29.67.8 1 1.87 1.03 3V7.5h3c.28 0 .5.22.5.5v12a.5.5 0 01-.5.5H1a.5.5 0 01-.5-.5V8c0-.28.22-.5.5-.5h3V4.8c0-1.1.36-2.15 1.03-3.01zM11 6.4v1.09H5V4.82c.03-.99.31-1.82.8-2.4A2.75 2.75 0 018 1.49c1.01 0 1.73.37 2.2.93.49.58.77 1.41.8 2.4V6.4zM1.5 8.49v11h13v-11h-13zm6.51 2.5a1.5 1.5 0 00-.7 2.82v2.5a.68.68 0 001.36 0v-2.47A1.5 1.5 0 008 11l.01-.01z" clip-rule="evenodd" fill="currentColor" />
          </svg>
        </span>
        <span class="hdt-btn-sidebar-text hdt-font-semibold">{{ 'general.password_page.login_password_button' | t }}</span>
      </button>
    </div>
  </div>
</div>
{% schema %}
{
  "name": "t:sections.main-password-header.name",
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": "t:sections.main-password-header.settings.logo.label"
    },
    {
      "type": "range",
      "id": "logo_width",
      "min": 50,
      "max": 300,
      "step": 10,
      "default": 100,
      "unit": "px",
      "label": "t:sections.main-password-header.settings.logo_width.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    }
  ]
}
{% endschema %}
  