Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge tag '2024.10.1' into feature/2024.10

Browse source
This commit is contained in:
dakkar 2024-11-08 15:52:37 +00:00
commit f079edaf3c
454 changed files with 9728 additions and 3363 deletions
Download patch file Download diff file Expand all files Collapse all files

41
packages/frontend/src/components/MkFolder.vue
View file

@ -38,9 +38,12 @@ SPDX-License-Identifier: AGPL-3.0-only
>
<KeepAlive>
<div v-show="opened">
<MkSpacer :marginMin="14" :marginMax="22">
<MkSpacer v-if="withSpacer" :marginMin="14" :marginMax="22">
<slot></slot>
</MkSpacer>
<div v-else>
<slot></slot>
</div>
<div v-if="$slots.footer" :class="$style.footer">
<slot name="footer"></slot>
</div>
@ -59,9 +62,11 @@ import { defaultStore } from '@/store.js';
const props = withDefaults(defineProps<{
defaultOpen?: boolean;
maxHeight?: number | null;
withSpacer?: boolean;
}>(), {
defaultOpen: false,
maxHeight: null,
withSpacer: true,
});
const getBgColor = (el: HTMLElement) => {
@ -113,7 +118,7 @@ function toggle() {
onMounted(() => {
const computedStyle = getComputedStyle(document.documentElement);
const parentBg = getBgColor(rootEl.value!.parentElement!);
const myBg = computedStyle.getPropertyValue('--panel');
const myBg = computedStyle.getPropertyValue('--MI_THEME-panel');
bgSame.value = parentBg === myBg;
});
</script>
@ -139,15 +144,15 @@ onMounted(() => {
width: 100%;
box-sizing: border-box;
padding: 9px 12px 9px 12px;
background: var(--folderHeaderBg);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
background: var(--MI_THEME-folderHeaderBg);
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
border-radius: var(--radius-sm);
transition: border-radius 0.3s;
&:hover {
text-decoration: none;
background: var(--folderHeaderHoverBg);
background: var(--MI_THEME-folderHeaderHoverBg);
}
&:focus-within {
@ -155,8 +160,8 @@ onMounted(() => {
}
&.active {
color: var(--accent);
background: var(--folderHeaderHoverBg);
color: var(--MI_THEME-accent);
background: var(--MI_THEME-folderHeaderHoverBg);
}
&.opened {
@ -170,7 +175,7 @@ onMounted(() => {
}
.headerLower {
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
font-size: .85em;
padding-left: 4px;
}
@ -204,13 +209,13 @@ onMounted(() => {
}
.headerTextSub {
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
font-size: .85em;
}
.headerRight {
margin-left: auto;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
white-space: nowrap;
}
@ -219,26 +224,26 @@ onMounted(() => {
}
.body {
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
container-type: inline-size;
&.bgSame {
background: var(--bg);
background: var(--MI_THEME-bg);
}
}
.footer {
position: sticky !important;
z-index: 1;
bottom: var(--stickyBottom, 0px);
bottom: var(--MI-stickyBottom, 0px);
left: 0;
padding: 12px;
background: var(--acrylicBg);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
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(--panel) 5px, var(--panel) 10px);
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--MI_THEME-panel) 5px, var(--MI_THEME-panel) 10px);
border-radius: 0 0 6px 6px;
}
</style>