xuans/Smail
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

按钮布局语法修复前检查点

Browse Source 
保存本轮桌面端操作区统一水平排列和垂直对齐的当前实现，后续仅修复 CSS 语法警告。
This commit is contained in:
smail 2026-10-16 02:42:38 +08:00
parent bbf0dc5476
commit b938b42463
2 changed files with 192 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/main-app.js
View File

@ -8,6 +8,7 @@ import { createRouteAssetRecovery, isReadOnlyRoute, isRouteAssetLoadError } from
import './styles/element-services.css'
import './assets/main.css'
import './styles/action-layout.css'
const isReservedResetPath = (pathname) => {
let decoded = pathname.trim()

191
frontend/src/styles/action-layout.css Normal file
View File

@ -0,0 +1,191 @@
/* 统一桌面端操作区：按钮横向排列、垂直居中，移动端保留页面自身布局。 */
:where(
.action-row,
.overview-actions,
.form-actions,
.row-actions,
.dialog-footer,
.recovery-dialog-actions,
.external-dialog-actions,
.relay-item-actions,
.relay-editor-actions,
.totp-actions,
.telegram-actions,
.telegram-buttons,
.telegram-callback-actions,
.wechat-buttons,
.spam-actions,
.header-actions,
.selection-actions,
.composer-actions,
.mail-detail-state-actions,
.admin-recovery-actions,
.public-recovery-actions,
.verification-actions,
.log-page-actions,
.group-toolbar,
.credential-actions,
.config-pagination,
) {
display: flex;
align-items: center;
min-width: 0;
}
:where(
.action-row,
.overview-actions,
.form-actions,
.row-actions,
.dialog-footer,
.recovery-dialog-actions,
.external-dialog-actions,
.relay-item-actions,
.relay-editor-actions,
.totp-actions,
.telegram-actions,
.telegram-buttons,
.telegram-callback-actions,
.wechat-buttons,
.spam-actions,
.header-actions,
.selection-actions,
.composer-actions,
.mail-detail-state-actions,
.admin-recovery-actions,
.public-recovery-actions,
.verification-actions,
.log-page-actions,
.group-toolbar,
.config-pagination,
) > .el-button,
:where(
.action-row,
.overview-actions,
.form-actions,
.row-actions,
.dialog-footer,
.recovery-dialog-actions,
.external-dialog-actions,
.relay-item-actions,
.relay-editor-actions,
.totp-actions,
.telegram-actions,
.telegram-buttons,
.telegram-callback-actions,
.wechat-buttons,
.spam-actions,
.header-actions,
.selection-actions,
.composer-actions,
.mail-detail-state-actions,
.admin-recovery-actions,
.public-recovery-actions,
.verification-actions,
.log-page-actions,
.group-toolbar,
.credential-actions,
.config-pagination,
) .el-button {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0;
margin-bottom: 0;
margin-left: 0 !important;
vertical-align: middle;
}
@media (min-width: 769px) {
:where(
.action-row,
.overview-actions,
.form-actions,
.row-actions,
.dialog-footer,
.recovery-dialog-actions,
.external-dialog-actions,
.relay-item-actions,
.relay-editor-actions,
.totp-actions,
.telegram-actions,
.telegram-buttons,
.telegram-callback-actions,
.wechat-buttons,
.spam-actions,
.header-actions,
.selection-actions,
.composer-actions,
.mail-detail-state-actions,
.admin-recovery-actions,
.public-recovery-actions,
.verification-actions,
.log-page-actions,
.group-toolbar,
.credential-actions,
.config-pagination,
) {
flex-direction: row;
flex-wrap: nowrap !important;
}
:where(
.action-row,
.overview-actions,
.form-actions,
.row-actions,
.dialog-footer,
.recovery-dialog-actions,
.external-dialog-actions,
.relay-item-actions,
.relay-editor-actions,
.totp-actions,
.telegram-actions,
.telegram-buttons,
.telegram-callback-actions,
.wechat-buttons,
.spam-actions,
.header-actions,
.selection-actions,
.composer-actions,
.mail-detail-state-actions,
.admin-recovery-actions,
.public-recovery-actions,
.verification-actions,
.log-page-actions,
.group-toolbar,
.credential-actions,
.config-pagination,
) > .el-button,
:where(
.action-row,
.overview-actions,
.form-actions,
.row-actions,
.dialog-footer,
.recovery-dialog-actions,
.external-dialog-actions,
.relay-item-actions,
.relay-editor-actions,
.totp-actions,
.telegram-actions,
.telegram-buttons,
.telegram-callback-actions,
.wechat-buttons,
.spam-actions,
.header-actions,
.selection-actions,
.composer-actions,
.mail-detail-state-actions,
.admin-recovery-actions,
.public-recovery-actions,
.verification-actions,
.log-page-actions,
.group-toolbar,
.credential-actions,
.config-pagination,
) .el-button {
flex: 0 0 auto;
white-space: nowrap;
}
}