91 lines
2.0 KiB
CSS
91 lines
2.0 KiB
CSS
/* 自定义工具类 */
|
|
|
|
/* 引入变量文件 */
|
|
@import './variables.css';
|
|
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
|
|
.text-shadow {
|
|
text-shadow: 0 2px 4px var(--color-shadow);
|
|
}
|
|
|
|
.text-shadow-lg {
|
|
text-shadow: 0 4px 8px var(--color-shadow-lg);
|
|
}
|
|
|
|
.transition-custom {
|
|
transition: all var(--transition-custom);
|
|
}
|
|
|
|
.transition-fast {
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.transition-slow {
|
|
transition: all var(--transition-slow);
|
|
}
|
|
|
|
/* 自定义滚动条样式 */
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.scrollbar-thumb-primary {
|
|
scrollbar-color: var(--color-primary-light) var(--color-background-secondary);
|
|
}
|
|
|
|
.scrollbar-track-gray-100 {
|
|
scrollbar-track-color: var(--color-background-secondary);
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: var(--scrollbar-width);
|
|
height: var(--scrollbar-height);
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: var(--color-background-secondary);
|
|
border-radius: var(--panel-border-radius);
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background-color: var(--color-primary-light);
|
|
border-radius: var(--panel-border-radius);
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--color-primary-hover);
|
|
}
|
|
|
|
/* 响应式工具类 */
|
|
.card-hover-effect {
|
|
@apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
|
|
}
|
|
|
|
.btn-primary-effect {
|
|
@apply transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:shadow-md;
|
|
}
|
|
|
|
.backdrop-blur-sm {
|
|
backdrop-filter: blur(4px);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.backdrop-blur-md {
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.backdrop-blur-lg {
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
|
|
/* 自定义表格样式 */
|
|
.table-hover-effect {
|
|
@apply transition-colors duration-200 hover:bg-gray-50;
|
|
}
|
|
} |