Spaces:
Running
Running
File size: 2,238 Bytes
f15e94b 8e41ad4 f15e94b 8e41ad4 f15e94b 8e41ad4 f15e94b 8e41ad4 f15e94b 8e41ad4 f15e94b 8e41ad4 f15e94b 8e41ad4 f15e94b 8e41ad4 f15e94b 8e41ad4 f15e94b 8e41ad4 f15e94b 8e41ad4 f15e94b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | @tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap');
@layer base {
body {
@apply bg-comic-white text-comic-black font-['Comic_Neue'] overflow-x-hidden;
background-image:
radial-gradient(#000 1px, transparent 1px),
radial-gradient(#000 1px, transparent 1px);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
background-color: #f0f0f0;
}
}
@layer components {
.comic-card {
@apply bg-white border-4 border-black shadow-comic rounded-none p-4 relative;
}
.comic-btn {
@apply bg-comic-yellow border-4 border-black shadow-comic-sm active:shadow-none active:translate-x-[3px] active:translate-y-[3px] transition-all font-bold uppercase tracking-wider px-6 py-2 rounded-none;
}
.comic-input {
@apply bg-white border-4 border-black shadow-comic-sm focus:outline-none focus:ring-2 focus:ring-comic-blue px-4 py-2 rounded-none font-bold;
}
.speech-bubble {
@apply relative bg-comic-blue border-4 border-black p-4 rounded-2xl shadow-comic-sm;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: -12px;
left: 20px;
border-width: 12px 12px 0;
border-style: solid;
border-color: black transparent;
display: block;
width: 0;
}
.speech-bubble:before {
content: '';
position: absolute;
bottom: -8px;
left: 24px;
border-width: 8px 8px 0;
border-style: solid;
border-color: #00BFFF transparent;
display: block;
width: 0;
z-index: 1;
}
.chess-square {
@apply w-full h-full flex items-center justify-center text-4xl sm:text-6xl cursor-pointer select-none transition-transform duration-200 relative;
}
.piece-3d {
@apply drop-shadow-[0_5px_5px_rgba(0,0,0,0.5)] filter;
text-shadow:
2px 2px 0px #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f0f0f0;
border-left: 4px solid black;
}
::-webkit-scrollbar-thumb {
background: #FFD700;
border: 4px solid black;
} |