graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-30 06:03:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2023-10-31 13:46:58 +09:00
parent a35fe29ef4
commit e6e5bf1da4
3 changed files with 38 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/frontend/src/components/global/MkFooterSpacer.vue Normal file
View file

@ -0,0 +1,32 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="[$style.spacer, defaultStore.reactiveState.darkMode ? $style.dark : $style.light]"></div>
</template>
<script lang="ts" setup>
import { defaultStore } from '@/store.js';
</script>
<style lang="scss" module>
.spacer {
box-sizing: border-box;
padding: 32px;
margin: 0 auto;
height: 300px;
background-clip: content-box;
background-size: auto auto;
background-color: rgba(255, 255, 255, 0);
&.light {
background-image: repeating-linear-gradient(135deg, transparent, transparent 16px, #00000026 16px, #00000026 20px );
}
&.dark {
background-image: repeating-linear-gradient(135deg, transparent, transparent 16px, #FFFFFF16 16px, #FFFFFF16 20px );
}
}
</style>

7
packages/frontend/src/components/index.ts
View file

@ -5,7 +5,7 @@
import { App } from 'vue'; import { App } from 'vue';
import Mfm from './global/MkMisskeyFlavoredMarkdown.ts'; import Mfm from './global/MkMisskeyFlavoredMarkdown.js';
import MkA from './global/MkA.vue'; import MkA from './global/MkA.vue';
import MkAcct from './global/MkAcct.vue'; import MkAcct from './global/MkAcct.vue';
import MkAvatar from './global/MkAvatar.vue'; import MkAvatar from './global/MkAvatar.vue';
@ -16,13 +16,14 @@ import MkUserName from './global/MkUserName.vue';
import MkEllipsis from './global/MkEllipsis.vue'; import MkEllipsis from './global/MkEllipsis.vue';
import MkTime from './global/MkTime.vue'; import MkTime from './global/MkTime.vue';
import MkUrl from './global/MkUrl.vue'; import MkUrl from './global/MkUrl.vue';
import I18n from './global/i18n'; import I18n from './global/i18n.js';
import RouterView from './global/RouterView.vue'; import RouterView from './global/RouterView.vue';
import MkLoading from './global/MkLoading.vue'; import MkLoading from './global/MkLoading.vue';
import MkError from './global/MkError.vue'; import MkError from './global/MkError.vue';
import MkAd from './global/MkAd.vue'; import MkAd from './global/MkAd.vue';
import MkPageHeader from './global/MkPageHeader.vue'; import MkPageHeader from './global/MkPageHeader.vue';
import MkSpacer from './global/MkSpacer.vue'; import MkSpacer from './global/MkSpacer.vue';
import MkFooterSpacer from './global/MkFooterSpacer.vue';
import MkStickyContainer from './global/MkStickyContainer.vue'; import MkStickyContainer from './global/MkStickyContainer.vue';
export default function(app: App) { export default function(app: App) {
@ -50,6 +51,7 @@ export const components = {
MkAd: MkAd, MkAd: MkAd,
MkPageHeader: MkPageHeader, MkPageHeader: MkPageHeader,
MkSpacer: MkSpacer, MkSpacer: MkSpacer,
MkFooterSpacer: MkFooterSpacer,
MkStickyContainer: MkStickyContainer, MkStickyContainer: MkStickyContainer,
}; };
@ -73,6 +75,7 @@ declare module '@vue/runtime-core' {
MkAd: typeof MkAd; MkAd: typeof MkAd;
MkPageHeader: typeof MkPageHeader; MkPageHeader: typeof MkPageHeader;
MkSpacer: typeof MkSpacer; MkSpacer: typeof MkSpacer;
MkFooterSpacer: typeof MkFooterSpacer;
MkStickyContainer: typeof MkStickyContainer; MkStickyContainer: typeof MkStickyContainer;
} }
} }

1
packages/frontend/src/pages/settings/index.vue
View file

@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</MkSpacer> </MkSpacer>
<MkFooterSpacer/>
</mkstickycontainer> </mkstickycontainer>
</template> </template>