LCE-Emerald-Launcher/UiDocs/Versions.xml

<ui xmlns="emerald" version="1">
  <import href="Common/Buttons.xml"/>
  <import href="Common/TitleImage.xml"/>
  <style>
    .options-bg {
      border-image: url(/images/options_background.png) 4 fill / 12px;
      border-width: 12px;
    }
    .version-recess {
      border-image: url(/images/versionrecess.png) 12 30 30 12 fill / 12px 30px 30px 12px;
      border-width: 12px;
    }
    .edition-row {
      padding: 0;
      gap: 12px;
      border-image: url(/images/Button_Background.png) 13 13 13 13 fill / 13px;
      border-width: 12px;
      color: #ffffff;
    }
    .edition-row:hover {
      border-image: url(/images/button_highlighted.png) 13 13 13 13 fill / 13px;
    }
    .selected {
      border-image: url(/images/button_highlighted.png) 13 13 13 13 fill / 13px;
      color: #ffff55;
    }
    .edition-logo {
      width: 48px;
      height: 48px;
    }
    .edition-name {
      font-size: 20px;
      text-shadow: #3f3f3f 1px 1px;
    }
    .badge-custom {
      font-size: 10px;
      padding: 1.5px;
      background: #777777;
      color: #222222;
    }
    .action-btn {
      width: 40px;
      height: 40px;
      background-image: /images/checkbox.png;
      padding: 4px;
    }
    .action-btn:hover {
      background-image: /images/checkbox_highlighted.png;
    }
    .action-icon {
      width: 32px;
      height: 32px;
    }
    .download-percent {
      font-size: 12px;
      color: #ffff55;
      text-shadow: #000000 1px 1px;
    }
    .play-btn {
      width: 96px;
      height: 40px;
      font-size: 16px;
      color: #ffffff;
      border-image: url(/images/Button_Background.png) 13 13 13 13 fill / 13px;
      border-width: 12px;
    }
    .play-btn:hover {
      border-image: url(/images/button_highlighted.png) 13 13 13 13 fill / 13px;
      color: #ffff55;
    }
    .stop-btn { color: #ff5555; }
    .game-error {
      color: #ff5555;
      font-size: 16px;
      text-shadow: #000000 1px 1px;
    }
    .backdrop { background: rgba(0, 0, 0, 0.8); }
    .modal-frame {
      border-image: url(/images/frame_background.png) 13 13 13 13 fill / 13px;
      border-width: 12px;
      font-size: 18px;
    }
    .modal-title { color: #ffff55; font-size: 22px; }
    .modal-btn {
      width: 140px;
      height: 40px;
      font-size: 18px;
      color: #ffffff;
      border-image: url(/images/Button_Background.png) 13 13 13 13 fill / 13px;
      border-width: 12px;
    }
    .modal-btn:hover {
      border-image: url(/images/button_highlighted.png) 13 13 13 13 fill / 13px;
      color: #ffff55;
    }
    .log-text {
      width: 760px;
      height: 360px;
      font-size: 14px;
      color: #e6f2e6;
    }

  </style>
  <template name="EditionRow">
    <row class="edition-row {{rowClass}}" onclick="versions.select:{{id}}" align="stretch">
      <image class="edition-logo" src="{{logo}}" fit="contain" align="center" />
      <column gap="4" align="center" flex="1">
        <row gap="8" align="start">
          <label class="edition-name" text="{{name}}" />
        </row>
      </column>
      <row gap="8" align="center">
        <label if="{{downloading}}" class="download-percent" text="{{downloadPercentText}}%" />
        <button if="{{showInstall}}" class="action-btn" onclick="versions.install:{{id}}">
          <image class="action-icon" src="/images/Download_Icon.png" />
        </button>
        <button if="{{downloading}}" class="action-btn" onclick="versions.cancel:{{id}}">
          <image class="action-icon" src="/images/Trash_Bin_Icon.png" />
        </button>
        <button class="action-btn" onclick="versions.settings:{{id}}">
          <image class="action-icon" src="/images/gear.png" />
        </button>
      </row>
    </row>
  </template>
  <view id="versions">
    <tooltip icon="A">Select</tooltip>
    <tooltip icon="B">Back</tooltip>
    <tooltip icon="X">Install</tooltip>
    <column width="1280px" height="720px" align="center" padding="40">
    <use template="TitleImage"/>
    <column height="40px"/>
      <column class="options-bg" padding="4" width="1024px" height="372px" align="center">
        <scroll class="version-recess" width="100%" height="100%" id="edition-list">
          <column gap="4" width="97.9%" foreach="{{editions}}" as="edition">
            <use template="EditionRow" id="{{edition.id}}" name="{{edition.name}}" logo="{{edition.logo}}" notInstalled="{{edition.notInstalled}}" showInstall="{{edition.showInstall}}" showPlay="{{edition.showPlay}}" showStop="{{edition.showStop}}" downloading="{{edition.downloading}}" downloadPercentText="{{edition.downloadPercentText}}" rowClass="{{edition.rowClass}}" />
          </column>
        </scroll>
      </column>
    </column>
  </view>
</ui>