diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js index e5bce3cc306bead3d8b440449c496ba13497afa1..2056752e53ff910e7f92ebf6cb137ba7721f4409 100644 --- a/packages/app-shell/src/app-shell.js +++ b/packages/app-shell/src/app-shell.js @@ -534,6 +534,11 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) { text-align: right; padding-right: 20px; } + + header .hd1-left #lang-select{ + margin: auto; + margin-right: 0px; + } header .hd1-middle { grid-area: hd1-middle; @@ -861,7 +866,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) { <header> <slot name="header"> <div class="hd1-left"> - <dbp-language-select lang="${this.lang}"></dbp-language-select> + <dbp-language-select id="lang-select" lang="${this.lang}"></dbp-language-select> </div> <div class="hd1-middle"> </div> diff --git a/packages/app-shell/src/auth-menu-button.js b/packages/app-shell/src/auth-menu-button.js index febfa5330e8de07364f9aa641b4dfb4676c740d7..6c70a327e2324eec16b4ff951fdb8f9779913651 100644 --- a/packages/app-shell/src/auth-menu-button.js +++ b/packages/app-shell/src/auth-menu-button.js @@ -98,6 +98,18 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) { color: currentColor; cursor: pointer; text-decoration: none; + display: block; + } + + input::-moz-focus-inner { border: 0; } + + :focus-visible{ + outline:none !important; + outline-width: 0 !important; + box-shadow: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: 0px 0px 9px 2px var(--dbp-accent-dark); } .dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu { @@ -130,13 +142,17 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) { } .menu a.selected { color: var(--dbp-text-light); background-color: var(--dbp-secondary-dark); } - + .dropdown-item { color: var(--dbp-text-muted-dark); display: block; font-size: 0.875rem; line-height: 1.5; padding: 0.375rem 1rem; + margin-left: 0.5em; + margin-right: 0.5em; + padding-left: 0.5em; + padding-right: 0.5em; position: relative; } diff --git a/packages/app-shell/src/tugraz-logo.js b/packages/app-shell/src/tugraz-logo.js index cf693813a3499bf7c654c076e08e17a1f2613603..70958e2924793241b8daf9dfe89effe739d96bfb 100644 --- a/packages/app-shell/src/tugraz-logo.js +++ b/packages/app-shell/src/tugraz-logo.js @@ -54,7 +54,11 @@ export class TUGrazLogo extends AdapterLitElement { overflow: visible; } - a:hover path, a:focus path { + a{ + display:block; + } + + a:focus path { fill:#000 !important; transition:none; } diff --git a/packages/common/styles.js b/packages/common/styles.js index 0b30d6caf17b0b9df681f8aaa6e287f08af11162..cb4f31d414703856787c6435ec0cb902e67a94d6 100644 --- a/packages/common/styles.js +++ b/packages/common/styles.js @@ -117,6 +117,17 @@ export function getGeneralCSS(doMarginPaddingReset = true) { font-family: inherit; } + input::-moz-focus-inner { border: 0; } + + :focus-visible{ + outline:none !important; + outline-width: 0 !important; + box-shadow: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: 0px 0px 9px 2px var(--dbp-accent-dark); + } + .control { box-sizing: border-box; clear: both; @@ -425,6 +436,7 @@ export function getButtonCSS() { text-align: center; white-space: nowrap; font-size: inherit; + font-weight: bolder; font-family: inherit; transition: background-color 0.15s ease 0s, color 0.15s ease 0s; background: none; @@ -469,6 +481,15 @@ export function getButtonCSS() { opacity: .4; cursor: not-allowed; } + + button:focus-visible{ + outline:none !important; + outline-width: 0 !important; + box-shadow: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: 0px 0px 9px 2px var(--dbp-accent-dark); + } `; } @@ -578,6 +599,16 @@ export function getRadioAndCheckboxCss() { border-right: var(--dbp-border-dark); border-width: 0 2px 2px 0; } + + .button-container input[type="checkbox"]:focus-visible ~ .checkmark{ + outline:none !important; + outline-width: 0 !important; + box-shadow: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: 0px 0px 9px 2px var(--dbp-accent-dark); + } + .button-container input[type="checkbox"]:disabled ~ .checkmark { border-color: var(--dbp-text-muted-light); diff --git a/packages/language-select/src/language-select.js b/packages/language-select/src/language-select.js index d8ee29041bdfc4040b924317f69cd36ff1146852..11332682dd5de67387ba7bf02f17b31b3f8da267 100644 --- a/packages/language-select/src/language-select.js +++ b/packages/language-select/src/language-select.js @@ -78,8 +78,8 @@ export class LanguageSelect extends AdapterLitElement { static get styles() { // language=css - return [commonStyles.getThemeCSS(), - css` + return css` + ${commonStyles.getThemeCSS()} :host { display: inline-block; } @@ -91,8 +91,20 @@ export class LanguageSelect extends AdapterLitElement { transition: background-color 0.15s, color 0.15s; color: var(--dbp-text-dark); } + + input::-moz-focus-inner { border: 0; } + + :focus-visible{ + outline:none !important; + outline-width: 0 !important; + box-shadow: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: 0px 0px 9px 2px var(--dbp-accent-dark); + } + ` - ]; + ; } onClick(e) {