diff --git a/client/themes/westgate/components/page.vue b/client/themes/westgate/components/page.vue index 98e3df76..0f83ef4f 100644 --- a/client/themes/westgate/components/page.vue +++ b/client/themes/westgate/components/page.vue @@ -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; diff --git a/client/themes/westgate/scss/app.scss b/client/themes/westgate/scss/app.scss index e4d2294c..a904476d 100644 --- a/client/themes/westgate/scss/app.scss +++ b/client/themes/westgate/scss/app.scss @@ -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; } diff --git a/client/themes/westgate/theme.yml b/client/themes/westgate/theme.yml index 0bd086df..5c4184ba 100644 --- a/client/themes/westgate/theme.yml +++ b/client/themes/westgate/theme.yml @@ -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