diff --git a/src/css/mt-cart.css b/src/css/mt-cart.css index 017dcc91..c2b2cb28 100644 --- a/src/css/mt-cart.css +++ b/src/css/mt-cart.css @@ -24,8 +24,8 @@ } .mt-message { - background: #f0f0fa; - color: #333; + background: var(--mt-message-bg); + color: var(--mt-text-color); padding: .75em 1em !important; margin-bottom: .5em; font-size: 1.1em; @@ -33,11 +33,11 @@ } .mt-message.success { - border-color: green; + border-color: var(--mt-success-border); } .mt-message.error { - border-color: red; + border-color: var(--mt-error-border); } .mt-payment-button { @@ -46,6 +46,10 @@ .ticket-orders fieldset { margin: 1em 0; + border-radius: 8px; + background: var(--mt-order-background); + box-shadow: 4px 4px 4px var(--mt-order-shadow); + border-width: 1px; } .tickets-remaining.hiding, .hiding .tickets-remaining { @@ -189,11 +193,11 @@ button[name="mt_add_to_cart"] img { .mt-payment-form legend { font-weight: 700; - padding: .25em 0; + padding: .5rem 0; } .gateway-selector { - padding: 1em 0; + padding: 1rem 0; } .gateway-selector ul { @@ -202,8 +206,8 @@ button[name="mt_add_to_cart"] img { } .gateway-selector li { - margin: 0 .25em 0 0 !important; - padding: .25em !important; + margin: 0 .25rem 0 0 !important; + padding: .25rem !important; display: inline-block !important; list-style-type: none !important; background: rgba(0, 0, 0, .075); @@ -240,7 +244,7 @@ button[name="mt_add_to_cart"] img { .mt_cart .wp-post-image { float: left; - margin-right: .5em; + margin-right: .5rem; } .mt-update-column button { @@ -249,7 +253,7 @@ button[name="mt_add_to_cart"] img { } .mt_purchase_path { - margin-bottom: 1em; + margin-bottom: 1rem; } .mt_purchase_path { @@ -259,8 +263,8 @@ button[name="mt_add_to_cart"] img { } .mt_purchase_path span { - padding: .5em; - background: rgba( 255,255,255,.7 ); + padding: .5rem; + background: rgba( 255, 255, 255, .7 ); border-bottom: 4px solid transparent; } @@ -318,7 +322,7 @@ button[name="mt_add_to_cart"] img { .mt_email_check .ok { color: #f2f2f2; - background: #217e21; + background: var(--mt-success-border); } .mt-shipping-address label { @@ -328,7 +332,7 @@ button[name="mt_add_to_cart"] img { .mt_email_check .notemail, .mt_email_check .mismatch { color: #f2f2f2; - background: #712121; + background: var(--mt-error-border); } .mt-update-buttons { @@ -376,8 +380,8 @@ input[name="mt_submit"]:disabled { position:absolute; left: 0; width: 100%; - background: #fefefe; - color: #333; + background: var(--mt-order-background); + color: var(--mt-text-color); padding: 2rem; box-shadow: 3px 3px 3px #ccc; } @@ -419,7 +423,7 @@ only screen and (max-width: 760px), .mt_cart td, .mt_cart th { border: none; - border-bottom: 1px solid #eee; + border-bottom: 1px solid var(--mt-order-shadow); position: relative; padding-left: 30% !important; } diff --git a/src/css/my-tickets.css b/src/css/my-tickets.css index b6f8f9f4..7d35f46b 100644 --- a/src/css/my-tickets.css +++ b/src/css/my-tickets.css @@ -6,6 +6,11 @@ overflow: visible !important } +.mt-new-variable { + display: flex; + gap: 12px; +} + .admin-tickets li .controls { display: grid; grid-template-columns: auto auto auto; diff --git a/src/mt-settings.php b/src/mt-settings.php index b86c0fc0..b8fb2368 100644 --- a/src/mt-settings.php +++ b/src/mt-settings.php @@ -32,6 +32,32 @@ function mt_update_settings( $post ) { $mt_post_types = ( isset( $post['mt_post_types'] ) ) ? $post['mt_post_types'] : array(); array_push( $mt_post_types, 'mc-events' ); + $styles = mt_get_settings( 'style_vars' ); + if ( ! empty( $_POST['style_vars'] ) ) { + if ( isset( $_POST['new_style_var'] ) ) { + $key = sanitize_text_field( $_POST['new_style_var']['key'] ); + $val = sanitize_text_field( $_POST['new_style_var']['val'] ); + if ( $key && $val ) { + if ( 0 !== strpos( $key, '--' ) ) { + $key = '--' . $key; + } + $styles[ $key ] = $val; + } + } + foreach ( $_POST['style_vars'] as $key => $value ) { + if ( '' !== trim( $value ) ) { + $styles[ $key ] = sanitize_text_field( $value ); + } + } + if ( isset( $_POST['delete_var'] ) ) { + $delete = map_deep( $_POST['delete_var'], 'sanitize_text_field' ); + foreach ( $delete as $del ) { + unset( $styles[ $del ] ); + } + } + mc_update_option( 'style_vars', $styles ); + } + $messages = $_POST['mt_messages']; $settings = apply_filters( 'mt_update_settings', @@ -41,6 +67,7 @@ function mt_update_settings( $post ) { 'mt_to' => $mt_to, 'mt_from' => $mt_from, 'mt_html_email' => $mt_html_email, + 'style_vars' => $styles, ), $_POST ); @@ -314,7 +341,37 @@ function mt_settings() { ?>

- +
+ + $style ) { + $var_id = 'mt' . sanitize_key( $var ); + if ( ! in_array( $var, array_keys( mt_style_variables() ), true ) ) { + // Translators: CSS variable name. + $delete = " '; + } else { + $delete = ''; + } + $output .= "

  • $delete
    • "; + } + if ( $output ) { + echo wp_kses( "", mt_kses_elements() ); + } + ?> +
    +

    +
    + +

    +

    +
    + +

    +
    +

    diff --git a/src/my-tickets.php b/src/my-tickets.php index bc0be904..e10ff82b 100644 --- a/src/my-tickets.php +++ b/src/my-tickets.php @@ -421,6 +421,8 @@ function mt_public_enqueue_scripts() { wp_enqueue_script( 'mt.payment', plugins_url( 'js/jquery.payment.js', __FILE__ ), array( 'jquery' ), $version ); wp_enqueue_script( 'mt.public', plugins_url( 'js/jquery.public.js', __FILE__ ), array( 'jquery' ), $version ); wp_enqueue_style( 'mt-styles', $ticket_styles, array( 'dashicons' ), $version ); + wp_add_inline_style( 'mt-styles', mt_generate_css() ); + wp_localize_script( 'mt.public', 'mt_ajax', @@ -689,6 +691,7 @@ function mt_default_settings() { 'mt_expiration' => '', 'mt_display_remaining' => 'proportion', 'mt_show_closed' => 'false', + 'style_vars' => mt_style_variables(), ); return $defaults; @@ -1286,3 +1289,51 @@ function mt_kses_elements() { return $elements; } + +/** + * Ensure that expected style variables are always present. + * + * @param array $styles Array of style variables saved in settings. + * + * @return array + */ +function mt_style_variables( $styles = array() ) { + $core_styles = array( + '--mt-order-background' => '#f6f7f7', + '--mt-order-shadow' => '#dcdcde', + '--mt-error-color' => '#b32d2e', + '--mt-success-color' => '#007017', + '--mt-message-bg' => '#f6f7f7', + '--mt-text-color' => '#2c3338', + ); + foreach ( $core_styles as $key => $value ) { + if ( ! isset( $styles[ $key ] ) ) { + $styles[ $key ] = $value; + } + } + + return $styles; +} + +/** + * Generate ticketing CSS output. + */ +function mt_generate_css() { + $styles = (array) mt_get_settings( 'style_vars' ); + $styles = mt_style_variables( $styles ); + $style_vars = ''; + foreach ( $styles as $key => $var ) { + if ( $var ) { + $style_vars .= sanitize_key( $key ) . ': ' . $var . '; '; + } + } + if ( '' !== $style_vars ) { + $style_vars = '.my-tickets {' . $style_vars . '}'; + } + + $css = " +/* Styles by My Tickets - Joseph C Dolson https://www.joedolson.com/ */ +$style_vars"; + + return $css; +}