@model IDictionary<string, object>
@using SmartStore.Web.Framework.Theming;
@using SmartStore.Web.Framework.UI;
@{
Layout = null;
}
@(Html.SmartStore().TabStrip().Name("theme-flex-edit").Style(TabsStyle.Material).HtmlAttributes(new { @class = "theme-edit" }).Items(x =>
{
var tabGeneral = x.Add().Text(T("Common.General").Text).Content(@TabGeneral()).Selected(true);
var tabFonts = x.Add().Text(T("Admin.Themes.Fonts").Text).Content(@TabFonts());
var tabLayout = x.Add().Text(T("Admin.Themes.Sections").Text).Content(@TabLayout());
var tabComponents = x.Add().Text(T("Admin.Themes.Components").Text).Content(@TabComponents());
var tabMisc = x.Add().Text(T("Admin.Themes.Misc").Text).Content(@TabMisc());
}))
@helper TabGeneral()
{
<div class="adminContent">
@ThemeVarEditor("gray-100", "Grayscale")
@ThemeVarEditor("gray-200")
@ThemeVarEditor("gray-300")
@ThemeVarEditor("gray-400")
@ThemeVarEditor("gray-500")
@ThemeVarEditor("gray-600")
@ThemeVarEditor("gray-700")
@ThemeVarEditor("gray-800")
@ThemeVarEditor("gray-900")
@ThemeVarEditor("red", "Colors")
@ThemeVarEditor("orange")
@ThemeVarEditor("yellow")
@ThemeVarEditor("green")
@ThemeVarEditor("blue")
@ThemeVarEditor("bluegrey")
@ThemeVarEditor("indigo")
@ThemeVarEditor("teal")
@ThemeVarEditor("cyan")
@ThemeVarEditor("pink")
@ThemeVarEditor("purple")
@ThemeVarEditor("primary", "Brand Colors")
@ThemeVarEditor("secondary")
@ThemeVarEditor("warning")
@ThemeVarEditor("danger")
@ThemeVarEditor("info")
@ThemeVarEditor("success")
@ThemeVarEditor("light")
@ThemeVarEditor("dark")
@ThemeVarEditor("boxed", "Layout", T("Admin.ThemeVar.Boxed"))
@ThemeVarEditor("body-bg", "Site Colors")
@ThemeVarEditor("site-bg")
@ThemeVarEditor("body-color")
@ThemeVarEditor("yiq-text-dark")
@ThemeVarEditor("yiq-text-light")
@ThemeVarEditor("text-muted")
@ThemeVarEditor("link-color")
@ThemeVarEditor("btn-secondary-bg", "")
@ThemeVarEditor("btn-secondary-border")
</div>
}
@helper TabFonts()
{
<div class="adminContent">
@ThemeVarEditor("font-family-sans-serif", "Typo")
@ThemeVarEditor("font-family-monospace")
@ThemeVarEditor("font-size-base")
@ThemeVarEditor("font-size-lg")
@ThemeVarEditor("font-size-sm")
@ThemeVarEditor("font-size-xs")
@ThemeVarEditor("font-weight-light")
@ThemeVarEditor("font-weight-normal")
@ThemeVarEditor("font-weight-medium")
@ThemeVarEditor("font-weight-bold")
@ThemeVarEditor("headings-font-family", "Headings")
@ThemeVarEditor("headings-font-weight")
@ThemeVarEditor("headings-line-height")
@ThemeVarEditor("headings-color")
@ThemeVarEditor("lead-font-weight")
@ThemeVarEditor("h1-font-size", "Heading Sizes")
@ThemeVarEditor("h2-font-size")
@ThemeVarEditor("h3-font-size")
@ThemeVarEditor("h4-font-size")
@ThemeVarEditor("h5-font-size")
@ThemeVarEditor("h6-font-size")
<div class="adminRow">
<div class="admin-config-group">
<div class="title">Google Fonts</div>
</div>
</div>
<div class="adminRow">
<div class="alert alert-info w-100">
@T("Admin.Theme.GoogleFonts.Hint")
</div>
</div>
@ThemeVarEditor("google-font-1")
@ThemeVarEditor("google-font-2")
@ThemeVarEditor("google-font-3")
</div>
}
@helper TabLayout()
{
<div class="adminContent">
@ThemeVarEditor("header-bg", "Header")
@ThemeVarEditor("shopbar-label")
@ThemeVarEditor("inverse-menubar", "")
@ThemeVarEditor("menubar-bg")
@ThemeVarEditor("menubar-color")
@ThemeVarEditor("menubar-inverse-color")
@ThemeVarEditor("inverse-shopbar", "")
@ThemeVarEditor("shopbar-bg")
@ThemeVarEditor("shopbar-color")
@ThemeVarEditor("shopbar-inverse-color")
@ThemeVarEditor("inverse-navbar", "")
@ThemeVarEditor("megamenu-bg")
@ThemeVarEditor("megamenu-color")
@ThemeVarEditor("megamenu-inverse-color")
@ThemeVarEditor("megamenu-line-height")
@ThemeVarEditor("megamenu-dropdown-bg")
@ThemeVarEditor("megamenu-heading-color")
@ThemeVarEditor("megamenu-subitem-color")
@ThemeVarEditor("megamenu-text-color")
@ThemeVarEditor("megamenu-rotator-bg")
@ThemeVarEditor("searchbox-bg", "Searchbox")
@ThemeVarEditor("searchbox-focus-bg")
@ThemeVarEditor("searchbox-border-color")
@ThemeVarEditor("searchbox-border-active-color")
@ThemeVarEditor("search-button-style")
@ThemeVarEditor("search-button-flat")
@ThemeVarEditor("searchbox-hit-tag-color")
@ThemeVarEditor("inverse-footer", "Footer")
@ThemeVarEditor("footer-bg")
@ThemeVarEditor("footer-color")
@ThemeVarEditor("footer-color-muted")
@ThemeVarEditor("footer-inverse-color")
@ThemeVarEditor("footer-inverse-color-muted")
@ThemeVarEditor("footer-social-bg")
@ThemeVarEditor("footer-social-color")
</div>
}
@helper TabComponents()
{
<div class="adminContent">
@ThemeVarEditor("card-border-radius", "Cards")
@ThemeVarEditor("card-border-color")
@ThemeVarEditor("card-cap-bg")
@ThemeVarEditor("card-bg")
@ThemeVarEditor("dropdown-bg", "Dropdowns")
@ThemeVarEditor("dropdown-border-color")
@ThemeVarEditor("dropdown-border-radius")
@ThemeVarEditor("dropdown-divider-bg")
@ThemeVarEditor("dropdown-box-shadow")
@ThemeVarEditor("dropdown-link-color")
@ThemeVarEditor("dropdown-link-hover-color")
@ThemeVarEditor("dropdown-link-hover-bg")
@ThemeVarEditor("table-bg", "Tables")
@ThemeVarEditor("table-accent-bg")
@ThemeVarEditor("table-hover-bg")
@ThemeVarEditor("table-active-bg")
@ThemeVarEditor("table-border-color")
</div>
}
@helper TabMisc()
{
<div class="adminContent">
@ThemeVarEditor("nav-tabs-active-link-color")
@ThemeVarEditor("product-price-color")
@ThemeVarEditor("product-detail-addtocart-box-bg")
@ThemeVarEditor("login-box-bg")
@ThemeVarEditor("cart-footer-bg")
@ThemeVarEditor("costep-progress-color", null, T("Admin.ThemeVar.CostepPogressColor"))
@ThemeVarEditor("offcanvas-cart-footer")
@ThemeVarEditor("art-active-bg-color", null, T("Admin.ThemeVar.ArtActiveBgColor"))
@ThemeVarEditor("art-active-border-color", null, T("Admin.ThemeVar.ArtActiveBorderColor"))
</div>
}
@helper ThemeVarEditor(string varName, string groupName = null, string helpText = null)
{
if (groupName != null)
{
<div class="adminRow">
<div class="admin-config-group">
<div class="title">@groupName</div>
</div>
</div>
}
<div class="adminRow">
<div class="adminTitle">
@Html.ThemeVarLabel(ThemeManifest.Variables[varName], helpText)
</div>
<div class="adminData">
@Html.ThemeVarEditor(ThemeManifest.Variables[varName], Model[varName])
</div>
<div class="d-none d-xl-flex align-items-center">
@Html.ThemeVarChainInfo(ThemeManifest.Variables[varName])
</div>
</div>
}