refactor: update letterhead styles for wkhtmltopdf compatibility

Author: khushi8112

erpnext/fixtures/letter_head.json

@@ -1,7 +1,7 @@
 [
  {
   "align": "Left",
-  "content": "<style>\n     .logo-address {\n        display: flex;\n        align-items: center;\n        width: 50%;\n    }\n    \n    .logo {\n        border: 1px solid #EDEDED;\n        border-radius: 15px;\n        width: 180px;\n        height: 90px;\n        align-content: center;\n        margin-right: 5px;\n    }\n    \n    .company-name {\n        color: #171717;\n        font-size: 15px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 23px;\n        letter-spacing: 0.2px;\n    }\n\n    .address{\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: flex-start;\n        margin-left: 10px;\n    }\n    \n    .letterhead-right {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 2px;\n    }\n    \n    .letterhead-container {\n      display: flex;\n      padding: 12px 0 0;\n      justify-content: space-between;\n      margin-bottom: 30px;\n    }\n    \n    \n    .letterhead-right-div {\n        display: flex;\n        align-items: flex-start;\n        gap: 0 10px;\n    }\n    \n    .letterhead-title {\n        color: #7C7C7C;\n        width: 60px;\n        flex: 1 0 0;\n    }\n    \n\n</style>\n\n<div class=\"letterhead-container\">\n    <div class=\"logo-address\">\n        <div class=\"logo\">\n            {% set company_logo = frappe.db.get_value(\"Company\", doc.company, \"company_logo\") %}\n            {% if company_logo %}\n                <img src=\"{{ frappe.utils.get_url(company_logo) }}\">\n            {% endif %}\n        </div>\n      <div class=\"address\">\n        <div class=\"company-name\">{{ doc.company }}</div>\n        {% set company_address = frappe.get_all(\n            \"Dynamic Link\",\n            fields=[\"parent\"],\n            filters={\n              \"link_doctype\": \"Company\",\n              \"link_name\": doc.company,\n              \"parenttype\": \"Address\"\n            },\n            limit=1\n        ) %}\n    \n        {% if company_address %}\n          {% set address = frappe.get_doc(\"Address\", company_address[0].parent) %}\n          {{ address.address_line1 or \"\" }}<br>\n          {% if address.address_line2 %}{{ address.address_line2 }}<br>{% endif %}\n          {{ address.city or \"\" }} {{ address.state or \"\" }} {{ address.pincode or \"\" }} {{ address.country or \"\" }}<br>\n        {% endif %}\n      </div>\n    </div>\n    \n\n  <div class=\"letterhead-right\">\n    {% set website = frappe.db.get_value(\"Company\", doc.company, \"website\") %}\n    {% set email = frappe.db.get_value(\"Company\", doc.company, \"email\") %}\n    {% set phone_no = frappe.db.get_value(\"Company\", doc.company, \"phone_no\") %}\n    \n    <div>\n        <div class=\"letterhead-right-div\">\n            <div class=\"letterhead-title\">{{ _(\"Invoice:\") }}</div>\n            <div>{{ doc.name }}</div><br>\n        </div>\n    </div>\n    \n    {% if website %}\n        <div class=\"letterhead-right-div\">\n            <div class=\"letterhead-title\">{{ _(\"Website:\") }}</div>\n            <div>{{ website }}</div><br>\n        </div>\n    {% endif %}\n    {% if email %}\n        <div class=\"letterhead-right-div\">\n            <div class=\"letterhead-title\">{{ _(\"Email:\") }}</div>\n            <div>{{ email }}</div><br>\n        </div>\n    {% endif %}\n    {% if phone_no %}\n        <div class=\"letterhead-right-div\">\n            <div class=\"letterhead-title\">{{ _(\"Contact:\") }}</div>\n            <div>{{ phone_no }}</div><br>\n        </div>\n    {% endif %}\n  </div>\n</div>\n",
+  "content": "<style>\n    .letter-head {\n        border-radius: 18px;\n        padding-right: 12px;\n        margin-left: 12px;\n        margin-right: 12px;\n    }\n    \n    .letter-head td{\n        padding: 0px !important;\n    }\n    .invoice-header {\n        width: 100%;\n    }\n    .logo-cell {\n        width: 100px;\n        text-align: center;\n        position: relative;\n        \n    }\n    .logo-container {\n        width: 90px;\n        border: 1px solid #EDEDED;\n        border-radius: 15px;\n        display: block;\n    }\n    .logo-container img {\n        max-width: 90px;\n        max-height: 90px;\n        display: inline-block;\n    }\n    .company-details {\n        width: 40%;\n    }\n    .company-name {\n        font-size: 14px;\n        font-weight: bold;\n        color: #171717;\n        margin-bottom: 4px;\n    }\n    .invoice-info-cell {\n        float: right;\n        vertical-align: top;\n    }\n    .invoice-info {\n        margin-bottom: 2px;\n    }\n    .invoice-label {\n        color: #7C7C7C;\n        display: inline-block;\n        width: 60px;\n        margin-right: 5px;\n    }\n</style>\n\n<table class=\"invoice-header\">\n    <tbody>\n        <tr>\n            <td class=\"logo-cell\" style=\"vertical-align: middle !important;\">\n                <div class=\"logo-container\">\n                    {% set company_logo = frappe.db.get_value(\"Company\", doc.company, \"company_logo\") %}\n                    {% if company_logo %}\n                        <img src=\"{{ frappe.utils.get_url(company_logo) }}\" alt=\"Company Logo\">\n                    {% endif %}\n                </div>\n            </td>\n\n            <td class=\"company-details\">\n                <div class=\"company-name\">\n                    {{ doc.company }}\n                </div>\n                {% set company_address = frappe.get_all(\n                    \"Dynamic Link\",\n                    fields=[\"parent\"],\n                    filters={\n                        \"link_doctype\": \"Company\",\n                        \"link_name\": doc.company,\n                        \"parenttype\": \"Address\"\n                    },\n                    limit=1\n                ) %}\n                {% if company_address %}\n                    {% set address = frappe.get_doc(\"Address\", company_address[0].parent) %}\n                    {{ address.address_line1 or \"\" }}<br>\n                    {% if address.address_line2 %}\n                        {{ address.address_line2 }}<br>\n                    {% endif %}\n                    {{ address.city or \"\" }} {{ address.state or \"\" }} {{ address.pincode or \"\" }} {{ address.country or \"\" }}\n                {% endif %}\n            </td>\n\n            <td class=\"invoice-info-cell\">\n                {% set website = frappe.db.get_value(\"Company\", doc.company, \"website\") %}\n                {% set email = frappe.db.get_value(\"Company\", doc.company, \"email\") %}\n                {% set phone_no = frappe.db.get_value(\"Company\", doc.company, \"phone_no\") %}\n\n                <div class=\"invoice-info\">\n                    <span class=\"invoice-label\">{{ _(\"Invoice:\") }}</span>\n                    <span>{{ doc.name }}</span>\n                </div>\n                {% if website %}\n                    <div class=\"invoice-info\">\n                        <span class=\"invoice-label\">{{ _(\"Website:\") }}</span>\n                        <span>{{ website }}</span>\n                    </div>\n                {% endif %}\n                {% if email %}\n                    <div class=\"invoice-info\">\n                        <span class=\"invoice-label\">{{ _(\"Email:\") }}</span>\n                        <span>{{ email }}</span>\n                    </div>\n                {% endif %}\n                {% if phone_no %}\n                    <div class=\"invoice-info\">\n                        <span class=\"invoice-label\">{{ _(\"Contact:\") }}</span>\n                        <span>{{ phone_no }}</span>\n                    </div>\n                {% endif %}\n            </td>\n        </tr>\n    </tbody>\n</table>\n",
   "disabled": 0,
   "docstatus": 0,
   "doctype": "Letter Head",
@@ -18,13 +18,13 @@
   "image_width": 0.0,
   "is_default": 0,
   "letter_head_name": "Sales Invoice Letter Head",
-  "modified": "2025-09-17 12:31:46.314509",
+  "modified": "2025-09-19 14:10:13.265409",
   "name": "Sales Invoice Letter Head",
   "source": "HTML"
  },
  {
   "align": "Left",
-  "content": "<style>\n    .letterhead-container {\n        display: flex;\n        justify-content: space-between;\n        padding: 12px;\n        margin-bottom: 30px;\n        border-radius: 18px;\n        background: #F8F8F8;\n    }\n    \n    .logo-container {\n        margin-right: 2px;\n    }\n\n    .logo {\n        border: 1px solid #EDEDED;\n        border-radius: 15px;\n        margin-bottom: 10px;\n        width: 90px;\n        height: 90px;\n        align-content: center;\n    }\n    \n    .invoice {\n        text-align: right;\n        margin-bottom: 10px;\n    }\n\n    .company-details {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n\n    }\n    \n    .address{\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: flex-start;\n        max-width: 370px;\n    }\n    \n    .company-name {\n        color: var(--ink-gray-8, #171717);\n        font-size: 15px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 23px;\n        letter-spacing: 0.2px;\n    }\n\n    \n    .contact-details {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 2px;\n        justify-content: end;\n    }\n    \n    .letterhead-right-div {\n        display: flex;\n        align-items: flex-start;\n        gap: 0 10px;\n    }\n    \n    .letterhead-title {\n        color: #7C7C7C;\n        width: 60px;\n        flex: 1 0 0;\n    }\n    \n</style>\n\n<div class=\"letterhead-container\">\n    <div class=\"logo-container\">\n        <div class=\"logo\">\n        {% set company_logo = frappe.db.get_value(\"Company\", doc.company, \"company_logo\") %}\n            {% if company_logo %}\n                <img src=\"{{ frappe.utils.get_url(company_logo) }}\">\n            {% endif %}\n        </div>\n        <div class=\"address\">\n            <div class=\"company-name\">{{ doc.company }}</div>\n                <span class=\"font-size: 13px;\">\n                    {% set company_address = frappe.get_all(\n                        \"Dynamic Link\",\n                        fields=[\"parent\"],\n                        filters={\n                          \"link_doctype\": \"Company\",\n                          \"link_name\": doc.company,\n                          \"parenttype\": \"Address\"\n                        },\n                        limit=1\n                    ) %}\n                \n                    {% if company_address %}\n                      {% set address = frappe.get_doc(\"Address\", company_address[0].parent) %}\n                      {{ address.address_line1 or \"\" }}<br>\n                      {% if address.address_line2 %}{{ address.address_line2 }}<br>{% endif %}\n                      {{ address.city or \"\" }} {{ address.state or \"\" }} {{ address.pincode or \"\" }} {{ address.country or \"\" }}<br>\n                    {% endif %}\n                </span>\n        </div>\n    </div>\n    <div class=\"company-details\">\n        \n        <div class=\"invoice\">\n            <div style=\"font-size: 16px; font-weight: bold;\">\n                {{ _(\"Sales Invoice\") }}\n            </div>\n            <div style=\"color:#7C7C7C;\">\n                {{ doc.name }}\n            </div>\n        </div>\n\n        <div class=\"contact-details\">\n            {% set website = frappe.db.get_value(\"Company\", doc.company, \"website\") %}\n            {% set email = frappe.db.get_value(\"Company\", doc.company, \"email\") %}\n            {% set phone_no = frappe.db.get_value(\"Company\", doc.company, \"phone_no\") %}\n            \n        \n            {% if website %}\n                <div class=\"letterhead-right-div\">\n                    <div class=\"letterhead-title\">{{ _(\"Website:\") }}</div>\n                    <div>{{ website }}</div><br>\n                </div>\n            {% endif %}\n            {% if email %}\n                <div class=\"letterhead-right-div\">\n                    <div class=\"letterhead-title\">{{ _(\"Email:\") }}</div>\n                    <div>{{ email }}</div><br>\n                </div>\n            {% endif %}\n            {% if phone_no %}\n                <div class=\"letterhead-right-div\">\n                    <div class=\"letterhead-title\">{{ _(\"Contact:\") }}</div>\n                    <div>{{ phone_no }}</div><br>\n                </div>\n            {% endif %}\n            \n        </div>\n    </div>\n</div>\n",
+  "content": "<style>\n    .letter-head {\n        border-radius: 18px;\n        background: #F8F8F8;\n        padding: 12px;\n        margin-left: 12px;\n        margin-right: 12px;\n        /*margin-top: 12px !important;*/\n    }\n    .letterhead-container {\n        width: 100%;\n    }\n    .letterhead-container .other-details {\n        position: absolute;\n        right: 0;\n        bottom: 0;\n    }\n    .logo-address{\n        width: 65%;\n        vertical-align: top;\n    }\n\n    .logo {\n        width: 90px;\n        display: block;\n        margin-bottom: 10px;\n    }\n    \n    .logo img {\n        border-radius: 15px;\n        border: 1px solid #EDEDED;\n    }\n\n    .company-name {\n        color: #171717;\n        font-weight: bold;\n        line-height: 23px;\n        margin-bottom: 5px;\n    }\n\n    .company-address {\n        color: #171717;\n        width: 300px;\n    }\n\n    .invoice-title {\n        font-weight: bold;\n    }\n\n    .invoice-number {\n        color: #7C7C7C;\n    }\n\n    .contact-title {\n        color: #7C7C7C;\n        width: 60px;\n        display: inline-block;\n        vertical-align: top;\n        margin-right: 10px;\n    }\n\n    .contact-value {\n        color: #171717;\n        display: inline-block;\n    }\n    .letterhead-container td {\n        padding: 0px !important;\n        position: relative;\n    }\n</style>\n\n<table class=\"letterhead-container\">\n    <tbody><tr>\n        <td class=\"logo-address\">\n            {% set company_logo = frappe.db.get_value(\"Company\", doc.company, \"company_logo\") %}\n            {% if company_logo %}\n                <div class=\"logo\">\n                    <img src=\"{{ frappe.utils.get_url(company_logo) }}\">\n                </div>\n            {% endif %}\n            <div class=\"company-name\">{{ doc.company }}</div>\n            <div class=\"company-address\">\n                {% set company_address = frappe.get_all(\n                    \"Dynamic Link\",\n                    fields=[\"parent\"],\n                    filters={\n                      \"link_doctype\": \"Company\",\n                      \"link_name\": doc.company,\n                      \"parenttype\": \"Address\"\n                    },\n                    limit=1\n                ) %}\n                {% if company_address %}\n                  {% set address = frappe.get_doc(\"Address\", company_address[0].parent) %}\n                  {{ address.address_line1 or \"\" }}<br>\n                  {% if address.address_line2 %}{{ address.address_line2 }}<br>{% endif %}\n                  {{ address.city or \"\" }} {{ address.state or \"\" }} {{ address.pincode or \"\" }} {{ address.country or \"\" }}<br>\n                {% endif %}\n            </div>\n        </td>\n\n        <td style=\"vertical-align: top;\">\n            <div style=\"height: 90px; margin-bottom: 10px; text-align: right;\">\n                <div class=\"invoice-title\">{{ _(\"Sales Invoice\") }}</div>\n                <div class=\"invoice-number\">{{ doc.name }}</div>\n                <br>\n            </div>\n            <div style=\"text-align: left; float: right;\" class=\"other-details\">\n                {% set website = frappe.db.get_value(\"Company\", doc.company, \"website\") %}\n                {% set email = frappe.db.get_value(\"Company\", doc.company, \"email\") %}\n                {% set phone_no = frappe.db.get_value(\"Company\", doc.company, \"phone_no\") %}\n                \n                {% if website %}\n                    <div><span class=\"contact-title\">{{ _(\"Website:\") }}</span><span class=\"contact-value\">{{ website }}</span></div>\n                {% endif %}\n                {% if email %}\n                    <div><span class=\"contact-title\">{{ _(\"Email:\") }}</span><span class=\"contact-value\">{{ email }}</span></div>\n                {% endif %}\n                {% if phone_no %}\n                    <div><span class=\"contact-title\">{{ _(\"Contact:\") }}</span><span class=\"contact-value\">{{ phone_no }}</span></div>\n                {% endif %}\n            </div>\n        </td>\n    </tr>\n</tbody></table>\n",
   "disabled": 0,
   "docstatus": 0,
   "doctype": "Letter Head",
@@ -41,7 +41,7 @@
   "image_width": 0.0,
   "is_default": 0,
   "letter_head_name": "Print Format Letter Head",
-  "modified": "2025-09-17 12:31:46.318339",
+  "modified": "2025-09-19 13:59:22.029272",
   "name": "Print Format Letter Head",
   "source": "HTML"
  }