92 lines
2.0 KiB
CSS
92 lines
2.0 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-gray-900 text-white;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.btn {
|
|
@apply px-4 py-2 rounded-lg font-semibold transition-colors duration-200;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-indigo-600 hover:bg-indigo-700 text-white;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-gray-700 hover:bg-gray-600 text-white;
|
|
}
|
|
|
|
.pixel-mask {
|
|
position: relative;
|
|
width: 310px;
|
|
height: 680px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
border-radius: 30px;
|
|
box-shadow: 0 0 0 12px #2b2b2b, 0 0 0 14px #1e1e1e, 0 0 0 22px #101010;
|
|
background-color: #000;
|
|
}
|
|
|
|
.iphone-mask {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 650px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
border-radius: 40px;
|
|
box-shadow: 0 0 0 11px #1f1f1f, 0 0 0 13px #191919, 0 0 0 20px #111;
|
|
}
|
|
|
|
.iphone-mask::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
height: 30px;
|
|
width: 60%;
|
|
background-color: #1f1f1f;
|
|
border-bottom-left-radius: 20px;
|
|
border-bottom-right-radius: 20px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.iphone-mask img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.transition-all {
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
|
|
.duration-300 {
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
@variants responsive {
|
|
|
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
/* IE and Edge */
|
|
scrollbar-width: none;
|
|
/* Firefox */
|
|
}
|
|
}
|
|
} |