diff --git a/src/assets/images/masks/balance.svg b/src/assets/images/masks/balance.svg new file mode 100644 index 0000000..8c23f1e --- /dev/null +++ b/src/assets/images/masks/balance.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/masks/main.svg b/src/assets/images/masks/main.svg new file mode 100644 index 0000000..4c59025 --- /dev/null +++ b/src/assets/images/masks/main.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/base/BackgroundImage.tsx b/src/components/base/BackgroundImage.tsx index eb7d068..12d222f 100644 --- a/src/components/base/BackgroundImage.tsx +++ b/src/components/base/BackgroundImage.tsx @@ -35,6 +35,9 @@ export default class BackgroundImage extends Vue { render(h: CreateElement) { const body = h(components[this.theme.component ?? 'random']) - return
{ body }
+ return
+
+ { body } +
} } diff --git a/src/style/general.styl b/src/style/general.styl index 76fed9b..bac9172 100644 --- a/src/style/general.styl +++ b/src/style/general.styl @@ -12,4 +12,7 @@ transform translate(-50%, -50%) .transition-group - position: relative \ No newline at end of file + position: relative + +.background-image + mask url('../assets/images/masks/main.svg') 50% 50% / 100% 80% no-repeat border-box \ No newline at end of file diff --git a/src/style/index.styl b/src/style/index.styl index f8e3f9b..03d300a 100644 --- a/src/style/index.styl +++ b/src/style/index.styl @@ -7,7 +7,7 @@ :root --color-active #FA076C - --color-bg #13111C + --color-bg #22233D --color-green #91e60a --color-blue #04ded4 --color-unfocus rgba(255, 255, 255, .5) diff --git a/src/utils/constant.ts b/src/utils/constant.ts index e0b707b..968ef5e 100644 --- a/src/utils/constant.ts +++ b/src/utils/constant.ts @@ -9,6 +9,8 @@ import { buildInvertCheckbox } from './helper' +const background = '#22233D' + export const defaultTheme: AppTheme = { name: 'Random', component: 'random', @@ -35,7 +37,7 @@ export const AppThemes: AppTheme[] = [ component: 'sphere', color: { active: '#04ded4', - background: 'black' + background }, settings: [ pxratio(), @@ -52,7 +54,7 @@ export const AppThemes: AppTheme[] = [ component: 'planet', color: { active: '#04ded4', - background: 'black' + background }, settings: [ pxratio(), @@ -78,7 +80,7 @@ export const AppThemes: AppTheme[] = [ component: 'destruction', color: { active: '#04ded4', - background: 'black' + background: '#13122E' }, settings: [ pxratio(), @@ -93,7 +95,7 @@ export const AppThemes: AppTheme[] = [ component: 'rings', color: { active: '#04ded4', - background: 'black' + background }, settings: [ pxratio(), @@ -108,7 +110,7 @@ export const AppThemes: AppTheme[] = [ component: 'tenderness', color: { active: '#04ded4', - background: 'black' + background }, settings: [ pxratio(), @@ -121,7 +123,7 @@ export const AppThemes: AppTheme[] = [ component: 'plasma', color: { active: '#04ded4', - background: 'black' + background }, settings: [ pxratio(), @@ -135,7 +137,7 @@ export const AppThemes: AppTheme[] = [ component: 'flow', color: { active: '#04ded4', - background: 'black' + background }, settings: [ pxratio(), diff --git a/src/utils/hotkeys.ts b/src/utils/hotkeys.ts index 479f8b9..b1b1a54 100644 --- a/src/utils/hotkeys.ts +++ b/src/utils/hotkeys.ts @@ -12,6 +12,17 @@ export const hotkeys = [ PageModule.openBlock({ id: 'settings' }) } }, + { + keys: [modKey, 'f'], + title: `${prefixTitle}full-screen`, + callback: () => { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen() + } else { + document.exitFullscreen && document.exitFullscreen() + } + } + }, { keys: [modKey, 'c'], title: `${prefixTitle}open-custom`,