mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:18:34 +08:00
253 lines
6.6 KiB
SCSS
253 lines
6.6 KiB
SCSS
// dark 主题
|
|
// 参考: https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/
|
|
|
|
$ns: 'dark-';
|
|
|
|
$orange: #ff9f0b;
|
|
$yellow: #ffd609;
|
|
$green: #32d74b;
|
|
$turquoise: #00d1b2;
|
|
$cyan: #17a2b8;
|
|
$blue: #0983ff;
|
|
$purple: #bf5af2;
|
|
$red: #dc3545;
|
|
|
|
$primary: $blue;
|
|
$info: #2296f3;
|
|
$success: $green;
|
|
$warning: $orange;
|
|
$danger: $red;
|
|
$light: #3a3a3a;
|
|
$dark: #1e1f22;
|
|
$black: #141316;
|
|
|
|
$text-color: rgb(243, 241, 241);
|
|
|
|
$text--muted-color: #6c6c6c;
|
|
$text--loud-color: lighten($text-color, 10%);
|
|
|
|
$background: #333538;
|
|
$background-head: #191c22;
|
|
|
|
$body-bg: $background;
|
|
$Page-aside-bg: #3c3c3c;
|
|
$Panel-bg: #302d2a;
|
|
$borderColor: $black;
|
|
$link-color: $info;
|
|
|
|
$borderColor: #656565;
|
|
|
|
$Button--default-bg: $black;
|
|
$Calendar-btnCancel-bg: $background-head;
|
|
$Calendar-cell-bg: $Panel-bg;
|
|
|
|
$Card-bg: $Panel-bg;
|
|
$Card-onModified-bg: $dark;
|
|
$Card-onModified-color: $text-color;
|
|
$Card-onChecked-bg: $black;
|
|
$Card-onChecked-color: $text-color;
|
|
$Card-actions-onHover-bg: $dark;
|
|
$Card-actions-onHover-color: $text-color;
|
|
|
|
$Checkbox-gb: linear-gradient(#515151, #4b4b4b);
|
|
$Checkbox-onHover-color: $blue;
|
|
$ColorPicker-bg: $background;
|
|
$DatePicker-bg: $background;
|
|
$DatePicker-header-select-borderColor: $background;
|
|
$DropDown-menu-bg: $background;
|
|
$Fieldset-legend-bgColor: $background;
|
|
|
|
$Form-input-bg: #3c3c3c;
|
|
|
|
$Form-input-addOnBg: $Form-input-bg;
|
|
$Form-input-color: $text-color;
|
|
$Form-input-onDisabled-bg: $Panel-bg;
|
|
$Form-select-bg: $background;
|
|
$Form-select-menu-bg: $background;
|
|
$Form-select-onHover-bg: $background-head;
|
|
$Form-selectValue-bg: $Panel-bg;
|
|
$Form-selectValue-color: $text-color;
|
|
|
|
$TreeSelect-popover-bg: $Panel-bg;
|
|
|
|
$IconPicker-tab-onActive-bg: $background;
|
|
$InputGroup-select-bg: $background;
|
|
$InputGroup-select-onFocused-bg: $Panel-bg;
|
|
$istItem-onModified-bg: $black;
|
|
|
|
$Layout-aside-bg: $background-head;
|
|
$Layout-aside-onAcitve-bg: $Panel-bg;
|
|
$Layout-aside-onHover-bg: #404040;
|
|
$Layout-aside-subList-bg: #131519;
|
|
$Layout-header-bg: $background-head;
|
|
|
|
$List-bg: $Panel-bg;
|
|
$ListControl-item-bg: $background;
|
|
$ListControl-item-onActive-before-bg: $background;
|
|
$ListItem--strip-bg: $background;
|
|
$ListItem-onChecked-bg: $black;
|
|
$ListItem-onChecked-color: $text-color;
|
|
$ListItem-onModified-color: $text-color;
|
|
|
|
$Number-handler-bg: $background;
|
|
|
|
$Panel--default-bg: linear-gradient(#524e48, #423e3a);
|
|
$Panel-footerBg: linear-gradient(#524e48, #423e3a);
|
|
$PopOver-bg: $background;
|
|
|
|
$Table-onHover-bg: $dark;
|
|
$Table-strip-bg: $Panel-bg;
|
|
$Table-thead-bg: #2f2f2f;
|
|
$Table-onChecked-bg: $black;
|
|
$Table-onChecked-color: $text-color;
|
|
$Table-onModified-bg: $black;
|
|
$Table-onModified-color: $text-color;
|
|
|
|
$Tabs--card-bg: #323639;
|
|
$Tabs--card-borderTopColor: $background;
|
|
$Tabs--card-onActive-bg: $Panel-bg;
|
|
$Tabs--radio-bg: $Panel-bg;
|
|
$Tabs-content-bg: $Panel-bg;
|
|
$Tabs-onActive-bg: $Panel-bg;
|
|
$Tabs-onActive-borderColor: $borderColor;
|
|
$Tabs-onActive-color: lighten($text-color, 10%);
|
|
$Tabs-onHover-borderColor: $Tabs-onActive-borderColor;
|
|
|
|
$Tabs--radio-bg: $Panel-bg;
|
|
|
|
$Tooltip--attr-color: $text-color;
|
|
$TransferSelect--table-heading-bg: $background;
|
|
$Wizard-steps-bg: $background-head;
|
|
$Wizard-steps-li-onActive-arrow-bg: $Panel-bg;
|
|
$Wizard-steps-li-onActive-bg: $Panel-bg;
|
|
|
|
$Transfer-title-bg: #2f2f2f;
|
|
|
|
button[disabled],
|
|
html input[disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
input {
|
|
color: $text-color;
|
|
background: $Form-input-bg;
|
|
}
|
|
|
|
pre {
|
|
color: $text-color;
|
|
background: $background;
|
|
}
|
|
|
|
.rdtPicker {
|
|
background: $background;
|
|
}
|
|
|
|
.rdtPicker th {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.fr-toolbar {
|
|
background: $background;
|
|
}
|
|
|
|
.markdown-body {
|
|
color: $text-color;
|
|
}
|
|
|
|
@import '../functions';
|
|
@import '../variables';
|
|
@import '../mixins';
|
|
@import '../base/reset';
|
|
@import '../base/normalize';
|
|
@import '../base/typography';
|
|
|
|
@import '../layout/layout';
|
|
@import '../layout/grid';
|
|
@import '../layout/aside';
|
|
@import '../layout/hbox';
|
|
@import '../layout/vbox';
|
|
@import '../components/button'; // 这个要放在最前面
|
|
@import '../components/modal';
|
|
@import '../components/drawer';
|
|
@import '../components/tooltip';
|
|
@import '../components/popover';
|
|
@import '../components/toast';
|
|
@import '../components/alert';
|
|
@import '../components/array-input';
|
|
@import '../components/tabs';
|
|
@import '../components/nav';
|
|
@import '../components/page';
|
|
@import '../components/remark';
|
|
@import '../components/chart';
|
|
@import '../components/video';
|
|
@import '../components/audio';
|
|
@import '../components/panel';
|
|
@import '../components/service';
|
|
@import '../components/spinner';
|
|
@import '../components/button-group';
|
|
@import '../components/dropdown';
|
|
@import '../components/collapse';
|
|
@import '../components/color';
|
|
@import '../components/context-menu';
|
|
@import '../components/wizard';
|
|
@import '../components/crud';
|
|
@import '../components/table';
|
|
@import '../components/list';
|
|
@import '../components/cards';
|
|
@import '../components/card';
|
|
@import '../components/quick-edit';
|
|
@import '../components/popoverable';
|
|
@import '../components/copyable';
|
|
@import '../components/divider';
|
|
@import '../components/pagination';
|
|
@import '../components/wrapper';
|
|
@import '../components/status';
|
|
@import '../components/carousel';
|
|
@import '../components/image-gallery';
|
|
@import '../components/images';
|
|
@import '../components/input-box';
|
|
@import '../components/result-box';
|
|
@import '../components/search-box';
|
|
@import '../components/list-menu';
|
|
@import '../components/json';
|
|
|
|
@import '../components/form/fieldset';
|
|
@import '../components/form/group';
|
|
@import '../components/form/input-group';
|
|
@import '../components/form/text';
|
|
@import '../components/form/textarea';
|
|
@import '../components/form/checks';
|
|
@import '../components/form/city';
|
|
@import '../components/form/switch';
|
|
@import '../components/form/number';
|
|
@import '../components/form/select';
|
|
@import '../components/form/result-list';
|
|
@import '../components/form/list';
|
|
@import '../components/form/location';
|
|
@import '../components/form/matrix';
|
|
@import '../components/form/color';
|
|
@import '../components/form/date';
|
|
@import '../components/form/date-range';
|
|
@import '../components/form/image';
|
|
|
|
@import '../components/form/file';
|
|
@import '../components/form/editor';
|
|
@import '../components/form/rich-text';
|
|
@import '../components/form/range';
|
|
@import '../components/form/repeat';
|
|
@import '../components/form/tree';
|
|
@import '../components/form/tree-select';
|
|
@import '../components/form/combo';
|
|
@import '../components/form/sub-form';
|
|
@import '../components/form/chained-select';
|
|
@import '../components/form/picker';
|
|
@import '../components/form/qr-code';
|
|
@import '../components/form/tag';
|
|
@import '../components/form/rating';
|
|
@import '../components/form/transfer';
|
|
@import '../components/form/nested-select';
|
|
@import '../components/form/icon-picker';
|
|
@import '../components/form/form';
|
|
|
|
@import '../utilities';
|