diff --git a/CHANGELOG.md b/CHANGELOG.md index 78fc0cc..fe66f6c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # authn.io ChangeLog +## 7.4.4 - 2026-06-dd + +### Fixed +- Make dark mode hint list items look more like buttons. +- Make adding url bar to popup window height conditional. + ## 7.4.3 - 2026-06-12 ### Fixed diff --git a/web/app.less b/web/app.less index a661c1d..638a596 100644 --- a/web/app.less +++ b/web/app.less @@ -2,12 +2,16 @@ * New BSD License (3-clause) * Copyright (c) 2015-2026, Digital Bazaar, Inc. * Copyright (c) 2015-2016, Accreditrust Technologies, LLC - * All rights reserved. */ @wrm-gray: #aaa; @wrm-dark-gray: darken(@wrm-gray, 25%); @wrm-handler-header-height: 60px; +@wrm-blue: #3678e3; +@wrm-active-border-color: @wrm-blue; +@wrm-primary: lighten(@wrm-active-border-color, 5%); +@wrm-selected-background-color: fadeout(@wrm-active-border-color, 95%); + .br-body { margin: 0; }; @@ -16,7 +20,8 @@ padding: 5px 5px; } -/* Make hint list scrollable with custom thin scrollbar */ +/* Make hint list scrollable with custom thin scrollbar and make buttons look + more pressable */ .wrm-hint-list { max-height: 200px; @@ -42,6 +47,34 @@ scrollbar-width: thin; scrollbar-color: @wrm-gray @wrm-dark-gray; } + + .wrm-item { + &.wrm-selectable { + /*box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.03);*/ + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + border-bottom-color: transparent; + + @media (prefers-color-scheme: dark) { + box-shadow: + inset 0 -5px 10px rgba(0, 0, 0, 0.3), + inset 0 -2px 5px fade(@wrm-primary, 25%); + + /* non-iOS device detection (only :hover on non-iOS) */ + @supports not (-webkit-overflow-scrolling: touch) { + &:hover { + background-color: #3d3d40; + border: 1px solid fadeout(@wrm-active-border-color, 50%) !important; + box-shadow: + inset 0 2px 1px fade(@wrm-primary, 25%), + inset 0 35px 100px fade(@wrm-primary, 20%); + cursor: pointer; + outline: none; + transition: border-color ease-in-out .25s, box-shadow ease-in-out .25s; + } + } + } + } + } } /* Adjust padding and margin for hint list items to accommodate scrollbar */ diff --git a/web/mediator/constants.js b/web/mediator/constants.js index bfc222b..d7a22f3 100644 --- a/web/mediator/constants.js +++ b/web/mediator/constants.js @@ -2,15 +2,19 @@ * New BSD License (3-clause) * Copyright (c) 2017-2026, Digital Bazaar, Inc. */ +const addUrlBarHeight = navigator.userAgent.toLowerCase().includes('firefox'); +const urlBarHeight = addUrlBarHeight ? 30 : 0; + export const DEFAULT_ALLOW_WALLET_POPUP_WIDTH = 500; // tall enough for the Block/Allow footer on browsers with tall popup // chrome (e.g. Firefox always shows a URL bar in popups) -export const DEFAULT_ALLOW_WALLET_POPUP_HEIGHT = 260; +export const DEFAULT_ALLOW_WALLET_POPUP_HEIGHT = 230 + urlBarHeight; export const DEFAULT_HANDLER_POPUP_WIDTH = 800; export const DEFAULT_HANDLER_POPUP_HEIGHT = 600; export const DEFAULT_HINT_CHOOSER_POPUP_WIDTH = 500; -export const DEFAULT_HINT_CHOOSER_POPUP_HEIGHT = 440; +export const DEFAULT_HINT_CHOOSER_POPUP_HEIGHT = 400 + urlBarHeight; // taller hint chooser popup that fits the cross-device QR section -export const DEFAULT_CROSS_DEVICE_HINT_CHOOSER_POPUP_HEIGHT = 560; +export const DEFAULT_CROSS_DEVICE_HINT_CHOOSER_POPUP_HEIGHT = + 550 + urlBarHeight;