ant-design/site/theme/static/common.less
信鑫-King cb528da8ed
fix: dark theme in 4.0 (#20642)
* fix: rtl direction bug

* 📝 dark theme usage docs

* fix: sketch download

* fix: theme dark

* 📝 empty image

* fix: dark form with mixture components like picker, input

* 📝 update sketch release download

* fix: remove inline-menu sub shadow
2020-01-03 19:00:01 +08:00

207 lines
3.5 KiB
Plaintext

body {
color: @site-text-color;
font-size: 14px;
font-family: @font-family;
background: @body-background;
transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
a {
transition: color 0.3s ease;
}
.main-wrapper {
position: relative;
padding: 40px 0 0;
background: @component-background;
}
.main-container {
position: relative;
min-height: 500px;
padding: 0 170px 32px 64px;
overflow: hidden;
background: @component-background;
.ant-row-rtl & {
padding: 0 64px 144px 170px;
}
}
.main-menu {
z-index: 1;
&-inner {
height: 100%;
max-height: 100vh;
overflow: hidden;
}
&:hover &-inner {
overflow-y: auto;
}
> div,
> div > div {
height: 100%;
}
}
.aside-container {
min-height: 100%;
padding-bottom: 48px;
font-family: Avenir, @font-family, sans-serif;
&.ant-menu-inline {
.ant-menu-submenu-title h4,
> .ant-menu-item,
.ant-menu-item a {
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
}
> .ant-menu-item-group > .ant-menu-item-group-title {
margin-top: 16px;
margin-bottom: 16px;
font-size: 13px;
&::after {
position: relative;
top: 12px;
display: block;
width: calc(100% - 20px);
height: 1px;
background: @border-color-split;
content: '';
}
}
> .ant-menu-item,
> .ant-menu-submenu > .ant-menu-submenu-title,
> .ant-menu-item-group > .ant-menu-item-group-title,
> .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
&.ant-menu-inline > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item {
padding-left: 40px !important;
}
// Nest Category > Type > Article
&.ant-menu-inline {
.ant-menu-item-group-title {
padding-left: 56px;
}
.ant-menu-item-group-list > .ant-menu-item {
padding-left: 80px !important;
}
}
.ant-menu-item-group:first-child {
.ant-menu-item-group-title {
margin-top: 0;
}
}
}
a[disabled] {
color: #ccc;
}
.menu-item-link-outside {
position: relative;
.anticon {
position: absolute;
top: 16px;
right: -10px;
color: @primary-color;
font-size: 12px;
opacity: 0;
transition: all 0.3s;
}
&:hover .anticon {
opacity: 1;
}
}
}
.aside-container .chinese {
margin-left: 6px;
font-weight: normal;
font-size: 12px;
opacity: 0.67;
}
.outside-link {
display: inline-block;
}
.outside-link-icon {
margin-left: 5px;
color: #aaa;
font-size: 12px;
}
// reset menu text color
.menu-site {
.ant-menu-item > a {
color: @site-text-color;
}
.ant-menu-item-selected > a,
.ant-menu-item > a:hover {
color: @primary-color;
}
}
#react-content {
height: 100%;
transition: transform 0.3s @ease-in-out-circ;
}
.page-wrapper {
width: 100%;
padding: 0;
overflow: hidden;
&-rtl {
direction: rtl;
}
}
.drawer-content {
padding: 40px 0;
}
.drawer {
z-index: 1029;
}
#_hj_feedback_container {
.path1::before {
color: @primary-color !important;
}
.path2::before {
color: @body-background !important;
}
}
.fixed-widgets {
position: fixed;
right: 32px;
bottom: 102px;
z-index: 2147483640;
cursor: pointer;
&-tooltip {
.ant-tooltip-inner {
min-width: 100px;
}
}
& > div {
display: block;
}
& &-avatar {
background-color: #fff;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
}
}