发布页开发
This commit is contained in:
227
src/nutui-theme.scss
Normal file
227
src/nutui-theme.scss
Normal file
@@ -0,0 +1,227 @@
|
||||
// ==========================================
|
||||
// NutUI 专用黑色主题覆盖文件
|
||||
// ==========================================
|
||||
|
||||
// 引入NutUI原始样式(如果需要)
|
||||
// @import '@nutui/nutui-react-taro/dist/style.css';
|
||||
|
||||
// 全局主题变量覆盖
|
||||
$nut-primary-color: #000000 !important;
|
||||
$nut-primary-color-end: #000000 !important;
|
||||
|
||||
// 超强力样式覆盖 - 确保在所有环境下生效
|
||||
:global {
|
||||
// 页面根元素
|
||||
page,
|
||||
.taro_page,
|
||||
#app,
|
||||
.app {
|
||||
|
||||
// ===== Checkbox 复选框 =====
|
||||
.nut-checkbox {
|
||||
.nut-checkbox__icon {
|
||||
border-color: #ddd;
|
||||
|
||||
&.nut-checkbox__icon--checked {
|
||||
background-color: #000000 !important;
|
||||
border-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
color: #ffffff !important;
|
||||
border-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.nut-icon,
|
||||
.nut-icon-check {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nut-checkbox--checked {
|
||||
.nut-checkbox__icon {
|
||||
background-color: #000000 !important;
|
||||
border-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Button 按钮 =====
|
||||
.nut-button {
|
||||
&.nut-button--primary {
|
||||
background-color: #000000 !important;
|
||||
border-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: #333333 !important;
|
||||
border-color: #333333 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.nut-button--default {
|
||||
border-color: #000000 !important;
|
||||
color: #000000 !important;
|
||||
|
||||
&:active {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Switch 开关 =====
|
||||
.nut-switch {
|
||||
&.nut-switch--open,
|
||||
&.nut-switch--active {
|
||||
background-color: #000000 !important;
|
||||
|
||||
.nut-switch__button {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Radio 单选框 =====
|
||||
.nut-radio {
|
||||
.nut-radio__icon {
|
||||
&.nut-radio__icon--checked {
|
||||
background-color: #000000 !important;
|
||||
border-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.nut-radio--checked {
|
||||
.nut-radio__icon {
|
||||
background-color: #000000 !important;
|
||||
border-color: #000000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Input 输入框 =====
|
||||
.nut-input {
|
||||
&.nut-input--focus {
|
||||
.nut-input__input {
|
||||
border-color: #000000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Picker 选择器 =====
|
||||
.nut-picker {
|
||||
.nut-picker__confirm {
|
||||
color: #000000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Slider 滑动条 =====
|
||||
.nut-slider {
|
||||
.nut-slider__track {
|
||||
background-color: #000000 !important;
|
||||
}
|
||||
|
||||
.nut-slider__button {
|
||||
background-color: #000000 !important;
|
||||
border-color: #000000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== ActionSheet 动作面板 =====
|
||||
.nut-actionsheet {
|
||||
.nut-actionsheet__item {
|
||||
&.nut-actionsheet__item--active {
|
||||
color: #000000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Tab 标签页 =====
|
||||
.nut-tabs {
|
||||
.nut-tabs__tab {
|
||||
&.nut-tabs__tab--active {
|
||||
color: #000000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-tabs__line {
|
||||
background-color: #000000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 超强力直接覆盖 - 针对所有可能的选择器
|
||||
.nut-checkbox__icon--checked,
|
||||
.nut-checkbox-icon-checked,
|
||||
.nut-checkbox__icon.nut-checkbox__icon--checked,
|
||||
.nut-checkbox .nut-checkbox__icon--checked,
|
||||
.nut-checkbox .nut-checkbox__icon.nut-checkbox__icon--checked {
|
||||
background-color: #000000 !important;
|
||||
border-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
background: #000000 !important;
|
||||
border: 1px solid #000000 !important;
|
||||
}
|
||||
|
||||
// 针对内部图标
|
||||
.nut-checkbox__icon--checked .nut-icon,
|
||||
.nut-checkbox-icon-checked .nut-icon,
|
||||
.nut-checkbox__icon--checked::after,
|
||||
.nut-checkbox-icon-checked::after,
|
||||
.nut-checkbox__icon--checked::before,
|
||||
.nut-checkbox-icon-checked::before {
|
||||
color: #ffffff !important;
|
||||
background-color: #ffffff !important;
|
||||
border-color: #ffffff !important;
|
||||
}
|
||||
|
||||
// 针对所有可能的勾选图标
|
||||
.nut-icon-check,
|
||||
.nut-icon-checklist,
|
||||
.nut-checkbox__icon--checked .nut-icon-check,
|
||||
.nut-checkbox-icon-checked .nut-icon-check {
|
||||
color: #ffffff !important;
|
||||
fill: #ffffff !important;
|
||||
}
|
||||
|
||||
// 针对 checkbox button 激活状态
|
||||
.nut-checkbox-button-active,
|
||||
.nut-checkbox-button.nut-checkbox-button-active {
|
||||
background-color: #000000 !important;
|
||||
border-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
background: #000000 !important;
|
||||
border: 1px solid #000000 !important;
|
||||
}
|
||||
|
||||
.nut-button--primary,
|
||||
.nut-button.nut-button--primary {
|
||||
background-color: #000000 !important;
|
||||
border-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
background: #000000 !important;
|
||||
border: 1px solid #000000 !important;
|
||||
}
|
||||
|
||||
.nut-switch--open,
|
||||
.nut-switch.nut-switch--open {
|
||||
background-color: #000000 !important;
|
||||
background: #000000 !important;
|
||||
}
|
||||
|
||||
.nut-radio__icon--checked,
|
||||
.nut-radio-icon-checked,
|
||||
.nut-radio .nut-radio__icon--checked {
|
||||
background-color: #000000 !important;
|
||||
border-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
background: #000000 !important;
|
||||
border: 1px solid #000000 !important;
|
||||
}
|
||||
Reference in New Issue
Block a user