Revert "fix: preset setting dialog style"

This reverts commit ee888fb.
arkntools · Jul 13, 2023 · b25509b · b25509b
1 parent ee888fb
commit b25509b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 22 deletions.
diff --git a/src/views/Material/index.scss b/src/views/Material/index.scss
@@ -37,18 +37,16 @@ $highlight-colors-dark: #eee, #e6ee9c, #90caf9, #b39ddb, #fff59d;
  transition: all 0.5s;
  }
  #preset-setting {
+ overflow: visible;
  max-width: 500px;
  min-width: 320px;
- .mdui-dialog-title {
- padding: 16px 16px 0 16px;
+ .mdui-card-header {
+ height: auto;
  }
  .mdui-card-header-title {
  font-size: 24px;
  line-height: 40px;
  }
- .mdui-dialog-content {
- padding: 16px 24px;
- }
  .mdui-select {
  min-width: 60px;
  }
@@ -103,9 +101,7 @@ $highlight-colors-dark: #eee, #e6ee9c, #90caf9, #b39ddb, #fff59d;
  max-height: calc(90vh - 150px);
  max-width: 400px;
  overflow-y: auto;
- box-shadow:
- 0 5px 5px -3px rgba(0, 0, 0, 0.2),
- 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
  0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
  .ti-new-tag-input {
@@ -175,10 +171,8 @@ $highlight-colors-dark: #eee, #e6ee9c, #90caf9, #b39ddb, #fff59d;
  &.highlight {
  @for $rare from 1 through 5 {
  &[rare='#{$rare}'] {
- box-shadow:
- inset 0 0 0 3px nth($highlight-colors, $rare),
- 0 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+ box-shadow: inset 0 0 0 3px nth($highlight-colors, $rare),
+ 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
  0 1px 5px 0 rgba(0, 0, 0, 0.12);
  .gap-num {
  background-color: rgba(nth($highlight-colors, $rare), 0.5);
@@ -413,9 +407,7 @@ $highlight-colors-dark: #eee, #e6ee9c, #90caf9, #b39ddb, #fff59d;
  }
  }
  .mdui-list-item {
- transition:
- all 0.5s,
- background-color 0.3s;
+ transition: all 0.5s, background-color 0.3s;
  }
  .mdui-checkbox {
  transition: all 0.5s;
@@ -547,10 +539,8 @@ $highlight-colors-dark: #eee, #e6ee9c, #90caf9, #b39ddb, #fff59d;
  .material.highlight {
  @for $rare from 1 through 5 {
  &[rare='#{$rare}'] {
- box-shadow:
- inset 0 0 0 2px nth($highlight-colors-dark, $rare),
- 0 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+ box-shadow: inset 0 0 0 2px nth($highlight-colors-dark, $rare),
+ 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
  0 1px 5px 0 rgba(0, 0, 0, 0.12);
  .gap-num {
  background-color: rgba(nth($highlight-colors-dark, $rare), 0.25);

diff --git a/src/views/Material/index.vue b/src/views/Material/index.vue
@@ -630,16 +630,21 @@
  </div>
  <!-- /材料 -->
  <!-- 预设设置 -->
- <mdui-dialog id="preset-setting" ref="presetDialog" @closed="selectedPresetName = ''">
+ <mdui-dialog
+ id="preset-setting"
+ class="mdui-card"
+ ref="presetDialog"
+ @closed="selectedPresetName = ''"
+ >
  <template v-if="sp">
- <div class="mdui-dialog-title mdui-p-b-0">
+ <div class="mdui-card-header mdui-p-b-0">
  <avatar
  class="mdui-card-header-avatar mdui-color-grey-400 no-pe"
  :name="selectedPresetName"
  />
  <div class="mdui-card-header-title">{{ $t(`character.${selectedPresetName}`) }}</div>
  </div>
- <div class="mdui-dialog-content preset-list mdui-p-x-3">
+ <div class="mdui-card-content preset-list mdui-p-x-3">
  <!-- 精英化选框 -->
  <div class="elite-cb-list">
  <mdui-checkbox