diff --git a/css/styles.css b/css/styles.css index d90c1099..4f417968 100644 --- a/css/styles.css +++ b/css/styles.css @@ -2,226 +2,247 @@ @tailwind components; @tailwind utilities; -.text-main-500{ +.text-main-500 { --tw-text-opacity: 1; - color: rgba(11, 166, 101, var(--tw-text-opacity)) + color: rgba(11, 166, 101, var(--tw-text-opacity)); } -.dark{ +.dark { --tw-bg-opacity: 1; background-color: rgb(17 20 24 / var(--tw-bg-opacity)); } .sidebar-active { - --tw-bg-opacity: 0.2; - /* background-color: rgba(243, 244, 246, var(--tw-bg-opacity)); bg-gray-100 */ - background-color: rgba(156, 163, 175, var(--tw-bg-opacity)); /* bg-gray-400 */ - --tw-text-opacity: 1; - color: rgba(11, 166, 101, var(--tw-text-opacity)) /* text-indigo-500 */ + --tw-bg-opacity: 0.2; + /* background-color: rgba(243, 244, 246, var(--tw-bg-opacity)); bg-gray-100 */ + background-color: rgba(156, 163, 175, var(--tw-bg-opacity)); /* bg-gray-400 */ + --tw-text-opacity: 1; + color: rgba(11, 166, 101, var(--tw-text-opacity)); /* text-indigo-500 */ +} - } +.sidebar-active-dark { + /* --tw-bg-opacity: 1; */ + /* background-color: rgb(31 41 55 / var(--tw-bg-opacity)); bg-gray-800 */ + /* --tw-text-opacity: 1; */ + /* color: rgba(255, 255, 255, var(--tw-text-opacity)) text-white */ +} - .sidebar-active-dark { - /* --tw-bg-opacity: 1; */ - /* background-color: rgb(31 41 55 / var(--tw-bg-opacity)); bg-gray-800 */ - /* --tw-text-opacity: 1; */ - /* color: rgba(255, 255, 255, var(--tw-text-opacity)) text-white */ +.no-scrollbar::-webkit-scrollbar { + display: none; +} - } +.no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} - .no-scrollbar::-webkit-scrollbar { - display: none; - } +:root { + --folderColor: #3cb884; + --paperColor: #ffffff; +} - .no-scrollbar { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - } +.folder-card { + transition: all 0.2s ease-in; +} +.folder__svg { + width: 100px; + height: 80px; +} +.folder__back { + fill: #0ba665; + rx: 10; + ry: 10; +} - - :root { - --folderColor: #3CB884; - --paperColor: #ffffff; - } - - .folder-card { - transition: all 0.2s ease-in; - } - - .folder__svg { - width: 100px; - height: 80px; - } - - .folder__back { - fill: #0BA665; - rx: 10; - ry: 10; - } - - .paper-1 { - fill: #e6e6e6; - transition: all 0.3s ease-in-out; - rx: 10; - ry: 10; - } +.paper-1 { + fill: #e6e6e6; + transition: all 0.3s ease-in-out; + rx: 10; + ry: 10; +} - .paper-2 { - fill: #e6e6e6; - transition: all 0.3s ease-in-out; - rx: 10; - ry: 10; - } - - .paper-1:nth-child(2) { - fill: #f2f2f2; - } - - .paper-1:nth-child(3) { - fill: #ffffff; - } +.paper-2 { + fill: #e6e6e6; + transition: all 0.3s ease-in-out; + rx: 10; + ry: 10; +} - .paper-2:nth-child(2) { - fill: #f2f2f2; - } - - .paper-2:nth-child(3) { - fill: #ffffff; - } - - .folder__front { - fill: var(--folderColor); - rx: 10; - ry: 10; - transform-origin: bottom; - transition: all 0.3s ease-in-out; - } - - .folder-card:hover { - transform: translateY(-5px); - } - - .folder-card:hover .paper-1 { - y: 12; - transform: translateY(0%); - } +.paper-1:nth-child(2) { + fill: #f2f2f2; +} - .folder-card:hover .paper-2 { - y: 22; - transform: translateY(0%); - } - - .folder-card:hover .folder__front { - rx: 13; - ry: 13; - y: 10; height:80; - transform: skewY(0deg) scaleY(0.6); - } - - .folder-card:hover .folder__front.right { - rx: 13; - ry: 13; - y: 0; height:80; - transform: skewY(0deg) scaleY(0.6); - } +.paper-1:nth-child(3) { + fill: #ffffff; +} - .loader { - border-top-color: #0BA665; /* You can change this color as needed */ - -webkit-animation: spin 1s linear infinite; - animation: spin 1s linear infinite; - } +.paper-2:nth-child(2) { + fill: #f2f2f2; +} - @-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - } - } +.paper-2:nth-child(3) { + fill: #ffffff; +} - @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } +.folder__front { + fill: var(--folderColor); + rx: 10; + ry: 10; + transform-origin: bottom; + transition: all 0.3s ease-in-out; +} -.card-icon-bg{ - background-color: rgb(129 132 138 / 10%); +.folder-card:hover { + transform: translateY(-5px); } +.folder-card:hover .paper-1 { + y: 12; + transform: translateY(0%); +} - .dark\:pintree-bg-gray-900:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(17 20 24 / var(--tw-bg-opacity)); - } - .dark\:pintree-bg-gray-800:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(34 37 42 / var(--tw-bg-opacity)); - } - .dark\:pintree-bg-gray-700:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(39 42 48 / var(--tw-bg-opacity)); - } - .dark\:pintree-bg-gray-600:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(45 49 57 / var(--tw-bg-opacity)); - } +.folder-card:hover .paper-2 { + y: 22; + transform: translateY(0%); +} +.folder-card:hover .folder__front { + rx: 13; + ry: 13; + y: 10; + height: 80; + transform: skewY(0deg) scaleY(0.6); +} - .dark\:hover\:pintree-bg-gray-900:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(17 20 24 / var(--tw-bg-opacity)); - } - .dark\:hover\:pintree-bg-gray-800:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(34 37 42 / var(--tw-bg-opacity)); - } - .dark\:hover\:pintree-bg-gray-700:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(39 42 48 / var(--tw-bg-opacity)); - } - .dark\:hover\:pintree-bg-gray-600:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(45 49 57 / var(--tw-bg-opacity)); - } +.folder-card:hover .folder__front.right { + rx: 13; + ry: 13; + y: 0; + height: 80; + transform: skewY(0deg) scaleY(0.6); +} +.loader { + border-top-color: #0ba665; /* You can change this color as needed */ + -webkit-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} - .dark\:pintree-border-gray-900:is(.dark *) { - --tw-bg-opacity: 1; - border-color: rgb(17 20 24 / var(--tw-bg-opacity)); +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); } - .dark\:pintree-border-gray-800:is(.dark *) { - --tw-bg-opacity: 1; - border-color: rgb(34 37 42 / var(--tw-bg-opacity)); + 100% { + -webkit-transform: rotate(360deg); } - .dark\:pintree-border-gray-700:is(.dark *) { - --tw-bg-opacity: 1; - border-color: rgb(39 42 48 / var(--tw-bg-opacity)); +} + +@keyframes spin { + 0% { + transform: rotate(0deg); } - .dark\:pintree-border-gray-600:is(.dark *) { - --tw-bg-opacity: 1; - border-color: rgb(45 49 57 / var(--tw-bg-opacity)); + 100% { + transform: rotate(360deg); } +} +.card-icon-bg { + background-color: rgb(129 132 138 / 10%); +} - .dark\:pintree-ring-gray-900:is(.dark *) { - --tw-bg-opacity: 1; - --tw-ring-color: rgb(17 20 24 / var(--tw-bg-opacity)); - } - .dark\:pintree-ring-gray-800:is(.dark *) { - --tw-bg-opacity: 1; - --tw-ring-color: rgb(34 37 42 / var(--tw-bg-opacity)); - } - .dark\:pintree-ring-gray-700:is(.dark *) { - --tw-bg-opacity: 1; - --tw-ring-color: rgb(39 42 48 / var(--tw-bg-opacity)); - } - .dark\:pintree-ring-gray-600:is(.dark *) { - --tw-bg-opacity: 1; - --tw-ring-color: rgb(45 49 57 / var(--tw-bg-opacity)); - } +.dark\:pintree-bg-gray-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(17 20 24 / var(--tw-bg-opacity)); +} +.dark\:pintree-bg-gray-800:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(34 37 42 / var(--tw-bg-opacity)); +} +.dark\:pintree-bg-gray-700:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(39 42 48 / var(--tw-bg-opacity)); +} +.dark\:pintree-bg-gray-600:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(45 49 57 / var(--tw-bg-opacity)); +} +.dark\:hover\:pintree-bg-gray-900:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(17 20 24 / var(--tw-bg-opacity)); +} +.dark\:hover\:pintree-bg-gray-800:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(34 37 42 / var(--tw-bg-opacity)); +} +.dark\:hover\:pintree-bg-gray-700:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(39 42 48 / var(--tw-bg-opacity)); +} +.dark\:hover\:pintree-bg-gray-600:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(45 49 57 / var(--tw-bg-opacity)); +} + +.dark\:pintree-border-gray-900:is(.dark *) { + --tw-bg-opacity: 1; + border-color: rgb(17 20 24 / var(--tw-bg-opacity)); +} +.dark\:pintree-border-gray-800:is(.dark *) { + --tw-bg-opacity: 1; + border-color: rgb(34 37 42 / var(--tw-bg-opacity)); +} +.dark\:pintree-border-gray-700:is(.dark *) { + --tw-bg-opacity: 1; + border-color: rgb(39 42 48 / var(--tw-bg-opacity)); +} +.dark\:pintree-border-gray-600:is(.dark *) { + --tw-bg-opacity: 1; + border-color: rgb(45 49 57 / var(--tw-bg-opacity)); +} + +.dark\:pintree-ring-gray-900:is(.dark *) { + --tw-bg-opacity: 1; + --tw-ring-color: rgb(17 20 24 / var(--tw-bg-opacity)); +} +.dark\:pintree-ring-gray-800:is(.dark *) { + --tw-bg-opacity: 1; + --tw-ring-color: rgb(34 37 42 / var(--tw-bg-opacity)); +} +.dark\:pintree-ring-gray-700:is(.dark *) { + --tw-bg-opacity: 1; + --tw-ring-color: rgb(39 42 48 / var(--tw-bg-opacity)); +} +.dark\:pintree-ring-gray-600:is(.dark *) { + --tw-bg-opacity: 1; + --tw-ring-color: rgb(45 49 57 / var(--tw-bg-opacity)); +} + +/* Product Tour Popover */ +.driver-popover { + background: #ffffff33; + backdrop-filter: blur(7px); /* Glass effect */ + -webkit-backdrop-filter: blur(10px); + color: white; +} + +.driver-popover-navigation-btns button { + background-color: #2c2c2c; + color: #ffffff; + border: none; + padding: 8px 16px; + margin: 0 4px; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s; + text-shadow: none; + font-weight: 700; +} + +.driver-popover-navigation-btns button { + background-color: #0ba66571; +} + +.driver-popover-navigation-btns button:hover { + background-color: #0ba665; +} diff --git a/index.html b/index.html index 552f4c09..8b2ad171 100644 --- a/index.html +++ b/index.html @@ -1,729 +1,1080 @@ +
+ + +