farmitry_hvac/app/assets/stylesheets/application.tailwind.css

@import "tailwindcss";

@theme {
    --color-default: rgb(226, 232, 240);
    --color-default-slate: rgb(100, 116, 139);
    --color-default-slate-dark: rgb(71, 85, 105);
    --color-primary: rgb(66, 165, 245);
    --color-notice: rgb(19, 198, 154);
    --color-warning: rgb(255, 202, 40);
    --color-accept: rgb(121, 134, 203);
    --color-danger: rgb(239, 83, 80);
    --color-table-border: rgb(181, 188, 199);
    --color-table-background: rgb(226, 228, 234);

    /* theme */
    --color-logo-color: rgb(21, 128, 120);
    --color-env-color: rgb(86, 145, 172);
    --color-nut-color: rgb(39, 156, 26);
    --color-etc-color: rgb(140, 152, 154);
    --color-base-primary: rgb(44, 137, 255);
    --color-base-background: rgb(242, 244, 248);
    --color-base-sidebar: rgb(235, 238, 244);
    --color-base-content: rgb(253, 253, 253);
    --color-on-content: rgb(192, 216, 245);
    --color-off-content: rgb(187, 187, 191);
    --color-base-third: rgb(201, 208, 210);
    --color-base-text: rgb(39, 41, 49);
    --color-base-border: rgb(223, 226, 234);

    --base-font-size: 0.85rem;
    --text-xs: calc(var(--base-font-size) * 0.75);
    --text-xs--line-height: calc(1 / var(--text-xs));
    --text-sm: calc(var(--base-font-size) * 0.875);
    --text-sm--line-height: calc(1.25 / var(--text-sm));
    --text-base: calc(var(--base-font-size) * 1);
    --text-base--line-height: calc(1.5 / var(--text-base));
    --text-lg: calc(var(--base-font-size) * 1.125);
    --text-lg--line-height: calc(1.75 / var(--text-lg));
    --text-xl: calc(var(--base-font-size) * 1.25);
    --text-xl--line-height: calc(1.75 / var(--text-xl));
    --text-2xl: calc(var(--base-font-size) * 1.5);
    --text-2xl--line-height: calc(2 / var(--text-2xl));
    --text-3xl: calc(var(--base-font-size) * 1.875);
    --text-3xl--line-height: calc(2.25 / var(--text-3xl));
    --text-4xl: calc(var(--base-font-size) * 2.25);
    --text-4xl--line-height: calc(2.5 / var(--text-4xl));
    --text-5xl: calc(var(--base-font-size) * 3);
    --text-5xl--line-height: 1;
    --text-6xl: calc(var(--base-font-size) * 3.75);
    --text-6xl--line-height: 1;
    --text-7xl: calc(var(--base-font-size) * 4.5);
    --text-7xl--line-height: 1;
    --text-8xl: calc(var(--base-font-size) * 6);
    --text-8xl--line-height: 1;
    --text-9xl: calc(var(--base-font-size) * 8);
    --text-9xl--line-height: 1;
}

@layer base {
    body {
        @apply bg-base-background text-base-text font-['Godo']
    }

    hr {
        @apply border-base-border
    }

    .background-pattern {
        background-image: repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.01) 0,
            rgba(255, 255, 255, 0.01) 24px,
            transparent 1px,
            transparent 36px
        );
    }

    a.disabled {
        @apply pointer-events-none cursor-not-allowed opacity-50
    }

    .disabled {
        @apply pointer-events-none cursor-not-allowed opacity-50
    }

    .btn {
        @apply justify-center rounded-md bg-default-slate px-4 py-2 font-semibold leading-6 text-white
        shadow-xs hover:opacity-80 cursor-pointer
    }

    .card {
        @apply bg-white border border-table-border rounded-xs shadow-xs
    }

    /*Form*/
    .label-style {
        @apply block my-1 text-default-slate-dark
    }

    .select-style {
        @apply block w-full px-2 py-1.5 border border-default-slate/50 rounded-xs appearance-none
    }

    .select-style option {
        color: theme('colors.base-background');
    }

    .input-style {
        @apply block w-full px-2 py-1.5 border border-default-slate/50 rounded-xs
    }

    .textarea-style {
        @apply block w-full pl-4 flex-1 py-1.5 ring-1 ring-inset ring-default-slate/50 rounded-xs
    }

    /*Toggle Button*/
    .toggle_style {
        @apply w-14 h-8 bg-danger rounded-full peer-checked:bg-notice transition-all duration-300
    }

    .btn-toggle-round {
        @apply absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-all duration-300 peer-checked:translate-x-full shadow-sm
    }
}

@layer utilities {
    .header {
        @apply p-4 text-lg h-16 flex justify-between items-center;
    }

    .side-bar {
        /*@apply w-[16rem] pl-4 text-lg divide-y divide-base-border;*/
        @apply w-[16rem] p-4 text-lg;
    }

    .content {
        @apply lg:rounded-lg bg-base-background
    }

    .page-title {
        @apply text-xl;
    }

    .search-title {
        @apply text-base;
    }

    .form-title {
        @apply text-center text-3xl tracking-tight text-default-slate-dark
    }

    .field {
        @apply w-full
    }

    .btn-edit {
        @apply inline-flex items-center rounded-xs px-2.5 py-1.5 text-sm font-semibold hover:opacity-75 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white
    }

    .btn-toggle-text {
        @apply bg-logo-color rounded-lg text-white text-center
    }

    /*Menu*/
    .menu-group {
        @apply flex flex-row py-1 px-4 my-2 gap-x-4 justify-between items-center w-full
    }

    .menu-group-active {
        @apply bg-base-primary rounded-full text-base-content;
    }

    /*.menu-group:hover {*/
    /*    @apply bg-base-primary/30 transition-colors rounded-full;*/
    /*}*/

    .menu-group-icon {
        @apply flex py-1 justify-center items-center
    }

    .menu-group-name {
        @apply p-1 flex-1
    }

    .menu-group-items-title {
        @apply text-base
    }

    .copyright {
        @apply text-default-slate-dark text-center
    }

    /*Dashboard*/
    .dashboard-group {
        @apply rounded-md min-h-32 p-4 flex flex-col justify-between cursor-pointer shadow-xs
    }

    .dashboard-title {
        @apply text-2xl
    }

    /*Pagy*/
    .pagy {
        @apply flex items-center justify-center space-x-1 font-semibold text-sm text-default-slate;
    }

    .pagy a:not(.gap) {
        @apply block rounded-xs px-2 py-1 border border-default-slate/50;
    }

    .pagy a:not(.gap):hover {
        @apply bg-slate-300
    }

    .pagy a:not(.gap):not([href]) {
        @apply text-default-slate/50 border border-default-slate/25 cursor-default
    }

    .pagy a:not(.gap).current {
        @apply text-white bg-default-slate
    }

    .pagy a.gap {
        @apply inline-block my-auto
    }

    .pagy label {
        @apply inline-block whitespace-nowrap bg-default rounded-xs px-3 py-0.5
    }

    .pagy label input {
        @apply bg-default border-none rounded-xs
    }

    /*Base Table*/
    .base-table {
        @apply min-w-full whitespace-nowrap
    }

    .base-table th {
        @apply p-3 text-left lg:table-cell
    }

    .base-table tr {
        @apply divide-x divide-base-border
    }

    .base-table td {
        @apply border-t border-base-border p-3 lg:table-cell whitespace-nowrap
    }

    /*Base List*/
    .base-list {
        @apply overflow-y-auto divide-y divide-base-border lg:border lg:border-base-border lg:rounded-lg
    }
    .base-list ul {
        @apply divide-y divide-base-border lg:rounded-b-lg
    }

    .base-list li{
        @apply flex justify-between items-center px-4 py-2 space-x-4
    }
}

@media (min-width: 640px) {
    .page-title {
        @apply text-3xl;
    }

    .search-title {
        @apply text-lg;
    }
}

/* 기본 스크롤바 스타일 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    padding: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(21, 21, 21, 0.4);
    border-radius: 4px;
    transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 100, 100, 0.6);
}

.input-style::-webkit-outer-spin-button,
.input-style::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-style[type="number"] {
    -moz-appearance: textfield;
}

/*Fonts*/
@font-face {
    font-family: "Chakra_Petch", sans-serif;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Godo';
    font-style: normal;
    font-weight: 400;
    src: url('https://fastly.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff2') format('woff2'), url('https://fastly.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff') format('woff');
}