sinProject-Inc/talk

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

:root {
    /* NOTE* サンプル。カラーテーマ変更対応のときに不要であれば削除 */

    /* color-scheme: light dark; */
    color-scheme: dark;

    --background-color: #fff;
    --border-color: rgb(239 243 244);
    --media-border-color: rgb(207 217 222);
    --gray-color: rgb(83 100 113);
    --header-text-color: #ffffffe6;
    --text-color: #ffffffbf;
    --link-color: rgb(56 189 248);

    /* --link-color: #2f81f7; */
    --link-hover-color: rgb(26 140 216);
    --blue-color: rgb(29 155 240);
    --header-background-color: rgb(239 243 244 / 85%);
    --header-height: 53px;
}

/* NOTE* サンプル。カラーテーマ変更対応のときに不要であれば削除 */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #000;
        --text-color: #fff;
    }
}

html {
    scroll-behavior: smooth;
}

/* NOTE* サンプル。カラーテーマ変更対応のときに不要であれば削除 */
body {
    transition: 0.5s ease-in-out;
}

a {
    /* color: var(--link-color); */
    text-decoration: none;
}

.text-color {
    color: var(--text-color);
}

.header-text-color {
    color: var(--header-text-color);
}

.no-underline:hover,
.no-underline:focus {
    text-decoration: none;
}

@layer components {
    /* .input-element {
        @apply overflow-hidden rounded-md border border-media-border bg-border;
    } */

    a {
        @apply transition;
    }

    button,
    select {
        @apply cursor-pointer transition;
    }

    button {
        @apply px-2 py-[6px];
    }

    select {
        @apply appearance-none bg-inherit px-3 py-[6px] outline-0;
    }

    input {
        @apply input glass-indentation-bg rounded-md border-0 px-4 py-[7px] outline-none outline-0 focus:outline-none;
    }

    .input {
        @apply rounded-md outline-none outline-0 focus:outline-none;
    }

    textarea {
        @apply bg-inherit px-4 py-[10px];
    }

    /* svg {
        @apply max-h-full min-h-full min-w-full max-w-full fill-current;
    } */

    svg {
        @apply max-h-full max-w-full fill-current;
    }

    .center-container {
        @apply max-w-8xl mx-auto w-full px-3;
    }

    .title {
        @apply text-lg font-bold;
    }

    .card {
        box-shadow:
            0 0.1px 0.5px #0000000e,
            0 0.4px 1.6px #00000014,
            0 2px 7px #00000021;
        border-radius: 0.5rem;
    }

    .submit-button {
        @apply box-border w-full border-link bg-link font-semibold text-white;
    }

    .card-parent {
        margin: 0 auto;
        width: 100%;
        max-width: calc(500px + 2rem);

        @apply z-10;
    }

    .gradient-background {
        background: rgb(2 0 36);
        background: linear-gradient(
            229deg,
            rgb(2 0 36 / 100%) 0%,
            rgb(9 9 121 / 100%) 23%,
            rgb(0 212 255 / 100%) 100%
        );
    }

    .glass-panel {
        @apply glass glass-border overflow-hidden rounded-[0.5rem] shadow-sm;
    }

    .glass-button {
        @apply glass-bump-bg glass-text-3 glass-bump-bg-shine rounded-lg px-4 py-2 transition-all duration-300 hover:shadow-sm;
    }

    .h-nav-icon {
        @apply h-5;
    }

    .glowing-icon {
        @apply h-nav-icon p-0 hover:fill-secondary hover:text-secondary dark:hover:fill-secondary-dark dark:hover:text-secondary-dark;
    }
}

@layer utilities {
    .overflow-wrap-anywhere {
        overflow-wrap: anywhere;
    }

    .glass {
        @apply glass-text-3 glass-bg bg-clip-padding fill-white/70 backdrop-blur-sm backdrop-filter;
    }

    .doc-base {
        @apply bg-clip-padding fill-black/70 text-black/60 backdrop-filter dark:fill-white/70 dark:text-white/60;
    }

    .glass-bg {
        @apply bg-base/50 dark:bg-base-dark/50;
    }

    .glass-text-3 {
        @apply text-primary-3 dark:text-primary-dark-3;
    }

    .glass-text-4 {
        @apply text-primary-4 dark:text-primary-dark-4;
    }

    .glass-text-5 {
        @apply text-primary-5 dark:text-primary-dark-5;
    }

    .glass-text-8 {
        @apply text-primary-8 dark:text-primary-dark-8;
    }

    .glass-text-9 {
        @apply text-primary-9 dark:text-primary-dark-9;
    }

    .glass-text-10 {
        @apply text-primary-10 dark:text-primary-dark-10;
    }

    .test-text {
        @apply text-red-500 dark:text-green-500;
    }

    .glass-border {
        @apply border border-primary-9/[0.06] dark:border-primary-dark-9/[0.06];
    }

    .glass-text-faint-md {
        @apply text-primary-5/50 dark:text-primary-dark-5/50;
    }

    .glass-text-faint-lg {
        @apply text-primary-5/30 dark:text-primary-dark-5/30;
    }

    .glass-text-faint-sm {
        @apply text-primary-5/80 dark:text-primary-dark-5/80;
    }

    .glass-bump-bg {
        @apply bg-primary-5/10 dark:bg-base-dark/90;
    }

    .glass-bump-bg-shine {
        @apply hover:bg-primary-5/10 dark:hover:bg-white/10;
    }

    .glass-indentation-bg {
        @apply bg-primary-5/5 dark:bg-base-dark/50;
    }

    [contenteditable='true']:empty::before {
        content: attr(placeholder);

        @apply glass-text-faint-lg;
    }
}

#nprogress .bar {
    background: var(--link-color) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    @apply glass-text-9;
}

h1 {
    @apply mb-3 text-3xl font-extrabold;
}

h2 {
    @apply -ms-9 mb-3 mt-8 flex items-center ps-9 text-2xl font-bold;
}

h3 {
    @apply -ms-9 mb-2 mt-6 flex items-center ps-9 text-xl font-semibold;
}

ol {
    @apply list-decimal ps-5 font-semibold;
}

ol > li {
    @apply my-2;
}

.permalink {
    @apply absolute left-0 flex h-6 w-6 items-center justify-center rounded-md bg-transparent text-transparent transition;
}

h2:hover .permalink,
h3:hover .permalink {
    @apply glass-text-4 bg-primary-dark-4 dark:bg-primary-4;
}

.category {
    @apply mb-2 text-sm font-semibold text-secondary dark:text-secondary-dark;
}

.max-w-8xl {
    max-width: 90rem;
}

blockquote {
    @apply my-4 border-l-2 border-slate-700 pl-4;
}

.flex-books {
    @apply flex flex-wrap items-end gap-4;
}

.flex-books > * {
    @apply flex items-center justify-center;

    width: calc((100% - 1rem * 2) / 3);
}

.flex-equipment {
    @apply flex flex-col items-center gap-3;
}

.flex-equipment > img {
    @apply mt-1;
}

@media (width >= 768px) {
    .flex-equipment {
        @apply flex-row self-start;
    }

    .flex-equipment > img {
        @apply mt-1.5 self-start;
    }
}

.labels {
    @apply my-4 flex flex-wrap gap-2;
}

.label {
    @apply rounded-e-full rounded-s-full border-[1px] border-secondary px-3 py-0.5 text-xs text-secondary dark:border-secondary-dark dark:text-secondary-dark;
}

.youtube {
    aspect-ratio: 16/9;
    overflow: hidden;
    width: 100%;
    max-height: 30rem;
}