msb-public
/
wiki
mirror of https://github.com/requarks/wiki
1
0
Code Issues Projects Releases Wiki Activity

primary changes

Browse Source
pull/7988/head
Michał Piasecki 4 weeks ago
parent 07aefe4268
commit 8ebf23a398
3 changed files with 615 additions and 309 deletions
Show Stats Download Patch File Download Diff File

552
client/themes/westgate/components/page.vue
Unescape View File

@ -2,13 +2,13 @@
v-app.westgate-theme(v-scroll='upBtnScroll', :dark='$vuetify.theme.dark', :class='$vuetify.rtl ? `is-rtl` : `is-ltr`')
nav-header(v-if='!printView')
v-navigation-drawer(
v-if='navMode !== `NONE` && !printView'
v-if='navMode !== `NONE` && !printView && !$vuetify.breakpoint.lgAndUp'
:class='$vuetify.theme.dark ? `grey darken-4-d4` : `primary`'
dark
app
clipped
mobile-breakpoint='600'
:temporary='$vuetify.breakpoint.smAndDown'
:temporary='!$vuetify.breakpoint.lgAndUp'
v-model='navShown'
:right='$vuetify.rtl'
class='westgate-nav-drawer'
@ -26,21 +26,18 @@
:left='!$vuetify.rtl'
small
@click='navShown = !navShown'
v-if='$vuetify.breakpoint.mdAndDown'
v-if='!$vuetify.breakpoint.lgAndUp'
v-show='!navShown'
)
v-icon mdi-menu
v-main(ref='content')
template(v-if='path !== `home`')
v-toolbar.westgate-breadcrumb-toolbar(:color='$vuetify.theme.dark ? `grey darken-4-d3` : `grey lighten-3`', flat, dense, v-if='$vuetify.breakpoint.smAndUp')
//- v-btn.pl-0(v-if='$vuetify.breakpoint.xsOnly', flat, @click='toggleNavigation')
//- v-icon(color='grey darken-2', left) menu
//- span Navigation
.westgate-reading-shell-inner.breadcrumbs-container(v-if='$vuetify.breakpoint.smAndUp')
v-breadcrumbs.breadcrumbs-nav.pl-0(
:items='breadcrumbs'
divider='/'
)
)
template(slot='item', slot-scope='props')
v-icon(v-if='props.item.path === "/"', small, @click='goHome') mdi-home
v-btn.ma-0(v-else, :href='props.item.path', small, text) {{props.item.name}}
@ -48,279 +45,252 @@
v-spacer
.caption.red--text {{$t('common:page.unpublished')}}
status-indicator.ml-3(negative, pulse)
v-divider
v-container.westgate-page-title-band.pa-0(fluid)
v-row.page-header-section(no-gutters, align-content='center')
v-col.page-col-content.is-page-header(
:offset-xl='tocPosition === `left` ? 2 : 0'
:offset-lg='tocPosition === `left` ? 3 : 0'
:xl='tocPosition === `right` ? 10 : false'
:lg='tocPosition === `right` ? 9 : false'
style='margin-top: auto; margin-bottom: auto;'
:class='$vuetify.rtl ? `pr-4` : `pl-4`'
)
.page-header-headings
.headline.westgate-page-title {{title}}
.caption.westgate-page-description {{description}}
.page-edit-shortcuts(
v-if='editShortcutsObj.editMenuBar'
:class='tocPosition === `right` ? `is-right` : ``'
)
v-btn(
v-if='editShortcutsObj.editMenuBtn'
@click='pageEdit'
depressed
small
)
v-icon.mr-2(small) mdi-pencil
span.text-none {{$t(`common:actions.edit`)}}
v-btn(
v-if='editShortcutsObj.editMenuExternalBtn'
:href='editMenuExternalUrl'
target='_blank'
depressed
small
.westgate-reading-shell-inner
v-row.page-header-section(no-gutters, align-content='center')
v-col.page-col-content.is-page-header(cols='12', style='margin-top: auto; margin-bottom: auto;', :class='$vuetify.rtl ? `pr-4` : `pl-4`')
.page-header-headings
.headline.westgate-page-title {{title}}
.caption.westgate-page-description {{description}}
.page-edit-shortcuts(
v-if='editShortcutsObj.editMenuBar'
:class='tocPosition !== `off` ? `is-right` : ``'
)
v-icon.mr-2(small) {{ editShortcutsObj.editMenuExternalIcon }}
span.text-none {{$t(`common:page.editExternal`, { name: editShortcutsObj.editMenuExternalName })}}
v-divider
v-container.westgate-page-body(fluid, grid-list-xl)
v-layout(row)
v-flex.page-col-sd(
v-if='tocPosition !== `off` && $vuetify.breakpoint.lgAndUp'
:order-xs1='tocPosition !== `right`'
:order-xs2='tocPosition === `right`'
lg3
xl2
)
v-card.page-toc-card.mb-5(v-if='tocDecoded.length')
.overline.westgate-card-title.pa-5.pb-0 {{$t('common:page.toc')}}
v-list.pb-3(dense, nav, :class='$vuetify.theme.dark ? `darken-3-d3` : ``')
template(v-for='(tocItem, tocIdx) in tocDecoded')
v-list-item(v-if='tocItem.title', @click='$vuetify.goTo(tocItem.anchor, scrollOpts)')
v-icon(color='grey', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }}
v-list-item-title.px-3 {{tocItem.title}}
//- v-divider(v-if='tocIdx < toc.length - 1 || tocItem.children.length')
template(v-for='tocSubItem in tocItem.children')
v-list-item(v-if='tocSubItem.title', @click='$vuetify.goTo(tocSubItem.anchor, scrollOpts)')
v-icon.px-3(color='grey lighten-1', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }}
v-list-item-title.px-3.caption.westgate-muted-text {{tocSubItem.title}}
//- v-divider(inset, v-if='tocIdx < toc.length - 1')
v-card.page-tags-card.mb-5(v-if='tags.length > 0')
.pa-5
.overline.westgate-card-title.pb-2 {{$t('common:page.tags')}}
v-chip.mr-1.mb-1(
label
v-for='(tag, idx) in tags'
:href='`/t/` + tag.tag'
:key='`tag-` + tag.tag'
v-btn(
v-if='editShortcutsObj.editMenuBtn'
@click='pageEdit'
depressed
small
)
v-icon(left, small) mdi-tag
span {{tag.title}}
v-chip.mr-1.mb-1(
label
:href='`/t/` + tags.map(t => t.tag).join(`/`)'
:aria-label='$t(`common:page.tagsMatching`)'
v-icon.mr-2(small) mdi-pencil
span.text-none {{$t(`common:actions.edit`)}}
v-btn(
v-if='editShortcutsObj.editMenuExternalBtn'
:href='editMenuExternalUrl'
target='_blank'
depressed
small
)
v-icon(size='20') mdi-tag-multiple
v-card.page-comments-card.mb-5(v-if='commentsEnabled && commentsPerms.read')
.pa-5
.overline.westgate-card-title.pb-2.d-flex.align-center
span {{$t('common:comments.sdTitle')}}
.d-flex
v-btn.text-none(
@click='goToComments()'
outlined
style='flex: 1 1 100%;'
small
v-icon.mr-2(small) {{ editShortcutsObj.editMenuExternalIcon }}
span.text-none {{$t(`common:page.editExternal`, { name: editShortcutsObj.editMenuExternalName })}}
v-container.westgate-page-body(fluid, grid-list-xl)
.westgate-reading-shell-inner
.westgate-reading-row(:class='readingRowClass')
aside.westgate-read-nav.westgate-inline-nav(
v-if='navMode !== `NONE` && !printView && $vuetify.breakpoint.lgAndUp'
aria-label='Site navigation'
)
vue-scroll(:ops='scrollStyle')
nav-sidebar(color='westgate-sidebar-list', :items='sidebarDecoded', :nav-mode='navMode')
.westgate-read-main.page-col-content
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions && editShortcutsObj.editFab')
template(v-slot:activator='{ on: onEditActivator }')
v-speed-dial(
v-model='pageEditFab'
direction='top'
open-on-hover
transition='scale-transition'
bottom
:right='!$vuetify.rtl'
:left='$vuetify.rtl'
fixed
dark
)
span {{$t('common:comments.viewDiscussion')}}
v-tooltip(right, v-if='commentsPerms.write')
template(v-slot:activator='{ on }')
v-btn.ml-2(
@click='goToComments(true)'
v-on='on'
outlined
small
:aria-label='$t(`common:comments.newComment`)'
)
v-icon(dense) mdi-comment-plus
span {{$t('common:comments.newComment')}}
v-card.page-author-card.mb-5
.pa-5
.overline.westgate-card-title.d-flex
span {{$t('common:page.lastEditedBy')}}
v-spacer
v-tooltip(right, v-if='isAuthenticated')
template(v-slot:activator='{ on }')
template(v-slot:activator)
v-btn.btn-animate-edit(
icon
:href='"/h/" + locale + "/" + path'
v-on='on'
x-small
v-if='hasReadHistoryPermission'
:aria-label='$t(`common:header.history`)'
)
v-icon(dense) mdi-history
span {{$t('common:header.history')}}
.page-author-card-name.body-2 {{ authorName }}
.page-author-card-date.caption.westgate-muted-text {{ updatedAt | moment('calendar') }}
//- v-card.mb-5
//- .pa-5
//- .overline.pb-2.yellow--text(:class='$vuetify.theme.dark ? `text--darken-3` : `text--darken-4`') Rating
//- .text-center
//- v-rating(
//- v-model='rating'
//- color='yellow darken-3'
//- background-color='grey lighten-1'
//- half-increments
//- hover
//- )
//- .caption.grey--text 5 votes
v-card.page-shortcuts-card(flat)
v-toolbar.westgate-shortcuts-toolbar(flat, dense)
v-spacer
//- v-tooltip(bottom)
//- template(v-slot:activator='{ on }')
//- v-btn(icon, tile, v-on='on', :aria-label='$t(`common:page.bookmark`)'): v-icon(color='grey') mdi-bookmark
//- span {{$t('common:page.bookmark')}}
v-menu(offset-y, bottom, min-width='300')
template(v-slot:activator='{ on: menu }')
v-tooltip(bottom)
template(v-slot:activator='{ on: tooltip }')
v-btn(icon, tile, v-on='{ ...menu, ...tooltip }', :aria-label='$t(`common:page.share`)'): v-icon(color='grey') mdi-share-variant
span {{$t('common:page.share')}}
social-sharing(
:url='pageUrl'
:title='title'
:description='description'
)
v-tooltip(bottom)
template(v-slot:activator='{ on }')
v-btn(icon, tile, v-on='on', @click='print', :aria-label='$t(`common:page.printFormat`)')
v-icon(:color='printView ? `primary` : `grey`') mdi-printer
span {{$t('common:page.printFormat')}}
v-spacer
v-flex.page-col-content(
xs12
:lg9='tocPosition !== `off`'
:xl10='tocPosition !== `off`'
:order-xs1='tocPosition === `right`'
:order-xs2='tocPosition !== `right`'
)
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions && editShortcutsObj.editFab')
template(v-slot:activator='{ on: onEditActivator }')
v-speed-dial(
v-model='pageEditFab'
direction='top'
open-on-hover
transition='scale-transition'
bottom
:right='!$vuetify.rtl'
:left='$vuetify.rtl'
fixed
dark
)
template(v-slot:activator)
v-btn.btn-animate-edit(
fab
color='primary'
v-model='pageEditFab'
@click='pageEdit'
v-on='onEditActivator'
:disabled='!hasWritePagesPermission'
:aria-label='$t(`common:page.editPage`)'
)
v-icon mdi-pencil
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasReadHistoryPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageHistory'
)
v-icon(size='20') mdi-history
span {{$t('common:header.history')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasReadSourcePermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageSource'
)
v-icon(size='20') mdi-code-tags
span {{$t('common:header.viewSource')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasWritePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageConvert'
)
v-icon(size='20') mdi-lightning-bolt
span {{$t('common:header.convert')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasWritePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageDuplicate'
color='primary'
v-model='pageEditFab'
@click='pageEdit'
v-on='onEditActivator'
:disabled='!hasWritePagesPermission'
:aria-label='$t(`common:page.editPage`)'
)
v-icon(size='20') mdi-content-duplicate
span {{$t('common:header.duplicate')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasManagePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageMove'
)
v-icon(size='20') mdi-content-save-move-outline
span {{$t('common:header.move')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasDeletePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
dark
v-icon mdi-pencil
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasReadHistoryPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageHistory'
)
v-icon(size='20') mdi-history
span {{$t('common:header.history')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasReadSourcePermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageSource'
)
v-icon(size='20') mdi-code-tags
span {{$t('common:header.viewSource')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasWritePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageConvert'
)
v-icon(size='20') mdi-lightning-bolt
span {{$t('common:header.convert')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasWritePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageDuplicate'
)
v-icon(size='20') mdi-content-duplicate
span {{$t('common:header.duplicate')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasManagePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageMove'
)
v-icon(size='20') mdi-content-save-move-outline
span {{$t('common:header.move')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasDeletePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
dark
small
color='red'
v-on='on'
@click='pageDelete'
)
v-icon(size='20') mdi-trash-can-outline
span {{$t('common:header.delete')}}
span {{$t('common:page.editPage')}}
v-alert.mb-5(v-if='!isPublished', color='red', outlined, icon='mdi-minus-circle', dense)
.caption {{$t('common:page.unpublishedWarning')}}
.contents(ref='container')
slot(name='contents')
div(style='margin: 20px 0;')
.westgate-page-meta
v-card.page-comments-card.mb-5.meta-card(v-if='commentsEnabled && commentsPerms.read')
.pa-5
.overline.westgate-card-title.pb-2.d-flex.align-center
span {{$t('common:comments.sdTitle')}}
.d-flex
v-btn.text-none(
@click='goToComments()'
outlined
style='flex: 1 1 100%;'
small
color='red'
v-on='on'
@click='pageDelete'
)
v-icon(size='20') mdi-trash-can-outline
span {{$t('common:header.delete')}}
span {{$t('common:page.editPage')}}
v-alert.mb-5(v-if='!isPublished', color='red', outlined, icon='mdi-minus-circle', dense)
.caption {{$t('common:page.unpublishedWarning')}}
.contents(ref='container')
slot(name='contents')
.comments-container#discussion(v-if='commentsEnabled && commentsPerms.read && !printView')
.comments-header
v-icon.mr-2(dark) mdi-comment-text-outline
span {{$t('common:comments.title')}}
.comments-main
slot(name='comments')
span {{$t('common:comments.viewDiscussion')}}
v-tooltip(right, v-if='commentsPerms.write')
template(v-slot:activator='{ on }')
v-btn.ml-2(
@click='goToComments(true)'
v-on='on'
outlined
small
:aria-label='$t(`common:comments.newComment`)'
)
v-icon(dense) mdi-comment-plus
span {{$t('common:comments.newComment')}}
v-card.page-author-card.mb-5.meta-card
.pa-5
.overline.westgate-card-title.d-flex
span {{$t('common:page.lastEditedBy')}}
v-spacer
v-tooltip(right, v-if='isAuthenticated')
template(v-slot:activator='{ on }')
v-btn.btn-animate-edit(
icon
:href='"/h/" + locale + "/" + path'
v-on='on'
x-small
v-if='hasReadHistoryPermission'
:aria-label='$t(`common:header.history`)'
)
v-icon(dense) mdi-history
span {{$t('common:header.history')}}
.page-author-card-name.body-2 {{ authorName }}
.page-author-card-date.caption.westgate-muted-text {{ updatedAt | moment('calendar') }}
v-card.page-shortcuts-card(flat).meta-card
v-toolbar.westgate-shortcuts-toolbar.westgate-meta-buttons(flat, dense)
v-menu(offset-y, bottom, min-width='300')
template(v-slot:activator='{ on: menu }')
v-tooltip(bottom)
template(v-slot:activator='{ on: tooltip }')
v-btn(icon, tile, v-on='{ ...menu, ...tooltip }', :aria-label='$t(`common:page.share`)'): v-icon(color='grey') mdi-share-variant
span {{$t('common:page.share')}}
social-sharing(
:url='pageUrl'
:title='title'
:description='description'
)
v-tooltip(bottom)
template(v-slot:activator='{ on }')
v-btn(icon, tile, v-on='on', @click='print', :aria-label='$t(`common:page.printFormat`)')
v-icon(:color='printView ? `primary` : `grey`') mdi-printer
span {{$t('common:page.printFormat')}}
.comments-container#discussion(v-if='commentsEnabled && commentsPerms.read && !printView')
.comments-header
v-icon.mr-2(dark) mdi-comment-text-outline
span {{$t('common:comments.title')}}
.comments-main
slot(name='comments')
//- TOC + tags rail (right of article; gated by tocPosition !== off in tocRailVisible)
aside.westgate-read-rail.westgate-read-rail--toc(
v-if='tocPosition !== `off` && $vuetify.breakpoint.lgAndUp'
)
v-card.page-toc-card.mb-5(v-if='tocDecoded.length')
.overline.westgate-card-title.pa-5.pb-0 {{$t('common:page.toc')}}
v-list.pb-3(dense, nav, :class='$vuetify.theme.dark ? `darken-3-d3` : ``')
template(v-for='(tocItem, tocIdx) in tocDecoded')
v-list-item(v-if='tocItem.title', @click='$vuetify.goTo(tocItem.anchor, scrollOpts)')
v-icon(color='grey', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }}
v-list-item-title.px-3 {{tocItem.title}}
template(v-for='tocSubItem in tocItem.children')
v-list-item(v-if='tocSubItem.title', @click='$vuetify.goTo(tocSubItem.anchor, scrollOpts)')
v-icon.px-3(color='grey lighten-1', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }}
v-list-item-title.px-3.caption.westgate-muted-text {{tocSubItem.title}}
.westgate-read-rail__toc-placeholder.mb-5(v-else, aria-hidden='true')
v-card.page-tags-card.mb-5(v-if='tags.length > 0')
.pa-5
.overline.westgate-card-title.pb-2 {{$t('common:page.tags')}}
v-chip.mr-1.mb-1(
label
v-for='(tag, idx) in tags'
:href='`/t/` + tag.tag'
:key='`tag-tr-` + tag.tag'
)
v-icon(left, small) mdi-tag
span {{tag.title}}
v-chip.mr-1.mb-1(
label
:href='`/t/` + tags.map(t => t.tag).join(`/`)'
:aria-label='$t(`common:page.tagsMatching`)'
)
v-icon(size='20') mdi-tag-multiple
nav-footer
notify
search-results
@ -538,11 +508,13 @@ export default {
},
pageUrl () { return window.location.href },
upBtnPosition () {
if (this.$vuetify.breakpoint.lgAndUp) {
return this.$vuetify.rtl ? `left: 24px; right: auto;` : `right: 24px; left: auto;`
}
if (this.$vuetify.breakpoint.mdAndUp) {
return this.$vuetify.rtl ? `right: 235px;` : `left: 235px;`
} else {
return this.$vuetify.rtl ? `right: 65px;` : `left: 65px;`
}
return this.$vuetify.rtl ? `right: 65px;` : `left: 65px;`
},
sidebarDecoded () {
return JSON.parse(Buffer.from(this.sidebar, 'base64').toString())
@ -568,6 +540,13 @@ export default {
} else {
return ''
}
},
readingRowClass () {
return {
'westgate-reading-row--toc-off': this.tocPosition === 'off',
'westgate-reading-row--toc-right': this.tocPosition !== 'off',
'is-rtl': this.$vuetify.rtl
}
}
},
created() {
@ -687,10 +666,12 @@ export default {
handleSideNavVisibility () {
if (window.innerWidth === this.winWidth) { return }
this.winWidth = window.innerWidth
if (this.$vuetify.breakpoint.mdAndUp) {
this.navShown = true
} else {
this.navShown = false
if (!this.$vuetify.breakpoint.lgAndUp) {
if (this.$vuetify.breakpoint.mdAndUp) {
this.navShown = true
} else {
this.navShown = false
}
}
},
goToComments (focusNewComment = false) {
@ -720,7 +701,8 @@ export default {
}
}
.page-col-sd {
.westgate-read-nav,
.westgate-read-rail--toc {
margin-top: 0;
align-self: flex-start;
position: sticky;
@ -730,10 +712,22 @@ export default {
-ms-overflow-style: none;
}
.page-col-sd::-webkit-scrollbar {
.westgate-read-nav::-webkit-scrollbar,
.westgate-read-rail--toc::-webkit-scrollbar {
display: none;
}
@media print {
.westgate-read-nav,
.westgate-read-rail--toc {
display: none !important;
}
.westgate-read-main {
max-width: none !important;
}
}
.page-header-section {
position: relative;

370
client/themes/westgate/scss/app.scss
Unescape View File

@ -37,6 +37,9 @@ $wg-font-ui: "Jost", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
$wg-font-display: "Cinzel", Georgia, "Times New Roman", serif;
$wg-font-reading: "Jost", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
$wg-read-max-width: 52rem;
$wg-breadcrumbs-max-width: 51rem;
$wg-velvet-panel: linear-gradient(
100deg,
rgba(42, 18, 34, 0.42) 0%,
@ -131,6 +134,16 @@ body,
color: #fff4dd;
}
@media only screen and (min-width: 960px) {
.v-application .v-footer {
padding-left: 0;
}
}
.breadcrumbs-container {
max-width: $wg-breadcrumbs-max-width !important;
}
/* =========================================================
GLOBAL TEXT
========================================================= */
@ -140,6 +153,7 @@ h2,
h3,
h4,
h5,
.westgate-read-rail--toc h2,
.page-col-sd h2,
.v-toolbar__title,
.contents-header,
@ -161,7 +175,8 @@ label,
.v-label,
.caption,
.subtitle-1,
.subtitle-2 {
.subtitle-2,
.v-list-item__title {
color: $wg-text-soft !important;
font-family: $wg-font-reading !important;
}
@ -216,8 +231,6 @@ nav {
.nav-header .nav-header-inner,
.nav-header .v-toolbar__content,
.nav-header .v-toolbar__extension {
background:
linear-gradient(90deg, rgba(44, 18, 36, 0.34), rgba(17, 15, 22, 0.96) 34%, rgba(12, 11, 16, 0.98)) !important;
border-color: rgba(194, 163, 90, 0.16) !important;
}
@ -284,7 +297,6 @@ nav {
}
.v-text-field.v-text-field--solo .v-input__slot {
min-height: 42px !important;
background: rgba(10, 9, 13, 0.56) !important;
border: 1px solid rgba(194, 163, 90, 0.16) !important;
border-radius: 5px !important;
@ -294,6 +306,22 @@ nav {
.v-text-field.v-text-field--solo fieldset {
border: 0 !important;
}
.v-text-field.v-text-field--solo input,
.v-text-field.v-text-field--solo textarea {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.v-text-field.v-text-field--solo input:focus,
.v-text-field.v-text-field--solo textarea:focus,
.v-text-field.v-text-field--solo.v-input--is-focused input {
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
}
.v-toolbar__title,
@ -306,6 +334,7 @@ header .title {
.v-navigation-drawer,
aside,
.page-col-sd,
.westgate-inline-nav.westgate-read-nav,
.sidebar {
background: #121015 !important;
border-color: $wg-border !important;
@ -385,10 +414,13 @@ aside .menu li,
.page-block,
.page-section {
@include velvet-panel;
border-radius: 6px !important;
color: $wg-text-soft !important;
}
.v-sheet {
border: 0 !important;
}
.v-card:hover,
.card:hover,
.page-block:hover,
@ -398,6 +430,7 @@ aside .menu li,
.westgate-theme {
.page-col-sd .v-card:hover,
.westgate-read-rail--toc .v-card:hover:not(.page-toc-card),
.comments-container:hover {
@include velvet-panel;
}
@ -439,6 +472,12 @@ aside .menu li,
}
}
.westgate-meta-buttons.v-toolbar .v-toolbar__content {
gap: 1rem;
justify-content: center;
align-items: center;
}
/* =========================================================
BUTTONS / CHIPS / TABS
========================================================= */
@ -660,7 +699,6 @@ blockquote,
.markdown-body blockquote {
background: rgba(35, 27, 23, 0.45) !important;
border-left: 3px solid rgba(194, 163, 90, 0.35) !important;
border-radius: 6px !important;
padding: 0.75rem 0.9rem !important;
color: #d9cec0 !important;
}
@ -671,7 +709,6 @@ code,
background: #1b171d !important;
color: $wg-link-hover !important;
padding: 0.12rem 0.35rem !important;
border-radius: 4px !important;
}
pre,
@ -700,7 +737,6 @@ pre,
.markdown-body img,
.contents img {
border: 1px solid rgba(194, 163, 90, 0.14);
border-radius: 6px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}
@ -709,7 +745,6 @@ pre,
kbd {
background: linear-gradient(to bottom, #211b23, #151219) !important;
border: 1px solid rgba(194, 163, 90, 0.22) !important;
border-radius: 4px;
color: $wg-link-hover !important;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}
@ -723,9 +758,9 @@ kbd {
.page-toc,
.nav-toc,
.contents-sidebar,
.page-col-sd .v-card {
.page-col-sd .v-card,
.westgate-read-rail--toc .v-card {
@include velvet-panel;
border-radius: 6px !important;
}
.toc a,
@ -781,13 +816,16 @@ kbd {
DIALOGS / MENUS
========================================================= */
.v-sheet.v-card {
border-radius: 0 !important;
}
.v-menu__content,
.v-dialog,
.v-dialog > .v-card,
.v-sheet.v-card,
.v-menu__content .v-list {
@include velvet-panel;
border-radius: 6px !important;
color: $wg-text-soft !important;
}
@ -834,7 +872,6 @@ hr,
.admin-area .v-card,
.page-admin .v-card {
@include velvet-panel;
border-radius: 6px !important;
}
.login-screen .headline,
@ -895,7 +932,6 @@ hr,
&-container {
@include velvet-panel;
border-radius: 6px;
padding: 14px;
}
@ -1035,6 +1071,152 @@ hr,
}
}
/* =========================================================
VISUAL EDITOR (CKEDITOR) — WESTGATE SURFACES
Stock CKEditor uses light grey “paper”; Westgate typography is
light-on-dark like the read view. Align surfaces to the page panel
so WYSIWYG type stays readable without changing fonts or colors.
========================================================= */
.editor-ckeditor {
background: transparent !important;
.ck.ck-toolbar {
background:
$wg-silk-sheen,
linear-gradient(180deg, rgba(24, 21, 30, 0.98), rgba(14, 12, 18, 0.99)) !important;
border: 0 !important;
border-bottom: 1px solid $wg-velvet-border !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
color: $wg-text-soft !important;
}
.ck.ck-toolbar .ck-toolbar__separator {
background: rgba(194, 163, 90, 0.12) !important;
}
.ck.ck-toolbar .ck-icon {
color: rgba(216, 200, 160, 0.82) !important;
}
.ck.ck-toolbar .ck-button:not(.ck-disabled):hover,
.ck.ck-toolbar a.ck-button:not(.ck-disabled):hover {
background: rgba(194, 163, 90, 0.08) !important;
}
.ck.ck-toolbar .ck-button:not(.ck-disabled):hover .ck-icon,
.ck.ck-toolbar a.ck-button:not(.ck-disabled):hover .ck-icon {
color: $wg-gold !important;
}
.ck.ck-toolbar .ck-on {
background: rgba(194, 163, 90, 0.1) !important;
color: $wg-text !important;
}
.ck.ck-toolbar .ck-on .ck-icon {
color: $wg-gold !important;
}
> .ck.ck-editor__editable {
@include velvet-panel;
border-radius: 5px !important;
color: inherit;
&.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
border-color: rgba(194, 163, 90, 0.42) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.025),
inset 0 0 34px rgba(96, 32, 68, 0.1),
0 0 0 0.18rem rgba(194, 163, 90, 0.12) !important;
}
&.ck .ck-editor__nested-editable,
.ck-widget.table td.ck-editor__nested-editable,
.ck-widget.table th.ck-editor__nested-editable {
background: rgba(18, 16, 22, 0.88) !important;
background-image: none !important;
}
&.ck .ck-editor__nested-editable.ck-editor__nested-editable_focused,
&.ck .ck-editor__nested-editable:focus,
.ck-widget.table td.ck-editor__nested-editable.ck-editor__nested-editable_focused,
.ck-widget.table th.ck-editor__nested-editable.ck-editor__nested-editable_focused {
background: rgba(26, 22, 31, 0.96) !important;
background-image: none !important;
border-color: rgba(194, 163, 90, 0.15) !important;
}
}
&-sysbar {
background: #1b1920 !important;
border-top: 1px solid rgba(194, 163, 90, 0.12) !important;
color: $wg-text-muted !important;
}
}
/* CKEditor 5 floating UI (dropdowns, balloons) is often rendered outside
`.editor-ckeditor` (e.g. on body). Westgate light-on-dark globals + stock
white panels made lists unreadable — theme panels and labels here. */
.ck.ck-balloon-panel,
.ck.ck-dropdown__panel {
@include velvet-panel;
border-radius: 4px !important;
color: $wg-text-soft !important;
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
.ck.ck-balloon-panel .ck.ck-list,
.ck.ck-dropdown__panel .ck.ck-list {
background: transparent !important;
}
.ck.ck-list__item {
background: transparent !important;
border-color: transparent !important;
color: $wg-text-soft !important;
}
.ck.ck-list__item:hover:not(.ck-disabled),
.ck.ck-list__item.ck-on {
background: rgba(194, 163, 90, 0.12) !important;
color: $wg-text !important;
}
.ck.ck-balloon-panel .ck-button,
.ck.ck-dropdown__panel .ck-button {
background: transparent !important;
border-color: transparent !important;
color: $wg-text-soft !important;
}
.ck.ck-balloon-panel .ck-button:hover:not(.ck-disabled),
.ck.ck-dropdown__panel .ck-button:hover:not(.ck-disabled) {
background: rgba(194, 163, 90, 0.1) !important;
color: $wg-text !important;
}
.ck.ck-balloon-panel .ck-button__label,
.ck.ck-dropdown__panel .ck-button__label {
color: inherit !important;
}
.ck.ck-balloon-panel .ck-input__input,
.ck.ck-dropdown__panel .ck-input__input,
.ck.ck-balloon-panel input.ck-input__input,
.ck.ck-dropdown__panel input.ck-input__input {
background: rgba(12, 10, 14, 0.85) !important;
border: 1px solid $wg-border !important;
color: $wg-text-soft !important;
}
.ck.ck-balloon-panel .ck.ck-labeled-field-view__status,
.ck.ck-dropdown__panel .ck.ck-labeled-field-view__status {
color: $wg-text-muted !important;
}
/* =========================================================
OPTIONAL WESTGATE NOTE BLOCK
========================================================= */
@ -1046,7 +1228,6 @@ hr,
padding: 10px 14px;
border-left: 3px solid $wg-gold;
background: rgba(20, 18, 25, 0.6);
border-radius: 6px;
font-size: 16px;
color: $wg-text-soft;
}
@ -1070,7 +1251,9 @@ hr,
@media (max-width: 767.98px) {
.v-navigation-drawer,
aside,
.page-col-sd {
.page-col-sd,
.westgate-inline-nav.westgate-read-nav,
.westgate-read-rail--toc {
box-shadow: none !important;
}
@ -1106,9 +1289,129 @@ hr,
.westgate-page-body {
background: transparent !important;
padding: 0.75rem 1rem 2rem !important;
}
.westgate-reading-shell-inner {
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
max-width: min(96vw, 1420px);
padding-left: 0.35rem;
padding-right: 0.35rem;
width: 100%;
}
.westgate-reading-shell--crumbs .westgate-reading-shell-inner {
padding-left: 1rem;
padding-right: 1rem;
}
.westgate-reading-row {
align-items: flex-start;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.85rem 1.15rem;
justify-content: center;
width: 100%;
&.is-rtl {
flex-direction: row-reverse;
}
@media (max-width: 1263.98px) {
flex-wrap: wrap;
> .layout {
align-items: flex-start;
.westgate-read-main {
flex: 1 1 100%;
max-width: none;
}
}
}
.westgate-read-main.page-col-content {
flex: 1 1 $wg-read-max-width;
max-width: $wg-read-max-width;
min-width: 0;
.westgate-reading-row--toc-off & {
flex: 1 1 auto;
max-width: $wg-read-max-width;
}
}
.westgate-inline-nav.westgate-read-nav {
background:
linear-gradient(to bottom, #151219, #100e14 72%, #0d0b10) !important;
border: 1px solid rgba(194, 163, 90, 0.09);
box-sizing: border-box;
flex: 0 0 auto;
overflow: hidden;
padding: 0;
width: min(15.75rem, 26vw);
}
.westgate-read-rail--toc {
box-sizing: border-box;
flex: 0 0 auto;
overflow: visible;
padding-right: 0 !important;
width: min(15.75rem, 26vw);
}
// Reserves rail width when this page has no ToC entries (empty block, same column as the ToC card)
.westgate-read-rail__toc-placeholder {
box-sizing: border-box;
flex-shrink: 0;
min-height: 0;
pointer-events: none;
width: 100%;
}
.westgate-page-meta {
@include velvet-panel;
border-radius: 0 !important;
margin-bottom: 1.35rem !important;
margin-top: 0 !important;
overflow: hidden;
.page-comments-card:first-child {
border-top: 0 !important;
}
> .v-sheet.v-card.meta-card,
> .v-card.meta-card {
box-sizing: border-box !important;
margin-bottom: 0 !important;
padding: 1rem 0;
}
.westgate-meta-section {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 0 !important;
}
.westgate-meta-section > .westgate-card-title {
margin-bottom: 0;
padding-top: 0;
}
.page-author-card .page-author-card-date {
display: block;
}
.page-shortcuts-card .westgate-shortcuts-toolbar.v-toolbar {
margin: 0 !important;
}
.page-shortcuts-card .westgate-shortcuts-toolbar .v-toolbar__content {
min-height: 52px !important;
padding-top: 0.85rem !important;
padding-bottom: 0.85rem !important;
}
}
@ -1190,21 +1493,24 @@ hr,
}
}
.westgate-read-rail--toc,
.page-col-sd {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding-right: 1rem !important;
padding-right: 0 !important;
}
.westgate-read-nav {
padding-right: 0 !important;
}
.page-toc-card,
.page-tags-card,
.page-comments-card,
.page-author-card,
.page-shortcuts-card {
background: transparent !important;
border: 0 !important;
border-top: 1px solid rgba(194, 163, 90, 0.12) !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden;
@ -1215,19 +1521,23 @@ hr,
}
}
.page-col-content > .contents {
.westgate-read-main.page-col-content > .contents {
@include velvet-panel;
border-radius: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
margin-bottom: 1.35rem;
margin-top: 0;
min-height: 34vh;
padding: 1.55rem 1.55rem !important;
}
.page-toc-card {
@include velvet-panel-hover;
border-top: 0 !important;
overflow: hidden;
&:hover,
&:focus-within {
@include velvet-panel-hover;
}
.v-list {
padding: 0.45rem !important;
@ -1322,7 +1632,6 @@ hr,
.comments-container {
@include velvet-panel;
border-radius: 6px;
margin-top: 2rem;
overflow: hidden;
}
@ -1350,8 +1659,9 @@ hr,
.westgate-footer {
background: linear-gradient(to bottom, rgba(20, 18, 25, 0.94), rgba(15, 13, 19, 0.98)) !important;
border-top: 1px solid rgba(194, 163, 90, 0.14);
color: $wg-text-muted !important;
border: 0 !important;
border-radius: 0 !important;
a {
color: $wg-link !important;
@ -1371,14 +1681,16 @@ hr,
h5,
h6 {
position: relative;
padding-right: 1.1rem;
.toc-anchor {
color: rgba(194, 163, 90, 0.7) !important;
text-decoration: none !important;
opacity: 0.72;
position: absolute;
left: -0.78em;
width: 0.7em;
right: 0;
line-height: 1;
width: auto;
transition: opacity 0.16s ease, color 0.16s ease;
}

2
client/themes/westgate/theme.yml
Unescape View File

@ -11,7 +11,7 @@ props:
title: Table of Contents Position
hint: Select whether the table of contents is shown on the left, right or not at all.
order: 1
default: left
default: right
enum:
- left
- right

Write Preview
Loading…
Cancel
Save