Add css properties to gr-main-header and gr-fixed-panel

Change-Id: I7f8528b5d24f40048430bc43a39cdcc8226a3dd0
(cherry picked from commit afd40821062ee784438c5f4c3161a2a46887107a)

4 files changed, 21 insertions, 6 deletions

diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
index 7172978fd4..e38b16e6a8 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
@@ -39,7 +39,7 @@ limitations under the License.
       }
       .bigTitle {
         color: var(--header-text-color);
-        font-size: 1.75rem;
+        font-size: var(--header-title-font-size);
         text-decoration: none;
       }
       .bigTitle:hover {
diff --git a/polygerrit-ui/app/elements/gr-app.html b/polygerrit-ui/app/elements/gr-app.html
index d4975ca0e0..7996ff78a9 100644
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -94,17 +94,21 @@ limitations under the License.
         color: var(--primary-text-color);
       }
       gr-main-header {
-        background-color: var(--header-background-color);
+        background: var(--header-background, var(--header-background-color, #eee));
         padding: 0 var(--default-horizontal-margin);
-        border-bottom: 1px solid var(--border-color);
+        border-bottom: var(--header-border-bottom);
+        border-image: var(--header-border-image);
+        border-right: 0;
+        border-left: 0;
+        border-top: 0;
       }
       gr-main-header.shadow {
         /* Make it obvious for shadow dom testing */
         border-bottom: 1px solid pink;
       }
       footer {
-        background-color: var(--footer-background-color);
-        border-top: 1px solid var(--border-color);
+        background: var(--footer-background, var(--footer-background-color, #eee));
+        border-top: var(--footer-border-top);
         display: flex;
         justify-content: space-between;
         padding: .5rem var(--default-horizontal-margin);
diff --git a/polygerrit-ui/app/styles/themes/app-theme.html b/polygerrit-ui/app/styles/themes/app-theme.html
index 489dede4d7..fd666b7d7b 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.html
+++ b/polygerrit-ui/app/styles/themes/app-theme.html
@@ -18,13 +18,19 @@ limitations under the License.
 :root {
   /* Following vars have LTS for plugin API. */
   --primary-text-color: #000;
+  /* For backwords compatibility we keep this as --header-background-color. */
   --header-background-color: #eee;
   --header-title-content: 'Gerrit';
   --header-icon: none;
   --header-icon-size: 0em;
   --header-text-color: #000;
-  --footer-background-color: var(--header-background-color);
+  --header-title-font-size: 1.75rem;
+  --footer-background-color: #eee;
   --border-color: #ddd;
+  /* This allows to add a border in custom themes */
+  --header-border-bottom: 1px solid var(--border-color);
+  --header-border-image: '';
+  --footer-border-top: 1px solid var(--border-color);
 
   /* Following are not part of plugin API. */
   --selection-background-color: rgba(161, 194, 250, 0.1);
@@ -32,6 +38,7 @@ limitations under the License.
   --expanded-background-color: #eee;
   --view-background-color: #fff;
   --default-horizontal-margin: 1rem;
+
   --deemphasized-text-color: #757575;
   --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --font-weight-bold: 500;
diff --git a/polygerrit-ui/app/styles/themes/dark-theme.html b/polygerrit-ui/app/styles/themes/dark-theme.html
index 1620e49838..23fa04dda3 100644
--- a/polygerrit-ui/app/styles/themes/dark-theme.html
+++ b/polygerrit-ui/app/styles/themes/dark-theme.html
@@ -20,6 +20,9 @@ limitations under the License.
       --primary-text-color: #e2e2e2;
       --view-background-color: #212121;
       --border-color: #555555;
+      --header-border-bottom: 1px solid var(--border-color);
+      --header-border-image: '';
+      --footer-border-bottom: 1px solid var(--border-color);
       --table-header-background-color: #353637;
       --table-subheader-background-color: rgb(19, 20, 22);
       --header-background-color: #5487E5;
@@ -37,6 +40,7 @@ limitations under the License.
       --dropdown-background-color: var(--table-header-background-color);
       --dialog-background-color: var(--view-background-color);
       --chip-background-color: var(--table-header-background-color);
+      --header-title-font-size: 1.75rem;
 
       --select-background-color: var(--table-subheader-background-color);