chore: added some :uno: markers

src/components/pages/PageMain/PageMain.tsx

@@ -32,14 +32,14 @@ function LastSeenItem(props: { first?: boolean, item: TLastSeenItem }) {
     <Dynamic
       component={props.first ? 'summary' : 'div'}
       class={cn(
-        'flex flex-row items-center justify-between',
-        props.first && 'pos-relative list-none cursor-pointer rounded-md hover:bg-control-bg-hover active:select-none [&::-webkit-details-marker]:hidden',
+        ':uno: flex flex-row items-center justify-between',
+        props.first && ':uno: pos-relative list-none cursor-pointer rounded-md hover:bg-control-bg-hover active:select-none [&::-webkit-details-marker]:hidden',
       )}
     >
-      <div class="max-w-full flex flex-col overflow-hidden sm:flex-row sm:items-center">
-        <div class="max-w-full w-min flex flex-row items-center overflow-hidden">
+      <div class=":uno: max-w-full flex flex-col overflow-hidden sm:flex-row sm:items-center">
+        <div class=":uno: max-w-full w-min flex flex-row items-center overflow-hidden">
           <Link
-            class="max-w-200px overflow-hidden text-ellipsis whitespace-nowrap lg:max-w-300px"
+            class=":uno: max-w-200px overflow-hidden text-ellipsis whitespace-nowrap lg:max-w-300px"
             href={props.item.link}
             target="_blank"
             title={props.item.text}
@@ -62,7 +62,7 @@ function LastSeenItem(props: { first?: boolean, item: TLastSeenItem }) {
         </i>
       </div>
       <Show when={props.first}>
-        <div data-expand-label class="before:(ml-1em whitespace-nowrap text-xs text-text-secondary content-['<'] md:content-['(click_to_expand)'] sm:content-['(expand)'])" />
+        <div data-expand-label class=":uno: before:(ml-1em whitespace-nowrap text-xs text-text-secondary content-['<'] md:content-['(click_to_expand)'] sm:content-['(expand)'])" />
       </Show>
     </Dynamic>
   )
@@ -188,7 +188,7 @@ export function PageMain(props: {
                 <>
                   #be15dc
                   {' '}
-                  <div class="mb-0.5 inline-block h-10px w-10px border border-#ccc bg-[#be15dc] align-middle" />
+                  <div class=":uno: mb-0.5 inline-block h-10px w-10px border border-#ccc bg-[#be15dc] align-middle" />
                 </>
               ),
             },

src/components/pages/PageMain/Shoutbox/Shoutbox.tsx

@@ -74,7 +74,7 @@ export function Shoutbox(props: {
       : `#${props.serial}`
 
     return (
-      <div class="w-fit w-full flex flex-col gap-2 border border-control-outline rounded-md bg-control-bg p-2 md:flex-row">
+      <div class=":uno: w-fit w-full flex flex-col gap-2 border border-control-outline rounded-md bg-control-bg p-2 md:flex-row">
         <div class="flex flex-row gap-2 text-text-secondary">
           {icon}
           <time class="whitespace-nowrap" datetime={props.createdAt}>

src/components/ui/Button.tsx

@@ -15,7 +15,7 @@ export function Button(props: ButtonProps) {
     <button
       {...rest}
       class={cn(
-        'block px-2 py-3 border border-control-outline color-text-primary bg-control-bg hover:bg-control-bg-hover rounded-md active:scale-95 transition-all cursor-pointer',
+        ':uno: block px-2 py-3 border border-control-outline color-text-primary bg-control-bg hover:bg-control-bg-hover rounded-md active:scale-95 transition-all cursor-pointer',
         my.square && 'p-3 h-min',
         my.class,
       )}

src/components/ui/Emoji.tsx

@@ -8,7 +8,7 @@ export function Emoji(props: JSX.HTMLElementTags['img']) {
     <img
       {...props}
       class={cn(
-        'inline-block h-1em w-1em object-contain overflow-hidden align-middle',
+        ':uno: inline-block h-1em w-1em object-contain overflow-hidden align-middle',
         props.class,
       )}
     />

src/components/ui/Link.tsx

@@ -7,7 +7,7 @@ export function Link(props: JSX.AnchorHTMLAttributes<HTMLAnchorElement>) {
     <a
       {...props}
       class={cn(
-        'color-text-accent underline underline-offset-2 hover:no-underline cursor-pointer active:text-text-secondary',
+        ':uno: color-text-accent underline underline-offset-2 hover:no-underline cursor-pointer active:text-text-secondary',
         props.class,
       )}
     >

src/components/ui/TextArea.tsx

@@ -61,7 +61,7 @@ export function TextArea(props: TextAreaProps) {
     <textarea
       {...rest}
       class={cn(
-        'outline-none border border-control-outline bg-control-bg rounded-md text-text-primary min-h-4em resize-none p-2 transition-all text-sm placeholder-text-secondary cursor-pointer hover:bg-control-bg-hover-alt disabled:cursor-not-allowed disabled:bg-control-bg-disabled disabled:border-text-disabled disabled:placeholder-text-disabled focus:(border-text-primary bg-control-bg-active outline outline-text-primary hover:cursor-text outline-offset-0)',
+        ':uno: outline-none border border-control-outline bg-control-bg rounded-md text-text-primary min-h-4em resize-none p-2 transition-all text-sm placeholder-text-secondary cursor-pointer hover:bg-control-bg-hover-alt disabled:cursor-not-allowed disabled:bg-control-bg-disabled disabled:border-text-disabled disabled:placeholder-text-disabled focus:(border-text-primary bg-control-bg-active outline outline-text-primary hover:cursor-text outline-offset-0)',
         my.class,
       )}
       onInput={onInput}

src/components/ui/TextComment.tsx

@@ -8,7 +8,7 @@ export function TextComment(props: JSX.HTMLAttributes<HTMLDivElement>) {
     <div
       {...props}
       class={cn(
-        'text-text-secondary pos-relative before:content-dblslash before:pos-absolute before:-left-2em',
+        ':uno: text-text-secondary pos-relative before:content-dblslash before:pos-absolute before:-left-2em',
         props.class,
       )}
     />

src/components/ui/TextTable.tsx

@@ -32,7 +32,7 @@ export function TextTable(props: TextTableProps) {
   return (
     <div
       class={cn(
-        'grid grid-cols-[1fr_2fr] sm:grid-cols-[1fr_4fr] overflow-hidden border-spacing-0 line-height-18px',
+        ':uno: grid grid-cols-[1fr_2fr] sm:grid-cols-[1fr_4fr] overflow-hidden border-spacing-0 line-height-18px',
         props.wrap ? 'whitespace-pre-wrap' : 'text-ellipsis whitespace-pre',
         props.fill && 'w-full',
       )}