MythCenter: make the Program Details screen consistent with the wide …

…version

* Add base definitions for an horizontal and vertical scroll bar.
* Add base definition of a webbrowser with scroll bars and smooth scroll.
* Update the progdetails window to use the basewebbrowser.

Refs #11477.

mythtv/themes/MythCenter/base.xml

@@ -609,6 +609,60 @@
         </imagetype>
     </progressbar>
 
+    <!-- Base definition of a vertical scrollbar -->
+    <scrollbar name="basevertscrollbar">
+        <area>0,0,14,500</area>
+        <layout>vertical</layout>
+        <hidedelay>0</hidedelay>
+        <shape name="background">
+            <area>0,0,100%,100%</area>
+            <type>roundbox</type>
+            <line color="#aaaaaa" alpha="255" width="1" />
+            <fill style="gradient">
+                <gradient direction="diagonal">
+                    <stop position="0" color="#999999" alpha="255" />
+                    <stop position="100" color="#999999" alpha="120" />
+                </gradient>
+            </fill>
+            <cornerradius>12</cornerradius>
+        </shape>
+        <shape name="slider">
+            <area>0,0,14,40</area>
+            <type>roundbox</type>
+            <line color="#0895f8" alpha="255" width="1" />
+            <fill style="gradient">
+                <gradient direction="diagonal">
+                    <stop position="0" color="#0767AB" alpha="255" />
+                    <stop position="100" color="#0767AB" alpha="120" />
+                </gradient>
+            </fill>
+            <cornerradius>12</cornerradius>
+        </shape>
+    </scrollbar>
+
+    <!-- Base definition of a horizontal scrollbar -->
+    <scrollbar name="basehorizscrollbar" from="basevertscrollbar">
+        <area>0,0,700,14</area>
+        <layout>horizontal</layout>
+        <shape name="slider">
+            <area>0,0,40,14</area>
+        </shape>
+    </scrollbar>
+
+    <!-- Base definition of a webbrowser -->
+    <webbrowser name="basewebbrowser">
+        <area>0,0,700,500</area>
+        <browserarea>0,0,100%-16,100%-16</browserarea>
+        <zoom>1.0</zoom>
+        <scrollduration>500</scrollduration>
+        <scrollbar name="vertscrollbar" from="basevertscrollbar">
+            <area>100%-14,0,14,100%-14</area>
+        </scrollbar>
+        <scrollbar name="horizscrollbar" from="basehorizscrollbar">
+            <area>0,100%-14,100%-14,14</area>
+        </scrollbar>
+    </webbrowser>
+
     <!-- Base definition of a shape used as a background on many screens -->
     <shape name="basebackground">
         <area>0,0,10,10</area>

mythtv/themes/MythCenter/schedule-ui.xml

@@ -1220,7 +1220,7 @@
             <fill color="#131564"/>
         </shape>
 
-        <webbrowser name="browser">
+        <webbrowser name="browser" from="basewebbrowser">
             <area>50,70,700,480</area>
             <zoom>1.0</zoom>
             <background color="#131564"/>