<%@ 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>
