social-media/frontend/src/assets/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --socialize-primary: #172033;
    --socialize-accent: #ff8a3d;
    --socialize-highlight: #2fa58d;
    --h-background: #f4f6f3;
    --h-on-background: #172033;
    --h-surface: #fbfaf6;
    --h-surface-muted: #f1f5f2;
    --h-on-surface: #172033;
    --h-control: #eef3ef;
    --h-control-hover: #e7eee9;
    --h-control-focus: #ffffff;
    --h-border: #c7d2cc;
    --h-border-strong: #94a39d;
    --h-primary: #172033;
    --h-on-primary: #fbfaf6;
    --h-secondary: #fff3e2;
    --h-on-secondary: #172033;
    --h-tertiary: #d9f6ee;
    --h-on-tertiary: #0f766e;
    --h-error: #bc2f2f;
    --h-on-error: #ffffff;
}

html,
body,
#app {
    min-height: 100%;
    background: var(--h-background);
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
select,
textarea {
    background-color: var(--h-control) !important;
    border-color: var(--h-border) !important;
    color: var(--h-on-surface);
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):hover,
select:hover,
textarea:hover {
    background-color: var(--h-control-hover) !important;
    border-color: var(--h-border-strong) !important;
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):focus,
select:focus,
textarea:focus,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):focus-visible,
select:focus-visible,
textarea:focus-visible {
    background-color: var(--h-control-focus) !important;
    border-color: var(--socialize-highlight) !important;
    box-shadow: 0 0 0 3px rgba(47, 165, 141, 0.16);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: #68778a;
    opacity: 1;
}

.v-application {
    background: var(--h-background) !important;
    color: var(--h-on-background);
}

.v-card,
.v-sheet,
.v-list,
.v-menu > .v-overlay__content,
.v-dialog > .v-overlay__content {
    background-color: var(--h-surface) !important;
    border: 1px solid var(--h-border);
}

.v-field {
    background-color: var(--h-control) !important;
    color: var(--h-on-surface);
}

.v-field:hover {
    background-color: var(--h-control-hover) !important;
}

.v-field--focused {
    background-color: var(--h-control-focus) !important;
}

.v-field__outline {
    color: var(--h-border-strong);
}

.v-field--focused .v-field__outline {
    color: var(--socialize-highlight);
}

.v-field__input,
.v-field-label {
    color: var(--h-on-surface);
}

.panel,
[class$='-panel'],
[class$='-card'],
div.card {
    border-color: var(--h-border) !important;
}

@layer components {
    .btn {
        @apply min-w-24 w-full;
        @apply p-4;
        @apply flex flex-nowrap gap-4 items-center justify-center;
        @apply rounded-lg;
        @apply capitalize text-base font-sans font-medium;
        @apply px-10;
        @apply cursor-pointer;
    }

    button.primary {
        @apply btn;
        @apply bg-hPrimary text-hOnPrimary;
        @apply hover:brightness-125;
    }

    button.secondary {
        @apply btn;
        @apply bg-hSecondary text-hOnSecondary;
        @apply hover:brightness-125;
    }

    div.dialog {
        @apply max-h-[90vh];
        @apply place-self-center;
    }

    div.card {
        @apply w-full max-w-[1024px];
        @apply rounded-xl p-4;
        @apply flex flex-col gap-4;
        @apply bg-hSurface text-hOnSurface;
    }

    /* Specific styling for dialog cards */
    div.card.dialog {
        @apply bg-hSurface text-hOnSurface;
        @apply rounded-xl;
        @apply shadow-lg;
    }

    div.card-title {
        @apply font-sans font-bold text-2xl;
        @apply p-2;
        @apply text-hOnSurface;
    }

    div.card-content {
        @apply flex flex-col gap-4;
        @apply p-2;
        @apply text-hOnSurface;
        @apply overflow-y-auto max-h-[60vh];
    }

    div.card-actions {
        @apply p-2;
        @apply flex flex-row gap-4 justify-end;
    }

    div.card-actions > * {
        @apply w-fit;
        @apply sm:min-w-40 min-w-0;
    }
}