From a18c9b8be212cddcc77a6e9460aae408c8b1a5cf Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 7 Oct 2023 17:34:18 +0300 Subject: [PATCH 01/23] Facelift attempt --- assets/styles/layout/_code.scss | 167 +++++++++-------------------- assets/styles/layout/_core.scss | 2 +- assets/styles/layout/_mixins.scss | 3 +- assets/styles/layout/_news.scss | 5 +- assets/styles/layout/_sidebar.scss | 9 +- assets/styles/layout/_topbar.scss | 20 +++- components/doc/DocSectionCode.vue | 2 +- layouts/AppMenu.vue | 1 - layouts/AppTopBar.vue | 33 +++++- nuxt.config.js | 2 +- plugins/appState.js | 2 +- 11 files changed, 111 insertions(+), 135 deletions(-) diff --git a/assets/styles/layout/_code.scss b/assets/styles/layout/_code.scss index 15278ca49b..6301e2f5b3 100644 --- a/assets/styles/layout/_code.scss +++ b/assets/styles/layout/_code.scss @@ -10,11 +10,9 @@ pre[class*="language-"] { word-break: normal; word-wrap: normal; line-height: 1.5; - -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; - -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; @@ -277,116 +275,6 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus { text-decoration: none; } -.layout-wrapper-dark { - pre[class*="language-"] { - code { - color: var(--text-color) !important; - - .token { - &.tag { - color: rgb(141,219,140) !important; - } - &.keyword { - color: rgb(244,112,103) !important; - } - - &.property { - color: rgb(150,208,255) !important; - } - - &.attr-name, - &.attr-string { - color: rgb(108,182,255) !important; - } - - &.string { - color: var(--text-color) !important; - } - - &.attr-value { - color: var(--text-color) !important; - - .punctuation { - color: rgb(108,182,255) !important; - } - } - - &.punctuation { - color: var(--text-color) !important; - } - - &.operator, - &.string { - background: transparent; - } - - &.function { - color: rgb(220,189,251) !important; - } - - &.operator { - color: rgb(150,208,255) !important; - } - } - } - } -} - -.layout-wrapper-light { - pre[class*="language-"] { - code { - color: rgb(10,48,105) !important; - - .token { - &.tag { - color: rgb(17,99,41) !important; - } - &.keyword { - color: rgb(207,34,46) !important; - } - - &.property { - color: rgb(5,80,174) !important; - } - - &.attr-name, - &.attr-string { - color: rgb(5,80,174) !important; - } - - &.string { - color: rgb(10,48,105) !important; - } - - &.attr-value { - color: rgb(10,48,105) !important; - - .punctuation { - color: rgb(10,48,105) !important; - } - } - - &.punctuation { - color: rgb(5,80,174) !important; - } - - &.operator, - &.string { - background: transparent; - } - - &.function { - color: rgb(130,80,223) !important; - } - - &.operator { - color: rgb(5,80,174) !important; - } - } - } - } -} - pre[class*="language-"] { position: relative; background: transparent !important; @@ -398,13 +286,62 @@ pre[class*="language-"] { code { border-left: 1rem solid transparent !important; box-shadow: none !important; - background: var(--surface-card) !important; + background: #505b67 + !important; margin: 0; - color: var(--surface-900); + color: var(--gray-0); font-size: 14px; border-radius: 10px; + color: #ffffff !important; + + .token { + &.tag { + color: rgb(162, 228, 161) !important; + } + &.keyword { + color: rgb(244,112,103) !important; + } + + &.property { + color: rgb(150,208,255) !important; + } + + &.attr-name, + &.attr-string { + color: rgb(146, 198, 249) !important; + } + + &.string { + color: #ffffff !important; + } + + &.attr-value { + color: #ffffff !important; + + .punctuation { + color: rgb(131, 190, 248) !important; + } + } + + &.punctuation { + color: #ffffff !important; + } + + &.operator, + &.string { + background: transparent; + } + + &.function { + color: rgb(220,189,251) !important; + } + + &.operator { + color: rgb(150,208,255) !important; + } + } } - } +} .copy-to-clipboard-button { display: none; diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss index e1d5a62946..4934afe8a5 100644 --- a/assets/styles/layout/_core.scss +++ b/assets/styles/layout/_core.scss @@ -7,7 +7,7 @@ body { min-height: 100%; overflow-x: hidden; overflow-y: auto; - background-color: var(--surface-ground); + background-color: var(--surface-section); font-weight: normal; color: var(--text-color); -webkit-font-smoothing: antialiased; diff --git a/assets/styles/layout/_mixins.scss b/assets/styles/layout/_mixins.scss index 6b1dc55796..de5cd36384 100644 --- a/assets/styles/layout/_mixins.scss +++ b/assets/styles/layout/_mixins.scss @@ -1,5 +1,6 @@ @mixin card { - background: var(--surface-card); + background: var(--surface-ground); + border: 1px solid var(--surface-border); padding: 2rem; border-radius: 10px; margin-bottom: 1rem; diff --git a/assets/styles/layout/_news.scss b/assets/styles/layout/_news.scss index f96b193fc4..92f69cd08b 100644 --- a/assets/styles/layout/_news.scss +++ b/assets/styles/layout/_news.scss @@ -73,12 +73,15 @@ } .layout-news-active { - .layout-sidebar, .layout-topbar, .layout-config { top: 2rem; } + .layout-sidebar { + top: 7rem; + } + .layout-content { padding-top: 7rem; } diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss index 315f39f9ad..1875c8a7e5 100644 --- a/assets/styles/layout/_sidebar.scss +++ b/assets/styles/layout/_sidebar.scss @@ -1,15 +1,14 @@ .layout-sidebar { position: fixed; left: 0; - top: 0; + top: 5rem; height: 100%; - background-color: var(--surface-overlay); width: 250px; user-select: none; transition: transform .4s cubic-bezier(.05,.74,.2,.99); display: flex; flex-direction: column; - padding: 1rem 0; + padding: 1.5rem 0 1rem 0; .logo { display: flex; @@ -17,8 +16,8 @@ } nav { - padding: .5rem 1rem 2rem 1rem; - margin-top: 2rem; + padding: 0 0 2rem 2rem; + margin: 0; flex-grow: 1; overflow-y: auto; } diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss index f4675160c6..81967178bd 100644 --- a/assets/styles/layout/_topbar.scss +++ b/assets/styles/layout/_topbar.scss @@ -3,16 +3,30 @@ height: 5rem; position: fixed; top: 0; - left: 250px; - width: calc(100% - 250px); + left: 0; + width: 100%; z-index: 1100; transition: background-color 1s; + border-bottom: 1px solid var(--surface-border); + + .layout-topbar-start { + display: flex; + align-items: center; + gap: 4rem; + + .layout-topbar-logo-container { + width: 250px; + display: flex; + align-items: center; + justify-content: center; + } + } .layout-topbar-inner { display: flex; align-items: center; justify-content: space-between; - padding: 0 4rem; + padding: 0 4rem 0 0; height: 100%; width: calc(100% - var(--scrollbar-width, 0px)); } diff --git a/components/doc/DocSectionCode.vue b/components/doc/DocSectionCode.vue index 0dabcb0a5e..9762f6719c 100644 --- a/components/doc/DocSectionCode.vue +++ b/components/doc/DocSectionCode.vue @@ -1,7 +1,7 @@