Files
desktop/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
2024-11-28 07:34:29 +05:30

343 lines
20 KiB
HTML

<script src="chrome://browser/content/zen-components/ZenThemeBuilder.mjs" defer=""/>
<script src="chrome://browser/content/preferences/zen-settings.js"/>
<html:template id="template-paneZenLooks">
<hbox id="zenLooksCategory"
class="subcategory"
hidden="true"
data-category="paneZenLooks">
<html:h1 data-l10n-id="pane-zen-looks-title"/>
</hbox>
<groupbox id="zenLooksAndFeelGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
<label><html:h2 data-l10n-id="zen-look-and-feel-colors-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-look-and-feel-colors-description" />
<hbox id="zenLooksAndFeelColorOptions" align="center">
</hbox>
<html:div id="zen-theme-builder-wrapper"></html:div>
<box class="indent">
<checkbox id="zenLooksAndFeelUseWorkspaceColors"
data-l10n-id="zen-look-and-feel-use-workspace-colors"
preference="zen.theme.color-prefs.use-workspace-colors"/>
</box>
<hbox id="zenLooksAndFeelGradientPickerParent"></hbox>
<html:div id="ZenDarkThemeStyles">
<html:h2 data-l10n-id="zen-dark-theme-styles-header"/>
<description class="description-deemphasized" data-l10n-id="zen-dark-theme-styles-description" />
<form xmlns="http://www.w3.org/1999/xhtml" autocomplete="off" id="zen-dark-theme-styles-form">
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:transparent"/>
</g>
<g id="Outline">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
</g>
<g id="Top-Bar" serif:id="Top Bar">
<g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
<g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
<path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-colors-primary);"/>
</g>
</g>
<g id="Side-Bar" serif:id="Side Bar">
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
</g>
</g>
</g>
</svg>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="amoled" data-l10n-id="preferences-web-appearance-choice-input-auto"
/><span data-l10n-id="zen-dark-theme-styles-amoled" />
</div>
</label>
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:color-mix(in srgb, var(--zen-colors-secondary) 17%, transparent 98%)"/>
</g>
<g id="Outline">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
</g>
</g>
<g id="Top-Bar" serif:id="Top Bar">
<g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
<path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-primary-color);"/>
</g>
</g>
<g id="Side-Bar" serif:id="Side Bar">
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
</g>
</g>
</svg>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="default" data-l10n-id="preferences-web-appearance-choice-input-light"
/><span data-l10n-id="zen-dark-theme-styles-default" />
</div>
</label>
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:var(--zen-colors-secondary);"/>
</g>
<g id="Outline">
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4px;"/>
</g>
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4.78px;"/>
</g>
</g>
<g id="Top-Bar" serif:id="Top Bar">
<g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
<path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-primary-color);"/>
</g>
</g>
<g id="Side-Bar" serif:id="Side Bar">
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
</g>
</g>
</g>
</svg>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="colorful" data-l10n-id="preferences-web-appearance-choice-input-dark"
/><span data-l10n-id="zen-dark-theme-styles-colorful" />
</div>
</label>
</form>
</html:div>
<html:div data-l10n-id="preferences-web-appearance-footer">
<html:a id="web-appearance-manage-themes-link" class="text-link" data-l10n-name="themes-link" href="about:addons" target="_blank" />
</html:div>
</groupbox>
<hbox id="zenThemeCategory"
class="subcategory"
hidden="true"
data-category="paneZenLooks">
<html:h1 data-l10n-id="pane-zen-theme-title"/>
</hbox>
<groupbox id="zenThemeGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
<label><html:h2 data-l10n-id="zen-look-and-feel-buttons-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-look-and-feel-buttons-description" />
<checkbox id="zenLooksAndFeelPilledButtons"
data-l10n-id="zen-look-and-feel-pilled-buttons"
preference="zen.theme.pill-button"/>
<label><html:h2 data-l10n-id="zen-look-and-feel-urlbar-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-look-and-feel-urlbar-description" />
<label><html:h2 data-l10n-id="zen-look-and-feel-compact-view-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-look-and-feel-compact-view-description" />
<checkbox id="zenLooksAndFeelShowCompactView"
data-l10n-id="zen-look-and-feel-compact-view-enabled"
preference="zen.view.compact"/>
<html:div id="ZenCompactModeStyle">
<form xmlns="http://www.w3.org/1999/xhtml" autocomplete="off" id="zen-compact-mode-styles-form">
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<div class="zen-compact-mode-styles-browser-wrapper" left="">
<div></div>
</div>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="left" data-l10n-id="preferences-web-appearance-choice-input-auto"
/><span data-l10n-id="zen-compact-mode-styles-left" />
</div>
</label>
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<div class="zen-compact-mode-styles-browser-wrapper" top="">
<div></div>
</div>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="top" data-l10n-id="preferences-web-appearance-choice-input-light"
/><span data-l10n-id="zen-compact-mode-styles-top" />
</div>
</label>
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<div class="zen-compact-mode-styles-browser-wrapper" both="">
<div></div>
</div>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="both" data-l10n-id="preferences-web-appearance-choice-input-dark"
/><span data-l10n-id="zen-compact-mode-styles-both" />
</div>
</label>
</form>
</html:div>
<vbox class="indent">
<checkbox id="zenLooksAndFeelEnableToolbarFlashPopup"
data-l10n-id="zen-look-and-feel-compact-toolbar-flash-popup"
preference="zen.view.compact.toolbar-flash-popup"/>
<checkbox id="zenLooksAndFeelEnableThemedToolbarCompactMode"
data-l10n-id="zen-look-and-feel-compact-toolbar-themed"
preference="zen.view.compact.color-toolbar"/>
<checkbox id="zenLooksAndFeelEnableThemedSidebarCompactMode"
data-l10n-id="zen-look-and-feel-compact-sidebar-themed"
preference="zen.view.compact.color-sidebar"/>
</vbox>
</groupbox>
<hbox id="zenSidePanelsCategory"
class="subcategory"
hidden="true"
data-category="paneZenLooks">
<html:h1 data-l10n-id="pane-zen-side-panels-title"/>
</hbox>
<groupbox id="zenSidePanelsGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
<label><html:h2 data-l10n-id="zen-side-panels-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-side-panels-description" />
<checkbox id="zenLooksAndFeelUseThemedToolbar"
data-l10n-id="zen-side-panels-enabled"
preference="zen.sidebar.enabled"/>
<hbox class="indent">
<checkbox id="zenLooksAndFeelSidebarCloseOnBlur"
data-l10n-id="zen-side-panels-close-on-blur"
preference="zen.sidebar.close-on-blur"/>
</hbox>
</groupbox>
<hbox id="zenGlanceCategory"
class="subcategory"
hidden="true"
data-category="paneZenLooks">
<html:h1 data-l10n-id="zen-glance-title"/>
</hbox>
<groupbox id="zenGlanceGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
<label><html:h2 data-l10n-id="zen-glance-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-glance-description" />
<checkbox id="zenLooksAndFeelGlanceEnabled"
data-l10n-id="zen-glance-enabled"
preference="zen.glance.enabled"/>
<hbox align="center">
<label id="zenGlanceTriggerLabel" data-l10n-id="zen-glance-trigger-label"/>
<menulist id="zenGlanceTrigger" preference="zen.glance.activation-method">
<menupopup>
<menuitem data-l10n-id="zen-glance-trigger-ctrl-click" value="ctrl"/>
<menuitem data-l10n-id="zen-glance-trigger-alt-click" value="alt"/>
<menuitem data-l10n-id="zen-glance-trigger-shift-click" value="shift"/>
#ifdef XP_MACOSX
<menuitem data-l10n-id="zen-glance-trigger-meta-click" value="meta"/>
#endif
<menuitem data-l10n-id="zen-glance-trigger-mantain-click" value="mantain" disabled="true"/>
</menupopup>
</menulist>
</hbox>
</groupbox>
<hbox id="zenSplitViewCategory"
class="subcategory"
hidden="true"
data-category="paneZenLooks">
<html:h1 data-l10n-id="zen-split-view-title"/>
</hbox>
<groupbox id="zenSplitViewGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
<label><html:h2 data-l10n-id="zen-split-view-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-split-view-description" />
<checkbox id="zenLooksAndFeelSplitViewChangeOnHover"
data-l10n-id="zen-split-view-change-on-hover"
preference="zen.splitView.change-on-hover"/>
</groupbox>
<hbox id="zenVerticalTabsCategory"
class="subcategory"
hidden="true"
data-category="paneZenLooks">
<html:h1 data-l10n-id="zen-vertical-tabs-title"/>
</hbox>
<groupbox id="zenVerticalTabsGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
<label><html:h2 data-l10n-id="zen-vertical-tabs-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-description" />
<checkbox id="zenLooksAndFeelNewtabUnderLastTab"
data-l10n-id="zen-vertical-tabs-newtab-on-tab-list"
preference="zen.tabs.show-newtab-vertical"/>
<vbox class="indent">
<checkbox id="zenLooksAndFeelShowTopNewtabBorder"
data-l10n-id="zen-vertical-tabs-newtab-top-button-border"
preference="zen.view.show-newtab-button-border-top"/>
<checkbox id="zenLooksAndFeelMoveNewtabToTop"
data-l10n-id="zen-vertical-tabs-newtab-top-button-up"
preference="zen.view.show-newtab-button-top"/>
<checkbox id="zenLooksAndFeelShowBottomBorder"
data-l10n-id="zen-vertical-tabs-show-bottom-border"
preference="zen.view.show-bottom-border"/>
</vbox>
</groupbox>
</html:template>