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 08bb700186..92c0fb8487 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 @@ -40,7 +40,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-element.html b/polygerrit-ui/app/elements/gr-app-element.html index a42622e88a..5c297e7af7 100644 --- a/polygerrit-ui/app/elements/gr-app-element.html +++ b/polygerrit-ui/app/elements/gr-app-element.html @@ -68,13 +68,17 @@ 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; } 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 142dd82b7a..a0cb3d87db 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. html { /* 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 @@ html { --expanded-background-color: #eee; --view-background-color: #fff; --default-horizontal-margin: 1rem; + --deemphasized-text-color: #757575; /* Used on text color for change list that doesn't need user's attention. */ --reviewed-text-color: var(--primary-text-color); diff --git a/polygerrit-ui/app/styles/themes/dark-theme.html b/polygerrit-ui/app/styles/themes/dark-theme.html index 8cf1b13d47..2324fd53b9 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: #e8eaed; --view-background-color: #131416; --border-color: #5f6368; + --header-border-bottom: 1px solid var(--border-color); + --header-border-image: ''; + --footer-border-bottom: 1px solid var(--border-color); --table-header-background-color: #131416; --table-subheader-background-color: #3c4043; --header-background-color: #3c4043; @@ -41,6 +44,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);