first attempt at implementing grid-view style for modern theme

themes/modern-DE/assets/light/filled_rating.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 258 258" width="258" height="258"><defs><clipPath id="_clipPath_9Fbs7pfS4tYHQ4Vamu0PmJrhfsMHsdUH"><rect width="258" height="258"/></clipPath></defs><g clip-path="url(#_clipPath_9Fbs7pfS4tYHQ4Vamu0PmJrhfsMHsdUH)"><path d=" M 16.6 129 C 16.6 66.91 67.01 16.5 129.1 16.5 C 191.19 16.5 241.6 66.91 241.6 129 C 241.6 191.09 191.19 241.5 129.1 241.5 C 67.01 241.5 16.6 191.09 16.6 129 Z " fill="rgb(235,235,235)"/><path d=" M 165.594 192.034 L 136.575 176.779 C 132.45 174.609 125.75 174.609 121.625 176.779 L 92.606 192.034 C 88.481 194.203 85.772 192.235 86.56 187.641 L 92.102 155.328 C 92.89 150.735 90.82 144.364 87.482 141.111 L 64.006 118.227 C 60.668 114.974 61.703 111.789 66.315 111.118 L 98.759 106.403 C 103.371 105.734 108.791 101.796 110.854 97.617 L 125.363 68.218 C 127.425 64.039 130.775 64.039 132.837 68.218 L 147.346 97.617 C 149.409 101.796 154.829 105.734 159.441 106.403 L 191.885 111.118 C 196.497 111.789 197.532 114.974 194.194 118.227 L 170.718 141.111 C 167.38 144.364 165.31 150.735 166.098 155.328 L 171.64 187.641 C 172.428 192.235 169.719 194.203 165.594 192.034 Z " fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(233,153,16)" stroke-opacity="100" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/></g></svg>

themes/modern-DE/assets/light/star-unfilled.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <path fill="#d6d6d6" stroke="none"
+          d="M 30.335938 12.546875 L 20.164063 11.472656 L 16 2.132813 L 11.835938 11.472656 L 1.664063 12.546875 L 9.261719 19.394531 L 7.140625 29.398438 L 16 24.289063 L 24.859375 29.398438 L 22.738281 19.394531 Z"/>
+</svg>

themes/modern-DE/assets/light/unfilled_rating.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 258 258" width="258" height="258"><defs><clipPath id="_clipPath_h49qSya0UtYpDJtslSeXteNf8XlkI2gr"><rect width="258" height="258"/></clipPath></defs><g clip-path="url(#_clipPath_h49qSya0UtYpDJtslSeXteNf8XlkI2gr)"><path d=" M 16.6 129.1 C 16.6 67.01 67.01 16.6 129.1 16.6 C 191.19 16.6 241.6 67.01 241.6 129.1 C 241.6 191.19 191.19 241.6 129.1 241.6 C 67.01 241.6 16.6 191.19 16.6 129.1 Z " fill="rgb(235,235,235)"/><path d=" M 165.594 192.134 L 136.575 176.879 C 132.45 174.709 125.75 174.709 121.625 176.879 L 92.606 192.134 C 88.481 194.303 85.772 192.335 86.56 187.741 L 92.102 155.428 C 92.89 150.835 90.82 144.464 87.482 141.211 L 64.006 118.327 C 60.668 115.074 61.703 111.889 66.315 111.218 L 98.759 106.503 C 103.371 105.834 108.791 101.896 110.854 97.717 L 125.363 68.318 C 127.425 64.139 130.775 64.139 132.837 68.318 L 147.346 97.717 C 149.409 101.896 154.829 105.834 159.441 106.503 L 191.885 111.218 C 196.497 111.889 197.532 115.074 194.194 118.327 L 170.718 141.211 C 167.38 144.464 165.31 150.835 166.098 155.428 L 171.64 187.741 C 172.428 192.335 169.719 194.303 165.594 192.134 Z " fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(101,111,110)" stroke-opacity="100" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/></g></svg>

themes/modern-DE/assets/star-filled.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <path fill="#506ad4" stroke="none"
+          d="M 30.335938 12.546875 L 20.164063 11.472656 L 16 2.132813 L 11.835938 11.472656 L 1.664063 12.546875 L 9.261719 19.394531 L 7.140625 29.398438 L 16 24.289063 L 24.859375 29.398438 L 22.738281 19.394531 Z"/>
+</svg>

themes/modern-DE/settings/light.xml

@@ -8,50 +8,47 @@ based on:       Switch Theme for Launchbox by Grila
 -->
 
 <theme>
-	<formatVersion>4</formatVersion>
+	<formatVersion>7</formatVersion>
 
 	<!-- Color Variables -->
 	<variables>
-		
 		<backgroundColor>d9d9d9</backgroundColor>
- 
+		<backgroundColor2>e2e2e2</backgroundColor2>
 		<mainColor>334ff0</mainColor>
 		<secondaryColor>222222</secondaryColor>
 		<systemColor>3aa5ab</systemColor>
- 
 	</variables>
 
+	<!-- system specific styles -->
 	<view name="system">
-	
 		<text name="system_name_1" extra="true">
 			<color>${systemColor}</color>
 		</text>
-		
 		<image name="arrowblock" extra="true">
 			<color>${systemColor}</color>
 		</image>
-		
 	</view>
 
-	<view name="system, basic, detailed, video">
+	<!-- generic styles -->
-
+	<view name="system, basic, detailed, video, grid">
 		<helpsystem name="help">
-			<textColor>22222200</textColor>
 			<iconColor>222222ff</iconColor>
+			<textColor>222222ff</textColor>
+			<iconColorDimmed>222222ff</iconColorDimmed>
+			<textColorDimmed>222222ff</textColorDimmed>
 		</helpsystem>
-
 		<image name="background">
 			<color>${backgroundColor}</color>
 		</image>
-		
 		<image name="topline, bottomline" extra="true">
 			<color>${secondaryColor}</color>
 		</image>
-		
 		<image name="gamelistbuttons, systembuttons" extra="true">
 			<color>${secondaryColor}</color>
 		</image>
-	
+		<rating name="md_rating">
+			<unfilledPath>./assets/light/star-unfilled.svg</unfilledPath>
+		</rating>
 	</view>
 	
 	<view name="detailed, video">
@@ -83,17 +80,27 @@ based on:       Switch Theme for Launchbox by Grila
 	</view>
 
 	<view name="basic">
-		
 		<textlist name="gamelist">
 			<selectedColor>${mainColor}</selectedColor>
 			<primaryColor>${secondaryColor}</primaryColor>
 			<secondaryColor>${secondaryColor}</secondaryColor>
 			<selectorColor>00000000</selectorColor>
 		</textlist>
-	
 	</view>
 
-<feature supported="carousel">
+	<view name="grid">
+		<image name="md_background" extra="true">
+			<color>${backgroundColor2}</color>
+		</image>
+		<image name="md_background_grad_top" extra="true">
+			<path>./assets/light/gradient.png</path>
+		</image>
+		<image name="md_background_grad_bottom" extra="true">
+			<path>./assets/light/gradient.png</path>
+		</image>
+	</view>
+
+	<feature supported="carousel">
 
 		<view name="system">
 

themes/modern-DE/theme.xml

@@ -17,16 +17,15 @@ based on:       Switch Theme by Lilbud
 	<include>./settings/light.xml</include>
 
 	<variables>
-		<mainFont>./assets/Oxygen-Regular.ttf</mainFont>
+		<mainFont>./assets/fonts/nswitchui.ttf</mainFont>
 	</variables>
 	<include>./navigationsounds.xml</include>
 
+	<!-- system specific styles -->
 	<view name="system">
-		
 		<image name="logo">
 			<path>./art/${system.theme}.jpg</path>
 		</image>
-		
 		<text name="system_name_1" extra="true">
 			<text>${system.fullName}</text>
 			<forceUppercase>0</forceUppercase>
@@ -37,30 +36,25 @@ based on:       Switch Theme by Lilbud
 			<alignment>left</alignment>
 			<fontPath>${mainFont}</fontPath>
 		</text>
-		
 		<image name="arrowblock" extra="true">
 			<pos>0.03 0.22</pos>
 			<path>./assets/arrow_block.svg</path>
 		</image>
-	
 	</view>
-    <view name="system, basic, detailed, video">
 
+	<!-- generic styles -->
+	<view name="system, basic, detailed, video, grid">
 		<helpsystem name="help">
 			<pos>0.96 0.935</pos>
 			<origin>1 0</origin>
 			<fontPath>./assets/fonts/nswitchui.ttf</fontPath>
 			<fontSize>0.035f</fontSize>
-			<entrySpacing>16</entrySpacing>
+			<entrySpacing>48</entrySpacing>
-			<iconTextSpacing>8</iconTextSpacing>
+			<iconTextSpacing>12</iconTextSpacing>
 			<textStyle>camelcase</textStyle>
-			<iconColor>0000ffff</iconColor>
-			<iconColorDimmed>ff0000ff</iconColorDimmed>
-			<textColorDimmed>00ff00ff</textColorDimmed>
 			<customButtonIcon button="button_start_XBOX360">:/help/button_start_SNES.svg</customButtonIcon>
 			<customButtonIcon button="button_back_XBOX360">:/help/button_back_SNES.svg</customButtonIcon>
 		</helpsystem>
-
 		<image name="background" extra="true">
 			<pos>0 0</pos>
 			<tile>true</tile>
@@ -69,7 +63,6 @@ based on:       Switch Theme by Lilbud
 			<path>./assets/box.png</path>
 			<zIndex>-100</zIndex>
 		</image>
-		
 		<image name="bottomline" extra="true">
 			<pos>0.5 0.9</pos>
 			<tile>false</tile>
@@ -77,18 +70,19 @@ based on:       Switch Theme by Lilbud
 			<size>0.938 0.001</size>
 			<path>./assets/box.png</path>
 		</image>
-	
+		<rating name="md_rating">
+			<filledPath>./assets/star-filled.svg</filledPath>
+			<unfilledPath>./assets/light/star-unfilled.svg</unfilledPath>
+		</rating>
 	</view>
-	<view name="basic, detailed, video">
 
+	<view name="basic, detailed, video">
 		<textlist name="gamelist">
 			<fontPath>${mainFont}</fontPath>
 			<fontSize>0.028</fontSize>
 			<horizontalMargin>0.01</horizontalMargin>
 			<lineSpacing>2.3</lineSpacing>
 		</textlist>
-		
-		
 		<text name="system_name_1" extra="true">
 			<text>${system.fullName}</text>
 			<forceUppercase>0</forceUppercase>
@@ -98,13 +92,11 @@ based on:       Switch Theme by Lilbud
 			<alignment>left</alignment>
 			<fontPath>${mainFont}</fontPath>
 		</text>
-		
 		<image name="logo">
 			<color>00000000</color>
 			<path>./assets/box.png</path>
 			<pos>1 1</pos>
 		</image>
-		
 		<image name="topline" extra="true">
 			<pos>0.5 0.13</pos>
 			<tile>false</tile>
@@ -112,27 +104,22 @@ based on:       Switch Theme by Lilbud
 			<size>0.938 0.001</size>
 			<path>./assets/box.png</path>
 		</image>
-		
 		<text name="md_lbl_releasedate, md_lbl_developer, md_lbl_genre, md_lbl_players, md_lbl_lastplayed, md_lbl_playcount, md_developer, md_genre, md_players, md_playcount, md_releasedate, md_description" extra="true">
 			<forceUppercase>0</forceUppercase>
 			<fontSize>0.028</fontSize>
 			<fontPath>${mainFont}</fontPath>
 		</text>
-		
 		<datetime name="md_releasedate">
 			<forceUppercase>0</forceUppercase>
 			<fontPath>${mainFont}</fontPath>
 			<fontSize>0.028</fontSize>
 		</datetime>
-		
 		<text name="md_lbl_lastplayed, md_lbl_publisher, md_publsher, md_lbl_rating, md_lbl_playcount, md_playcount">
 			<pos>1 1</pos>
 		</text>
-
-
 	</view>
-	<view name="detailed, video">
 
+	<view name="detailed, video">
 		<textlist name="gamelist">
 			<pos>0.04 0.182</pos>
 			<size>0.31 0.682</size>
@@ -141,46 +128,182 @@ based on:       Switch Theme by Lilbud
 			<selectorHeight>0.06</selectorHeight>
 			<selectorOffsetY>-0.008</selectorOffsetY>
 		</textlist>
-		
 		<text name="md_description">
 			<forceUppercase>0</forceUppercase>
 			<fontSize>0.025</fontSize>
 			<size>0.309 0.336</size>
 			<pos>0.657 0.387</pos>
 		</text>
-		
 		<rating name="md_rating">
 			<pos>0.657 0.747</pos>
 			<size>0.27 0</size>
 		</rating>
-
         <image name="md_broken">
 			<pos>0.966 0.240</pos>
 			<maxSize>0.05 0.05</maxSize>
 			<origin>1 1</origin>
 		</image>
-	
 	</view>
-	<view name="basic">
 
+	<view name="basic">
 		<textlist name="gamelist">
 			<pos>0.04 0.182</pos>
 			<size>0.924 0.682</size>
 			<alignment>center</alignment>
 		</textlist>
-
 	</view>
-	<view name="detailed">
 
+	<view name="detailed">
 		<image name="md_image">
 			<pos>0.360 0.180</pos>
 			<maxSize>0.277 0.615</maxSize>
 			<origin>0 0</origin>
 		</image>
-	
 	</view>
 
-<feature supported="carousel">
+	<view name="grid">
+		<text name="system_name_1" extra="true">
+			<text>${system.fullName}</text>
+			<forceUppercase>0</forceUppercase>
+			<size>0.743 0.031</size>
+			<pos>0.034 0.065</pos>
+			<fontSize>0.03</fontSize>
+			<alignment>left</alignment>
+			<fontPath>${mainFont}</fontPath>
+		</text>
+		<image name="logo">
+			<color>00000000</color>
+			<path>./assets/box.png</path>
+			<pos>1 1</pos>
+		</image>
+		<image name="topline" extra="true">
+			<pos>0.5 0.13</pos>
+			<tile>false</tile>
+			<origin>0.5 0.5</origin>
+			<size>0.938 0.001</size>
+			<path>./assets/box.png</path>
+		</image>
+
+		<!-- games panel -->
+		<imagegrid name="gamegrid">
+			<pos>0.06 0.218</pos>
+			<size>0.63 594</size>
+			<margin>0.006 0.006</margin>
+			<padding>0 0</padding>
+			<autoLayoutSelectedZoom>1</autoLayoutSelectedZoom>
+			<imageSource>screenshot</imageSource>
+		</imagegrid>
+		<gridtile name="default">
+			<size>0.205 0.250</size>
+			<padding>8 8</padding>
+			<backgroundCornerSize>1 1</backgroundCornerSize>
+			<backgroundColor>00000000</backgroundColor>
+		</gridtile>
+		<gridtile name="selected">
+			<size>0.205 0.250</size>
+			<padding>8 8</padding>
+			<backgroundCornerSize>8 8</backgroundCornerSize>
+			<backgroundCenterColor>23caca</backgroundCenterColor>
+			<backgroundEdgeColor>23caca</backgroundEdgeColor>
+		</gridtile>
+
+		<!-- metadata panel (right) -->
+		<image name="md_background" extra="true">
+			<pos>0.725 0.20</pos>
+			<tile>false</tile>
+			<origin>0 0</origin>
+			<size>0.275 0.63</size>
+			<path>./assets/box.png</path>
+		</image>
+		<image name="md_background_grad_top" extra="true">
+			<pos>0.725 0.131</pos>
+			<tile>false</tile>
+			<origin>0 0</origin>
+			<size>0.275 0.07</size>
+			<rotation>180</rotation>
+			<path>./assets/light/gradient.png</path>
+		</image>
+		<image name="md_background_grad_bottom" extra="true">
+			<pos>0.725 0.83</pos>
+			<tile>false</tile>
+			<origin>0 0</origin>
+			<size>0.275 0.07</size>
+			<path>./assets/light/gradient.png</path>
+		</image>
+		<text name="md_description">
+			<lineSpacing>1.2</lineSpacing>
+			<pos>0.75 0.21</pos>
+			<size>0.219 0.275</size>
+			<fontSize>0.03</fontSize>
+		</text>
+		<text name="md_lbl_publisher">
+			<pos>0.75 0.532</pos>
+			<size>0.10625 0.02</size>
+			<fontSize>0.02</fontSize>
+		</text>
+		<text name="md_publisher">
+			<pos>0.75 0.552</pos>
+			<size>0.10625 0.03</size>
+			<fontSize>0.03</fontSize>
+		</text>
+		<text name="md_lbl_developer">
+			<pos>0.8578 0.532</pos>
+			<size>0.10625 0.02</size>
+			<fontSize>0.02</fontSize>
+		</text>
+		<text name="md_developer">
+			<pos>0.8578 0.552</pos>
+			<size>0.10625 0.03</size>
+			<fontSize>0.03</fontSize>
+		</text>
+		<text name="md_lbl_releasedate">
+			<pos>0.75 0.608</pos>
+			<size>0.10625 0.02</size>
+			<fontSize>0.02</fontSize>
+		</text>
+		<datetime name="md_releasedate">
+			<pos>0.75 0.628</pos>
+			<size>0.10625 0.03</size>
+			<fontSize>0.03</fontSize>
+		</datetime>
+		<text name="md_lbl_players">
+			<pos>0.8578 0.608</pos>
+			<size>0.10625 0.02</size>
+			<fontSize>0.02</fontSize>
+		</text>
+		<text name="md_players">
+			<pos>0.8578 0.628</pos>
+			<size>0.10625 0.03</size>
+			<fontSize>0.03</fontSize>
+		</text>
+		<text name="md_lbl_genre">
+			<pos>0.75 0.684</pos>
+			<size>0.10625 0.02</size>
+			<fontSize>0.02</fontSize>
+		</text>
+		<text name="md_genre">
+			<pos>0.75 0.704</pos>
+			<size>0.10625 0.03</size>
+			<fontSize>0.03</fontSize>
+		</text>
+		<text name="md_lbl_rating">
+			<pos>0.75 0.760</pos>
+			<size>0.10625 0.02</size>
+			<fontSize>0.02</fontSize>
+		</text>
+		<rating name="md_rating">
+			<pos>0.75 0.780</pos>
+			<size>0.04 0.03</size>
+		</rating>
+		<text name="md_lbl_lastplayed, md_lbl_playcount">
+			<pos>1 1</pos>
+		</text>
+		<datetime name="md_lastplayed, md_playcount">
+			<pos>1 1</pos>
+		</datetime>
+	</view>
+
+	<feature supported="carousel">
 
 		<view name="system">