From 25d41733839515dc0914313251d236aba37fec6d Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Thu, 16 Dec 2021 18:04:56 +0100
Subject: [PATCH] Add again hover effect and change it to default none
---
packages/app-shell/src/app-shell.js | 12 ++---
packages/app-shell/src/auth-menu-button.js | 8 ++--
.../app-shell/src/dbp-app-shell-welcome.js | 8 ++--
packages/app-shell/src/tugraz-logo.js | 5 ---
packages/auth/src/login-button.js | 5 ++-
packages/common/styles.js | 45 ++++++++++++-------
packages/file-handling/src/clipboard.js | 4 +-
packages/file-handling/src/styles.js | 4 +-
.../language-select/src/language-select.js | 3 +-
.../qr-code-scanner/src/qr-code-scanner.js | 4 +-
toolkit-showcase/src/styles.js | 9 +++-
11 files changed, 66 insertions(+), 41 deletions(-)
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index 133c7507..0b408368 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/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;
diff --git a/packages/app-shell/src/auth-menu-button.js b/packages/app-shell/src/auth-menu-button.js
index 568461db..8c29fe32 100644
--- a/packages/app-shell/src/auth-menu-button.js
+++ b/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 {
diff --git a/packages/app-shell/src/dbp-app-shell-welcome.js b/packages/app-shell/src/dbp-app-shell-welcome.js
index 15c79424..ec2b9a86 100644
--- a/packages/app-shell/src/dbp-app-shell-welcome.js
+++ b/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,7 +71,9 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
font-size: 100%;
}
- /* h2 a:hover::after {
+ /* 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');
background-size: 60%;
@@ -83,7 +86,6 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
}*/
`;
}
-
_onVisibilityChanged() {
this.requestUpdate();
}
diff --git a/packages/app-shell/src/tugraz-logo.js b/packages/app-shell/src/tugraz-logo.js
index 70958e29..0a841ba9 100644
--- a/packages/app-shell/src/tugraz-logo.js
+++ b/packages/app-shell/src/tugraz-logo.js
@@ -57,11 +57,6 @@ export class TUGrazLogo extends AdapterLitElement {
a{
display:block;
}
-
- a:focus path {
- fill:#000 !important;
- transition:none;
- }
* {
transition:fill 0.15s, stroke 0.15s;
diff --git a/packages/auth/src/login-button.js b/packages/auth/src/login-button.js
index 3574c3b0..0e4d10ba 100644
--- a/packages/auth/src/login-button.js
+++ b/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;
}
diff --git a/packages/common/styles.js b/packages/common/styles.js
index e563c13e..053578af 100644
--- a/packages/common/styles.js
+++ b/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%;
+ }*/
+
`;
}
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index ca0da6e2..82aeebee 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/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 {
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index 5fcb1684..da568589 100644
--- a/packages/file-handling/src/styles.js
+++ b/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{
diff --git a/packages/language-select/src/language-select.js b/packages/language-select/src/language-select.js
index ec4aa356..9fb0b395 100644
--- a/packages/language-select/src/language-select.js
+++ b/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;
}
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index 98c8f12e..34f419b8 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -1,5 +1,5 @@
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';
+
/**
diff --git a/toolkit-showcase/src/styles.js b/toolkit-showcase/src/styles.js
index c2c00a76..df13ec7c 100644
--- a/toolkit-showcase/src/styles.js
+++ b/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');
@@ -64,6 +67,8 @@ export function getDemoCSS() {
animation: 0s linkIconIn;
font-size: 103%;
}
+
+ */
@keyframes linkIconOut {
0% {
--
GitLab