From e7903e44f8e9d84608d8501a688463944d4df443 Mon Sep 17 00:00:00 2001
From: "Steinwender, Tamara" <tamara.steinwender@tugraz.at>
Date: Thu, 16 Dec 2021 16:34:32 +0100
Subject: [PATCH] Revert "Remove hover effekt"
This reverts commit 6c632dc6ae1686a23e935bb0824616b1621e1ff4
---
packages/app-shell/src/app-shell.js | 30 ++++++++++++-
packages/app-shell/src/auth-menu-button.js | 14 +++++++
.../app-shell/src/dbp-app-shell-welcome.js | 16 +++++++
packages/auth/src/login-button.js | 10 +++++
packages/common/dbp-common-demo.js | 5 +++
packages/common/styles.js | 42 ++++++++++++++++++-
packages/file-handling/src/clipboard.js | 5 +++
packages/file-handling/src/styles.js | 6 +--
.../language-select/src/language-select.js | 5 +++
packages/notification/src/notification.js | 6 +--
.../qr-code-scanner/src/qr-code-scanner.js | 7 ++++
toolkit-showcase/src/styles.js | 17 ++++++++
12 files changed, 154 insertions(+), 9 deletions(-)
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index 2056752e..133c7507 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -569,7 +569,11 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
header .hd2-left .header {
margin-left: 50px;
}
-
+
+ header .hd2-left a:hover {
+ color: var(--dbp-accent-dark);
+ }
+
header .hd2-right {
grid-area: hd2-right;
display: flex;
@@ -606,13 +610,35 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
padding: 0;
}
+ footer a:hover {
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
+ }
+
+ /* We don't allow inline-svg */
+ /*
+ footer .int-link-external::after {
+ content: "\\00a0\\00a0\\00a0\\00a0";
+ background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%225.6842mm%22%20width%3D%225.6873mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2020.151879%2020.141083%22%3E%3Cg%20transform%3D%22translate(-258.5%20-425.15)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-width%3A1.2%3Bfill%3Anone%22%20d%3D%22m266.7%20429.59h-7.5029v15.002h15.002v-7.4634%22%2F%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-width%3A1.2%3Bfill%3Anone%22%20d%3D%22m262.94%20440.86%2015.002-15.002%22%2F%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-width%3A1.2%3Bfill%3Anone%22%20d%3D%22m270.44%20425.86h7.499v7.499%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+ background-size:contain;
+ background-repeat: no-repeat;
+ background-position:center center;
+ margin: 0 0.5% 0 1.5%;
+ font-size:94%;
+ }
+ */
+
.menu a {
padding: 0.3em;
font-weight: 300;
color: var(--dbp-text-dark);
display: block;
}
-
+
+ .menu a:hover {
+ color: var(--dbp-accent-dark);
+ }
+
.menu a.selected {
border-left: 2px solid var(--dbp-accent-dark);
font-weight: bolder;
diff --git a/packages/app-shell/src/auth-menu-button.js b/packages/app-shell/src/auth-menu-button.js
index d162064b..568461db 100644
--- a/packages/app-shell/src/auth-menu-button.js
+++ b/packages/app-shell/src/auth-menu-button.js
@@ -141,6 +141,10 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
text-decoration: none;
}
+ .menu a:hover {
+ color: var(--dbp-accent-dark);
+ }
+
.menu a.selected { color: var(--dbp-text-light); background-color: var(--dbp-secondary-dark); }
.dropdown-item {
@@ -185,11 +189,21 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
transition: background-color 0.15s, color 0.15s;
}
+ .login-button:hover {
+ color: var(--dbp-accent-dark);
+ cursor: pointer;
+ transition: none;
+ }
+
.login-box {
display: flex;
align-items: center;
}
+ .login-box:hover svg path {
+ fill: var(--dbp-base-light);
+ }
+
.login-box .label {
padding-left: 0.2em;
}
diff --git a/packages/app-shell/src/dbp-app-shell-welcome.js b/packages/app-shell/src/dbp-app-shell-welcome.js
index d8437ed4..15c79424 100644
--- a/packages/app-shell/src/dbp-app-shell-welcome.js
+++ b/packages/app-shell/src/dbp-app-shell-welcome.js
@@ -48,6 +48,10 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
margin-top: -1px;
line-height: initial;
}
+
+ h2 a:hover {
+ color: var(--dbp-accent-dark);
+ }
h2 a {
cursor: pointer;
@@ -65,6 +69,18 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
animation: 0.15s linkIconOut;
font-size: 100%;
}
+
+ /* h2 a:hover::after {
+ content: "\\00a0\\00a0\\00a0";
+ background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.6836mm%22%20width%3D%225.2043mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2018.440707%2030.768605%22%3E%3Cg%20transform%3D%22translate(-382.21%20-336.98)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23FFF%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2%3Bfill%3Anone%22%20d%3D%22m383.22%20366.74%2016.43-14.38-16.43-14.37%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+ background-size: 60%;
+ background-repeat: no-repeat;
+ background-position: center center;
+ margin: 0 0 0 6px;
+ padding: 0 0 -0.75% 0;
+ animation: 0s linkIconIn;
+ font-size: 100%;
+ }*/
`;
}
diff --git a/packages/auth/src/login-button.js b/packages/auth/src/login-button.js
index c6087dca..3574c3b0 100644
--- a/packages/auth/src/login-button.js
+++ b/packages/auth/src/login-button.js
@@ -132,6 +132,16 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
display: flex;
}
+ .login-box:hover svg path {
+ fill: var(--dbp-base-light);
+ }
+
+ .login-box:hover {
+ color: var(--dbp-accent-dark);
+ cursor: pointer;
+ transition: none;
+ }
+
.login-box .label {
padding-left: 0.2em;
}
diff --git a/packages/common/dbp-common-demo.js b/packages/common/dbp-common-demo.js
index 2ea6d731..bb20fee6 100644
--- a/packages/common/dbp-common-demo.js
+++ b/packages/common/dbp-common-demo.js
@@ -54,6 +54,11 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
h1.title {margin-bottom: 1em;}
div.container {margin-bottom: 1.5em;}
+ a:hover {
+ color: #ffbb00 !important;
+ background-color: blue;
+ }
+
.demoblock {
position: relative;
width: 1.1em;
diff --git a/packages/common/styles.js b/packages/common/styles.js
index 589dbde6..e563c13e 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -155,6 +155,24 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
transition: background-color 0.15s, color 0.15s;
}
+ a.is-download:hover {
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
+ }
+
+ /* Inline SVG don't work in our web-components */
+ /*
+ a.is-download:after, a.is-download:hover:after {
+ content: "\\00a0\\00a0\\00a0\\00a0";
+ background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.3021mm%22%20width%3D%228.2977mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2029.401607%2029.41681%22%3E%3Cg%20style%3D%22stroke-width%3A2.1%22%20transform%3D%22translate(-271.68%20-367.92)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-width%3A2.1%3Bfill%3Anone%22%20d%3D%22m300.13%20390.41v2.3918c0%201.9813-1.6064%203.5877-3.5877%203.5877h-20.326c-1.9813%200-3.5877-1.6064-3.5877-3.5877v-2.3918%22%2F%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-width%3A2.1%3Bfill%3Anone%22%20d%3D%22m286.38%20390.27v-21.384%22%2F%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-width%3A2.1%3Bfill%3Anone%22%20d%3D%22m295.13%20381.52-8.7501%208.7462-8.7501-8.7462%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center center;
+ margin: 0 0.25% 0 1.5%;
+ font-size: 94%;
+ }
+ */
+
.title {
color: var(--dbp-text-dark);
font-size: 2rem;
@@ -441,7 +459,14 @@ export function getButtonCSS() {
transition: background-color 0.15s ease 0s, color 0.15s ease 0s;
background: none;
}
-
+
+ button.button:hover:enabled, .button:hover:enabled, button.dt-button:hover:enabled, button.dt-button:hover:not(.disabled) {
+ color: var(--dbp-button-hover-text);
+ background: none;
+ border-color: var(--dbp-button-hover-base);
+ background-color: var(--dbp-button-hover-base);
+ }
+
button.button.is-small, .button.is-small {
border-radius: calc(var(--dbp-border-radius) / 2);
font-size: .75rem;
@@ -835,6 +860,11 @@ export function getDocumentationCSS() {
transition: background-color 0.15s, color 0.15s;
}
+ .documentation a:hover {
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
+ }
+
.documentation ul, .documentation ol, .documentation li {
margin: inherit;
padding: inherit;
@@ -1086,6 +1116,11 @@ export function getLinkCss() {
border-bottom: var(--dbp-border-dark);
}
+ .int-link-external:hover {
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
+ }
+
.int-link-external:after {
content: "\\00a0\\00a0\\00a0";
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.6836mm%22%20width%3D%225.2043mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2018.440707%2030.768605%22%3E%3Cg%20transform%3D%22translate(-382.21%20-336.98)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2%3Bfill%3Anone%22%20d%3D%22m383.22%20366.74%2016.43-14.38-16.43-14.37%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
@@ -1102,6 +1137,11 @@ export function getLinkCss() {
transition: background-color 0.15s, color 0.15s;
border-bottom: var(--dbp-border-dark);
}
+
+ .int-link-internal:hover{
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
+ }
`;
}
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index 35188e7a..ca0da6e2 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -732,6 +732,11 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
padding: 0;
}
+ a:hover {
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
+ }
+
h2:first-child {
margin-top: 0;
margin-bottom: 0px;
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index 460157e7..5fcb1684 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -148,9 +148,9 @@ export function getFileHandlingCss() {
color: var(--dbp-text-dark);
}
- .tabulator-row.tabulator-selected{
- background-color: var(--dbp-secondary-dark);
- color: var(--dbp-text-light);
+ .tabulator-row.tabulator-selectable.tabulator-selected:hover, .tabulator-row.tabulator-selected{
+ background-color: var(--dbp-button-hover-base);
+ color: var(--dbp-button-hover-text);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content{
diff --git a/packages/language-select/src/language-select.js b/packages/language-select/src/language-select.js
index 322c1854..ec4aa356 100644
--- a/packages/language-select/src/language-select.js
+++ b/packages/language-select/src/language-select.js
@@ -84,6 +84,11 @@ export class LanguageSelect extends AdapterLitElement {
display: inline-block;
}
+ a:hover {
+ color: var(--dbp-accent-dark);
+ transition: none;
+ }
+
a {
padding: 0.3em;
display: inline-block;
diff --git a/packages/notification/src/notification.js b/packages/notification/src/notification.js
index a0a57a5c..a3c8f1cc 100644
--- a/packages/notification/src/notification.js
+++ b/packages/notification/src/notification.js
@@ -136,12 +136,12 @@ export class Notification extends DBPLitElement {
width: 2px;
}
- .delete:focus, .modal-close:focus {
- background-color: var(--dbp-text-dark);
+ .delete:hover, .modal-close:hover, .delete:focus, .modal-close:focus {
+ background-color: rgba(10, 10, 10, 0.3);
}
.delete:active, .modal-close:active {
- background-color: var(--dbp-text-dark);
+ background-color: rgba(10, 10, 10, 0.4);
}
#notification {
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index eb53c17d..98c8f12e 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -455,6 +455,13 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
font-size: inherit;
}
+ #videoSource:hover {
+ background: calc(100% - 0.2rem) center no-repeat url("${unsafeCSS(getIconSVGURL('chevron-down'))}");
+ color: var(--dbp-text-dark);
+ background-position-x: calc(100% - 0.4rem);
+ background-size: auto 45%;
+ }
+
select:not(.select)#videoSource{
background-size: auto 45%;
}
diff --git a/toolkit-showcase/src/styles.js b/toolkit-showcase/src/styles.js
index c617d4d8..c2c00a76 100644
--- a/toolkit-showcase/src/styles.js
+++ b/toolkit-showcase/src/styles.js
@@ -36,6 +36,11 @@ export function getDemoCSS() {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
+ a:hover {
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
+ }
+
a:after {
content: "\\00a0\\00a0\\00a0";
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.6836mm%22%20width%3D%225.2043mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2018.440707%2030.768605%22%3E%3Cg%20transform%3D%22translate(-382.21%20-336.98)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2%3Bfill%3Anone%22%20d%3D%22m383.22%20366.74%2016.43-14.38-16.43-14.37%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
@@ -48,6 +53,18 @@ export function getDemoCSS() {
font-size: 103%;
}
+ a:hover::after {
+ content: "\\00a0\\00a0\\00a0";
+ background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.6836mm%22%20width%3D%225.2043mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2018.440707%2030.768605%22%3E%3Cg%20transform%3D%22translate(-382.21%20-336.98)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23FFF%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2%3Bfill%3Anone%22%20d%3D%22m383.22%20366.74%2016.43-14.38-16.43-14.37%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+ background-size: 73%;
+ background-repeat: no-repeat;
+ background-position: center center;
+ margin: 0 0 0 0.75%;
+ padding: 0 0 0.25% 0;
+ animation: 0s linkIconIn;
+ font-size: 103%;
+ }
+
@keyframes linkIconOut {
0% {
filter: invert(100%);
--
GitLab