Add css properties to gr-main-header and gr-fixed-panel
Change-Id: I7f8528b5d24f40048430bc43a39cdcc8226a3dd0
(cherry picked from commit afd40821062ee784438c5f4c3161a2a46887107a)
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 7172978..e38b16e 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 @@
}
.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 d4975ca..7996ff7 100644
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -94,17 +94,21 @@
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 489dede..fd666b7 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.html
+++ b/polygerrit-ui/app/styles/themes/app-theme.html
@@ -18,13 +18,19 @@
: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 @@
--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 1620e49..23fa04d 100644
--- a/polygerrit-ui/app/styles/themes/dark-theme.html
+++ b/polygerrit-ui/app/styles/themes/dark-theme.html
@@ -20,6 +20,9 @@
--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 @@
--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);
