From bfcaa2bcd03b508319057f06e9603187d46aac2e Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Mon, 24 Jan 2022 13:29:48 +0100
Subject: [PATCH] Add hover support
---
packages/common/styles.js | 83 ++++++++++-----------------------------
1 file changed, 20 insertions(+), 63 deletions(-)
diff --git a/packages/common/styles.js b/packages/common/styles.js
index 6f407cca..7ead096b 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -59,8 +59,8 @@ export function getThemeCSS() {
--dbp-border-light: var(--dbp-override-border-light, 1px solid #ffffff);
--dbp-border-dark: var(--dbp-override-border-dark, 1px solid #000000);
--dbp-border-radius: var(--dbp-override-border-radius, 0px);
- --dbp-hover-base: var(--dbp-override-hover-base, var(--dbp-override-dark, var(--dbp-base-light)));
- --dbp-hover-text: var(--dbp-override-hover-text, var(--dbp-override-light, var(--dbp-base-dark)));
+ --dbp-hover-base: var(--dbp-override-hover-base, var(--dbp-override-dark));
+ --dbp-hover-text: var(--dbp-override-hover-text, var(--dbp-override-light));
/* TODO check if there are any uses of this in other apps then remove it */
--dbp-button-hover-base: var(--dbp-override-button-hover-base, var(--dbp-override-dark, #000000));
@@ -71,6 +71,10 @@ export function getThemeCSS() {
background-color: var(--dbp-base-light);
}
+ .dark {
+ background-color: var(--dbp-base-dark);
+ }
+
`;
}
@@ -162,7 +166,7 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
}
a.is-download:hover {
- color: var(--dbp-hover-text);
+ color: var(--dbp-hover-text, var(--dbp-text-dark));
background-color: var(--dbp-hover-base);
}
@@ -447,30 +451,6 @@ 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`
@@ -494,8 +474,8 @@ export function getButtonCSS() {
}
button.button:hover:enabled, .button:hover:enabled, button.dt-button:hover:enabled, button.dt-button:hover:not(.disabled), .button:hover {
- ${hoverTextStyle}
- ${hoverBaseStyle}
+ color: var(--dbp-hover-text, var(--dbp-text-dark));
+ background-color: var(--dbp-hover-base);
}
button.button.is-small, .button.is-small {
@@ -505,10 +485,15 @@ export function getButtonCSS() {
button.button.is-primary, .button.is-primary {
background-color: var(--dbp-primary-dark);
- border-color: var(--dbp-primary-dark);
+ border: var(--dbp-border-dark);
color: var(--dbp-text-light);
}
+ button.button.is-primary:hover {
+ background-color: var(--dbp-hover-base, var(--dbp-primary-dark));
+ color: var(--dbp-hover-text, var(--dbp-text-light));
+ }
+
button.button.is-info, .button.is-info {
background-color: var(--dbp-info-dark);
border-color: var(--dbp-info-dark);
@@ -1140,35 +1125,6 @@ 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 {
@@ -1176,8 +1132,9 @@ export function getLinkCss() {
}
.int-link-external:hover, .int-link-internal:hover, .link:hover {
- ${hoverTextStyle}
- ${hoverBaseStyle}
+ color: var(--dbp-hover-text);
+ border-color: var(--dbp-hover-text);
+ background-color: var(--dbp-hover-base);
}
.int-link-external:after, .int-link-internal:after, .link:after, .link-without-hover:after {
@@ -1187,7 +1144,7 @@ export function getLinkCss() {
mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2022.7%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2022.7%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M386.9%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C387.3%2C380.4%2C387.1%2C380.5%2C386.9%2C380.5z%22%0A%09%09%09%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
- -webkit-mask-position: center center;
+ -webkit-mask-position: center -2px;
mask-position: center center;
margin: 0 2px 0 4px;
padding: 0 0 0.25% 0;
@@ -1196,7 +1153,7 @@ export function getLinkCss() {
}
.int-link-external:hover::after, .int-link-internal:hover::after, .link:hover::after{
- ${hoverChevronStyle}
+ background-color: var(--dbp-hover-text, var(--dbp-text-dark));
}
`;
}
--
GitLab