/*
* 深浅色由 决定：JS 根据用户选择与系统偏好计算出
* 最终主题（'light'/'dark'）后写入该属性，本站 CSS 只认这一个值，
* 不再关心系统偏好与 MDUI layout 类的各种组合。
*/
@media (min-width:1024px) {
.mdui-drawer-body-left {
padding-left: 320px
}
.mdui-drawer-body-right {
padding-right: 320px
}
.mdui-drawer {
width: 320px;
}
.mdui-drawer-close {
-webkit-transform: translateX(-330px);
transform: translateX(-330px)
}
.mdui-drawer-close.mdui-drawer-right {
-webkit-transform: translateX(330px);
transform: translateX(330px)
}
}
/* 深色下的阴影太浅了。 */
html[data-xf-theme="dark"] .mdui-btn-raised {
-webkit-box-shadow: 0 2px 4px #000;
box-shadow: 0 2px 4px #000;
}
html[data-xf-theme="dark"] .mdui-btn-raised:hover {
-webkit-box-shadow: 0 2px 8px #000;
box-shadow: 0 2px 8px #000;
}
html[data-xf-theme="dark"] .mdui-btn-raised:active {
-webkit-box-shadow: 0 2px 16px #000;
box-shadow: 0 2px 16px #000;
}
html[data-xf-theme="dark"] .mdui-panel-item {
-webkit-box-shadow: 0 2px 4px #000;
box-shadow: 0 2px 4px #000;
}
/* 缩短面板的边距，不然信息密度太低。 */
.mdui-panel-item-header {
padding: 0 12px;
}
.mdui-panel-item-open>.mdui-panel-item-header {
height: 48px;
}
.mdui-panel-item-arrow {
top: 12px;
right: 12px;
}
.mdui-panel-item-open>.mdui-panel-item-header .mdui-panel-item-arrow {
top: 12px;
right: 12px;
}
.mdui-panel-item-open>.mdui-panel-item-body {
overflow: unset;
}
.mdui-panel-item-body {
padding: 0 12px;
}
.mdui-panel-item-title {
width: unset;
}
.mdui-select {
font-size: unset;
font-family: unset;
}
.mdui-typo hr {
height: 1px;
margin-bottom: 1.2em;
}
.mdui-block {
margin: 1rem 0;
display: block;
width: 100%;
}
div>.mdui-block:first-child {
margin-top: 0;
}
div>.mdui-block:last-child {
margin-bottom: 0;
}
.mdui-table {
border-left: none;
}
.mdui-table th,
.mdui-table td {
border-right: 1px solid rgba(0, 0, 0, .12);
padding: 12px;
}
html[data-xf-theme="dark"] .mdui-table th,
html[data-xf-theme="dark"] .mdui-table td {
border-right: 1px solid rgba(255, 255, 255, .12);
}
html[data-xf-theme="dark"] .mdui-table th:last-child,
html[data-xf-theme="dark"] .mdui-table td:last-child {
border-right: unset;
}
/* 给表格的列也加上边框。 */
.mdui-table td:first-child,
.mdui-table th:first-child {
padding-right: 12px;
padding-left: 12px;
}
.mdui-table td:last-child,
.mdui-table th:last-child {
padding-right: 12px
}
.mdui-table td:nth-child(2),
.mdui-table th:nth-child(2) {
padding-left: 12px
}
.mdui-table td:last-child,
.mdui-table th:last-child {
border-right: none;
}
.mdui-typo.mdui-typo a {
color: unset;
text-decoration: underline;
word-break: break-all;
/* 允许超长链接换行。 */
margin: 0 0 1.2em 0;
}
.mdui-typo.mdui-typo a:last-child,
.mdui-typo.mdui-typo p>a,
.mdui-typo.mdui-typo p>a:last-child {
margin: 0;
}
.mdui-typo a::before,
.mdui-typo a:focus::before,
.mdui-typo a:hover::before {
all: unset;
}
.mdui-typo a:hover {
text-decoration: none;
}
[disabled],
.disabled {
opacity: .5;
pointer-events: none;
}
.mdui-typo li p:last-child {
margin-bottom: 1.2em;
}
/* 花了一个小时也没有看懂为啥MDUI要在Drawer里强制不换行。 */
.mdui-drawer {
white-space: unset;
}
/* 明明在文档里小于600px宽度时弹出的右下角Snackbar是铺满整个底部的，但在我这里不知为啥向右偏移了8px。 */
.mdui-snackbar-bottom,
.mdui-snackbar-left-bottom,
.mdui-snackbar-right-bottom {
right: 0;
}
/* 上面规则特定性高了，导致在600px及以上时Snackbar位置被上面规则覆盖，再写一遍强调。 */
@media (min-width:600px) {
.mdui-snackbar-right-top.mdui-snackbar-right-top {
right: 24px
}
.mdui-snackbar-right-bottom.mdui-snackbar-right-bottom {
right: 24px;
}
}
/* 神秘MDUI的表格悬停颜色是纯色而不是透明色。 */
.mdui-table-hoverable tbody tr:hover {
background-color: rgba(0, 0, 0, .12);
}
html[data-xf-theme="dark"] .mdui-table-hoverable tbody tr:hover {
background-color: rgba(255, 255, 255, .12);
}