421 lines
11 KiB
CSS
421 lines
11 KiB
CSS
/* Deotaland UI 全局样式 */
|
|
|
|
/* 导入基础样式 */
|
|
@import './base.css';
|
|
|
|
/* CSS 变量定义 */
|
|
:root {
|
|
/* 主色调 */
|
|
--primary-color: #409eff;
|
|
--primary-light: #66b1ff;
|
|
--primary-dark: #3a8ee6;
|
|
--primary-lighter: #d9ecff;
|
|
|
|
/* 辅助色 */
|
|
--success-color: #67c23a;
|
|
--warning-color: #e6a23c;
|
|
--danger-color: #f56c6c;
|
|
--info-color: #909399;
|
|
|
|
/* 文字颜色 */
|
|
--text-primary: #303133;
|
|
--text-regular: #606266;
|
|
--text-secondary: #909399;
|
|
--text-placeholder: #c0c4cc;
|
|
--text-disabled: #c0c4cc;
|
|
|
|
/* 背景色 */
|
|
--bg-color: #ffffff;
|
|
--bg-light: #fafafa;
|
|
--bg-lighter: #f5f7fa;
|
|
--bg-dark: #f0f2f5;
|
|
|
|
/* 边框颜色 */
|
|
--border-color: #dcdfe6;
|
|
--border-light: #e4e7ed;
|
|
--border-lighter: #ebeef5;
|
|
--border-extra-light: #f2f6fc;
|
|
|
|
/* 阴影 */
|
|
--shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
--shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
|
--shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 12px rgba(0, 0, 0, 0.04);
|
|
|
|
/* 字体大小 */
|
|
--font-size-extra-large: 20px;
|
|
--font-size-large: 18px;
|
|
--font-size-medium: 16px;
|
|
--font-size-base: 14px;
|
|
--font-size-small: 13px;
|
|
--font-size-extra-small: 12px;
|
|
|
|
/* 间距 */
|
|
--spacing-extra-small: 4px;
|
|
--spacing-small: 8px;
|
|
--spacing-base: 16px;
|
|
--spacing-large: 24px;
|
|
--spacing-extra-large: 32px;
|
|
|
|
/* 圆角 */
|
|
--border-radius-small: 4px;
|
|
--border-radius-base: 6px;
|
|
--border-radius-large: 8px;
|
|
--border-radius-extra-large: 12px;
|
|
|
|
/* 过渡 */
|
|
--transition-duration: 0.3s;
|
|
--transition-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
|
|
/* z-index */
|
|
--z-index-dropdown: 1000;
|
|
--z-index-sticky: 1010;
|
|
--z-index-fixed: 1020;
|
|
--z-index-modal-backdrop: 1040;
|
|
--z-index-modal: 1050;
|
|
--z-index-popover: 1060;
|
|
--z-index-tooltip: 1070;
|
|
--z-index-loading: 1080;
|
|
}
|
|
|
|
/* 暗色主题 */
|
|
:root.dark {
|
|
--primary-color: #409eff;
|
|
--primary-light: #66b1ff;
|
|
--primary-dark: #3a8ee6;
|
|
--primary-lighter: #19324c;
|
|
|
|
--text-primary: #e4e7ed;
|
|
--text-regular: #cfcfcf;
|
|
--text-secondary: #a3a6ad;
|
|
--text-placeholder: #6c6e72;
|
|
--text-disabled: #585c63;
|
|
|
|
--bg-color: #141414;
|
|
--bg-light: #1f1f1f;
|
|
--bg-lighter: #262727;
|
|
--bg-dark: #0f0f0f;
|
|
|
|
--border-color: #4c4d4f;
|
|
--border-light: #414243;
|
|
--border-lighter: #363637;
|
|
--border-extra-light: #2b2b2c;
|
|
|
|
--shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
|
|
--shadow-base: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.2);
|
|
--shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* 高对比度主题 */
|
|
:root.high-contrast {
|
|
--primary-color: #0066cc;
|
|
--text-primary: #000000;
|
|
--text-regular: #000000;
|
|
--bg-color: #ffffff;
|
|
--bg-light: #ffffff;
|
|
--border-color: #000000;
|
|
}
|
|
|
|
/* 全局组件样式重置 */
|
|
.deotaland-button {
|
|
font-family: inherit;
|
|
transition: all var(--transition-duration) var(--transition-function);
|
|
}
|
|
|
|
.deotaland-card {
|
|
font-family: inherit;
|
|
transition: all var(--transition-duration) var(--transition-function);
|
|
}
|
|
|
|
.deotaland-modal {
|
|
font-family: inherit;
|
|
transition: all var(--transition-duration) var(--transition-function);
|
|
}
|
|
|
|
.deotaland-loading {
|
|
font-family: inherit;
|
|
transition: all var(--transition-duration) var(--transition-function);
|
|
}
|
|
|
|
/* 全局实用工具类 */
|
|
.text-primary {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.text-regular {
|
|
color: var(--text-regular) !important;
|
|
}
|
|
|
|
.text-secondary {
|
|
color: var(--text-secondary) !important;
|
|
}
|
|
|
|
.text-placeholder {
|
|
color: var(--text-placeholder) !important;
|
|
}
|
|
|
|
.text-success {
|
|
color: var(--success-color) !important;
|
|
}
|
|
|
|
.text-warning {
|
|
color: var(--warning-color) !important;
|
|
}
|
|
|
|
.text-danger {
|
|
color: var(--danger-color) !important;
|
|
}
|
|
|
|
.text-info {
|
|
color: var(--info-color) !important;
|
|
}
|
|
|
|
.bg-primary {
|
|
background-color: var(--primary-color) !important;
|
|
}
|
|
|
|
.bg-light {
|
|
background-color: var(--bg-light) !important;
|
|
}
|
|
|
|
.bg-lighter {
|
|
background-color: var(--bg-lighter) !important;
|
|
}
|
|
|
|
/* 边框样式 */
|
|
.border {
|
|
border: 1px solid var(--border-color) !important;
|
|
}
|
|
|
|
.border-light {
|
|
border: 1px solid var(--border-light) !important;
|
|
}
|
|
|
|
.border-lighter {
|
|
border: 1px solid var(--border-lighter) !important;
|
|
}
|
|
|
|
.border-primary {
|
|
border: 1px solid var(--primary-color) !important;
|
|
}
|
|
|
|
/* 圆角样式 */
|
|
.rounded {
|
|
border-radius: var(--border-radius-base) !important;
|
|
}
|
|
|
|
.rounded-sm {
|
|
border-radius: var(--border-radius-small) !important;
|
|
}
|
|
|
|
.rounded-lg {
|
|
border-radius: var(--border-radius-large) !important;
|
|
}
|
|
|
|
.rounded-xl {
|
|
border-radius: var(--border-radius-extra-large) !important;
|
|
}
|
|
|
|
.rounded-full {
|
|
border-radius: 9999px !important;
|
|
}
|
|
|
|
/* 阴影样式 */
|
|
.shadow {
|
|
box-shadow: var(--shadow-base) !important;
|
|
}
|
|
|
|
.shadow-sm {
|
|
box-shadow: var(--shadow-light) !important;
|
|
}
|
|
|
|
.shadow-lg {
|
|
box-shadow: var(--shadow-dark) !important;
|
|
}
|
|
|
|
/* 间距工具类 */
|
|
.m-1 { margin: var(--spacing-extra-small) !important; }
|
|
.m-2 { margin: var(--spacing-small) !important; }
|
|
.m-3 { margin: var(--spacing-base) !important; }
|
|
.m-4 { margin: var(--spacing-large) !important; }
|
|
.m-5 { margin: var(--spacing-extra-large) !important; }
|
|
|
|
.mt-1 { margin-top: var(--spacing-extra-small) !important; }
|
|
.mt-2 { margin-top: var(--spacing-small) !important; }
|
|
.mt-3 { margin-top: var(--spacing-base) !important; }
|
|
.mt-4 { margin-top: var(--spacing-large) !important; }
|
|
.mt-5 { margin-top: var(--spacing-extra-large) !important; }
|
|
|
|
.mr-1 { margin-right: var(--spacing-extra-small) !important; }
|
|
.mr-2 { margin-right: var(--spacing-small) !important; }
|
|
.mr-3 { margin-right: var(--spacing-base) !important; }
|
|
.mr-4 { margin-right: var(--spacing-large) !important; }
|
|
.mr-5 { margin-right: var(--spacing-extra-large) !important; }
|
|
|
|
.mb-1 { margin-bottom: var(--spacing-extra-small) !important; }
|
|
.mb-2 { margin-bottom: var(--spacing-small) !important; }
|
|
.mb-3 { margin-bottom: var(--spacing-base) !important; }
|
|
.mb-4 { margin-bottom: var(--spacing-large) !important; }
|
|
.mb-5 { margin-bottom: var(--spacing-extra-large) !important; }
|
|
|
|
.ml-1 { margin-left: var(--spacing-extra-small) !important; }
|
|
.ml-2 { margin-left: var(--spacing-small) !important; }
|
|
.ml-3 { margin-left: var(--spacing-base) !important; }
|
|
.ml-4 { margin-left: var(--spacing-large) !important; }
|
|
.ml-5 { margin-left: var(--spacing-extra-large) !important; }
|
|
|
|
.p-1 { padding: var(--spacing-extra-small) !important; }
|
|
.p-2 { padding: var(--spacing-small) !important; }
|
|
.p-3 { padding: var(--spacing-base) !important; }
|
|
.p-4 { padding: var(--spacing-large) !important; }
|
|
.p-5 { padding: var(--spacing-extra-large) !important; }
|
|
|
|
.pt-1 { padding-top: var(--spacing-extra-small) !important; }
|
|
.pt-2 { padding-top: var(--spacing-small) !important; }
|
|
.pt-3 { padding-top: var(--spacing-base) !important; }
|
|
.pt-4 { padding-top: var(--spacing-large) !important; }
|
|
.pt-5 { padding-top: var(--spacing-extra-large) !important; }
|
|
|
|
.pr-1 { padding-right: var(--spacing-extra-small) !important; }
|
|
.pr-2 { padding-right: var(--spacing-small) !important; }
|
|
.pr-3 { padding-right: var(--spacing-base) !important; }
|
|
.pr-4 { padding-right: var(--spacing-large) !important; }
|
|
.pr-5 { padding-right: var(--spacing-extra-large) !important; }
|
|
|
|
.pb-1 { padding-bottom: var(--spacing-extra-small) !important; }
|
|
.pb-2 { padding-bottom: var(--spacing-small) !important; }
|
|
.pb-3 { padding-bottom: var(--spacing-base) !important; }
|
|
.pb-4 { padding-bottom: var(--spacing-large) !important; }
|
|
.pb-5 { padding-bottom: var(--spacing-extra-large) !important; }
|
|
|
|
.pl-1 { padding-left: var(--spacing-extra-small) !important; }
|
|
.pl-2 { padding-left: var(--spacing-small) !important; }
|
|
.pl-3 { padding-left: var(--spacing-base) !important; }
|
|
.pl-4 { padding-left: var(--spacing-large) !important; }
|
|
.pl-5 { padding-left: var(--spacing-extra-large) !important; }
|
|
|
|
/* 字体大小工具类 */
|
|
.text-xs { font-size: var(--font-size-extra-small) !important; }
|
|
.text-sm { font-size: var(--font-size-small) !important; }
|
|
.text-base { font-size: var(--font-size-base) !important; }
|
|
.text-lg { font-size: var(--font-size-medium) !important; }
|
|
.text-xl { font-size: var(--font-size-large) !important; }
|
|
.text-2xl { font-size: var(--font-size-extra-large) !important; }
|
|
|
|
/* 字体粗细工具类 */
|
|
.font-thin { font-weight: 100 !important; }
|
|
.font-light { font-weight: 300 !important; }
|
|
.font-normal { font-weight: 400 !important; }
|
|
.font-medium { font-weight: 500 !important; }
|
|
.font-semibold { font-weight: 600 !important; }
|
|
.font-bold { font-weight: 700 !important; }
|
|
.font-extrabold { font-weight: 800 !important; }
|
|
.font-black { font-weight: 900 !important; }
|
|
|
|
/* 隐藏工具类 */
|
|
.hidden { display: none !important; }
|
|
.invisible { visibility: hidden !important; }
|
|
|
|
/* 定位工具类 */
|
|
.relative { position: relative !important; }
|
|
.absolute { position: absolute !important; }
|
|
.fixed { position: fixed !important; }
|
|
.sticky { position: sticky !important; }
|
|
|
|
/* 溢出工具类 */
|
|
.overflow-hidden { overflow: hidden !important; }
|
|
.overflow-auto { overflow: auto !important; }
|
|
.overflow-scroll { overflow: scroll !important; }
|
|
|
|
/* 透明度工具类 */
|
|
.opacity-0 { opacity: 0 !important; }
|
|
.opacity-25 { opacity: 0.25 !important; }
|
|
.opacity-50 { opacity: 0.5 !important; }
|
|
.opacity-75 { opacity: 0.75 !important; }
|
|
.opacity-100 { opacity: 1 !important; }
|
|
|
|
/* 指针事件工具类 */
|
|
.pointer-events-none { pointer-events: none !important; }
|
|
.pointer-events-auto { pointer-events: auto !important; }
|
|
|
|
/* 用户选择工具类 */
|
|
.select-none { user-select: none !important; }
|
|
.select-text { user-select: text !important; }
|
|
|
|
/* 平滑滚动 */
|
|
.smooth-scroll {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* 触摸优化 */
|
|
.touch-optimized {
|
|
touch-action: manipulation;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* 无障碍支持 */
|
|
.sr-only {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
|
|
/* Focus visible 支持 */
|
|
.focus-visible:focus {
|
|
outline: 2px solid var(--primary-color) !important;
|
|
outline-offset: 2px !important;
|
|
}
|
|
|
|
/* 媒体查询工具类 - 移动端 */
|
|
@media (max-width: 767px) {
|
|
.mobile\:hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile\:block {
|
|
display: block !important;
|
|
}
|
|
|
|
.mobile\:flex {
|
|
display: flex !important;
|
|
}
|
|
|
|
.mobile\:text-center {
|
|
text-align: center !important;
|
|
}
|
|
}
|
|
|
|
/* 媒体查询工具类 - 平板端 */
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
.tablet\:hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.tablet\:block {
|
|
display: block !important;
|
|
}
|
|
|
|
.tablet\:flex {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
/* 媒体查询工具类 - 桌面端 */
|
|
@media (min-width: 1024px) {
|
|
.desktop\:hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.desktop\:block {
|
|
display: block !important;
|
|
}
|
|
|
|
.desktop\:flex {
|
|
display: flex !important;
|
|
}
|
|
} |