usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

enh(frontend): 斜線デザインの調整, Mk.*CardMiniの改修 (taiyme#289)

This commit is contained in:
kakkokari-gtyih 2024-11-02 20:46:51 +09:00
parent f90ed6d3ba
commit f68f05eb81
7 changed files with 75 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
idea/MkDisableSection.vue
View File

@ -34,8 +34,13 @@ defineProps<{
width: 100%;
height: 100%;
cursor: not-allowed;
--color: color(from var(--MI_THEME-error) srgb r g b / 0.25);
background-size: auto auto;
background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, var(--color) 4px, var(--color) 14px);
background-image: repeating-linear-gradient(
135deg,
transparent,
transparent 10px,
var(--c) 6px,
var(--c) 16px
);
--c: color(from var(--MI_THEME-error) srgb r g b / 0.25);
}
</style>

17
packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
View File

@ -85,10 +85,25 @@ function cancel() {
.emojiImgWrapper {
max-width: 100%;
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);
margin: auto;
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 {

11
packages/frontend/src/components/MkEmbedCodeGenDialog.vue
View File

@ -306,9 +306,14 @@ onUnmounted(() => {
.embedCodeGenPreviewRoot {
position: relative;
background-color: var(--MI_THEME-bg);
background-size: auto auto;
background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--MI_THEME-panel) 6px, var(--MI_THEME-panel) 12px);
background-color: var(--bg);
background-image: repeating-linear-gradient(
135deg,
transparent,
transparent 10px,
var(--panel) 6px,
var(--panel) 16px
);
cursor: not-allowed;
}

10
packages/frontend/src/components/MkFlashPreview.vue
View File

@ -91,9 +91,13 @@ const props = defineProps<{
}
&:global(.gray) {
--c: var(--MI_THEME-bg);
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%);
background-size: 16px 16px;
background-image: repeating-linear-gradient(
135deg,
transparent,
transparent 10px,
var(--MI_THEME-bg) 6px,
var(--MI_THEME-bg) 16px
);
}
@media (max-width: 700px) {

9
packages/frontend/src/components/MkFolder.vue
View File

@ -238,8 +238,13 @@ onMounted(() => {
background: var(--MI_THEME-acrylicBg);
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
background-size: auto auto;
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--MI_THEME-panel) 5px, var(--MI_THEME-panel) 10px);
background-image: repeating-linear-gradient(
135deg,
transparent,
transparent 10px,
var(--MI_THEME-panel) 6px,
var(--MI_THEME-panel) 16px
);
border-radius: 0 0 6px 6px;
}
</style>

19
packages/frontend/src/components/MkPostForm.vue
View File

@ -1197,15 +1197,22 @@ defineExpose({
min-height: 75px;
max-height: 150px;
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 {
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #0004 5px, #0004 10px);
html[data-color-scheme=dark] & {
--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 {

15
packages/frontend/src/style.scss
View File

@ -444,14 +444,17 @@ rt {
box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
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 {
--MI_THEME-bg: #1d0c02;
--MI_THEME-fg: #F1E8DC;
--MI_THEME-panel: #192320;
html[data-color-scheme=dark] & {
--bg: #1d0c02;
--fg: #F1E8DC;
--panel: #192320;
}
}
._woodenFrameH {