From f40ff997f121e8b1a4555f1b133f6fa0f5634578 Mon Sep 17 00:00:00 2001 From: Dominique Alexandre Date: Wed, 8 Jan 2025 15:54:03 -0500 Subject: [PATCH 1/2] Remove outline on menu items and caret on keybind inputs --- .../Settings/Components/KeybindEditor.razor | 1 + src/Sidekick.Common.Ui/Forms/FormInput.razor | 5 ++++- src/Sidekick.Common.Ui/Menu/MenuItem.razor | 8 +++----- src/Sidekick.Common.Ui/wwwroot/css/app.css | 4 ++++ 4 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/Sidekick.Common.Blazor/Settings/Components/KeybindEditor.razor b/src/Sidekick.Common.Blazor/Settings/Components/KeybindEditor.razor index e44df4681..40063e063 100644 --- a/src/Sidekick.Common.Blazor/Settings/Components/KeybindEditor.razor +++ b/src/Sidekick.Common.Blazor/Settings/Components/KeybindEditor.razor @@ -2,6 +2,7 @@ OnBlur="Blur" Label="@Label" Value="@InputValue" + AdditionalClasses="cursor-default caret-transparent" spellcheck="false"> @Resources["Reset"] diff --git a/src/Sidekick.Common.Ui/Forms/FormInput.razor b/src/Sidekick.Common.Ui/Forms/FormInput.razor index 6a720e5f4..ab1539242 100644 --- a/src/Sidekick.Common.Ui/Forms/FormInput.razor +++ b/src/Sidekick.Common.Ui/Forms/FormInput.razor @@ -13,7 +13,7 @@ @onfocus="OnFocus" @onblur="OnBlur" value="@Value" - class="@UiClasses.FormInputClasses p-2 text-base min-w-0 grow"/> + class="@UiClasses.FormInputClasses p-2 text-base min-w-0 grow @AdditionalClasses" /> @AdornmentContent @@ -40,6 +40,9 @@ [Parameter(CaptureUnmatchedValues = true)] public Dictionary? InputAttributes { get; set; } + [Parameter] + public string? AdditionalClasses { get; set; } + private string Id { get; } = UiUtilities.GenerateId(); private async Task OnChange(ChangeEventArgs args) diff --git a/src/Sidekick.Common.Ui/Menu/MenuItem.razor b/src/Sidekick.Common.Ui/Menu/MenuItem.razor index dafaff878..ae855e651 100644 --- a/src/Sidekick.Common.Ui/Menu/MenuItem.razor +++ b/src/Sidekick.Common.Ui/Menu/MenuItem.razor @@ -1,5 +1,5 @@ - + @ChildContent @@ -13,8 +13,6 @@ [Parameter] public RenderFragment? ChildContent { get; set; } - private bool IsActive => NavigationManager.ToAbsoluteUri(NavigationManager.Uri) - .AbsolutePath - == Href; + private bool IsActive => NavigationManager.ToAbsoluteUri(NavigationManager.Uri).AbsolutePath == Href; } diff --git a/src/Sidekick.Common.Ui/wwwroot/css/app.css b/src/Sidekick.Common.Ui/wwwroot/css/app.css index 1c814c949..ec0b7c6bd 100644 --- a/src/Sidekick.Common.Ui/wwwroot/css/app.css +++ b/src/Sidekick.Common.Ui/wwwroot/css/app.css @@ -3806,6 +3806,10 @@ video { -moz-osx-font-smoothing: auto; } +.caret-transparent { + caret-color: transparent; +} + .opacity-0 { opacity: 0; } From bc4f5109e8d70348c348b5d99713ff93bd73043e Mon Sep 17 00:00:00 2001 From: leMicin Date: Fri, 17 Jan 2025 19:33:08 -0500 Subject: [PATCH 2/2] Adjusted menu focus styles --- src/Sidekick.Common.Ui/Menu/MenuItem.razor | 4 +- src/Sidekick.Common.Ui/wwwroot/css/app.css | 61 +++------------------- 2 files changed, 10 insertions(+), 55 deletions(-) diff --git a/src/Sidekick.Common.Ui/Menu/MenuItem.razor b/src/Sidekick.Common.Ui/Menu/MenuItem.razor index ae855e651..27aeef146 100644 --- a/src/Sidekick.Common.Ui/Menu/MenuItem.razor +++ b/src/Sidekick.Common.Ui/Menu/MenuItem.razor @@ -1,5 +1,5 @@ - + @ChildContent diff --git a/src/Sidekick.Common.Ui/wwwroot/css/app.css b/src/Sidekick.Common.Ui/wwwroot/css/app.css index ec0b7c6bd..ffdd64c19 100644 --- a/src/Sidekick.Common.Ui/wwwroot/css/app.css +++ b/src/Sidekick.Common.Ui/wwwroot/css/app.css @@ -1500,11 +1500,6 @@ video { margin-bottom: 0px; } -.my-1 { - margin-top: 0.25rem; - margin-bottom: 0.25rem; -} - .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; @@ -1536,10 +1531,6 @@ video { margin-bottom: 0.75rem; } -.mb-4 { - margin-bottom: 1rem; -} - .ml-0 { margin-left: 0px; } @@ -1564,22 +1555,10 @@ video { margin-left: auto; } -.mr-1 { - margin-right: 0.25rem; -} - .mr-2 { margin-right: 0.5rem; } -.mr-3 { - margin-right: 0.75rem; -} - -.mr-4 { - margin-right: 1rem; -} - .mt-1 { margin-top: 0.25rem; } @@ -1596,10 +1575,6 @@ video { margin-top: 1rem; } -.mt-6 { - margin-top: 1.5rem; -} - .mt-9 { margin-top: 2.25rem; } @@ -1940,10 +1915,6 @@ video { flex-grow: 1; } -.flex-grow-0 { - flex-grow: 0; -} - .grow { flex-grow: 1; } @@ -3332,10 +3303,6 @@ video { padding-bottom: 1rem; } -.pb-0 { - padding-bottom: 0px; -} - .pb-2 { padding-bottom: 0.5rem; } @@ -3352,10 +3319,6 @@ video { padding-bottom: 4px; } -.pl-12 { - padding-left: 3rem; -} - .pl-2 { padding-left: 0.5rem; } @@ -3372,22 +3335,6 @@ video { padding-right: 0.5rem; } -.pr-4 { - padding-right: 1rem; -} - -.pt-0 { - padding-top: 0px; -} - -.pt-2 { - padding-top: 0.5rem; -} - -.pt-4 { - padding-top: 1rem; -} - .pt-\[4px\] { padding-top: 4px; } @@ -4308,10 +4255,18 @@ video { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } +.focus\:ring-inset:focus { + --tw-ring-inset: inset; +} + .focus\:ring-offset-0:focus { --tw-ring-offset-width: 0px; } +.focus\:ring-offset-2:focus { + --tw-ring-offset-width: 2px; +} + .focus\:hover\:text-center:hover:focus { text-align: center; }