mama/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 實作復古工業風 (Retro Industrial) - 字體, 鑲嵌面板, CRT 螢幕與琥珀色發亮效果
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 39s
Details

Browse Source
This commit is contained in:
sky121113
2026-03-09 10:16:38 +08:00
parent 1d035d2766
commit f15038fcbd
2 changed files with 80 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
resources/css/app.css
View File

@@ -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;
}
}

11
resources/views/layouts/admin.blade.php
View File

@@ -10,7 +10,7 @@
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Scripts -->
<script>
@@ -24,12 +24,9 @@
</script>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-50 dark:bg-slate-950 antialiased font-sans h-full selection:bg-blue-100 dark:selection:bg-blue-900/40" x-data="{ sidebarOpen: false, userDropdownOpen: false }">
<!-- Design Elements -->
<div class="fixed inset-0 pointer-events-none z-0 overflow-hidden opacity-30 dark:opacity-40">
<div class="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] bg-blue-500/10 dark:bg-blue-600/5 blur-[120px] rounded-full"></div>
<div class="absolute top-[20%] -right-[10%] w-[35%] h-[35%] bg-purple-500/10 dark:bg-purple-600/5 blur-[120px] rounded-full"></div>
</div>
<body class="bg-[#d1d5db] dark:bg-[#1f2937] antialiased font-sans h-full selection:bg-amber-100 dark:selection:bg-amber-900/40" x-data="{ sidebarOpen: false, userDropdownOpen: false }">
<!-- Retro Scanlines Effect -->
<div class="fixed inset-0 pointer-events-none z-[100] overflow-hidden opacity-[0.03] dark:opacity-[0.05] pointer-events-none bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[length:100%_2px,3px_100%]"></div>
<!-- Sidebar Overlay (Mobile) -->
<div x-show="sidebarOpen"