diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index 2056752e53ff910e7f92ebf6cb137ba7721f4409..133c7507dd1f89485013d19ed5f12c6044d34d6d 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 d162064b37b10f130272d2f5d5c49e7df8f06301..568461db3ea746a4c5a6af9894184c39425f69a9 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 d8437ed42a2a04173c8c42a262b9a01d71f2b7c6..15c79424a1089608f0666e973c323d05ff17cb1f 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 c6087dcad9b074248822498670bb743d869e39db..3574c3b0e504029e0507e4a9fea1815bbb9f93d2 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 2ea6d7313d71a65a2dd2a6c1388da1945db95704..bb20fee6b104fe970577d1accce863b9ba5ed609 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 589dbde6b19a036abac2d5957c904276d1eef8a5..e563c13e0cfb91f1e895a5f0d241dc898b52b7b8 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 35188e7a5a48877b6c560c897eabcf1c2e7a64a5..ca0da6e2aea59fc739a6e8ab7d85f304d1a23911 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 460157e7b7dae787fdf69698606b88f6171de527..5fcb168427daf22906e11d3e5e95373fbfb54335 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 322c1854bd9ea6002d140e870f70dc014a4cbe17..ec4aa356cec3e15b0fad6fb927a1354488fe6638 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 a0a57a5cbd2507da9f688aee2a4a58a3d44da6a4..a3c8f1ccca63b93cf4843d4c7838cf50ebb0595c 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 eb53c17d3b789ce0040d6d38cdf6fb7bc48cf1dc..98c8f12e5b2ca35b97a0e128abeded52968f98ef 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 c617d4d80b206f8123ce08343d583cd68d8e6bc9..c2c00a76d1bf8802ea311db506bf98a779a27c5a 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%);