A CSS snippet for Obsidian.md

figyua.css

/*
* フィギュア F I G Y U A 手辦
* Unlicense | https://gist.github.com/Endermanbugzjfc/f75e8d271057877403725f60700a6a2a
* Please install the Style Settings plugin to configure this snippet.
*
* Credits:
* - A person on Discord: image scalability.
* - ChatGPT: image visibility toggle.
*/
/* @settings
name: Figyua
id: figyua
settings:
  -
    id: hide-figyua
    title: Hide Figyua
    description: "Turning on toggle will set the opacity to 0%. This option can be made into a keybinding or command under the domain of Style Settings plugin. To always hide figyua on a specific file, please add the `cssclasses: hide-figyua` meta property."
    type: class-toggle
    addCommand: true
  -
    id: figyua-set
    title: Figyua Set
    description: Change the set (variant) of figyua. Each set can have different opacity and transformation settings.
    type: class-select
    allowEmpty: false
    options:
      -
        label: Set 1
        value: figyua-set-1
      -
        label: Set 2
        value: figyua-set-2
    default: figyua-set-1
  -
    id: figyua-set-1-heading
    title: Set 1
    type: heading
    level: 1
    collapsed: false
  -
    id: figyua-set-1-heading-image
    title: Image
    type: heading
    level: 2
    collapsed: false
  -
    id: figyua-set-1-url
    title: URL
    description: Upload the image somewhere like Discord and retrieve the URL. Please surround the value with `url()` WITHOUT a double quote.
    type: variable-text
    default: url(https://github.githubassets.com/assets/mona-loading-default-c3c7aad1282f.gif)
  -
    id: figyua-set-1-opacity
    title: Opacity
    description: Opposite meaning of transparency. (in %)
    type: variable-number
    default: 25
  -
    id: figyua-set-1-heading-transformation
    title: Transformation
    type: heading
    level: 2
    collapsed: true
  -
    id: figyua-set-1-bottom-padding
    title: Bottom Padding
    description: Avoid figyua blocking the text in document. Can be removed if your window is large enough that the figyua has its own column to display. (in px)
    type: variable-number
    format: px
    default: 98
  -
    id: figyua-set-2-heading
    title: Set 2
    type: heading
    level: 1
    collapsed: true
  -
    id: figyua-set-2-heading-image
    title: Image
    type: heading
    level: 2
    collapsed: false
  -
    id: figyua-set-2-url
    title: URL
    description: Upload the image somewhere like Discord and retrieve the URL. Please surround the value with `url()` WITHOUT a double quote.
    type: variable-text
    default: url(https://github.githubassets.com/assets/mona-loading-default-c3c7aad1282f.gif)
  -
    id: figyua-set-2-opacity
    title: Opacity
    description: Opposite meaning of transparency. (in %)
    type: variable-number
    default: 100
  -
    id: figyua-set-2-heading-transformation
    title: Transformation
    type: heading
    level: 2
    collapsed: true
  -
    id: figyua-set-2-bottom-padding
    title: Bottom Padding
    description: Avoid figyua blocking the text in document. Can be removed if your window is large enough that the figyua has its own column to display. (in px)
    type: variable-number
    format: px
    default: 98

*/
body { /* https://github.com/mgmeyers/obsidian-style-settings/issues/63 */
  --figyua-set-1-bottom-padding: 98px;
  --figyua-set-1-opacity: 25%;
  --figyua-set-1-url: url(https://github.githubassets.com/assets/mona-loading-default-c3c7aad1282f.gif);
  --figyua-set-2-bottom-padding: 98px;
  --figyua-set-2-opacity: 100%;
  --figyua-set-2-url: url(https://github.githubassets.com/assets/mona-loading-default-c3c7aad1282f.gif);

  /* Fallback for those who does not have Style Settings: */
  --figyua-bottom-padding: var(--figyua-set-1-bottom-padding);
  --figyua-opacity: var(--figyua-set-1-opacity);
  --figyua-url: var(--figyua-set-1-url);
}

.figyua-set-1 {
  --figyua-bottom-padding: var(--figyua-set-1-bottom-padding);
  --figyua-opacity: var(--figyua-set-1-opacity);
  --figyua-url: var(--figyua-set-1-url);
}
.figyua-set-2 {
  --figyua-bottom-padding: var(--figyua-set-2-bottom-padding);
  --figyua-opacity: var(--figyua-set-2-opacity);
  --figyua-url: var(--figyua-set-2-url);
}
.hide-figyua {
  --figyua-opacity: 0%;
}

/* TODO: resolve breaking change compatibilities: */
/* .cm-editor::after, .markdown-preview-view::after, .canvas-wrapper::after { */
body::after {
  /* https://stackoverflow.com/a/78680766 */
  background-image: var(--figyua-url);

  opacity: var(--figyua-opacity);
  /* TODO: turn into style settings (or ask ChatGPT to do it). */
  width: 100px; /* Set desired width                           */
  height: 80px; /* Set desired height                          */
  right: -10px; /* Distance from the right end                 */
  bottom: 40px; /* Distance from the bottom end                */

  display: block;               /* Ensures its visibility,                  no touchy */
  position: fixed;              /* Ensures it is stuck to an anchor point,  no touchy */
  background-repeat: no-repeat; /* Ensures it only displays once,           no touchy */
  background-size: contain;     /* Scales it to fit the element,            no touchy */
  content: '';                  /* Forces the use background image,         no touchy */
}

.markdown-source-view {
  padding-bottom: var(--figyua-bottom-padding);
}