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%; 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>

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

@ -83,12 +83,27 @@ function cancel() {
<style lang="scss" module> <style lang="scss" module>
.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 {

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

@ -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;
} }

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

@ -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) {

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

@ -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>

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

@ -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=dark] .preview { &,
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #0004 5px, #0004 10px); html[data-color-scheme=light] & {
} --c: rgb(0 0 0 / 0.02);
}
html[data-color-scheme=light] .preview { html[data-color-scheme=dark] & {
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #00000005 5px, #00000005 10px); --c: rgb(255 255 255 / 0.02);
}
} }
.targetNote { .targetNote {

17
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; 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 {