cosmoguard-bd/old/resources/injectableHeader.html

<!-- Start of Injectable ECHA Header Block (v7 - Dynamic Data) -->
<style>
    /* ECHA Header Styles - Based on V5/V6 */
    .echa-header-injected { /* Wrapper class */
        width: 100%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0,0,0,0.06);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        box-sizing: border-box;
        background-color: #ffffff;
        line-height: 1.4;
    }
    .echa-header-injected *, .echa-header-injected *::before, .echa-header-injected *::after {
         box-sizing: inherit;
    }

    /* Top white bar - das-top-nav */
    .echa-header-injected .das-top-nav {
        background-color: #ffffff;
        display: flex;
        align-items: stretch;
        padding: 8px 25px;
        border-bottom: 1px solid #e7e7e7;
        min-height: 55px;
    }

    .echa-header-injected .logo-container {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .echa-header-injected .logo-main img {
        height: 38px;
        width: auto;
        display: block;
        border: 0;
    }

    .echa-header-injected .logo-part-of {
        display: flex;
        align-items: center;
        padding-left: 20px;
        border-left: 1px solid #cccccc;
        height: 100%;
    }

    .echa-header-injected .logo-part-of img {
        height: 18px;
        width: auto;
        display: block;
        border: 0;
    }

    /* Bottom blue bar - das-primary-header_wrapper */
    .echa-header-injected .das-primary-header_wrapper {
        background-color: #005487;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.05));
        color: #ffffff;
        padding: 12px 25px;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .echa-header-injected .das-primary-header-info {
        flex-grow: 1;
        min-width: 0; /* Prevent flex item from overflowing */
    }

    /* Style for the substance link */
    .echa-header-injected .substance-link {
        color: #ffffff;
        text-decoration: none;
        display: block; /* Makes the whole H2 area clickable */
    }
    .echa-header-injected .substance-link:hover,
    .echa-header-injected .substance-link:focus {
        text-decoration: underline;
    }

    .echa-header-injected .das-primary-header-info h2 {
    font-size: 1.5em;         /* Set your desired FIXED font size */
    margin: 0 0 4px 0;
    line-height: 1.2;         /* This will control spacing between lines if it wraps */
    color: #ffffff;
    font-weight: 600;
    width: 100%;              /* Constrains the text horizontally */

    /* --- REMOVED ---
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    */

    /* --- ADDED (Recommended) --- */
    white-space: normal;      /* Explicitly allow wrapping (this is the default, but good for clarity) */
    overflow-wrap: break-word; /* Helps break long words without spaces */
    /* word-break: break-word; /* Alternative if overflow-wrap doesn't catch all cases */

    /* Ensure overflow is visible (default, but explicit) */
    overflow: visible;
    }

    .echa-header-injected .das-primary-header-info_details {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
    }

    .echa-header-injected .item {
        display: flex;
        align-items: baseline;
        position: relative;
    }

    .echa-header-injected .item + .item::before {
        content: '•';
        color: #f5a623;
        font-weight: bold;
        font-size: 1.1em;
        line-height: 1;
        display: inline-block;
        margin-right: 18px;
    }

    .echa-header-injected .item label {
        font-size: 0.85em;
        color: #e0eaf1;
        margin-right: 8px;
        font-weight: 400;
    }

    .echa-header-injected .item span {
        font-size: 0.95em;
        color: #ffffff;
        font-weight: bold;
    }

    /* Minimal reset */
    .echa-header-injected h2, .echa-header-injected span, .echa-header-injected label, .echa-header-injected div {
        margin: 0; padding: 0;
    }
    .echa-header-injected a { color: inherit; text-decoration: none; } /* Basic reset for any links */

</style>

<header class="echa-header-injected" id="pdf-custom-header">  
        <div class="das-top-nav">
        <div class="logo-container">
            <div class="logo-main">
                <!-- Logo link can be kept static or made dynamic if needed -->
                <a title="ECHA Chemicals Database" href="/">
                   <img height="38" alt="ECHA Chemicals Database" src="##ECHA_CHEM_LOGO_SRC##">
                </a>
            </div>
            <div class="logo-part-of">
                 <a title="visit ECHA website" target="_blank" rel="noopener noreferrer" href="https://echa.europa.eu/">
                    <img height="18" alt="European Chemicals Agency" src="##ECHA_LOGO_SRC##">
                 </a>
            </div>
        </div>
    </div>
    <div class="das-primary-header_wrapper">
        <div class="das-primary-header-info">
            <!-- ==== DYNAMIC CONTENT START ==== -->
            <a href="##SUBSTANCE_LINK##" title="View substance details: ##SUBSTANCE_NAME##" class="substance-link">
                <h2 class="das-text-truncate">##SUBSTANCE_NAME##</h2>
            </a>
            <div class="das-primary-header-info_details">
                <div class="item">
                    <label>EC number</label>
                    <span>##EC_NUMBER##</span>
                </div>
                <div class="item">
                    <label>CAS number</label>
                    <span class="das-text-truncate">##CAS_NUMBER##</span>
                </div>
            </div>
             <!-- ==== DYNAMIC CONTENT END ==== -->
        </div>
    </div>
</header>
<!-- End of Injectable ECHA Header Block (v7) -->