Ubuntu
365 lines
9.1 KiB
CSS
365 lines
9.1 KiB
CSS
/* ========== Personal Blog - 双主题共存方案 ========== */
|
|
/* 主题1: Neobrutalism (访客端默认) */
|
|
/* 主题2: Preline Admin (管理后台) */
|
|
|
|
/* 基础 Tailwind */
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ============================================ */
|
|
/* CSS 变量定义 */
|
|
/* ============================================ */
|
|
|
|
:root {
|
|
/* Neobrutalism 默认配色 */
|
|
--brutal-cream: #FEF9E7;
|
|
--brutal-yellow: #FFDE59;
|
|
--brutal-pink: #FF6B9D;
|
|
--brutal-cyan: #00D9FF;
|
|
--brutal-lavender: #C084FC;
|
|
--brutal-green: #4ADE80;
|
|
|
|
/* 动态主题变量（默认 Preline 配色，会被后端配置覆盖） */
|
|
--color-primary: #2563EB;
|
|
--color-primary-hover: #1D4ED8;
|
|
--color-primary-light: #EFF6FF;
|
|
--color-secondary: #06B6D4;
|
|
--color-sidebar: #1E293B;
|
|
--color-sidebar-active: #334155;
|
|
--color-bg: #F8FAFC;
|
|
--color-card: #FFFFFF;
|
|
--color-border: #E2E8F0;
|
|
--color-text: #0F172A;
|
|
--color-text-secondary: #64748B;
|
|
|
|
/* Primary 色阶 (50-950) */
|
|
--color-primary-50: #EFF6FF;
|
|
--color-primary-100: #DBEAFE;
|
|
--color-primary-200: #BFDBFE;
|
|
--color-primary-300: #93C5FD;
|
|
--color-primary-400: #60A5FA;
|
|
--color-primary-500: #3B82F6;
|
|
--color-primary-600: #2563EB;
|
|
--color-primary-700: #1D4ED8;
|
|
--color-primary-800: #1E40AF;
|
|
--color-primary-900: #1E3A8A;
|
|
--color-primary-950: #172554;
|
|
|
|
/* Secondary 色阶 (50-950) */
|
|
--color-secondary-50: #ECFEFF;
|
|
--color-secondary-100: #CFFAFE;
|
|
--color-secondary-200: #A5F3FC;
|
|
--color-secondary-300: #67E8F9;
|
|
--color-secondary-400: #22D3EE;
|
|
--color-secondary-500: #06B6D4;
|
|
--color-secondary-600: #0891B2;
|
|
--color-secondary-700: #0E7490;
|
|
--color-secondary-800: #155E75;
|
|
--color-secondary-900: #164E63;
|
|
--color-secondary-950: #083344;
|
|
|
|
/* Gray 色阶 (50-950) */
|
|
--color-gray-50: #F8FAFC;
|
|
--color-gray-100: #F1F5F9;
|
|
--color-gray-200: #E2E8F0;
|
|
--color-gray-300: #CBD5E1;
|
|
--color-gray-400: #94A3B8;
|
|
--color-gray-500: #64748B;
|
|
--color-gray-600: #475569;
|
|
--color-gray-700: #334155;
|
|
--color-gray-800: #1E293B;
|
|
--color-gray-900: #0F172A;
|
|
--color-gray-950: #020617;
|
|
|
|
/* Semantic colors */
|
|
--color-success: #22C55E;
|
|
--color-success-bg: #DCFCE7;
|
|
--color-success-border: #BBF7D0;
|
|
--color-success-text: #14532D;
|
|
--color-warning: #F59E0B;
|
|
--color-warning-bg: #FEF3C7;
|
|
--color-warning-border: #FDE68A;
|
|
--color-warning-text: #78350F;
|
|
--color-danger: #EF4444;
|
|
--color-danger-bg: #FEE2E2;
|
|
--color-danger-border: #FECACA;
|
|
--color-danger-text: #7F1D1D;
|
|
--color-info: #3B82F6;
|
|
--color-info-bg: #DBEAFE;
|
|
--color-info-border: #BFDBFE;
|
|
--color-info-text: #1E3A8A;
|
|
|
|
/* Neobrutalism 装饰变量 */
|
|
--border-width: 2px;
|
|
--border-radius: 0px;
|
|
--shadow: 4px 4px 0px 0px rgba(0,0,0,1);
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* 基础样式 */
|
|
/* ============================================ */
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-[var(--color-bg)] text-[var(--color-text)];
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
}
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* Neobrutalism 组件样式 (保留) */
|
|
/* ============================================ */
|
|
|
|
@layer components {
|
|
/* 核心按钮样式 */
|
|
.btn-brutal {
|
|
@apply inline-flex items-center justify-center px-4 py-2
|
|
border-2 border-black font-bold text-sm
|
|
transition-all duration-150
|
|
shadow-brutal hover:shadow-none
|
|
hover:translate-x-[2px] hover:translate-y-[2px]
|
|
active:translate-x-[4px] active:translate-y-[4px];
|
|
}
|
|
|
|
.btn-brutal-sm {
|
|
@apply inline-flex items-center justify-center px-3 py-1.5
|
|
border-2 border-black font-bold text-xs
|
|
transition-all duration-150
|
|
shadow-brutal-sm hover:shadow-none
|
|
hover:translate-x-[1px] hover:translate-y-[1px];
|
|
}
|
|
|
|
/* 卡片样式 */
|
|
.card-brutal {
|
|
@apply bg-white border-2 border-black shadow-brutal;
|
|
}
|
|
|
|
.card-brutal-sm {
|
|
@apply bg-white border-2 border-black shadow-brutal-sm;
|
|
}
|
|
|
|
/* 输入框样式 */
|
|
.input-brutal {
|
|
@apply w-full px-3 py-2
|
|
border-2 border-black
|
|
bg-white
|
|
focus:outline-none focus:ring-2 focus:ring-brutal-yellow
|
|
placeholder:text-black/40;
|
|
}
|
|
|
|
/* 导航链接 */
|
|
.nav-link {
|
|
@apply px-3 py-1 font-bold text-sm
|
|
border-2 border-transparent
|
|
hover:border-black hover:bg-white
|
|
transition-all duration-150;
|
|
}
|
|
|
|
.nav-link-active {
|
|
@apply px-3 py-1 font-bold text-sm
|
|
border-2 border-black bg-brutal-yellow;
|
|
}
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* Preline Admin 组件样式 (新增) */
|
|
/* ============================================ */
|
|
|
|
@layer components {
|
|
/* Preline 风格按钮 */
|
|
.btn-preline {
|
|
@apply inline-flex items-center justify-center gap-2
|
|
px-4 py-2.5 rounded-lg font-medium text-sm
|
|
bg-blue-600 text-white
|
|
hover:bg-blue-700 focus:outline-none focus:ring-2
|
|
focus:ring-blue-500 focus:ring-offset-2
|
|
transition-all duration-200;
|
|
}
|
|
|
|
.btn-preline-secondary {
|
|
@apply inline-flex items-center justify-center gap-2
|
|
px-4 py-2.5 rounded-lg font-medium text-sm
|
|
bg-white text-gray-700
|
|
border border-gray-300
|
|
hover:bg-gray-50 focus:outline-none focus:ring-2
|
|
focus:ring-gray-200 transition-all duration-200;
|
|
}
|
|
|
|
.btn-preline-danger {
|
|
@apply inline-flex items-center justify-center gap-2
|
|
px-4 py-2.5 rounded-lg font-medium text-sm
|
|
bg-red-600 text-white
|
|
hover:bg-red-700 focus:outline-none focus:ring-2
|
|
focus:ring-red-500 focus:ring-offset-2
|
|
transition-all duration-200;
|
|
}
|
|
|
|
/* Preline 风格卡片 */
|
|
.card-preline {
|
|
@apply bg-white rounded-xl
|
|
border border-gray-200
|
|
shadow-sm hover:shadow-md transition-shadow duration-200;
|
|
}
|
|
|
|
.card-preline-header {
|
|
@apply px-6 py-4 border-b border-gray-200
|
|
flex items-center justify-between;
|
|
}
|
|
|
|
.card-preline-body {
|
|
@apply px-6 py-4;
|
|
}
|
|
|
|
.card-preline-footer {
|
|
@apply px-6 py-4 border-t border-gray-200
|
|
flex items-center justify-end gap-3;
|
|
}
|
|
|
|
/* Preline 风格输入框 */
|
|
.input-preline {
|
|
@apply w-full px-4 py-2.5 rounded-lg
|
|
border border-gray-300 bg-white
|
|
text-gray-900
|
|
focus:outline-none focus:ring-2
|
|
focus:ring-blue-500/20
|
|
focus:border-blue-500
|
|
placeholder:text-gray-400
|
|
transition-all duration-200;
|
|
}
|
|
|
|
.label-preline {
|
|
@apply block text-sm font-medium text-gray-700 mb-1.5;
|
|
}
|
|
|
|
/* Preline 侧边栏 */
|
|
.sidebar-preline {
|
|
@apply w-64 bg-slate-900 min-h-screen
|
|
fixed left-0 top-0 z-40;
|
|
}
|
|
|
|
.sidebar-preline-nav {
|
|
@apply mt-6 px-3 space-y-1;
|
|
}
|
|
|
|
.sidebar-preline-item {
|
|
@apply flex items-center gap-3 px-3 py-2.5 rounded-lg
|
|
text-gray-400 hover:bg-slate-800
|
|
hover:text-white transition-colors duration-200;
|
|
}
|
|
|
|
.sidebar-preline-item.active {
|
|
@apply bg-slate-800 text-white font-medium;
|
|
}
|
|
|
|
.sidebar-preline-icon {
|
|
@apply w-5 h-5 flex-shrink-0;
|
|
}
|
|
|
|
/* Preline 页面头部 */
|
|
.page-header-preline {
|
|
@apply flex items-center justify-between mb-6;
|
|
}
|
|
|
|
.page-title-preline {
|
|
@apply text-2xl font-semibold text-gray-900;
|
|
}
|
|
|
|
/* Preline 统计卡片 */
|
|
.stats-card-preline {
|
|
@apply bg-white rounded-xl p-6
|
|
border border-gray-200 shadow-sm;
|
|
}
|
|
|
|
.stats-card-preline-label {
|
|
@apply text-sm font-medium text-gray-500 mb-1;
|
|
}
|
|
|
|
.stats-card-preline-value {
|
|
@apply text-3xl font-bold text-gray-900;
|
|
}
|
|
|
|
/* Preline 数据表格 */
|
|
.table-preline {
|
|
@apply w-full text-sm text-left;
|
|
}
|
|
|
|
.table-preline thead {
|
|
@apply bg-gray-50 text-gray-700 font-medium;
|
|
}
|
|
|
|
.table-preline th {
|
|
@apply px-6 py-4;
|
|
}
|
|
|
|
.table-preline td {
|
|
@apply px-6 py-4 border-b border-gray-100;
|
|
}
|
|
|
|
.table-preline tbody tr:hover {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
/* Preline 标签 */
|
|
.badge-preline {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full
|
|
text-xs font-medium;
|
|
}
|
|
|
|
.badge-preline-green {
|
|
@apply bg-green-100 text-green-800;
|
|
}
|
|
|
|
.badge-preline-blue {
|
|
@apply bg-blue-100 text-blue-800;
|
|
}
|
|
|
|
.badge-preline-gray {
|
|
@apply bg-gray-100 text-gray-800;
|
|
}
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* 工具类扩展 */
|
|
/* ============================================ */
|
|
|
|
@layer utilities {
|
|
.shadow-brutal {
|
|
box-shadow: 4px 4px 0px 0px rgba(0,0,0,1);
|
|
}
|
|
|
|
.shadow-brutal-sm {
|
|
box-shadow: 2px 2px 0px 0px rgba(0,0,0,1);
|
|
}
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* 滚动条样式 */
|
|
/* ============================================ */
|
|
|
|
/* Neobrutalism 滚动条 */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #FEF9E7;
|
|
border-left: 2px solid black;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #000;
|
|
border: 2px solid #FEF9E7;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #333;
|
|
}
|
|
|
|
/* 选中文字样式 */
|
|
::selection {
|
|
background: #FFDE59;
|
|
color: #000;
|
|
}
|