From 13fdca129d66c490bea52de7bfe603e83c52879f Mon Sep 17 00:00:00 2001 From: Pratik Date: Wed, 12 Feb 2025 12:29:02 +0530 Subject: [PATCH] refactor: css refactor and fixes --- wiki/public/scss/dropdowns.scss | 74 + wiki/public/scss/edit_wiki.bundle.scss | 1 - wiki/public/scss/footer.scss | 61 + .../scss/{edit_wiki.scss => general.scss} | 397 +++-- wiki/public/scss/markdown.scss | 330 ++++ wiki/public/scss/modal.scss | 106 ++ wiki/public/scss/navbar.scss | 248 +++ wiki/public/scss/page-toc.scss | 75 + wiki/public/scss/revisions.scss | 74 + wiki/public/scss/sidebar.scss | 260 +++ wiki/public/scss/variables.scss | 179 +++ wiki/public/scss/wiki.bundle.scss | 11 +- wiki/public/scss/wiki.scss | 1402 ----------------- .../doctype/wiki_page/templates/show.html | 11 +- .../wiki_page/templates/wiki_page.html | 5 +- 15 files changed, 1722 insertions(+), 1512 deletions(-) create mode 100644 wiki/public/scss/dropdowns.scss delete mode 100644 wiki/public/scss/edit_wiki.bundle.scss create mode 100644 wiki/public/scss/footer.scss rename wiki/public/scss/{edit_wiki.scss => general.scss} (68%) create mode 100644 wiki/public/scss/markdown.scss create mode 100644 wiki/public/scss/modal.scss create mode 100644 wiki/public/scss/navbar.scss create mode 100644 wiki/public/scss/page-toc.scss create mode 100644 wiki/public/scss/revisions.scss create mode 100644 wiki/public/scss/sidebar.scss create mode 100644 wiki/public/scss/variables.scss delete mode 100644 wiki/public/scss/wiki.scss diff --git a/wiki/public/scss/dropdowns.scss b/wiki/public/scss/dropdowns.scss new file mode 100644 index 00000000..95e9b390 --- /dev/null +++ b/wiki/public/scss/dropdowns.scss @@ -0,0 +1,74 @@ +#navbar-dropdown{ + flex-grow: 1; + display: flex; + justify-content: end; + height: 80%; + cursor: pointer; + align-items: center; +} + +#navbar-dropdown-content { + position: absolute; + left: 10px; + top: 100%; + padding: 6px; + background-color: var(--navbar-dropdown-bg-color); + width: 90%; + border-radius: 8px; + box-shadow: 0 10px 24px -3px #0000001a; + + a { + color: inherit !important; + text-decoration: none !important; + } + + a:hover { + color:inherit !important; + text-decoration:none !important; + cursor:pointer !important; + } + + .app-switcher { + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; + padding: 6px; + } + + .app-switcher:hover{ + background-color: var(--navbar-dropdown-hover-color); + border-radius: 4px; + } +} + + +.dropdown-toggle.wiki-options::after { + display: none; +} + +.wiki-options { + display: flex; + flex-direction: column; + justify-content: center; + width: 2rem; + height: 2rem; + margin-left: 0.5rem; + + svg { + width: 2rem; + } + + .dropdown-menu { + min-width: 7.5rem; + } +} + +.wiki-options:hover { + background-color: var(--gray-200); + border-radius: 5px; +} + +.dark .wiki-options:hover { + background-color: var(--gray-700); +} \ No newline at end of file diff --git a/wiki/public/scss/edit_wiki.bundle.scss b/wiki/public/scss/edit_wiki.bundle.scss deleted file mode 100644 index 2cfecf1c..00000000 --- a/wiki/public/scss/edit_wiki.bundle.scss +++ /dev/null @@ -1 +0,0 @@ -@import "./edit_wiki.scss"; \ No newline at end of file diff --git a/wiki/public/scss/footer.scss b/wiki/public/scss/footer.scss new file mode 100644 index 00000000..c6825008 --- /dev/null +++ b/wiki/public/scss/footer.scss @@ -0,0 +1,61 @@ +.wiki-footer { + border-top: 1px solid var(--border-color); + margin-top: 1rem; + + .btn { + margin-top: 1rem; + color: var(--text-color); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 11px 16px 13px !important; + width: 48%; + height: 100%; + transition: border-color 0.25s; + box-shadow: unset; + margin-bottom: 3.5rem; + + p { + line-height: 20px; + margin: 0; + + &:first-child { + font-size: 12px; + font-weight: 500; + color: var(--sidebar-text-color); + } + + &:last-child { + font-size: 15px; + font-weight: 500; + color: var(--primary); + transition: color 0.25s; + } + } + + &:hover { + background-color: transparent; + border: 1px solid var(--primary); + } + } + + .btn.left { + margin-right: auto; + text-align: left; + } + + .btn.right { + margin-left: auto; + text-align: right; + } +} + + +@include media-breakpoint-down(md) { + .wiki-footer { + .btn.left, + .btn.right { + width: 100%; + margin-bottom: 10px; + } + } +} \ No newline at end of file diff --git a/wiki/public/scss/edit_wiki.scss b/wiki/public/scss/general.scss similarity index 68% rename from wiki/public/scss/edit_wiki.scss rename to wiki/public/scss/general.scss index 9f624756..0c5ce60f 100644 --- a/wiki/public/scss/edit_wiki.scss +++ b/wiki/public/scss/general.scss @@ -1,98 +1,281 @@ -@import "frappe/public/scss/website/variables"; +* { + scrollbar-width: thin; + scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color); +} + +.wiki-page-meta { + font-size: $font-size-sm; + display: flex; + align-items: center; + justify-content: space-between; +} -body { - --icon-stroke: var(--text-color); +.drafts { + border: 1px solid var(--searchbar-color) !important; + border-radius: 0.5rem; - --editor-line-no-bg-color: var(--gray-100); + .table th, + .table td { + border-top: 1px solid var(--searchbar-color); + } +} - --editor-background-color: #f3f3f3; +#searchModal { + > div:first-child { + margin-top: 5rem; + } - --button-background-color: #383838; + b.match { + background-color: transparent; + color: var(--primary); + font-weight: 500; + padding: 0; // rm website css + } - --editor-toolbar-btn-color: var(--gray-800); - --editor-toolbar-btn-bg-color: var(--editor-background-color); + input { + height: 3rem; + background: var(--searchbar-color); + border-radius: 4px; + padding-left: 2.5rem; + font-size: inherit; + } - --editor-text-selection-color: #d0d0d0; + .search-icon { + position: absolute; + padding: 0.7rem 0 0 0.5rem; + } -} + svg { + color: #74808b; + } -body.dark { - --editor-line-no-bg-color: var(--gray-800); - --control-bg-on-gray: var(--gray-700); - --editor-background-color: #333c44; + .modal-body { + .text-muted { + margin: auto; + width: max-content; + } + + .dropdown-border { + height: 1px; + margin: 0 0.5rem; + background-color: var(--border-color); + + &:last-child { + background-color: unset; + } + } + } - --button-background-color: #383838; + .modal-header { + border-bottom-right-radius: calc(var(--border-radius-lg) - 1px); + border-bottom-left-radius: calc(var(--border-radius-lg) - 1px); + } - --editor-toolbar-btn-color: var(--gray-100); - --editor-toolbar-btn-bg-color: var(--editor-background-color); + .dropdown-item { + font-size: 15px; + outline: unset; + overflow: auto; + margin: 0.5rem 0; + white-space: inherit; + color: var(--text-color); - --editor-text-selection-color: #606060; + &:active { + color: unset; + background-color: unset; + } + &:focus, + &:hover { + background-color: var(--active-item-color); + } - .draft-wiki-page { - background: var(--gray-700); - color: var(--gray-50); + h6 { + font-size: 15px; + } } } -.form-control { - background-color: white; - border: 1px solid var(--background-color); +.dropdown-menu { + background-color: var(--editor-background-color); + border-color: var(--editor-background-color); + + .dropdown-item { + color: var(--text-color); + + &:active, + &:hover { + background-color: var(--sidebar-hover-color); + color: var(--text-color); + } + } +} + +.dropdown-menu.show { + top: 4px !important; } -// edit page +.main-column { + background-color: var(--background-color); + width: 745px; + padding: 0px 50px; + margin: 0 auto; -.remove-sidebar-item { - cursor: pointer; - margin: 0 1rem 0 auto; + @include media-breakpoint-down(md) { + padding: 20px; + width: 100vw; + } } -.collapsible .remove-sidebar-item { - margin-right: calc(15px - 0.5rem); - margin-bottom: 3px; +.wiki-editor { + .wiki-title-container { + margin-bottom: 1rem; + } + .wiki-title-input { + color: var(--text-color); + background-color: var(--editor-background-color); + } } -.trash-icon { +.feather-link { visibility: hidden; } -.sidebar-item:hover .trash-icon, -.sidebar-group .collapsible:hover .trash-icon { - visibility: visible; +.user-contributions { + margin: 0 0 0 auto; + color: var(--sidebar-text-color); + font-size: 0.8rem; +} + +.form-control:focus { + color: var(--text-color); + border: 1px solid var(--gray-500); } -$font-sizes-desktop: ( - "sm": 0.75rem, - "base": 1rem, - "lg": 1.125rem, - "xl": 1.41rem, - "2xl": 1.6rem, - "3xl": 2rem, -); +.contributions-header { + margin: 2rem 0 1.5rem 0; + font-size: $font-size-xl; + font-weight: 700; + line-height: 16px; +} -$font-sizes-mobile: ( - "sm": 0.75rem, - "base": 1rem, - "lg": 1.125rem, - "xl": 1.25rem, - "2xl": 1.5rem, - "3xl": 1.75rem, -); +.count { + font-size: var(--text-xs); + background-color: var(--gray-700); + border-radius: var(--border-radius-sm); + color: var(--gray-50); + padding: 0 var(--padding-xs); + float: right; + margin-top: 2px; +} -.wiki-editor, -.from-markdown { - margin: auto; +img::after { + content: ""; } -* { - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); +img[alt]::after { + width: unset; + height: unset; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--text-color) !important; + font-weight: 600 !important; +} + +strong { + font-weight: 800 !important; +} + +h1 { + margin-top: 3rem; + margin-bottom: 0.75rem; + font-size: 30px; + font-weight: 600; + line-height: 28px; + letter-spacing: 0.005em; + + @include media-breakpoint-up(sm) { + margin-top: 1.5rem !important; + margin-bottom: 0 !important; + } +} + +h2 { + font-size: 22px; + margin-top: 2rem; + margin-bottom: 0.5rem; + + @include media-breakpoint-up(sm) { + margin-top: 4rem; + margin-bottom: 0.75rem; + } +} + +h3 { + font-size: 20px; + margin-top: 2rem; + margin-bottom: 0.5rem; + + @include media-breakpoint-up(sm) { + margin-top: 2.5rem; + } +} + +h4 { + font-size: 18px; + margin-top: 2rem; + margin-bottom: 0.5rem; + + @include media-breakpoint-up(sm) { + margin-top: 2.5rem; + } + + a { + color: $body-color; + } +} + +h5 { + font-size: 16px; +} + +h6 { + font-size: 16px; +} + +p { + font-size: 1rem; +} + +.text-sm { + font-size: 13px !important; + line-height: 1.15; + letter-spacing: 0.02em; +} + +.text-xs { + font-size: 12px; + line-height: 1.15; + letter-spacing: 0.02em; + font-weight: 400; +} + +.wiki-space-route-block { + padding: 0.4rem 0.5rem; + border-radius: 0.375rem; + background-color: var(--bqoute-border-color); + border-top-right-radius: 0; + border-bottom-right-radius: 0; } .wiki-editor, .wiki-content { font-size: map-get($font-sizes-desktop, "base"); - color: var(--editor-button-text-color); line-height: 1.7; max-width: calc(100vw - 6rem); @@ -101,10 +284,6 @@ $font-sizes-mobile: ( text-decoration: underline; } - p { - color: var(--text-color); - } - ul, ol { padding-left: 2rem; @@ -119,7 +298,6 @@ $font-sizes-mobile: ( } li { - color: var(--text-color); padding-top: 1px; padding-bottom: 1px; @@ -163,7 +341,7 @@ $font-sizes-mobile: ( b, strong { - color: $gray-800; + color: var(--content-text-color); font-weight: 600; } @@ -295,7 +473,7 @@ $font-sizes-mobile: ( th { font-weight: bold; text-align: left; - background-color: var(--active-item-color); + background-color: var(--table-header-color); } .selectedCell:after { @@ -329,7 +507,7 @@ $font-sizes-mobile: ( .table-bordered th, .table-bordered td { border: 1px solid; - border-color: $gray-200; + border-color: var(--table-border-color); color: inherit; } @@ -339,10 +517,6 @@ $font-sizes-mobile: ( } pre { - margin: 1rem 0; - background: #011627; - color: #d6deeb; - border-radius: 0.5rem; overflow: hidden; position: relative; @@ -368,25 +542,25 @@ $font-sizes-mobile: ( } } - code { - overflow-x: auto; - color: inherit; - background: none !important; + // code { + // overflow-x: auto; + // color: inherit; + // background: none !important; - del { - &.diffmod, - &.diffdel { - background-color: #8b0000; - } - } + // del { + // &.diffmod, + // &.diffdel { + // background-color: #8b0000; + // } + // } - ins { - &.diffmod, - &.diffins { - background-color: #006400; - } - } - } + // // ins { + // // &.diffmod, + // // &.diffins { + // // background-color: #006400; + // // } + // // } + // } } hr { @@ -515,7 +689,6 @@ $font-sizes-mobile: ( background-color: var(--btn-secondary-active-bg-color) !important; } - a.btn-primary-light { background-color: var(--btn-secondary-color) !important; } @@ -639,12 +812,6 @@ $font-sizes-mobile: ( } } -.markdown-preview { - overflow: auto; - padding: 0 !important; -} - -// button .btn:hover { color: #000; background-color: #f9fafb; @@ -713,7 +880,7 @@ ul[data-type="taskList"] { } .file-upload-area div button { - color: var(--btn-secondary-color) !important; ; + color: var(--btn-secondary-color) !important; } .ace_editor .ace_marker-layer .ace_selection { @@ -746,8 +913,44 @@ ul[data-type="taskList"] { font-size: 14px; } -.no-revision{ +.no-revision { text-align: center; margin: 10px !important; font-size: 24px; -} \ No newline at end of file +} + +.forward-back { + a { + p { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } +} + +.btn.btn-secondary { + color: var(--btn-secondary-color) !important; + background-color: var(--btn-secondary-bg-color) !important; +} + +.btn.btn-secondary:hover { + background-color: var(--btn-secondary-hover-bg-color) !important; +} + +.btn.btn-secondary:active { + background-color: var(--btn-secondary-active-bg-color) !important; +} + +.feedback-btn { + cursor: pointer; + + &:hover { + text-decoration: underline; + } +} + +.form-control { + background-color: white; + border: 1px solid var(--background-color); +} diff --git a/wiki/public/scss/markdown.scss b/wiki/public/scss/markdown.scss new file mode 100644 index 00000000..319ea092 --- /dev/null +++ b/wiki/public/scss/markdown.scss @@ -0,0 +1,330 @@ +.markdown { + font-size: 14px; + line-height: 2 !important; + color: var(--content-text-color); + + a:not(.dropdown-item, .btn) { + color: var(--text-color); + text-decoration: underline; + text-underline-offset: 6px; + } + + p { + font-size: 14px; + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + [class~="lead"] { + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + blockquote { + padding: 0.75rem 1rem 0.75rem 1.25rem; + font-size: $font-size-sm; + font-weight: 500; + border: 1px solid var(--bqoute-border-color); + border-left: 5px solid var(--bqoute-border-color); + border-radius: 0.5rem; + margin: 1.5rem 0 !important; + background-color: var(--bqoute-bg-color); + + p:last-child { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + } + + h1 { + font-size: 30px; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + h2 { + font-size: 22px; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + + h3 { + font-size: 20px; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + h4 { + margin-top: 18px; + margin-bottom: 0.5em; + line-height: 1.5; + } + + h5 { + margin-top: 16px; + margin-bottom: 0.5em; + line-height: 1.5; + } + + h6 { + margin-top: 16px; + margin-bottom: 0.5em; + line-height: 1.5; + } + + img { + margin-top: 2em; + margin-bottom: 2em; + } + + picture { + margin-top: 2em; + margin-bottom: 2em; + } + + picture > img { + margin-top: 0; + margin-bottom: 0; + } + + video { + margin-top: 2em; + margin-bottom: 2em; + } + + kbd { + font-size: 0.875em; + border-radius: 0.3125rem; + padding-top: 0.1875em; + padding-inline-end: 0.375em; + padding-bottom: 0.1875em; + padding-inline-start: 0.375em; + } + + code { + font-size: 0.875em; + } + + h2 code { + font-size: 0.875em; + } + + h3 code { + font-size: 0.9em; + } + + pre { + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + } + + ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-inline-start: 1.625em; + } + + ul { + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-inline-start: 1.625em; + } + + li { + font-size: 14px; + margin-top: 0.25em; + margin-bottom: 0.25em; + &::marker { + color: var(--editor-button-text-color); + } + } + + ol > li { + padding-inline-start: 0.375em; + } + + ul > li { + padding-inline-start: 0.375em; + } + + > ul > li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + > ul > li > p:first-child { + margin-top: 1.25em; + } + + > ul > li > p:last-child { + margin-bottom: 1.25em; + } + + > ol > li > p:first-child { + margin-top: 1.25em; + } + + > ol > li > p:last-child { + margin-bottom: 1.25em; + } + + ul ul, + ul ol, + ol ul, + ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + dl { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + dt { + margin-top: 1.25em; + } + + dd { + margin-top: 0.5em; + padding-inline-start: 1.625em; + } + + hr { + margin-top: 1em; + margin-bottom: 1em; + background-color: var(--border-color); + } + + hr + * { + margin-top: 0; + } + + h2 + * { + margin-top: 0; + } + + h3 + * { + margin-top: 0; + } + + h4 + * { + margin-top: 0; + } + + table { + font-size: 0.875em; + line-height: 1.7142857; + } + + thead th { + padding-inline-end: 0.5714286em; + padding-bottom: 0.5714286em; + padding-inline-start: 0.5714286em; + } + + thead th:last-child { + padding-inline-end: 0; + } + + tbody td, + tfoot td { + padding-top: 0.5714286em; + padding-inline-end: 0.5714286em; + padding-bottom: 0.5714286em; + padding-inline-start: 0.5714286em; + } + + code:not(.hljs) { + padding: 0 0.25rem; + background: rgb(0, 0, 0, 0) !important; + border-radius: 0.125rem; + color: var(--code-text-color) !important; + font-weight: 550; + } + + code:not(.hljs):before, + code:not(.hljs):after { + content: "`"; + display: inline; + } + + tbody td:last-child, + tfoot td:last-child { + padding-inline-end: 0; + } + + figure { + margin-top: 2em; + margin-bottom: 2em; + } + + figure > * { + margin-top: 0; + margin-bottom: 0; + } + + figcaption { + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } +} + +.wiki-content .from-markdown > :first-child { + margin-top: 0; +} + +.wiki-page-content { + max-width: 750px; + margin: 0.5rem auto; + + @include media-breakpoint-down(md) { + width: auto; + margin: unset; + } +} + +.wiki-page-content .from-markdown { + h1, + h2, + h3, + h4, + h5, + h6 { + &::before { + height: 0; + margin-top: 0; + } + } +} + +.hljs { + overflow-x: visible; +} + +h2:hover .feather-link, +h3:hover .feather-link, +h4:hover .feather-link, +h5:hover .feather-link, +h6:hover .feather-link { + visibility: visible; +} + +.wiki-editor, +.from-markdown { + margin: auto; +} + +.markdown-preview { + overflow: auto; + padding: 0 !important; +} diff --git a/wiki/public/scss/modal.scss b/wiki/public/scss/modal.scss new file mode 100644 index 00000000..f5460ed6 --- /dev/null +++ b/wiki/public/scss/modal.scss @@ -0,0 +1,106 @@ +.modal { + .modal-content { + background-color: var(--background-color); + } + + .modal-header { + border-bottom: unset; + + .close { + font-weight: 400; + } + } + + .modal-body { + padding-top: 0; + + label { + color: var(--text-color); + } + + input { + width: 100%; + background: $gray-200; + border-radius: 0.375rem; + border: none; + outline: none; + padding: 0.25rem 0.5rem; + font-size: 13px; + line-height: 1.25rem; + + &[type="checkbox"] { + color: #000; + padding: 0%; + border: 1px solid var(--gray-500); + border-radius: 4px; + accent-color: black; + + &:checked { + background-color: var(--primary); + background-image: url("data:image/svg+xml, "), + var(--checkbox-gradient); + background-size: 57%, 100%; + box-shadow: none; + border: none; + background-repeat: no-repeat; + background-position: center; + } + } + } + + input, + textarea { + background-color: var(--searchbar-color); + color: var(--text-color); + } + } + + .modal-footer { + border-top: unset; + justify-content: end; + + .btn { + width: 100%; + } + } +} + +.feedback-modal { + width: 25rem; + + .form-control:focus { + border: 1px solid var(--background-color); + } + + .rating-options-buttons { + display: grid; + border-radius: 6px; + overflow: hidden; + border: 1.5px solid #000; + } + + .rating-options-buttons > .ratings-number { + border-right: 1px solid #000; + + &:last-child { + border-right: none; + } + } + + .ratings-number { + font-size: 15px; + padding: 8px 0px; + border: none; + color: #000; + background-color: #fff; + + &.rating-active { + background-color: #000; + color: #fff; + } + } + + .submit-feedback-btn.disabled { + pointer-events: none; + } +} diff --git a/wiki/public/scss/navbar.scss b/wiki/public/scss/navbar.scss new file mode 100644 index 00000000..6ac1cf8e --- /dev/null +++ b/wiki/public/scss/navbar.scss @@ -0,0 +1,248 @@ +.navbar-brand { + padding: 0; + color: var(--text-color) !important; + + img { + height: 20px; + max-width: fit-content; + } + + @include media-breakpoint-down(md) { + border-bottom: unset; + } +} + +.navbar-brand-container { + width: 17rem; + display: flex; + align-items: center; + padding: 10px 18px; + background-color: var(--sidebar-bg-color); + position: sticky; + top: 0; + z-index: 5; + height: 60px; + position: relative; + border-bottom: 1px solid var(--border-color); + + @include media-breakpoint-down(md) { + max-width: 14rem; + background-color: var(--background-color); + } +} + +.navbar-nav { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + background-color: var(--background-color); + padding: 0 14px; + border-left: 1px solid var(--border-color); + + @include media-breakpoint-down(sm) { + max-width: 100vw; + height: auto; + align-items: flex-start; + } + + .search-item { + margin-right: auto; + height: auto !important; + } + + .dropdown-menu { + position: sticky; + border: 1px solid var(--border-color); + + .dropdown-item { + color: var(--text-color); + + &:focus-visible { + outline: none; + } + } + + .dropdown-item:hover { + background-color: var(--sidebar-hover-color); + + .h6 { + color: var(--background-color) !important; + } + } + } +} + +.nav-item { + margin-left: 1rem; + display: flex; + align-items: center; + + @include media-breakpoint-down(md) { + // display:; + } + + #search-container { + padding-right: 0px; + padding-left: 0px; + + .dropdown { + height: 32px; + width: 240px; + background-color: var(--searchbar-color); + + &:hover { + border-color: var(--primary); + } + + kbd { + position: absolute; + top: 7px; + right: 5px; + padding: 0.1rem 0.4rem; + color: var(--sidebar-text-color); + background-color: transparent; + } + + span { + margin-left: 2rem; + margin-right: 3rem; + } + } + } + + select { + height: 100%; + } +} + +.wiki-navbar { + background-color: transparent; + padding: 0px !important; + border-bottom: 1px solid var(--border-color); + + @include media-breakpoint-down(md) { + width: auto; + padding-left: 2rem; + } + + .wiki-navbar-container { + padding-right: 1rem; + height: 60px; + align-items: center; + border-bottom: 1px solid var(--border-color); + background-color: var(--background-color); + + @include media-breakpoint-down(md) { + box-shadow: unset; + margin-left: 0; + + .navbar-nav { + padding-left: 10px !important; + max-width: 100vw; + } + } + } + + .doc-container .navbar-collapse { + padding-top: 2rem; + background-color: var(--background-color); + margin-left: 2rem; + padding-bottom: 1rem; + + @include media-breakpoint-down(md) { + padding-top: 0; + margin: 0; + } + } + + .container { + height: 36px; + } + + .sun-moon-container { + cursor: pointer; + margin-left: 24px; + display: flex; + align-items: center; + + svg { + width: 16px !important; + } + + @include media-breakpoint-down(md) { + margin: 0.25rem 0 1rem 0.5rem; + } + } + + .mobile-search-icon { + margin: 0 1rem 0 auto; + cursor: pointer; + display: flex; + align-items: center; + } +} + +.navbar { + .navbar-expand-lg { + width: 100%; + position: fixed; + top: 0; + /*ensure navbar stays affixes to the top*/ + left: 0; + right: 0; + } + + .navbar-link { + color: var(--text-color); + font-size: 0.875rem; + font-weight: 500; + padding: 0.5rem 0; + display: block; + + &:hover { + color: var(--primary); + text-decoration: none; + } + } + + .navbar-toggler { + border-color: transparent; + padding: 18px; + + &:focus { + outline: unset; + } + } + + .logged-in { + display: flex; + align-items: center; + } + + .logged-in .nav-avatar { + padding: 0; + } +} + +@include media-breakpoint-down(md) { + .navbar { + position: inherit; + } + + .nav-item { + margin-left: 0.5rem; + + #search-container { + margin: 1rem 0; + width: 140%; + } + } +} + +@include media-breakpoint-up(md) { + .navbar-light { + border-bottom: 0; + } +} diff --git a/wiki/public/scss/page-toc.scss b/wiki/public/scss/page-toc.scss new file mode 100644 index 00000000..ba490740 --- /dev/null +++ b/wiki/public/scss/page-toc.scss @@ -0,0 +1,75 @@ +.page-toc { + background-color: var(--background-color); + font-size: $font-size-xs; + position: sticky; + top: 90px; + overflow-x: hidden; + overflow-y: auto; + scrollbar-width: none; + height: 90vh; + margin-left: auto; + width: 240px; + margin-right: 16px; + padding-bottom: 10rem; + + &::-webkit-scrollbar { + display: none; + } + + .page-toc-title { + text-transform: uppercase; + font-size: 11px; + font-weight: 600; + line-height: 13px; + letter-spacing: 0.09em; + text-align: left; + margin-bottom: 0.75rem; + } + + h5 { + font-size: $font-size-xs; + padding-left: 1rem; + letter-spacing: 0.4px; + line-height: 28px; + font-size: 13px; + font-weight: 600; + margin-bottom: 0; + } + + div { + width: 100%; + padding: 0; + top: 0; + border-left: 1px solid var(--border-color); + + ul { + padding-bottom: 0; + margin-bottom: 0; + + li { + a { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } + } + } + + .active { + color: var(--text-color); + box-shadow: 1px 0 0 var(--primary) inset; + transition: color 0.2s, box-shadow 0.2s linear, transform 0.2s linear; + } + + a { + font-size: 13px; + padding: 0.25rem; + color: var(--sidebar-text-color); + transform: translateX(-1px); + } + + a:hover { + color: var(--toc-hover-text-color); + } +} \ No newline at end of file diff --git a/wiki/public/scss/revisions.scss b/wiki/public/scss/revisions.scss new file mode 100644 index 00000000..f891cd98 --- /dev/null +++ b/wiki/public/scss/revisions.scss @@ -0,0 +1,74 @@ +.wiki-revision-list { + padding-bottom: 1rem; + margin: auto; + + .wiki-revision-item { + list-style-type: none; + margin-bottom: 1rem; + } +} + +.revisions-modal { + .feather-link { + display: none; + } + + .revision-content { + height: 500px; + overflow-y: auto; + } + + .modal-header { + position: inherit; + + .modal-title { + max-width: 100%; + } + } + + .modal-body { + padding: 1rem; + + .wiki-content { + min-height: unset; + } + } + + .modal-footer { + position: inherit; + + .previous-revision { + width: inherit; + margin-right: auto; + } + + .next-revision { + width: inherit; + margin-left: auto; + } + } +} + +del { + &.diffmod, + &.diffdel { + * { + border: 4px var(--htmldiff-del-color) solid !important; + border-radius: 5px; + } + + all: unset; + } +} + +ins { + &.diffmod, + &.diffins { + * { + border: 4px var(--htmldiff-ins-color) solid !important; + border-radius: 5px; + } + + all: unset; + } +} \ No newline at end of file diff --git a/wiki/public/scss/sidebar.scss b/wiki/public/scss/sidebar.scss new file mode 100644 index 00000000..a9184898 --- /dev/null +++ b/wiki/public/scss/sidebar.scss @@ -0,0 +1,260 @@ +.sm-sidebar { + width: 100%; +} +.sm-sidebar .web-sidebar { + margin-top: 4px; + padding-bottom: 2rem; +} + +.web-sidebar { + position: relative; +} + +.doc-sidebar { + margin-bottom: 0; + height: 100vh; + padding-top: 60px; + display: flex; + flex-direction: column; + + .web-sidebar { + flex: 1; + display: flex; + flex-direction: column; + padding: 0px 8px; + overflow-x: hidden; + overflow-y: auto; + height: 100%; + width: 17rem; + + .sidebar-items { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + padding-top: 8px; + } + } +} + +.sidebar-column { + margin-top: -60px; + border-right: 1px solid var(--border-color); +} + +.sidebar-group-list { + display: flex; + flex-direction: column; + gap: 10px; + list-style-type: none; + padding: 0px; +} +.sidebar-group-container { + height: 32px; + padding: 5px 10px; + border-radius: 8px; + gap: 8px; +} +.sidebar-group-title { + font-size: 15px; + font-weight: 450; + line-height: 16px; + letter-spacing: 0.015em; + text-align: left; +} +.sidebar-group-item-list { + display: flex; + flex-direction: column; + list-style-type: none; + padding: 0px 10px; + margin-top: 10px; + margin-left: 10px; + margin-bottom: 10px !important; + border-left: 1px solid var(--border-color); + gap: 4px; +} +.sidebar-group-item { + display: flex; + align-items: center; + height: 26px; + border-radius: 8px; +} +.sidebar-item-active { + a { + background-color: transparent !important; + color: var(--text-color) !important; + } +} +.sidebar-group-item-title { + color: var(--text-light); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.sidebar-group { + margin: 0; + font-style: normal; + font-weight: 500; + font-size: $font-size-base; + line-height: 1.5; + /* identical to box height, or 28px */ + + letter-spacing: -0.011em; + + ul { + padding-left: 0.25rem; + } + + .list-unstyled:empty::after { + font-size: 12px; + font-weight: 400; + font-style: italic; + color: var(--sidebar-text-color); + content: "This Wiki Group will be deleted automatically"; + } + + .collapsible { + padding: 4px 10px; + display: flex; + align-items: center; + width: 100%; + } + + div { + .h6 { + font-size: $font-size-sm; + margin-bottom: 0; + line-height: 1.5rem; + color: var(--text-color); + font-weight: 700; + } + } + + .drop-icon, + .add-sidebar-page { + cursor: pointer; + display: inline-flex; + margin: 0 5px 0 auto; + transition: transform 0.2s ease-in-out; + transform: rotate(0deg); + color: var(--sidebar-text-color); + + &.rotate { + transform: rotate(-90deg); + } + } +} + +.sidebar-group .collapsible, +.sidebar-item { + &:hover { + cursor: pointer; + + &:not(.active) { + background-color: var(--sidebar-hover-color); + border-radius: 0.625rem; + } + } +} + +.sidebar-item { + display: flex; + align-items: center; + min-height: 1.75rem; + + &.active { + background-color: var(--sidebar-active-item-color); + box-shadow: 0 0 #0000, 0 0 #0000, 0px 1px 2px rgba(0, 0, 0, 0.1); + } + + .active { + font-weight: 700 !important; + } + + div { + display: flex; + align-items: center; + } + + a { + margin: 0; + width: 100%; + padding: 5px 8px; + + &:hover { + color: unset; + } + } + + :first-child { + width: 100%; + } +} + +.doc-sidebar { + // padding-right: 0.5rem; + background-color: var(--sidebar-bg-color); + color: var(--sidebar-font-color); +} + +.my-contributions, +.new-wiki-page, +.sidebar-edit-mode-btn, +.sidebar-view-mode-btn, +.add-sidebar-group { + cursor: pointer; + margin: auto; + font-weight: 500; + + svg { + margin-bottom: 0.1rem; + } + + span { + font-size: 0.75rem; + } +} + +.sidebar-options { + bottom: 0; + position: sticky; + padding: 0.5rem; + background-color: var(--sidebar-bg-color); +} + +.remove-sidebar-item { + cursor: pointer; + margin: 0 1rem 0 auto; +} + +.collapsible .remove-sidebar-item { + margin-right: calc(15px - 0.5rem); + margin-bottom: 3px; +} + +.trash-icon { + visibility: hidden; +} + +.sidebar-item:hover .trash-icon, +.sidebar-group .collapsible:hover .trash-icon { + visibility: visible; +} + +@media (min-width: 992px) { + .doc-sidebar { + top: 0; + padding-bottom: 0; + } +} + +@include media-breakpoint-down(md) { + .web-sidebar { + padding-top: 0; + } + + .web-sidebar > a { + display: none; + } +} diff --git a/wiki/public/scss/variables.scss b/wiki/public/scss/variables.scss new file mode 100644 index 00000000..709b35a7 --- /dev/null +++ b/wiki/public/scss/variables.scss @@ -0,0 +1,179 @@ +@import "frappe/public/scss/website/variables"; + +body { + --gray-700: #242a30; + --gray-800: #1c2126; + --gray-900: #161a1f; + + // light mode vars + --text-color: #494949; + --background-color: white; + --sidebar-bg-color: #f8f8f8; + --sidebar-hover-color: #ebebe9; + + --btn-primary-color: #fff; + --btn-primary-bg-color: #171717; + --btn-primary-hover-bg-color: #383838; + --btn-primary-active-bg-color: #525252; + + --btn-secondary-color: #383838; + --btn-secondary-bg-color: #f3f3f3; + --btn-secondary-hover-bg-color: #ededed; + --btn-secondary-active-bg-color: #e2e2e2; + + --active-item-color: #f1f1f0; + --active-item-text-color: var(--primary); + + --searchbar-color: #f4f5f6; + --border-color: var(--gray-300); + + --bqoute-border-color: var(--gray-400); + --bqoute-bg-color: var(--gray-50); + + --code-bg-color: var(--light); + --code-text-color: var(--purple-600); + + --sidebar-text-color: var(--gray-600); + --sidebar-hover-color: #f3f3f3; + --sidebar-active-item-color: #fff; + + --htmldiff-ins-color: #dcfce7; + --htmldiff-del-color: #fee2e2; + + --editor-button-text-color: var(--gray-700); + --editor-hover-button-color: var(--gray-100); + + --navbar-dropdown-bg-color: #d7d7d7; + --navbar-dropdown-hover-color: #c0c0c0; + --toc-hover-text-color: var(--gray-900); + + --icon-stroke: var(--text-color); + + --editor-line-no-bg-color: var(--gray-100); + + --editor-background-color: #f3f3f3; + + --button-background-color: #383838; + + --editor-toolbar-btn-color: var(--gray-800); + --editor-toolbar-btn-bg-color: var(--editor-background-color); + + --editor-text-selection-color: #d0d0d0; + + --content-text-color: #494949; + --table-border-color: #cbcbcb; + --table-header-color: #f1f1f0; + + --scroll-thumb-color: var(--scrollbar-thumb-color); + --scroll-track-color: var(--scrollbar-track-color); + + // ------------------------------------------ + + font-family: "Inter", ui-sans-serif, system-ui, -apple-system, + BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, + sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, + "Noto Color Emoji"; + + background-color: var(--background-color); + color: var(--text-color); + height: auto; +} + +body.dark { + --primary: var(--gray-100); + + --background-color: #030712; + --text-color: var(--gray-50); + --sidebar-bg-color: var(--background-color); /* #111111; */ + --sidebar-hover-color: #242a30; + + --btn-primary-color: #000; + --btn-primary-bg-color: #fff; + --btn-primary-hover-bg-color: #d4d4d4; + --btn-primary-active-bg-color: #afafaf; + + --btn-secondary-color: #d4d4d4; + --btn-secondary-bg-color: #333c44; + --btn-secondary-hover-bg-color: #313a41; + --btn-secondary-active-bg-color: #2b3339; + + --active-item-color: var(--gray-700); + --searchbar-color: #242a30; + --border-color: var(--gray-700); + + --bqoute-border-color: #47474d; + --bqoute-bg-color: var(--gray-900); + + --code-bg-color: var(--purple-900); + --code-text-color: #ad63ef; + --input-bg-color: #242a30; + + --sidebar-text-color: var(--gray-400); + --sidebar-hover-color: #242a30; + --sidebar-active-item-color: var(--gray-700); + + --bg-orange: var(--orange-600); + --text-on-orange: var(--orange-50); + --bg-green: var(--green-700); + --text-on-green: var(--green-50); + + --htmldiff-ins-color: #006400; + --htmldiff-del-color: #8b0000; + + --editor-button-text-color: var(--gray-400); + --editor-hover-button-color: var(--gray-700); + --subtle-fg: var(--btn-secondary-bg-color); + + --navbar-dropdown-bg-color: #32393f; + --navbar-dropdown-hover-color: #262c30; + --toc-hover-text-color: #fff; + --editor-line-no-bg-color: var(--gray-800); + --control-bg-on-gray: var(--gray-700); + --editor-background-color: #333c44; + + --button-background-color: #383838; + + --editor-toolbar-btn-color: var(--gray-100); + --editor-toolbar-btn-bg-color: var(--editor-background-color); + + --editor-text-selection-color: #606060; + + --content-text-color: #d1d5dc; + --table-border-color: #434343; + --table-header-color: #181f24; + + --scroll-thumb-color: #949494; + --scroll-track-color: #3f3f3f; + --sidebar-font-color: #d1d5dc; + + .draft-wiki-page { + background: var(--gray-700); + color: var(--gray-50); + } + + .navbar .navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); + } + + .alert-message { + color: var(--gray-800) !important; + } +} + +$font-sizes-desktop: ( + "sm": 0.75rem, + "base": 1rem, + "lg": 1.125rem, + "xl": 1.41rem, + "2xl": 1.6rem, + "3xl": 2rem, +); + +$font-sizes-mobile: ( + "sm": 0.75rem, + "base": 1rem, + "lg": 1.125rem, + "xl": 1.25rem, + "2xl": 1.5rem, + "3xl": 1.75rem, +); diff --git a/wiki/public/scss/wiki.bundle.scss b/wiki/public/scss/wiki.bundle.scss index 5e0c4734..d2ec1e85 100644 --- a/wiki/public/scss/wiki.bundle.scss +++ b/wiki/public/scss/wiki.bundle.scss @@ -1,2 +1,9 @@ -@import "./wiki.scss"; -@import "./edit_wiki.scss" \ No newline at end of file +@import "./variables.scss"; +@import "./general.scss"; +@import "./markdown.scss"; +@import "./navbar.scss"; +@import "./sidebar.scss"; +@import "./page-toc.scss"; +@import "./footer.scss"; +@import "./modal.scss"; +@import "./dropdowns.scss"; \ No newline at end of file diff --git a/wiki/public/scss/wiki.scss b/wiki/public/scss/wiki.scss deleted file mode 100644 index 64aa7bcc..00000000 --- a/wiki/public/scss/wiki.scss +++ /dev/null @@ -1,1402 +0,0 @@ -@import "frappe/public/scss/website/variables"; -@import "frappe/public/css/fonts/inter/inter"; - -body { - --gray-700: #242a30; - --gray-800: #1c2126; - --gray-900: #161a1f; - - // light mode vars - --background-color: white; - --sidebar-bg-color: #f8f8f8; - --sidebar-hover-color: #ebebe9; - --toc-hover-text-color: var(--gray-900); - - --btn-primary-color: #fff; - --btn-primary-bg-color: #171717; - --btn-primary-hover-bg-color: #383838; - --btn-primary-active-bg-color: #525252; - - --btn-secondary-color: #383838; - --btn-secondary-bg-color: #f3f3f3; - --btn-secondary-hover-bg-color: #ededed; - --btn-secondary-active-bg-color: #e2e2e2; - - --active-item-color: #f1f1f0; - --active-item-text-color: var(--primary); - - --searchbar-color: #f4f5f6; - --border-color: var(--gray-300); - - --bqoute-border-color: var(--gray-400); - --bqoute-bg-color: var(--gray-50); - - --code-bg-color: var(--light); - --code-text-color: var(--purple-600); - - --sidebar-text-color: var(--gray-600); - --sidebar-hover-color: #f3f3f3; - --sidebar-active-item-color: #fff; - - --htmldiff-ins-color: #dcfce7; - --htmldiff-del-color: #fee2e2; - - --editor-button-text-color: var(--gray-700); - --editor-hover-button-color: var(--gray-100); - - --navbar-dropdown-bg-color: #d7d7d7; - --navbar-dropdown-hover-color: #c0c0c0; - - - // ------------------------------------------ - - font-family: InterVariable, ui-sans-serif, system-ui, -apple-system, - BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, - sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, - "Noto Color Emoji"; - - background-color: var(--background-color); - color: var(--text-color); - height: auto; -} - -body.dark { - // dark mode vars - - --primary: var(--gray-100); - - --background-color: var(--gray-800); - --text-color: var(--gray-50); - --sidebar-bg-color: var(--gray-900); - --sidebar-hover-color: #242a30; - --toc-hover-text-color: var(--gray-500); - - --btn-primary-color: #000; - --btn-primary-bg-color: #fff; - --btn-primary-hover-bg-color: #d4d4d4; - --btn-primary-active-bg-color: #afafaf; - - --btn-secondary-color: #d4d4d4; - --btn-secondary-bg-color: #333c44; - --btn-secondary-hover-bg-color: #313a41; - --btn-secondary-active-bg-color: #2b3339; - - --active-item-color: var(--gray-700); - --searchbar-color: #242a30; - --border-color: var(--gray-700); - - --bqoute-border-color: #47474d; - --bqoute-bg-color: var(--gray-900); - - --code-bg-color: var(--purple-900); - --code-text-color: var(--purple-50); - --input-bg-color: #242a30; - - --sidebar-text-color: var(--gray-400); - --sidebar-hover-color: #242a30; - --sidebar-active-item-color: var(--gray-700); - - --bg-orange: var(--orange-600); - --text-on-orange: var(--orange-50); - --bg-green: var(--green-700); - --text-on-green: var(--green-50); - - --htmldiff-ins-color: #006400; - --htmldiff-del-color: #8b0000; - - --editor-button-text-color: var(--gray-400); - --editor-hover-button-color: var(--gray-700); - --subtle-fg: var(--btn-secondary-bg-color); - - --navbar-dropdown-bg-color: #32393f; - --navbar-dropdown-hover-color: #262c30; - - .navbar .navbar-toggler-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); - } - - .alert-message { - color: var(--gray-800) !important; - } -} - -.nav-tabs { - font-size: var(--font-size-sm); -} - -.wiki-footer { - border-top: 1px solid var(--border-color); - margin-top: 1rem; - - .btn { - margin-top: 1rem; - color: var(--text-color); - border: 1px solid var(--border-color); - border-radius: 8px; - padding: 11px 16px 13px !important; - width: 48%; - height: 100%; - transition: border-color 0.25s; - box-shadow: unset; - margin-bottom: 3.5rem; - - p { - line-height: 20px; - margin: 0; - - &:first-child { - font-size: 12px; - font-weight: 500; - color: var(--sidebar-text-color); - } - - &:last-child { - font-size: 15px; - font-weight: 500; - color: var(--primary); - transition: color 0.25s; - } - } - - &:hover { - background-color: transparent; - border: 1px solid var(--primary); - } - } - - .btn.left { - margin-right: auto; - text-align: left; - } - - .btn.right { - margin-left: auto; - text-align: right; - } -} - -.drafts { - border: 1px solid var(--searchbar-color) !important; - border-radius: 0.5rem; - - .table th, - .table td { - border-top: 1px solid var(--searchbar-color); - } - // select all table rows inside except second one to pply border bottom like above -} - -.wiki-page-meta { - font-size: $font-size-sm; - display: flex; - align-items: center; - justify-content: space-between; -} - -.revision-message { - display: inline; - - @include media-breakpoint-down(sm) { - display: block; - } -} - -// sidebar -.sidebar-column { - margin-top: -60px; -} - -.sortable-chosen, -.sortable-chosen div, -.sortable-chosen div a { - cursor: grabbing !important; -} - -.sidebar-group-list { - display: flex; - flex-direction: column; - gap: 10px; - list-style-type: none; - padding: 0px; -} -.sidebar-group-container { - height: 32px; - padding: 5px 10px; - border-radius: 8px; - gap: 8px; -} -.sidebar-group-title { - font-size: 15px; - font-weight: 450; - line-height: 16px; - letter-spacing: 0.015em; - text-align: left; -} -.sidebar-group-item-list { - display: flex; - flex-direction: column; - list-style-type: none; - padding: 0px 10px; - margin-left: 10px; - margin-bottom: 10px !important; - border-left: 1px solid var(--border-color); -} -.sidebar-group-item { - display: flex; - align-items: center; - height: 26px; - border-radius: 8px; -} -.sidebar-item-active { - a { - background-color: transparent !important; - color: var(--text-color) !important; - } -} -.sidebar-group-item-title { - color: var(--text-light); - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -.sidebar-group { - margin: 0; - font-style: normal; - font-weight: 500; - font-size: $font-size-base; - line-height: 1.5; - /* identical to box height, or 28px */ - - letter-spacing: -0.011em; - - ul { - padding-left: 0.25rem; - } - - .list-unstyled:empty::after { - font-size: 12px; - font-weight: 400; - font-style: italic; - color: var(--sidebar-text-color); - content: "This Wiki Group will be deleted automatically"; - } - - .collapsible { - padding: 4px 10px; - display: flex; - align-items: center; - width: 100%; - } - - div { - .h6 { - font-size: $font-size-sm; - margin-bottom: 0; - line-height: 1.5rem; - color: var(--text-color); - font-weight: 700; - } - } - - .drop-icon, - .add-sidebar-page { - cursor: pointer; - display: inline-flex; - margin: 0 5px 0 auto; - transition: transform 0.2s ease-in-out; - transform: rotate(0deg); - color: var(--sidebar-text-color); - - &.rotate { - transform: rotate(-90deg); - } - } -} - -.sidebar-group .collapsible, -.sidebar-item { - &:hover { - cursor: pointer; - - &:not(.active) { - background-color: var(--sidebar-hover-color); - border-radius: 0.625rem; - } - } -} - -.sidebar-item { - display: flex; - align-items: center; - min-height: 1.75rem; - - &.active { - background-color: var(--sidebar-active-item-color); - border-radius: 0.625rem; - box-shadow: 0 0 #0000, 0 0 #0000, 0px 1px 2px rgba(0, 0, 0, 0.1); - } - - div { - display: flex; - align-items: center; - } - - a { - margin: 0; - font-weight: 420; - width: 100%; - padding: 5px 8px; - - &:hover { - color: unset; - } - } - - :first-child { - width: 100%; - } -} - -.sm-sidebar { - width: 100%; -} -.sm-sidebar .web-sidebar { - margin-top: 4px; - padding-bottom: 2rem; -} - -.web-sidebar { - position: relative; -} - -.doc-sidebar { - margin-bottom: 0; - height: 100vh; - padding-top: 60px; - display: flex; - flex-direction: column; - - .web-sidebar { - flex: 1; - display: flex; - flex-direction: column; - padding: 0px 8px; - overflow-x: hidden; - overflow-y: auto; - height: 100%; - width: 17rem; - - .sidebar-items { - display: flex; - flex-direction: column; - justify-content: space-between; - width: 100%; - } - } -} - -@media (min-width: 992px) { - .doc-sidebar { - top: 0; - padding-bottom: 0; - } -} - -// navbar -.navbar-nav { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: flex-end; - background-color: var(--background-color); - padding: 0 14px; - - @include media-breakpoint-down(sm) { - max-width: 100vw; - height: auto; - align-items: flex-start; - } - - .search-item { - margin-right: auto; - height: auto !important; - } - - .dropdown-menu { - position: sticky; - border: 1px solid var(--border-color); - - .dropdown-item { - color: var(--text-color); - - &:focus-visible { - outline: none; - } - } - - .dropdown-item:hover { - background-color: var(--sidebar-hover-color); - - .h6 { - color: var(--background-color) !important; - } - } - } -} - -.nav-item { - margin-left: 1rem; - display: flex; - align-items: center; - - @include media-breakpoint-down(md) { - // display:; - } - - #search-container { - padding-right: 0px; - padding-left: 0px; - - .dropdown { - height: 32px; - width: 240px; - background-color: var(--searchbar-color); - - &:hover { - border-color: var(--primary); - } - - kbd { - position: absolute; - top: 7px; - right: 5px; - padding: 0.1rem 0.4rem; - color: var(--sidebar-text-color); - background-color: transparent; - } - - span { - margin-left: 2rem; - margin-right: 3rem; - } - } - } - - select { - height: 100%; - } -} - -#searchModal { - > div:first-child { - margin-top: 5rem; - } - - b.match { - background-color: transparent; - color: var(--primary); - font-weight: 500; - padding: 0; // rm website css - } - - input { - height: 3rem; - background: var(--searchbar-color); - border-radius: 4px; - padding-left: 2.5rem; - font-size: inherit; - } - - .search-icon { - position: absolute; - padding: 0.7rem 0 0 0.5rem; - } - - svg { - color: #74808b; - } - - .modal-body { - .text-muted { - margin: auto; - width: max-content; - } - - .dropdown-border { - height: 1px; - margin: 0 0.5rem; - background-color: var(--border-color); - - &:last-child { - background-color: unset; - } - } - } - - .modal-header { - border-bottom-right-radius: calc(var(--border-radius-lg) - 1px); - border-bottom-left-radius: calc(var(--border-radius-lg) - 1px); - } - - .dropdown-item { - font-size: 15px; - outline: unset; - overflow: auto; - margin: 0.5rem 0; - white-space: inherit; - color: var(--text-color); - - &:active { - color: unset; - background-color: unset; - } - - &:focus, - &:hover { - background-color: var(--active-item-color); - } - - h6 { - font-size: 15px; - } - } -} - -.wiki-navbar { - background-color: transparent; - padding: 0px !important; - border-bottom: 1px solid var(--border-color); - - @include media-breakpoint-down(md) { - width: auto; - padding-left: 2rem; - } - - .wiki-navbar-container { - padding-right: 1rem; - height: 60px; - align-items: center; - border-bottom: 1px solid var(--border-color); - background-color: var(--background-color); - - @include media-breakpoint-down(md) { - box-shadow: unset; - margin-left: 0; - - .navbar-nav { - padding-left: 10px !important; - max-width: 100vw; - } - } - } - - .doc-container .navbar-collapse { - padding-top: 2rem; - background-color: var(--background-color); - margin-left: 2rem; - padding-bottom: 1rem; - - @include media-breakpoint-down(md) { - padding-top: 0; - margin: 0; - } - } - - .container { - height: 36px; - } - - .sun-moon-container { - cursor: pointer; - margin-left: 24px; - display: flex; - align-items: center; - - svg { - width: 16px !important; - } - - @include media-breakpoint-down(md) { - margin: 0.25rem 0 1rem 0.5rem; - } - } - - .mobile-search-icon { - margin: 0 1rem 0 auto; - cursor: pointer; - display: flex; - align-items: center; - } -} - -.doc-layout { - padding-top: 0rem; - margin: 0; - max-width: 100%; -} - -.navbar-brand { - padding: 0; - color: var(--text-color) !important; - - img { - height: 20px; - max-width: fit-content; - } - - @include media-breakpoint-down(md) { - border-bottom: unset; - } -} - -.container-fluid.doc-layout.doc-container { - @include media-breakpoint-down(md) { - border-bottom: 1px solid var(--border-color); - } -} - -.navbar-brand-container { - width: 17rem; - display: flex; - align-items: center; - padding: 10px 18px; - background-color: var(--sidebar-bg-color); - position: sticky; - top: 0; - z-index: 5; - height: 60px; - position: relative; - - @include media-breakpoint-down(md) { - max-width: 14rem; - // padding: 1rem 0 0 0; - background-color: var(--background-color); - } -} - -.dropdown-menu { - background-color: var(--editor-background-color); - border-color: var(--editor-background-color); - - .dropdown-item { - color: var(--text-color); - - &:active, - &:hover { - background-color: var(--sidebar-hover-color); - color: var(--text-color); - } - } -} - -.dropdown-menu.show { - top: 4px !important; -} - -// main-content -.main-column { - background-color: var(--background-color); - width: 745px; - padding: 10px 10px; - margin: 0 auto; - - @include media-breakpoint-down(md) { - padding: 20px; - width: 100vw; - } -} - -.wiki-content .from-markdown > :first-child { - margin-top: 0; -} - -.wiki-page-content { - max-width: 750px; - margin: 0.5rem auto; - - @include media-breakpoint-down(md) { - width: auto; - margin: unset; - } -} - -.wiki-editor { - .wiki-title-container { - margin-bottom: 1rem; - } - .wiki-title-input { - color: var(--text-color); - background-color: var(--editor-background-color); - } -} -.feather-link { - visibility: hidden; -} - -// TODO: clear this when website related css is removed -.wiki-page-content .from-markdown { - h1, - h2, - h3, - h4, - h5, - h6 { - &::before { - height: 0; - margin-top: 0; - } - } -} - -.hljs { - overflow-x: visible; -} - -h2:hover .feather-link, -h3:hover .feather-link, -h4:hover .feather-link, -h5:hover .feather-link, -h6:hover .feather-link { - visibility: visible; -} - -.btn.btn-secondary { - color: var(--btn-secondary-color) !important; - background-color: var(--btn-secondary-bg-color) !important; -} - -.btn.btn-secondary:hover { - background-color: var(--btn-secondary-hover-bg-color) !important; -} - -.btn.btn-secondary:active { - background-color: var(--btn-secondary-active-bg-color) !important; -} - -.feedback-btn { - cursor: pointer; - - &:hover { - text-decoration: underline; - } -} - -.feedback-modal { - width: 25rem; - - .form-control:focus { - border: 1px solid var(--background-color); - } - - .rating-options-buttons { - display: grid; - border-radius: 6px; - overflow: hidden; - border: 1.5px solid #000; - } - - .rating-options-buttons > .ratings-number { - border-right: 1px solid #000; - - &:last-child { - border-right: none; - } - } - - .ratings-number { - font-size: 15px; - padding: 8px 0px; - border: none; - color: #000; - background-color: #fff; - - &.rating-active { - background-color: #000; - color: #fff; - } - } - - .submit-feedback-btn.disabled { - pointer-events: none; - } -} - -.dropdown-toggle.wiki-options::after { - display: none; -} - -.wiki-options { - display: flex; - flex-direction: column; - justify-content: center; - width: 2rem; - height: 2rem; - margin-left: 0.5rem; - - svg { - width: 2rem; - } - - .dropdown-menu { - min-width: 7.5rem; - } -} - -.wiki-options:hover { - background-color: var(--gray-200); - border-radius: 5px; -} - -.dark .wiki-options:hover { - background-color: var(--gray-700); -} - -.forward-back { - a { - p { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } -} - -// toc -.page-toc { - background-color: var(--background-color); - font-size: $font-size-xs; - position: sticky; - top: 90px; - overflow-x: hidden; - overflow-y: auto; - scrollbar-width: none; - height: 90vh; - margin-left: auto; - width: 240px; - margin-right: 16px; - padding-bottom: 10rem; - - &::-webkit-scrollbar { - display: none; - } - - .page-toc-title { - text-transform: uppercase; - font-size: 11px; - font-weight: 600; - line-height: 13px; - letter-spacing: 0.09em; - text-align: left; - margin-bottom: 0.75rem; - } - - h5 { - font-size: $font-size-xs; - padding-left: 1rem; - letter-spacing: 0.4px; - line-height: 28px; - font-size: 13px; - font-weight: 600; - margin-bottom: 0; - } - - div { - width: 100%; - padding: 0; - top: 0; - border-left: 1px solid var(--border-color); - - ul { - padding-bottom: 0; - margin-bottom: 0; - - li { - a { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } - } - } - - .active { - color: var(--text-color); - box-shadow: 1px 0 0 var(--primary) inset; - transition: color 0.2s, box-shadow 0.2s linear, transform 0.2s linear; - } - - a { - font-size: 13px; - padding: 0.25rem; - color: var(--sidebar-text-color); - transform: translateX(-1px); - } - - a:hover { - color: var(--toc-hover-text-color); - } -} - -.doc-sidebar { - // padding-right: 0.5rem; - background-color: var(--sidebar-bg-color); -} - -.user-contributions { - margin: 0 0 0 auto; - color: var(--sidebar-text-color); - font-size: 0.8rem; -} - -/* -==== -navbar -==== -*/ - -.navbar { - .navbar-expand-lg { - width: 100%; - position: fixed; - top: 0; - /*ensure navbar stays affixes to the top*/ - left: 0; - right: 0; - } - - .navbar-link { - color: var(--text-color); - font-size: 0.875rem; - font-weight: 500; - padding: 0.5rem 0; - display: block; - - &:hover { - color: var(--primary); - text-decoration: none; - } - } - - .navbar-toggler { - border-color: transparent; - padding: 18px; - - &:focus { - outline: unset; - } - } - - .logged-in { - display: flex; - align-items: center; - } - - .logged-in .nav-avatar { - padding: 0; - } -} - -.form-control:focus { - color: var(--text-color); - border: 1px solid var(--gray-500); -} - -@include media-breakpoint-down(md) { - .navbar { - position: inherit; - } - - .navbar-expand-lg .doc-container { - padding: 0.5rem 0; - } - - .web-sidebar { - padding-top: 0; - } - - .web-sidebar > a { - display: none; - } - - .wiki-footer { - .btn.left, - .btn.right { - width: 100%; - margin-bottom: 10px; - } - } - - .nav-item { - margin-left: 0.5rem; - - #search-container { - margin: 1rem 0; - width: 140%; - } - } - - .search-nav-item { - height: 2.2rem; - } -} - -@include media-breakpoint-up(md) { - .navbar-light { - border-bottom: 0; - } -} - -.my-contributions, -.new-wiki-page, -.sidebar-edit-mode-btn, -.sidebar-view-mode-btn, -.add-sidebar-group { - cursor: pointer; - margin: auto; - font-weight: 500; - - svg { - margin-bottom: 0.1rem; - } - - span { - font-size: 0.75rem; - } -} - -.sidebar-options { - bottom: 0; - position: sticky; - padding: 0.5rem; - background-color: var(--sidebar-bg-color); -} - -.web-footer { - border-top: 1px solid var(--border-color); - background-color: var(--background-color); -} - -.search-nav-item { - position: relative; - - svg { - top: 10px; - right: 12px; - position: absolute; - } -} - -// contributions page - -.contributions-header { - margin: 2rem 0 1.5rem 0; - font-size: $font-size-xl; - font-weight: 700; - line-height: 16px; -} - -.count { - font-size: var(--text-xs); - background-color: var(--gray-700); - border-radius: var(--border-radius-sm); - color: var(--gray-50); - padding: 0 var(--padding-xs); - float: right; - margin-top: 2px; -} - -img::after { - content: ""; -} - -img[alt]::after { - width: unset; - height: unset; -} - -// body -// make sm / xl sizes the same - -h1, -h2, -h3, -h4, -h5, -h6, -strong { - color: var(--text-color) !important; -} - -h1 { - margin-top: 3rem; - margin-bottom: 0.75rem; - font-size: 24px; - font-weight: 600; - line-height: 28px; - letter-spacing: 0.005em; - - @include media-breakpoint-up(sm) { - margin-top: 1.5rem !important; - margin-bottom: 0 !important; - } -} - -h2 { - font-size: 1.5rem; - margin-top: 2rem; - margin-bottom: 0.5rem; - - @include media-breakpoint-up(sm) { - margin-top: 4rem; - margin-bottom: 0.75rem; - } -} - -h3 { - font-size: 1.25rem; - margin-top: 2rem; - margin-bottom: 0.5rem; - - @include media-breakpoint-up(sm) { - margin-top: 2.5rem; - } -} - -h4 { - font-size: 1.125rem; - margin-top: 2rem; - margin-bottom: 0.5rem; - - @include media-breakpoint-up(sm) { - margin-top: 2.5rem; - } - - a { - color: $body-color; - } -} - -h5 { - font-size: 0.875rem; -} - -h6 { - font-size: 0.75rem; -} - -p { - font-size: 1rem; -} - -// dialog boxes -.modal { - .modal-content { - background-color: var(--background-color); - } - - .modal-header { - border-bottom: unset; - - .close { - font-weight: 400; - } - } - - .modal-body { - padding-top: 0; - - label { - color: var(--text-color); - } - - input { - width: 100%; - background: $gray-200; - border-radius: 0.375rem; - border: none; - outline: none; - padding: 0.25rem 0.5rem; - font-size: 13px; - line-height: 1.25rem; - - &[type="checkbox"] { - color: #000; - padding: 0%; - border: 1px solid var(--gray-500); - border-radius: 4px; - accent-color: black; - - &:checked { - background-color: var(--primary); - background-image: url("data:image/svg+xml, "), - var(--checkbox-gradient); - background-size: 57%, 100%; - box-shadow: none; - border: none; - background-repeat: no-repeat; - background-position: center; - } - } - } - - input, - textarea { - background-color: var(--searchbar-color); - color: var(--text-color); - } - } - - .modal-footer { - border-top: unset; - justify-content: end; - - .btn { - width: 100%; - } - } -} - -// revisions - -.wiki-revision-list { - padding-bottom: 1rem; - margin: auto; - - .wiki-revision-item { - list-style-type: none; - margin-bottom: 1rem; - } -} - -.revisions-modal { - .feather-link { - display: none; - } - - .revision-content { - height: 500px; - overflow-y: auto; - } - - .modal-header { - position: inherit; - - .modal-title { - max-width: 100%; - } - } - - .modal-body { - padding: 1rem; - - .wiki-content { - min-height: unset; - } - } - - .modal-footer { - position: inherit; - - .previous-revision { - width: inherit; - margin-right: auto; - } - - .next-revision { - width: inherit; - margin-left: auto; - } - } -} - -del { - &.diffmod, - &.diffdel { - * { - border: 4px var(--htmldiff-del-color) solid !important; - border-radius: 5px; - } - - all: unset; - } -} - -ins { - &.diffmod, - &.diffins { - * { - border: 4px var(--htmldiff-ins-color) solid !important; - border-radius: 5px; - } - - all: unset; - } -} - -.text-sm { - font-size: 13px !important; - line-height: 1.15; - letter-spacing: 0.02em; -} - -.text-xs { - font-size: 12px; - line-height: 1.15; - letter-spacing: 0.02em; - font-weight: 400; -} - -.wiki-space-route-block { - padding: 0.4rem 0.5rem; - border-radius: 0.375rem; - background-color: var(--bqoute-border-color); - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -#navbar-dropdown{ - flex-grow: 1; - display: flex; - justify-content: end; - height: 80%; - cursor: pointer; - align-items: center; -} - -#navbar-dropdown-content { - position: absolute; - left: 10px; - top: 100%; - padding: 6px; - background-color: var(--navbar-dropdown-bg-color); - width: 90%; - border-radius: 8px; - box-shadow: 0 10px 24px -3px #0000001a; - - a { - color: inherit !important; - text-decoration: none !important; - } - - a:hover { - color:inherit !important; - text-decoration:none !important; - cursor:pointer !important; - } - - .app-switcher { - display: flex; - align-items: center; - gap: 8px; - font-size: 14px; - padding: 6px; - } - - .app-switcher:hover{ - background-color: var(--navbar-dropdown-hover-color); - border-radius: 4px; - } -} \ No newline at end of file diff --git a/wiki/wiki/doctype/wiki_page/templates/show.html b/wiki/wiki/doctype/wiki_page/templates/show.html index 816a787f..a7e50206 100644 --- a/wiki/wiki/doctype/wiki_page/templates/show.html +++ b/wiki/wiki/doctype/wiki_page/templates/show.html @@ -1,4 +1,4 @@ -
+

{{ title }}

@@ -44,8 +44,8 @@
{%- endif -%}
-