matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

nicolium: use less tailwind

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-03-03 15:55:52 +01:00
parent 0b8839f6fc
commit a68116b641
3 changed files with 58 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/nicolium/src/features/ui/index.tsx
View File

@ -180,7 +180,7 @@ const UI: React.FC = React.memo(() => {
{me && features.chats && (
<div className='⁂-chat-widget__container'>
<Suspense fallback={<div className='⁂-chat-widget--placeholder' />}>
<Suspense fallback={<div className='⁂-chat-widget ⁂-chat-widget--placeholder' />}>
<ChatWidget />
</Suspense>
</div>

30
packages/nicolium/src/styles/new/admin.scss
View File

@ -1,4 +1,5 @@
@use 'mixins';
@use 'variables';
.⁂-dashboard {
display: flex;
@ -6,11 +7,22 @@
gap: 1.5rem;
&__counters {
@apply grid grid-cols-1 gap-2 sm:grid-cols-2;
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0.5rem;
@media (min-width: variables.$breakpoint-sm) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
&__source-code {
@apply flex items-center space-x-1 truncate;
display: flex;
align-items: center;
gap: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
svg {
height: 1rem;
@ -20,7 +32,19 @@
}
.⁂-dashcounter {
@apply flex cursor-pointer flex-col items-center space-y-2 rounded bg-gray-200 p-4 transition-transform hover:-translate-y-1 dark:bg-gray-800;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
border-radius: 0.25rem;
cursor: pointer;
background-color: rgb(var(--color-gray-100));
transition: transform 0.15s ease-in-out;
&:is(.dark *) {
background-color: rgb(var(--color-gray-800));
}
&__number {
@include mixins.text($align: center, $size: 2xl, $weight: medium);

35
packages/nicolium/src/styles/new/chats.scss
View File

@ -2,7 +2,25 @@
@use 'variables';
.⁂-chat-widget {
@apply fixed bottom-0 z-[99] flex w-96 flex-col rounded-t-lg bg-white shadow-3xl black:border black:border-b-0 black:border-gray-800 black:bg-black dark:bg-gray-900 ltr:right-5 rtl:left-5 h-16;
position: fixed;
bottom: 0;
z-index: 99;
display: flex;
flex-direction: column;
width: 24rem;
height: 4rem;
border-radius: 0.5rem 0.5rem 0 0;
background: white;
box-shadow: 0 25px 75px -15px rgb(0, 0, 0, 0.25);
@apply ltr:right-5 rtl:left-5;
&:is(.dark *) {
background: rgb(var(--color-gray-900));
}
&:is(.black *) {
background: black;
}
&--open {
height: 550px;
@ -14,7 +32,7 @@
}
&--placeholder {
@apply fixed bottom-0 z-[99] flex h-16 w-96 animate-pulse flex-col rounded-t-lg bg-white shadow-3xl dark:bg-gray-900 ltr:right-5 rtl:left-5;
@apply animate-pulse;
}
&__container {
@ -121,7 +139,11 @@
&.⁂-chat-widget__list--near-top::before,
&.⁂-chat-widget__list--near-bottom::after {
@apply opacity-0 black:opacity-0;
opacity: 0;
&:is(.black *) {
@apply opacity-0;
}
}
}
}
@ -165,11 +187,14 @@
}
&--shoutbox > div {
@apply justify-normal;
justify-content: normal;
}
&__info {
@apply flex items-center gap-2 overflow-hidden;
display: flex;
align-items: center;
gap: 0.5rem;
overflow: hidden;
}
&__avatar {