Viewing File: /usr/local/cpanel/whostmgr/docroot/templates/cpanel_customization/views/jupiter/colors.ptt

<div class="view-content colors-tab">
    <p class="description">
        [% locale.maketext('Select the color for the Main Menu in the Jupiter theme.') %]
    </p>

    <form id="form_customization_colors"
        name="customization"
        ng-submit="save(customization)">

        <div class="section well">
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <label id="lblPrimaryColor" for="primary_color">
                            [% locale.maketext('Main Menu Background Color') %]
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
                        <input id="primary_color"
                            name="primary_color"
                            class="form-control"
                            maxlength="7"
                            ng-pattern="hexColorRegex"
                            ng-model="model.colors.primary"
                            minicolors />
                        <span class="help-block">
                            [% locale.maketext('The input should be a valid hexadecimal color (including the pound sign).') %]
                            <p>
                                [% locale.maketext('Examples:') %]
                                <ul class="examples">
                                    <li><span style="background-color: {{ ::model.defaults.primary }}"></span> {{ ::model.defaults.primary }} - [% locale.maketext('default') %]</span></li>
                                    <li><span style="background-color: #FF0000"></span> #FF0000 - [% locale.maketext('red') %]</li>
                                    <li><span style="background-color: #00FF00"></span> #00FF00 - [% locale.maketext('green') %]</li>
                                    <li><span style="background-color: #0000FF"></span> #0000FF - [% locale.maketext('blue') %]</li>
                                    <li><span style="background-color: #FFFFFF"></span> #FFFFFF - [% locale.maketext('white') %]</li>
                                    <li><span style="background-color: #000000"></span> #000000 - [% locale.maketext('black') %]</li>
                                </ul>
                            </p>
                        </span>
                    </div>
                    <div id="primary_color_errors"
                        class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <ul class="validation-container"
                            ng-show="!customization.primary_color.$pristine && customization.primary_color.$invalid">
                            <li class="validation validation-error"
                                ng-show="customization.primary_color.$error.pattern">
                                <span class="glyphicon glyphicon-exclamation-sign"></span>
                                <span class="validation-message">
                                    [% locale.maketext('The input must be a valid hexadecimal color (including the pound sign). See the provided examples:') %]
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <button id="btn_save"
                    type="submit"
                    class="btn btn-primary"
                    ng-class="{'btn-loading': saving}"
                    ng-disabled="customization.$invalid || saving">
                    <span class="btn-label">[% locale.maketext('Update Colors') %]</span>
                    <span class="glyphicon glyphicon-refresh btn-loading-indicator"></span>
                </button>
                <button id="btn_reset"
                    class="btn btn-secondary"
                    ng-click="reset(customization)"
                    ng-class="{'btn-loading': restoring}"
                    ng-disabled="customization.$invalid || restoring">
                    <span class="btn-label">[% locale.maketext('Restore Defaults') %]</span>
                    <span class="glyphicon glyphicon-refresh btn-loading-indicator"></span>
                </button>
            </div>
        </div>
    </form>
</div>