diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js index 753c81c82cc1f6476868184a3e4bad8ec118bef2..b3f9fe6f3d5d85e385324fa69cb1efa6b0b43ad9 100644 --- a/packages/app-shell/src/app-shell.js +++ b/packages/app-shell/src/app-shell.js @@ -488,6 +488,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) { return css` ${commonStyles.getThemeCSS()} ${commonStyles.getGeneralCSS()} + ${commonStyles.getLinkCss()} .hidden {display: none} diff --git a/packages/common/styles.js b/packages/common/styles.js index 94ec381b5259fe5fbb12ac528777d15129fcbc73..a06f5e57905cb17301e82904644565163bf2ec99 100644 --- a/packages/common/styles.js +++ b/packages/common/styles.js @@ -214,6 +214,8 @@ export function getGeneralCSS(doMarginPaddingReset = true) { color: var(--dbp-text-dark); padding: 0.14rem 1.0rem 0.14rem 0.14rem; } + + `; } @@ -441,6 +443,31 @@ export function getNotificationCSS() { } export function getButtonCSS() { + const docStyle = getComputedStyle(document.documentElement); + let hoverTextCheck = false; + let hoverBaseCheck = false; + if (docStyle) { + const hoverBase = docStyle.getPropertyValue('--dbp-override-hover-base'); + hoverBaseCheck = hoverBase ? true : false + const hoverText = docStyle.getPropertyValue('--dbp-override-hover-text'); + hoverTextCheck = hoverText ? true : false + } + + let hoverTextStyle = css``; + let hoverBaseStyle = css``; + + if (hoverTextCheck) { + hoverTextStyle = css` + color: var(--dbp-hover-text); + `; + } + + if (hoverBaseCheck) { + hoverBaseStyle = css` + background-color: var(--dbp-hover-base); + `; + } + // language=css return css` button.button, .button, button.dt-button { @@ -462,10 +489,9 @@ export function getButtonCSS() { background: none; } - button.button:hover:enabled, .button:hover:enabled, button.dt-button:hover:enabled, button.dt-button:hover:not(.disabled) { - color: var(--dbp-hover-text, currentColor); - /* border-color: var(--dbp-hover-base); */ - background-color: var(--dbp-hover-base, inherit); + button.button:hover:enabled, .button:hover:enabled, button.dt-button:hover:enabled, button.dt-button:hover:not(.disabled), .button:hover { + ${hoverTextStyle} + ${hoverBaseStyle} } button.button.is-small, .button.is-small { @@ -1110,6 +1136,35 @@ export function getActivityCSS() { } export function getLinkCss() { + const docStyle = getComputedStyle(document.documentElement); + let hoverTextCheck = false; + let hoverBaseCheck = false; + if (docStyle) { + const hoverBase = docStyle.getPropertyValue('--dbp-override-hover-base'); + hoverBaseCheck = hoverBase ? true : false + const hoverText = docStyle.getPropertyValue('--dbp-override-hover-text'); + hoverTextCheck = hoverText ? true : false + } + + let hoverTextStyle = css``; + let hoverChevronStyle = css``; + let hoverBaseStyle = css``; + + if (hoverTextCheck) { + hoverTextStyle = css` + color: var(--dbp-hover-text); + border-color: var(--dbp-hover-text); + `; + hoverChevronStyle = css` + background-color: var(--dbp-hover-text); + `; + } + + if (hoverBaseCheck) { + hoverBaseStyle = css` + background-color: var(--dbp-hover-base); + `; + } // language=css return css` .int-link-external, .int-link-internal, .link, .link-without-hover { @@ -1117,9 +1172,8 @@ export function getLinkCss() { } .int-link-external:hover, .int-link-internal:hover, .link:hover { - color: var(--dbp-hover-text); - background-color: var(--dbp-hover-base); - border-color: var(--dbp-hover-text); + ${hoverTextStyle} + ${hoverBaseStyle} } .int-link-external:after, .int-link-internal:after, .link:after, .link-without-hover:after { @@ -1135,7 +1189,7 @@ export function getLinkCss() { } .int-link-external:hover::after, .int-link-internal:hover::after, .link:hover::after{ - background-color: var(--dbp-hover-text); + ${hoverChevronStyle} } `; }