diff --git a/src/BookmarkEditor/component.css b/src/BookmarkEditor/component.css index 2b2092c8..25672a30 100644 --- a/src/BookmarkEditor/component.css +++ b/src/BookmarkEditor/component.css @@ -10,6 +10,8 @@ top: calc(var(--size-wide-gap) * 2); left: calc(var(--size-wide-gap) * 2); right: calc(var(--size-wide-gap) * 2); + max-width: 800px; + margin: auto; } .BookmarkEditor__Overlay { @@ -39,9 +41,13 @@ .BookmarkEditor input[type='text'] { padding: var(--size-form-control-padding); border-radius: var(--size-form-control-border-radius); + border: var(--palette-1) solid 1px; color: inherit; background-color: var(--palette-2); - border: none; +} + +.BookmarkEditor input[type='text']:focus { + background-color: var(--palette-3); } .BookmarkEditor input[type='text'].BookmarkEditor__Url { @@ -55,9 +61,9 @@ .BookmarkEditor input[type='submit'] { padding: var(--size-form-control-padding); border-radius: var(--size-form-control-border-radius); + border: var(--palette-1) solid 1px; color: inherit; background-color: var(--palette-2); - border: none; } .BookmarkEditor input[type='button']:enabled:hover, @@ -70,6 +76,10 @@ color: var(--palette-1); } +.BookmarkEditor input[type='button'][value='Remove']:hover { + color: red; +} + .BookmarkEditor__Message { padding: var(--size-form-control-padding); color: var(--palette-03); diff --git a/src/BookmarkEditor/component.tsx b/src/BookmarkEditor/component.tsx index d956363d..ae690ab8 100644 --- a/src/BookmarkEditor/component.tsx +++ b/src/BookmarkEditor/component.tsx @@ -114,14 +114,14 @@ const FormComponent: FC = ({ placeholder="Shortcut Key (not assigned)" onChange={(e) => onChange(editingBookmark.changeShortcutKey(shortcutKeyOf(e.target.value)))} /> + + Open this in Chrome Bookmark Manager +
{errorMessage}
onRemove()} />
- - Open this in Chrome Bookmark Manager - ) }