iczer
5 years ago
parent
98e02874ed
commit
4063a4f08a
39 changed files with 480 additions and 328 deletions
@ -0,0 +1,37 @@ |
||||
.shadow{ |
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, .35); |
||||
} |
||||
.side-menu{ |
||||
min-height: 100%; |
||||
z-index: 10; |
||||
.logo{ |
||||
height: 64px; |
||||
position: relative; |
||||
line-height: 64px; |
||||
padding-left: 24px; |
||||
-webkit-transition: all .3s; |
||||
transition: all .3s; |
||||
overflow: hidden; |
||||
background-color: @layout-trigger-background; |
||||
&.light{ |
||||
background-color: #fff; |
||||
h1{ |
||||
color: @primary-color; |
||||
} |
||||
} |
||||
h1{ |
||||
color: @menu-dark-highlight-color; |
||||
font-size: 20px; |
||||
margin: 0 0 0 12px; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
} |
||||
img{ |
||||
width: 32px; |
||||
vertical-align: middle; |
||||
} |
||||
} |
||||
} |
||||
.menu{ |
||||
padding: 16px 0; |
||||
} |
||||
@ -0,0 +1,42 @@ |
||||
.page-header{ |
||||
background: @base-bg-color; |
||||
padding: 16px 24px; |
||||
.page-header-wide{ |
||||
&.head{ |
||||
margin: auto; |
||||
max-width: 1400px; |
||||
} |
||||
&.side{ |
||||
} |
||||
.breadcrumb{ |
||||
margin-bottom: 20px; |
||||
} |
||||
.detail{ |
||||
display: flex; |
||||
.row { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
} |
||||
.avatar { |
||||
margin:0 24px 0 0; |
||||
} |
||||
.main{ |
||||
width: 100%; |
||||
.title{ |
||||
font-size: 20px; |
||||
color: @title-color; |
||||
margin-bottom: 16px; |
||||
} |
||||
.content{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
color: @text-color-second; |
||||
} |
||||
.extra{ |
||||
display: flex; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,4 +1,5 @@ |
||||
// 自定义配置，参考 ./default/setting.js，需要自定义的属性在这里配置即可
|
||||
module.exports = { |
||||
themeColor: '#13c2c2', |
||||
theme: 'night' |
||||
} |
||||
|
||||
@ -1,4 +1,5 @@ |
||||
const animates = require('./animates') |
||||
const setting = require('./setting') |
||||
const theme = require('./theme') |
||||
|
||||
module.exports = {setting, animates} |
||||
module.exports = {setting, animates, theme} |
||||
|
||||
@ -0,0 +1,64 @@ |
||||
// 亮色模式
|
||||
const light = { |
||||
'layout-body-background': '#f0f2f5', |
||||
'body-background': '#fff', |
||||
'component-background': '#fff', |
||||
'heading-color': 'rgba(0, 0, 0, 0.85)', |
||||
'text-color': 'rgba(0, 0, 0, 0.65)', |
||||
'text-color-inverse': '#fff', |
||||
'text-color-secondary': 'rgba(0, 0, 0, 0.45)', |
||||
'shadow-color': 'rgba(0, 0, 0, 0.15)', |
||||
'border-color-split': '#f0f0f0', |
||||
'background-color-light': '#fafafa', |
||||
'table-selected-row-bg': '#fafafa', |
||||
'checkbox-check-color': '#fff', |
||||
'disabled-color': 'rgba(0, 0, 0, 0.25)', |
||||
'menu-dark-color': 'rgba(1, 1, 1, 0.65)', |
||||
'menu-dark-highlight-color': '#fefefe', |
||||
'menu-dark-arrow-color': '#fefefe', |
||||
'btn-primary-color': '#fff', |
||||
} |
||||
|
||||
// 暗色模式
|
||||
const dark = { |
||||
'layout-body-background': '#f0f2f5', |
||||
'body-background': '#fff', |
||||
'component-background': '#fff', |
||||
'heading-color': 'rgba(0, 0, 0, 0.85)', |
||||
'text-color': 'rgba(0, 0, 0, 0.65)', |
||||
'text-color-inverse': '#fff', |
||||
'text-color-secondary': 'rgba(0, 0, 0, 0.45)', |
||||
'shadow-color': 'rgba(0, 0, 0, 0.15)', |
||||
'border-color-split': '#f0f0f0', |
||||
'background-color-light': '#fafafa', |
||||
'table-selected-row-bg': '#fafafa', |
||||
'checkbox-check-color': '#fff', |
||||
'disabled-color': 'rgba(0, 0, 0, 0.25)', |
||||
'menu-dark-color': 'rgba(254, 254, 254, 0.65)', |
||||
'menu-dark-highlight-color': '#fefefe', |
||||
'menu-dark-arrow-color': '#fefefe', |
||||
'btn-primary-color': '#fff', |
||||
} |
||||
|
||||
// 黑夜模式
|
||||
const night = { |
||||
'layout-body-background': '#000', |
||||
'body-background': '#141414', |
||||
'component-background': '#141414', |
||||
'heading-color': 'rgba(255, 255, 255, 0.85)', |
||||
'text-color': 'rgba(255, 255, 255, 0.85)', |
||||
'text-color-inverse': '#141414', |
||||
'text-color-secondary': 'rgba(255, 255, 255, 0.45)', |
||||
'shadow-color': 'rgba(255, 255, 255, 0.15)', |
||||
'border-color-split': '#303030', |
||||
'background-color-light': '#404040', |
||||
'table-selected-row-bg': '#404040', |
||||
'checkbox-check-color': '#141414', |
||||
'disabled-color': 'rgba(255, 255, 255, 0.25)', |
||||
'menu-dark-color': 'rgba(254, 254, 254, 0.65)', |
||||
'menu-dark-highlight-color': '#fefefe', |
||||
'menu-dark-arrow-color': '#fefefe', |
||||
'btn-primary-color': '#141414', |
||||
} |
||||
|
||||
module.exports = {light, dark, night} |
||||
@ -0,0 +1,84 @@ |
||||
.admin-header{ |
||||
padding: 0; |
||||
z-index: 2; |
||||
box-shadow: @shadow-down; |
||||
position: relative; |
||||
background: @base-bg-color; |
||||
&.dark{ |
||||
background: @header-bg-color-dark; |
||||
color: white; |
||||
} |
||||
&.night{ |
||||
.head-menu{ |
||||
background: @base-bg-color; |
||||
} |
||||
} |
||||
.admin-header-wide{ |
||||
&.head{ |
||||
max-width: 1400px; |
||||
margin: auto; |
||||
} |
||||
&.side{ |
||||
padding-right: 12px; |
||||
} |
||||
.logo { |
||||
height: 64px; |
||||
line-height: 58px; |
||||
vertical-align: top; |
||||
display: inline-block; |
||||
padding: 0 12px 0 24px; |
||||
cursor: pointer; |
||||
font-size: 20px; |
||||
color: inherit; |
||||
&.pc{ |
||||
padding: 0 12px 0 0; |
||||
} |
||||
img { |
||||
vertical-align: middle; |
||||
} |
||||
h1{ |
||||
color: inherit; |
||||
display: inline-block; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
.trigger { |
||||
font-size: 20px; |
||||
line-height: 64px; |
||||
padding: 0 24px; |
||||
cursor: pointer; |
||||
transition: color .3s; |
||||
&:hover{ |
||||
color: @primary-color; |
||||
} |
||||
} |
||||
.admin-header-menu{ |
||||
display: inline-block; |
||||
} |
||||
.admin-header-right{ |
||||
float: right; |
||||
display: flex; |
||||
color: inherit; |
||||
.header-item{ |
||||
color: inherit; |
||||
padding: 0 12px; |
||||
cursor: pointer; |
||||
align-self: center; |
||||
a{ |
||||
color: inherit; |
||||
i{ |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
} |
||||
each(@theme-list, { |
||||
&.@{value} .header-item{ |
||||
&:hover{ |
||||
@class: ~'hover-bg-color-@{value}'; |
||||
background-color: @@class; |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,59 @@ |
||||
.project-list { |
||||
.card-title { |
||||
span{ |
||||
vertical-align: middle; |
||||
&:last-child{ |
||||
margin-left: 12px; |
||||
} |
||||
} |
||||
} |
||||
.project-item { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-top: 8px; |
||||
overflow: hidden; |
||||
font-size: 12px; |
||||
color: inherit; |
||||
.group{ |
||||
color: @text-color; |
||||
flex: 1 1 0; |
||||
&:hover { |
||||
color: @primary-color; |
||||
} |
||||
} |
||||
.datetime { |
||||
color: @text-color-second; |
||||
flex: 0 0 auto; |
||||
} |
||||
} |
||||
.ant-card-meta-description { |
||||
height: 44px; |
||||
line-height: 22px; |
||||
overflow: hidden; |
||||
} |
||||
} |
||||
.item-group{ |
||||
padding: 20px 0 8px 24px; |
||||
font-size: 0; |
||||
a{ |
||||
color: inherit; |
||||
display: inline-block; |
||||
font-size: 14px; |
||||
margin-bottom: 13px; |
||||
width: 25%; |
||||
} |
||||
} |
||||
.members { |
||||
a { |
||||
display: block; |
||||
margin: 12px 0; |
||||
color: @text-color; |
||||
&:hover { |
||||
color: @primary-color; |
||||
} |
||||
.member { |
||||
vertical-align: middle; |
||||
margin-left: 12px; |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue