From f15038fcbdec9d40d093f279f61bf2e918be3369 Mon Sep 17 00:00:00 2001 From: sky121113 Date: Mon, 9 Mar 2026 10:16:38 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E5=AF=A6=E4=BD=9C=E5=BE=A9=E5=8F=A4?= =?UTF-8?q?=E5=B7=A5=E6=A5=AD=E9=A2=A8=20(Retro=20Industrial)=20-=20?= =?UTF-8?q?=E5=AD=97=E9=AB=94,=20=E9=91=B2=E5=B5=8C=E9=9D=A2=E6=9D=BF,=20C?= =?UTF-8?q?RT=20=E8=9E=A2=E5=B9=95=E8=88=87=E7=90=A5=E7=8F=80=E8=89=B2?= =?UTF-8?q?=E7=99=BC=E4=BA=AE=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/css/app.css | 135 +++++++++++++----------- resources/views/layouts/admin.blade.php | 11 +- 2 files changed, 80 insertions(+), 66 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index ea8a188..08928f3 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -4,8 +4,11 @@ @layer base { :root { - --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-display: 'Outfit', var(--font-sans); + --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-mono: 'Share Tech Mono', monospace; + --color-industrial-grey: #d1d5db; + --color-industrial-dark: #111827; + --color-amber: #ffb000; } html { @@ -19,89 +22,103 @@ h5, h6, .font-display { - font-family: var(--font-display); - letter-spacing: -0.02em; + font-family: var(--font-sans); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; } - /* Noise Texture */ - .noise-overlay { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); + .font-mono, + .crt-screen { + font-family: var(--font-mono); + } + + /* Inset Panels */ + .retro-panel { + background: #f3f4f6; + border: 2px solid #9ca3af; + box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 #4b5563; + } + + .dark .retro-panel { + background: #374151; + border: 2px solid #1f2937; + box-shadow: inset 1px 1px 0 #4b5563, 2px 2px 0 #000; + } + + /* CRT Screen */ + .crt-screen { + background: #000; + color: var(--color-amber); + border: 4px solid #4b5563; + box-shadow: inset 0 0 15px rgba(255, 176, 0, 0.3); + padding: 1.25rem; + position: relative; + overflow: hidden; + } + + .crt-screen::before { + content: " "; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03)); + z-index: 2; + background-size: 100% 2px, 3px 100%; + pointer-events: none; + } + + /* Amber Glow */ + .text-amber-glow { + color: var(--color-amber); + text-shadow: 0 0 8px rgba(255, 176, 0, 0.6); } /* Animations */ - @keyframes fadeUp { - from { - opacity: 0; - transform: translateY(10px); - } + @keyframes blink { - to { + 0%, + 100% { opacity: 1; - transform: translateY(0); + } + + 50% { + opacity: 0; } } - .animate-fade-up { - animation: fadeUp 0.5s ease-out forwards; + .animate-retro-blink { + animation: blink 1s step-end infinite; } - .delay-100 { - animation-delay: 100ms; - } - - .delay-200 { - animation-delay: 200ms; - } - - .delay-300 { - animation-delay: 300ms; - } - - .delay-400 { - animation-delay: 400ms; - } - - .delay-500 { - animation-delay: 500ms; - } - - /* Custom Scrollbar */ + /* Custom Scrollbar - Industrial style */ ::-webkit-scrollbar { - width: 8px; - height: 8px; + width: 14px; + height: 14px; } ::-webkit-scrollbar-track { - background: transparent; + background: #1f2937; + box-shadow: inset 2px 2px 0 #000; } ::-webkit-scrollbar-thumb { - background-color: theme('colors.gray.300'); - border-radius: 20px; - border: 2px solid transparent; - background-clip: content-box; - } - - .dark ::-webkit-scrollbar-thumb { - background-color: theme('colors.gray.600'); + background: #6b7280; + border: 2px solid #1f2937; + box-shadow: 2px 2px 0 #000, inset 1px 1px 0 #9ca3af; } ::-webkit-scrollbar-thumb:hover { - background-color: theme('colors.gray.400'); - } - - .dark ::-webkit-scrollbar-thumb:hover { - background-color: theme('colors.gray.500'); + background: #9ca3af; } /* Firefox */ * { - scrollbar-width: thin; - scrollbar-color: theme('colors.gray.300') transparent; - } - - .dark * { - scrollbar-color: theme('colors.gray.600') transparent; + scrollbar-width: auto; + scrollbar-color: #6b7280 #1f2937; } } diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php index 5c74ae6..1bf1303 100644 --- a/resources/views/layouts/admin.blade.php +++ b/resources/views/layouts/admin.blade.php @@ -10,7 +10,7 @@ - + @vite(['resources/css/app.css', 'resources/js/app.js']) - - -
-
-
-
+ + +