<vbox class="Form">
    <style>
        > .InputRow + .InputRow {
            margin-top: 1em;
        }
        > .Description {
            margin-bottom: 1.2em;
        }
        > .Description,
        > label {
            color: #666666;
        }
        > label {
            min-width: 6em;
        }
        .InputRow input[type="number"] {
            max-width: 4em;
            text-align: center;
        }
        @sizeInputContainer {
            align-items: center;
        }
        @sizeInputContainer > label {
            margin-right: 0.1em;
        }
        @sizeInputContainer > input + * {
            margin-left: 0.4em;
        }
        @pageSizeCombo {
            width: 17em;
        }
    </style>
    <div class="Description">
        Please enter the page properties:
    </div>
    <hbox class="InputRow">
        <label for="pageCombo">Child of:</label>
        <ui:ComboManager flex="1" anon-id="pageCombo"/>
    </hbox>
    <hbox class="InputRow">
        <label for="pageTitle">Page Title:</label>
        <input type="text" anon-id="pageTitle" flex="1"/>
    </hbox>
    <hbox class="InputRow">
        <label for="pageSizeCombo">Page Size:</label>
        <ui:ComboManager flex="1" anon-id="pageSizeCombo"/>
        <hbox anon-id="sizeInputContainer">
            <label for="widthInput">W:</label><input type="number" anon-id="widthInput" min="24" value="24"/>
            <label for="heightInput">H:</label><input type="number" anon-id="heightInput" min="24" value="24"/>
        </hbox>
    </hbox>
    <hbox class="InputRow">
        <label for="backgroundColorCombo">Background:</label>
        <ui:ComboManager flex="1" anon-id="backgroundCombo"/>
        <hbox>
            <button anon-id="colorButton" value="choose" ><i>color_lens</i></button>
            <ui:Popup anon-id="selectorContainer">
                <ui:ColorSelector anon-id="selector" />
            </ui:Popup>
        </hbox>
    </hbox>
</vbox>
