관리-도구
편집 파일: input.css
@import url("../../assets/fonts/icon-font/remix/remixicon.css"); @import url("../../assets/css/plugin.css"); @import url("../../assets/css/components/aleart.css"); @import url("../../assets/css/components/badge.css"); @import url("../../assets/css/components/button.css"); @import url("../../assets/css/components/form.css"); @import url("../../assets/css/utilities.css"); @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --color-primary: #5f3eed; --color-primary-50: #f7f4ff; --color-primary-100: #e5deff; --color-primary-200: #f2ecfe; --color-secondary: #f4b826; --color-heading: #111827; --color-section: #f7f4ff; /* FOR VIDEO PLAYER */ --plyr-font-family: "Mulish", sans-serif; --plyr-color-main: #f4b826; --plyr-video-background: #111827; --font-primary: "Mulish", sans-serif; --font-secondary: "Public Sans", sans-serif; } /* HOME E-LEARNING EDUCATION */ .home-e-learning { --color-primary: #d2093c; --color-section: #f7f4ff; } /* HOME LMS EDUCATION */ .home-lms-education { --color-primary: #17423b; --font-secondary: "Roboto", sans-serif; } /* HOME DIGITAL EDUCATION */ .home-digital-education { --color-primary: #d2eb1a; --color-secondary: #00a264; --color-section: #eff4e0; } /* HOME KINDERGARTERN */ .home-kindergarten { --color-primary: #00a264; --font-secondary: "Newsreader", sans-serif; } html { font-family: var(--font-primary); overflow-x: hidden; } } @layer components { .area-subtitle { @apply text-sm lg:text-base inline-flex items-center justify-center text-primary !leading-none font-bold tracking-tight; } .area-subtitle { @apply [&.subtitle-outline]:px-5 [&.subtitle-outline]:py-2 [&.subtitle-outline]:border [&.subtitle-outline]:border-[#5F3EED1A] [&.subtitle-outline]:rounded-full; } .area-subtitle.subtitle-outline { @apply [&.style-two]:text-heading [&.style-two]:border-heading/15 [&.style-two]:rounded-md; } .area-subtitle.subtitle-outline { @apply [&.style-three]:rounded-l-none rtl:[&.style-three]:rounded-l-full rtl:[&.style-three]:rounded-r-none [&.style-three]:border-transparent [&.style-three]:bg-secondary/[0.08] [&.style-three]:!border-l-2 rtl:[&.style-three]:!border-l-0 rtl:[&.style-three]:!border-r-2 [&.style-three]:border-l-secondary; } .area-title { @apply text-heading text-2xl md:text-3xl lg:text-4xl xl:text-[44px] !leading-[1.22] font-extrabold; } .area-title { @apply [&.title-lg]:text-3xl md:[&.title-lg]:text-5xl xl:[&.title-lg]:text-[70px] [&.title-lg]:leading-[1.14]; } .area-title .title-highlight-one { @apply inline-block relative bg-text-highlighter bg-no-repeat bg-[length:100%_auto] bg-bottom; } .area-title .title-highlight-two { @apply text-primary font-secondary font-medium italic; } .area-description { @apply text-heading/70 font-medium lg:[&.desc-lg]:text-[18px] lg:[&.desc-lg]:leading-[1.55]; } .sub-menu-link { @apply text-sm text-gray-500 !leading-none relative flex items-center justify-between px-3 py-2 before:absolute before:top-0 before:left-0 rtl:before:right-0 before:w-px before:h-full before:bg-border hover:text-primary hover:before:bg-primary [&.active]:text-primary [&.active]:before:bg-primary; } .min-\[1536px\]\:flex { display: flex; } .course-details-tab-content p, .blog-details-content p { @apply text-heading/70 font-semibold leading-[1.55]; } .course-details-tab-content p:not(:last-child), .blog-details-content p:not(:last-child) { @apply mb-5; } .footer-widget-one > ul { @apply flex flex-col gap-3 mt-6; } .footer-widget-one > ul li a { @apply text-white/60 font-medium hover:text-white custom-transition leading-none; } .effect-nav-menu { @apply relative after:absolute after:left-1/2 after:-translate-x-1/2 after:bottom-0 after:w-0 after:h-0.5 after:bg-primary hover:after:w-full [&.active]:after:w-full after:duration-300; } .pre-loader-wrapper { @apply fixed size-full flex-center flex-col z-[999] bg-white; } .pre-loader-wrapper .pre-loader { @apply relative size-12 rounded-50 border-2 border-primary animate-spin; } .pre-loader-wrapper .pre-loader { @apply after:absolute after:size-3 after:rounded-50 after:top-1.5 after:left-1.5 after:border after:border-secondary; } } @layer utilities { .position-center { @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2; } .custom-transition { @apply transition duration-300 ease-out; } .flex-center { @apply flex items-center justify-center; } .flex-center-between { @apply flex items-center justify-between; } .rounded-50 { @apply rounded-[50%]; } .text-orientation-mixed { text-orientation: mixed; } .writing-mode { writing-mode: vertical-lr; } .pulse-animation { animation: animate-pulse 3s linear infinite; } @keyframes animate-pulse { 0% { box-shadow: 0 0 0 0 rgba(244, 184, 38, 0.7), 0 0 0 0 rgba(244, 184, 38, 0.7); } 40% { box-shadow: 0 0 0 50px rgba(244, 184, 38, 0), 0 0 0 0 rgba(244, 184, 38, 0.7); } 80% { box-shadow: 0 0 0 50px rgba(244, 184, 38, 0), 0 0 0 30px rgba(244, 184, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 184, 38, 0), 0 0 0 30px rgba(244, 184, 38, 0); } } .rounded-row-border { @apply border-y border-border first:border-l rtl:first:border-l-0 rtl:first:border-r border-l-border rtl:border-r-border last:border-r-2 rtl:last:border-r-0 rtl:last:border-l-2 border-r-border rtl:border-l-border first:rounded-l-lg rtl:first:rounded-l-none rtl:first:rounded-r-lg last:rounded-r-lg rtl:last:rounded-r-none rtl:last:rounded-l-lg; } .error-text { @apply text-xs !leading-none text-danger ml-4 hidden; } .current-show-fieldset { @apply block translate-y-0 !important; } .pre-loader-wrapper { background: #111827; } .loader { position: relative; width: 150px; height: 150px; } /* Central glowing orb */ .orb { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; background: #5f3eed; border-radius: 50%; box-shadow: 0 0 15px #5f3eed, 0 0 20px #5f3eed, 0 0 60px #5f3eed; transform: translate(-50%, -50%); animation: pulse 2s infinite ease-in-out; } /* Pulsating waves */ .wave { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: none; border: 5px solid #5f3eed; border-radius: 50%; transform: translate(-50%, -50%) scale(0); animation: expand 2s infinite ease-in-out; } .wave:nth-child(2) { animation-delay: 0s; } .wave:nth-child(3) { animation-delay: 0.5s; } .rotate-y-180 { transform: rotateY(180deg); } .rotate-xz-180 { transform: rotateX(180deg) rotateZ(180deg); } /* Animations */ @keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } } @keyframes expand { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } }