Mastodon #NoAltNoBoost (elk.zone) by julienbenard49

/* ==UserStyle==
@name         Mastodon #NoAltNoBoost (elk.zone)
@version      20230811.12.32
@namespace    userstyles.world/user/julienbenard49
@description  Change styles for Mastodon posts containing image without alt-text on elk.zone web-client
@author       ELCourtez
@license      No License
==/UserStyle== */

@-moz-document domain("elk.zone") {
/*VARIABLES*/
:root {
  --retoot_button_display:flex; /* Display or not boost button on post containing image without alt-text : flex or none */
  --retoot_button_color:red; /*Boost button color on post containing image without alt-text*/
  --retoot_button_events:none; /* "none" to make boost button unclickable, else "default" */
  --image_border_style: dashed; /* none / solid / dashed / dotted */
  --image_border_color:red;
  --image_border_height:3px;
  --image_opacity: 100%; /*Opacity of images without alt-text : 0% to 100%*/
  --image_opacity_hover: 100%; /*Hover opacity of images without alt-text : 0% to 100%*/
  --image_blur: 0px; /*Blur on images without alt-text : 0% to 100%*/
  --image_blur_hover: 0px; /*Hover blur on images without alt-text : 0% to 100%*/
}
}

@-moz-document domain("elk.zone") {
/*RETOOT BUTTON STYLES*/
/*CSS code to remove boost button on post containing image without alt-text*/
.vue-recycle-scroller__item-view:has(div.status-media-container img.status-attachment-image[alt="Image"]) div:has(> button div.i-ri\:repeat-line),
.vue-recycle-scroller__item-view:has(div.status-media-container > div > button > video):not(:has( div > button + div > div.v-popper > button > div[hidden=""])) div:has(> button div.i-ri\:repeat-line)
{
  display: var(--retoot_button_display, flex);
}

/*CSS code to make boost button red on post containing image without alt-text*/
.vue-recycle-scroller__item-view:has(div.status-media-container img.status-attachment-image[alt="Image"]) button .i-ri\:repeat-line,
.vue-recycle-scroller__item-view:has(div.status-media-container > div > button > video):not(:has( div > button + div > div.v-popper > button > div[hidden=""])) button .i-ri\:repeat-line
{
    background-color: var(--retoot_button_color,red);
}

/*CSS code to make boost button non-clickable*/
.vue-recycle-scroller__item-view:has(div.status-media-container img.status-attachment-image[alt="Image"]) button:has(.i-ri\:repeat-line),
.vue-recycle-scroller__item-view:has(div.status-media-container > div > button > video):not(:has( div > button + div > div.v-popper > button > div[hidden=""])) button:has(.i-ri\:repeat-line)
{
   pointer-events: var(--retoot_button_events,none);
}
}

@-moz-document domain("elk.zone") {
/*IMAGES AND VIDEOS STYLES*/
/**/
.vue-recycle-scroller__item-view div.status-media-container img.status-attachment-image[alt="Image"],
.vue-recycle-scroller__item-view div.status-media-container > div > button:has(video):not(:has( + div > div.v-popper > button > div[hidden=""])) > video
{
    border: var(--image_border_height,3px) 
            var(--image_border_style,dashed) 
            var(--image_border_color,red);
    opacity: var(--image_opacity,0%);
    filter: blur(var(--image_blur,100px));      
}

/*Image and video opacity on mouse over*/
.vue-recycle-scroller__item-view:has(div.status-media-container img.status-attachment-image[alt="Image"]) img.status-attachment-image:hover,
.vue-recycle-scroller__item-view div.status-media-container > div > button:has(video):not(:has( + div > div.v-popper > button > div[hidden=""])) > video:hover
{
    opacity: var(--image_opacity_hover,100%);
    filter: blur(var(--image_blur_hover,0px));    
}
}