enh(frontend): 斜線デザインの調整, Mk.*CardMiniの改修 (taiyme#289)
This commit is contained in:
parent
f90ed6d3ba
commit
f68f05eb81
|
@ -34,8 +34,13 @@ defineProps<{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
--color: color(from var(--MI_THEME-error) srgb r g b / 0.25);
|
background-image: repeating-linear-gradient(
|
||||||
background-size: auto auto;
|
135deg,
|
||||||
background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, var(--color) 4px, var(--color) 14px);
|
transparent,
|
||||||
|
transparent 10px,
|
||||||
|
var(--c) 6px,
|
||||||
|
var(--c) 16px
|
||||||
|
);
|
||||||
|
--c: color(from var(--MI_THEME-error) srgb r g b / 0.25);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -85,10 +85,25 @@ function cancel() {
|
||||||
.emojiImgWrapper {
|
.emojiImgWrapper {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: 40cqh;
|
height: 40cqh;
|
||||||
background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--MI_THEME-X5) 8px, var(--MI_THEME-X5) 14px);
|
|
||||||
border-radius: var(--MI-radius);
|
border-radius: var(--MI-radius);
|
||||||
margin: auto;
|
margin: auto;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
background-image: repeating-linear-gradient(
|
||||||
|
135deg,
|
||||||
|
transparent,
|
||||||
|
transparent 10px,
|
||||||
|
var(--c) 6px,
|
||||||
|
var(--c) 16px
|
||||||
|
);
|
||||||
|
|
||||||
|
&,
|
||||||
|
html[data-color-scheme=light] & {
|
||||||
|
--c: rgb(0 0 0 / 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-color-scheme=dark] & {
|
||||||
|
--c: rgb(255 255 255 / 0.02);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.aliases {
|
.aliases {
|
||||||
|
|
|
@ -306,9 +306,14 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.embedCodeGenPreviewRoot {
|
.embedCodeGenPreviewRoot {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: var(--MI_THEME-bg);
|
background-color: var(--bg);
|
||||||
background-size: auto auto;
|
background-image: repeating-linear-gradient(
|
||||||
background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--MI_THEME-panel) 6px, var(--MI_THEME-panel) 12px);
|
135deg,
|
||||||
|
transparent,
|
||||||
|
transparent 10px,
|
||||||
|
var(--panel) 6px,
|
||||||
|
var(--panel) 16px
|
||||||
|
);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -91,9 +91,13 @@ const props = defineProps<{
|
||||||
}
|
}
|
||||||
|
|
||||||
&:global(.gray) {
|
&:global(.gray) {
|
||||||
--c: var(--MI_THEME-bg);
|
background-image: repeating-linear-gradient(
|
||||||
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
|
135deg,
|
||||||
background-size: 16px 16px;
|
transparent,
|
||||||
|
transparent 10px,
|
||||||
|
var(--MI_THEME-bg) 6px,
|
||||||
|
var(--MI_THEME-bg) 16px
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
|
|
|
@ -238,8 +238,13 @@ onMounted(() => {
|
||||||
background: var(--MI_THEME-acrylicBg);
|
background: var(--MI_THEME-acrylicBg);
|
||||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||||
backdrop-filter: var(--MI-blur, blur(15px));
|
backdrop-filter: var(--MI-blur, blur(15px));
|
||||||
background-size: auto auto;
|
background-image: repeating-linear-gradient(
|
||||||
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--MI_THEME-panel) 5px, var(--MI_THEME-panel) 10px);
|
135deg,
|
||||||
|
transparent,
|
||||||
|
transparent 10px,
|
||||||
|
var(--MI_THEME-panel) 6px,
|
||||||
|
var(--MI_THEME-panel) 16px
|
||||||
|
);
|
||||||
border-radius: 0 0 6px 6px;
|
border-radius: 0 0 6px 6px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1197,15 +1197,22 @@ defineExpose({
|
||||||
min-height: 75px;
|
min-height: 75px;
|
||||||
max-height: 150px;
|
max-height: 150px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background-size: auto auto;
|
background-image: repeating-linear-gradient(
|
||||||
|
135deg,
|
||||||
|
transparent,
|
||||||
|
transparent 10px,
|
||||||
|
var(--c) 6px,
|
||||||
|
var(--c) 16px
|
||||||
|
);
|
||||||
|
|
||||||
|
&,
|
||||||
|
html[data-color-scheme=light] & {
|
||||||
|
--c: rgb(0 0 0 / 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-color-scheme=dark] .preview {
|
html[data-color-scheme=dark] & {
|
||||||
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #0004 5px, #0004 10px);
|
--c: rgb(255 255 255 / 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-color-scheme=light] .preview {
|
|
||||||
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #00000005 5px, #00000005 10px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.targetNote {
|
.targetNote {
|
||||||
|
|
|
@ -444,14 +444,17 @@ rt {
|
||||||
box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
|
box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
||||||
--MI_THEME-bg: #F1E8DC;
|
&,
|
||||||
--MI_THEME-fg: #693410;
|
html[data-color-scheme=light] & {
|
||||||
|
--bg: #F1E8DC;
|
||||||
|
--fg: #693410;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-color-scheme=dark] ._woodenFrame {
|
html[data-color-scheme=dark] & {
|
||||||
--MI_THEME-bg: #1d0c02;
|
--bg: #1d0c02;
|
||||||
--MI_THEME-fg: #F1E8DC;
|
--fg: #F1E8DC;
|
||||||
--MI_THEME-panel: #192320;
|
--panel: #192320;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
._woodenFrameH {
|
._woodenFrameH {
|
||||||
|
|
Loading…
Reference in New Issue