S - Images Adjustments.css

body {
  --image-border-color: var(--background-modifier-border);
  --image-border-width: 1px;
  --image-border-padding: 8px;
  --image-border-background: var(--td);
}

/*----Image Positions/Adjustments----*/
body {
  --micro: 70px;
  --tiny: 100px;
  --small: 200px;
  --small-med: 300px;
  --med-small: 400px;
  --medium: 500px;
  --med-tall: 600px;
  --tall: 700px;
}

.popover.hover-popover {
  --micro: 70px;
  --tiny: 100px;
  --small: 150px;
  --small-med: 200px;
  --med-small: 250px;
  --medium: 300px;
  --med-tall: 450px;
  --tall: 500px;
}

/*----Mobile----*/
@media (max-width: 500px) {
  .theme-dark, .theme-light {
    /*Mobile Sizes*/
    --radius: 0px;
    --micro: 70px;
    --tiny: 100px;
    --small: 150px;
    --small-med: 200px;
    --med-small: 250px;
    --medium: 300px;
    --med-tall: 450px;
    --tall: 500px;
  }
}
/*-Image Sizing-*/
/*Fit image within bounds WITHOUT stretching*/
img:is([alt*=cover], [alt*=cvr]),
.image-embed:is([src*="#cover"], [src*="#cvr"]),
span.image-embed:is([src*="#cover"], [src*="#cvr"]) img {
  object-fit: cover;
}

img[alt][alt]:not([alt*=relative])[alt*=hmicro] {
  height: var(--micro);
}
img[alt][alt]:not([alt*=relative])[alt*=htiny] {
  height: var(--tiny);
}
img[alt][alt]:not([alt*=relative])[alt*=hsmall] {
  height: var(--small);
}
img[alt][alt]:not([alt*=relative])[alt*=hs-med] {
  height: var(--small-med);
}
img[alt][alt]:not([alt*=relative])[alt*=hm-sm] {
  height: var(--med-small);
}
img[alt][alt]:not([alt*=relative])[alt*=hmed] {
  height: var(--medium);
}
img[alt][alt]:not([alt*=relative])[alt*=hm-tl] {
  height: var(--med-tall);
}
img[alt][alt]:not([alt*=relative])[alt*=htall] {
  height: var(--tall);
}
img[alt][alt]:not([alt*=relative])[alt*=hfull] {
  height: 100%;
}
img[alt][alt]:not([alt*=relative])[alt*=wmicro] {
  width: var(--micro);
}
img[alt][alt]:not([alt*=relative])[alt*=wtiny] {
  width: var(--tiny);
}
img[alt][alt]:not([alt*=relative])[alt*=wsmall] {
  width: var(--small);
}
img[alt][alt]:not([alt*=relative])[alt*=ws-med] {
  width: var(--small-med);
}
img[alt][alt]:not([alt*=relative])[alt*=wm-sm] {
  width: var(--med-small);
}
img[alt][alt]:not([alt*=relative])[alt*=wmed] {
  width: var(--medium);
}
img[alt][alt]:not([alt*=relative])[alt*=wm-tl] {
  width: var(--med-tall);
}
img[alt][alt]:not([alt*=relative])[alt*=wtall] {
  width: var(--tall);
}
img[alt][alt]:not([alt*=relative])[alt*=wfull] {
  width: 100%;
}

.image-embed[alt][alt*=relative],
div:not(.image-embed) > img[alt][alt*=relative] {
  --micro: 10%;
  --tiny: 20%;
  --small: 30%;
  --small-med: 40%;
  --med-small: 50%;
  --medium: 60%;
  --med-tall: 70%;
  --tall: 85%;
}
.image-embed[alt][alt*=relative][alt*=wmicro],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wmicro] {
  width: var(--micro);
}
.image-embed[alt][alt*=relative][alt*=wtiny],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wtiny] {
  width: var(--tiny);
}
.image-embed[alt][alt*=relative][alt*=wsmall],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wsmall] {
  width: var(--small);
}
.image-embed[alt][alt*=relative][alt*=ws-med],
div:not(.image-embed) > img[alt][alt*=relative][alt*=ws-med] {
  width: var(--small-med);
}
.image-embed[alt][alt*=relative][alt*=wm-sm],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wm-sm] {
  width: var(--med-small);
}
.image-embed[alt][alt*=relative][alt*=wmed],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wmed] {
  width: var(--medium);
}
.image-embed[alt][alt*=relative][alt*=wm-tl],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wm-tl] {
  width: var(--med-tall);
}
.image-embed[alt][alt*=relative][alt*=wtall],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wtall] {
  width: var(--tall);
}
.image-embed[alt][alt*=relative][alt*=hmicro],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hmicro] {
  width: var(--micro);
}
.image-embed[alt][alt*=relative][alt*=htiny],
div:not(.image-embed) > img[alt][alt*=relative][alt*=htiny] {
  width: var(--tiny);
}
.image-embed[alt][alt*=relative][alt*=hsmall],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hsmall] {
  width: var(--small);
}
.image-embed[alt][alt*=relative][alt*=hs-med],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hs-med] {
  width: var(--small-med);
}
.image-embed[alt][alt*=relative][alt*=hm-sm],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hm-sm] {
  width: var(--med-small);
}
.image-embed[alt][alt*=relative][alt*=hmed],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hmed] {
  width: var(--medium);
}
.image-embed[alt][alt*=relative][alt*=hm-tl],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hm-tl] {
  width: var(--med-tall);
}
.image-embed[alt][alt*=relative][alt*=htall],
div:not(.image-embed) > img[alt][alt*=relative][alt*=htall] {
  width: var(--tall);
}
.image-embed[alt][alt*=relative][alt*=hfull],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hfull] {
  width: 100%;
}

.image-embed[alt][alt*=relative],
div:not(.image-embed) > img[alt][alt*=relative] {
  display: block;
  margin: auto;
  max-height: 100%;
  object-fit: cover;
}

/*Height*/
/*Image Locations*/
/*Center Image*/
.img-adj-center.img-adj-center img,
img:is([alt*=ctr], [alt*=center]) {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img-adj-center.img-adj-center .is-live-preview img {
  margin-left: auto !important;
  margin-right: auto !important;
}

/*Left & Right*/
.markdown-rendered img:is([alt*=left], [alt*=locl]), .markdown-rendered img:is([src*="#left"], [src*="#locl"]), .markdown-rendered .image-embed:is([alt*=left], [alt*=locl]), .markdown-rendered .image-embed:is([src*="#left"], [src*="#locl"]) {
  float: left;
  margin-right: 2%;
  margin-top: 0px;
  margin-bottom: 0px;
}
.markdown-rendered img:is([alt*=right], [alt*=locr]), .markdown-rendered img:is([src*="#right"], [src*="#locr"]), .markdown-rendered .image-embed:is([alt*=right], [alt*=locr]), .markdown-rendered .image-embed:is([src*="#right"], [src*="#locr"]) {
  float: right;
  margin-left: 2%;
  margin-bottom: 0px;
}

/*--Image Position--*/
img[alt*="p+"], .image-embed[src*="#p+"] img {
  object-fit: cover;
}

/*Inner Image*/
img[alt*="p+c"], .image-embed[src*="#p+c"] img {
  object-position: center;
}

img[alt*="p+t"], .image-embed[src*="#p+t"] img {
  object-position: top;
}

img[alt*="p+b"], .image-embed[src*="#p+b"] img {
  object-position: bottom;
}

img[alt*="p+l"], .image-embed[src*="#p+l"] img {
  object-position: left;
}

img[alt*="p+r"], .image-embed[src*="#p+r"] img {
  object-position: right;
}

img[alt*="p+cl"], .image-embed[src*="#p+cl"] img {
  object-position: 15%;
}

img[alt*="p+ccl"], .image-embed[src*="#p+ccl"] img {
  object-position: 25%;
}

img[alt*="p+cr"], .image-embed[src*="#p+cr"] img {
  object-position: 60%;
}

img[alt*="p+ccr"], .image-embed[src*="#p+ccr"] img {
  object-position: 75%;
}

img[alt*="p+tc"], .image-embed[src*="#p+tc"] img {
  object-position: 50% 10%;
}

img[alt*="p+tcc"], .image-embed[src*="#p+tcc"] img {
  object-position: 50% 20%;
}

img[alt*="p+cct"], .image-embed[src*="#p+cct"] img {
  object-position: 50% 30%;
}

img[alt*="p+ct"], .image-embed[src*="#p+ct"] img {
  object-position: 50% 40%;
}

img[alt*="p+cb"], .image-embed[src*="#p+cb"] img {
  object-position: 50% 60%;
}

img[alt*="p+ccb"], .image-embed[src*="#p+ccb"] img {
  object-position: 50% 70%;
}

img[alt*="p+bc"], .image-embed[src*="#p+bc"] img {
  object-position: 50% 80%;
}

img[alt*="p+bcc"], .image-embed[src*="#p+bcc"] img {
  object-position: 50% 90%;
}

/*Invert Colors*/
.theme-dark img[alt*=invertb], .theme-dark .image-embed[src*="#invertb"] {
  filter: invert(1) hue-rotate(180deg);
}
.theme-dark img[alt*=invertbc],
.theme-dark .image-embed[src*="#invertbc"] {
  filter: invert(1) hue-rotate(180deg) contrast(1.5);
}

.theme-light img[alt*=invertw], .theme-light .image-embed[src*="#invertw"] {
  filter: invert(1) hue-rotate(180deg);
}
.theme-light img[alt*=invertwc], .theme-light .image-embed[src*="#invertwc"] {
  filter: invert(1) hue-rotate(180deg) contrast(1.45);
}

img:is([alt*=flip-x],
[alt*=flip-horizontal]) {
  transform: scale(-1, 1);
}
img:is([alt*=flip-y],
[alt*=flip-vertical]) {
  transform: scale(1, -1);
}
img:is([alt*=flip-xy],
[alt*=flip-vertical-horizontal]) {
  transform: scale(-1, -1);
}

/*Fit image within bounds WITHOUT stretching*/
img[alt*=cover],
img:is([alt*=cover], [alt*=cvr]),
.image-embed:is([src*="#cover"], [src*="#cvr"]),
span.image-embed:is([src*="#cover"], [src*="#cvr"]) img {
  object-fit: cover;
}

/*Fix Float Issues*/
:is(img, .image-embed)[alt*=clear],
.image-embed[src*="#clear"] {
  clear: both;
}

img[alt*=unclr],
.image-embed[src*="#unclr"] {
  clear: none !important;
}

img:is([alt~=lp], [alt~=live-preview]):is([alt*=right], [alt*=locr]),
.image-embed:is([alt~=lp], [alt~=live-preview]):is([alt*=right], [alt*=locr]) {
  float: right !important;
}
img:is([alt~=lp], [alt~=live-preview]):is([alt*=left], [alt*=locl]),
.image-embed:is([alt~=lp], [alt~=live-preview]):is([alt*=left], [alt*=locl]) {
  float: left !important;
}

.clear-hr {
  --hr-width: 100%;
}

.clear-headings :is(h1, h2, h3, h4, h5, h6),
.clear-heading-1 h1,
.clear-heading-2 h2,
.clear-heading-3 h3,
.clear-heading-4 h4,
.clear-heading-5 h5,
.clear-heading-6 h6 {
  clear: both;
}

/*Banners*/
img[alt*=banner]:not([width]),
.image-embed[alt*=banner]:not([width]) img {
  display: block;
  object-fit: cover;
  width: 100%;
  margin-bottom: 0px;
  clear: both;
}

img[alt~=banner],
.image-embed[alt~=banner] img,
.image-embed[src*="#banner"] {
  height: var(--small);
}

img[alt~="banner+small"],
.image-embed[alt~="banner+small"] img,
.image-embed[src*="#banner+small"] {
  height: var(--tiny);
}

img[alt~="banner+tall"],
.image-embed[alt~="banner+tall"] img,
.image-embed[src*="#banner+tall"] {
  height: var(--medium);
}

:is(img, .internal-embed)[alt*=sban],
:is(img, .internal-embed)[alt~=sban],
.internal-embed[src*="#sban"] img {
  object-fit: cover;
  width: 100%;
}

/*Portait*/
img[alt*=portrait],
.image-embed[alt*=portrait] img {
  object-fit: cover;
}

img[alt~=portrait],
.image-embed[alt~=portrait] img,
.image-embed[src~="#portrait"] {
  height: var(--small-med);
  width: 40%;
}

img[alt~="portrait+small"],
.image-embed[alt~="portrait+small"] img,
.image-embed[src~="#portrait+small"] {
  height: var(--small);
  width: 25%;
}

img[alt~="portrait+tall"],
.image-embed[alt~="portrait+tall"] img,
.image-embed[src~="#portrait+tall"] {
  height: 500px;
  width: 50%;
}

/*Profile*/
img[alt*=profile],
.image-embed[alt*=profile] img {
  object-fit: cover;
  border-radius: 50%;
}

img[alt~=profile],
.image-embed[alt~=profile] img,
.image-embed[src*="#profile"] {
  height: var(--tiny);
  width: var(--tiny);
}

img[alt~="profile+medium"],
.image-embed[alt~="profile+medium"] img,
.image-embed[src*="#profile+medium"] {
  height: var(--small);
  width: var(--small);
}

img[alt~="profile+tall"],
.image-embed[alt~="profile+tall"] img,
.image-embed[src*="#profile+tall"] {
  height: var(--medium);
  width: var(--medium);
}

img[alt~=sprf] {
  object-fit: cover;
  border-radius: 100%;
}

/*Image Shapes*/
img[alt][alt*=circle] {
  border-radius: 50%;
}

img[alt~=square],
.image-embed[alt~=square] img {
  border-radius: 0;
}

img[alt~=border],
.internal-embed[alt~=border] img {
  border: var(--image-border-width) solid var(--image-border-color);
  padding: var(--image-border-padding);
  background: var(--image-border-background);
}

.image-captions .image-embed::after,
.image-embed[src*="#cap"]::after {
  content: attr(alt);
  color: var(--inactive, var(--faint-text));
  display: block;
  text-align: center;
}

.image-embed[src*="#cap"] {
  display: inline-block;
}
.image-embed[src*="#cap"] img {
  float: unset !important;
  object-fit: cover;
}
.image-embed[src*="#cap"][src*="#hmicro"] img {
  height: var(--micro);
}
.image-embed[src*="#cap"][src*="#htiny"] img {
  height: var(--tiny);
}
.image-embed[src*="#cap"][src*="#hsmall"] img {
  height: var(--small);
}
.image-embed[src*="#cap"][src*="#hs-med"] img {
  height: var(--small-med);
}
.image-embed[src*="#cap"][src*="#hm-sm"] img {
  height: var(--med-small);
}
.image-embed[src*="#cap"][src*="#hmed"] img {
  height: var(--medium);
}
.image-embed[src*="#cap"][src*="#hm-tl"] img {
  height: var(--med-tall);
}
.image-embed[src*="#cap"][src*="#htall"] img {
  height: var(--tall);
}
.image-embed[src*="#cap"][src*="#hfull"] img {
  height: 100%;
}
.image-embed[src*="#cap"][src*="#wmicro"], .image-embed[src*="#cap"][src*="#wmicro"] img {
  width: var(--micro);
}
.image-embed[src*="#cap"][src*="#wtiny"], .image-embed[src*="#cap"][src*="#wtiny"] img {
  width: var(--tiny);
}
.image-embed[src*="#cap"][src*="#wsmall"], .image-embed[src*="#cap"][src*="#wsmall"] img {
  width: var(--small);
}
.image-embed[src*="#cap"][src*="#ws-med"], .image-embed[src*="#cap"][src*="#ws-med"] img {
  width: var(--small-med);
}
.image-embed[src*="#cap"][src*="#wm-sm"], .image-embed[src*="#cap"][src*="#wm-sm"] img {
  width: var(--med-small);
}
.image-embed[src*="#cap"][src*="#wmed"], .image-embed[src*="#cap"][src*="#wmed"] img {
  width: var(--medium);
}
.image-embed[src*="#cap"][src*="#wm-tl"], .image-embed[src*="#cap"][src*="#wm-tl"] img {
  width: var(--med-tall);
}
.image-embed[src*="#cap"][src*="#wtall"], .image-embed[src*="#cap"][src*="#wtall"] img {
  width: var(--tall);
}
.image-embed[src*="#cap"][src*="#wfull"], .image-embed[src*="#cap"][src*="#wfull"] img {
  width: 100%;
}

.mobile-image-viewer img[alt][alt][alt] {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/*@settings
name: Image Adjustments
id: image-adjustments
settings:
    - 
        id: info-text-SlRvb-img-adj
        type: info-text
        title: Image Adjustments by SlRvb
        description: "[Image Adjustments Snippet How-To Guide](https://publish.obsidian.md/slrvb-docs/ITS+Theme/Image+Adjustments)"
        markdown: true
    -
        title: List Overlap Fix
        description: Fix list bullets overlapping with images
        id: img-adj-list
        type: class-toggle
        default: true
    -
        title: Clear Images
        description: Push image under/over headings or horizontal lines
        id: img-adj-clears
        type: heading
        level: 1
        collapsed: true
    -
        title: Horizontal Lines
        description: Push image under/over any horizontal lines
        id: clear-hr
        type: class-toggle
    -
        title: Headings
        description: Push image under/over all headings 1-6
        id: clear-headings
        type: class-toggle
    -
        title: Heading Specific
        description: Push image under/over some headings and not others
        id: img-adj-clears-headings
        type: heading
        level: 2
        collapsed: true
    -
        title: Header 1
        id: clear-heading-1
        type: class-toggle
    -
        title: Header 2
        id: clear-heading-2
        type: class-toggle
    -
        title: Header 3
        id: clear-heading-3
        type: class-toggle
    -
        title: Header 4
        id: clear-heading-4
        type: class-toggle
    -
        title: Header 5
        id: clear-heading-5
        type: class-toggle
    -
        title: Header 6
        id: clear-heading-6
        type: class-toggle
*/
/*Theme fixes*/
.img-adj-list :is(ul, ol) {
  display: flow-root;
}