#Image Viewer Tweaks

1 messages · Page 1 of 1 (latest)

onyx pulsar
#

planning to add a faint white backdrop to transparent images for better better readability of images with black text

tepid wren
#

I am computer cat and I approve of this message

rocky grail
#

are they going to watch avatar 3??

onyx pulsar
#

gonna post my maintained version of cats per user / server dm bgs snippet later today methinks :3

as well as my other snippet i made to go with it that uses a lot of blur LOLLL

#

(which is called blur more)

#

shoulda named it differently but it uses a lotta backdrop blur for elements to make them look nicer

#

i also wanna optimize my css a little more for those hopeful

#

better selectors

onyx pulsar
# 
/* IMAGE VIEWER THEMING V4*/

/* make photo view scrim less dark */
.scrim__40128 {
  background-color: var(--background-scrim);
  backdrop-filter: blur(5px);
}
.carouselModal_d3a6f0.theme-dark.theme-midnight.images-dark.root__49fc1 {
  backdrop-filter: none;
}

/* image author background */
div.topBar__6088c > div.author__6088c.base__5cd44 {
  position: relative;
  &::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  bottom: -8%;
  top: -50%;
  left: -35%;
  right: -10%;
  z-index: -1;
  transform: translateY(15%);
  background-color: #ffffff0c;
  }
}

/*move author position*/
.authorAvatar__6088c {
  z-index: 2;
  transform: translatex(45%);
}
.author__6088c {

  transform: translatex(10%);
}

/*theme action buttons to match author background*/
div.topBar__6088c > .actionButtons_cc1819, 
div.topBar__6088c > .button_aec7ab {
  background-color: #ffffff0c;
}

/*X button theming*/
div.topBar__6088c > .button_aec7ab {
  transform: translateY(2%) scale(110%);
}

/* size up previous & next buttons */
div.layer_bc663c
 > div > div > 
 .button_aec7ab {
  background: #5e5e5e1c;
  transform: scale(140%);
  height: 50%;
  place-items: center;
  display: flex;
}

div.layer_bc663c
 > div > div > 
 div.button_aec7ab > .buttonInner_aec7ab {
  border-color: #6e6e6e;
  height: 100%;
 }

/* brighten backgrounds for transparent images for legibility*/
.imageWrapper.imageWrapper_af017a.media_a22bfd > .loadingOverlay_af017a {
  background-color: #ffffff31;
  border-radius: 8px;
}```
#

v4 :3

#

(raw version)

strange thistle
#

@onyx pulsar idk if this is relevant or not- but the raw version works and the import doesn't. Is it supposed to be like this?

onyx pulsar
#

it looks like everything is fine, not surewhy its not working ? :(

strange thistle
#

Let me try again

#

Now it's working, I'm not sure what happened there, I had it on the top before

#

I must have copied and pasted it wrong the first time

onyx pulsar
#

hmm i see 🤔

onyx pulsar
# 
/* IMAGE VIEWER THEMING V5*/

/* make photo view scrim less dark */
.scrim__40128 {
  background-color: var(--background-scrim);
  backdrop-filter: blur(5px);
}
.carouselModal_d3a6f0.root__49fc1 {
  backdrop-filter: none;
}

/* image author background */
div.topBar__6088c > div.author__6088c.base__5cd44 {
  position: relative;
  &::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  bottom: -8%;
  top: -50%;
  left: -35%;
  right: -10%;
  z-index: -1;
  transform: translateY(15%);
  background-color: #ffffff0c;
  }
}

/*move author position*/
.authorAvatar__6088c {
  z-index: 2;
  transform: translatex(45%);
}
.author__6088c {

  transform: translatex(10%);
}

/*theme action buttons to match author background*/
div.topBar__6088c > .actionButtons_cc1819, 
div.topBar__6088c > .button_aec7ab {
  background-color: #ffffff0c;
}

/*X button theming*/
div.topBar__6088c > .button_aec7ab {
  transform: translateY(2%) scale(110%);
}

/* size up previous & next buttons */
div.layer_bc663c
 > div > div > 
 .button_aec7ab {
  background: #5e5e5e1c;
  transform: scale(140%);
  height: 50%;
  place-items: center;
  display: flex;
}

div.layer_bc663c
 > div > div > 
 div.button_aec7ab > .buttonInner_aec7ab {
  border-color: #6e6e6e;
  height: 100%;
 }

/*brighten backgrounds for transparent images for legibility*/
.imageWrapper.imageWrapper_af017a.media_a22bfd > .loadingOverlay_af017a {
  background-color: #ffffff31;
  border-radius: 8px;
}