Revert "Remove hover effekt"

This reverts commit 6c632dc6

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

@@ -570,6 +570,10 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
                 margin-left: 50px;
             }
 
+            header .hd2-left a:hover {
+                color: var(--dbp-accent-dark);
+            }
+
             header .hd2-right {
                 grid-area: hd2-right;
                 display: flex;
@@ -606,6 +610,24 @@ 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;
@@ -613,6 +635,10 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
                 display: block;
             }
 
+            .menu a:hover {
+                color: var(--dbp-accent-dark);
+            }
+
             .menu a.selected {
                 border-left: 2px solid var(--dbp-accent-dark);
                 font-weight: bolder;

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;
             }

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

@@ -49,6 +49,10 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
                 line-height: initial;
             }
 
+            h2 a:hover {
+                color: var(--dbp-accent-dark);
+            }
+            
             h2 a {
                 cursor: pointer;
                 text-decoration: none;
@@ -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%;
+            }*/
         `;
     }
 

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;
             }

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;

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;
@@ -442,6 +460,13 @@ 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-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);
+        }
     `;
 }
 

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;

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{

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;

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 {

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%;
             }

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%);