vdr-plugin-skindesigner/skins/metrixhd/xmlfiles/displaymenurecordings.xml

<menurecordings x="0" y="0" width="100%" height="100%" fadetime="0" orientation="{recmenuorientation}">

    <background orientation="horizontal">
        <!-- horizontal menu -->
        <area x="0" y="0" width="100%" height="10%" layer="1">
            <fill color="{menuback}" />
        </area>
        <area x="0" y="60%" width="100%" height="40%" layer="1">
            <fill color="{menuback}" />
        </area>
        <area x="5%" y="10%" width="90%" height="50%" layer="1">
            <fill color="{menuheader}" />
        </area>
    </background>

    <header orientation="horizontal">
        <!-- horizontal menu -->
        <area x="0" y="0" width="70%" height="10%" layer="2">
            <drawtext condition="not{hasicon}" x="10" width="{areawidth}-20" valign="center" font="{light}" fontsize="75%" color="{fontdefault}" text="{title}" />
            <drawimage condition="{hasicon}" name="menuicon" imagetype="menuicon" path="{icon}" x="10" valign="center" width="{areaheight}*8/10" height="80%"/>
            <drawtext condition="{hasicon}" x="{width(menuicon)}+20" valign="center" width="{areawidth}-{width(menuicon)}-30" font="{light}" fontsize="75%" color="{fontdefault}" text="{title}" />
        </area>
    </header>

    <datetime orientation="horizontal">
        <!-- horizontal menu -->
        <area x="75%" y="0" width="14%" height="10%" layer="2">
            <drawtext align="right" y="5%" font="{light}" fontsize="50%" color="{fontdefault}" text="{dayname}" />
            <drawtext align="right" y="45%" font="{light}" fontsize="50%" color="{fontdefault}" text="{day}. {monthname}" />
        </area>
        <area x="90%" y="0" width="10%" height="10%" layer="2">
            <drawtext align="center" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{time}" />
        </area>
    </datetime>

    <sortmode orientation="horizontal">
        <!-- horizontal menu -->
        <area x="60%" y="2%" width="6%" height="6%" layer="4">
            <drawimage condition="{sortnumber}" imagetype="icon" path="ico_sort_number" x="0" y="0" width="100%" height="100%"/>
            <drawimage condition="{sortname}" imagetype="icon" path="ico_sort_name" x="0" y="0" width="100%" height="100%"/>
            <drawimage condition="{sorttime}" imagetype="icon" path="ico_sort_time" x="0" y="0" width="100%" height="100%"/>
            <drawimage condition="{sortprovider}" imagetype="icon" path="ico_sort_provider" x="0" y="0" width="100%" height="100%"/>
        </area>
    </sortmode>

    <menuitems x="0" y="10%" orientation="vertical" width="100%" height="82%" align="center" numlistelements="14">
        <listelement>
            <!-- Background -->
            <area x="1%" width="58%" layer="2">
                <fill condition="not{current}" color="{clrTransparent}" />
                <fill condition="{folder}" color="{menuseparator}" />
                <fill condition="{current}" color="{menuactive}" />
            </area>
            <!-- recording folder -->
            <area condition="{folder}" x="1%" width="58%" layer="3">
                <drawimage condition="not{current}" name="foldericon" imagetype="icon" path="ico_recfolder" x="10" width="0.9*{areaheight} * 92 / 136" height="0.9*{areaheight}" valign="center" />
                <drawtext condition="not{current}" x="{width(foldericon)} + 20" valign="center" font="{light}" fontsize="90%" color="{fontdefault}" text="{name} ({numrecordingsfolder}, {newrecordingsfolder} new)" />
                <drawimage condition="{current}" name="foldericon" imagetype="icon" path="ico_recfolder_active" x="10" width="0.9*{areaheight} * 92 / 136" height="0.9*{areaheight}" valign="center" />
                <drawtext condition="{current}" x="{width(foldericon)} + 20" valign="center" font="{light}" fontsize="90%" color="{fontactive}" text="{name} ({numrecordingsfolder}, {newrecordingsfolder} new)" />
            </area>
            <!-- recording item -->
            <areacontainer condition="not{folder}++not{current}">
                <area x="1%" width="51%" layer="3">
                    <drawtext x="10" valign="center" font="{light}" fontsize="85%" color="{fontdefault}" text="{printf('%02d.%02d.%d', daynumeric, month, year)} {time}" />
                    <drawtext x="35%" valign="center" font="{light}" fontsize="85%" color="{fontdefault}" text="{name}" />
                </area>
                <area x="1%" width="58%" layer="4">
                    <drawimage condition="{new}" name="new" imagetype="icon" path="ico_new" x="{areawidth} - {areaheight}" width="0.9*{areaheight}" height="0.9*{areaheight}" valign="center" />
                    <drawimage condition="{new}++{cutted}" imagetype="icon" path="ico_cutted" x="{areawidth} - 2*{areaheight}" width="0.9*{areaheight}" height="0.9*{areaheight}" valign="center" />
                    <drawimage condition="not{new}++{cutted}" imagetype="icon" path="ico_cutted" x="{areawidth} - {areaheight}" width="0.9*{areaheight}" height="0.9*{areaheight}" valign="center" />
                </area>
            </areacontainer>

            <areacontainer condition="not{folder}++{current}">
                <areascroll scrollelement="menutext" x="1%" width="51%" mode="forthandback" orientation="horizontal" delay="2000" scrollspeed="medium" layer="3">
                    <drawtext x="10" valign="center" font="{light}" fontsize="85%" color="{fontactive}" text="{printf('%02d.%02d.%d', daynumeric, month, year)} {time}" />
                    <drawtext name="menutext" x="35%" valign="center" font="{light}" fontsize="85%" color="{fontactive}" text="{name}" />
                </areascroll>
                <area x="1%" width="58%" layer="4">
                    <drawimage condition="{new}" name="new" imagetype="icon" path="ico_new_active" x="{areawidth} - {areaheight}" width="0.9*{areaheight}" height="0.9*{areaheight}" valign="center" />
                    <drawimage condition="{new}++{cutted}" imagetype="icon" path="ico_cutted_active" x="{areawidth} - 2*{areaheight}" width="0.9*{areaheight}" height="0.9*{areaheight}" valign="center" />
                    <drawimage condition="not{new}++{cutted}" imagetype="icon" path="ico_cutted_active" x="{areawidth} - {areaheight}" width="0.9*{areaheight}" height="0.9*{areaheight}" valign="center" />
                </area>
            </areacontainer>
        </listelement>
        <currentelement delay="0" fadetime="{fadetimecurrent}">
            <area x="63%" y="0" width="36%" height="100%" layer="2">
                <!-- header -->
                <drawtext name="title" x="1%" y="0" width="98%" font="{semibold}" fontsize="8%" color="{fontactive}" text="{epgname}" />
                <drawtext name="shorttext" x="1%" y="{height(title)}" width="98%" font="{semibold}" fontsize="6%" color="{fontactive}" text="{shorttext}" />
                <drawtext name="datetime" x="1%" y="{posy(shorttext)} + {height(shorttext)}" font="{light}" fontsize="5%" color="{fontactive}" text="{date} {time}, {duration} min" />
                <!-- scraper poster -->
                <drawimage condition="{hasposter}" name="poster" imagetype="image" path="{posterpath}" x="1%" y="{posy(datetime)} + {height(datetime)} + 20" width="{areawidth}/3" height="{areawidth}/3 * {posterheight} / {posterwidth}"/>
                <!-- description -->
                <drawtextbox condition="{hasposter}" x="1%" y="{posy(poster)}" width="98%" height="{areaheight} - {posy(poster)}" float="topleft" floatwidth="{width(poster)} + 10" floatheight="{height(poster)} + 10" font="{light}" fontsize="6%" color="{fontactive}" text="{description}" />
                <drawtextbox condition="not{hasposter}" x="1%" y="{posy(poster)}" width="98%" height="{areaheight} - {posy(poster)}" font="{light}" fontsize="6%" color="{fontactive}" text="{description}" />
            </area>
        </currentelement>
    </menuitems>

    <menuitems x="0" y="10%" orientation="horizontal" width="100%" height="82%" align="center" numlistelements="10">
        <listelement>
            <!-- Background -->
            <area y="64%" height="36%" layer="2">
                <fill condition="not{current}" color="{clrTransparent}" />
                <fill condition="{folder}" color="{menuseparator}" />
                <fill condition="{current}" color="{menuactive}" />
            </area>
            <areacontainer condition="not{current}">
                <!-- recording folder -->
                <area condition="{folder}" y="64%" height="36%" layer="3">
                    <drawimage name="foldericon" imagetype="icon" path="ico_recfolder" align="center" y="0" width="0.6*{areaheight} * 92 / 136" height="0.6*{areaheight}" />
                    <drawtextbox align="center" maxlines="3" x="1%" y="63%" width="98%" height="37%" font="{light}" fontsize="12%" color="{fontdefault}" text="{name} ({numrecordingsfolder}, {newrecordingsfolder} new)" />
                </area>
                <!-- recording item -->
                <area condition="not{folder}" y="64%" height="36%" layer="3">
                    <drawimage condition="{hasposterthumbnail}" imagetype="image" path="{thumbnailpath}" align="center" y="8" width="{areaheight}*0.6 * {thumbnailwidth} / {thumbnailheight}" height="{areaheight}*0.6"/>
                    <drawimage condition="not{hasposterthumbnail}" imagetype="icon" path="ico_recfile" align="center" y="10%" width="{areaheight}*0.5 * {thumbnailwidth} / {thumbnailheight}" height="{areaheight}*0.4"/>
                    <drawtextbox  align="center" maxlines="3" x="1%" y="63%" width="98%" height="37%" font="{light}" fontsize="12%" color="{fontdefault}" text="{name}" />
                </area>
            </areacontainer>
            <areacontainer condition="{current}">
                <!-- recording folder -->
                <area condition="{folder}" y="64%" height="36%" layer="3">
                    <drawimage name="foldericon" imagetype="icon" path="ico_recfolder_active" align="center" y="0" width="0.6*{areaheight} * 92 / 136" height="0.6*{areaheight}" />
                    <drawtextbox align="center" maxlines="3" x="1%" y="63%" width="98%" height="37%" font="{light}" fontsize="12%" color="{fontactive}" text="{name} ({numrecordingsfolder}, {newrecordingsfolder} new)" />
                </area>
                <!-- recording item -->
                <area condition="not{folder}" y="64%" height="36%" layer="3">
                    <drawimage condition="{hasposterthumbnail}" imagetype="image" path="{thumbnailpath}" align="center" y="8" width="{areaheight}*0.6 * {thumbnailwidth} / {thumbnailheight}" height="{areaheight}*0.6"/>
                    <drawimage condition="not{hasposterthumbnail}" imagetype="icon" path="ico_recfile_active" align="center" y="10%"  width="{areaheight}*0.5 * {thumbnailwidth} / {thumbnailheight}" height="{areaheight}*0.4"/>
                    <drawtextbox  align="center" maxlines="3" x="1%" y="63%" width="98%" height="37%" font="{light}" fontsize="12%" color="{fontactive}" text="{name}" />
                </area>
            </areacontainer>
        </listelement>
        <currentelement delay="0" fadetime="{fadetimecurrent}">
            <area x="5%" y="0" width="90%" height="61%" layer="2">
                <!-- scraper poster -->
                <drawimage condition="{hasposter}" name="poster" imagetype="image" path="{posterpath}" x="1%" y="2%" width="{areaheight}*0.96 * {posterwidth} / {posterheight}" height="96%"/>
                <!-- header -->
                <drawtext condition="{hasposter}" name="title" x="{width(poster)} + 0.04*{areawidth}" y="0" font="{semibold}" fontsize="10%" color="{fontactive}" text="{epgname}" />
                <drawtext condition="{hasposter}" name="shorttext" x="{width(poster)} + 0.04*{areawidth}" y="{height(title)}" width="0.96*{areawidth} - {width(poster)}" font="{semibold}" fontsize="8%" color="{fontactive}" text="{shorttext}" />
                <drawtext condition="{hasposter}" name="datetime" x="{width(poster)} + 0.04*{areawidth}" y="{posy(shorttext)} + {height(shorttext)}" font="{light}" fontsize="7%" color="{fontactive}" text="{date} {time}, {duration} min" />

                <drawtext condition="not{hasposter}" name="title" x="2%" y="0" font="{semibold}" fontsize="10%" color="{fontactive}" text="{epgname}" />
                <drawtext condition="not{hasposter}" name="shorttext" x="2%" y="{height(title)}" width="98%" font="{semibold}" fontsize="8%" color="{fontactive}" text="{shorttext}" />
                <drawtext condition="not{hasposter}" name="datetime" x="2%" y="{posy(shorttext)} + {height(shorttext)}" font="{light}" fontsize="7%" color="{fontactive}" text="{date} {time}, {duration} min" />
                <!-- description -->
                <drawtextbox condition="{hasposter}" x="{width(poster)} + 0.04*{areawidth}" y="{posy(datetime)} + {height(datetime)} + 10" width="{areawidth}*0.94 - {width(poster)}" height="{areaheight}*0.92 - {posy(datetime)}" font="{light}" fontsize="7%" color="{fontactive}" text="{description}" />
                <drawtextbox condition="not{hasposter}" x="2%" y="{posy(datetime)} + {height(datetime)} + 10" width="{areawidth}*0.98" height="{areaheight}*0.92 - {posy(datetime)}" font="{light}" fontsize="7%" color="{fontactive}" text="{description}" />
            </area>
        </currentelement>
    </menuitems>

    <scrollbar orientation="horizontal">
        <area x="0" y="{areaheight}*0.6" width="100%" height="{areaheight}*0.025" layer="3">
            <fill color="{clrWhite}" />
            <drawrectangle x="2" y="2" width="{areawidth} - 4" height="{areaheight} - 4" color="{clrTransparent}" />
            <drawrectangle x="4 + {areawidth} * {offset} / 1000" y="4" width="{areawidth} * {height} / 1000 - 8" height="{areaheight} - 8" color="{clrWhite}" />
        </area>
    </scrollbar>

    <scrollbar orientation="vertical">
        <area x="60%" y="10%" width="2%" height="82%" layer="3">
            <fill color="{scrollbar}" />
            <drawrectangle x="2" y="2" width="{areawidth} - 4" height="{areaheight} - 4" color="{clrTransparent}" />
            <drawrectangle x="4" y="4 + {areaheight} * {offset} / 1000" width="{areawidth} - 8" height="{areaheight} * {height} / 1000 - 8" color="{scrollbar}" />
        </area>
    </scrollbar>

    <colorbuttons orientation="horizontal">
        <!-- horizontal menu -->
        <area x="0" y="93%" width="25%" height="7%" layer="2">
            <drawtext condition="{red1}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{red}" />
            <drawrectangle condition="{red1}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green1}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{green}" />
            <drawrectangle condition="{green1}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow1}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{yellow}" />
            <drawrectangle condition="{yellow1}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue1}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{blue}" />
            <drawrectangle condition="{blue1}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
        <area x="25%" y="93%" width="25%" height="7%" layer="2">
            <drawtext condition="{red2}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{red}" />
            <drawrectangle condition="{red2}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green2}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{green}" />
            <drawrectangle condition="{green2}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow2}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{yellow}" />
            <drawrectangle condition="{yellow2}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue2}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{blue}" />
            <drawrectangle condition="{blue2}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
        <area x="50%" y="93%" width="25%" height="7%" layer="2">
            <drawtext condition="{red3}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{red}" />
            <drawrectangle condition="{red3}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green3}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{green}" />
            <drawrectangle condition="{green3}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow3}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{yellow}" />
            <drawrectangle condition="{yellow3}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue3}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{blue}" />
            <drawrectangle condition="{blue3}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
        <area x="75%" y="93%" width="25%" height="7%" layer="2">
            <drawtext condition="{red4}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{red}" />
            <drawrectangle condition="{red4}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green4}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{green}" />
            <drawrectangle condition="{green4}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow4}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{yellow}" />
            <drawrectangle condition="{yellow4}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue4}" x="20" valign="center" font="{light}" fontsize="80%" color="{fontdefault}" text="{blue}" />
            <drawrectangle condition="{blue4}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
    </colorbuttons>

</menurecordings>