Templates
This commit is contained in:
npcdazai
91
src/App.css
91
src/App.css
@@ -1,19 +1,18 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
/* font-family: "League Spartan", sans-serif !important; */
|
||||
/* font-family: "Poppins", sans-serif !important; */
|
||||
/* font-family: "Lato", sans-serif !important; */
|
||||
|
||||
|
||||
font-family: "Montserrat", sans-serif !important;
|
||||
}
|
||||
|
||||
@@ -27,8 +26,7 @@
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#7a45fb,
|
||||
/* #764aaf67, */
|
||||
#de41b5
|
||||
/* #764aaf67, */ #de41b5
|
||||
); /* Gradient background */
|
||||
-webkit-background-clip: text; /* Clip text to the background area */
|
||||
-webkit-text-fill-color: transparent; /* Fill text with the background color */
|
||||
@@ -41,19 +39,23 @@
|
||||
/* background-color: black; */
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
a.active{
|
||||
a.active {
|
||||
border-left: 2px solid #fff;
|
||||
background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(55, 37, 234, 0.6) 0%,
|
||||
rgba(94, 15, 205, 0.6) 100%
|
||||
);
|
||||
}
|
||||
/* .chakra-accordion__item.css-1t7rcca:has(.active) {
|
||||
background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
|
||||
border-left: 2px solid #fff;
|
||||
} */
|
||||
.chakra-accordion__item .link:hover{
|
||||
background:transparent !important;
|
||||
.chakra-accordion__item .link:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
.chakra-accordion__item .active{
|
||||
background:transparent !important;
|
||||
.chakra-accordion__item .active {
|
||||
background: transparent !important;
|
||||
border: none;
|
||||
}
|
||||
.link {
|
||||
@@ -126,7 +128,7 @@ a.active{
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background-color: #210A33 !important;
|
||||
background-color: #210a33 !important;
|
||||
}
|
||||
|
||||
.team-slider .swiper-button-next:after {
|
||||
@@ -180,7 +182,7 @@ a.active{
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
.table-scroll::-webkit-scrollbar{
|
||||
.table-scroll::-webkit-scrollbar {
|
||||
width: 2px !important;
|
||||
height: 10px !important;
|
||||
}
|
||||
@@ -209,9 +211,6 @@ a.active{
|
||||
background: #0041189a;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#google_translate_element {
|
||||
/* display: none; Hide the default Google Translate dropdown */
|
||||
|
||||
@@ -234,10 +233,9 @@ a.active{
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
@keyframes text {
|
||||
0% {
|
||||
color: #DE858E;
|
||||
color: #de858e;
|
||||
/* margin-bottom: -40px; */
|
||||
}
|
||||
30% {
|
||||
@@ -356,21 +354,17 @@ a.active{
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ========= [ switch BTN ============ */
|
||||
|
||||
|
||||
|
||||
/* From Uiverse.io by Nawsome */
|
||||
/* From Uiverse.io by Nawsome */
|
||||
.switch {
|
||||
display: block;
|
||||
background-color: black;
|
||||
width: 85px;
|
||||
height: 115px;
|
||||
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
|
||||
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,
|
||||
inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c,
|
||||
inset 0 0 2px 22px black;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
perspective: 700px;
|
||||
@@ -407,13 +401,25 @@ a.active{
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
|
||||
background: linear-gradient(
|
||||
#980000 0%,
|
||||
#6f0000 30%,
|
||||
#6f0000 70%,
|
||||
#980000 100%
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.switch .button::before {
|
||||
content: "";
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
|
||||
background: linear-gradient(
|
||||
rgba(255, 255, 255, 0.8) 10%,
|
||||
rgba(255, 255, 255, 0.3) 30%,
|
||||
#650000 75%,
|
||||
#320000
|
||||
)
|
||||
50% 50%/97% 97%,
|
||||
#b10000;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
@@ -456,7 +462,15 @@ a.active{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
|
||||
background: linear-gradient(white, white) 50% 20%/5% 20%,
|
||||
radial-gradient(
|
||||
circle,
|
||||
transparent 50%,
|
||||
white 52%,
|
||||
white 70%,
|
||||
transparent 72%
|
||||
)
|
||||
50% 80%/33% 25%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@@ -466,7 +480,14 @@ a.active{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
|
||||
background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%,
|
||||
linear-gradient(
|
||||
rgba(255, 255, 255, 0.5),
|
||||
transparent 50%,
|
||||
transparent 80%,
|
||||
rgba(255, 255, 255, 0.5)
|
||||
)
|
||||
50% 50%/97% 97%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@@ -504,10 +525,14 @@ a.active{
|
||||
}
|
||||
}
|
||||
|
||||
.react-tel-input .selected-flag:hover, .react-tel-input .selected-flag:focus {
|
||||
.react-tel-input .selected-flag:hover,
|
||||
.react-tel-input .selected-flag:focus {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.react-tel-input .selected-flag {
|
||||
background: transparent !important;
|
||||
padding: 0 0 0 16px !important;
|
||||
}
|
||||
|
||||
|
||||
/* Styling the scrollbar */
|
||||
|
||||
@@ -1,126 +1,192 @@
|
||||
import {
|
||||
Box,
|
||||
Icon,
|
||||
Image,
|
||||
Tab,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
Tabs,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useState } from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import {
|
||||
FaTv,
|
||||
FaShoppingCart,
|
||||
FaUtensils,
|
||||
FaTshirt,
|
||||
FaHeart,
|
||||
} from "react-icons/fa";
|
||||
import AllTemp from "./Tabs/AllTemp";
|
||||
|
||||
const Preview = () => {
|
||||
const [selectedCard, setSelectedCard] = useState(null);
|
||||
|
||||
const handleCardSelect = (card) => {
|
||||
setSelectedCard(card);
|
||||
};
|
||||
|
||||
const tabData = [
|
||||
{
|
||||
label: "All",
|
||||
icon: FaTv,
|
||||
content: (
|
||||
<AllTemp
|
||||
selectedCard={selectedCard}
|
||||
handleCardSelect={handleCardSelect}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ label: "Thank you", icon: FaTv, content: "Content for Electronics" },
|
||||
{
|
||||
label: "Best wishes",
|
||||
icon: FaShoppingCart,
|
||||
content: "Content for Ecommerce",
|
||||
},
|
||||
{
|
||||
label: "Happy birthday",
|
||||
icon: FaHeart,
|
||||
content: "Content for Lifestyle",
|
||||
},
|
||||
{
|
||||
label: "Congratulations",
|
||||
icon: FaUtensils,
|
||||
content: "Content for Food & Beverages",
|
||||
},
|
||||
{ label: "Thank you", icon: FaTshirt, content: "Content for Clothing" },
|
||||
];
|
||||
|
||||
return (
|
||||
Box,
|
||||
Button,
|
||||
FormLabel,
|
||||
Icon,
|
||||
Image,
|
||||
Tab,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
Tabs,
|
||||
Text,
|
||||
Textarea,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useState } from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import {
|
||||
FaTv,
|
||||
FaShoppingCart,
|
||||
FaUtensils,
|
||||
FaTshirt,
|
||||
FaHeart,
|
||||
} from "react-icons/fa";
|
||||
import AllTemp from "./Tabs/AllTemp";
|
||||
import amazon from "../../assets/amazonlogoF.png";
|
||||
|
||||
const Preview = () => {
|
||||
const [selectedCard, setSelectedCard] = useState(null);
|
||||
|
||||
const handleCardSelect = (card) => {
|
||||
setSelectedCard(card);
|
||||
};
|
||||
|
||||
const tabData = [
|
||||
{
|
||||
label: "All",
|
||||
icon: FaTv,
|
||||
content: (
|
||||
<AllTemp
|
||||
selectedCard={selectedCard}
|
||||
handleCardSelect={handleCardSelect}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ label: "Thank you", icon: FaTv, content: "Content for Electronics" },
|
||||
{
|
||||
label: "Best wishes",
|
||||
icon: FaShoppingCart,
|
||||
content: "Content for Ecommerce",
|
||||
},
|
||||
{
|
||||
label: "Happy birthday",
|
||||
icon: FaHeart,
|
||||
content: "Content for Lifestyle",
|
||||
},
|
||||
{
|
||||
label: "Congratulations",
|
||||
icon: FaUtensils,
|
||||
content: "Content for Food & Beverages",
|
||||
},
|
||||
{ label: "Thank you", icon: FaTshirt, content: "Content for Clothing" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Box
|
||||
bgColor="#F3F3F9"
|
||||
h="100%"
|
||||
{...OPACITY_ON_LOAD}
|
||||
p={4}
|
||||
overflowX={"scroll"}
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
flexDirection="row"
|
||||
>
|
||||
<Box display="flex" w="60%" flexDirection="column">
|
||||
<Text fontSize={"medium"} fontWeight={"semibold"}>
|
||||
Select template
|
||||
</Text>
|
||||
<Text fontSize={"medium"} fontWeight={400}>
|
||||
Category
|
||||
</Text>
|
||||
<Tabs
|
||||
w="100%"
|
||||
variant="soft-rounded"
|
||||
colorScheme="purple"
|
||||
align="start"
|
||||
>
|
||||
<TabList display="flex" flexDirection="row" gap={0}>
|
||||
{tabData.map((tab, index) => (
|
||||
<Tab fontSize="x-small" key={index} whiteSpace="nowrap">
|
||||
<Icon as={tab.icon} mr={2} />
|
||||
{tab.label}
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
<Box w="100%" border="0.5px solid #6311CB5E" mt="2" />
|
||||
{/* Mapping through tabData to create tab panels */}
|
||||
<TabPanels >
|
||||
{tabData.map((tab, index) => (
|
||||
<TabPanel h={"450px"} overflowY="scroll" key={index}>
|
||||
<p>{tab.content}</p>
|
||||
</TabPanel>
|
||||
))}
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
bgColor="#F3F3F9"
|
||||
h="100%"
|
||||
w="40%"
|
||||
{...OPACITY_ON_LOAD}
|
||||
overflowY={"scroll"}
|
||||
border="1px"
|
||||
borderColor="gray.200"
|
||||
borderRadius="md"
|
||||
p={4}
|
||||
overflowX={"scroll"}
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
flexDirection="row"
|
||||
>
|
||||
<Box display="flex" w="60%">
|
||||
<Tabs w="90%" variant="soft-rounded" colorScheme="purple" align="start">
|
||||
<TabList overflow="scroll" display="flex" flexDirection="row" gap={1}>
|
||||
{tabData.map((tab, index) => (
|
||||
<Tab fontSize="small" key={index} whiteSpace="nowrap">
|
||||
<Icon as={tab.icon} mr={2} />
|
||||
{tab.label}
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
<Box w="100%" border="0.5px solid #6311CB5E" mt="2" />
|
||||
{/* Mapping through tabData to create tab panels */}
|
||||
<TabPanels>
|
||||
{tabData.map((tab, index) => (
|
||||
<TabPanel key={index}>
|
||||
<p>{tab.content}</p>
|
||||
</TabPanel>
|
||||
))}
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
bgColor="#F3F3F9"
|
||||
h="100%"
|
||||
{...OPACITY_ON_LOAD}
|
||||
overflowX={"scroll"}
|
||||
border="1px"
|
||||
borderColor="gray.200"
|
||||
borderRadius="md"
|
||||
p={4}
|
||||
>
|
||||
<Text fontWeight="bold" mb={4}>
|
||||
Preview:
|
||||
</Text>
|
||||
{selectedCard ? (
|
||||
<>
|
||||
<Image
|
||||
src={selectedCard.image}
|
||||
alt={selectedCard.title}
|
||||
/>
|
||||
<Text fontWeight="bold" mt={2}>
|
||||
<Text fontWeight="bold" fontSize="medium">
|
||||
Preview:
|
||||
</Text>
|
||||
{selectedCard ? (
|
||||
<>
|
||||
<Image h="201px" src={selectedCard.image} alt={selectedCard.title} />
|
||||
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
mt={4}
|
||||
gap={1}
|
||||
w="100%"
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="flex-start"
|
||||
mt={4}
|
||||
gap={1}
|
||||
w="100%"
|
||||
>
|
||||
<Text fontSize="small" color="#2D2D2D" fontWeight={600}>
|
||||
Hi Receiver,
|
||||
</Text>
|
||||
<Text fontSize="small" color="#2D2D2D" fontWeight={600}>
|
||||
You’ve got a Amazon pay E-Gift card
|
||||
</Text>
|
||||
|
||||
<FormLabel color="#666666" fontWeight={400} fontSize={"small"}>
|
||||
Type your message
|
||||
</FormLabel>
|
||||
<Textarea />
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
justifyContent="space-between"
|
||||
w="100%"
|
||||
>
|
||||
<Image h="31px" src={amazon} />
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="flex-end"
|
||||
>
|
||||
<Text fontSize="small" color="#3725EA" fontWeight={600}>
|
||||
₹ 500
|
||||
</Text>
|
||||
<Text fontSize="small" color="#3725EA" fontWeight={600}>
|
||||
Validity: xxxxxx
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Button fontSize="small" bgColor="#6311CB" color="#fff" p={4} w="301px">
|
||||
{" "}
|
||||
Proceed to add
|
||||
</Button>
|
||||
</Box>
|
||||
{/* <Text fontWeight="bold" mt={2}>
|
||||
{selectedCard.title}
|
||||
</Text>
|
||||
<Text>{selectedCard.description}</Text>
|
||||
</>
|
||||
) : (
|
||||
<Text>No card selected</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Text>{selectedCard.description}</Text> */}
|
||||
</>
|
||||
) : (
|
||||
<Text>No card selected</Text>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Preview;
|
||||
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Preview;
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
import React from "react";
|
||||
import React, { useRef, useEffect } from "react";
|
||||
import VanillaTilt from "vanilla-tilt";
|
||||
import temp1 from "../../../assets/temp1.png";
|
||||
import temp2 from "../../../assets/temp2.png";
|
||||
import temp3 from "../../../assets/temp3.png";
|
||||
import temp5 from "../../../assets/temp5.png";
|
||||
import temp6 from "../../../assets/temp6.png";
|
||||
import temp7 from "../../../assets/temp7.png";
|
||||
import temp8 from "../../../assets/temp8.png";
|
||||
import { Box, Grid } from "@chakra-ui/react";
|
||||
|
||||
const cards = [
|
||||
@@ -12,13 +18,65 @@ const cards = [
|
||||
id: 2,
|
||||
image: temp2,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: temp3,
|
||||
},
|
||||
{
|
||||
id: 4, // Fix duplicate id
|
||||
image: temp5,
|
||||
},
|
||||
{
|
||||
id: 5, // Fix duplicate id
|
||||
image: temp6,
|
||||
},
|
||||
{
|
||||
id: 6, // Fix duplicate id
|
||||
image: temp7,
|
||||
},
|
||||
{
|
||||
id: 7, // Fix duplicate id
|
||||
image: temp8,
|
||||
},
|
||||
];
|
||||
|
||||
const AllTemp = ({ selectedCard, handleCardSelect }) => {
|
||||
const tiltRefs = useRef([]);
|
||||
|
||||
useEffect(() => {
|
||||
tiltRefs.current.forEach((node) => {
|
||||
if (node) {
|
||||
VanillaTilt.init(node, {
|
||||
max: 13,
|
||||
speed: 700,
|
||||
glare: true,
|
||||
scale: 1.05,
|
||||
"max-glare": 0.5,
|
||||
onEnter: () => {
|
||||
node.style.zIndex = 10; // Bring to top on hover
|
||||
},
|
||||
onLeave: () => {
|
||||
node.style.zIndex = 1; // Reset zIndex after hover
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Cleanup VanillaTilt instances
|
||||
return () => {
|
||||
tiltRefs.current.forEach((node) => {
|
||||
if (node && node.vanillaTilt) {
|
||||
node.vanillaTilt.destroy();
|
||||
}
|
||||
});
|
||||
};
|
||||
}, [tiltRefs]);
|
||||
|
||||
return (
|
||||
<Grid w="100%" templateColumns="repeat(2, 1fr)" gap={6}>
|
||||
{cards.map((card) => (
|
||||
{cards.map((card, index) => (
|
||||
<Box
|
||||
ref={(el) => (tiltRefs.current[index] = el)}
|
||||
key={card.id}
|
||||
bgImage={`url(${card.image})`}
|
||||
bgSize="cover"
|
||||
@@ -29,7 +87,7 @@ const AllTemp = ({ selectedCard, handleCardSelect }) => {
|
||||
overflow="hidden"
|
||||
cursor="pointer"
|
||||
onClick={() => handleCardSelect(card)}
|
||||
height="200px"
|
||||
height="200px"
|
||||
w="100%"
|
||||
/>
|
||||
))}
|
||||
|
||||
BIN
src/assets/amazonlogoF.png
Normal file
BIN
src/assets/amazonlogoF.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/temp3.png
Normal file
BIN
src/assets/temp3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
BIN
src/assets/temp5.png
Normal file
BIN
src/assets/temp5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
src/assets/temp6.png
Normal file
BIN
src/assets/temp6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
src/assets/temp7.png
Normal file
BIN
src/assets/temp7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
src/assets/temp8.png
Normal file
BIN
src/assets/temp8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
22
src/styles/ScrollBar.css
Normal file
22
src/styles/ScrollBar.css
Normal file
@@ -0,0 +1,22 @@
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
/* Styling the scrollbar track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #6311cb1a;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Styling the scrollbar thumb */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #6311cb;
|
||||
border-radius: 10px;
|
||||
/* border: 3px solid #6311cb; */
|
||||
}
|
||||
|
||||
/* Hover effect on scrollbar thumb */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #6311cb;
|
||||
}
|
||||
Reference in New Issue
Block a user