phoenix_kit

1.7.90

1.7.207 1.7.206 1.7.205 1.7.204 1.7.203 1.7.202 1.7.201 1.7.200 1.7.199 1.7.198 1.7.197 1.7.196 1.7.194 1.7.193 1.7.192 1.7.191 1.7.190 1.7.189 1.7.187 1.7.186 1.7.185 1.7.184 1.7.183 1.7.182 1.7.181 1.7.180 1.7.179 1.7.178 1.7.177 1.7.176 1.7.175 1.7.174 1.7.173 1.7.172 1.7.171 1.7.170 1.7.169 1.7.168 1.7.167 1.7.166 1.7.165 1.7.164 1.7.162 1.7.161 1.7.160 1.7.159 1.7.157 1.7.156 1.7.155 1.7.154 1.7.153 1.7.152 1.7.151 1.7.150 1.7.149 1.7.146 1.7.145 1.7.144 1.7.143 1.7.138 1.7.133 1.7.132 1.7.131 1.7.130 1.7.128 1.7.126 1.7.125 1.7.121 1.7.120 1.7.119 1.7.118 1.7.117 1.7.116 1.7.115 1.7.114 1.7.113 1.7.112 1.7.111 1.7.110 1.7.109 1.7.108 1.7.107 1.7.106 1.7.105 1.7.104 1.7.103 1.7.102 1.7.101 1.7.100 1.7.99 1.7.98 1.7.97 1.7.96 1.7.95 1.7.94 1.7.93 1.7.92 1.7.91 1.7.90 1.7.89 1.7.88 1.7.87 1.7.86 1.7.85 1.7.84 1.7.83 1.7.82 1.7.81 1.7.80 1.7.79 1.7.78 1.7.77 1.7.76 1.7.75 1.7.74 1.7.71 1.7.70 1.7.69 1.7.66 1.7.65 1.7.64 1.7.63 1.7.62 1.7.61 1.7.59 1.7.58 1.7.57 1.7.56 1.7.55 1.7.54 1.7.53 1.7.52 1.7.51 1.7.49 1.7.44 1.7.43 1.7.42 1.7.41 1.7.39 1.7.38 1.7.37 1.7.36 1.7.34 1.7.33 1.7.31 1.7.30 1.7.29 1.7.28 1.7.27 1.7.26 1.7.25 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.20 1.6.19 1.6.18 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2 1.3.1 1.3.0 1.2.10 1.2.9 1.2.8 1.2.7 1.2.5 1.2.4 1.2.2 1.2.1 1.2.0 1.1.0 1.0.0

A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more

HexDocs

Current section

Files

Jump to

Readme 221 Versions 39 Dependencies Dependants Files Activity

phoenix_kit priv static assets css app.css

Raw

priv/static/assets/css/app.css

/* PhoenixKit DaisyUI 5 Theme Definitions */
/* Color-only themes to prevent layout jumping */

/* ============================================================================
   Fade In/Out Animations
   Used for progress bars and dynamic content
   ============================================================================ */

@keyframes pk-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pk-fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pk-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.animate-fade-in {
  animation: pk-fade-in 0.3s ease-out;
}

.animate-fade-in-down {
  animation: pk-fade-in-down 0.3s ease-out;
}

.animate-fade-out {
  animation: pk-fade-out 0.2s ease-in forwards;
}

/* Custom Phoenix Themes */
[data-theme=phoenix-light] {
  color-scheme: light;
  --color-primary: oklch(57.38% 0.233 262.08);
  --color-primary-content: oklch(98% 0.02 262.08);
  --color-secondary: oklch(75.61% 0.194 333.67);
  --color-secondary-content: oklch(20% 0.02 333.67);
  --color-accent: oklch(74.22% 0.209 6.35);
  --color-accent-content: oklch(20% 0.02 6.35);
  --color-neutral: oklch(23.04% 0.065 269.31);
  --color-neutral-content: oklch(98% 0.02 269.31);
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(96% 0 0);
  --color-base-300: oklch(92% 0.005 286.88);
  --color-base-content: oklch(20% 0.02 269.31);
  --color-info: oklch(72.06% 0.191 231.6);
  --color-info-content: oklch(20% 0.02 231.6);
  --color-success: oklch(64.8% 0.150 160);
  --color-success-content: oklch(20% 0.02 160);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(20% 0.02 83.87);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(20% 0.02 22.18);
}

[data-theme=phoenix-dark] {
  color-scheme: dark;
  --color-primary: oklch(57.38% 0.233 262.08);
  --color-primary-content: oklch(98% 0.02 262.08);
  --color-secondary: oklch(75.61% 0.194 333.67);
  --color-secondary-content: oklch(20% 0.02 333.67);
  --color-accent: oklch(74.22% 0.209 6.35);
  --color-accent-content: oklch(20% 0.02 6.35);
  --color-neutral: oklch(32.77% 0.033 264.54);
  --color-neutral-content: oklch(85% 0.02 264.54);
  --color-base-100: oklch(25.33% 0.024 265.76);
  --color-base-200: oklch(23.45% 0.022 265.76);
  --color-base-300: oklch(21.68% 0.020 265.76);
  --color-base-content: oklch(85% 0.02 265.76);
  --color-info: oklch(72.06% 0.191 231.6);
  --color-info-content: oklch(20% 0.02 231.6);
  --color-success: oklch(64.8% 0.150 160);
  --color-success-content: oklch(20% 0.02 160);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(20% 0.02 83.87);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(20% 0.02 22.18);
}

/* Black Theme - OLED-friendly */
[data-theme=black] {
  color-scheme: dark;
  --color-primary: oklch(65.91% 0.196 273.21);
  --color-primary-content: oklch(17.43% 0.037 277.02);
  --color-secondary: oklch(47.73% 0.103 236.64);
  --color-secondary-content: oklch(89.19% 0.023 236.59);
  --color-accent: oklch(70.71% 0.191 327.17);
  --color-accent-content: oklch(12.19% 0.042 329.69);
  --color-neutral: oklch(14.86% 0.046 272.16);
  --color-neutral-content: oklch(86.9% 0.017 272.16);
  --color-base-100: oklch(9.04% 0 0);
  --color-base-200: oklch(11.13% 0.019 272.16);
  --color-base-300: oklch(15.31% 0.038 272.16);
  --color-base-content: oklch(86.9% 0.017 272.16);
  --color-info: oklch(64.04% 0.197 247.86);
  --color-info-content: oklch(17.43% 0.037 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(17.43% 0.037 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(17.43% 0.037 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(17.43% 0.037 22.18);
}

/* ============================================================================
   Mobile Responsiveness Fixes
   Override DaisyUI styles for better mobile experience

   NOTE: Core DaisyUI label/flex/checkbox overrides live in
   phoenix_kit_daisyui5.css (loaded first). This file adds app-specific
   mobile layout fixes only.
   ============================================================================ */

/* General label improvements for all screen sizes */
.label-text,
.label-text-alt {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: label-text-alt should stack below and align left */
@media (max-width: 768px) {
  .form-control .label .label-text-alt {
    margin-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    font-size: 0.75rem !important;
  }
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  /* Allow cursor-pointer labels to wrap */
  .label.cursor-pointer,
  label.label.cursor-pointer {
    white-space: normal !important;
  }

  /* Improve form control spacing on mobile */
  .form-control {
    margin-bottom: 0.75rem;
  }

  /* Ensure form inputs take full width on mobile */
  .form-control input:not([type="checkbox"]):not([type="radio"]),
  .form-control select,
  .form-control textarea {
    width: 100%;
    min-width: 0;
  }

  /* Fix long text overflow in form fields */
  .input,
  .select,
  .textarea {
    width: 100%;
  }

  /* Handle very long labels in settings forms */
  .max-w-2xl .form-control .label-text {
    font-size: 0.875rem;
  }

  /* Improve button spacing on mobile - stack buttons vertically */
  .flex.gap-3 > .btn,
  .flex.gap-4 > .btn,
  .flex.gap-2 > .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  /* Fix flex containers that should stack on mobile */
  .flex.flex-wrap.items-center.gap-3,
  .flex.flex-wrap.items-center.gap-4 {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Tablet-specific adjustments */
@media (max-width: 1024px) {
  /* Allow slightly more wrapping on tablets */
  .label span.label-text {
    word-break: break-all;
  }

  /* Make modals more mobile-friendly */
  .modal-box {
    width: 95% !important;
    max-width: none;
  }
}

/* Small mobile fixes */
@media (max-width: 640px) {
  /* Improve button spacing on small mobile devices */
  .flex.gap-3 {
    flex-direction: column;
    gap: 0.5rem !important;
  }

  /* Make form containers take full width */
  .max-w-2xl {
    width: 100%;
    max-width: 100%;
  }

  /* Fix container padding on very small screens */
  .container.mx-auto.px-4 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Fix for long unbreakable text (URLs, emails, etc.) */
@media (max-width: 768px) {
  .break-all {
    word-break: break-all !important;
  }

  /* Ensure code blocks wrap on mobile */
  code,
  .font-mono {
    word-break: break-word;
    white-space: pre-wrap;
  }
}

/* Cupcake Theme - Soft pastel light theme */
[data-theme=cupcake] {
  color-scheme: light;
  --color-primary: oklch(69.71% 0.196 12.19);
  --color-primary-content: oklch(27.19% 0.046 12.19);
  --color-secondary: oklch(76.76% 0.152 346.53);
  --color-secondary-content: oklch(23.26% 0.038 346.53);
  --color-accent: oklch(74.83% 0.172 49.77);
  --color-accent-content: oklch(24.92% 0.048 49.77);
  --color-neutral: oklch(89.8% 0.011 319.24);
  --color-neutral-content: oklch(27.19% 0.046 319.24);
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98.41% 0.014 319.24);
  --color-base-300: oklch(95.27% 0.018 319.24);
  --color-base-content: oklch(27.19% 0.046 319.24);
  --color-info: oklch(65.68% 0.196 247.86);
  --color-info-content: oklch(27.19% 0.046 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(27.19% 0.046 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(27.19% 0.046 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(27.19% 0.046 22.18);
}

/* Synthwave Theme - Neon purple/cyan dark theme */
[data-theme=synthwave] {
  color-scheme: dark;
  --color-primary: oklch(69.71% 0.196 331.56);
  --color-primary-content: oklch(17.43% 0.037 331.56);
  --color-secondary: oklch(47.73% 0.103 256.76);
  --color-secondary-content: oklch(89.19% 0.023 256.76);
  --color-accent: oklch(74.83% 0.172 186.39);
  --color-accent-content: oklch(17.43% 0.037 186.39);
  --color-neutral: oklch(21.7% 0.044 264.79);
  --color-neutral-content: oklch(89.19% 0.023 264.79);
  --color-base-100: oklch(26.47% 0.021 264.79);
  --color-base-200: oklch(23.11% 0.018 264.79);
  --color-base-300: oklch(20.14% 0.016 264.79);
  --color-base-content: oklch(89.19% 0.023 264.79);
  --color-info: oklch(65.68% 0.196 247.86);
  --color-info-content: oklch(17.43% 0.037 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(17.43% 0.037 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(17.43% 0.037 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(17.43% 0.037 22.18);
}

/* Cyberpunk Theme - Bold yellow/pink light theme */
[data-theme=cyberpunk] {
  color-scheme: light;
  --color-primary: oklch(62.95% 0.238 65.62);
  --color-primary-content: oklch(32.54% 0.058 65.62);
  --color-secondary: oklch(74.51% 0.172 334.94);
  --color-secondary-content: oklch(27.84% 0.053 334.94);
  --color-accent: oklch(74.83% 0.172 0.19);
  --color-accent-content: oklch(27.84% 0.053 0.19);
  --color-neutral: oklch(29.37% 0.066 281.49);
  --color-neutral-content: oklch(92.84% 0.019 281.49);
  --color-base-100: oklch(95.47% 0.019 281.49);
  --color-base-200: oklch(90.41% 0.016 281.49);
  --color-base-300: oklch(84.34% 0.014 281.49);
  --color-base-content: oklch(32.54% 0.058 281.49);
  --color-info: oklch(65.68% 0.196 247.86);
  --color-info-content: oklch(32.54% 0.058 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(32.54% 0.058 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(32.54% 0.058 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(32.54% 0.058 22.18);
}

/* Forest Theme - Green nature dark theme */
[data-theme=forest] {
  color-scheme: dark;
  --color-primary: oklch(67.69% 0.187 152.23);
  --color-primary-content: oklch(17.43% 0.037 152.23);
  --color-secondary: oklch(47.73% 0.103 172.79);
  --color-secondary-content: oklch(89.19% 0.023 172.79);
  --color-accent: oklch(74.83% 0.172 142.5);
  --color-accent-content: oklch(17.43% 0.037 142.5);
  --color-neutral: oklch(25.25% 0.032 152.23);
  --color-neutral-content: oklch(89.19% 0.023 152.23);
  --color-base-100: oklch(20.65% 0.025 152.23);
  --color-base-200: oklch(17.85% 0.022 152.23);
  --color-base-300: oklch(15.43% 0.019 152.23);
  --color-base-content: oklch(89.19% 0.023 152.23);
  --color-info: oklch(65.68% 0.196 247.86);
  --color-info-content: oklch(17.43% 0.037 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(17.43% 0.037 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(17.43% 0.037 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(17.43% 0.037 22.18);
}

/* Dracula Theme - Purple/pink vampire dark theme */
[data-theme=dracula] {
  color-scheme: dark;
  --color-primary: oklch(65.91% 0.196 327.17);
  --color-primary-content: oklch(17.43% 0.037 327.17);
  --color-secondary: oklch(47.73% 0.103 296.67);
  --color-secondary-content: oklch(89.19% 0.023 296.67);
  --color-accent: oklch(74.83% 0.172 12.19);
  --color-accent-content: oklch(17.43% 0.037 12.19);
  --color-neutral: oklch(26.95% 0.041 277.02);
  --color-neutral-content: oklch(89.19% 0.023 277.02);
  --color-base-100: oklch(21.7% 0.032 277.02);
  --color-base-200: oklch(18.73% 0.028 277.02);
  --color-base-300: oklch(16.17% 0.024 277.02);
  --color-base-content: oklch(89.19% 0.023 277.02);
  --color-info: oklch(65.68% 0.196 247.86);
  --color-info-content: oklch(17.43% 0.037 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(17.43% 0.037 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(17.43% 0.037 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(17.43% 0.037 22.18);
}

/* Sunset Theme - Warm orange/purple dark theme */
[data-theme=sunset] {
  color-scheme: dark;
  --color-primary: oklch(69.71% 0.196 38.4);
  --color-primary-content: oklch(17.43% 0.037 38.4);
  --color-secondary: oklch(47.73% 0.103 327.17);
  --color-secondary-content: oklch(89.19% 0.023 327.17);
  --color-accent: oklch(74.83% 0.172 274.97);
  --color-accent-content: oklch(17.43% 0.037 274.97);
  --color-neutral: oklch(26.76% 0.036 19.18);
  --color-neutral-content: oklch(89.19% 0.023 19.18);
  --color-base-100: oklch(21.31% 0.028 19.18);
  --color-base-200: oklch(18.43% 0.024 19.18);
  --color-base-300: oklch(15.93% 0.021 19.18);
  --color-base-content: oklch(89.19% 0.023 19.18);
  --color-info: oklch(65.68% 0.196 247.86);
  --color-info-content: oklch(17.43% 0.037 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(17.43% 0.037 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(17.43% 0.037 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(17.43% 0.037 22.18);
}

/* ============================================================================
   Tailwind Typography Prose Overrides with DaisyUI Theme Integration
   Extends prose classes to use daisyUI's theme-aware CSS custom properties.
   ============================================================================ */

@layer base {
  /* Override prose colors to use daisyUI theme variables */
  .prose {
    color: oklch(var(--bc));
    max-width: 65ch;
  }

  /* Headings */
  .prose h1 {
    color: oklch(var(--bc));
    font-size: 2.25rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid oklch(var(--bc) / 0.1);
  }

  .prose h2 {
    color: oklch(var(--bc));
    font-size: 1.875rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .prose h3 {
    color: oklch(var(--bc));
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .prose h4 {
    color: oklch(var(--bc));
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  .prose h5 {
    color: oklch(var(--bc));
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  .prose h6 {
    color: oklch(var(--bc));
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  /* Paragraphs */
  .prose p {
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.7;
  }

  /* Text emphasis */
  .prose strong {
    color: oklch(var(--bc));
    font-weight: 700;
  }

  .prose em {
    color: oklch(var(--bc));
    font-style: italic;
  }

  .prose del,
  .prose s {
    color: oklch(var(--bc) / 0.7);
    text-decoration: line-through;
  }

  /* Horizontal rule */
  .prose hr {
    border-color: oklch(var(--bc) / 0.1);
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  /* Inline code */
  .prose code {
    color: oklch(var(--bc));
    background-color: oklch(var(--b2));
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.9em;
  }

  /* Code blocks */
  .prose pre {
    color: oklch(var(--bc));
    background-color: oklch(var(--b3));
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .prose pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
  }

  /* Links */
  .prose a {
    color: oklch(var(--p));
    text-decoration: underline;
  }

  .prose a:hover {
    color: oklch(var(--pf));
  }

  /* Blockquotes */
  .prose blockquote {
    color: oklch(var(--bc) / 0.7);
    border-left-color: oklch(var(--p));
    border-left-width: 4px;
    border-left-style: solid;
    padding-left: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-style: italic;
  }

  /* Tables */
  .prose table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .prose table th,
  .prose table td {
    border: 1px solid oklch(var(--bc) / 0.2);
    padding: 0.5rem;
    text-align: left;
  }

  .prose table th {
    color: oklch(var(--bc));
    background-color: oklch(var(--b2));
    font-weight: 600;
  }

  .prose table td {
    color: oklch(var(--bc));
  }

  /* Images */
  .prose img {
    border-radius: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  /* Lists */
  .prose ul,
  .prose ol {
    color: oklch(var(--bc));
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 2rem;
  }

  .prose li {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  /* Task lists (checkboxes) */
  .prose input[type="checkbox"] {
    margin-right: 0.5rem;
    cursor: pointer;
  }

  .prose li:has(input[type="checkbox"]) {
    list-style: none;
    margin-left: -1.5rem;
  }

  /* Large prose variant */
  .prose-lg {
    font-size: 1.125rem;
    line-height: 1.75;
  }

  .prose-lg h1 {
    font-size: 2.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
  }

  .prose-lg h2 {
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

  .prose-lg h3 {
    font-size: 1.75rem;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
  }

  /* Small prose variant */
  .prose-sm {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .prose-sm h1 {
    font-size: 1.875rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .prose-sm h2 {
    font-size: 1.5rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
  }
}

Operator	Description	Example
name:	Match package name. Supports * wildcards and repo/package form	name:phx* or name:hexpm/phoenix
description:	Full-text search of package descriptions	description:auth
depends:	Packages depending on a given package. Supports repo:package form	depends:ecto or depends:hexpm:ecto
build_tool:	Filter by build tool	build_tool:mix
updated_after:	Packages updated after an ISO8601 datetime	updated_after:2025-01-01T00:00:00Z
extra:	Match custom metadata (key,value). Nested keys are separated by commas	extra:license,MIT