From d19c26da7d48113f39613e1529fff85c14ae3d9c Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Thu, 19 Oct 2023 22:09:48 +0300 Subject: [PATCH] Updated glow and sync colors --- assets/styles/layout/_code.scss | 1 - assets/styles/layout/_content.scss | 1 - assets/styles/layout/_core.scss | 5 ++++- assets/styles/layout/_doc.scss | 2 +- assets/styles/layout/_glow.scss | 1 + assets/styles/layout/_topbar.scss | 5 +++-- assets/styles/layout/landing/_main.scss | 4 +--- assets/styles/layout/variables/landing/_dark.scss | 6 +++--- assets/styles/layout/variables/main/_dark.scss | 3 ++- assets/styles/layout/variables/main/_light.scss | 3 ++- 10 files changed, 17 insertions(+), 14 deletions(-) diff --git a/assets/styles/layout/_code.scss b/assets/styles/layout/_code.scss index 96adb8907..2363dc7df 100644 --- a/assets/styles/layout/_code.scss +++ b/assets/styles/layout/_code.scss @@ -132,7 +132,6 @@ pre[class*="language-"] { pre[class*="language-"] { code { background: var(--demo-code-bg); - transition: background-color .5s, border-color .5s; } } diff --git a/assets/styles/layout/_content.scss b/assets/styles/layout/_content.scss index e355edda5..d60687945 100644 --- a/assets/styles/layout/_content.scss +++ b/assets/styles/layout/_content.scss @@ -12,7 +12,6 @@ .card { background: var(--surface-card); border: var(--card-border); - transition: background-color .5s, border-color .5s; padding: 2rem; border-radius: 10px; margin-bottom: 1rem; diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss index 7b14a9f30..ab819c5a2 100644 --- a/assets/styles/layout/_core.scss +++ b/assets/styles/layout/_core.scss @@ -12,7 +12,10 @@ body { color: var(--text-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - transition: background-color .5s; +} + +.layout-wrapper { + background-color: var(--surface-ground); } a { diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss index 54222d009..a8c6cb837 100644 --- a/assets/styles/layout/_doc.scss +++ b/assets/styles/layout/_doc.scss @@ -82,7 +82,7 @@ opacity: 0.7; margin-left: 1rem; display: none; - transition: opacity 0.3s, colors 0.3s; + transition: opacity .3s, color .3s; } &:hover { diff --git a/assets/styles/layout/_glow.scss b/assets/styles/layout/_glow.scss index 16da36a47..f2e2895b1 100644 --- a/assets/styles/layout/_glow.scss +++ b/assets/styles/layout/_glow.scss @@ -1,5 +1,6 @@ .landing, .layout-wrapper { background-image: var(--glow-image); + background-blend-mode: var(--glow-blend); background-position: top center; background-repeat: no-repeat; background-size: auto 20rem; diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss index 2096456be..bbd53f870 100644 --- a/assets/styles/layout/_topbar.scss +++ b/assets/styles/layout/_topbar.scss @@ -4,10 +4,11 @@ left: 0; width: calc(100% - var(--scrollbar-width, 0px)); z-index: 1100; - transition: background-color 1s; - border-bottom: 1px solid var(--topbar-border); + transition: background-color .5s, border-color .5s; + border-bottom: 1px solid transparent; &.layout-topbar-sticky { + border-bottom: 1px solid var(--surface-border); background-color: var(--topbar-sticky-bg); backdrop-filter: blur(8px); } diff --git a/assets/styles/layout/landing/_main.scss b/assets/styles/layout/landing/_main.scss index 56c765c2e..93f374c94 100644 --- a/assets/styles/layout/landing/_main.scss +++ b/assets/styles/layout/landing/_main.scss @@ -1,6 +1,5 @@ .landing { background-color: var(--home-bg); - transition: background-color .5s; scroll-behavior: smooth; padding-top: 4rem; @@ -8,11 +7,10 @@ border: 1px solid var(--home-border-color); border-radius: 10px; background-color: var(--home-box-bg); - transition: background-color .5s, border-color .5s; } .linkbox { - transition: all 0.3s; + transition: background-color .2s, border-color .2s; display: inline-flex; align-items: center; color: var(--home-linkbox-text-color); diff --git a/assets/styles/layout/variables/landing/_dark.scss b/assets/styles/layout/variables/landing/_dark.scss index ae1b9d605..3e0e828dc 100644 --- a/assets/styles/layout/variables/landing/_dark.scss +++ b/assets/styles/layout/variables/landing/_dark.scss @@ -1,7 +1,7 @@ .landing.layout-dark { - --home-highlight-color:#10b981; - --home-highlight-darker-color:#059669; - --home-highlight-fore-color:#ffffff; + --home-highlight-color:#6ee7b7; + --home-highlight-darker-color:#34d399; + --home-highlight-fore-color:#030712; --home-bg:#111827; --home-border-color:#424b57; --home-primary-text-color:#ffffff; diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss index 96e5288ab..45fb4f58f 100644 --- a/assets/styles/layout/variables/main/_dark.scss +++ b/assets/styles/layout/variables/main/_dark.scss @@ -2,7 +2,8 @@ --topbar-sticky-bg:rgba(0,0,0,.3); --card-border: 0 none; --card-bg: var(--surface-card); - --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png); + --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--primary-color) 0%, #000000 100%); + --glow-blend: hard-light, color-dodge; --topbar-border: var(--surface-border); --mobile-menu-bg: rgba(0,0,0,.3); --demo-code-bg: var(--surface-card); diff --git a/assets/styles/layout/variables/main/_light.scss b/assets/styles/layout/variables/main/_light.scss index f35ebede1..a978140db 100644 --- a/assets/styles/layout/variables/main/_light.scss +++ b/assets/styles/layout/variables/main/_light.scss @@ -2,7 +2,8 @@ --topbar-sticky-bg:rgba(255,255,255,.7); --card-border: 1px solid var(--surface-border); --card-bg: var(--surface-card); - --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png); + --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center top, var(--primary-100) 0%, #ffffff 100%); + --glow-blend: hard-light, multiply; --topbar-border: rgba(0,0,0,.05); --mobile-menu-bg: var(--surface-overlay); --demo-code-bg: var(--surface-700);