renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: add edge glow effect in some dialogs

Browse Source
This commit is contained in:
Hakadao
2024-03-10 23:36:37 -03:00
parent 24c5c18c3a
commit 747c0a1bc8
4 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Dock/Dock.vue
View File

@@ -312,7 +312,7 @@ function toggleDockHide(hide: boolean) {
hover:bg-$bew-fill-3 dark-hover:bg-$bew-fill-3 hover:scale-110
active:important-scale-100;
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);
box-shadow: var(--bew-shadow-edge-glow-1), 0 4px 12px rgba(0, 0, 0, 0.08);
&.active {
--at-apply: bg-$bew-theme-color-auto text-$bew-text-auto
@@ -326,6 +326,6 @@ function toggleDockHide(hide: boolean) {
}
.dark .dock-item {
box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
box-shadow: var(--bew-shadow-edge-glow-1), 0 4px 12px rgba(0, 0, 0, 0.08);
}
</style>

14
src/components/Settings/Settings.vue
View File

@@ -124,8 +124,11 @@ function setCurrentTitle() {
shrink-0 p="x-4" pos="absolute left--84px" z-2
>
<ul
style="backdrop-filter: var(--bew-filter-glass-2)"
flex="~ gap-2 col" rounded="30px hover:25px" bg="$bew-elevated-1 hover:$bew-elevated-2" p-2 shadow="$bew-shadow-3"
style="
--un-shadow: var(--bew-shadow-4), var(--bew-shadow-edge-glow-2);
backdrop-filter: var(--bew-filter-glass-2);
"
flex="~ gap-2 col" rounded="30px hover:25px" bg="$bew-elevated-1 hover:$bew-elevated-2" p-2 shadow
scale="group-hover:105" duration-300 overflow-hidden antialiased
border="1 $bew-border-color"
>
@@ -158,9 +161,12 @@ function setCurrentTitle() {
<div
class="settings-content"
style="backdrop-filter: var(--bew-filter-glass-2);"
style="
--un-shadow: var(--bew-shadow-4), var(--bew-shadow-edge-glow-2);
backdrop-filter: var(--bew-filter-glass-2);
"
relative overflow="x-hidde" w-full h-full bg="$bew-elevated-1"
shadow="$bew-shadow-4" rounded="$bew-radius"
shadow rounded="$bew-radius"
>
<OverlayScrollbarsComponent ref="scrollbarRef" element="div" h-inherit defer>
<header

7
src/components/Settings/components/ChildSettingsDialog.vue
View File

@@ -20,9 +20,12 @@ function handleClose() {
@click="handleClose"
/>
<div
style="backdrop-filter: var(--bew-filter-glass-2)"
style="
--un-shadow: var(--bew-shadow-3) var(--bew-shadow-edge-glow-2);
backdrop-filter: var(--bew-filter-glass-2);
"
pos="fixed top-1/2 left-1/2" bg="$bew-elevated-1" rounded="$bew-radius"
transform="translate--1/2" z-2 shadow="$bew-shadow-3" overflow="x-hidden y-overlay" w="$b-dialog-width"
transform="translate--1/2" z-2 shadow overflow="x-hidden y-overlay" w="$b-dialog-width"
h="$b-dialog-height" antialiased
>
<header

6
src/styles/variables.scss
View File

@@ -20,6 +20,9 @@
0 8px 10px -6px rgb(0 0 0 / 0.12);
--bew-shadow-4: 0 34px 50px -20px rgb(0 0 0 / 0.16),
0 32px 45px -12px rgb(0 0 0 / 0.14), 0 30px 40px -8px rgb(0 0 0 / 0.12);
--bew-shadow-edge-glow-1: inset 0 0 4px rgba(0, 0, 0, 0.04);
--bew-shadow-edge-glow-2: inset 0 0 8px rgba(0, 0, 0, 0.06);
// #endregion
--bew-logo-color: var(--bew-theme-color);
@@ -161,6 +164,9 @@
0 8px 10px -6px rgb(0 0 0 / 0.16);
--bew-shadow-4: 0 34px 50px -20px rgb(0 0 0 / 0.44),
0 32px 45px -12px rgb(0 0 0 / 0.3), 0 30px 40px -8px rgb(0 0 0 / 0.18);
--bew-shadow-edge-glow-1: inset 0 0 4px rgba(255, 255, 255, 0.06);
--bew-shadow-edge-glow-2: inset 0 0 8px rgba(255, 255, 255, 0.1);
// #endregion
--bew-logo-color: var(--bew-text-1);