src/index.css
@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');
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply font-poppins w-full h-full overflow-x-hidden;
}
@layer utilities {
/* css flex */
.flex-center {
@apply flex items-center justify-center;
}
.button-size {
@apply px-5 ipad:px-8 py-2 ipad:py-2.5 text-[10px] mobile:text-[11px] ipad:text-xs;
}
.form-input {
@apply px-3 py-2 text-xs rounded-lg;
}
.bgImage {
background-image: url('./assets/register-login-background.svg');
background-position: 'center';
background-size: 'cover';
}
.labels {
@apply text-xs text-neutral-black/75 ml-1;
}
.product-container {
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4;
}
.sidebar-item {
@apply flex py-3 items-center px-[9%] gap-7 text-[19px] font-semibold;
}
.hero_background_image {
background-image: url('../src/assets/heroe_image_background.png');
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
}
.hero_image {
background-image: url('../src/assets/heroe_image.png');
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
}
.bg-contactImage {
background-image: url('../src/assets/contact.png');
background-size: cover;
background-position: center;
}
.waves-floating {
@apply absolute w-[400px] h-[400px] ml-[-150px] mb-[-280px] rounded-[43%];
}
}
nav a.active {
background: linear-gradient(
90deg,
rgba(14, 36, 52, 1) 0%,
rgba(38, 100, 145, 1) 42%,
rgba(38, 100, 144, 1) 42%,
rgba(41, 106, 154, 1) 100%
);
font-size: 1.2rem;
color: #f8f8f8;
}
.product_card {
box-shadow:
0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.btn:active {
scale: 0.5;
transition: 0.4s ease-out;
}
.btn:hover {
scale: 1.1;
transition: 0.5s ease-in-out;
cursor: pointer;
}
.cart_btn:hover {
scale: 1.3;
transition: 0.3s ease-in-out;
cursor: pointer;
}
.cart_btn:active {
scale: 0.3;
transition: 0.4s ease-out;
}
.wish_btn:hover {
transition: 0.5s ease-in-out;
cursor: pointer;
scale: 1.4;
rotate: 10deg;
}
.wish_btn:active {
color: coral;
transition: 0.5s ease-in-out;
cursor: pointer;
scale: 0.3;
rotate: 10deg;
}
.cart_btn:active {
scale: 0.5;
transition: 0.5s ease-in-out;
cursor: pointer;
}
.tableWrapper .tables {
display: block;
overflow: hidden;
table-layout: auto;
border-collapse: collapse;
white-space: nowrap;
width: 100%;
margin: auto;
overflow-x: auto;
}
.tableWrapper th,
.tableWrapper td {
padding: 0.8rem;
}
.tableWrapper td {
border-top: 0.5px solid #ddd;
text-overflow: ellipsis;
overflow: hidden;
}
.expand {
width: 1%;
}
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
list-style-type: none;
align-items: center;
}
.pagination li {
margin: 0 5px;
cursor: pointer;
padding: 5px 10px;
border-radius: 5px;
background: transparent;
}
.pagination li.active {
background-color: #256490;
color: white;
border-radius: 100%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
table thead tr th:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
table thead tr th:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
._shadow {
box-shadow:
0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.a_link:hover {
scale: 1.1;
background-color: #eff4f8;
transition: 0.5s ease-in-out;
color: #256490;
}
.a_category:hover {
scale: 1.1;
background-color: #ffffff;
transition: 0.5s ease-in-out;
color: #660b0b;
color: #256490;
border-radius: 5px;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* width */
::-webkit-scrollbar {
width: 0.45rem;
margin-left: 2rem;
}
/* Track */
::-webkit-scrollbar-track {
background: #888;
border-radius: 5rem;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: linear-gradient(
90deg,
rgba(14, 36, 52, 1) 0%,
rgba(38, 100, 144, 1) 42%,
rgba(38, 100, 145, 1) 42%,
rgba(41, 106, 154, 1) 100%
);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(
90deg,
rgba(14, 36, 52, 1) 0%,
rgba(38, 100, 1441) 92%,
rgba(38, 100, 145) 92%,
rgba(41, 106, 154) 100%
);
}
circle {
stroke-width: 14px;
stroke-linecap: round;
fill: transparent;
}
.floating-box {
transform: translate3d(0, 0, 0);
}
.wave {
opacity: 0.4;
left: 30%;
transform-origin: 48% 50%;
animation: waving 4000ms infinite linear;
}
.wave.-three {
animation: waving 5000ms infinite linear;
}
.wave.-two {
animation: waving 7000ms infinite linear;
opacity: 0.1;
}
@keyframes waving {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}