updated default skin, should be applicable to most displays and scale fairly well for most screen sizes

1 files changed, 307 insertions, 126 deletions

diff --git a/graphlcd/skins/default/default.skin b/graphlcd/skins/default/default.skin
index b47505e..d04e8a8 100644
--- a/graphlcd/skins/default/default.skin
+++ b/graphlcd/skins/default/default.skin
@@ -1,100 +1,267 @@
 <?xml version="1.0"?>
-<skin version="1.0" name="default">
-  <font id="FontInfo" url="fnt:f12bn.fnt" condition="le({ScreenHeight},64)"/>
-  <font id="FontChannel" url="fnt:f12bn.fnt" condition="le({ScreenHeight},64)"/>
-  <font id="FontMenuTitle" url="fnt:f8n.fnt" condition="le({ScreenHeight},64)"/>
-  <font id="FontMenuItem" url="fnt:f8n.fnt" condition="le({ScreenHeight},64)"/>
-  <font id="FontMenuButton" url="fnt:f5n.fnt" condition="le({ScreenHeight},64)"/>
-  <font id="FontTimes" url="fnt:f8n.fnt" condition="le({ScreenHeight},64)"/>
-
-  <font id="FontTimes" url="fnt:verdana-014.fnt"/>
-  <font id="FontInfo" url="fnt:verdana-018.fnt"/>
-  <font id="FontChannel" url="fnt:verdana-022.fnt"/>
-  <font id="FontMenuTitle" url="fnt:verdana-015.fnt"/>
-  <font id="FontMenuItem" url="fnt:verdana-012.fnt"/>
-  <font id="FontMenuButton" url="fnt:verdanab-009.fnt"/>
-
-  <variable id="LineThickness" value="1" condition="le({ScreenHeight},64)"/>
-  <variable id="LineThickness" value="2"/>
-
-  <variable id="LogoW" value="40" condition="le({ScreenHeight},64)"/>
-  <variable id="LogoW" value="64"/>
-  <variable id="LogoH" value="29" condition="le({ScreenHeight},64)"/>
-  <variable id="LogoH" value="48"/>
-  <variable id="LogoX" value="mul(-1,#LogoW)"/>
-  <variable id="ChannelLogo" value="'{ConfigPath}/logos/channels/{ChannelAlias}_m.glcd'" condition="le({ScreenHeight},64)"/>
-  <variable id="ChannelLogo" value="'{ConfigPath}/logos/channels/{ChannelAlias}_l.glcd'"/>
-
-  <variable id="SymbolW" value="ImageWidth('symbols/empty_small.pbm')" condition="le({ScreenHeight},64)"/>
-  <variable id="SymbolW" value="ImageWidth('symbols/empty.pbm')"/>
-  <variable id="SymbolH" value="ImageHeight('symbols/empty_small.pbm')" condition="le({ScreenHeight},64)"/>
-  <variable id="SymbolH" value="ImageHeight('symbols/empty.pbm')"/>
-  <variable id="SymbolPitch" value="add(#SymbolW,1)"/>
-  <variable id="SymbolTeletext" value="'symbols/teletext_small.pbm'" condition="le({ScreenHeight},64)"/>
-  <variable id="SymbolTeletext" value="'symbols/teletext.pbm'"/>
-  <variable id="SymbolDolby" value="'symbols/dolby_small.pbm'" condition="le({ScreenHeight},64)"/>
-  <variable id="SymbolDolby" value="'symbols/dolby.pbm'"/>
-  <variable id="SymbolScrambled" value="'symbols/scrambled_small.pbm'" condition="le({ScreenHeight},64)"/>
-  <variable id="SymbolScrambled" value="'symbols/scrambled.pbm'"/>
-  <variable id="SymbolMute" value="'symbols/mute_small.pbm'" condition="le({ScreenHeight},64)"/>
-  <variable id="SymbolMute" value="'symbols/mute.pbm'"/>
-  <variable id="SymbolRecording" value="'symbols/recording_small.pbm'" condition="le({ScreenHeight},64)"/>
-  <variable id="SymbolRecording" value="'symbols/recording.pbm'"/>
+<skin version="1.2" name="default">
+
+  <font id="FontInfo"          url="ft2:VeraBd.ttf:9"               condition="le({ScreenHeight},65)"/>
+  <font id="FontChannel"       url="ft2:VeraBd.ttf:12"              condition="le({ScreenHeight},65)"/>
+  <font id="FontMenuTitle"     url="ft2:Vera.ttf:8"                 condition="le({ScreenHeight},65)"/>
+  <font id="FontMenuItem"      url="ft2:DejaVuSansCondensed.ttf:8"  condition="le({ScreenHeight},65)"/>
+  <font id="FontMenuButton"    url="ft2:DejaVuSansCondensed.ttf:8"  condition="le({ScreenHeight},65)"/>
+  <font id="FontTitle"         url="ft2:VeraBd.ttf:9"               condition="le({ScreenHeight},65)"/>
+  <font id="FontTitleSmall"    url="ft2:VeraBd.ttf:8"               condition="le({ScreenHeight},65)"/>
+  <font id="FontInfoSmall"     url="ft2:Vera.ttf:8"                 condition="le({ScreenHeight},65)"/>
+  <font id="FontInfoSmall2"    url="ft2:Vera.ttf:7"                 condition="le({ScreenHeight},65)"/>
+  <font id="FontTimes"         url="fnt:f8n.fnt"                    condition="le({ScreenHeight},65)"/>
+
+  <font id="FontTitle"         url="ft2:VeraBd.ttf:24"              condition="gt({ScreenHeight},128)"/>
+  <font id="FontTitleSmall"    url="ft2:Vera.ttf:20"                condition="gt({ScreenHeight},128)"/>
+  <font id="FontInfoSmall"     url="ft2:VeraBd.ttf:16"              condition="gt({ScreenHeight},128)"/>
+  <font id="FontInfoSmall2"    url="ft2:Vera.ttf:14"                condition="gt({ScreenHeight},128)"/>
+
+  <font id="FontInfo"          url="ft2:Vera.ttf:18"/>
+  <font id="FontChannel"       url="ft2:VeraBd.ttf:22"/>
+  <font id="FontMenuTitle"     url="ft2:Vera.ttf:15"/>
+  <font id="FontMenuItem"      url="ft2:Vera.ttf:12"/>
+  <font id="FontMenuButton"    url="ft2:VeraBd.ttf:9"/>
+  <font id="FontTitle"         url="ft2:VeraBd.ttf:20" />
+  <font id="FontTitleSmall"    url="ft2:Vera.ttf:14" />
+  <font id="FontInfoSmall"     url="ft2:VeraBd.ttf:12"/>
+  <font id="FontInfoSmall2"    url="ft2:Vera.ttf:10"/>
+  <font id="FontTimes"         url="ft2:Vera.ttf:14"/>
+
+  <variable id="LineThickness" value="1" condition="le({ScreenHeight},65)" default="2" />
+  <variable id="PaddingW"       value="0" condition="le({ScreenHeight},65)" />
+  <variable id="PaddingW"       value="2" condition="ge({ScreenHeight},240)" default="1" />
+  <variable id="PaddingH"       value="0" condition="le({ScreenHeight},65)" default="1" />
+
+  <!-- COLOURS -->
+  <!-- defines -->
+  <variable id="ColMonoFG"          value="{ForegroundColor}"/>
+  <variable id="ColMonoBG"          value="{BackgroundColor}"/>
+
+  <condblock condition="QueryFeature('iscolour')">
+    <!-- display id normal -->
+    <variable id="ColChannelBG"       value="'0x77300060'"       default="#ColMonoFG" />
+    <variable id="ColChannelInfo"     value="'white'"            default="#ColMonoBG" />
+    <variable id="ColDateTime"        value="'white'"            default="#ColMonoBG" />
+    <variable id="ColBorder"          value="'0x770000FF'"       default="#ColMonoBG" />
+    <variable id="ColLogoBG"          value="'black'"            default="#ColMonoBG" />
+    <variable id="ColLogoFG"          value="'cyan'"             default="#ColMonoFG" />
+    <variable id="ColSymbol"          value="'yellow'"           default="#ColMonoFG" />
+    <variable id="ColSymbolGreyed"    value="'0x333333'"         default="#ColMonoBG" />
+    <variable id="ColPresProgrText"   value="'0xCCCCFF'"         default="#ColMonoFG" />
+    <variable id="ColPresProgrBar"    value="'0xDDC0FFC0'"       default="#ColMonoFG" />
+    <variable id="ColPresProgrBarBrd" value="'0xAAFFFFFF'"       default="#ColMonoFG" />
+    <variable id="ColPresentTitle"    value="'0xAAC0FFFF'"       default="#ColMonoFG" />
+    <variable id="ColPresentShort"    value="'0xAAC0C0FF'"       default="#ColMonoFG" />
+    <variable id="ColFollowingTitle"  value="'0xAAFFFFFF'"       default="#ColMonoFG" />
+    <variable id="ColFollowingShort"  value="'0xAAFFFFFF'"       default="#ColMonoFG" />
+    <variable id="ColRecSymbol"       value="'magenta'"          default="#ColMonoFG" />
+    <variable id="ColRecText"         value="'magenta'"          default="#ColMonoFG" />
+    <variable id="ColFemonBar"        value="'0x550000FF'"       default="#ColMonoFG" />
+    <variable id="ColFemonText"       value="'0xDDDDDD'"         default="#ColMonoFG" />
+    <!-- display id volume -->
+    <variable id="ColVolumeBG"        value="'black'"            default="#ColMonoBG" />
+    <variable id="ColVolumeFG"        value="'white'"            default="#ColMonoFG" />
+    <variable id="ColVolumeBar"       value="'green'"            default="#ColMonoFG" />
+    <!-- display id message -->
+    <variable id="ColMessageBG"       value="'0xAA000000'"       default="#ColMonoBG" />
+    <variable id="ColMessageFG"       value="'red'"              default="#ColMonoFG" />
+    <variable id="ColMessageIcon"     value="'0x77FF0000'"       default="#ColMonoFG" />
+    <variable id="ColMessageText"     value="'white'"            default="#ColMonoFG" />
+    <!-- display id replay -->
+    <variable id="ColReplayBorder"    value="#ColBorder"         default="#ColBorder" />  <!-- -->
+    <variable id="ColReplayLogo"      value="'cyan'"             default="#ColMonoFG" />
+    <variable id="ColReplayText"      value="'white'"            default="#ColMonoFG" />
+    <variable id="ColReplaySymbol"    value="'yellow'"           default="#ColMonoFG" />
+    <variable id="ColReplayBar"       value="'magenta'"          default="#ColMonoFG" />
+    <variable id="ColReplayTime"      value="'white'"            default="#ColMonoFG" />
+    <!-- display id menu -->
+    <!--variable id="ColMenuHeaderBG"    value="'yellow'"     condition="QueryFeature('iscolour')"/-->
+    <variable id="ColMenuHeaderBG"    value="#ColChannelBG"      default="#ColChannelBG"/> <!-- -->
+    <variable id="ColMenuHeaderFG"    value="'white'"            default="#ColChannelInfo"/>
+    <variable id="ColMenuBorder"      value="#ColMenuHeaderBG"   default="#ColBorder" />
+    <!--variable id="ColMenuEntryMarker" value="'yellow'"           default="#ColMonoFG" /-->
+    <variable id="ColMenuEntry"       value="'white'"            default="#ColMonoFG" />
+    <variable id="ColMenuEntryCurr"   value="'black'"            default="#ColMonoBG" />
+    <variable id="ColMenuSelected"    value="'0xFF00AAAA'"       default="#ColMonoFG" />
+    <variable id="ColMenuText"        value="'magenta'"          default="#ColMonoFG" />
+    <variable id="ColMenuButtonRBG"   value="'red'"              default="#ColMonoFG" />
+    <variable id="ColMenuButtonRFG"   value="'white'"            default="#ColMonoBG" />
+    <variable id="ColMenuButtonGBG"   value="'green'"            default="#ColMonoFG" />
+    <variable id="ColMenuButtonGFG"   value="'black'"            default="#ColMonoBG" />
+    <variable id="ColMenuButtonYBG"   value="'yellow'"           default="#ColMonoFG" />
+    <variable id="ColMenuButtonYFG"   value="'black'"            default="#ColMonoBG" />
+    <variable id="ColMenuButtonBBG"   value="'blue'"             default="#ColMonoFG" />
+    <variable id="ColMenuButtonBFG"   value="'white'"            default="#ColMonoBG" />
+    <variable id="ColMenuButtonBG"    value="'0xEEEEEE'"         default="#ColMonoFG" />
+    <variable id="ColMenuButtonFG"    value="'black'"            default="#ColMonoBG" />
+  </condblock>
+
 
   <display id="normal">
-    <variable id="TimeBarW" value="FontTextWidth('FontTimes','00:00 - 00:00')"/>
-    <variable id="TimeBarY" value="add(#LogoH,#LineThickness,FontLineHeight('FontTimes'),1)"/>
-    <text x1="0" x2="-1" y1="0" y2="-1" color="black" align="left" font="FontChannel">
-    {ChannelNumber} {ChannelName}
+
+    <!-- LogoSymbSmall: 1: small, symbols left of logo, 0: large, symbols at bottom of logo -->
+    <variable id="LogoSymbSmall"  value="1" condition="le({ScreenHeight},65)" default="0" />
+    <!-- LogoSymbPos: 1: logo + symbols inside channel bar, 0: logo + symbols below channel bar -->
+    <variable id="LogoSymbPos"     value="1" condition="le({ScreenHeight},128)" default="0" />
+    <variable id="ChannelLogo"     value="'{ConfigPath}/logos/channels/{ChannelAlias}_m.glcd'" condition="#LogoSymbSmall"
+                                 default="'{ConfigPath}/logos/channels/{ChannelAlias}_l.glcd'"/>
+    <variable id="LogoW"           value="40" condition="#LogoSymbSmall" default="64" />
+    <variable id="LogoH"           value="29" condition="#LogoSymbSmall" default="48" />
+    <variable id="LogoBorder"      value="1" />
+
+    <variable id="SymbolW"         value="ImageWidth('symbols/empty_small.pbm')"  condition="#LogoSymbSmall" default="ImageWidth('symbols/empty.pbm')" />
+    <variable id="SymbolH"         value="ImageHeight('symbols/empty_small.pbm')" condition="#LogoSymbSmall" default="ImageHeight('symbols/empty.pbm')"/>
+    <variable id="SymbolGap"       value="1"                                      condition="#LogoSymbSmall" default="2" />
+    <variable id="SymbolTeletext"  value="'symbols/teletext_small.pbm'"           condition="#LogoSymbSmall" default="'symbols/teletext.pbm'"/>
+    <variable id="SymbolDolby"     value="'symbols/dolby_small.pbm'"              condition="#LogoSymbSmall" default="'symbols/dolby.pbm'"/>
+    <variable id="SymbolScrambled" value="'symbols/scrambled_small.pbm'"          condition="#LogoSymbSmall" default="'symbols/scrambled.pbm'"/>
+    <variable id="SymbolMute"      value="'symbols/mute_small.pbm'"               condition="#LogoSymbSmall" default="'symbols/mute.pbm'"/>
+    <variable id="SymbolRecording" value="'symbols/recording_small.pbm'"          condition="#LogoSymbSmall" default="'symbols/recording.pbm'"/>
+
+    <!-- dimensions of logo + symbols + borders -->
+    <variable id="LogoSymbW"       value="#SymbolW"                                                condition="and(#LogoSymbSmall,not({SettingShowChannelLogo}),{SettingShowSymbols})" />
+    <variable id="LogoSymbW"       value="add(#SymbolW,#SymbolGap,#LogoBorder,#LogoW,#LogoBorder)" condition="and(#LogoSymbSmall,{SettingShowChannelLogo},{SettingShowSymbols})" />
+    <variable id="LogoSymbW"       value="add(mul(#SymbolW,4),mul(#SymbolGap,3))"                  condition="and(not(#LogoSymbSmall),not({SettingShowChannelLogo}),{SettingShowSymbols})" />
+    <variable id="LogoSymbW"       value="add(#LogoBorder,#LogoW,#LogoBorder)"                     condition="and(not(#LogoSymbSmall),{SettingShowChannelLogo},{SettingShowSymbols})" />
+    <variable id="LogoSymbW"       value="add(#LogoBorder,#LogoW,#LogoBorder)"                     condition="and({SettingShowChannelLogo},not({SettingShowSymbols}))" />
+    <variable id="LogoSymbW"       value="0" />
+    <variable id="LogoSymbH"       value="add(mul(#SymbolH,4),mul(#SymbolGap,3))"                  condition="and(#LogoSymbSmall,{SettingShowSymbols})" />
+    <variable id="LogoSymbH"       value="#SymbolH"                                                condition="and(not(#LogoSymbSmall),not({SettingShowChannelLogo}),{SettingShowSymbols})" />
+    <variable id="LogoSymbH"       value="add(#LogoBorder,#LogoH,#LogoBorder,#SymbolGap,#SymbolH)" condition="and(not(#LogoSymbSmall),{SettingShowChannelLogo},{SettingShowSymbols})" />
+    <variable id="LogoSymbH"       value="add(#LogoBorder,#LogoH,#LogoBorder)"                     condition="and({SettingShowChannelLogo},not({SettingShowSymbols}))" />
+    <variable id="LogoSymbH"       value="0" />
+
+    <variable id="ChannelBarW"     value="sub({ScreenWidth},mul(#LogoSymbPos,add(#LogoSymbW,4)))" />
+    <!-- ChannelBarH: PaddingH + Height(FontChannel) + 2x PaddingH + Height(FontInfo) + PaddingH -->
+    <variable id="ChannelBarH"     value="add(FontLineHeight('FontChannel'),FontLineHeight('FontInfo'),mul(#PaddingH,2))" />
+    <variable id="ChannelContentW" value="sub({ScreenWidth},#LogoW,mul(2,#LogoPadding))" condition="and({SettingShowChannelLogo},#LogoTopRight)"
+                                 default="{ScreenWidth}" />
+
+    <variable id="LogoSymbX"       value="sub({ScreenWidth},1,#LogoSymbW)" />
+    <variable id="LogoSymbY"       value="0"  condition="#LogoSymbPos"  default="#ChannelBarH" />
+
+    <variable id="TimeBarW"        value="FontTextWidth('FontTimes','00:00 - 00:00')"/>
+    <variable id="TimeBarY"        value="add(#ChannelBarH,#LineThickness)"/>
+
+
+    <rectangle x="0" y="0" width="#ChannelBarW" height="#ChannelBarH" color="#ColChannelBG" filled="yes" />
+    <text x="#PaddingW" y="0" width="sub(#ChannelBarW,mul(#PaddingW,2),1)" height="FontLineHeight('FontChannel')" color="#ColChannelInfo" align="left" scrollmode="never" font="FontChannel">
+      {ChannelNumber} | {ChannelName}
     </text>
-    <block condition="{SettingShowChannelLogo}">
-      <rectangle x1="#LogoX" y1="0" width="#LogoW" height="#LogoH" color="white" filled="yes"/>
-      <image x="#LogoX" y="0" color="black" path="#ChannelLogo"/>
-      <rectangle x1="sub(#LogoX,#LineThickness)" width="#LineThickness" y1="0" height="#LogoH" color="black" filled="yes"/>
-      <text x1="0" x2="sub(#LogoX,#LineThickness,2)" y1="sub(#LogoH,FontLineHeight('FontInfo'))" y2="-1" color="black" align="left" font="FontInfo">
+    <text condition="not(and(#LogoSymbSmall,{SettingShowChannelLogo}))" x="#PaddingW" y="add(FontLineHeight('FontChannel'))" width="sub(#ChannelBarW,mul(#PaddingW,2),1)" height="FontLineHeight('FontInfo')" color="#ColDateTime" align="left" font="FontInfo">
       {DateTime:%a %d.%m.}
-      </text>
-      <text x1="0" x2="sub(#LogoX,#LineThickness,2)" y1="sub(#LogoH,FontLineHeight('FontInfo'))" y2="-1" color="black" align="right" font="FontInfo">
+    </text>
+    <text condition="and(#LogoSymbSmall,{SettingShowChannelLogo})" x="#PaddingW" y="add(FontLineHeight('FontChannel'))" width="sub(#ChannelBarW,mul(#PaddingW,2),1)" height="FontLineHeight('FontInfo')" color="#ColDateTime" align="left" font="FontInfo">
+      {DateTime:%d.%m.}
+    </text>
+    <text x="#PaddingW" y="add(FontLineHeight('FontChannel'))" width="sub(#ChannelBarW,mul(#PaddingW,2),1)" height="FontLineHeight('FontInfo')" color="#ColDateTime" align="right" font="FontInfo">
       {DateTime:%H\:%M}
-      </text>
+    </text>
+    <!-- logo + symbols -->
+    <rectangle x="#LogoSymbX" y="#LogoSymbY" width="#LogoSymbW" height="#LogoSymbH" filled="yes" color="#ColLogoBG" condition="gt(#LogoSymbW,0)" />
+
+    <block condition="{SettingShowChannelLogo}">
+      <image x="mul(-1,add(#LogoBorder,#LogoW))" y="add(#LogoSymbY,#LogoBorder)" width="#LogoW" height="#LogoH" bgcolor="#ColLogoBG" color="#ColLogoFG" path="#ChannelLogo"/>
     </block>
-    <block condition="not({SettingShowChannelLogo})">
-      <text x1="0" x2="-1" y1="sub(#LogoH,FontLineHeight('FontInfo'))" y2="-1" color="black" align="left" font="FontInfo">
-      {DateTime:%a %d.%m.}
-      </text>
-      <text x1="0" x2="-1" y1="sub(#LogoH,FontLineHeight('FontInfo'))" y2="-1" color="black" align="right" font="FontInfo">
-      {DateTime:%H\:%M}
-      </text>
+    <block condition="and(not(#LogoSymbSmall),{SettingShowSymbols})">
+      <image x="add(#LogoSymbX,mul(0,add(#SymbolW,#SymbolGap)))" y="add(#LogoSymbY,mul({SettingShowChannelLogo},add(#LogoBorder,#LogoH,#LogoBorder,#SymbolGap)))" color="#ColSymbol" path="#SymbolTeletext" condition="{ChannelHasTeletext}"/>
+      <image x="add(#LogoSymbX,mul(1,add(#SymbolW,#SymbolGap)))" y="add(#LogoSymbY,mul({SettingShowChannelLogo},add(#LogoBorder,#LogoH,#LogoBorder,#SymbolGap)))" color="#ColSymbol" path="#SymbolDolby" condition="{ChannelHasDolby}"/>
+      <image x="add(#LogoSymbX,mul(2,add(#SymbolW,#SymbolGap)))" y="add(#LogoSymbY,mul({SettingShowChannelLogo},add(#LogoBorder,#LogoH,#LogoBorder,#SymbolGap)))" color="#ColSymbol" path="#SymbolScrambled" condition="{ChannelIsEncrypted}"/>
+      <image x="add(#LogoSymbX,mul(3,add(#SymbolW,#SymbolGap)))" y="add(#LogoSymbY,mul({SettingShowChannelLogo},add(#LogoBorder,#LogoH,#LogoBorder,#SymbolGap)))" color="#ColSymbol" path="#SymbolMute" condition="{VolumeIsMute}"/>
     </block>
-    <rectangle x1="0" x2="-1" y1="#LogoH" height="#LineThickness" color="black" filled="yes"/>
-    <block condition="{SettingShowSymbols}">
-      <image x="mul(-4,#SymbolPitch)" y="add(#LogoH,#LineThickness,1)" color="black" path="#SymbolTeletext" condition="{ChannelHasTeletext}"/>
-      <image x="mul(-3,#SymbolPitch)" y="add(#LogoH,#LineThickness,1)" color="black" path="#SymbolDolby" condition="{ChannelHasDolby}"/>
-      <image x="mul(-2,#SymbolPitch)" y="add(#LogoH,#LineThickness,1)" color="black" path="#SymbolScrambled" condition="{ChannelIsEncrypted}"/>
-      <image x="mul(-1,#SymbolPitch)" y="add(#LogoH,#LineThickness,1)" color="black" path="#SymbolMute" condition="{VolumeIsMute}"/>
+    <block condition="and(#LogoSymbSmall,{SettingShowSymbols})">
+      <image x="#LogoSymbX" y="add(#LogoSymbY,mul(0,add(#SymbolH,#SymbolGap)))" color="#ColSymbol" path="#SymbolTeletext" condition="{ChannelHasTeletext}"/>
+      <image x="#LogoSymbX" y="add(#LogoSymbY,mul(1,add(#SymbolH,#SymbolGap)))" color="#ColSymbol" path="#SymbolDolby" condition="{ChannelHasDolby}"/>
+      <image x="#LogoSymbX" y="add(#LogoSymbY,mul(2,add(#SymbolH,#SymbolGap)))" color="#ColSymbol" path="#SymbolScrambled" condition="{ChannelIsEncrypted}"/>
+      <image x="#LogoSymbX" y="add(#LogoSymbY,mul(3,add(#SymbolH,#SymbolGap)))" color="#ColSymbol" path="#SymbolMute" condition="{VolumeIsMute}"/>
     </block>
-    <block condition="{SettingShowTimebar}">
-      <text x1="0" x2="-1" y1="add(#LogoH,#LineThickness)" y2="-1" color="black" align="left" font="FontTimes">
-      {PresentStartDateTime:%H\:%M} - {FollowingStartDateTime:%H\:%M}
+    <block condition="and({SettingShowTimebar},{FollowingValid})">
+      <text x1="0" x2="-1" y1="#TimeBarY" y2="-1" color="#ColPresProgrText" align="left" font="FontTimes">
+        {PresentStartDateTime:%H\:%M} - {FollowingStartDateTime:%H\:%M}
       </text>
-      <rectangle x1="0" width="#TimeBarW" y1="#TimeBarY" height="6" color="black"/>
-      <progress x1="2" width="sub(#TimeBarW,4)" y1="add(#TimeBarY,2)" height="2" color="black" direction="0" current="{PresentProgress}" total="{PresentDuration}"/>
+      <rectangle x="#PaddingW" width="#TimeBarW" y="add(#TimeBarY,#PaddingH,FontLineHeight('FontTimes'))" height="6" color="#ColPresProgrBarBrd"/>
+      <progress x="add(#PaddingW,2)" width="sub(#TimeBarW,4)" y1="add(#TimeBarY,#PaddingH,FontLineHeight('FontTimes'),2)" height="2" color="#ColPresProgrBar" direction="0" current="{PresentProgress}" total="{PresentDuration}"/>
     </block>
 
-    <variable id="RecordingsTextY" value="mul(-1,FontLineHeight('FontTimes'))"/>
-    <variable id="RecordingsLineY" value="sub(sub(#RecordingsTextY,#LineThickness),1)"/>
-    <variable id="RecordingsSymbolY" value="add(#RecordingsTextY,div(sub(FontLineHeight('FontTimes'),#SymbolH),2))"/>
-    <variable id="PresentTextY" value="sub(sub(#RecordingsLineY,FontLineHeight('FontInfo')),2)"/>
+    <!-- ProginfoPlaceY:    Y start for title-info w/o and w/ limits because of logos + symbols
+         ProginfoPlaceYLim: Y start for title-info w/o any limits -->
+    <variable id="ProginfoPlaceY"      value="add(#TimeBarY,#PaddingH,FontLineHeight('FontTimes'),6,#PaddingH)" condition="{SettingShowTimebar}"
+                                     default="add(#ChannelBarH,#PaddingH)" />
+    <variable id="ProginfoPlaceYLim"   value="#ProginfoPlaceY" condition="lt(add(#LogoSymbX,#LogoSymbH,#PaddingH),#ProginfoPlaceY)"
+                                     default="add(#LogoSymbY,#LogoSymbH,#PaddingH)" />
+    <!--variable id="PresentTextY"        value="sub(sub(#RecordingsLineY,FontLineHeight('FontInfo')),2)"/-->
+    
+    <variable id="ProginfoLines"       value="5" condition="gt(sub({ScreenHeight},#ProginfoPlaceY,1),add(FontLineHeight('FontTitle'),FontLineHeight('FontTitleSmall'),FontLineHeight('FontInfoSmall'),FontLineHeight('FontInfoSmall2'),FontLineHeight('FontInfoSmall2')))" />
+    <variable id="ProginfoLines"       value="4" condition="gt(sub({ScreenHeight},#ProginfoPlaceY,1),add(FontLineHeight('FontTitle'),FontLineHeight('FontTitleSmall'),FontLineHeight('FontInfoSmall'),FontLineHeight('FontSmall2')))" />
+    <variable id="ProginfoLines"       value="3" condition="gt(sub({ScreenHeight},#ProginfoPlaceY,1),add(FontLineHeight('FontTitle'),FontLineHeight('FontTitleSmall'),FontLineHeight('FontInfoSmall')))" />
+    <variable id="ProginfoLines"       value="2" condition="gt(sub({ScreenHeight},#ProginfoPlaceY,1),add(FontLineHeight('FontTitle'),FontLineHeight('FontInfoSmall')))" />
+    <variable id="ProginfoLines"       value="1" />
+    
+    <variable id="ProginfoLine1YRaw"   value="#ProginfoPlaceY" />
+    <variable id="ProginfoLine2YRaw"   value="add(#ProginfoPlaceY,FontLineHeight('FontTitle'))" />
+    <variable id="ProginfoLine3YRaw"   value="add(#ProginfoPlaceY,FontLineHeight('FontTitle'),FontLineHeight('FontTitleSmall'))" />
+    <variable id="ProginfoLine4YRaw"   value="add(#ProginfoPlaceY,FontLineHeight('FontTitle'),FontLineHeight('FontTitleSmall'),FontLineHeight('FontInfoSmall'))" />
+    <variable id="ProginfoLine5YRaw"   value="add(#ProginfoPlaceY,FontLineHeight('FontTitle'),FontLineHeight('FontTitleSmall'),FontLineHeight('FontInfoSmall'),FontLineHeight('FontInfoSmall'))" />
+    
+    <!-- big displays: divide free space and add as gap(s) // TODO -->
+    <variable id="ProginfoLine1Y"      value="#ProginfoLine1YRaw" />
+    <variable id="ProginfoLine2Y"      value="#ProginfoLine2YRaw" />
+    <variable id="ProginfoLine3Y"      value="#ProginfoLine3YRaw" />
+    <variable id="ProginfoLine4Y"      value="#ProginfoLine4YRaw" />
+    <variable id="ProginfoLine5Y"      value="#ProginfoLine5YRaw" />
+    
+    <!-- Y starts for information lines -->
+    <variable id="PresentTitleY"       value="#ProginfoLine1Y" />
+    <variable id="PresentShortTextY"   value="#ProginfoLine2Y" />
+    <variable id="FollowingTitleY"     value="#ProginfoLine3Y" condition="gt(#ProginfoLines,2)" default="#ProginfoLine2Y" />
+    <variable id="FollowingShortTextY" value="#ProginfoLine4Y" condition="gt(#ProginfoLines,3)" default="0" />
+    <variable id="RecordingsAreaY"     value="#ProginfoLine5Y" condition="eq(#ProginfoLines,5)" />
+    <variable id="RecordingsAreaY"     value="#ProginfoLine4Y" condition="eq(#ProginfoLines,4)" />
+    <variable id="RecordingsAreaY"     value="#ProginfoLine3Y" condition="eq(#ProginfoLines,3)" default="#ProginfoLine2Y" />
+
+    <!-- width for information lines (default: screenwidth, expect a line would overlap logo/symbol area -->
+    <variable id="PresentTitleW"       value="-1" condition="ge(#PresentTitleY,#ProginfoPlaceYLim)" default="sub(#LogoSymbX,1,#PaddingW)" />
+    <variable id="PresentShortTextW"   value="-1" condition="ge(#PresentShortTextY,#ProginfoPlaceYLim)" default="sub(#LogoSymbX,1,#PaddingW)" />
+    <variable id="FollowingTitleW"     value="-1" condition="ge(#FollowingTitleY,#ProginfoPlaceYLim)" default="sub(#LogoSymbX,1,#PaddingW)" />
+    <variable id="FollowingShortTextW" value="-1" condition="ge(#FollowingShortTextY,#ProginfoPlaceYLim)" default="sub(#LogoSymbX,1,#PaddingW)" />
+    <variable id="RecordingsAreaW"     value="-1" condition="ge(#RecordingsAreaY,#ProginfoPlaceYLim)" default="sub(#LogoSymbX,1,#PaddingW)" />
+
+    <variable id="RecordingsLineY"     value="#RecordingsAreaY"/>
+    <variable id="RecordingsTextY"     value="add(#RecordingsLineY,#LineThickness,1)" />
+    <variable id="RecordingsSymbolY"   value="add(#RecordingsTextY,div(sub(FontLineHeight('FontInfoSmall2'),#SymbolH),2))"/>
+
 
-    <text x1="0" x2="-1" y1="#PresentTextY" height="FontLineHeight('FontInfo')" color="black" align="left" font="FontInfo">
-    {PresentTitle}
+    <!--variable id="PresentShortTextY"   value="add(#PresentTitleY,FontLineHeight('FontTitle'))" /-->
+    <!--variable id="FollowingTextY"      value="add(#PresentShortTextY,FontLineHeight('FontTitleSmall'))" /-->
+    <!--variable id="FollowingShortTextY" value="add(#FollowingTextY,FontLineHeight('FontInfoSmall'))" /-->
+
+    <text x="0" y="#PresentTitleY" width="#PresentTitleW" height="FontLineHeight('FontTitle')" color="#ColPresentTitle" align="left" font="FontTitle">
+      {PresentTitle}
+    </text>
+
+    <text x="0" y="#PresentShortTextY" condition="gt(#ProginfoLines,3)" width="#PresentShortTextW" height="FontLineHeight('FontTitleSmall')" color="#ColPresentTitle" align="left" font="FontTitleSmall">
+      {PresentShortText}
     </text>
-    <rectangle x1="0" x2="-1" y1="#RecordingsLineY" height="#LineThickness" color="black" filled="yes"/>
-    <image x="0" y="#RecordingsSymbolY" color="black" path="#SymbolRecording" condition="{IsRecording}"/>
-    <text x1="add(#SymbolW,2)" x2="-1" y1="#RecordingsTextY" height="FontLineHeight('FontTimes')" color="black" align="left" font="FontTimes">
-    {Recordings}
+    <block condition="{FollowingValid}">
+      <text x="0" y="#FollowingTitleY" condition="or(gt(#ProginfoLines,3),not({IsRecording}))" height="FontLineHeight('FontInfoSmall')" color="#ColPresentTitle" align="left" font="FontInfoSmall">
+        {FollowingStartDateTime:%H\:%M}
+      </text>
+      <text x="FontTextWidth('FontInfoSmall','00:00  ')" condition="or(gt(#ProginfoLines,3),not({IsRecording}))" y="#FollowingTitleY" width="sub(#FollowingTitleW,FontTextWidth('FontInfoSmall','00:00  '))" height="FontLineHeight('FontInfoSmall')" color="#ColPresentTitle" align="left" font="FontInfoSmall">
+        {FollowingTitle}
+      </text>
+      <text x="FontTextWidth('FontInfoSmall','00:00  ')" condition="or(gt(#ProginfoLines,4),not({IsRecording}))" y="#FollowingShortTextY" width="sub(#FollowingShortTextW,FontTextWidth('FontInfoSmall','00:00  '))" height="FontLineHeight('FontInfoSmall2')" color="#ColPresentTitle" align="left" font="FontInfoSmall2">
+        {FollowingShortText}
+      </text>
+    </block>
+
+    <rectangle x1="0" x2="-1" y1="#RecordingsLineY" height="#LineThickness" condition="{IsRecording}" color="#ColBorder" filled="yes"/>
+    <image x="0" y="#RecordingsSymbolY" color="#ColSymbol" path="#SymbolRecording" condition="{IsRecording}"/>
+    <text x1="add(#SymbolW,2)" x2="-1" y1="#RecordingsTextY" height="FontLineHeight('FontInfoSmall2')" color="#ColRecText" align="left" font="FontInfoSmall2">
+      {Recordings}
     </text>
   </display>
+
   <display id="volume">
     <variable id="VolumeBarX" value="20"/>
     <variable id="VolumeBarW" value="sub({ScreenWidth},mul(2,#VolumeBarX))"/>
@@ -103,15 +270,16 @@
     <variable id="MuteImage" value="'images/mute.pbm'"/>
     <variable id="MuteImageW" value="ImageWidth(#MuteImage)"/>
     <variable id="MuteImageH" value="ImageHeight(#MuteImage)"/>
-    <rectangle x1="#VolumeBarX" y1="#VolumeBarY" width="#VolumeBarW" height="#VolumeBarH" color="white" filled="yes" radius="3"/>
-    <rectangle x1="add(#VolumeBarX,2)" y1="add(#VolumeBarY,2)" width="sub(#VolumeBarW,4)" height="sub(#VolumeBarH,4)" color="black" radius="2"/>
+    <rectangle x1="#VolumeBarX" y1="#VolumeBarY" width="#VolumeBarW" height="#VolumeBarH" color="#ColVolumeBG" filled="yes" radius="3"/>
+    <rectangle x1="add(#VolumeBarX,2)" y1="add(#VolumeBarY,2)" width="sub(#VolumeBarW,4)" height="sub(#VolumeBarH,4)" color="#ColVolumeFG" radius="2"/>
     <block condition="not({VolumeIsMute})">
-      <progress x1="add(#VolumeBarX,4)" y1="add(#VolumeBarY,4)" width="sub(#VolumeBarW,8)" height="sub(#VolumeBarH,8)" color="black" direction="0" current="{VolumeCurrent}" total="{VolumeTotal}"/>
+      <progress x1="add(#VolumeBarX,4)" y1="add(#VolumeBarY,4)" width="sub(#VolumeBarW,8)" height="sub(#VolumeBarH,8)" color="#ColVolumeBar" direction="0" current="{VolumeCurrent}" total="{VolumeTotal}"/>
     </block>
     <block condition="{VolumeIsMute}">
-      <image x="div(sub({ScreenWidth},#MuteImageW),2)" y="div(sub({ScreenHeight},#MuteImageH),2)" color="black" path="#MuteImage"/>
+      <image x="div(sub({ScreenWidth},#MuteImageW),2)" y="div(sub({ScreenHeight},#MuteImageH),2)" color="#ColVolumeBar" path="#MuteImage"/>
     </block>
   </display>
+
   <display id="message">
     <variable id="MessageX" value="10"/>
     <variable id="MessageW" value="sub({ScreenWidth},mul(2,#MessageX))"/>
@@ -121,20 +289,22 @@
     <variable id="MessageBitmap" value="'images/message.pbm'"/>
     <variable id="MessageBitmapW" value="ImageWidth(#MessageBitmap)"/>
     <variable id="MessageBitmapH" value="ImageHeight(#MessageBitmap)"/>
-    <rectangle x1="#MessageX" y1="#MessageY" width="#MessageW" height="#MessageH" color="white" filled="yes" radius="3"/>
-    <rectangle x1="add(#MessageX,2)" y1="add(#MessageY,2)" width="sub(#MessageW,4)" height="sub(#MessageH,4)" color="black" radius="2"/>
+
+    <rectangle x1="#MessageX" y1="#MessageY" width="#MessageW" height="#MessageH" color="#ColMessageBG" filled="yes" radius="3"/>
+    <rectangle x1="add(#MessageX,2)" y1="add(#MessageY,2)" width="sub(#MessageW,4)" height="sub(#MessageH,4)" color="#ColMessageFG" radius="2"/>
     <block condition="lt(#MessageBitmapH,sub(#MessageH,12))">
-      <image x1="add(#MessageX,6)" y1="add(#MessageY,6)" color="black" path="#MessageBitmap"/>
-      <text x1="add(add(#MessageX,10),#MessageBitmapW)" y1="add(#MessageY,4)" width="sub(sub(#MessageW,14),#MessageBitmapW)" height="#MessageTextH" color="black" align="left" multiline="yes" font="FontInfo">
+      <image x1="add(#MessageX,6)" y1="add(#MessageY,6)" color="#ColMessageIcon" path="#MessageBitmap"/>
+      <text x1="add(add(#MessageX,10),#MessageBitmapW)" y1="add(#MessageY,4)" width="sub(sub(#MessageW,14),#MessageBitmapW)" height="#MessageTextH" color="#ColMessageText" align="left" multiline="yes" font="FontInfo">
       {Message}
       </text>
     </block>
     <block condition="ge(#MessageBitmapH,sub(#MessageH,12))">
-      <text x1="add(#MessageX,4)" y1="add(#MessageY,4)" width="sub(#MessageW,8)" height="#MessageTextH" color="black" align="left" multiline="yes" font="FontInfo">
+      <text x1="add(#MessageX,4)" y1="add(#MessageY,4)" width="sub(#MessageW,8)" height="#MessageTextH" color="#ColMessageText" align="left" multiline="yes" font="FontInfo">
       {Message}
       </text>
     </block>
   </display>
+
   <display id="replay">
     <variable id="ReplayProgressH" value="14"/>
     <variable id="ReplayProgressGap" value="1"/>
@@ -142,71 +312,82 @@
     <variable id="ReplayProgressY" value="sub(#ReplayTimeY,#ReplayProgressH,#ReplayProgressGap)"/>
     <variable id="ReplayLogo" value="'{ConfigPath}/logos/replay/replay-{ReplayMode}_m.glcd'" condition="le({ScreenHeight},64)"/>
     <variable id="ReplayLogo" value="'{ConfigPath}/logos/replay/replay-{ReplayMode}_l.glcd'"/>
+
     <block condition="{SettingShowReplayLogo}">
-      <image x="#LogoX" y="0" color="black" path="#ReplayLogo"/>
-      <rectangle x1="sub(#LogoX,#LineThickness)" width="#LineThickness" y1="0" height="#LogoH" color="black" filled="yes"/>
-      <rectangle x1="sub(#LogoX,#LineThickness)" x2="-1" y1="#LogoH" height="#LineThickness" color="black" filled="yes"/>
-      <text x1="0" x2="sub(#LogoX,#LineThickness,2)" y1="0" y2="#ReplayProgressY" color="black" align="left" multiline="yes" font="FontInfo">
+      <image x="#LogoX" y="0" color="#ColReplayLogo" path="#ReplayLogo"/>
+      <rectangle x1="sub(#LogoX,#LineThickness)" width="#LineThickness" y1="0" height="#LogoH" color="#ColReplayBorder" filled="yes"/>
+      <rectangle x1="sub(#LogoX,#LineThickness)" x2="-1" y1="#LogoH" height="#LineThickness" color="#ColReplayBorder" filled="yes"/>
+      <text x1="0" x2="sub(#LogoX,#LineThickness,2)" y1="0" y2="#ReplayProgressY" color="#ColReplayText" align="left" multiline="yes" font="FontInfo">
       {ReplayTitle}
       </text>
     </block>
     <block condition="not({SettingShowReplayLogo})">
-      <text x1="0" x2="-1" y1="0" y2="#ReplayProgressY" color="black" align="left" multiline="yes" font="FontInfo">
+      <text x1="0" x2="-1" y1="0" y2="#ReplayProgressY" color="#ColReplayText" align="left" multiline="yes" font="FontInfo">
       {ReplayTitle}
       </text>
     </block>
-    <rectangle x1="0" y1="#ReplayProgressY" width="15" height="14" color="black"/>
-    <image x="1" y="add(#ReplayProgressY,1)" color="black" path="symbols/replay-play.pbm" condition="{ReplayIsPlaying}"/>
-    <image x="1" y="add(#ReplayProgressY,1)" color="black" path="symbols/replay-pause.pbm" condition="{ReplayIsPausing}"/>
-    <image x="1" y="add(#ReplayProgressY,1)" color="black" path="symbols/replay-fast-fwd.pbm" condition="{ReplayIsFastForward}"/>
-    <image x="1" y="add(#ReplayProgressY,1)" color="black" path="symbols/replay-fast-rwd.pbm" condition="{ReplayIsFastRewind}"/>
-    <image x="1" y="add(#ReplayProgressY,1)" color="black" path="symbols/replay-slow-fwd.pbm" condition="{ReplayIsSlowForward}"/>
-    <image x="1" y="add(#ReplayProgressY,1)" color="black" path="symbols/replay-slow-rwd.pbm" condition="{ReplayIsSlowRewind}"/>
-    <rectangle x1="14" x2="-1" y1="#ReplayProgressY" height="#ReplayProgressH" color="black"/>
-    <progress x1="16" x2="-3" y1="add(#ReplayProgressY,2)" height="sub(#ReplayProgressH,4)" color="black" direction="0" current="{ReplayPosition}" total="{ReplayDuration}"/>
-    <text x1="0" x2="-1" y1="#ReplayTimeY" y2="-1" color="black" align="left" font="FontInfo">
+    <rectangle x1="0" y1="#ReplayProgressY" width="15" height="14" color="#ColReplayBorder"/>
+    <image x="1" y="add(#ReplayProgressY,1)" color="#ColReplayLogo" path="symbols/replay-play.pbm" condition="{ReplayIsPlaying}"/>
+    <image x="1" y="add(#ReplayProgressY,1)" color="#ColReplayLogo" path="symbols/replay-pause.pbm" condition="{ReplayIsPausing}"/>
+    <image x="1" y="add(#ReplayProgressY,1)" color="#ColReplayLogo" path="symbols/replay-fast-fwd.pbm" condition="{ReplayIsFastForward}"/>
+    <image x="1" y="add(#ReplayProgressY,1)" color="#ColReplayLogo" path="symbols/replay-fast-rwd.pbm" condition="{ReplayIsFastRewind}"/>
+    <image x="1" y="add(#ReplayProgressY,1)" color="#ColReplayLogo" path="symbols/replay-slow-fwd.pbm" condition="{ReplayIsSlowForward}"/>
+    <image x="1" y="add(#ReplayProgressY,1)" color="#ColReplayLogo" path="symbols/replay-slow-rwd.pbm" condition="{ReplayIsSlowRewind}"/>
+    <rectangle x1="14" x2="-1" y1="#ReplayProgressY" height="#ReplayProgressH" color="#ColReplayBorder"/>
+    <progress x1="16" x2="-3" y1="add(#ReplayProgressY,2)" height="sub(#ReplayProgressH,4)" color="#ColReplayBar" direction="0" current="{ReplayPosition}" total="{ReplayDuration}"/>
+    <text x1="0" x2="-1" y1="#ReplayTimeY" y2="-1" color="#ColReplayText" align="left" font="FontInfo">
     {ReplayPositionIndex:%H\:%M\:%S}
     </text>
-    <text x1="0" x2="-1" y1="#ReplayTimeY" y2="-1" color="black" align="right" font="FontInfo">
+    <text x1="0" x2="-1" y1="#ReplayTimeY" y2="-1" color="#ColReplayText" align="right" font="FontInfo">
     {ReplayDurationIndex:%H\:%M\:%S}
     </text>
   </display>
+
   <display id="menu">
     <variable id="ButtonPitch" value="div({ScreenWidth},4)"/>
     <variable id="ButtonWidth" value="sub(#ButtonPitch,2)"/>
     <variable id="ButtonHeight" value="add(FontLineHeight('FontMenuButton'),2)"/>
     <variable id="ButtonY" value="mul(#ButtonHeight,-1)"/>
     <variable id="ItemHeight" value="FontLineHeight('FontMenuItem')"/>
-    <variable id="ArrowBitmap" value="'images/arrow_small.pbm'" condition="le({ScreenHeight},64)"/>
-    <variable id="ArrowBitmap" value="'images/arrow.pbm'"/>
-    <variable id="ArrowWidth" value="ImageWidth(#ArrowBitmap)"/>
-    <variable id="ArrowHeight" value="ImageHeight(#ArrowBitmap)"/>
-    <variable id="ArrowY" value="div(sub(#ItemHeight,#ArrowHeight),2)" condition="le({ScreenHeight},64)"/>
-    <variable id="ArrowY" value="add(div(sub(#ItemHeight,#ArrowHeight),2),2)"/>
-
-    <text x1="0" x2="-1" height="FontLineHeight('FontMenuTitle')" color="black" font="FontMenuTitle">{MenuTitle}</text>
-    <rectangle x1="0" y1="add(FontLineHeight('FontMenuTitle'),2)" x2="-1" height="#LineThickness" color="black" filled="yes"/>
+    <!--variable id="ArrowBitmap" value="'images/arrow_small.pbm'" condition="le({ScreenHeight},64)"/-->
+    <!--variable id="ArrowBitmap" value="'images/arrow.pbm'"/-->
+    <!--variable id="ArrowWidth" value="ImageWidth(#ArrowBitmap)"/-->
+    <!--variable id="ArrowHeight" value="ImageHeight(#ArrowBitmap)"/-->
+    <!--variable id="ArrowY" value="div(sub(#ItemHeight,#ArrowHeight),2)" condition="le({ScreenHeight},64)"/-->
+    <!--variable id="ArrowY" value="add(div(sub(#ItemHeight,#ArrowHeight),2),2)"/-->
+
+    <rectangle x1="0" y1="0" width="{ScreenWidth}" height="add(FontLineHeight('FontMenuTitle'),1)" color="#ColMenuHeaderBG" filled="yes"/>
+    <text x1="#PaddingW" x2="-1" height="FontLineHeight('FontMenuTitle')" color="#ColMenuHeaderFG" font="FontMenuTitle">{MenuTitle}</text>
+    <rectangle x1="0" y1="add(FontLineHeight('FontMenuTitle'),2)" x2="-1" height="#LineThickness" color="#ColMenuBorder" filled="yes"/>
     <list x1="0" y1="add(FontLineHeight('FontMenuTitle'),4)" x2="-1" y2="#ButtonY">
       <item height="#ItemHeight"/>
-      <text x1="#ArrowWidth" x2="-1" y1="0" height="#ItemHeight" color="black" font="FontMenuItem">{MenuItem}</text>
-      <image x="0" y="#ArrowY" color="black" path="#ArrowBitmap" condition="{IsMenuCurrent}"/>
-      <text x1="#ArrowWidth" x2="-1" y1="0" height="#ItemHeight" color="black" font="FontMenuItem">{MenuCurrent}</text>
+      <rectangle x="0" y="0" height="add(#ItemHeight,1)" color="#ColMenuSelected" condition="{IsMenuCurrent}" filled="yes"/>
+      <text x1="#PaddingW" x2="-1" y1="0" height="#ItemHeight" color="#ColMenuEntryCurr" font="FontMenuItem">{MenuCurrent}</text>
+      <text x1="#PaddingW" x2="-1" y1="0" height="#ItemHeight" color="#ColMenuEntry" font="FontMenuItem">{MenuItem}</text>
+      <!--text x1="#ArrowWidth" x2="-1" y1="0" height="#ItemHeight" color="#ColMenuEntryCurr" font="FontMenuItem">{MenuCurrent}</text-->
+      <!--image x="0" y="#ArrowY" color="#ColMenuEntryMarker" path="#ArrowBitmap" condition="{IsMenuCurrent}"/-->
+      <!--text x1="#ArrowWidth" x2="-1" y1="0" height="#ItemHeight" color="#ColMenuEntry" font="FontMenuItem">{MenuItem}</text-->
     </list>
     <block condition="{ButtonRed}">
-      <rectangle x1="add(mul(#ButtonPitch,0),1)" y1="#ButtonY" width="#ButtonWidth" height="#ButtonHeight" color="black" filled="yes" radius="2"/>
-      <text x1="add(mul(#ButtonPitch,0),2)" y1="#ButtonY" width="sub(#ButtonPitch,4)" height="#ButtonHeight" color="white" align="center" font="FontMenuButton">{ButtonRed}</text>
+      <rectangle x1="add(mul(#ButtonPitch,0),1)" y1="#ButtonY" width="#ButtonWidth" height="#ButtonHeight" color="#ColMenuButtonRBG" filled="yes" radius="2"/>
+      <text x1="add(mul(#ButtonPitch,0),2)" y1="#ButtonY" width="sub(#ButtonPitch,4)" height="#ButtonHeight" color="#ColMenuButtonRFG" align="center" scrollmode="once" font="FontMenuButton">{ButtonRed}</text>
     </block>
     <block condition="{ButtonGreen}">
-      <rectangle x1="add(mul(#ButtonPitch,1),1)" y1="#ButtonY" width="#ButtonWidth" height="#ButtonHeight" color="black" filled="yes" radius="2"/>
-      <text x1="add(mul(#ButtonPitch,1),2)" y1="#ButtonY" width="sub(#ButtonPitch,4)" height="#ButtonHeight" color="white" align="center" font="FontMenuButton">{ButtonGreen}</text>
+      <rectangle x1="add(mul(#ButtonPitch,1),1)" y1="#ButtonY" width="#ButtonWidth" height="#ButtonHeight" color="#ColMenuButtonGBG" filled="yes" radius="2"/>
+      <text x1="add(mul(#ButtonPitch,1),2)" y1="#ButtonY" width="sub(#ButtonPitch,4)" height="#ButtonHeight" color="#ColMenuButtonGFG" align="center" scrollmode="once" font="FontMenuButton">{ButtonGreen}</text>
     </block>
     <block condition="{ButtonYellow}">
-      <rectangle x1="add(mul(#ButtonPitch,2),1)" y1="#ButtonY" width="#ButtonWidth" height="#ButtonHeight" color="black" filled="yes" radius="2"/>
-      <text x1="add(mul(#ButtonPitch,2),2)" y1="#ButtonY" width="sub(#ButtonPitch,4)" height="#ButtonHeight" color="white" align="center" font="FontMenuButton">{ButtonYellow}</text>
+      <rectangle x1="add(mul(#ButtonPitch,2),1)" y1="#ButtonY" width="#ButtonWidth" height="#ButtonHeight" color="#ColMenuButtonYBG" filled="yes" radius="2"/>
+      <text x1="add(mul(#ButtonPitch,2),2)" y1="#ButtonY" width="sub(#ButtonPitch,4)" height="#ButtonHeight" color="#ColMenuButtonYFG" align="center" scrollmode="once" font="FontMenuButton">{ButtonYellow}</text>
     </block>
     <block condition="{ButtonBlue}">
-      <rectangle x1="add(mul(#ButtonPitch,3),1)" y1="#ButtonY" width="#ButtonWidth" height="#ButtonHeight" color="black" filled="yes" radius="2"/>
-      <text x1="add(mul(#ButtonPitch,3),2)" y1="#ButtonY" width="sub(#ButtonPitch,4)" height="#ButtonHeight" color="white" align="center" font="FontMenuButton">{ButtonBlue}</text>
+      <rectangle x1="add(mul(#ButtonPitch,3),1)" y1="#ButtonY" width="#ButtonWidth" height="#ButtonHeight" color="#ColMenuButtonBBG" filled="yes" radius="2"/>
+      <text x1="add(mul(#ButtonPitch,3),2)" y1="#ButtonY" width="sub(#ButtonPitch,4)" height="#ButtonHeight" color="#ColMenuButtonBFG" align="center" scrollmode="once" font="FontMenuButton">{ButtonBlue}</text>
     </block>
+
+    <block condition="{MenuText}">
+      <text x="#PaddingW" y="add(FontLineHeight('FontMenuTitle'),4)" y2="#ButtonY" color="#ColMenuText" multiline="yes" mlrelscroll="{MenuTextScroll}" font="FontMenuItem">{MenuText}</text>
+    </block>
+
   </display>
 </skin>