From 6a8566b56f19ba55e44ce45d84de06bc2c947c56 Mon Sep 17 00:00:00 2001 From: SatyaRajAwasth1 Date: Thu, 12 Sep 2024 18:57:51 +0545 Subject: [PATCH] Fix CSS after conflic resoultion --- css/output.css | 288 ++++++++++++++++++++++++++++++++----------------- 1 file changed, 191 insertions(+), 97 deletions(-) diff --git a/css/output.css b/css/output.css index f66b49c..621963f 100644 --- a/css/output.css +++ b/css/output.css @@ -600,6 +600,46 @@ video { background-size: 50px 50px; } +/* For FAQ page */ + +.faq-item { + margin-top: 1.25rem; + margin-bottom: 1.25rem; + border-radius: 0.375rem; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 1rem; + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.faq-question { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + gap: 1rem; + text-align: left; +} + +.faq-answer { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + max-height: 0px; + overflow: hidden; + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; +} + .fixed { position: fixed; } @@ -624,6 +664,14 @@ video { top: -1.25rem; } +.bottom-0 { + bottom: 0px; +} + +.left-0 { + left: 0px; +} + .left-2 { left: 0.5rem; } @@ -677,11 +725,6 @@ video { margin-right: auto; } -.my-2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - .my-4 { margin-top: 1rem; margin-bottom: 1rem; @@ -717,6 +760,10 @@ video { margin-left: 0.25rem; } +.ml-auto { + margin-left: auto; +} + .mr-1 { margin-right: 0.25rem; } @@ -733,6 +780,14 @@ video { margin-right: 1rem; } +.mr-auto { + margin-right: auto; +} + +.mt-10 { + margin-top: 2.5rem; +} + .mt-2 { margin-top: 0.5rem; } @@ -809,6 +864,10 @@ video { height: 1rem; } +.h-40 { + height: 10rem; +} + .h-5 { height: 1.25rem; } @@ -817,6 +876,10 @@ video { height: 1.5rem; } +.h-64 { + height: 16rem; +} + .h-8 { height: 2rem; } @@ -825,6 +888,10 @@ video { height: 20rem; } +.h-96 { + height: 24rem; +} + .h-\[11\.25rem\] { height: 11.25rem; } @@ -885,33 +952,10 @@ video { height: 100vh; } -.h-72 { - height: 18rem; -} - -.h-56 { - height: 14rem; -} - -.h-40 { - height: 10rem; -} -.h-64 { - height: 16rem; -} - -.max-h-0 { - max-height: 0px; -} - .max-h-screen { max-height: 100vh; } -.min-h-\[calc\(100vh-7\.5rem\)\] { - min-height: calc(100vh - 7.5rem); -} - .w-1 { width: 0.25rem; } @@ -928,6 +972,10 @@ video { width: 3rem; } +.w-16 { + width: 4rem; +} + .w-2 { width: 0.5rem; } @@ -948,6 +996,10 @@ video { width: 1rem; } +.w-40 { + width: 10rem; +} + .w-44 { width: 11rem; } @@ -956,6 +1008,14 @@ video { width: 1.5rem; } +.w-8 { + width: 2rem; +} + +.w-80 { + width: 20rem; +} + .w-\[220px\] { width: 220px; } @@ -992,14 +1052,14 @@ video { width: 100%; } -.w-40 { - width: 10rem; -} - .max-w-3xl { max-width: 48rem; } +.max-w-5xl { + max-width: 64rem; +} + .max-w-6xl { max-width: 72rem; } @@ -1012,6 +1072,10 @@ video { max-width: 100%; } +.max-w-md { + max-width: 28rem; +} + .-rotate-180 { --tw-rotate: -180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1025,18 +1089,10 @@ video { list-style-type: none; } -.grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } -.grid-rows-1 { - grid-template-rows: repeat(1, minmax(0, 1fr)); -} - .grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } @@ -1085,6 +1141,14 @@ video { justify-content: space-between; } +.justify-items-center { + justify-items: center; +} + +.gap-10 { + gap: 2.5rem; +} + .gap-16 { gap: 4rem; } @@ -1113,6 +1177,12 @@ video { gap: 2rem; } +.space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} + .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); @@ -1138,6 +1208,10 @@ video { white-space: nowrap; } +.rounded-3xl { + border-radius: 1.5rem; +} + .rounded-\[1\.71rem\] { border-radius: 1.71rem; } @@ -1150,6 +1224,10 @@ video { border-radius: 9999px; } +.rounded-lg { + border-radius: 0.5rem; +} + .rounded-md { border-radius: 0.375rem; } @@ -1158,10 +1236,6 @@ video { border-radius: 0.75rem; } -.rounded-lg { - border-radius: 0.5rem; -} - .border { border-width: 1px; } @@ -1170,6 +1244,10 @@ video { border-width: 4px; } +.border-8 { + border-width: 8px; +} + .border-r-2 { border-right-width: 2px; } @@ -1207,14 +1285,14 @@ video { border-color: rgb(0 0 0 / var(--tw-border-opacity)); } -.border-gray-300 { +.border-slate-600 { --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); + border-color: rgb(71 85 105 / var(--tw-border-opacity)); } -.border-slate-600 { +.border-white { --tw-border-opacity: 1; - border-color: rgb(71 85 105 / var(--tw-border-opacity)); + border-color: rgb(255 255 255 / var(--tw-border-opacity)); } .bg-\[\#009042\] { @@ -1262,11 +1340,30 @@ video { background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } +.bg-blue-600 { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} + +.bg-gray-800 { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); +} + +.bg-gray-900 { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-opacity-60 { + --tw-bg-opacity: 0.6; +} + .bg-celeb-banner { background-image: url('../assets/celebrationbg/celeb_banner.svg'); } @@ -1316,9 +1413,9 @@ video { padding: 2rem; } -.px-4 { - padding-left: 1rem; - padding-right: 1rem; +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; } .px-8 { @@ -1341,26 +1438,10 @@ video { padding-bottom: 0.5rem; } -.pt-0 { - padding-top: 0px; -} - -.pt-4 { - padding-top: 1rem; -} - -.pt-8 { - padding-top: 2rem; -} - .pt-6 { padding-top: 1.5rem; } -.text-left { - text-align: left; -} - .text-center { text-align: center; } @@ -1523,9 +1604,9 @@ video { color: rgb(156 163 175 / var(--tw-text-opacity)); } -.text-gray-500 { +.text-gray-600 { --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(75 85 99 / var(--tw-text-opacity)); } .text-gray-700 { @@ -1538,14 +1619,14 @@ video { color: rgb(31 41 55 / var(--tw-text-opacity)); } -.text-green-600 { +.text-gray-900 { --tw-text-opacity: 1; - color: rgb(22 163 74 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)); } -.text-purple-600 { +.text-green-600 { --tw-text-opacity: 1; - color: rgb(147 51 234 / var(--tw-text-opacity)); + color: rgb(22 163 74 / var(--tw-text-opacity)); } .text-white { @@ -1553,11 +1634,6 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-gray-600 { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - .underline { text-decoration-line: underline; } @@ -1582,6 +1658,19 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.outline { + outline-style: solid; +} + +.grayscale { + --tw-grayscale: grayscale(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -1596,8 +1685,8 @@ video { transition-duration: 150ms; } -.duration-500 { - transition-duration: 500ms; +.duration-200 { + transition-duration: 200ms; } @font-face { @@ -1633,6 +1722,11 @@ video { border-color: rgb(255 221 80 / var(--tw-border-opacity)); } +.hover\:bg-blue-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(29 78 216 / var(--tw-bg-opacity)); +} + .hover\:bg-gray-100:hover { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); @@ -1663,6 +1757,14 @@ video { } @media (min-width: 640px) { + .sm\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .sm\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; @@ -1672,10 +1774,6 @@ video { font-size: 1rem; line-height: 1.5rem; } - - .sm\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } } @media (min-width: 768px) { @@ -1715,6 +1813,10 @@ video { height: 3.5rem; } + .md\:h-72 { + height: 18rem; + } + .md\:h-\[3\.75rem\] { height: 3.75rem; } @@ -1723,18 +1825,6 @@ video { height: 4.75rem; } - .md\:h-36 { - height: 9rem; - } - - .md\:h-72 { - height: 18rem; - } - - .md\:h-80 { - height: 20rem; - } - .md\:w-\[13\.75rem\] { width: 13.75rem; } @@ -1743,6 +1833,10 @@ video { width: auto; } + .md\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .md\:gap-2 { gap: 0.5rem; } @@ -1976,4 +2070,4 @@ video { font-size: 3rem; line-height: 1; } -} \ No newline at end of file +}