twntyx-css 1.0.0

package/styles/command.css

@@ -0,0 +1,81 @@
+/*----------------------------*/
+/* COMMAND */
+/*----------------------------*/
+
+@utility command {
+  @apply overflow-hidden rounded-2xl border bg-background-surface border-line-default;
+
+  > :where(:first-child, .command-search) {
+    @apply p-2 border-b border-line-default;
+  }
+
+  > :where(:first-child, .command-search) > :where(:first-child, .command-input) {
+    @apply input-control input-ghost input-rounded-md;
+  }
+
+  > :where(:last-child, .command-list) {
+    @apply overflow-y-auto p-1.5 max-h-72;
+
+    > :where(section, .command-group) {
+      @apply mb-2;
+
+      > h3 {
+        @apply px-2 pb-1 text-xs uppercase text-text-tertiary;
+      }
+
+      > :where(ul, .command-items) {
+        @apply menu menu-sm;
+
+        > li > :where(button, a, .command-item) {
+          @apply px-2 py-1.5 rounded-lg text-sm;
+        }
+
+        > li.is-active > :where(button, a, .command-item),
+        > li > :where(button, a, .command-item).is-active {
+          @apply include-hover-primary-active text-text-brand;
+        }
+      }
+    }
+
+    > :where(.is-empty, .command-empty) {
+      @apply p-4 text-sm text-text-tertiary text-center;
+    }
+  }
+}
+
+/* Compatibility aliases */
+@utility command-search {
+  @apply p-2 border-b border-line-default;
+}
+
+@utility command-input {
+  @apply input-control input-ghost input-rounded-md;
+}
+
+@utility command-list {
+  @apply overflow-y-auto p-1.5 max-h-72;
+}
+
+@utility command-group {
+  @apply mb-2;
+
+  > h3 {
+    @apply px-2 pb-1 text-xs uppercase text-text-tertiary;
+  }
+
+  > ul {
+    @apply menu menu-sm;
+  }
+}
+
+@utility command-item {
+  @apply px-2 py-1.5 rounded-lg text-sm;
+
+  &.is-active {
+    @apply include-hover-primary-active text-text-brand;
+  }
+}
+
+@utility is-empty {
+  @apply p-4 text-sm text-text-tertiary text-center;
+}

package/styles/contest.css

@@ -0,0 +1,227 @@
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: rgba(9, 10, 12, 0.9);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.site-header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+  padding: 1.25rem 2.5rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.site-logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-primary);
+}
+
+.site-nav {
+  display: flex;
+  gap: 1.5rem;
+  font-size: 0.95rem;
+  color: var(--text-secondary);
+}
+
+.site-hero {
+  padding: 4rem 2.5rem 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.site-hero h1 {
+  font-size: clamp(2.5rem, 4vw, 3.5rem);
+  line-height: 1.05;
+  margin-bottom: 1rem;
+}
+
+.site-hero p {
+  max-width: 640px;
+  font-size: 1.1rem;
+  color: var(--text-secondary);
+}
+
+.contest-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 1.5rem;
+  padding: 0 2.5rem 3rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.contest-card {
+  border: 1px solid var(--border-subtle);
+  border-radius: 1.25rem;
+  padding: 1.5rem;
+  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  display: grid;
+  gap: 1rem;
+  min-height: 220px;
+}
+
+.contest-card h3 {
+  font-size: 1.4rem;
+}
+
+.contest-card p {
+  color: var(--text-secondary);
+}
+
+.contest-meta {
+  font-size: 0.9rem;
+  color: var(--text-tertiary);
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.panel-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2.5rem;
+}
+
+.contest-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: 2rem;
+}
+
+.contest-sidebar {
+  position: sticky;
+  top: 120px;
+  display: grid;
+  gap: 1.5rem;
+  align-self: start;
+}
+
+.contest-list {
+  display: grid;
+  gap: 1rem;
+}
+
+.contest-entry {
+  border: 1px solid var(--border-subtle);
+  border-radius: 1rem;
+  padding: 1.25rem;
+  background: rgba(255, 255, 255, 0.02);
+  display: grid;
+  gap: 0.75rem;
+}
+
+.contest-image {
+  width: 100%;
+  max-height: 240px;
+  object-fit: cover;
+  border-radius: 0.75rem;
+  border: 1px solid var(--border-subtle);
+}
+
+.upload-progress {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.85rem;
+  color: var(--text-tertiary);
+}
+
+.upload-progress progress {
+  width: 100%;
+  height: 10px;
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.upload-field {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.upload-dropzone {
+  border: 1px dashed var(--border-subtle);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  cursor: pointer;
+  transition: border-color 0.2s ease, background 0.2s ease;
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.upload-dropzone.is-dragging {
+  border-color: var(--border-strong, #cbd5f5);
+  background: rgba(59, 130, 246, 0.08);
+}
+
+.contest-entry h4 {
+  font-size: 1.1rem;
+}
+
+.contest-entry .vote-count {
+  font-size: 0.85rem;
+  color: var(--text-tertiary);
+}
+
+.hero-surface {
+  border: 1px solid var(--border-subtle);
+  border-radius: 1.5rem;
+  padding: 2rem;
+  background: radial-gradient(circle at top left, rgba(255, 83, 160, 0.15), transparent 50%),
+    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.15), transparent 45%),
+    rgba(255, 255, 255, 0.02);
+}
+
+.admin-grid {
+  display: grid;
+  gap: 2rem;
+}
+
+.admin-grid form {
+  display: grid;
+  gap: 1rem;
+}
+
+.badge-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.3rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: rgba(34, 197, 94, 0.15);
+  color: #a7f3d0;
+}
+
+.badge-ended {
+  background: rgba(248, 113, 113, 0.18);
+  color: #fecaca;
+}
+
+@media (max-width: 900px) {
+  .site-header-inner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .site-nav {
+    flex-wrap: wrap;
+  }
+
+  .contest-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .contest-sidebar {
+    position: static;
+  }
+}

package/styles/countdown.css

@@ -0,0 +1,65 @@
+/*----------------------------*/
+/* COUNTDOWN */
+/*----------------------------*/
+
+.countdown {
+  @apply
+  leading-[0]
+  inline-flex
+  items-baseline
+  ;
+  > * {
+    @apply
+    not-italic
+    ;
+  }
+
+  > i:not(:last-child) {
+    @apply
+    mr-0.5
+    ;
+  }
+  > span {
+    @apply
+    h-4
+    leading-none
+    inline-block
+    overflow-y-hidden
+    /* mx-auto */
+    ;
+    &::before {
+      @apply
+      relative
+      content-["00\a_01\a_02\a_03\a_04\a_05\a_06\a_07\a_08\a_09\a_10\a_11\a_12\a_13\a_14\a_15\a_16\a_17\a_18\a_19\a_20\a_21\a_22\a_23\a_24\a_25\a_26\a_27\a_28\a_29\a_30\a_31\a_32\a_33\a_34\a_35\a_36\a_37\a_38\a_39\a_40\a_41\a_42\a_43\a_44\a_45\a_46\a_47\a_48\a_49\a_50\a_51\a_52\a_53\a_54\a_55\a_56\a_57\a_58\a_59\a_60\a_61\a_62\a_63\a_64\a_65\a_66\a_67\a_68\a_69\a_70\a_71\a_72\a_73\a_74\a_75\a_76\a_77\a_78\a_79\a_80\a_81\a_82\a_83\a_84\a_85\a_86\a_87\a_88\a_89\a_90\a_91\a_92\a_93\a_94\a_95\a_96\a_97\a_98\a_99\a"]
+      whitespace-pre
+      text-center
+      transition-all
+      duration-1000
+      top-[calc(var(--value)_*_-1em)]
+      ease-[cubic-bezier(0.9,0,0.1,1)]
+      ;
+    }
+  }
+}
+
+.chip {
+  .countdown > span {
+    @apply
+    h-4
+    ;
+  }
+  &.chip-sm {
+    .countdown > span {
+      @apply
+      h-3
+      ;
+    }
+  }
+  &.chip-xs {
+    .countdown > span {
+      @apply
+      h-2
+      ;
+    }
+  }
+}

package/styles/datepicker.css

@@ -0,0 +1,124 @@
+/*----------------------------*/
+/* DATEPICKER */
+/*----------------------------*/
+
+@utility datepicker {
+  @apply
+  flex
+  overflow-hidden
+  flex-col
+  w-80
+  surface
+  rounded-3xl
+  border
+  shadow-lg
+  p-3
+  space-y-0.5;
+
+  /* Add styles for ranges */
+  &.has-ranges {
+    @apply w-auto flex-row;
+
+    .datepicker-ranges {
+      @apply w-48 border-r border-line-default p-2;
+
+      button {
+        @apply w-full text-left px-3 py-2 rounded-lg text-text-secondary hover:text-text-default hover:bg-background-surface-sunken;
+
+        &.is-selected {
+          @apply text-text-default bg-background-surface-sunken;
+        }
+      }
+    }
+  }
+
+  > ul {
+    > li {
+      @apply flex items-center justify-center;
+
+      button {
+        @apply
+        flex
+        justify-center
+        items-center
+        m-px
+        text-sm
+        text-text-default
+        rounded-full
+        border
+        border-transparent
+        size-10
+        hover:border-background-brand-hover
+        hover:text-background-brand-hover
+        disabled:opacity-50
+        disabled:pointer-events-none
+        focus:outline-hidden
+        focus:border-background-brand
+        focus:text-text-brand
+        ;         
+      }
+
+      &:has(.range-start) ~ li > div,
+      > div.range-start ~ div {
+        @apply bg-core-ui-200 dark:bg-core-ui-700;
+      }
+      &:has(.range-end) ~ li > div,
+      > div.range-end ~ div {
+        @apply bg-transparent dark:bg-transparent;
+      }
+      
+      > div {
+        &.is-selected,
+        &.range-start,
+        &.range-end {
+          > button {
+            @apply text-text-inverted bg-background-brand;
+          }
+        }
+
+        &.range-start,
+        &.range-end {
+          @apply bg-core-ui-200 dark:bg-core-ui-700;
+        }
+
+        &.range-start {
+          @apply rounded-l-full;
+        }
+
+        &.range-end {
+          @apply rounded-r-full;
+        }
+      }
+      
+
+    }
+  }
+}
+
+@utility datepicker-header {
+  @apply flex items-center justify-between pb-3 mx-1.5 text-sm gap-1;
+
+  select {
+    @apply
+    appearance-none
+    include-active
+    bg-transparent
+    px-1!
+    bg-none
+    rounded-sm
+    flex-1
+    font-medium
+    ;
+    &:first-of-type {
+      @apply text-right;
+    }
+  }
+}
+
+@utility datepicker-subheader {
+  @apply flex pb-1.5;
+
+  > span {
+    @apply block m-px w-10 text-sm text-center text-core-ui-500 dark:text-core-ui-400;
+  }
+}

package/styles/divider.css

@@ -0,0 +1,72 @@
+/*----------------------------*/
+/* DIVIDER */
+/*----------------------------*/
+
+@utility divider {
+  @apply flex items-center w-full text-sm leading-none text-center text-text-tertiary justify-stretch min-w-fit;
+
+  /* Default horizontal divider */
+  @apply flex-row gap-4 py-4;
+
+  /* Lines using pseudo elements */
+  &::before,
+  &::after {
+    @apply content-[''] bg-line-default;
+  }
+
+  /* Horizontal divider lines */
+  &:not(.divider-vertical) {
+    &::before,
+    &::after {
+      @apply flex-1 h-px;
+    }
+  }
+
+  /* Vertical divider lines */
+  &.divider-vertical {
+    @apply flex-col py-0 mx-4 w-auto h-auto;
+
+    &::before,
+    &::after {
+      @apply w-px h-full;
+    }
+  }
+
+  /* Text alignment modifiers */
+  &.divider-start {
+    &::before {
+      @apply flex-[0.25];
+    }
+    &::after {
+      @apply flex-[1];
+    }
+  }
+
+  &.divider-end {
+    &::before {
+      @apply flex-[1];
+    }
+    &::after {
+      @apply flex-[0.25];
+    }
+  }
+
+  /* Empty divider (no content) */
+  &:empty {
+    @apply gap-0;
+    &::before {
+      @apply flex-1;
+    }
+    &::after {
+      @apply hidden;
+    }
+  }
+
+  /* Variants */
+  &.divider-highlight {
+    &::before,
+    &::after {
+      @apply bg-line-highlight;
+    }
+  }
+}

package/styles/drawer.css

@@ -0,0 +1,142 @@
+/*----------------------------*/
+/* DRAWER */
+/*----------------------------*/
+
+@utility drawer-container {
+  @apply relative w-full min-h-screen;
+}
+
+@utility drawer {
+  @apply relative w-full h-full;
+
+  .drawer-aside {
+    @apply flex fixed inset-0 z-40 w-72 transition-transform translate-x-0 pointer-events-auto;
+
+    > .drawer-button {
+      @apply absolute inset-0 rounded-3xl include-interactive;
+      &.drawer-button {
+        @apply -outline-offset-2 rounded-[calc(1rem*2.25)];
+      }
+    }
+  }
+
+  .drawer-body {
+    @apply relative
+    z-30
+    transition-[padding-left];
+
+    .drawer-content {
+      @apply mx-auto w-full;
+    }
+  }
+
+  .drawer-button,
+  .drawer-body,
+  .drawer-aside {
+    @apply ease-out-cubic;
+  }
+
+  &.is-closed {
+    > .drawer-aside {
+      @apply duration-300 -translate-x-64;
+
+      &:hover {
+        @apply -translate-x-60;
+      }
+
+      > .card > * {
+        @apply opacity-0 pointer-events-none;
+      }
+
+      > .drawer-button {
+        @apply absolute inset-0;
+      }
+    }
+
+    &:has(.drawer-aside:hover) {
+      .drawer-aside {
+        @apply -translate-x-60;
+      }
+    }
+
+    > .drawer-body {
+      @apply pl-0 duration-500;
+
+      /* .drawer-button {
+        @apply block;
+      } */
+
+      .drawer-content {
+        @apply pr-4
+        pl-8
+        max-w-[1600px];
+      }
+    }
+  }
+
+  &:not(.is-closed) {
+    > .drawer-aside {
+      @apply duration-500 translate-x-0 ease-out-quint;
+      > .drawer-button {
+        @apply pointer-events-none;
+      }
+    }
+
+    > .drawer-body {
+      @apply duration-200
+      pl-[17rem];
+
+      .drawer-button {
+        @apply hidden;
+      }
+
+      .drawer-content {
+        @apply px-4 max-w-7xl;
+      }
+    }
+  }
+
+  &.drawer-mobile {
+    @media (max-width: 768px) {
+      .drawer-body {
+        @apply pl-4;
+      }
+    }
+  }
+  /* 
+  &.drawer-mobile {
+    @apply block;
+
+    > .drawer-aside {
+      @apply hidden lg:flex lg:translate-x-0 lg:pointer-events-auto lg:opacity-100 lg:fixed;
+
+      > .drawer-button {
+        @apply lg:hidden;
+      }
+
+      > .card > * {
+        @apply lg:pointer-events-auto lg:opacity-100;
+      }
+    }
+
+    > .drawer-body {
+      @apply pl-0 
+      lg:pl-64 
+      xl:pl-[17rem];
+
+      .drawer-button {
+        @apply block lg:hidden;
+      }
+    }
+
+    &.is-closed {
+      > .drawer-aside {
+        @apply lg:translate-x-0 lg:opacity-100;
+      }
+
+      > .drawer-body {
+        @apply lg:pl-64 xl:pl-[17rem];
+      }
+    }
+  } */
+}

package/styles/dropdown.css

@@ -0,0 +1,22 @@
+/*----------------------------*/
+/* DROPDOWN */
+/*----------------------------*/
+
+@utility dropdown-menu {
+  @apply rounded-xl border divide-y shadow-xl border-line-default bg-core-white dark:bg-core-ui-800 divide-line-default;
+
+  > .dropdown-search {
+    @apply rounded-b-none;
+  }
+
+  > *:first-child {
+    @apply rounded-t-lg;
+  }
+  > *:last-child {
+    @apply rounded-b-lg;
+  }
+}
+
+@utility dropdown-options {
+  @apply overflow-y-auto overflow-x-hidden max-h-80 min-h-11;
+}