mirror/aliasvault
1
0
Fork 0
mirror of https://github.com/aliasvault/aliasvault.git synced 2026-02-23 10:27:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update folder pill UI for light mode

Browse Source
This commit is contained in:
Leendert de Borst
2026-01-24 23:13:47 +01:00
parent 5dbff6cf1d
commit 9734589175
2 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/server/AliasVault.Client/Main/Components/Folders/FolderPill.razor
View File

@@ -1,7 +1,7 @@
@using AliasVault.Client.Main.Models
@* FolderPill component - displays a folder as a compact clickable pill *@
<button @onclick="OnClick" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm rounded-lg bg-gray-100 dark:bg-gray-700/50 hover:bg-gray-200 dark:hover:bg-gray-600/50 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-1 dark:focus:ring-offset-gray-800">
<button @onclick="OnClick" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm rounded-lg bg-white dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600/50 hover:border-gray-300 dark:hover:border-gray-500 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-1 dark:focus:ring-offset-gray-800">
<svg class="w-4 h-4 text-orange-500 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
<path d="M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2z"/>
</svg>

10
apps/server/AliasVault.Client/wwwroot/css/tailwind.css
View File

@@ -2727,6 +2727,11 @@ video {
border-color: rgb(246 167 82 / var(--tw-border-opacity));
}
.hover\:border-gray-300:hover {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.hover\:bg-blue-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -3632,6 +3637,11 @@ video {
border-color: rgb(244 149 65 / var(--tw-border-opacity));
}
.dark\:hover\:border-gray-500:hover:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity));
}
.dark\:hover\:bg-blue-500:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));