SCED/xml/Global/DownloadWindow.xml

<Defaults>
  <Button class="downloadTab"
    hoverClass="bGrey"
    pressClass="bWhite"
    onClick="onClick_tab"
    color="#888888"
    fontSize="24"
    font="font_teutonic-arkham"/>
  <Button class="bGrey"
    color="grey"/>
  <Button class="bWhite"
    color="white"/>
  <Button class="activeTab"
    color="#ffffff"/>
  <Button class="windowButton"
    hoverClass="bGrey"
    pressClass="bWhite"
    selectClass="bWhite"
    color="#888888"
    font="font_teutonic-arkham"/>
</Defaults>

<!-- window to select downloadable content -->
<VerticalLayout id="downloadWindow"
  color="black"
  active="false"
  height="800"
  width="900"
  outlineSize="2 2"
  outline="#303030">

  <!-- window header -->
  <Panel preferredHeight="60"
    padding="10 10 5 5"
    spacing="10"
    outlineSize="2 2"
    outline="#303030"
    color="black">
    <Text fontSize="32"
      font="font_teutonic-arkham"
      preferredWidth="600"
      alignment="MiddleLeft">Downloadable Content</Text>
    <Button id="downloadAll_button"
      class="windowButton"
      visibility="Black"
      onClick="onClick_downloadAll"
      height="30"
      preferredWidth="110"
      fontSize="20"
      tooltip="Very rough estimate: 400 MB"
      tooltipPosition="Above"
      tooltipBackgroundColor="rgba(0,0,0,1)">Download Everything</Button>
    <Button id="spawnPlaceholder_button"
      class="windowButton"
      visibility="Black"
      onClick="onClick_spawnPlaceholder"
      height="30"
      preferredWidth="110"
      fontSize="20">Spawn Placeholder</Button>
    <Panel preferredWidth="50">
      <Button rectAlignment="MiddleRight"
        width="50"
        color="clear"
        icon="close"
        tooltip="Close"
        tooltipPosition="Right"
        tooltipBackgroundColor="rgba(0,0,0,1)"
        onClick="onClick_toggleUi(downloadWindow)"/>
    </Panel>
  </Panel>

  <HorizontalLayout>
    <VerticalLayout preferredWidth="600">
      <!-- search bar and filter dropdown -->
      <HorizontalLayout preferredHeight="40"
        padding="5 5 10 0"
        spacing="5">
        <InputField id="searchField"
          preferredWidth="290"
          fontSize="22"
          placeholder="Search by name..."
          color="white"
          textColor="Black"
          textOffset="5 5 5 5"
          font="font_teutonic-arkham"
          onValueChanged="onSearchValueChanged"/>
        <Dropdown id="authorDropdown"
          preferredWidth="290"
          fontSize="22"
          font="font_teutonic-arkham"
          onValueChanged="onAuthorFilterChanged">
          <Option>All Authors</Option>
          <!-- this will be filled via scripting -->
        </Dropdown>
      </HorizontalLayout>

      <!-- tab selection -->
      <HorizontalLayout preferredHeight="60"
        padding="5"
        spacing="5">
        <Button class="downloadTab activeTab"
          id="tab1">Official Campaigns</Button>
        <Button class="downloadTab"
          id="tab2">Official Scenarios</Button>
        <Button class="downloadTab"
          id="tab3">Fan-Made Campaigns</Button>
        <Button class="downloadTab"
          id="tab4">Fan-Made Scenarios</Button>
        <Button class="downloadTab"
          id="tab5">Fan-Made Player Cards</Button>
      </HorizontalLayout>

      <!-- content list -->
      <VerticalScrollView color="transparent"
        minHeight="100"
        flexibleHeight="100"
        scrollSensitivity="27"
        scrollbarColors="grey|grey|#C8C8C8|rgba(0.78,0.78,0.78,0.5)"
        horizontalScrollbarVisibility="AutohideAndExpandViewport"
        raycastTarget="true">
        <VerticalLayout id="contentList"
          padding="10 25 0 0">
          <!-- this will be filled via scripting -->
        </VerticalLayout>
      </VerticalScrollView>
    </VerticalLayout>

    <!-- content preview window -->
    <VerticalLayout preferredWidth="300"
      padding="15 15 15 5">

      <!-- header -->
      <VerticalLayout preferredHeight="110">
        <Text id="previewTitle"
          fontSize="28"
          preferredHeight="70"
          font="font_teutonic-arkham">PreviewTitle</Text>
        <Text id="previewAuthor"
          fontSize="20"
          preferredHeight="40"
          font="font_teutonic-arkham">by PreviewAuthor</Text>
      </VerticalLayout>

      <!-- box art -->
      <Panel id="previewArtPanel"
        preferredHeight="390">
        <Mask id="previewArtMask">
          <!-- image will be set via scripting -->
          <Image id="previewArtImage" />
        </Mask>
      </Panel>

      <!-- description -->
      <Panel preferredHeight="160">
        <Text id="previewDescription"
          alignment="UpperLeft"
          resizeTextForBestFit="true"
          resizeTextMinSize="12"
          resizeTextMaxSize="18">PreviewDescription</Text>
      </Panel>

      <!-- download button / progress bar (visibility handled by lua code) -->
      <Panel preferredHeight="60">
        <!-- download button -->
        <Button id="download_button"
          class="windowButton"
          onClick="onClick_download"
          height="50"
          width="270"
          fontSize="28">Download</Button>
        <!-- download progress bar -->
        <ProgressBar id="download_progress"
          active="false"
          height="50"
          width="270"
          percentage="0"
          color="#111111"
          textColor="#aaaaaa"
          fillImageColor="#333333"/>
      </Panel>
    </VerticalLayout>
  </HorizontalLayout>
</VerticalLayout>