2018-03-07 14:28:48 +01:00
|
|
|
<template>
|
2018-04-13 02:09:51 +02:00
|
|
|
<div id="app" :style="theme">
|
2018-03-07 14:28:48 +01:00
|
|
|
<router-view></router-view>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2018-04-13 02:09:51 +02:00
|
|
|
import { mapState } from 'vuex'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Whalebird',
|
|
|
|
computed: {
|
|
|
|
...mapState({
|
|
|
|
theme: (state) => {
|
|
|
|
return {
|
|
|
|
'--theme-background-color': state.App.theme.background_color,
|
2018-04-18 01:18:50 +02:00
|
|
|
'--theme-selected-background-color': state.App.theme.selected_background_color,
|
|
|
|
'--theme-global-header-color': state.App.theme.global_header_color,
|
|
|
|
'--theme-side-menu-color': state.App.theme.side_menu_color,
|
|
|
|
'--theme-primary-color': state.App.theme.primary_color,
|
|
|
|
'--theme-regular-color': state.App.theme.regular_color,
|
|
|
|
'--theme-secondary-color': state.App.theme.secondary_color,
|
|
|
|
'--theme-border-color': state.App.theme.border_color,
|
|
|
|
'--theme-header-menu-color': state.App.theme.header_menu_color,
|
2018-04-21 11:59:34 +02:00
|
|
|
'--theme-wrapper-mask-color': state.App.theme.wrapper_mask_color,
|
2019-04-19 16:18:36 +02:00
|
|
|
'--theme-scrollbar-color': state.App.theme.scrollbar_color,
|
2018-09-25 18:02:36 +02:00
|
|
|
'--base-font-size': `${state.App.fontSize}px`,
|
|
|
|
'--specified-fonts': state.App.defaultFonts.join(', ')
|
2018-04-13 02:09:51 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
created () {
|
|
|
|
this.$store.dispatch('App/watchShortcutsEvents')
|
2018-04-14 12:07:47 +02:00
|
|
|
this.$store.dispatch('App/loadPreferences')
|
2018-08-13 16:48:13 +02:00
|
|
|
.then((conf) => {
|
|
|
|
this.$i18n.i18next.changeLanguage(conf.language.language)
|
|
|
|
})
|
2018-04-13 02:09:51 +02:00
|
|
|
},
|
|
|
|
destroyed () {
|
|
|
|
this.$store.dispatch('App/removeShortcutsEvents')
|
2018-03-07 14:28:48 +01:00
|
|
|
}
|
2018-04-13 02:09:51 +02:00
|
|
|
}
|
2018-03-07 14:28:48 +01:00
|
|
|
</script>
|
|
|
|
|
2018-03-30 13:01:32 +02:00
|
|
|
<style lang="scss">
|
2019-04-19 17:27:57 +02:00
|
|
|
html,
|
2019-04-22 15:15:44 +02:00
|
|
|
body,
|
|
|
|
#app {
|
2018-04-13 02:09:51 +02:00
|
|
|
--theme-background-color: #ffffff;
|
2018-04-18 01:18:50 +02:00
|
|
|
--theme-selected-background-color: #f2f6fc;
|
|
|
|
--theme-global-header-color: #4a5664;
|
|
|
|
--theme-side-menu-color: #373d48;
|
2018-04-13 02:09:51 +02:00
|
|
|
--theme-primary-color: #303133;
|
2018-04-18 01:18:50 +02:00
|
|
|
--theme-regular-color: #606266;
|
|
|
|
--theme-secondary-color: #909399;
|
|
|
|
--theme-border-color: #ebeef5;
|
|
|
|
--theme-header-menu-color: #ffffff;
|
|
|
|
--theme-wrapper-mask-color: rgba(255, 255, 255, 0.7);
|
2019-04-19 16:18:36 +02:00
|
|
|
--theme-scrollbar-color: rgba(0, 0, 0, 0.4);
|
2018-04-18 01:18:50 +02:00
|
|
|
|
2018-04-13 02:09:51 +02:00
|
|
|
background-color: var(--theme-background-color);
|
|
|
|
color: var(--theme-primary-color);
|
2018-04-14 15:07:53 +02:00
|
|
|
|
|
|
|
a:link,
|
|
|
|
a:visited,
|
|
|
|
a:hover,
|
|
|
|
a:active,
|
|
|
|
a:focus {
|
|
|
|
color: #409eff;
|
|
|
|
}
|
2018-04-21 10:19:38 +02:00
|
|
|
|
2018-04-21 11:59:34 +02:00
|
|
|
--base-font-size: 14px;
|
|
|
|
|
|
|
|
font-size: var(--base-font-size);
|
2018-07-09 01:49:49 +02:00
|
|
|
|
|
|
|
.theme-popover {
|
|
|
|
background-color: #d9e1e8;
|
|
|
|
}
|
2018-09-25 18:02:36 +02:00
|
|
|
|
2018-11-19 19:11:59 +01:00
|
|
|
--specified-fonts: 'Noto Sans', 'Noto Sans CJK JP', 'Takaoゴシック', 'ヒラギノ角ゴ ProN W3', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
2018-09-25 18:02:36 +02:00
|
|
|
|
2018-09-26 14:06:53 +02:00
|
|
|
font-family: var(--specified-fonts);
|
2018-09-25 18:02:36 +02:00
|
|
|
|
|
|
|
/*
|
|
|
|
These selectors are defined in user agent stylesheet. So I override.
|
|
|
|
*/
|
|
|
|
input,
|
|
|
|
textarea,
|
|
|
|
select,
|
|
|
|
button {
|
|
|
|
font-family: var(--specified-fonts);
|
|
|
|
}
|
2019-04-19 17:27:57 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
html, body, #app, #global_header {
|
|
|
|
height: 100%;
|
|
|
|
margin: 0;
|
|
|
|
}
|
2019-04-19 16:18:36 +02:00
|
|
|
|
2019-04-19 17:27:57 +02:00
|
|
|
#app {
|
2019-04-19 16:18:36 +02:00
|
|
|
::-webkit-scrollbar {
|
|
|
|
width: 8px;
|
|
|
|
}
|
|
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
border-radius: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
background-color: var(--theme-scrollbar-color);
|
|
|
|
border-radius: 10px;
|
|
|
|
}
|
2018-04-02 16:06:15 +02:00
|
|
|
}
|
|
|
|
|
2018-04-01 05:10:54 +02:00
|
|
|
p {
|
|
|
|
margin: 8px 0;
|
|
|
|
}
|
|
|
|
|
2018-03-30 13:01:32 +02:00
|
|
|
.clearfix:after {
|
|
|
|
content:" ";
|
|
|
|
display:block;
|
|
|
|
clear:both;
|
|
|
|
}
|
2018-03-07 14:28:48 +01:00
|
|
|
</style>
|
2018-04-27 10:14:59 +02:00
|
|
|
<style src="animate.css/animate.min.css"></style>
|