diff --git a/Gemfile b/Gemfile index b0dc15cf26..4f558a76e2 100644 --- a/Gemfile +++ b/Gemfile @@ -62,7 +62,7 @@ gem 'faraday-net_http_persistent', '~> 2.1' # Tailwind CSS [https://tailwindcss.com] gem 'heroicon-rails', '>= 0.2.9' gem 'pathogen_view_components', path: './embedded_gems/pathogen' -gem 'tailwindcss-rails', '~> 2.7' +gem 'tailwindcss-rails', '~> 4.0' gem 'view_component', '~> 3.21.0' # Pagy diff --git a/Gemfile.lock b/Gemfile.lock index eedd78cccd..8032205afd 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -222,7 +222,6 @@ GEM ffi (1.17.1-arm64-darwin) ffi (1.17.1-x86-linux-gnu) ffi (1.17.1-x86-linux-musl) - ffi (1.17.1-x86_64-darwin) ffi (1.17.1-x86_64-linux-gnu) ffi (1.17.1-x86_64-linux-musl) fiber-storage (1.0.0) @@ -409,8 +408,6 @@ GEM racc (~> 1.4) nokogiri (1.18.3-arm64-darwin) racc (~> 1.4) - nokogiri (1.18.3-x86_64-darwin) - racc (~> 1.4) nokogiri (1.18.3-x86_64-linux-gnu) racc (~> 1.4) nokogiri (1.18.3-x86_64-linux-musl) @@ -605,18 +602,10 @@ GEM stringio (3.1.3) syntax_tree (6.2.0) prettier_print (>= 1.2.0) - tailwindcss-rails (2.7.9) - railties (>= 7.0.0) - tailwindcss-rails (2.7.9-aarch64-linux) - railties (>= 7.0.0) - tailwindcss-rails (2.7.9-arm-linux) - railties (>= 7.0.0) - tailwindcss-rails (2.7.9-arm64-darwin) - railties (>= 7.0.0) - tailwindcss-rails (2.7.9-x86_64-darwin) - railties (>= 7.0.0) - tailwindcss-rails (2.7.9-x86_64-linux) + tailwindcss-rails (4.2.0) railties (>= 7.0.0) + tailwindcss-ruby (~> 4.0) + tailwindcss-ruby (4.0.9-x86_64-linux-gnu) terminal-table (4.0.0) unicode-display_width (>= 1.1.1, < 4) thor (1.3.2) @@ -674,7 +663,7 @@ PLATFORMS x86-linux x86-linux-gnu x86-linux-musl - x86_64-darwin + x86_64-linux x86_64-linux-gnu x86_64-linux-musl @@ -741,7 +730,7 @@ DEPENDENCIES simplecov sprockets-rails stimulus-rails - tailwindcss-rails (~> 2.7) + tailwindcss-rails (~> 4.0) timecop turbo-rails tzinfo-data diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index bf018d62f4..0ba68fd85d 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -1,5 +1,5 @@ //= link_tree ../images -//= link_directory ../stylesheets .css +//= link_directory ../tailwind .css //= link_tree ../../javascript .js //= link_tree ../../../vendor/javascript .js //= link_tree ../builds diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css deleted file mode 100644 index c472398b34..0000000000 --- a/app/assets/stylesheets/application.tailwind.css +++ /dev/null @@ -1,519 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -body { - height: 100vh; - overflow: hidden; -} - -@layer components { - kbd { - @apply px-2 py-1.5 text-sm font-semibold text-slate-800 bg-slate-100 border border-slate-200 rounded-lg dark:bg-slate-600 dark:text-slate-100 dark:border-slate-500; - } - - dt { - @apply text-base font-medium text-gray-900 dark:text-white; - } - - dd { - @apply text-gray-500 dark:text-gray-400; - } - - dd:not(:last-child) { - @apply mb-4; - } - - .layout-body { - display: grid; - grid-template-columns: 280px 1fr; - grid-template-rows: 1fr; - @apply w-screen h-screen transition-all; - } - - .layout-body.collapsed { - grid-template-columns: 0 1fr; - } - - .sidebar { - grid-template-areas: "navigation" "collapse"; - grid-template-rows: 1fr 40px; - overflow-x: hidden; - } - - .navbar-button, - button.navbar-button.Viral-Dropdown--icon { - @apply p-1 text-sm rounded-md text-slate-500 hover:bg-slate-300 focus:outline-none focus:ring-4 focus:ring-slate-200 dark:text-slate-400 dark:hover:bg-slate-700 dark:focus:ring-slate-700; - } - - .link { - @apply font-medium text-green-600 hover:underline dark:text-green-500; - } - - .card { - @apply p-4 border rounded-md shadow-sm bg-slate-50 border-slate-200 dark:border-slate-700 sm:p-6 dark:bg-slate-800; - } - - p link { - @apply font-medium text-green-600 underline hover:no-underline dark:text-green-500; - } - - .form-field label { - @apply block mb-1 text-sm font-medium text-slate-900 dark:text-white; - } - - .form-field div.field_with_errors { - @apply block w-full; - } - - .form-field input[type="text"], - .form-field input[type="search"], - .form-field input[type="password"], - .form-field input[type="email"] { - @apply border border-slate-300 text-slate-900 sm:text-sm rounded-md focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-slate-800 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500; - } - - .form-field input[type="text"].prefixed, - .form-field input[type="search"].prefixed, - .form-field input[type="password"].prefixed, - .form-field input[type="email"].prefixed { - @apply rounded-l-none rounded-r-md; - } - - .form-field.datepicker input[type="text"] { - @apply border border-slate-300 text-slate-900 sm:text-sm rounded-md focus:ring-primary-700 focus:border-primary-700 block w-full pl-10 p-2.5 dark:bg-slate-800 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500; - } - - .form-field .select2 input[type="text"] { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 10 6'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3E%3C/svg%3E"); - background-position: right 0.75rem center; - background-repeat: no-repeat; - background-size: 0.75em 0.75em; - padding-right: 2.5rem; - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - } - - .form-field select, - .form-field select option { - @apply border-slate-300 text-slate-900 sm:text-sm rounded-md focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-slate-800 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500; - } - - .form-field select:has(option[value=""]:checked) { - @apply text-gray-500 dark:text-slate-400; - } - - .form-field select.error { - @apply border-red-500 text-slate-900 sm:text-sm rounded-md focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-slate-800 dark:border-red-400 dark:placeholder-slate-400 dark:text-white dark:focus:ring-red-500 dark:focus:border-red-500; - } - - .form-field select.prefixed { - appearance: none; - padding: 0 1em 0 1em; - margin: 0; - width: 100%; - font-family: inherit; - font-size: inherit; - cursor: inherit; - line-height: inherit; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - @apply rounded-r-md border p-2.5 block w-full bg-white border-slate-300 text-sm text-slate-900 focus:border-green-500 focus:ring-green-500 dark:placeholder-slate-400 dark:shadow-sm-light dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:focus:border-green-500 dark:focus:ring-green-500; - } - - .form-field.invalid label { - @apply text-red-700 dark:text-red-500; - } - - .form-field.invalid input[type="text"] { - @apply placeholder-red-700 border-red-500 bg-red-50 focus:border-red-500 focus:ring-red-500 dark:placeholder-red-300 dark:border-red-400 dark:bg-red-800; - } - - .form-field.invalid input[type="file"] { - @apply placeholder-red-700 border-red-500 bg-red-50 focus:border-red-500 focus:ring-red-500 dark:placeholder-red-300 dark:border-red-400 dark:bg-red-800; - } - - .form-field.invalid textarea { - @apply placeholder-red-700 border-red-500 bg-red-50 focus:border-red-500 focus:ring-red-500 dark:placeholder-red-300 dark:border-red-400 dark:bg-red-800; - } - - .form-field textarea { - @apply block w-full rounded-md border border-slate-300 text-sm text-slate-900 p-2.5 focus:border-green-500 focus:ring-green-500 dark:placeholder-slate-400 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:focus:border-green-500 dark:focus:ring-green-500; - } - - input[type="checkbox"] { - @apply w-4 h-4 border rounded border-slate-300 bg-slate-50 focus:ring-primary-300 focus:ring-4 dark:border-slate-600 dark:bg-slate-800 dark:ring-offset-slate-800 dark:focus:ring-primary-600; - } - - .field-hint { - @apply mt-1 text-sm text-slate-500 dark:text-slate-400; - } - - input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; - cursor: pointer; - height: 20px; - width: 20px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A"); - } - - .row-btn { - @apply px-1 py-0 text-sm text-slate-500 hover:bg-slate-100 focus:outline-none focus:ring-4 focus:ring-slate-200 dark:text-slate-400 dark:hover:bg-slate-700 dark:focus:ring-slate-700; - } - - .row-btn svg { - @apply w-5 h-5; - } - - .Viral-Icon { - height: 2rem; - width: 2rem; - max-height: 100%; - max-width: 100%; - margin: auto; - @apply flex justify-center align-middle; - } - - .Viral-Icon__Svg { - position: relative; - display: block; - width: 100%; - max-width: 100%; - max-height: 100%; - } - - .Viral-Icon--colorBase { - @apply text-slate-900; - } - - .Viral-Icon--colorSubdued { - @apply text-slate-400; - } - - .Viral-Icon--colorCritical { - @apply text-red-500; - } - - .Viral-Icon--colorWarning { - @apply text-yellow-500; - } - - .Viral-Icon--colorSuccess { - @apply text-green-500; - } - - .Viral-Icon--colorPrimary { - @apply text-primary-500; - } - - .Viral-Dropdown--button { - @apply flex items-center py-2.5 px-5 text-sm font-medium text-slate-900 focus:outline-none bg-white rounded-md border border-slate-200 hover:bg-slate-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-slate-200 dark:focus:ring-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-600 dark:hover:text-white dark:hover:bg-slate-700; - } - - .Viral-Dropdown--icon { - @apply rounded-md text-sm text-slate-500 p-2.5 hover:bg-slate-100 focus:outline-none focus:ring-4 focus:ring-slate-200 dark:text-slate-400 dark:hover:bg-slate-700 dark:focus:ring-slate-700; - } - - .button { - @apply inline-flex items-center justify-center w-1/2 text-sm border rounded-md cursor-pointer sm:w-auto focus:z-10; - } - - .button:disabled { - @apply opacity-50 cursor-not-allowed; - } - - .button--size-default { - @apply text-sm px-5 py-2.5; - } - - .button--size-small { - @apply px-3 py-2 text-xs; - } - - .button--size-large { - @apply py-3 text-lg px-7; - } - - .button--state-default { - @apply bg-white text-slate-900 border-slate-200 focus:outline-none hover:bg-slate-100 hover:text-slate-950 focus:ring-slate-200 dark:focus:ring-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-600 dark:hover:text-white dark:hover:bg-slate-700; - } - - .button--state-destructive { - @apply text-white bg-red-700 border-red-800 focus:outline-none hover:bg-red-800 focus:ring-red-300 dark:focus:ring-red-700 dark:bg-red-600 dark:text-white dark:border-red-600 dark:hover:bg-red-700; - } - - .button--state-primary { - @apply text-white border-primary-800 bg-primary-700 focus:outline-none hover:bg-primary-800 focus:ring-primary-300 dark:focus:ring-primary-700 dark:bg-primary-800 dark:text-white dark:border-primary-900 dark:hover:bg-primary-700; - } - - /* VIRAL DIALOG */ - dialog { - @apply w-full max-w-2xl max-h-full p-0 bg-white rounded-lg shadow dark:bg-slate-800 focus:outline-none; - } - - dialog::backdrop { - @apply bg-slate-400/30 dark:bg-slate-900/40 backdrop-blur-sm; - } - - .dialog--size { - @apply relative w-full max-h-full; - } - - .dialog--size-sm { - @apply max-w-md; - } - - .dialog--size-md { - @apply max-w-xl; - } - - .dialog--size-lg { - @apply max-w-3xl; - } - - .dialog--size-xl { - @apply max-w-7xl; - } - - .dialog--header { - @apply flex items-start justify-between p-5 border-b rounded-t dark:border-slate-600; - } - - .dialog--title { - @apply text-xl font-semibold text-slate-900 dark:text-white; - } - - .dialog--close { - @apply text-slate-400 bg-transparent hover:bg-slate-200 hover:text-slate-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-slate-600 dark:hover:text-white focus:outline-none focus:ring-4 focus:ring-slate-200 dark:focus:ring-slate-700; - } - - .dialog--section { - @apply p-5; - } - - .avatar { - @apply relative inline-flex items-center justify-center flex-none overflow-hidden rounded-md text-slate-800 dark:text-slate-300; - --tw-avatar-bg-lightness: 35%; - --tw-avatar-border-lightness: 35%; - --tw-avatar-bg-alpha: 0.3; - } - - .dark .avatar { - --tw-avatar-bg-lightness: 25%; - --tw-avatar-border-lightness: 90%; - --tw-avatar-bg-alpha: 0.4; - } - - strong { - @apply font-semibold; - } - - /*GROUPS LIST TREE*/ - .namespace-tree-container - > .namespace-list-tree - > .namespace-entry.has-children:first-child { - border-top: 0; - } - - .namespace-list-tree .folder-toggle-wrap { - font-size: 0; - flex-shrink: 0; - } - - .namespace-list-tree .folder-toggle-wrap span { - font-size: 12px; - } - - .namespace-list-tree .item-type-icon { - margin-top: 2px; - width: 20px; - } - - .namespace-list-tree > .namespace-entry:not(.has-children) .folder-caret { - opacity: 0; - } - - .namespace-list-tree .namespace-list-tree { - margin-bottom: 0; - margin-left: 30px; - position: relative; - } - - .namespace-list-tree .namespace-list-tree::before { - content: ""; - display: block; - width: 0; - position: absolute; - top: 5px; - bottom: 0; - left: -16px; - @apply border-l-2 border-slate-200 dark:border-slate-600; - } - - .namespace-list-tree .namespace-list-tree .namespace-entry { - position: relative; - } - - .namespace-list-tree .namespace-list-tree .namespace-entry::before { - content: ""; - display: block; - width: 10px; - height: 0; - position: absolute; - top: 30px; - left: -16px; - @apply border-t-2 border-slate-200 dark:border-slate-600; - } - - .namespace-list-tree - .namespace-list-tree - .namespace-entry:last-child::before { - height: auto; - top: 30px; - bottom: 0; - @apply bg-white dark:bg-slate-800; - } - - .namespace-list-tree .namespace-list-tree .namespace-entry.being-removed { - opacity: 0.5; - } - - .namespace-list-tree .namespace-entry { - padding: 0; - } - - .namespace-list-tree .namespace-entry.has-children { - border-top: 0; - } - - .namespace-list-tree .namespace-entry:first-child { - @apply border-t border-slate-200 dark:border-slate-600; - } - - .namespace-list-tree - .namespace-entry.has-children - > .namespace-entry-contents:hover { - @apply cursor-pointer border-slate-50 dark:border-slate-600 bg-slate-50 dark:bg-slate-600; - } - - .namespace-list-tree .namespace-entry-contents .namespace-text-container, - .namespace-list-tree .namespace-entry-contents .namespace-text { - min-width: 0; - } - - .namespace-list-tree .namespace-entry-contents .namespace-text { - flex-basis: 100%; - } - - .namespace-list-tree .namespace-entry-contents .avatar-container { - flex-shrink: 0; - } - - .namespace-list-tree .namespace-entry-contents .avatar-container > a { - width: 100%; - text-decoration: none; - } - - .namespace-list-tree .namespace-entry-contents .title { - @apply text-base font-medium text-slate-900 dark:text-white; - } - - .namespace-list-tree .namespace-entry-contents.has-more-items { - display: block; - padding: 20px 10px; - } - - .namespace-list-tree .namespace-entry-contents .description p { - max-width: 100%; - @apply text-sm text-slate-700 dark:text-slate-400; - } - - .namespace-list-tree .namespace-entry-contents .stats { - position: relative; - line-height: normal; - text-align: right; - flex-shrink: 0; - } - - .namespace-list-tree .namespace-entry-contents .stats > span { - display: inline-flex; - align-items: center; - height: 16px; - min-width: 30px; - } - - .namespace-list-tree .namespace-entry-contents .stats .stat-value { - margin: 2px 0 0 5px; - } -} - -.pagy-nav.pagination { - @apply inline-flex -space-x-px rounded-md shadow-sm isolate; -} - -.page.next a { - @apply flex items-center justify-center h-full py-1.5 px-3 leading-tight text-slate-500 bg-white rounded-r-lg border border-slate-300 hover:bg-slate-100 hover:text-slate-700 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white; -} - -.page.prev a { - @apply flex items-center justify-center h-full py-1.5 px-3 ml-0 text-slate-500 bg-white rounded-l-lg border border-slate-300 hover:bg-slate-100 hover:text-slate-700 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white; -} - -.page.next.disabled { - @apply flex items-center justify-center h-full py-1.5 px-3 ml-0 text-slate-500 bg-slate-50 rounded-r-lg border border-slate-300 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-400 cursor-not-allowed; -} - -.page.prev.disabled { - @apply flex items-center justify-center h-full py-1.5 px-3 ml-0 text-slate-500 bg-slate-50 rounded-l-lg border border-slate-300 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-400 cursor-not-allowed; -} - -.page a, -.page.gap { - @apply relative inline-flex items-center px-4 py-2 text-sm font-medium bg-white border text-slate-900 border-slate-200 focus:outline-none hover:bg-slate-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-slate-200 dark:focus:ring-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-600 dark:hover:text-white dark:hover:bg-slate-700; -} - -.page.active { - @apply z-10 flex items-center justify-center px-3 py-2 text-sm leading-tight border text-primary-600 bg-primary-50 border-primary-300 hover:bg-primary-100 hover:text-primary-700 dark:border-slate-700 dark:bg-slate-800 dark:text-white; -} - -.pagy-info { - @apply text-sm font-normal text-slate-500 dark:text-slate-400; -} - -div.field_with_errors > :is(select) { - @apply text-red-900 placeholder-red-300 border-red-700; -} - -.table-container table:not(:has(tbody td)) { - display: none; -} - -.table-container:not(:has(td)) .empty_state_message { - display: block; -} - -.table-container .empty_state_message { - display: none; -} - -.fixed-table-component { - height: calc(100vh - 50px - 32px); - max-height: calc(100vh - 50px - 32px); - display: flex; - flex-direction: column; -} - -.scrollbar::-webkit-scrollbar { - width: 0.75rem; - height: 0.75rem; -} - -.scrollbar::-webkit-scrollbar-thumb { - --tw-bg-opacity: 1 !important; - @apply bg-slate-300 dark:bg-slate-600; - border-radius: 0.25rem; -} - -.scrollbar::-webkit-scrollbar-corner { - display: none; -} diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css new file mode 100644 index 0000000000..730e3f1ca5 --- /dev/null +++ b/app/assets/tailwind/application.css @@ -0,0 +1,925 @@ +@import "tailwindcss"; + +@plugin 'flowbite/plugin'; + +@custom-variant dark (&:is(.dark *)); + +@theme { + --color-primary-50: #f0fdf4; + --color-primary-100: #dcfce7; + --color-primary-200: #bbf7d0; + --color-primary-300: #86efac; + --color-primary-400: #4ade80; + --color-primary-500: #22c55e; + --color-primary-600: #16a34a; + --color-primary-700: #15803d; + --color-primary-800: #166534; + --color-primary-900: #14532d; + --color-primary-950: #052e16; + --color-primary: #16a34a; +} + +/* + The default border color has changed to `currentColor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentColor); + } +} + +@utility layout-body { + display: grid; + grid-template-columns: 280px 1fr; + grid-template-rows: 1fr; + @apply h-screen w-screen transition-all; + + &.collapsed { + grid-template-columns: 0 1fr; + } +} + +@utility collapsed { + &.layout-body { + grid-template-columns: 0 1fr; + } +} + +@utility sidebar { + grid-template-areas: "navigation" "collapse"; + grid-template-rows: 1fr 40px; + overflow-x: hidden; +} + +@utility navbar-button { + @apply focus:outline-hidden rounded-md p-1 text-sm text-slate-500 hover:bg-slate-300 focus:ring-4 focus:ring-slate-200 dark:text-slate-400 dark:hover:bg-slate-700 dark:focus:ring-slate-700; + + & button.viral-dropdown--icon { + @apply focus:outline-hidden rounded-md p-1 text-sm text-slate-500 hover:bg-slate-300 focus:ring-4 focus:ring-slate-200 dark:text-slate-400 dark:hover:bg-slate-700 dark:focus:ring-slate-700; + } +} + +@utility viral-dropdown--icon { + & button.navbar-button { + @apply focus:outline-hidden rounded-md p-1 text-sm text-slate-500 hover:bg-slate-300 focus:ring-4 focus:ring-slate-200 dark:text-slate-400 dark:hover:bg-slate-700 dark:focus:ring-slate-700; + } + @apply focus:outline-hidden rounded-md p-2.5 text-sm text-slate-500 hover:bg-slate-100 focus:ring-4 focus:ring-slate-200 dark:text-slate-400 dark:hover:bg-slate-700 dark:focus:ring-slate-700; +} + +@utility link { + @apply font-medium text-green-700 hover:underline dark:text-green-500; +} + +@utility card { + @apply shadow-xs rounded-md border border-slate-200 bg-slate-50 p-4 sm:p-6 dark:border-slate-700 dark:bg-slate-800; +} + +@utility form-field { + & label { + @apply mb-1 block text-sm font-medium text-slate-900 dark:text-white; + } + + & div.field_with_errors { + @apply block w-full; + } + + & input[type="text"] { + @apply focus:ring-primary-600 focus:border-primary-600 block w-full rounded-md border border-slate-300 p-2.5 text-slate-900 sm:text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-400 dark:focus:border-green-500 dark:focus:ring-green-500; + } + + & input[type="search"] { + @apply focus:ring-primary-600 focus:border-primary-600 block w-full rounded-md border border-slate-300 p-2.5 text-slate-900 sm:text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-400 dark:focus:border-green-500 dark:focus:ring-green-500; + } + + & input[type="password"] { + @apply focus:ring-primary-600 focus:border-primary-600 block w-full rounded-md border border-slate-300 p-2.5 text-slate-900 sm:text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-400 dark:focus:border-green-500 dark:focus:ring-green-500; + } + + & input[type="email"] { + @apply focus:ring-primary-600 focus:border-primary-600 block w-full rounded-md border border-slate-300 p-2.5 text-slate-900 sm:text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-400 dark:focus:border-green-500 dark:focus:ring-green-500; + } + + & input[type="text"].prefixed { + @apply rounded-l-none rounded-r-md; + } + + & input[type="search"].prefixed { + @apply rounded-l-none rounded-r-md; + } + + & input[type="password"].prefixed { + @apply rounded-l-none rounded-r-md; + } + + & input[type="email"].prefixed { + @apply rounded-l-none rounded-r-md; + } + + &.datepicker input[type="text"] { + @apply focus:ring-primary-700 focus:border-primary-700 block w-full rounded-md border border-slate-300 p-2.5 pl-10 text-slate-900 sm:text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-400 dark:focus:border-blue-500 dark:focus:ring-blue-500; + } + + & .select2 input[type="text"] { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 10 6'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3E%3C/svg%3E"); + background-position: right 0.75rem center; + background-repeat: no-repeat; + background-size: 0.75em 0.75em; + padding-right: 2.5rem; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } + + & select { + @apply focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-md border-slate-300 p-2.5 text-slate-900 sm:text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-400; + } + + & select option { + @apply focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-md border-slate-300 p-2.5 text-slate-900 sm:text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-400; + } + + & select:has(option[value=""]:checked) { + @apply text-gray-500 dark:text-slate-400; + } + + & select.error { + @apply block w-full rounded-md border-red-500 p-2.5 text-slate-900 focus:border-red-500 focus:ring-red-500 sm:text-sm dark:border-red-400 dark:bg-slate-800 dark:text-white dark:placeholder-slate-400 dark:focus:border-red-500 dark:focus:ring-red-500; + } + + & select.prefixed { + appearance: none; + padding: 0 1em 0 1em; + margin: 0; + width: 100%; + font-family: inherit; + font-size: inherit; + cursor: inherit; + line-height: inherit; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + @apply block w-full rounded-r-md border border-slate-300 bg-white p-2.5 text-sm text-slate-900 focus:border-green-500 focus:ring-green-500 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-400 dark:drop-shadow-sm dark:focus:border-green-500 dark:focus:ring-green-500; + } + + &.invalid label { + @apply text-red-700 dark:text-red-500; + } + + &.invalid input[type="text"] { + @apply border-red-500 bg-red-50 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-800 dark:placeholder-red-300; + } + + &.invalid input[type="file"] { + @apply border-red-500 bg-red-50 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-800 dark:placeholder-red-300; + } + + &.invalid textarea { + @apply border-red-500 bg-red-50 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-800 dark:placeholder-red-300; + } + + & textarea { + @apply block w-full rounded-md border border-slate-300 p-2.5 text-sm text-slate-900 focus:border-green-500 focus:ring-green-500 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-400 dark:focus:border-green-500 dark:focus:ring-green-500; + } +} + +@utility field_with_errors { + .form-field &div { + @apply block w-full; + } +} + +@utility prefixed { + .form-field &input[type="text"] { + @apply rounded-l-none rounded-r-md; + } + + .form-field &input[type="search"] { + @apply rounded-l-none rounded-r-md; + } + + .form-field &input[type="password"] { + @apply rounded-l-none rounded-r-md; + } + + .form-field &input[type="email"] { + @apply rounded-l-none rounded-r-md; + } + + .form-field &select { + appearance: none; + padding: 0 1em 0 1em; + margin: 0; + width: 100%; + font-family: inherit; + font-size: inherit; + cursor: inherit; + line-height: inherit; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + @apply block w-full rounded-r-md border border-slate-300 bg-white p-2.5 text-sm text-slate-900 focus:border-green-500 focus:ring-green-500 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-400 dark:drop-shadow-sm dark:focus:border-green-500 dark:focus:ring-green-500; + } +} + +@utility datepicker { + &.form-field input[type="text"] { + @apply focus:ring-primary-700 focus:border-primary-700 block w-full rounded-md border border-slate-300 p-2.5 pl-10 text-slate-900 sm:text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-400 dark:focus:border-blue-500 dark:focus:ring-blue-500; + } +} + +@utility select2 { + .form-field & input[type="text"] { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 10 6'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3E%3C/svg%3E"); + background-position: right 0.75rem center; + background-repeat: no-repeat; + background-size: 0.75em 0.75em; + padding-right: 2.5rem; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } +} + +@utility error { + .form-field &select { + @apply block w-full rounded-md border-red-500 p-2.5 text-slate-900 focus:border-red-500 focus:ring-red-500 sm:text-sm dark:border-red-400 dark:bg-slate-800 dark:text-white dark:placeholder-slate-400 dark:focus:border-red-500 dark:focus:ring-red-500; + } +} + +@utility invalid { + &.form-field label { + @apply text-red-700 dark:text-red-500; + } + + &.form-field input[type="text"] { + @apply border-red-500 bg-red-50 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-800 dark:placeholder-red-300; + } + + &.form-field input[type="file"] { + @apply border-red-500 bg-red-50 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-800 dark:placeholder-red-300; + } + + &.form-field textarea { + @apply border-red-500 bg-red-50 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-800 dark:placeholder-red-300; + } +} + +@utility field-hint { + @apply mt-1 text-sm text-slate-500 dark:text-slate-400; +} + +@utility row-btn { + @apply focus:outline-hidden px-1 py-0 text-sm text-slate-500 hover:bg-slate-100 focus:ring-4 focus:ring-slate-200 dark:text-slate-400 dark:hover:bg-slate-700 dark:focus:ring-slate-700; + + & svg { + @apply h-5 w-5; + } +} + +@utility viral-icon { + height: 2rem; + width: 2rem; + max-height: 100%; + max-width: 100%; + margin: auto; + @apply flex justify-center align-middle; +} + +@utility viral-icon__Svg { + position: relative; + display: block; + width: 100%; + max-width: 100%; + max-height: 100%; +} + +@utility viral-icon--colorBase { + @apply text-slate-900; +} + +@utility viral-icon--colorSubdued { + @apply text-slate-400; +} + +@utility viral-icon--colorCritical { + @apply text-red-500; +} + +@utility viral-icon--colorWarning { + @apply text-yellow-500; +} + +@utility viral-icon--colorSuccess { + @apply text-green-500; +} + +@utility viral-icon--colorPrimary { + @apply text-primary-500; +} + +@utility viral-dropdown--button { + @apply focus:outline-hidden hover:text-primary-700 flex items-center rounded-md border border-slate-200 bg-white px-5 py-2.5 text-sm font-medium text-slate-900 hover:bg-slate-100 focus:z-10 focus:ring-4 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white dark:focus:ring-slate-700; +} + +@utility button { + @apply inline-flex w-1/2 cursor-pointer items-center justify-center rounded-md border text-sm focus:z-10 sm:w-auto; + + &:disabled { + @apply cursor-not-allowed opacity-50; + } +} + +@utility button--size-default { + @apply px-5 py-2.5 text-sm; +} + +@utility button--size-small { + @apply px-3 py-2 text-xs; +} + +@utility button--size-large { + @apply px-7 py-3 text-lg; +} + +@utility button--state-default { + @apply focus:outline-hidden border-slate-200 bg-white text-slate-900 hover:bg-slate-100 hover:text-slate-950 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white dark:focus:ring-slate-700; +} + +@utility button--state-destructive { + @apply focus:outline-hidden border-red-800 bg-red-700 text-white hover:bg-red-800 focus:ring-red-300 dark:border-red-600 dark:bg-red-600 dark:text-white dark:hover:bg-red-700 dark:focus:ring-red-700; +} + +@utility button--state-primary { + @apply border-primary-800 bg-primary-700 focus:outline-hidden hover:bg-primary-800 focus:ring-primary-300 dark:focus:ring-primary-700 dark:bg-primary-800 dark:border-primary-900 dark:hover:bg-primary-700 text-white dark:text-white; +} + +@utility dialog--size { + @apply relative max-h-full w-full; +} + +@utility dialog--size-sm { + @apply max-w-md; +} + +@utility dialog--size-md { + @apply max-w-xl; +} + +@utility dialog--size-lg { + @apply max-w-3xl; +} + +@utility dialog--size-xl { + @apply max-w-7xl; +} + +@utility dialog--header { + @apply flex items-start justify-between rounded-t border-b p-5 dark:border-slate-600; +} + +@utility dialog--title { + @apply text-xl font-semibold text-slate-900 dark:text-white; +} + +@utility dialog--close { + @apply focus:outline-hidden ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-slate-400 hover:bg-slate-200 hover:text-slate-900 focus:ring-4 focus:ring-slate-200 dark:hover:bg-slate-600 dark:hover:text-white dark:focus:ring-slate-700; +} + +@utility dialog--section { + @apply p-5; +} + +@utility avatar { + @apply relative inline-flex flex-none items-center justify-center overflow-hidden rounded-md text-slate-800 dark:text-slate-300; + --tw-avatar-bg-lightness: 35%; + --tw-avatar-border-lightness: 35%; + --tw-avatar-bg-alpha: 0.3; + + .dark & { + --tw-avatar-bg-lightness: 25%; + --tw-avatar-border-lightness: 90%; + --tw-avatar-bg-alpha: 0.4; + } +} + +@utility dark { + & .avatar { + --tw-avatar-bg-lightness: 25%; + --tw-avatar-border-lightness: 90%; + --tw-avatar-bg-alpha: 0.4; + } +} + +@utility namespace-tree-container { + /*GROUPS LIST TREE*/ + & > .namespace-list-tree > .namespace-entry.has-children:first-child { + border-top: 0; + } +} + +@utility namespace-list-tree { + /*GROUPS LIST TREE*/ + .namespace-tree-container > & > .namespace-entry.has-children:first-child { + border-top: 0; + } + + & .folder-toggle-wrap { + font-size: 0; + flex-shrink: 0; + } + + & .folder-toggle-wrap span { + font-size: 12px; + } + + & .item-type-icon { + margin-top: 2px; + width: 20px; + } + + & > .namespace-entry:not(.has-children) .folder-caret { + opacity: 0; + } + + & & { + margin-bottom: 0; + margin-left: 30px; + position: relative; + } + + & &::before { + content: ""; + display: block; + width: 0; + position: absolute; + top: 5px; + bottom: 0; + left: -16px; + @apply border-l-2 border-slate-200 dark:border-slate-600; + } + + & & .namespace-entry { + position: relative; + } + + & & .namespace-entry::before { + content: ""; + display: block; + width: 10px; + height: 0; + position: absolute; + top: 30px; + left: -16px; + @apply border-t-2 border-slate-200 dark:border-slate-600; + } + + & & .namespace-entry:last-child::before { + height: auto; + top: 30px; + bottom: 0; + @apply bg-white dark:bg-slate-800; + } + + & & .namespace-entry.being-removed { + opacity: 0.5; + } + + & .namespace-entry { + padding: 0; + } + + & .namespace-entry.has-children { + border-top: 0; + } + + & .namespace-entry:first-child { + @apply border-t border-slate-200 dark:border-slate-600; + } + + & .namespace-entry.has-children > .namespace-entry-contents:hover { + @apply cursor-pointer border-slate-50 bg-slate-50 dark:border-slate-600 dark:bg-slate-600; + } + + & .namespace-entry-contents .namespace-text-container { + min-width: 0; + } + + & .namespace-entry-contents .namespace-text { + min-width: 0; + } + + & .namespace-entry-contents .namespace-text { + flex-basis: 100%; + } + + & .namespace-entry-contents .avatar-container { + flex-shrink: 0; + } + + & .namespace-entry-contents .avatar-container > a { + width: 100%; + text-decoration: none; + } + + & .namespace-entry-contents .title { + @apply text-base font-medium text-slate-900 dark:text-white; + } + + & .namespace-entry-contents.has-more-items { + display: block; + padding: 20px 10px; + } + + & .namespace-entry-contents .description p { + max-width: 100%; + @apply text-sm text-slate-700 dark:text-slate-400; + } + + & .namespace-entry-contents .stats { + position: relative; + line-height: normal; + text-align: right; + flex-shrink: 0; + } + + & .namespace-entry-contents .stats > span { + display: inline-flex; + align-items: center; + height: 16px; + min-width: 30px; + } + + & .namespace-entry-contents .stats .stat-value { + margin: 2px 0 0 5px; + } +} + +@utility namespace-entry { + /*GROUPS LIST TREE*/ + .namespace-tree-container + > .namespace-list-tree + > &.has-children:first-child { + border-top: 0; + } + + .namespace-list-tree > &:not(.has-children) .folder-caret { + opacity: 0; + } + + .namespace-list-tree .namespace-list-tree & { + position: relative; + } + + .namespace-list-tree .namespace-list-tree &::before { + content: ""; + display: block; + width: 10px; + height: 0; + position: absolute; + top: 30px; + left: -16px; + @apply border-t-2 border-slate-200 dark:border-slate-600; + } + + .namespace-list-tree .namespace-list-tree &:last-child::before { + height: auto; + top: 30px; + bottom: 0; + @apply bg-white dark:bg-slate-800; + } + + .namespace-list-tree .namespace-list-tree &.being-removed { + opacity: 0.5; + } + + .namespace-list-tree & { + padding: 0; + } + + .namespace-list-tree &.has-children { + border-top: 0; + } + + .namespace-list-tree &:first-child { + @apply border-t border-slate-200 dark:border-slate-600; + } + + .namespace-list-tree &.has-children > .namespace-entry-contents:hover { + @apply cursor-pointer border-slate-50 bg-slate-50 dark:border-slate-600 dark:bg-slate-600; + } +} + +@utility has-children { + /*GROUPS LIST TREE*/ + .namespace-tree-container + > .namespace-list-tree + > &.namespace-entry:first-child { + border-top: 0; + } + + .namespace-list-tree &.namespace-entry { + border-top: 0; + } + + .namespace-list-tree &.namespace-entry > .namespace-entry-contents:hover { + @apply cursor-pointer border-slate-50 bg-slate-50 dark:border-slate-600 dark:bg-slate-600; + } +} + +@utility folder-toggle-wrap { + .namespace-list-tree & { + font-size: 0; + flex-shrink: 0; + } + + .namespace-list-tree & span { + font-size: 12px; + } +} + +@utility item-type-icon { + .namespace-list-tree & { + margin-top: 2px; + width: 20px; + } +} + +@utility folder-caret { + .namespace-list-tree > .namespace-entry:not(.has-children) & { + opacity: 0; + } +} + +@utility being-removed { + .namespace-list-tree .namespace-list-tree &.namespace-entry { + opacity: 0.5; + } +} + +@utility namespace-entry-contents { + .namespace-list-tree .namespace-entry.has-children > &:hover { + @apply cursor-pointer border-slate-50 bg-slate-50 dark:border-slate-600 dark:bg-slate-600; + } + + .namespace-list-tree & .namespace-text-container { + min-width: 0; + } + + .namespace-list-tree & .namespace-text { + min-width: 0; + } + + .namespace-list-tree & .namespace-text { + flex-basis: 100%; + } + + .namespace-list-tree & .avatar-container { + flex-shrink: 0; + } + + .namespace-list-tree & .avatar-container > a { + width: 100%; + text-decoration: none; + } + + .namespace-list-tree & .title { + @apply text-base font-medium text-slate-900 dark:text-white; + } + + .namespace-list-tree &.has-more-items { + display: block; + padding: 20px 10px; + } + + .namespace-list-tree & .description p { + max-width: 100%; + @apply text-sm text-slate-700 dark:text-slate-400; + } + + .namespace-list-tree & .stats { + position: relative; + line-height: normal; + text-align: right; + flex-shrink: 0; + } + + .namespace-list-tree & .stats > span { + display: inline-flex; + align-items: center; + height: 16px; + min-width: 30px; + } + + .namespace-list-tree & .stats .stat-value { + margin: 2px 0 0 5px; + } +} + +@utility namespace-text-container { + .namespace-list-tree .namespace-entry-contents & { + min-width: 0; + } +} + +@utility namespace-text { + .namespace-list-tree .namespace-entry-contents & { + min-width: 0; + } + + .namespace-list-tree .namespace-entry-contents & { + flex-basis: 100%; + } +} + +@utility avatar-container { + .namespace-list-tree .namespace-entry-contents & { + flex-shrink: 0; + } + + .namespace-list-tree .namespace-entry-contents & > a { + width: 100%; + text-decoration: none; + } +} + +@utility title { + .namespace-list-tree .namespace-entry-contents & { + @apply text-base font-medium text-slate-900 dark:text-white; + } +} + +@utility has-more-items { + .namespace-list-tree &.namespace-entry-contents { + display: block; + padding: 20px 10px; + } +} + +@utility description { + .namespace-list-tree .namespace-entry-contents & p { + max-width: 100%; + @apply text-sm text-slate-700 dark:text-slate-400; + } +} + +@utility stats { + .namespace-list-tree .namespace-entry-contents & { + position: relative; + line-height: normal; + text-align: right; + flex-shrink: 0; + } + + .namespace-list-tree .namespace-entry-contents & > span { + display: inline-flex; + align-items: center; + height: 16px; + min-width: 30px; + } + + .namespace-list-tree .namespace-entry-contents & .stat-value { + margin: 2px 0 0 5px; + } +} + +@utility stat-value { + .namespace-list-tree .namespace-entry-contents .stats & { + margin: 2px 0 0 5px; + } +} + +@layer utilities { + body { + height: 100vh; + overflow: hidden; + } +} + +@layer components { + kbd { + @apply rounded-lg border border-slate-200 bg-slate-100 px-2 py-1.5 text-sm font-semibold text-slate-800 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100; + } + + dt { + @apply text-base font-medium text-gray-900 dark:text-white; + } + + dd { + @apply text-gray-500 dark:text-gray-400; + } + + dd:not(:last-child) { + @apply mb-4; + } + + p link { + @apply font-medium text-green-600 underline hover:no-underline dark:text-green-500; + } + + input[type="checkbox"] { + @apply focus:ring-primary-300 dark:focus:ring-primary-600 h-4 w-4 rounded-sm border border-slate-300 bg-slate-50 focus:ring-4 dark:border-slate-600 dark:bg-slate-800 dark:ring-offset-slate-800; + } + + input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; + cursor: pointer; + height: 20px; + width: 20px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A"); + } + + /* VIRAL DIALOG */ + dialog { + @apply focus:outline-hidden max-h-full w-full max-w-2xl rounded-lg bg-white p-0 shadow-sm dark:bg-slate-800; + top: 50%; + left: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -moz-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + } + + dialog::backdrop { + @apply backdrop-blur-xs bg-slate-400/30 dark:bg-slate-900/40; + } + + strong { + @apply font-semibold; + } +} + +.pagy-nav.pagination { + @apply shadow-xs isolate inline-flex -space-x-px rounded-md; +} + +.page.next a { + @apply flex h-full items-center justify-center rounded-r-lg border border-slate-300 bg-white px-3 py-1.5 leading-tight text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white; +} + +.page.prev a { + @apply ml-0 flex h-full items-center justify-center rounded-l-lg border border-slate-300 bg-white px-3 py-1.5 text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white; +} + +.page.next.disabled { + @apply ml-0 flex h-full cursor-not-allowed items-center justify-center rounded-r-lg border border-slate-300 bg-slate-50 px-3 py-1.5 text-slate-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400; +} + +.page.prev.disabled { + @apply ml-0 flex h-full cursor-not-allowed items-center justify-center rounded-l-lg border border-slate-300 bg-slate-50 px-3 py-1.5 text-slate-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400; +} + +.page a, +.page.gap { + @apply focus:outline-hidden hover:text-primary-700 relative inline-flex items-center border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-900 hover:bg-slate-100 focus:z-10 focus:ring-4 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white dark:focus:ring-slate-700; +} + +.page.active { + @apply text-primary-600 bg-primary-50 border-primary-300 hover:bg-primary-100 hover:text-primary-700 z-10 flex items-center justify-center border px-3 py-2 text-sm leading-tight dark:border-slate-700 dark:bg-slate-800 dark:text-white; +} + +.pagy-info { + @apply text-sm font-normal text-slate-500 dark:text-slate-400; +} + +div.field_with_errors > :is(select) { + @apply border-red-700 text-red-900 placeholder-red-300; +} + +.table-container table:not(:has(tbody td)) { + display: none; +} + +.table-container:not(:has(td)) .empty_state_message { + display: block; +} + +.table-container .empty_state_message { + display: none; +} + +.fixed-table-component { + height: calc(100vh - 50px - 32px); + max-height: calc(100vh - 50px - 32px); + display: flex; + flex-direction: column; +} + +.scrollbar::-webkit-scrollbar { + width: 0.75rem; + height: 0.75rem; +} + +.scrollbar::-webkit-scrollbar-thumb { + --tw-bg-opacity: 1 !important; + @apply bg-slate-300 dark:bg-slate-600; + border-radius: 0.25rem; +} + +.scrollbar::-webkit-scrollbar-corner { + display: none; +} diff --git a/app/components/advanced_search_component.html.erb b/app/components/advanced_search_component.html.erb index 49458ff991..d911c8cb19 100644 --- a/app/components/advanced_search_component.html.erb +++ b/app/components/advanced_search_component.html.erb @@ -12,7 +12,7 @@ class=" inline-flex items-center justify-center w-1/2 text-sm border rounded-s-md cursor-pointer sm:w-auto focus:z-10 text-sm px-5 py-2.5 bg-white text-slate-900 - border-slate-200 focus:outline-none focus:ring-slate-200 hover:bg-slate-100 + border-slate-200 focus:outline-hidden focus:ring-slate-200 hover:bg-slate-100 hover:text-slate-950 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-600 dark:focus:ring-slate-700 dark:border-slate-600 dark:hover:text-white dark:hover:bg-slate-700 @@ -27,7 +27,7 @@ class=" inline-flex items-center justify-center w-1/2 text-sm border border-l-0 rounded-e-md cursor-pointer sm:w-auto focus:z-10 text-sm px-5 py-2.5 bg-white - text-slate-900 border-slate-200 focus:outline-none focus:ring-slate-200 + text-slate-900 border-slate-200 focus:outline-hidden focus:ring-slate-200 hover:bg-slate-100 hover:text-slate-950 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-600 dark:focus:ring-slate-700 dark:border-slate-600 dark:hover:text-white dark:hover:bg-slate-700 diff --git a/app/components/attachments/dialogs/delete_attachment_component.html.erb b/app/components/attachments/dialogs/delete_attachment_component.html.erb index 74cbf44898..3a9ead7423 100644 --- a/app/components/attachments/dialogs/delete_attachment_component.html.erb +++ b/app/components/attachments/dialogs/delete_attachment_component.html.erb @@ -38,7 +38,7 @@ text-white bg-red-700 border-red-800 - focus:outline-none + focus:outline-hidden hover:bg-red-800 focus:ring-red-300 dark:focus:ring-red-700 diff --git a/app/components/attachments/dialogs/new_attachment_component.html.erb b/app/components/attachments/dialogs/new_attachment_component.html.erb index 30eb7fdf6d..2c40a08a8f 100644 --- a/app/components/attachments/dialogs/new_attachment_component.html.erb +++ b/app/components/attachments/dialogs/new_attachment_component.html.erb @@ -31,7 +31,7 @@ action: "change->file-upload#handleFileChange", }, class: - "block w-full mb-5 text-xs text-slate-900 border border-slate-300 rounded-lg cursor-pointer bg-slate-50 dark:text-slate-400 focus:outline-none dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400" %> + "block w-full mb-5 text-xs text-slate-900 border border-slate-300 rounded-lg cursor-pointer bg-slate-50 dark:text-slate-400 focus:outline-hidden dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400" %> <%= viral_alert(message: t('.files_ignored'), type: :info, data: { "file-upload-target": "alert" }, classes: "hidden") do %>