Skip to content
Snippets Groups Projects
Commit 25d41733 authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Add again hover effect and change it to default none

parent 1f1caf2e
No related branches found
No related tags found
No related merge requests found
Pipeline #76084 passed
......@@ -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;
......
......@@ -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 {
......
......@@ -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();
}
......
......@@ -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;
}
......
......@@ -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;
}
......
......@@ -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%;
}*/
`;
}
......@@ -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 {
......
......@@ -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{
......
......@@ -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;
}
......
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';
/**
......
......@@ -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%);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment