mirror of
https://github.com/nihonbuzz/nihonbuzz-academy.git
synced 2026-01-26 21:41:54 +07:00
100 lines
3.5 KiB
CSS
100 lines
3.5 KiB
CSS
/* Plyr CSS - Must be at top before @tailwind */
|
|
@import "plyr/dist/plyr.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
:root {
|
|
--brand-red: #FF4500;
|
|
--brand-black: #000000;
|
|
--background: 0 0% 100%;
|
|
--foreground: 240 10% 3.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 240 10% 3.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 3.9%;
|
|
--primary: 16 100% 50%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 240 4.8% 95.9%;
|
|
--secondary-foreground: 240 5.9% 10%;
|
|
--muted: 240 4.8% 95.9%;
|
|
--muted-foreground: 240 3.8% 46.1%;
|
|
--accent: 240 4.8% 95.9%;
|
|
--accent-foreground: 240 5.9% 10%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 240 5.9% 90%;
|
|
--input: 240 5.9% 90%;
|
|
--ring: 16 100% 50%;
|
|
--radius: 1rem;
|
|
|
|
/* Plyr Custom Theme */
|
|
--plyr-color-main: #FF4500;
|
|
}
|
|
.dark {
|
|
--background: 240 10% 3.9%; /* Matching nihonbuzz.org #0a0a0b approx */
|
|
--foreground: 0 0% 98%;
|
|
--card: 240 10% 3.9%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 240 10% 4.8%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 16 100% 50%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 240 3.7% 15.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 240 3.7% 12%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
--accent: 240 3.7% 15.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 240 3.7% 15.9%;
|
|
--input: 240 3.7% 15.9%;
|
|
--ring: 16 100% 50%;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.bg-grid {
|
|
background-size: 40px 40px;
|
|
background-image:
|
|
linear-gradient(to right, hsl(var(--foreground) / var(--grid-opacity, 0.05)) 1px, transparent 1px),
|
|
linear-gradient(to bottom, hsl(var(--foreground) / var(--grid-opacity, 0.05)) 1px, transparent 1px);
|
|
mask-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0));
|
|
-webkit-mask-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0));
|
|
}
|
|
|
|
.bg-seigaiha {
|
|
background-color: transparent;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 40a40 40 0 0 1 40-40 40 40 0 0 1 40 40H70a30 30 0 0 0-30-30 30 30 0 0 0-30 30H0zm40 0a10 10 0 0 1 10-10 10 10 0 0 1 10 10H50a5 5 0 0 0-5-5 5 5 0 0 0-5 5h-10zm0-30a10 10 0 0 1 10-10 10 10 0 0 1 10 10h-5a5 5 0 0 0-5-5 5 5 0 0 0-5 5h-5zM0 10a10 10 0 0 1 10-10 10 10 0 0 1 10 10h-5a5 5 0 0 0-5-5 5 5 0 0 0-5 5H0zm70 0a10 10 0 0 1 10-10 10 10 0 0 1 10 10h-5a5 5 0 0 0-5-5 5 5 0 0 0-5 5h-5z' fill='none' stroke='%23FF4500' stroke-width='1.5' stroke-opacity='0.15'/%3E%3C/svg%3E");
|
|
mask-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0));
|
|
-webkit-mask-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0));
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
--grid-opacity: 0.05;
|
|
--hero-glow-opacity: 0.8;
|
|
@apply bg-background text-foreground transition-colors duration-300;
|
|
}
|
|
.dark body {
|
|
--grid-opacity: 0.02;
|
|
--hero-glow-opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.plyr--video {
|
|
@apply rounded-2xl overflow-hidden shadow-2xl;
|
|
}
|
|
|