classroomio/apps/dashboard/src/app.postcss

/*Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind base;
@tailwind components;
@tailwind utilities;

/** Global scrollbar styles */
html {
  --scrollbarBG: #fff;
  --thumbBG: #ccc;
  scroll-behavior: smooth;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Helvetica Neue,
    Arial,
    Noto Sans,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    Segoe UI Symbol,
    'Noto Color Emoji' !important;
}

#calendar .grid {
  --sc-theme-calendar-colors-background-highlight: var(--main-primary-color);
}

html .dark {
  --scrollbarBG: #000;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
html .dark {
  --scrollbarBG: #000;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  border-radius: 10px;
  border: 2px solid var(--scrollbarBG);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: revert;
  font-weight: revert;
  margin: 0.8em 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin-top: 0px !important;
  margin-bottom: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.prose p {
  margin-top: 0px !important;
  margin-bottom: 10px !important;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6,
.dark .prose li,
.dark .prose strong,
.dark .prose li::marker,
.dark .prose p {
  color: #fff !important;
}

iframe.iframe {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  height: 450px;
  border: 1px solid gray;
  border-radius: 5px;
}
@media (max-width: 760px) {
  iframe.iframe {
    height: 209px;
  }
}

code {
  white-space: pre-wrap;
}

[aria-current] :global(svg.carbon-icon),
.active :global(svg.carbon-icon) {
  fill: var(--main-primary-color);
}

.prose a {
  color: var(--main-primary-color);
}

.success :global(svg.carbon-icon) {
  fill: green;
}

:global(svg.carbon-icon.error) {
  fill: red;
}

.org-root {
  height: calc(100vh - 48px);
}
.org-slot {
  min-width: calc(100vw - 250px);
  height: calc(100vh - 48px);
  overflow-y: auto;
}

.shake {
  animation: shake 0.85s;
}
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-15px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(15px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-15px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(15px, 0, 0);
  }
}

.bx--list-box__menu-item__option {
  white-space: normal !important;
}
.bx--list-box--xl .bx--list-box__menu-item,
.bx--list-box--lg .bx--list-box__menu-item,
.bx--list-box__menu-item__option {
  height: fit-content !important;
}
.cio-bg-blue {
  background: rgb(2, 51, 189);
  background-size: cover;
  background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%);
}

@media screen and (max-width: 457px) {
  .org-slot {
    min-width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
}

@tailwind components;

@tailwind utilities;

/**
  Rose Theme
*/
.theme-rose .bg-primary-50 {
  background-color: #fff1f2 !important;
}
.theme-rose .text-primary-50 {
  color: #fff1f2 !important;
}
.theme-rose .border-primary-50 {
  border-color: #fff1f2 !important;
}

.theme-rose .bg-primary-100 {
  background-color: #ffe4e7 !important;
}
.theme-rose .text-primary-100 {
  color: #ffe4e7 !important;
}
.theme-rose .border-primary-100 {
  border-color: #ffe4e7 !important;
}

.theme-rose .bg-primary-200 {
  background-color: #fecdd4 !important;
}
.theme-rose .text-primary-200 {
  color: #fecdd4 !important;
}
.theme-rose .border-primary-200 {
  border-color: #fecdd4 !important;
}

.theme-rose .bg-primary-300 {
  background-color: #fda4b2 !important;
}
.theme-rose .text-primary-300 {
  color: #fda4b2 !important;
}
.theme-rose .border-primary-300 {
  border-color: #fda4b2 !important;
}

.theme-rose .bg-primary-400 {
  background-color: #fb7189 !important;
}
.theme-rose .text-primary-400 {
  color: #fb7189 !important;
}
.theme-rose .border-primary-400 {
  border-color: #fb7189 !important;
}

.theme-rose .bg-primary-500 {
  background-color: #f43f63 !important;
}
.theme-rose .text-primary-500 {
  color: #f43f63 !important;
}
.theme-rose .border-primary-500 {
  border-color: #f43f63 !important;
}

.theme-rose .bg-primary-600 {
  background-color: #e21d4e !important;
}
.theme-rose .text-primary-600 {
  color: #e21d4e !important;
}
.theme-rose .border-primary-600 {
  border-color: #e21d4e !important;
}

.theme-rose .bg-primary-700 {
  background-color: #be1241 !important;
}
.theme-rose .text-primary-700 {
  color: #be1241 !important;
}
.theme-rose .border-primary-700 {
  border-color: #be1241 !important;
}

.theme-rose .bg-primary-800 {
  background-color: #9f123d !important;
}
.theme-rose .text-primary-800 {
  color: #9f123d !important;
}
.theme-rose .border-primary-800 {
  border-color: #9f123d !important;
}

.theme-rose .bg-primary-900 {
  background-color: #88133a !important;
}
.theme-rose .text-primary-900 {
  color: #88133a !important;
}
.theme-rose .border-primary-900 {
  border-color: #88133a !important;
}

/**
  Blue Theme
*/
.bg-primary-50 {
  background-color: #eff6ff !important;
}
.text-primary-50 {
  color: #eff6ff !important;
}
.border-primary-50 {
  border-color: #eff6ff !important;
}

.bg-primary-100 {
  background-color: #dbeafe !important;
}
.text-primary-100 {
  color: #dbeafe !important;
}
.border-primary-100 {
  border-color: #dbeafe !important;
}

.bg-primary-200 {
  background-color: #bfdafe !important;
}
.text-primary-200 {
  color: #bfdafe !important;
}
.border-primary-200 {
  border-color: #bfdafe !important;
}

.bg-primary-300 {
  background-color: #92c4fe !important;
}
.text-primary-300 {
  color: #92c4fe !important;
}
.border-primary-300 {
  border-color: #92c4fe !important;
}

.bg-primary-400 {
  background-color: #5fa3fb !important;
}
.text-primary-400 {
  color: #5fa3fb !important;
}
.border-primary-400 {
  border-color: #5fa3fb !important;
}

.bg-primary-500 {
  background-color: #3a7ff7 !important;
}
.text-primary-500 {
  color: #3a7ff7 !important;
}
.border-primary-500 {
  border-color: #3a7ff7 !important;
}

.bg-primary-600 {
  background-color: #2460ec !important;
}
.text-primary-600 {
  color: #2460ec !important;
}
.border-primary-600 {
  border-color: #2460ec !important;
}

.bg-primary-700 {
  background-color: #1d4ee2 !important;
}
.text-primary-700 {
  color: #1d4ee2 !important;
}
.border-primary-700 {
  border-color: #1d4ee2 !important;
}

.bg-primary-800 {
  background-color: #1d3eb0 !important;
}
.text-primary-800 {
  color: #1d3eb0 !important;
}
.border-primary-800 {
  border-color: #1d3eb0 !important;
}

.bg-primary-900 {
  background-color: #1d398b !important;
}
.text-primary-900 {
  color: #1d398b !important;
}
.border-primary-900 {
  border-color: #1d398b !important;
}

/**
  Green Theme
*/
.theme-green .bg-primary-50 {
  background-color: #effef0 !important;
}
.theme-green .text-primary-50 {
  color: #effef0 !important;
}
.theme-green .border-primary-50 {
  border-color: #effef0 !important;
}

.theme-green .bg-primary-100 {
  background-color: #d9ffdc !important;
}
.theme-green .text-primary-100 {
  color: #d9ffdc !important;
}
.theme-green .border-primary-100 {
  border-color: #d9ffdc !important;
}

.theme-green .bg-primary-200 {
  background-color: #b6fcbc !important;
}
.theme-green .text-primary-200 {
  color: #b6fcbc !important;
}
.theme-green .border-primary-200 {
  border-color: #b6fcbc !important;
}

.theme-green .bg-primary-300 {
  background-color: #7df88a !important;
}
.theme-green .text-primary-300 {
  color: #7df88a !important;
}
.theme-green .border-primary-300 {
  border-color: #7df88a !important;
}

.theme-green .bg-primary-400 {
  background-color: #3deb51 !important;
}
.theme-green .text-primary-400 {
  color: #3deb51 !important;
}
.theme-green .border-primary-400 {
  border-color: #3deb51 !important;
}

.theme-green .bg-primary-500 {
  background-color: #12bf26 !important;
}
.theme-green .text-primary-500 {
  color: #12bf26 !important;
}
.theme-green .border-primary-500 {
  border-color: #12bf26 !important;
}

.theme-green .bg-primary-600 {
  background-color: #0aaf1d !important;
}
.theme-green .text-primary-600 {
  color: #0aaf1d !important;
}
.theme-green .border-primary-600 {
  border-color: #0aaf1d !important;
}

.theme-green .bg-primary-700 {
  background-color: #0c891b !important;
}
.theme-green .text-primary-700 {
  color: #0c891b !important;
}
.theme-green .border-primary-700 {
  border-color: #0c891b !important;
}

.theme-green .bg-primary-800 {
  background-color: #0f6c1b !important;
}
.theme-green .text-primary-800 {
  color: #0f6c1b !important;
}
.theme-green .border-primary-800 {
  border-color: #0f6c1b !important;
}

.theme-green .bg-primary-900 {
  background-color: #0f581a !important;
}
.theme-green .text-primary-900 {
  color: #0f581a !important;
}
.theme-green .border-primary-900 {
  border-color: #0f581a !important;
}

/**
  Orange Theme
*/
.theme-orange .bg-primary-50 {
  background-color: #fff8ec !important;
}
.theme-orange .text-primary-50 {
  color: #fff8ec !important;
}
.theme-orange .border-primary-50 {
  border-color: #fff8ec !important;
}

.theme-orange .bg-primary-100 {
  background-color: #fff0d3 !important;
}
.theme-orange .text-primary-100 {
  color: #fff0d3 !important;
}
.theme-orange .border-primary-100 {
  border-color: #fff0d3 !important;
}

.theme-orange .bg-primary-200 {
  background-color: #ffdca5 !important;
}
.theme-orange .text-primary-200 {
  color: #ffdca5 !important;
}
.theme-orange .border-primary-200 {
  border-color: #ffdca5 !important;
}

.theme-orange .bg-primary-300 {
  background-color: #ffc26d !important;
}
.theme-orange .text-primary-300 {
  color: #ffc26d !important;
}
.theme-orange .border-primary-300 {
  border-color: #ffc26d !important;
}

.theme-orange .bg-primary-400 {
  background-color: #ff9d32 !important;
}
.theme-orange .text-primary-400 {
  color: #ff9d32 !important;
}
.theme-orange .border-primary-400 {
  border-color: #ff9d32 !important;
}

.theme-orange .bg-primary-500 {
  background-color: #ff7f0a !important;
}
.theme-orange .text-primary-500 {
  color: #ff7f0a !important;
}
.theme-orange .border-primary-500 {
  border-color: #ff7f0a !important;
}

.theme-orange .bg-primary-600 {
  background-color: #ff6600 !important;
}
.theme-orange .text-primary-600 {
  color: #ff6600 !important;
}
.theme-orange .border-primary-600 {
  border-color: #ff6600 !important;
}

.theme-orange .bg-primary-700 {
  background-color: #cc4902 !important;
}
.theme-orange .text-primary-700 {
  color: #cc4902 !important;
}
.theme-orange .border-primary-700 {
  border-color: #cc4902 !important;
}

.theme-orange .bg-primary-800 {
  background-color: #a1390b !important;
}
.theme-orange .text-primary-800 {
  color: #a1390b !important;
}
.theme-orange .border-primary-800 {
  border-color: #a1390b !important;
}

.theme-orange .bg-primary-900 {
  background-color: #82310c !important;
}
.theme-orange .text-primary-900 {
  color: #82310c !important;
}
.theme-orange .border-primary-900 {
  border-color: #82310c !important;
}

/**
  Violet Theme
*/
.theme-violet .bg-primary-50 {
  background-color: #fff2fe !important;
}
.theme-violet .text-primary-50 {
  color: #fff2fe !important;
}
.theme-violet .border-primary-50 {
  border-color: #fff2fe !important;
}

.theme-violet .bg-primary-100 {
  background-color: #ffe3fe !important;
}
.theme-violet .text-primary-100 {
  color: #ffe3fe !important;
}
.theme-violet .border-primary-100 {
  border-color: #ffe3fe !important;
}

.theme-violet .bg-primary-200 {
  background-color: #ffc6fe !important;
}
.theme-violet .text-primary-200 {
  color: #ffc6fe !important;
}
.theme-violet .border-primary-200 {
  border-color: #ffc6fe !important;
}

.theme-violet .bg-primary-300 {
  background-color: #ff99f7 !important;
}
.theme-violet .text-primary-300 {
  color: #ff99f7 !important;
}
.theme-violet .border-primary-300 {
  border-color: #ff99f7 !important;
}

.theme-violet .bg-primary-400 {
  background-color: #ff5df2 !important;
}
.theme-violet .text-primary-400 {
  color: #ff5df2 !important;
}
.theme-violet .border-primary-400 {
  border-color: #ff5df2 !important;
}

.theme-violet .bg-primary-500 {
  background-color: #ff21f5 !important;
}
.theme-violet .text-primary-500 {
  color: #ff21f5 !important;
}
.theme-violet .border-primary-500 {
  border-color: #ff21f5 !important;
}

.theme-violet .bg-primary-600 {
  background-color: #fb00ff !important;
}
.theme-violet .text-primary-600 {
  color: #fb00ff !important;
}
.theme-violet .border-primary-600 {
  border-color: #fb00ff !important;
}

.theme-violet .bg-primary-700 {
  background-color: #cf00ce !important;
}
.theme-violet .text-primary-700 {
  color: #cf00ce !important;
}
.theme-violet .border-primary-700 {
  border-color: #cf00ce !important;
}

.theme-violet .bg-primary-800 {
  background-color: #a900a6 !important;
}
.theme-violet .text-primary-800 {
  color: #a900a6 !important;
}
.theme-violet .border-primary-800 {
  border-color: #a900a6 !important;
}

.theme-violet .bg-primary-900 {
  background-color: #890684 !important;
}
.theme-violet .text-primary-900 {
  color: #890684 !important;
}
.theme-violet .border-primary-900 {
  border-color: #890684 !important;
}