Mastodon by nd-

/* ==UserStyle==
@name         Mastodon
@version      20240831.21.51
@namespace    https://userstyles.world/user/nd-
@description  Flexible wide columnsDifferent colors for private messagesImages without description have a red border
@author       nd-
@license      No License
==/UserStyle== */

@-moz-document domain("mamot.fr"), domain("diaspodon.fr"), domain("mastodon.tetaneutral.net"), domain("mstdn.io"), domain("mastodon.top"), domain("piaille.fr") {
/*--------------------------------
Mastodon v4.3 
----------------------------------*/
html {
    /* croll bar colors */
    scrollbar-color: #3d248f #251e4f;
}


/*--------------------------------
Layout
----------------------------------*/
@media screen and (min-width: 630px) {
    .columns-area {
        display: flex;
        width: 100%;
        gap: 0.75rem;
    }
    .columns-area .column,
    .columns-area .drawer {
        flex: 1 !important;
        width: 100% !important;
        background-color: #292631;
    }
    .column,
    .drawer {
        border-right: 1px solid var(--background-border-color);
        border: none;
        padding: 0
    }
    .column:last-child {
        border-right: none;
    }
    .drawer__header {
        border: none;
    }
    .column-header {
        border-bottom: 1px solid var(--background-border-color);
        border: none;
    }
    .column:first-child,
    .drawer:first-child {
        padding-inline: 0.5rem;
    }
}
.drawer__pager {
    border: none;
}
.compose-form {
    padding: 0.75rem;
    gap: 0.75rem;
}
.column .compose-form,
.layout-multiple-columns .compose-form {
    padding: 0.75rem;
}
.column > .scrollable,
.account__section-headline,
.notification__filter-bar {
    border: none
}
.account__section-headline a,
.account__section-headline button,
.notification__filter-bar a,
.notification__filter-bar button {
    padding: 0.5rem 0;
}
.notification__filter-bar button:hover {
    background-color: #563acc;
}
.modal-root__overlay {
    background: rgba(0, 0, 0, .9)
}


/*--------------------------------
Replies & notification
----------------------------------*/
/* Réponses privées */
.status__wrapper-direct,
.detailed-status__wrapper-direct {
    background-color: #212460;
    position: relative;
}
.status__wrapper-direct:before,
.detailed-status__wrapper-direct:before,
.status__wrapper-direct:after,
.detailed-status__wrapper-direct:after {
    --stripe-color: #22509b;
    content: "";
    position: absolute;
    display: block;
    height: 6px;
    width: 100%;
    background: var(--stripe-color);
    background: repeating-linear-gradient(-45deg, var(--stripe-color), var(--stripe-color) 6px, transparent 3px, transparent 12px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-bottom: 0;
}
.status__wrapper-direct:after,
.detailed-status__wrapper-direct:after {
    bottom: 0;
}
.notification-ungrouped--direct .notification-ungrouped__header,
.notification-ungrouped--direct .status__prepend,
.status__wrapper-direct .notification-ungrouped__header,
.status__wrapper-direct .status__prepend,
.detailed-status__wrapper-direct .detailed-status .status__prepend {
    background: inherit;
    color: #88bafb;
}
.status__wrapper-direct .status {
    border-bottom-color: #535353;
}
.detailed-status__wrapper-direct .detailed-status,
.detailed-status__wrapper-direct .detailed-status__action-bar {
    background: inherit;
}

/* Réponses */
.column:has(.notification__filter-bar) .status__wrapper-unlisted,
.column:has(.notification__filter-bar) .status__wrapper-reply {
    background-color: #1c1e42;
}
.column:has(.notification__filter-bar) .status__wrapper-unlisted .status,
.column:has(.notification__filter-bar) .status__wrapper-reply .status {
    border-bottom-color: #535353;
}

/* Notifications */
.column:has(.notification__filter-bar) .notification .status__wrapper-unlisted,
.column:has(.notification__filter-bar) .notification .status__wrapper-reply {
    background: inherit;
    outline: inherit;
}
.column:has(.notification__filter-bar) .notification .status__wrapper-unlisted .status,
.column:has(.notification__filter-bar) .notification .status__wrapper-reply .status {
    border-bottom-color: var(--background-border-color);
}
.column:has(.notification__filter-bar) .notification .status-card__title,
.column:has(.notification__filter-bar) .notification .status-card__author {
    color: inherit;
}


/*--------------------------------
Content warning & filtered messages
----------------------------------*/
/* Content warnings moins violents */
.content-warning::after,
.content-warning::before {
    background: #b202ec;
}
/* Messages masqués par un filtre plus discrets */
.content-warning--filter::after,
.content-warning--filter::before {
    background: #4c1382;
}


/*--------------------------------
Images 
----------------------------------*/
/* Images sans description */
.media-gallery img:not([alt]),
.status-card__image img:not([alt]) {
    outline: 3px solid red;
    outline-offset: -3px;
}
/* alt vide */
.media-gallery img[alt=""],
.status-card__image img[alt=""] {
    outline: 3px solid #f90;
    outline-offset: -3px;
}
.status-card__image:has(img[alt=""]) .status-card__image-preview {
    /*display: none;*/
}
/* Ratio des images */
.account__header__image {
    aspect-ratio: 16 / 9;
    height: auto;
}
.media-gallery {
    aspect-ratio: 4/3 !important;
}
}

@-moz-document url-prefix("https://example.com/") {

}

@-moz-document url-prefix("https://example.com/") {

}

@-moz-document url-prefix("https://example.com/") {

}