theme.php

<?php
/**
 * theme.php - preview CSS emitter for this LHC widget theme sandbox.
 *
 * This is the sandbox counterpart of the widget's own theme CSS emitter:
 *
 *     lhc_web/design/defaulttheme/tpl/pagelayouts/parts/page_head_css_theme.tpl.php
 *
 * It replaces the frozen `css/core-bubble.css` AND the `css/core-override.css` link in
 * the *.html fixtures. Instead of a hand-maintained copy of the generated rules, the
 * preview now renders from THE THEME FILE ITSELF (`themes/<slug>.json`) - so a theme
 * attribute can be edited and the preview re-checked, with no generated CSS to keep in
 * sync and no risk of previewing rules that the real widget would never emit.
 *
 * Output == the declarations the real widget emits, in the real order:
 *
 *   1. @import rules harvested from custom_widget_css (must stay at the very top)
 *   2. builder colours  (top-level fields + bot_configuration colour keys)
 *   3. the message-style block (the template's `$react` branch:
 *      hide_visitor_profile + bubble_style_profile -> the rules core-bubble.css froze)
 *   4. header / shell geometry
 *   5. new-message pill, scroll-to-bottom button, reactions
 *   6. custom_widget_css (the free-form theme CSS) [+ custom_popup_css with ?popup=1]
 *
 * NOT emitted here, because the real widget serves them to another document:
 * custom_status_css / custom_container_css (status iframe + host page).
 *
 * Usage from a fixture:   <link rel="stylesheet" href="theme.php">
 *            switch theme: theme.php?theme=premium-gold
 *            popup mode:   theme.php?popup=1
 *
 * NOTE: serving this file through PHP is wired up outside the sandbox. Over a plain
 * file:// URL the browser receives the PHP source instead of CSS - the fixtures only
 * preview correctly when a PHP-capable server serves this folder.
 */

// ---------------------------------------------------------------------------
// Which theme is being previewed. The fixtures all link plain `theme.php`, so
// switching the theme under development happens in ONE place - right here, or per
// request with ?theme=<slug>.
// ---------------------------------------------------------------------------
$defaultTheme = 'dark-professional';

$themeSlug = isset($_GET['theme']) ? (string)$_GET['theme'] : $defaultTheme;
$themeSlug = preg_replace('/[^A-Za-z0-9._-]/', '', basename($themeSlug));
$themePath = __DIR__ . '/themes/' . $themeSlug . '.json';
$popupMode = isset($_GET['popup']) && $_GET['popup'] == '1';

header('Content-Type: text/css; charset=utf-8');
// Production serves theme CSS with a long max-age; a preview must never be cached or
// an edited attribute keeps rendering the previous revision.
header('Cache-Control: no-cache, no-store, must-revalidate');

if (!is_file($themePath)) {
    echo "/* theme.php: theme not found - expected themes/" . $themeSlug . ".json */";
    exit;
}

$themeData = json_decode(file_get_contents($themePath), true);

if (!is_array($themeData)) {
    echo "/* theme.php: could not decode themes/" . $themeSlug . ".json */";
    exit;
}

// Mirrors erLhAbstractModelWidgetTheme: every JSON key is a flat property and the two
// *_configuration keys hold JSON STRINGS (hence the second decode).
$theme = (object)$themeData;
$theme->bot_configuration_array = isset($theme->bot_configuration) ? json_decode($theme->bot_configuration, true) : array();

if (!is_array($theme->bot_configuration_array)) {
    $theme->bot_configuration_array = array();
}

// custom_widget_css is the free-form theme CSS. The JSON is its home (that is what gets
// imported into LHC); `css/core-override.css` is only a fallback so an edit that has not
// been re-embedded yet still previews.
if (!isset($theme->custom_widget_css) || trim((string)$theme->custom_widget_css) === '') {
    $themeCssFallback = __DIR__ . '/css/core-override.css';
    $theme->custom_widget_css = is_file($themeCssFallback) ? file_get_contents($themeCssFallback) : '';
}

/** Print a value straight into a declaration (mirrors the template's htmlspecialchars). */
function t($value)
{
    return htmlspecialchars((string)$value, ENT_QUOTES);
}

/** Read a bot_configuration key, treating '' as "not set" (the template's isset() && != ''). */
function cfg($theme, $key)
{
    return (isset($theme->bot_configuration_array[$key]) && $theme->bot_configuration_array[$key] !== '')
        ? $theme->bot_configuration_array[$key]
        : null;
}

// @import rules are hoisted out of custom_widget_css and printed before everything else,
// exactly as page_head_css_theme.tpl.php does (a CSS @import must precede all rules).
$themeImports = array();
preg_match_all("/@import url\((.*)\);/", (string)$theme->custom_widget_css, $themeImports);
foreach ($themeImports[0] as $themeImportRule) {
    echo $themeImportRule . "\n";
    $theme->custom_widget_css = str_replace($themeImportRule, '', $theme->custom_widget_css);
}
?>
        <?php if (!empty($theme->buble_visitor_background)) : ?>
        #messagesBlock div.message-row.response div.msg-body:not(.msg-body-media):not(.msg-body-widget):not(.msg-body-emoji)
        {background-color:#<?php echo t($theme->buble_visitor_background)?>!important;}
        <?php endif;?>

        <?php if (!empty($theme->buble_visitor_text_color)) : ?>
        #messagesBlock div.message-row.response div.msg-body,
        #messagesBlock div.message-row.response div.msg-body a.link
        {color:#<?php echo t($theme->buble_visitor_text_color)?>!important;}
        <?php endif;?>

        <?php if (!empty($theme->buble_visitor_title_color)) : ?>
        #messagesBlock div.response .vis-tit{color:#<?php echo t($theme->buble_visitor_title_color)?>!important;}
        <?php endif;?>

        <?php if (!empty($theme->buble_operator_background)) : ?>
        #messagesBlock div.message-admin div.msg-body:not(.msg-body-media):not(.msg-body-widget):not(.msg-body-emoji){background-color:#<?php echo t($theme->buble_operator_background)?>!important;}
        <?php endif;?>

        <?php if (!empty($theme->buble_operator_text_color)) : ?>
        #messagesBlock div.message-admin div.msg-body,
        #messagesBlock div.message-admin div.msg-body a.link{color:#<?php echo t($theme->buble_operator_text_color)?>!important;}
        <?php endif;?>

        <?php if (!empty($theme->buble_operator_title_color)) : ?>
        #messagesBlock div.message-admin .op-tit{color:#<?php echo t($theme->buble_operator_title_color)?>!important;}
        <?php endif;?>

        <?php if (cfg($theme, 'msg_background') !== null) : ?>
        .start-chat,#messagesBlock{
            background-color: #<?php echo t(cfg($theme, 'msg_background'));?>!important;
        }
        <?php endif;?>

        <?php if (cfg($theme, 'delivered_msg_color') !== null) : ?>
        .text-primary.msg-del-st-3 {
            color: #<?php echo t(cfg($theme, 'delivered_msg_color'));?>!important;
        }
        <?php endif;?>

        <?php if (cfg($theme, 'operator_txt_color') !== null) : ?>
        .status-text, .operator-info, .offline-intro{
            color: #<?php echo t(cfg($theme, 'operator_txt_color'));?>!important;
        }
        <?php endif;?>

        <?php if (cfg($theme, 'label_txt_color') !== null) : ?>
        .control-label{
            color: #<?php echo t(cfg($theme, 'label_txt_color'));?>!important;
        }
        <?php endif;?>

        <?php if (cfg($theme, 'input_bg_color') !== null) : ?>
        .offline-form .form-select,
        .start-chat .form-select,
        .start-chat .form-control,
        .offline-form .form-control
        {
            background-color: #<?php echo t(cfg($theme, 'input_bg_color'));?>!important;
        }
        <?php endif;?>

        <?php if (cfg($theme, 'input_brd_color') !== null) : ?>
        .offline-form .form-select,
        .start-chat .form-select,
        .start-chat .form-control,
        .offline-form .form-control{
            border-color: #<?php echo t(cfg($theme, 'input_brd_color'));?>!important;
        }
        <?php endif;?>

        <?php if (cfg($theme, 'input_brd_active') !== null) : ?>
        .start-chat .form-select:active,
        .start-chat .form-select:focus,
        .start-chat .form-control:active,
        .start-chat .form-control:focus,
        .offline-form .form-select:active,
        .offline-form .form-select:focus,
        .offline-form .form-control:active,
        .offline-form .form-control:focus
        {
            border-color: #<?php echo t(cfg($theme, 'input_brd_active'));?>!important;
        }
        <?php endif;?>

        <?php if (cfg($theme, 'input_shd_color') !== null) : ?>
        <?php
        $inputShdColor = ltrim((string)cfg($theme, 'input_shd_color'), '#');
        $inputShdColor = strlen($inputShdColor) === 3
            ? $inputShdColor[0] . $inputShdColor[0] . $inputShdColor[1] . $inputShdColor[1] . $inputShdColor[2] . $inputShdColor[2]
            : $inputShdColor;
        ?>
        .start-chat .form-select:focus,
        .start-chat .form-control:focus,
        .offline-form .form-select:focus,
        .offline-form .form-control:focus
        {
            box-shadow: 0 0 0 .25rem #<?php echo t($inputShdColor); ?>40!important;
        }
        <?php endif;?>

        <?php if (cfg($theme, 'send_icons_clr_hover') !== null) : ?>
        a.direct-action-icon i.direct-icon:hover,
        #ChatSendButtonContainer .text-muted:hover,
        #chat-dropdown-options-wrapper #chat-dropdown-options:hover{
            color: #<?php echo t(cfg($theme, 'send_icons_clr_hover'));?>!important;
        }
        <?php endif;?>

        <?php if (cfg($theme, 'send_icons_clr') !== null) : ?>
        a.direct-action-icon i.direct-icon,
        #ChatSendButtonContainer .text-muted,
        #chat-dropdown-options-wrapper #chat-dropdown-options{
            color: #<?php echo t(cfg($theme, 'send_icons_clr'));?>!important;
        }
        <?php endif;?>

        <?php if (cfg($theme, 'input_txt_color') !== null) : ?>
        .start-chat .form-select,
        .start-chat .form-control,
        .offline-form .form-select,
        .offline-form .form-control,
        #CSChatMessage{
            color:#<?php echo t(cfg($theme, 'input_txt_color'));?>!important;
        }
        <?php endif;?>

        <?php if (cfg($theme, 'input_plc_color') !== null) : ?>
        .start-chat .form-control::placeholder,
        .offline-form .form-control::placeholder,
        #CSChatMessage::placeholder{
            color: #<?php echo t(cfg($theme, 'input_plc_color'));?>!important;
        }
        <?php endif;?>

        <?php if (cfg($theme, 'op_background') !== null) : ?>
        #chat-status-container{
            background-color: #<?php echo t(cfg($theme, 'op_background'));?>!important;
        }
        <?php endif;?>

        <?php if (cfg($theme, 'send_area_background') !== null) : ?>
        .widget-body{
            background-color: #<?php echo t(cfg($theme, 'send_area_background'));?>!important;
        }
        <?php endif;?>

        .btn-bot,.btn-bot:hover,.btn-bot:focus,.btn-bot:active{
            <?php if (cfg($theme, 'bot_button_border') !== null) : ?>
            border-color: #<?php echo t(cfg($theme, 'bot_button_border'));?>!important;
            <?php endif; ?>
            <?php if (cfg($theme, 'bot_button_text_color') !== null) : ?>
            color: #<?php echo t(cfg($theme, 'bot_button_text_color'));?>!important;
            <?php endif; ?>
            <?php if (cfg($theme, 'bot_button_background') !== null) : ?>
            background-color: #<?php echo t(cfg($theme, 'bot_button_background'));?>!important;
            <?php endif; ?>
            <?php if (cfg($theme, 'bot_button_border_radius') !== null) : ?>
            border-radius: <?php echo t(cfg($theme, 'bot_button_border_radius'));?>px!important;
            <?php endif; ?>
            <?php if (cfg($theme, 'bot_button_padding') !== null && cfg($theme, 'bot_button_padding_left_right') !== null) : ?>
            padding: <?php echo t(cfg($theme, 'bot_button_padding'));?>px <?php echo t(cfg($theme, 'bot_button_padding_left_right'));?>px!important;
            <?php endif; ?>
            <?php if (cfg($theme, 'bot_button_fs') !== null) : ?>
            font-size: <?php echo t(cfg($theme, 'bot_button_fs'));?>px!important;
            <?php endif; ?>
        }

        <?php if (cfg($theme, 'bot_button_background_hover') !== null) : ?>
        .btn-bot:hover,.btn-bot:active,.btn-bot:focus{
            background-color: #<?php echo t(cfg($theme, 'bot_button_background_hover'));?>!important;
        }
        <?php endif; ?>

<?php
// ---------------------------------------------------------------------------
// Message-style block. This is the template's `$react` branch - i.e. the rules that
// css/core-bubble.css used to freeze - now driven by the theme attributes:
//   bubble_style_profile  selects bubble markup (absolute avatar, indented bubble)
//   hide_visitor_profile  hides the visitor avatar/title entirely
// ---------------------------------------------------------------------------
?>

<?php if (cfg($theme, 'hide_visitor_profile') == 1) : ?>
.vis-tit {
    display: none!important;
}
<?php endif; ?>

<?php if (cfg($theme, 'bubble_style_profile') == 1) : ?>
.user-nick-title,
.op-nick-title
{
    display: none!important;
}
.op-tit {
    float:left!important;
    margin-top: 2px!important;
}

.vis-tit {
    float:right;
    margin-left: 3px!important;
    margin-top: 3px!important;
    position: absolute!important;
    right: 0;
}

.op-tit {
    position: absolute!important;
}

.op-tit i.material-icons,
.vis-tit i.material-icons{
    font-size: 24px!important;
}

div.message-admin div.msg-date,
div.message-admin div.msg-body,
div.message-admin div.meta-message{
    margin-left:29px!important;
}

<?php if (cfg($theme, 'hide_visitor_profile') != 1) : ?>
div.response div.msg-body,
div.message-row.response div.msg-date,
div.response div.meta-message{
    margin-right:29px!important;
}
.message-row.response .reactions-holder {
    right:29px!important;
}
<?php endif; ?>

@media (min-width: 1024px) {
    .profile-msg-pic {
        width: 33px!important;
    }

    div.message-admin div.msg-body,
    div.message-admin div.meta-message{
        margin-left:42px!important;
    }

    <?php if (cfg($theme, 'hide_visitor_profile') != 1) : ?>
    div.response div.msg-body,
    div.response div.meta-message{
        margin-right:42px!important;
    }
    .op-tit i.material-icons,
    .vis-tit i.material-icons{
        font-size: 34px!important;
    }
    <?php endif; ?>
}
<?php endif; ?>

<?php
// job_new_row - no longer a markup switch: the widget keeps the `Name,` comma in the markup
// (wrapped in `.op-job-title-sep`) and the row is produced by CSS, exactly as
// operator_profile_name_support.tpl.php + page_head_css_theme.tpl.php do it.
?>
<?php if (cfg($theme, 'job_new_row') == 1) : ?>
.operator-profile-content .op-job-title{
    display: block!important;
}
.operator-profile-content .op-job-title-sep{
    display: none!important;
}
<?php endif; ?>

<?php
// `.header-chat` is emitted with the theme's header background. Unlike the template this
// is guarded on a non-empty value: the template prints a bare `#` when header_background
// is empty, which is an invalid declaration rather than a useful one.
?>
<?php if (!empty($theme->header_background)) : ?>
.header-chat {
    background-color: #<?php echo t($theme->header_background);?>!important;
<?php if (isset($theme->header_height) && $theme->header_height > 0) : ?>
    height: <?php echo t($theme->header_height)?>px!important;
<?php endif; ?>
<?php if (isset($theme->header_padding) && $theme->header_padding > 0) : ?>
    padding: <?php echo t($theme->header_padding)?>px!important;
<?php endif; ?>
}
<?php endif; ?>

<?php if (!empty($theme->widget_border_color)) : ?>
.desktop-header,.desktop-body{
    border-color:#<?php echo t($theme->widget_border_color)?>!important;
    <?php if (isset($theme->widget_border_width) && is_numeric($theme->widget_border_width)) : ?>
    border-width: <?php echo t($theme->widget_border_width)?>px!important;
    <?php endif; ?>
}
<?php endif; ?>

<?php if (isset($theme->widget_position) && ($theme->widget_position == 'full_height_right' || $theme->widget_position == 'full_height_left')) : ?>
.desktop-header,.desktop-body{
    border-radius: 0!important;
}
<?php endif; ?>

<?php if (cfg($theme, 'header_icon_color') !== null) : ?>
.header-link,
.header-link:hover,
.header-link .material-icons{
    color: #<?php echo t(cfg($theme, 'header_icon_color'))?>!important;
}
<?php endif; ?>

<?php if (cfg($theme, 'bg_scroll_bottom') !== null || cfg($theme, 'text_scroll_bottom') !== null) : ?>
.btn-bottom-scroll > button{
    <?php if (cfg($theme, 'text_scroll_bottom') !== null) : ?>
    color: #<?php echo t(cfg($theme, 'text_scroll_bottom'))?>!important;
    <?php endif; ?>
    <?php if (cfg($theme, 'bg_scroll_bottom') !== null) : ?>
    background-color: #<?php echo t(cfg($theme, 'bg_scroll_bottom'))?>!important;
    border-color: #<?php echo t(cfg($theme, 'bg_scroll_bottom'))?>!important;
    <?php endif; ?>
}
<?php endif; ?>

<?php if (cfg($theme, 'bg_new_msg') !== null) : ?>
    #scroll-to-message {
        border-bottom-color: #<?php echo t(cfg($theme, 'bg_new_msg'))?>!important;
    }
    .new-msg-holder > .new-msg {
        background-color: #<?php echo t(cfg($theme, 'bg_new_msg'))?>!important;
    }
<?php endif; ?>

<?php if (cfg($theme, 'new_msg_text_color') !== null) : ?>
.new-msg-holder > .new-msg {
    color: #<?php echo t(cfg($theme, 'new_msg_text_color'))?>!important;
}
<?php endif; ?>

<?php if (cfg($theme, 'buble_reaction_background_vi') !== null) : ?>
div.message-row.response .reactions-selected-info span{
    background-color: #<?php echo t(cfg($theme, 'buble_reaction_background_vi'))?>!important;
}
<?php endif; ?>

<?php if (cfg($theme, 'buble_reaction_background_op') !== null) : ?>
div.message-admin .reactions-toolbar,
div.message-admin .reactions-selected-info span{
    background-color: #<?php echo t(cfg($theme, 'buble_reaction_background_op'))?>!important;
}
<?php endif; ?>

<?php if (cfg($theme, 'buble_reaction_color_vi') !== null) : ?>
#messagesBlock div.message-row.response .reaction-item,
#messagesBlock div.message-row.response .reaction-item:hover{
    color: #<?php echo t(cfg($theme, 'buble_reaction_color_vi'))?>!important;
}
<?php endif;?>

<?php if (cfg($theme, 'buble_reaction_color_op') !== null) : ?>
#messagesBlock div.message-admin .reaction-item-admin,
#messagesBlock div.message-admin .reaction-item-admin:hover,
#messagesBlock div.message-admin .reaction-item,
#messagesBlock div.message-admin .reaction-item:hover{
    color: #<?php echo t(cfg($theme, 'buble_reaction_color_op'))?>!important;
}
<?php endif;?>

<?php echo $theme->custom_widget_css?>

<?php if ($popupMode === true && !empty($theme->custom_popup_css)) : ?>
<?php echo $theme->custom_popup_css?>
<?php endif; ?>