mirror of https://github.com/requarks/wiki
NGPixel
3 years ago
parent
b979e50830
commit
d2a18eca3c
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,210 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
.page-actions.column.items-stretch.order-last(:class='editorStore.isActive ? `is-editor` : ``')
|
||||||
|
q-btn.q-py-md(
|
||||||
|
flat
|
||||||
|
icon='las la-pen-nib'
|
||||||
|
:color='editorStore.isActive ? `white` : `deep-orange-9`'
|
||||||
|
aria-label='Page Properties'
|
||||||
|
@click='togglePageProperties'
|
||||||
|
)
|
||||||
|
q-tooltip(anchor='center left' self='center right') Page Properties
|
||||||
|
q-btn.q-py-md(
|
||||||
|
flat
|
||||||
|
icon='las la-project-diagram'
|
||||||
|
:color='editorStore.isActive ? `white` : `deep-orange-9`'
|
||||||
|
aria-label='Page Data'
|
||||||
|
@click='togglePageData'
|
||||||
|
disable
|
||||||
|
v-if='flagsStore.experimental'
|
||||||
|
)
|
||||||
|
q-tooltip(anchor='center left' self='center right') Page Data
|
||||||
|
template(v-if='!(editorStore.isActive && editorStore.mode === `create`)')
|
||||||
|
q-separator.q-my-sm(inset)
|
||||||
|
q-btn.q-py-sm(
|
||||||
|
flat
|
||||||
|
icon='las la-ellipsis-h'
|
||||||
|
:color='editorStore.isActive ? `deep-orange-2` : `grey`'
|
||||||
|
aria-label='Page Actions'
|
||||||
|
)
|
||||||
|
q-tooltip(anchor='center left' self='center right') Page Actions
|
||||||
|
q-menu(
|
||||||
|
anchor='top left'
|
||||||
|
self='top right'
|
||||||
|
auto-close
|
||||||
|
transition-show='jump-left'
|
||||||
|
)
|
||||||
|
q-list(padding, style='min-width: 225px;')
|
||||||
|
q-item(clickable)
|
||||||
|
q-item-section.items-center(avatar)
|
||||||
|
q-icon(color='deep-orange-9', name='las la-history', size='sm')
|
||||||
|
q-item-section
|
||||||
|
q-item-label View History
|
||||||
|
q-item(clickable)
|
||||||
|
q-item-section.items-center(avatar)
|
||||||
|
q-icon(color='deep-orange-9', name='las la-code', size='sm')
|
||||||
|
q-item-section
|
||||||
|
q-item-label View Source
|
||||||
|
q-item(clickable)
|
||||||
|
q-item-section.items-center(avatar)
|
||||||
|
q-icon(color='deep-orange-9', name='las la-atom', size='sm')
|
||||||
|
q-item-section
|
||||||
|
q-item-label Convert Page
|
||||||
|
q-item(clickable)
|
||||||
|
q-item-section.items-center(avatar)
|
||||||
|
q-icon(color='deep-orange-9', name='las la-magic', size='sm')
|
||||||
|
q-item-section
|
||||||
|
q-item-label Re-render Page
|
||||||
|
q-item(clickable)
|
||||||
|
q-item-section.items-center(avatar)
|
||||||
|
q-icon(color='deep-orange-9', name='las la-sun', size='sm')
|
||||||
|
q-item-section
|
||||||
|
q-item-label View Backlinks
|
||||||
|
q-space
|
||||||
|
template(v-if='!(editorStore.isActive && editorStore.mode === `create`)')
|
||||||
|
q-btn.q-py-sm(
|
||||||
|
flat
|
||||||
|
icon='las la-copy'
|
||||||
|
:color='editorStore.isActive ? `deep-orange-2` : `grey`'
|
||||||
|
aria-label='Duplicate Page'
|
||||||
|
@click='duplicatePage'
|
||||||
|
)
|
||||||
|
q-tooltip(anchor='center left' self='center right') Duplicate Page
|
||||||
|
q-btn.q-py-sm(
|
||||||
|
flat
|
||||||
|
icon='las la-share'
|
||||||
|
:color='editorStore.isActive ? `deep-orange-2` : `grey`'
|
||||||
|
aria-label='Rename / Move Page'
|
||||||
|
@click='renamePage'
|
||||||
|
)
|
||||||
|
q-tooltip(anchor='center left' self='center right') Rename / Move Page
|
||||||
|
q-btn.q-py-sm(
|
||||||
|
flat
|
||||||
|
icon='las la-trash'
|
||||||
|
:color='editorStore.isActive ? `deep-orange-2` : `grey`'
|
||||||
|
aria-label='Delete Page'
|
||||||
|
@click='deletePage'
|
||||||
|
:class='editorStore.isActive ? `q-pb-md` : ``'
|
||||||
|
)
|
||||||
|
q-tooltip(anchor='center left' self='center right') Delete Page
|
||||||
|
span.page-actions-mode(v-else) {{ t('common.actions.newPage') }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useQuasar } from 'quasar'
|
||||||
|
import { computed, defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue'
|
||||||
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
|
import { useEditorStore } from 'src/stores/editor'
|
||||||
|
import { useFlagsStore } from 'src/stores/flags'
|
||||||
|
import { usePageStore } from 'src/stores/page'
|
||||||
|
import { useSiteStore } from 'src/stores/site'
|
||||||
|
|
||||||
|
// QUASAR
|
||||||
|
|
||||||
|
const $q = useQuasar()
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const editorStore = useEditorStore()
|
||||||
|
const flagsStore = useFlagsStore()
|
||||||
|
const pageStore = usePageStore()
|
||||||
|
const siteStore = useSiteStore()
|
||||||
|
|
||||||
|
// ROUTER
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
// I18N
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// METHODS
|
||||||
|
|
||||||
|
function togglePageProperties () {
|
||||||
|
siteStore.$patch({
|
||||||
|
sideDialogComponent: 'PagePropertiesDialog',
|
||||||
|
sideDialogShown: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function togglePageData () {
|
||||||
|
siteStore.$patch({
|
||||||
|
sideDialogComponent: 'PageDataDialog',
|
||||||
|
sideDialogShown: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function duplicatePage () {
|
||||||
|
$q.dialog({
|
||||||
|
component: defineAsyncComponent(() => import('../components/TreeBrowserDialog.vue')),
|
||||||
|
componentProps: {
|
||||||
|
mode: 'duplicatePage',
|
||||||
|
folderPath: '',
|
||||||
|
itemId: pageStore.id,
|
||||||
|
itemTitle: pageStore.title,
|
||||||
|
itemFileName: pageStore.path
|
||||||
|
}
|
||||||
|
}).onOk(() => {
|
||||||
|
// TODO: change route to new location
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function renamePage () {
|
||||||
|
$q.dialog({
|
||||||
|
component: defineAsyncComponent(() => import('../components/TreeBrowserDialog.vue')),
|
||||||
|
componentProps: {
|
||||||
|
mode: 'renamePage',
|
||||||
|
folderPath: '',
|
||||||
|
itemId: pageStore.id,
|
||||||
|
itemTitle: pageStore.title,
|
||||||
|
itemFileName: pageStore.path
|
||||||
|
}
|
||||||
|
}).onOk(() => {
|
||||||
|
// TODO: change route to new location
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function deletePage () {
|
||||||
|
$q.dialog({
|
||||||
|
component: defineAsyncComponent(() => import('../components/PageDeleteDialog.vue')),
|
||||||
|
componentProps: {
|
||||||
|
pageId: pageStore.id,
|
||||||
|
pageName: pageStore.title
|
||||||
|
}
|
||||||
|
}).onOk(() => {
|
||||||
|
router.replace('/')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.page-actions {
|
||||||
|
flex: 0 0 56px;
|
||||||
|
|
||||||
|
@at-root .body--light & {
|
||||||
|
background-color: $grey-3;
|
||||||
|
}
|
||||||
|
@at-root .body--dark & {
|
||||||
|
background-color: $dark-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-editor {
|
||||||
|
@at-root .body--light & {
|
||||||
|
background-color: $deep-orange-9;
|
||||||
|
}
|
||||||
|
@at-root .body--dark & {
|
||||||
|
background-color: $deep-orange-9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-mode {
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
text-orientation: mixed;
|
||||||
|
padding: 1.75rem 1rem 1.75rem 0;
|
||||||
|
color: $deep-orange-3;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,128 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
q-dialog(
|
||||||
|
v-model='siteStore.sideDialogShown'
|
||||||
|
position='right'
|
||||||
|
full-height
|
||||||
|
transition-show='jump-left'
|
||||||
|
transition-hide='jump-right'
|
||||||
|
class='floating-sidepanel'
|
||||||
|
no-shake
|
||||||
|
)
|
||||||
|
component(:is='sideDialogs[siteStore.sideDialogComponent]')
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useQuasar } from 'quasar'
|
||||||
|
import { computed, defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue'
|
||||||
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
|
import { useEditorStore } from 'src/stores/editor'
|
||||||
|
import { useFlagsStore } from 'src/stores/flags'
|
||||||
|
import { usePageStore } from 'src/stores/page'
|
||||||
|
import { useSiteStore } from 'src/stores/site'
|
||||||
|
|
||||||
|
// COMPONENTS
|
||||||
|
|
||||||
|
import LoadingGeneric from 'src/components/LoadingGeneric.vue'
|
||||||
|
|
||||||
|
const sideDialogs = {
|
||||||
|
PageDataDialog: defineAsyncComponent({
|
||||||
|
loader: () => import('src/components/PageDataDialog.vue'),
|
||||||
|
loadingComponent: LoadingGeneric
|
||||||
|
}),
|
||||||
|
PagePropertiesDialog: defineAsyncComponent({
|
||||||
|
loader: () => import('src/components/PagePropertiesDialog.vue'),
|
||||||
|
loadingComponent: LoadingGeneric
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// QUASAR
|
||||||
|
|
||||||
|
const $q = useQuasar()
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const editorStore = useEditorStore()
|
||||||
|
const flagsStore = useFlagsStore()
|
||||||
|
const pageStore = usePageStore()
|
||||||
|
const siteStore = useSiteStore()
|
||||||
|
|
||||||
|
// ROUTER
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
// I18N
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// DATA
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
showSideDialog: false,
|
||||||
|
sideDialogComponent: null,
|
||||||
|
showGlobalDialog: false,
|
||||||
|
globalDialogComponent: null,
|
||||||
|
showTagsEditBtn: false,
|
||||||
|
tagEditMode: false,
|
||||||
|
tocExpanded: ['h1-0', 'h1-1'],
|
||||||
|
tocSelected: [],
|
||||||
|
currentRating: 3
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.floating-sidepanel {
|
||||||
|
.q-dialog__inner {
|
||||||
|
right: 24px;
|
||||||
|
|
||||||
|
.q-card {
|
||||||
|
border-radius: 4px !important;
|
||||||
|
min-width: 450px;
|
||||||
|
|
||||||
|
.q-card__section {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alt-card {
|
||||||
|
@at-root .body--light & {
|
||||||
|
background-color: $grey-2;
|
||||||
|
border-top: 1px solid $grey-4;
|
||||||
|
box-shadow: inset 0 1px 0 0 #FFF, inset 0 -1px 0 0 #FFF;
|
||||||
|
border-bottom: 1px solid $grey-4;
|
||||||
|
}
|
||||||
|
@at-root .body--dark & {
|
||||||
|
background-color: $dark-4;
|
||||||
|
border-top: 1px solid lighten($dark-3, 8%);
|
||||||
|
box-shadow: inset 0 1px 0 0 $dark-6, inset 0 -1px 0 0 $dark-6;
|
||||||
|
border-bottom: 1px solid lighten($dark-3, 8%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-quickaccess {
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 4px !important;
|
||||||
|
background-color: rgba(0,0,0,.75);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
color: #FFF;
|
||||||
|
position: fixed;
|
||||||
|
right: 486px;
|
||||||
|
top: 74px;
|
||||||
|
z-index: -1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: 0 0 5px 0 rgba(0,0,0,.5) !important;
|
||||||
|
|
||||||
|
@at-root .q-transition--jump-left-enter-active & {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@at-root .q-transition--jump-right-leave-active & {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,173 @@
|
|||||||
|
<template lang='pug'>
|
||||||
|
.welcome
|
||||||
|
.welcome-bg
|
||||||
|
.welcome-content
|
||||||
|
.welcome-logo
|
||||||
|
img(src='/_assets/logo-wikijs.svg')
|
||||||
|
.welcome-title {{t('welcome.title')}}
|
||||||
|
.welcome-subtitle {{t('welcome.subtitle')}}
|
||||||
|
.welcome-actions
|
||||||
|
q-btn(
|
||||||
|
push
|
||||||
|
color='primary'
|
||||||
|
:label='t(`welcome.createHome`)'
|
||||||
|
icon='las la-plus'
|
||||||
|
no-caps
|
||||||
|
)
|
||||||
|
q-menu.translucent-menu(
|
||||||
|
auto-close
|
||||||
|
anchor='top left'
|
||||||
|
self='bottom left'
|
||||||
|
)
|
||||||
|
q-list(padding)
|
||||||
|
q-item(
|
||||||
|
clickable
|
||||||
|
@click='createHomePage(`wysiwyg`)'
|
||||||
|
v-if='siteStore.editors.wysiwyg'
|
||||||
|
)
|
||||||
|
blueprint-icon(icon='google-presentation')
|
||||||
|
q-item-section.q-pr-sm Using the Visual Editor
|
||||||
|
q-item-section(side): q-icon(name='mdi-chevron-right')
|
||||||
|
q-item(
|
||||||
|
clickable
|
||||||
|
@click='createHomePage(`markdown`)'
|
||||||
|
v-if='siteStore.editors.markdown'
|
||||||
|
)
|
||||||
|
blueprint-icon(icon='markdown')
|
||||||
|
q-item-section.q-pr-sm Using the Markdown Editor
|
||||||
|
q-item-section(side): q-icon(name='mdi-chevron-right')
|
||||||
|
q-item(
|
||||||
|
clickable
|
||||||
|
@click='createHomePage(`asciidoc`)'
|
||||||
|
v-if='siteStore.editors.asciidoc'
|
||||||
|
)
|
||||||
|
blueprint-icon(icon='asciidoc')
|
||||||
|
q-item-section.q-pr-sm Using the AsciiDoc Editor
|
||||||
|
q-item-section(side): q-icon(name='mdi-chevron-right')
|
||||||
|
q-btn(
|
||||||
|
push
|
||||||
|
color='primary'
|
||||||
|
:label='t(`welcome.admin`)'
|
||||||
|
icon='las la-cog'
|
||||||
|
no-caps
|
||||||
|
@click='loadAdmin'
|
||||||
|
)
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useMeta, useQuasar } from 'quasar'
|
||||||
|
|
||||||
|
import { useSiteStore } from 'src/stores/site'
|
||||||
|
import { usePageStore } from 'src/stores/page'
|
||||||
|
|
||||||
|
// QUASAR
|
||||||
|
|
||||||
|
const $q = useQuasar()
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const pageStore = usePageStore()
|
||||||
|
const siteStore = useSiteStore()
|
||||||
|
|
||||||
|
// ROUTER
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
// I18N
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// META
|
||||||
|
|
||||||
|
useMeta({
|
||||||
|
title: t('welcome.title')
|
||||||
|
})
|
||||||
|
|
||||||
|
// METHODS
|
||||||
|
|
||||||
|
function createHomePage (editor) {
|
||||||
|
siteStore.overlay = ''
|
||||||
|
pageStore.pageCreate({ editor, locale: 'en', path: '' })
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadAdmin () {
|
||||||
|
siteStore.overlay = ''
|
||||||
|
router.push('/_admin')
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.welcome {
|
||||||
|
background: #FFF radial-gradient(ellipse, #FFF, #DDD);
|
||||||
|
color: $grey-9;
|
||||||
|
height: 100vh;
|
||||||
|
border: 10px solid #EEE;
|
||||||
|
border-radius: 25px !important;
|
||||||
|
|
||||||
|
&-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 320px;
|
||||||
|
height: 320px;
|
||||||
|
background: linear-gradient(0, #FFF 50%, $blue-5 50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(100px);
|
||||||
|
transform: translate(-50%, -55%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 90vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-logo {
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
> img {
|
||||||
|
height: 200px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-title {
|
||||||
|
font-size: 4rem;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 4rem;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
@media (max-width: $breakpoint-md-max) {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
line-height: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-subtitle {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: $blue-7;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-actions {
|
||||||
|
margin-top: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
> .q-btn {
|
||||||
|
margin: 0 5px 5px 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,113 +0,0 @@
|
|||||||
<template lang='pug'>
|
|
||||||
.welcome
|
|
||||||
.welcome-bg
|
|
||||||
.welcome-content
|
|
||||||
.welcome-logo
|
|
||||||
img(src='/_assets/logo-wikijs.svg')
|
|
||||||
.welcome-title {{t('welcome.title')}}
|
|
||||||
.welcome-subtitle {{t('welcome.subtitle')}}
|
|
||||||
.welcome-actions
|
|
||||||
q-btn(
|
|
||||||
push
|
|
||||||
color='primary'
|
|
||||||
:label='t(`welcome.createHome`)'
|
|
||||||
icon='las la-plus'
|
|
||||||
no-caps
|
|
||||||
href='/_edit'
|
|
||||||
)
|
|
||||||
q-btn(
|
|
||||||
push
|
|
||||||
color='primary'
|
|
||||||
:label='t(`welcome.admin`)'
|
|
||||||
icon='las la-cog'
|
|
||||||
no-caps
|
|
||||||
to='/_admin'
|
|
||||||
)
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import { useMeta } from 'quasar'
|
|
||||||
|
|
||||||
// I18N
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
// META
|
|
||||||
|
|
||||||
useMeta({
|
|
||||||
title: t('welcome.title')
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.welcome {
|
|
||||||
background: $dark-6 radial-gradient(ellipse, $dark-4, $dark-6);
|
|
||||||
color: #FFF;
|
|
||||||
height: 100vh;
|
|
||||||
|
|
||||||
&-bg {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 320px;
|
|
||||||
height: 320px;
|
|
||||||
background: linear-gradient(0, $purple-6 50%, $blue-9 50%);
|
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(80px);
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&-content {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 90vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-logo {
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
> img {
|
|
||||||
height: 200px;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
font-size: 4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 4rem;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
@media (max-width: $breakpoint-md-max) {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
line-height: 2.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-subtitle {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: $purple-2;
|
|
||||||
line-height: 1.2rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-actions {
|
|
||||||
margin-top: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
> .q-btn {
|
|
||||||
margin: 0 5px 5px 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue