/*
 * Copied from https://about.front-end.social/css/override.css on 2022-12-27
 * Check the original source for updates.
 * Minor colour and box model adaptations from Jenny
 */

/* show when images have alt text */
.media-gallery__item {
  --alt-crop-x: 6ch;
  --alt-crop-y: 2em;
  --has-alt: #0F3325;
  --no-alt: #3f0000;
  background: var(--has-alt);
  color: white;
}

/* only revealed by cutaway when alt is defined */
.media-gallery__item::after {
  content: "ALT";
  display: grid;
  inset-block-end: 0;
  inset-inline-start: 0;
  min-height: var(--alt-crop-y);
  min-width: var(--alt-crop-x);
  place-content: center;
  position: absolute;
}

/* cut away to reveal badge */
.media-gallery__item img[alt] {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--alt-crop-x) 100%, var(--alt-crop-x) calc(100% - var(--alt-crop-y)), 0 calc(100% - var(--alt-crop-y)));
}

/* Remove the clip path if we can do better with :has() */
.media-gallery__item:has(img) img[alt] {
  clip-path: none;
}

/* Apply better alt-text badge over top of image */
.media-gallery__item:has(img)::after {
  --alt-crop-x: initial;
  --alt-crop-y: initial;
  background: var(--has-alt);
  border: thin solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  inset-block-end: 0.5em;
  inset-inline-start: 0.5em;
  padding: 0.2rem 0.3rem;
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

/* Change badge when no alt is defined */
.media-gallery__item:has(img:not([alt]))::after {
  background: var(--no-alt);
  content: "NO ALT";
}

/*
 * Everything below this point is Jenny's user styles
 */


.rich-formatting {
  font-size: 16px;
}

.landing-page__mascot {
  margin: 0 0 1rem 1rem;
}

.drawer__inner__mastodon {
  padding-bottom: 1rem;
}

.drawer__inner__mastodon > img, 
.drawer__inner__mastodon svg {
  margin: 0 auto;
}

img.custom-emoji[title=':verified:'] {
  visibility: hidden;
}

::-webkit-scrollbar-thumb {
    background: #324861;
    border: 0 #fff;
}

html {
  scrollbar-color: #324861 rgba(50, 72, 97,.25);
}

.rich-formatting h1,
.rich-formatting h2,
.rich-formatting h3,
.rich-formatting h4,
.rich-formatting p {
  color: #fff;
}

body.theme-fairy-floss,
.theme-fairy-floss .ui,
.theme-fairy-floss .admin-wrapper .sidebar-wrapper.sidebar-wrapper--empty,
.theme-fairy-floss .admin-wrapper .sidebar-wrapper__inner,
.theme-fairy-floss .column-link:active,
.theme-fairy-floss .column-link:focus,
.theme-fairy-floss .column-link:hover,
.theme-fairy-floss .simple_form .block-button:hover,
.theme-fairy-floss .simple_form .button:hover,
.theme-fairy-floss .simple_form button:hover,
.theme-fairy-floss .simple_form .block-button:active,
.theme-fairy-floss .simple_form .block-button:focus,
.theme-fairy-floss .simple_form .button:active,
.theme-fairy-floss .simple_form .button:focus,
.theme-fairy-floss .simple_form button:active,
.theme-fairy-floss .simple_form button:focus,
.theme-fairy-floss .button:active,
.theme-fairy-floss .button:focus,
.theme-fairy-floss .button:hover,
.theme-fairy-floss .public-layout .header .nav-button:focus,
.theme-fairy-floss .public-layout .header .nav-button:hover,
.theme-fairy-floss .button.logo-button:focus,
.theme-fairy-floss .button.logo-button:hover,
.theme-fairy-floss .button.logo-button:active,
.theme-fairy-floss .status-card.compact,
.theme-fairy-floss .status-card__image,
.theme-fairy-floss .status-card.compact .status-card__image,
.theme-fairy-floss .notification__filter-bar button:hover,
.theme-fairy-floss .notification__filter-bar button:active,
.theme-fairy-floss .notification__filter-bar button:focus,
.theme-fairy-floss .flash-message,
.theme-fairy-floss .dashboard__quick-access {
  background: #181932;
  border-color: #181932;
}

body.admin,
.theme-fairy-floss .admin-wrapper .sidebar ul a.selected,
.theme-fairy-floss .public-layout .header .nav-button,
.theme-fairy-floss .landing-page__call-to-action,
.theme-fairy-floss .box-widget,
.theme-fairy-floss .column-header,
.theme-fairy-floss .column-header__back-button,
.theme-fairy-floss .column-header__button,
.theme-fairy-floss .column-link__badge,
.theme-fairy-floss .column-subheading,
.theme-fairy-floss .empty-column-indicator,
.theme-fairy-floss .error-column,
.theme-fairy-floss .tabs-bar__wrapper,
.theme-fairy-floss .column > .scrollable,
.theme-fairy-floss .drawer__inner,
.theme-fairy-floss .drawer__inner__mastodon,
.theme-fairy-floss .flex-spacer,
.theme-fairy-floss .getting-started,
.theme-fairy-floss .getting-started__wrapper,
.theme-fairy-floss .drawer__header,
.theme-fairy-floss .nothing-here,
.theme-fairy-floss .public-layout .public-account-bio,
.theme-fairy-floss .public-layout .public-account-header__bar::before,
.theme-fairy-floss .account__header__bar,
.theme-fairy-floss .activity-stream .entry,
.theme-fairy-floss .hero-widget__text,
.theme-fairy-floss .card__bar,
.theme-fairy-floss .accounts-table tbody td,
.theme-fairy-floss .page-header,
.theme-fairy-floss .table > tbody > tr:nth-child(2n+1) > td,
.theme-fairy-floss .table > tbody > tr:nth-child(2n+1) > th,
.theme-fairy-floss .directory__tag a,
.theme-fairy-floss .landing .hero-widget__footer,
.theme-fairy-floss .admin-wrapper .sidebar ul a:focus, .admin-wrapper .sidebar ul a:hover
 {
  background: #324861;
  background-color: #324861;
}

@media screen and (max-width: 600px) {
  .theme-fairy-floss .public-layout .public-account-header__bar {
    background: #324861;
    background-color: #324861;
  }
}

.theme-fairy-floss .admin-wrapper .sidebar,
.theme-fairy-floss .admin-wrapper .sidebar-wrapper,
.theme-fairy-floss .public-layout .public-account-header__image,
.theme-fairy-floss .contact-widget,
.theme-fairy-floss .landing-page__information.contact-widget,
.theme-fairy-floss .public-layout .header,
.theme-fairy-floss .table-of-contents,
.theme-fairy-floss .column-link,
.theme-fairy-floss .search__input,
.theme-fairy-floss .search__input:focus,
.theme-fairy-floss .search__input:hover,
.theme-fairy-floss .drawer__header a:focus,
.theme-fairy-floss .drawer__header a:hover,
.theme-fairy-floss .button,
.theme-fairy-floss .simple_form .block-button,
.theme-fairy-floss .simple_form .button,
.theme-fairy-floss .simple_form button,
.theme-fairy-floss .button.logo-button,
.theme-fairy-floss .account__header__image,
.theme-fairy-floss .account__section-headline,
.theme-fairy-floss .notification__filter-bar,
.theme-fairy-floss .account__section-headline button,
.theme-fairy-floss .notification__filter-bar button,
.theme-fairy-floss .column-back-button,
.theme-fairy-floss .column-inline-form,
.theme-fairy-floss .detailed-status,
.theme-fairy-floss .detailed-status__action-bar,
.theme-fairy-floss .status-card.compact .status-card__content,
.theme-fairy-floss .status-card__content,
.theme-fairy-floss .status-card__content:focus,
.theme-fairy-floss .status-card__content:hover,
.theme-fairy-floss .focusable:focus,
.theme-fairy-floss .focusable:focus .detailed-status,
.theme-fairy-floss .focusable:focus .detailed-status__action-bar,
.theme-fairy-floss .load-more,
.theme-fairy-floss .dashboard__quick-access:active,
.theme-fairy-floss .dashboard__quick-access:focus,
.theme-fairy-floss .dashboard__quick-access:hover,
.theme-fairy-floss .tabs-bar,
.theme-fairy-floss .column-header__button.active,
.theme-fairy-floss .column-header__button.active:focus,
.theme-fairy-floss .column-header__button.active:hover,
.theme-fairy-floss .column-header__collapsible-inner,
.theme-fairy-floss .table td,
.theme-fairy-floss .table th,
.theme-fairy-floss .status.status-direct,
.theme-fairy-floss .admin-wrapper .content__heading__tabs a.selected {
  background: #222b3e;
  background-color: #222b3e;
}

.theme-fairy-floss .notification:has(.status-direct) {
  background: #222b3e;
  background-color: #222b3e;
}

.theme-fairy-floss .status-direct {
  border-width: 0;
}

.theme-fairy-floss .public-layout .header .brand:active,
.theme-fairy-floss .public-layout .header .brand:focus,
.theme-fairy-floss .public-layout .header .brand:hover,
.theme-fairy-floss .admin-wrapper .sidebar ul .simple-navigation-active-leaf a, 
.theme-fairy-floss .icon-with-badge__badge {
  background: #414f6e;
  background-color: #414f6e;
}

.theme-fairy-floss .reply-indicator__content a.unhandled-link,
.theme-fairy-floss .status__content a.unhandled-link,
.theme-fairy-floss .notice-widget a,
.theme-fairy-floss .placeholder-widget a,
.theme-fairy-floss .account-role.admin,
.theme-fairy-floss .simple_form .recommended.admin,
.theme-fairy-floss .empty-column-indicator a,
.theme-fairy-floss .error-column a,
.theme-fairy-floss .follow_requests-unlocked_explanation a,
.theme-fairy-floss .column-link--transparent.active,
.theme-fairy-floss .account__section-headline a.active,
.theme-fairy-floss .account__section-headline button.active,
.theme-fairy-floss .column-header > .column-header__back-button,
.theme-fairy-floss .notification__filter-bar a.active,
.theme-fairy-floss .notification__filter-bar button.active,
.theme-fairy-floss .column-back-button,
.theme-fairy-floss .reply-indicator__content a,
.theme-fairy-floss .status__content a,
.theme-fairy-floss .tabs-bar__link.active,
.theme-fairy-floss .notification__message .fa,
.theme-fairy-floss a.mention,
.theme-fairy-floss .icon-button.active,
.theme-fairy-floss .column-header__back-button,
.theme-fairy-floss .notification.unread::before,
.theme-fairy-floss .status__wrapper.unread::before,
.theme-fairy-floss .filters .filter-subset a.selected,
.theme-fairy-floss .accounts-table .fa.active,
.theme-fairy-floss .table > thead > tr > th,
.theme-fairy-floss .status__content__read-more-button,
.theme-fairy-floss .column-header.active .column-header__icon,
.theme-fairy-floss .account__header__bio .account__header__fields a,
.theme-fairy-floss .about__section__title,
.theme-fairy-floss .prose a {
  color: #c6bbfc;
  border-color: #c6bbfc;
}

.theme-fairy-floss .column-header.active .column-header__icon {
  text-shadow: none;
}

.theme-fairy-floss .react-toggle--checked .react-toggle-track,
.theme-fairy-floss .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track,
.theme-fairy-floss .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track,
.theme-fairy-floss .account__section-headline a.active::before, 
.theme-fairy-floss .account__section-headline button.active::before, 
.theme-fairy-floss .notification__filter-bar a.active::before, 
.theme-fairy-floss .notification__filter-bar button.active::before {
  background: #c6bbfc;
  background-color: #c6bbfc;
}

.public-layout .public-account-header__tabs__tabs .counter.active::after {
  border-bottom-color: #c6bbfc;
}

.react-toggle--checked .react-toggle-thumb {
  border-color: #324861;
}

.theme-fairy-floss .detailed-status__action-bar {
  border-color: #181932;
}