Add again hover effect and change it to default none

packages/app-shell/src/app-shell.js

@@ -571,7 +571,8 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
             }
 
             header .hd2-left a:hover {
-                color: var(--dbp-accent-dark);
+                color: var(--dbp-hover-text);
+                background-color: var(--dbp-hover-base);
             }
 
             header .hd2-right {
@@ -611,8 +612,8 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
             }
 
             footer a:hover {
-                color: var(--dbp-accent-dark);
-                border-color: var(--dbp-accent-dark);
+                color: var(--dbp-hover-text);
+                background-color: var(--dbp-hover-base);
             }
 
             /* We don't allow inline-svg */
@@ -636,11 +637,12 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
             }
 
             .menu a:hover {
-                color: var(--dbp-accent-dark);
+                color: var(--dbp-hover-text);
+                background-color: var(--dbp-hover-base);
             }
 
             .menu a.selected {
-                border-left: 2px solid var(--dbp-accent-dark);
+                border-left: 3px solid var(--dbp-accent-dark);
                 font-weight: bolder;
                 padding-left: 0.5em;
 

packages/app-shell/src/auth-menu-button.js

@@ -142,7 +142,8 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
             }
 
             .menu a:hover {
-                color: var(--dbp-accent-dark);
+                color: var(--dbp-hover-text);
+                background-color: var(--dbp-hover-base);
             }
 
             .menu a.selected { color: var(--dbp-text-light); background-color: var(--dbp-secondary-dark); }
@@ -190,7 +191,8 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
             }
 
             .login-button:hover {
-                color: var(--dbp-accent-dark);
+                color: var(--dbp-hover-text);
+                background-color: var(--dbp-hover-base);
                 cursor: pointer;
                 transition: none;
             }
@@ -201,7 +203,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
             }
 
             .login-box:hover svg path {
-                fill: var(--dbp-base-light);
+                fill: var(--dbp-hover-text);
             }
 
             .login-box .label {

packages/app-shell/src/dbp-app-shell-welcome.js

@@ -50,7 +50,8 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
             }
 
             h2 a:hover {
-                color: var(--dbp-accent-dark);
+                color: var(--dbp-hover-text);
+                background-color: var(--dbp-hover-base);
             }
             
             h2 a {
@@ -70,6 +71,8 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
                 font-size: 100%;
             }
 
+           /* TODO Change color(mask) */
+            
            /*     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');
@@ -83,7 +86,6 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
             }*/
         `;
     }
-
     _onVisibilityChanged() {
         this.requestUpdate();
     }

packages/app-shell/src/tugraz-logo.js

@@ -58,11 +58,6 @@ export class TUGrazLogo extends AdapterLitElement {
                 display:block;
             }
 
-             a:focus path {
-                fill:#000 !important;
-                transition:none;
-            }
-
              * {
                 transition:fill 0.15s, stroke 0.15s;
             }

packages/auth/src/login-button.js

@@ -133,11 +133,12 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
             }
 
             .login-box:hover svg path {
-                fill: var(--dbp-base-light);
+                fill: var(--dbp-hover-text);
             }
 
             .login-box:hover {
-                color: var(--dbp-accent-dark);
+                color: var(--dbp-hover-text);
+                background-color: var(--dbp-hover-base);
                 cursor: pointer;
                 transition: none;
             }

packages/common/styles.js

@@ -59,11 +59,13 @@ 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, inherit));
+        --dbp-hover-text: var(--dbp-override-hover-text, var(--dbp-override-light, inherit));
+        
+        /* 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));
         --dbp-button-hover-text: var(--dbp-override-button-hover-text, var(--dbp-override-light, #ffffff));
 
-        --dbp-hover-base: var(--dbp-override-button-hover-base, var(--dbp-override-dark, #000000));
-        --dbp-hover-text: var(--dbp-override-button-hover-text, var(--dbp-override-light, #ffffff));
     }
     
     `;
@@ -156,8 +158,8 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
         }
 
         a.is-download:hover {
-            color: var(--dbp-accent-dark);
-            border-color: var(--dbp-accent-dark);
+            color: var(--dbp-hover-text);
+            background-color: var(--dbp-hover-base);
         }
 
         /* Inline SVG don't work in our web-components */
@@ -461,10 +463,9 @@ export function getButtonCSS() {
         }
 
         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);
+            /*color: var(--dbp-hover-text, currentColor);
+            border-color: var(--dbp-hover-base);
+            background-color: var(--dbp-hover-base, inherit);*/
         }
 
         button.button.is-small, .button.is-small {
@@ -861,8 +862,8 @@ export function getDocumentationCSS() {
         }
 
         .documentation a:hover {
-            color: var(--dbp-accent-dark);
-            border-color: var(--dbp-accent-dark);
+            color: var(--dbp-hover-text);
+            background-color: var(--dbp-hover-base);
         }
 
         .documentation ul, .documentation ol, .documentation li {
@@ -1117,8 +1118,8 @@ export function getLinkCss() {
         }
 
         .int-link-external:hover {
-            color: var(--dbp-accent-dark);
-            border-color: var(--dbp-accent-dark);
+            color: var(--dbp-hover-text);
+            background-color: var(--dbp-hover-base);
         }
 
         .int-link-external:after {
@@ -1139,9 +1140,23 @@ export function getLinkCss() {
         }
 
         .int-link-internal:hover{
-            color: var(--dbp-accent-dark);
-            border-color: var(--dbp-accent-dark);
+            color: var(--dbp-hover-text);
+            background-color: var(--dbp-hover-base);
         }
+
+        /* TODO Change color(mask) */
+        /*.int-link-internal: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 3px;
+                    padding: 0 0 0.25% 0;
+                    animation: 0s linkIconIn;
+                    font-size: 103%;
+                }*/
+
     `;
 }
 

packages/file-handling/src/clipboard.js

@@ -733,8 +733,8 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
             }
 
             a:hover {
-                color: var(--dbp-accent-dark);
-                border-color: var(--dbp-accent-dark);
+                color: var(--dbp-hover-text);
+                background-color: var(--dbp-hover-base);
             }
 
             h2:first-child {

packages/file-handling/src/styles.js

@@ -149,8 +149,8 @@ export function getFileHandlingCss() {
         }
 
         .tabulator-row.tabulator-selectable.tabulator-selected:hover, .tabulator-row.tabulator-selected{
-            background-color: var(--dbp-button-hover-base);
-            color: var(--dbp-button-hover-text);
+            background-color: var(--dbp-hover-base);
+            color: var(--dbp-hover-text);
         }
 
         .tabulator .tabulator-header .tabulator-col .tabulator-col-content{

packages/language-select/src/language-select.js

@@ -85,7 +85,8 @@ export class LanguageSelect extends AdapterLitElement {
             }
 
             a:hover {
-                color: var(--dbp-accent-dark);
+                color: var(--dbp-hover-text);
+                background-color: var(--dbp-hover-base);
                 transition: none;
             }
 

packages/qr-code-scanner/src/qr-code-scanner.js

 import {createInstance} from './i18n';
-import {css, html} from 'lit';
+import {css, html, unsafeCSS} from 'lit';
 import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
@@ -8,6 +8,8 @@ import {classMap} from 'lit/directives/class-map.js';
 import * as commonUtils from '@dbp-toolkit/common/utils';
 import {Mutex} from 'async-mutex';
 import {name as pkgName} from './../package.json';
+import {getIconSVGURL} from '@dbp-toolkit/common';
+
 
 
 /**

toolkit-showcase/src/styles.js

@@ -37,8 +37,8 @@ export function getDemoCSS() {
         }
 
         a:hover {
-            color: var(--dbp-accent-dark);
-            border-color: var(--dbp-accent-dark);
+            color: var(--dbp-hover-text);
+            background-color: var(--dbp-hover-base);
         }
 
         a:after {
@@ -53,6 +53,9 @@ export function getDemoCSS() {
             font-size: 103%;
         }
 
+        /* TODO Change color(mask) */
+
+        /*
         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');
@@ -65,6 +68,8 @@ export function getDemoCSS() {
             font-size: 103%;
         }
         
+         */
+
         @keyframes linkIconOut {
             0% {
                 filter: invert(100%);