obsidian-plugin/eatcodeplay_obsidian-simple-banner
1
0
Fork 0
mirror of https://github.com/eatcodeplay/obsidian-simple-banner.git synced 2026-07-22 05:48:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: safari specific css for the linear-gradient based fade feature

Browse source
This commit is contained in:
Sandro Ducceschi 2025-06-29 14:56:41 +02:00
parent a82e743d42
commit a6e6297c31
6 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/snippet.css
View file

@ -28,8 +28,10 @@ body {
/* Background image offsets */
--sb-img-x: 0;
--sb-img-y: 0;
/* Mask that is applied over the image */
/* Mask/Gradient that is applied over the image */
--sb-mask: linear-gradient(180deg, transparent 25%, var(--background-primary));
/* iOS/iPadOS/Safari specific workaround */
--sb-mask-webkit: -webkit-linear-gradient(270deg, transparent 25%, var(--background-primary));
/* -------------------------------
Icon Variables

2
manifest.json
View file

@ -1,7 +1,7 @@
{
"id": "simple-banner",
"name": "Simple Banner",
"version": "0.5.6",
"version": "0.5.7",
"minAppVersion": "1.8.9",
"description": "Visually enhance your notes with a customizable banner. Supports icons and time/date display.",
"author": "Sandro Ducceschi",

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "simple-banner",
"version": "0.5.6",
"version": "0.5.7",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "simple-banner",
"version": "0.5.6",
"version": "0.5.7",
"license": "MIT",
"devDependencies": {
"@types/node": "^16.11.6",

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "simple-banner",
"version": "0.5.6",
"version": "0.5.7",
"description": "Visually enhance your notes with a customizable banner. Supports icons and time/date display.",
"main": "dist/main.js",
"scripts": {

21
src/scss/banner.scss
View file

@ -10,6 +10,7 @@ div.simple-banner {
margin-left: var(--sb-padding);
max-height: var(--sb-height);
padding: var(--size-4-3) var(--size-4-3) 0 var(--size-4-3);
transform: translate3d(0,0,0);
user-select: none;
& > video {
@ -18,20 +19,20 @@ div.simple-banner {
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;
animation: fade-in 0.7s linear forwards, banner-anim 0.8s ease-out;
object-position: calc(50% + var(--sb-img-x)) calc(50% + var(--sb-img-y));
border-radius: var(--sb-radius);
transition: object-position 0.5s ease-in-out;
will-change: object-position;
transform: translate3d(0,0,0);
}
&:before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
content: '';
z-index: 2;
box-shadow: inset 0 2px 4px 1px rgba(0, 0, 0, 0.1);
border-radius: var(--sb-radius);
background-color: rgba(0,0,0,.2);
@ -45,16 +46,18 @@ div.simple-banner {
will-change: transform, background-position-x, background-position-y;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: translate3d(0,0,0);
}
&:after {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
z-index: 3;
content: '';
border-radius: var(--sb-radius);
background: var(--sb-mask);
background: var(--sb-mask-webkit);
transform: translate3d(0,0,0);
overflow: hidden;
}
@ -64,14 +67,14 @@ div.simple-banner {
& + div {
position: relative;
z-index: 3;
z-index: 4;
}
}
body {
&.is-phone, &.is-tablet {
div.simple-banner {
width: calc(100% - (var(--sb-padding) - 2px));
width: calc(100% - (var(--sb-padding) * 2));
}
}
}

1
src/scss/variables.scss
View file

@ -9,6 +9,7 @@ body {
--sb-img-x: 0;
--sb-img-y: 0;
--sb-mask: linear-gradient(180deg, transparent 25%, var(--background-primary));
--sb-mask-webkit: -webkit-linear-gradient(270deg, transparent 25%, var(--background-primary));
/* Icon Variables */
--sb-icon-align-h: flex-start;