<%@ 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.3 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> <div class="demo-expect"><strong>What you should see:</strong> the control recoloured through CSS variables - this page uses a coral accent. Change a variable and every part follows.</div> <style>
 .brand-coral {
 --au-primary: #f97316;
 --au-primary-hover: #ea580c;
 --au-primary-light: #fff7ed;
 }
 .brand-coral .au-select-btn,
 .brand-coral .au-upload-btn {
 background: #f97316 !important;
 }
 .brand-coral .au-select-btn:hover,
 .brand-coral .au-upload-btn:hover {
 background: #ea580c !important;
 }
 .brand-teal {
 --au-primary: #0d9488;
 --au-primary-hover: #0f766e;
 --au-primary-light: #f0fdfa;
 }
 .brand-teal .au-select-btn,
 .brand-teal .au-upload-btn {
 background: #0d9488 !important;
 }
 .brand-teal .au-select-btn:hover,
 .brand-teal .au-upload-btn:hover {
 background: #0f766e !important;
 }
 .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 {
 --au-primary: #f97316;
 --au-primary-hover: #ea580c;
 --au-primary-light: #fff7ed;
}

&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>
