<%@ Page Title="Custom Colors" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Custom Colors - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Custom Colors</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Custom Colors via CSS Variables</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Override the built-in CSS variables to match your brand palette.
            Change the primary color, background, text, border, and status colors.
        </p>

        <style>
            .brand-coral {
                --cu-primary: #f97316;
                --cu-primary-hover: #ea580c;
                --cu-primary-text: #fff;
                --cu-bg: #fff7ed;
                --cu-border-color: #fed7aa;
                --cu-progress-fill: #f97316;
                --cu-success: #16a34a;
                --cu-error: #dc2626;
            }
            .brand-teal {
                --cu-primary: #0d9488;
                --cu-primary-hover: #0f766e;
                --cu-primary-text: #fff;
                --cu-bg: #f0fdfa;
                --cu-border-color: #99f6e4;
                --cu-progress-fill: #0d9488;
                --cu-success: #16a34a;
                --cu-error: #dc2626;
            }
            .color-demo { margin-bottom: 1.5rem; }
            .color-demo h6 { margin-bottom: 0.5rem; font-weight: 600; }
        </style>

        <div class="color-demo brand-coral">
            <h6>Coral Theme</h6>
            <au:AjaxFileUpload ID="Uploader1" runat="server"
                ButtonText="Upload (Coral)"
                ShowProgress="true" />
        </div>

        <div class="color-demo brand-teal">
            <h6>Teal Theme</h6>
            <au:AjaxFileUpload ID="Uploader2" runat="server"
                ButtonText="Upload (Teal)"
                ShowProgress="true" />
        </div>

        <div class="code-panel">
            <pre><code>.brand-coral {
  --cu-primary: #f97316;
  --cu-primary-hover: #ea580c;
  --cu-bg: #fff7ed;
  --cu-border-color: #fed7aa;
  --cu-progress-fill: #f97316;
}

&lt;div class="brand-coral"&gt;
  &lt;au:AjaxFileUpload ID="Uploader1" runat="server"
      ButtonText="Upload (Coral)"
      ShowProgress="true" /&gt;
&lt;/div&gt;</code></pre>
        </div>
    </div>
</div>

</asp:Content>
