diff --git a/src/app.css b/src/app.css index e6223093..bb7adb62 100644 --- a/src/app.css +++ b/src/app.css @@ -459,7 +459,9 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { transparent var(--curves-radius) ); background-size: var(--curves-radius); - background-position: top var(--backward), bottom var(--forward); + background-position: + top var(--backward), + bottom var(--forward); } } .timeline.contextual > li { @@ -519,7 +521,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { } .timeline.contextual .replies[data-scroll-left]:not([data-scroll-left='0']) { background-color: var(--bg-color); - box-shadow: inset 0 -3px var(--comment-line-color), + box-shadow: + inset 0 -3px var(--comment-line-color), inset 0 3px var(--comment-line-color); overscroll-behavior-x: contain; /* touch-action: pan-x; */ @@ -1655,7 +1658,8 @@ body:has(.media-modal-container + .status-deck) .media-post-link { background-color: var(--button-bg-blur-color); /* backdrop-filter: blur(16px); */ z-index: 10; - box-shadow: 0 3px 8px -1px var(--drop-shadow-color), + box-shadow: + 0 3px 8px -1px var(--drop-shadow-color), 0 10px 36px -4px var(--button-bg-blur-color); transition: all 0.3s ease-in-out; } @@ -1815,7 +1819,8 @@ body:has(.media-modal-container + .status-deck) .media-post-link { box-shadow: none; } 100% { - box-shadow: 0 0 0 1px var(--outline-color), + box-shadow: + 0 0 0 1px var(--outline-color), 0 8px 16px -8px var(--drop-shadow-color); } } @@ -1944,7 +1949,8 @@ body > .szh-menu-container { background-color: var(--bg-color); border: 1px solid var(--outline-stronger-color); border-radius: 8px; - box-shadow: 0 3px 8px var(--drop-shadow-color), + box-shadow: + 0 3px 8px var(--drop-shadow-color), 0 6px 32px -6px var(--drop-shadow-color); text-align: start; /* animation: appear-smooth 0.15s ease-in-out; */ @@ -1978,8 +1984,10 @@ body > .szh-menu-container { } .szh-menu.menu-emphasized { border-color: var(--outline-hover-color); - box-shadow: 0 3px 16px -3px var(--drop-shadow-color), - 0 3px 32px var(--drop-shadow-color), 0 3px 48px var(--drop-shadow-color); + box-shadow: + 0 3px 16px -3px var(--drop-shadow-color), + 0 3px 32px var(--drop-shadow-color), + 0 3px 48px var(--drop-shadow-color); background-color: var(--bg-color); animation-duration: 0.3s; animation-timing-function: ease-in-out; @@ -2262,7 +2270,9 @@ body > .szh-menu-container { background-color: var(--bg-blur-color); backdrop-filter: blur(8px) saturate(3); border: var(--hairline-width) solid var(--bg-color); - text-shadow: 0 var(--hairline-width) var(--bg-color), 0 0 8px var(--bg-color); + text-shadow: + 0 var(--hairline-width) var(--bg-color), + 0 0 8px var(--bg-color); } .glass-menu .szh-menu__item--hover { /* background-color: var(--button-bg-blur-color); */ @@ -2363,14 +2373,16 @@ body > .szh-menu-container { text-shadow: 0 1px var(--bg-color); background-color: var(--bg-color); border: 2px solid var(--link-faded-color); - box-shadow: 0 3px 16px var(--drop-shadow-color), + box-shadow: + 0 3px 16px var(--drop-shadow-color), 0 6px 16px -3px var(--drop-shadow-color); } :is(.shiny-pill, :root .toastify.shiny-pill):hover:not(:active) { color: var(--text-color); border-color: var(--link-color); filter: none !important; - box-shadow: 0 3px 16px var(--drop-shadow-color), + box-shadow: + 0 3px 16px var(--drop-shadow-color), 0 6px 16px -3px var(--drop-shadow-color), 0 6px 16px var(--drop-shadow-color); } @@ -2386,7 +2398,8 @@ body > .szh-menu-container { text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color); background-color: var(--button-bg-color); background-image: none; - box-shadow: 0 3px 8px -1px var(--drop-shadow-color), + box-shadow: + 0 3px 8px -1px var(--drop-shadow-color), 0 10px 36px -4px var(--button-bg-blur-color); text-align: center; width: fit-content; @@ -2551,10 +2564,14 @@ ul.link-list li a .icon { filter: none !important; } .nav-menu-button .avatar { - box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--link-light-color) !important; + box-shadow: + 0 0 0 2px var(--bg-color), + 0 0 0 4px var(--link-light-color) !important; } .nav-menu-button:is(:hover, :focus, .active) .avatar { - box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--link-color) !important; + box-shadow: + 0 0 0 2px var(--bg-color), + 0 0 0 4px var(--link-color) !important; } .nav-menu-button.with-avatar .icon { position: absolute; @@ -2598,10 +2615,14 @@ ul.link-list li a .icon { overscroll-behavior: auto; flex-basis: min(100vw, var(--column-size)); flex-shrink: 0; - box-shadow: -1px 0 var(--bg-color), -2px 0 var(--drop-shadow-color), + box-shadow: + -1px 0 var(--bg-color), + -2px 0 var(--drop-shadow-color), -3px 0 var(--bg-color); &:dir(rtl) { - box-shadow: 1px 0 var(--bg-color), 2px 0 var(--drop-shadow-color), + box-shadow: + 1px 0 var(--bg-color), + 2px 0 var(--drop-shadow-color), 3px 0 var(--bg-color); } }