Mastodon 装修相关

/** 管理—网站设置 - 自定义 css **/
/*鼠标选中底色*/
*::selection {
    color: #fff;   /*白色*/
    background-color: #1E82C4;   /*陈玫红*/
}

/* Mastodon custom merged theme: interaction only */

:root {
    --cat-text: #e8eaf5;
    --cat-tag: #1e82c4;
    --cat-tag-soft: rgb(30 130 196 / 0.12);
    --cat-tag-soft-hover: rgb(30 130 196 / 0.2);
    --cat-tag-ring: rgb(30 130 196 / 0.22);
    --cat-mention: #E89191;
    --cb-emoji-scale: 1.95;
    --cb-emoji-shadow:
        0 10px 24px rgb(5 8 18 / 0.32),
        0 2px 6px rgb(5 8 18 / 0.18);
}

html {
    scroll-behavior: smooth;
}

.status__wrapper,
.status,
.detailed-status,
.notification-ungrouped,
.notification,
.reply-indicator {
    position: relative;
    overflow: visible !important;
}

.status,
.detailed-status {
    margin-bottom: 1.1rem;
    transition:
        transform 0.18s ease,
        opacity 0.18s ease;
}

.status:hover,
.detailed-status:hover {
    transform: translate3d(0, -2px, 0);
}

.status__content,
.status__content__text,
.reply-indicator__content,
.display-name {
    overflow: visible !important;
    position: relative;
}

.status__content,
.status__content__text,
.reply-indicator__content,
.detailed-status__wrapper .status__content,
.detailed-status__wrapper .status__content__text {
    color: var(--color-text-primary, var(--cat-text));
}

.status__content {
    padding-bottom: 0.35rem;
}

.status__action-bar,
.detailed-status__action-bar {
    position: relative;
    z-index: 1;
}

/* ===== Hashtags ===== */

.status__content a[href*="/tags/"],
.reply-indicator__content a[href*="/tags/"],
.hashtag-bar > a {
    display: inline-block;
    padding: 0.08em 0.52em;
    margin: 0 0.06em;
    border-radius: 999px;
    color: var(--cat-tag);
    background: var(--cat-tag-soft);
    box-shadow: inset 0 0 0 1px var(--cat-tag-ring);
    text-decoration: none;
    transition:
        transform 0.16s ease,
        background-color 0.16s ease,
        box-shadow 0.16s ease,
        color 0.16s ease;
}

.status__content a[href*="/tags/"]:hover,
.status__content a[href*="/tags/"]:focus-visible,
.reply-indicator__content a[href*="/tags/"]:hover,
.reply-indicator__content a[href*="/tags/"]:focus-visible,
.hashtag-bar > a:hover,
.hashtag-bar > a:focus-visible {
    transform: translateY(-1px);
    color: #f0f8ff;
    background: var(--cat-tag-soft-hover);
    box-shadow:
        inset 0 0 0 1px rgb(30 130 196 / 0.4),
        0 6px 16px rgb(16 24 38 / 0.2);
}

.status__content a.mention,
.reply-indicator__content a.mention,
.status__content .h-card > a,
.reply-indicator__content .h-card > a {
    display: inline;
    padding: 0;
    margin: 0;
    border-radius: 0;
    color: var(--cat-mention);
    background: transparent;
    box-shadow: none;
    text-decoration: none;
}

.status__content a.mention:hover,
.status__content a.mention:focus-visible,
.reply-indicator__content a.mention:hover,
.reply-indicator__content a.mention:focus-visible,
.status__content .h-card > a:hover,
.status__content .h-card > a:focus-visible,
.reply-indicator__content .h-card > a:hover,
.reply-indicator__content .h-card > a:focus-visible {
    transform: none;
    color: #ff7b7b;
    background: transparent;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.08em;
}

/* ===== Emoji hover float ===== */

.status__content img.emojione,
.status__content img.custom-emoji,
.reply-indicator__content img.emojione,
.reply-indicator__content img.custom-emoji,
.display-name img.emojione,
.display-name img.custom-emoji {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 3;
    transform-origin: center center;
    transition:
        transform 0.18s cubic-bezier(.2, .8, .2, 1),
        filter 0.18s ease;
    will-change: transform;
}

.status__content img.emojione:hover,
.status__content img.custom-emoji:hover,
.reply-indicator__content img.emojione:hover,
.reply-indicator__content img.custom-emoji:hover,
.display-name img.emojione:hover,
.display-name img.custom-emoji:hover {
    transform: scale(var(--cb-emoji-scale)) translateY(-1px);
    filter: drop-shadow(var(--cb-emoji-shadow));
    z-index: 90;
}

.status__content img.emojione:active,
.status__content img.custom-emoji:active,
.reply-indicator__content img.emojione:active,
.reply-indicator__content img.custom-emoji:active,
.display-name img.emojione:active,
.display-name img.custom-emoji:active {
    transform: scale(1.76);
    transition: transform 0.08s ease;
}

@supports selector(.status__wrapper:has(img.emojione:hover)) {
    .status__wrapper,
    .status,
    .detailed-status,
    .reply-indicator {
        isolation: isolate;
        z-index: 0;
    }

    .status__wrapper:has(.status__content img.emojione:hover),
    .status__wrapper:has(.status__content img.custom-emoji:hover),
    .status__wrapper:has(.display-name img.emojione:hover),
    .status__wrapper:has(.display-name img.custom-emoji:hover),
    .detailed-status:has(img.emojione:hover),
    .detailed-status:has(img.custom-emoji:hover),
    .reply-indicator:has(img.emojione:hover),
    .reply-indicator:has(img.custom-emoji:hover) {
        z-index: 60;
    }
}

/* ===== Motion ===== */

@media (prefers-reduced-motion: no-preference) {
    .status,
    .detailed-status,
    .notification-ungrouped {
        animation: cat-fade-in-up 0.24s cubic-bezier(.2, .8, .2, 1);
        will-change: transform, opacity;
    }
}

@keyframes cat-fade-in-up {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Chuckya Modern color override for Mastodon/Chuckya 4.6+ */

html[data-color-scheme="light"] {
  color-scheme: light;
  --cat-text: #4a4044;
  --accent: #ae7586;
  --hover-color: rgba(191, 142, 155, 0.14);
  --elevated-color: rgba(211, 167, 159, 0.14);
  --elevated-tint: rgba(255, 249, 247, 0.72);
  --border-color: rgba(135, 109, 118, 0.18);
  --border-color-2: #b59ba2;
  --background-border-color: rgba(135, 109, 118, 0.18);
  --background-color-tint: rgba(246, 236, 233, 0.82);

  --color-text-primary: #43373b;
  --color-text-secondary: #6d6166;
  --color-text-tertiary: #8b7d83;
  --color-text-inverted: #fff9f7;
  --color-text-brand: #a96f80;
  --color-text-brand-soft: #be8a98;
  --color-text-on-brand-base: #fff9f7;
  --color-text-brand-on-inverted: #f3dbe1;
  --color-text-error: #a8696d;
  --color-text-on-error-base: #fff9f7;
  --color-text-warning: #b57a56;
  --color-text-on-warning-base: #fffaf7;
  --color-text-success: #5d817f;
  --color-text-on-success-base: #fffaf7;
  --color-text-disabled: #ac9ba0;
  --color-text-on-disabled: #fbf7f5;
  --color-text-bookmark-highlight: #c4896d;
  --color-text-favourite-highlight: #c58a99;
  --color-text-on-media: #fff8f7;
  --color-text-status-links: #6c84ab;
  --on-input-color: #5b4d52;

  --color-bg-primary: #fbf6f4;
  --color-bg-secondary: #f5ece9;
  --color-bg-secondary-solid: rgba(249, 241, 238, 0.96);
  --color-bg-tertiary: #efe2dd;
  --color-bg-ambient: rgba(252, 247, 245, 0.58);
  --color-bg-inverted: #4a3d43;
  --color-bg-overlay-base: rgba(63, 53, 60, 0.38);
  --color-bg-overlay-highlight: rgba(255, 255, 255, 0.46);
  --color-bg-overlay: rgba(67, 56, 63, 0.58);
  --color-bg-media: rgba(67, 56, 63, 0.28);
  --color-bg-media-base: #473a40;
  --color-bg-disabled: #d8cbcf;
  --color-bg-brand-base: #bb7e8d;
  --color-bg-brand-base-hover: #aa6f7d;
  --color-bg-brand-soft: #efd9de;
  --color-bg-brand-softest: #f7eef0;
  --color-bg-error-base: #b7797b;
  --color-bg-error-base-hover: #a46b6d;
  --color-bg-error-soft: #efd9d8;
  --color-bg-error-softest: #f8efee;
  --color-bg-warning-base: #d09a73;
  --color-bg-warning-soft: #f2e1d2;
  --color-bg-warning-softest: #faf2ea;
  --color-bg-success-base: #7f9f9c;
  --color-bg-success-soft: #dce9e7;
  --color-bg-success-softest: #f2f8f7;

  --color-border-primary: rgba(135, 109, 118, 0.18);
  --color-border-brand: rgba(187, 126, 141, 0.42);
  --color-border-brand-soft: rgba(187, 126, 141, 0.22);
  --color-border-error: rgba(183, 121, 123, 0.35);
  --color-border-success-soft: rgba(127, 159, 156, 0.28);
  --color-border-warning-soft: rgba(208, 154, 115, 0.3);
  --color-border-error-soft: rgba(183, 121, 123, 0.24);
  --color-border-media: rgba(255, 255, 255, 0.18);

  --rich-text-container-color: rgba(233, 222, 219, 0.75);
  --rich-text-text-color: #4c4044;
  --rich-text-decorations-color: #aa8791;
}

html[data-color-scheme="light"] body.app-body {
  background: linear-gradient(155deg, #fffaf8 0%, #f8eeeb 44%, #f1e2e7 100%) !important;
}

html[data-color-scheme="light"] body.app-body::before {
  background:
    radial-gradient(circle at 18% 14%, rgba(239, 192, 202, 0.30) 0, transparent 32%),
    radial-gradient(circle at 84% 20%, rgba(242, 198, 166, 0.22) 0, transparent 26%),
    radial-gradient(circle at 78% 82%, rgba(183, 199, 223, 0.18) 0, transparent 30%),
    linear-gradient(155deg, rgba(255, 251, 249, 0.94) 0%, rgba(247, 236, 233, 0.82) 54%, rgba(241, 226, 231, 0.90) 100%) !important;
}

html[data-color-scheme="light"] .status__content,
html[data-color-scheme="light"] .status__content__text,
html[data-color-scheme="light"] .reply-indicator__content,
html[data-color-scheme="light"] .detailed-status__wrapper .status__content,
html[data-color-scheme="light"] .detailed-status__wrapper .status__content__text {
  color: var(--cat-text) !important;
}

html[data-color-scheme="dark"] {
  color-scheme: dark;
  --cat-text: #c0b8d8;
  --cat-tag: #d8dceb;
  --cat-tag-soft: rgba(216, 220, 235, 0.10);
  --cat-tag-soft-hover: rgba(216, 220, 235, 0.18);
  --cat-tag-ring: rgba(216, 220, 235, 0.34);
  --cat-mention: #c8a040;
  --accent: #a080e0;
  --hover-color: rgba(90, 70, 160, 0.12);
  --elevated-color: rgba(90, 70, 160, 0.08);
  --elevated-tint: rgba(16, 13, 32, 0.75);
  --border-color: rgba(120, 90, 200, 0.22);
  --border-color-2: #6f5aa8;
  --background-border-color: rgba(120, 90, 200, 0.22);
  --background-color-tint: rgba(18, 15, 36, 0.88);

  --color-text-primary: #c0b8d8;
  --color-text-secondary: rgba(192, 184, 216, 0.82);
  --color-text-tertiary: rgba(192, 184, 216, 0.60);
  --color-text-inverted: #0a0814;
  --color-text-brand: #a080e0;
  --color-text-brand-soft: #b295e9;
  --color-text-on-brand-base: #0a0814;
  --color-text-brand-on-inverted: #8f72cf;
  --color-text-error: #c05060;
  --color-text-on-error-base: #0a0814;
  --color-text-warning: #c8a040;
  --color-text-on-warning-base: #0a0814;
  --color-text-success: #40c890;
  --color-text-on-success-base: #0a0814;
  --color-text-disabled: rgba(192, 184, 216, 0.45);
  --color-text-on-disabled: #0a0814;
  --color-text-bookmark-highlight: #c8a040;
  --color-text-favourite-highlight: #b295e9;
  --color-text-on-media: #ece8f8;
  --color-text-status-links: #40c890;
  --on-input-color: #c0b8d8;

  --color-bg-primary: #0a0814;
  --color-bg-secondary: rgba(16, 13, 32, 0.92);
  --color-bg-secondary-solid: rgba(16, 13, 32, 0.96);
  --color-bg-tertiary: rgba(22, 18, 42, 0.96);
  --color-bg-ambient: rgba(10, 8, 20, 0.82);
  --color-bg-inverted: #ece8f8;
  --color-bg-overlay-base: rgba(0, 0, 0, 0.70);
  --color-bg-overlay-highlight: rgba(160, 128, 224, 0.08);
  --color-bg-overlay: rgba(5, 4, 12, 0.75);
  --color-bg-media: rgba(10, 8, 20, 0.60);
  --color-bg-media-base: #0a0814;
  --color-bg-disabled: #3b334d;
  --color-bg-brand-base: #a080e0;
  --color-bg-brand-base-hover: #b295e9;
  --color-bg-brand-soft: rgba(90, 70, 160, 0.20);
  --color-bg-brand-softest: rgba(90, 70, 160, 0.12);
  --color-bg-error-base: #c05060;
  --color-bg-error-base-hover: #cf6977;
  --color-bg-error-soft: rgba(192, 80, 96, 0.18);
  --color-bg-error-softest: rgba(192, 80, 96, 0.10);
  --color-bg-warning-base: #c8a040;
  --color-bg-warning-soft: rgba(200, 160, 64, 0.18);
  --color-bg-warning-softest: rgba(200, 160, 64, 0.10);
  --color-bg-success-base: #40c890;
  --color-bg-success-soft: rgba(64, 200, 144, 0.18);
  --color-bg-success-softest: rgba(64, 200, 144, 0.10);

  --color-border-primary: rgba(120, 90, 200, 0.22);
  --color-border-brand: rgba(160, 128, 224, 0.42);
  --color-border-brand-soft: rgba(160, 128, 224, 0.22);
  --color-border-error: rgba(192, 80, 96, 0.36);
  --color-border-success-soft: rgba(64, 200, 144, 0.28);
  --color-border-warning-soft: rgba(200, 160, 64, 0.28);
  --color-border-error-soft: rgba(192, 80, 96, 0.22);
  --color-border-media: rgba(255, 255, 255, 0.14);

  --rich-text-container-color: rgba(16, 13, 36, 0.85);
  --rich-text-text-color: #c0b8d8;
  --rich-text-decorations-color: #a080e0;
}

html[data-color-scheme="dark"] body.app-body {
  background: linear-gradient(160deg, #0a0814 0%, #110d22 46%, #05040c 100%) !important;
}

html[data-color-scheme="dark"] body.app-body::before {
  background:
    radial-gradient(circle at 18% 14%, rgba(160, 128, 224, 0.30) 0, transparent 34%),
    radial-gradient(circle at 86% 20%, rgba(64, 200, 144, 0.14) 0, transparent 26%),
    radial-gradient(circle at 74% 84%, rgba(200, 160, 64, 0.10) 0, transparent 28%),
    linear-gradient(160deg, rgba(12, 10, 26, 0.92) 0%, rgba(16, 13, 32, 0.88) 52%, rgba(5, 4, 12, 0.96) 100%) !important;
}

html[data-color-scheme="dark"] .status__content,
html[data-color-scheme="dark"] .status__content__text,
html[data-color-scheme="dark"] .reply-indicator__content,
html[data-color-scheme="dark"] .detailed-status__wrapper .status__content,
html[data-color-scheme="dark"] .detailed-status__wrapper .status__content__text {
  color: var(--cat-text) !important;
}

html[data-color-scheme="dark"] .status__content a[href*="/tags/"]:hover,
html[data-color-scheme="dark"] .status__content a[href*="/tags/"]:focus-visible,
html[data-color-scheme="dark"] .reply-indicator__content a[href*="/tags/"]:hover,
html[data-color-scheme="dark"] .reply-indicator__content a[href*="/tags/"]:focus-visible,
html[data-color-scheme="dark"] .hashtag-bar > a:hover,
html[data-color-scheme="dark"] .hashtag-bar > a:focus-visible {
  color: #f1f4fb;
  background: var(--cat-tag-soft-hover);
  box-shadow:
    inset 0 0 0 1px rgba(216, 220, 235, 0.50),
    0 8px 20px rgba(0, 0, 0, 0.32);
}

html[data-color-scheme="dark"] .status__content a:not(.mention):not([href*="/tags/"]),
html[data-color-scheme="dark"] .reply-indicator__content a:not(.mention):not([href*="/tags/"]),
html[data-color-scheme="dark"] .detailed-status__wrapper .status__content a:not(.mention):not([href*="/tags/"]) {
  color: #40c890 !important;
}

html[data-color-scheme="dark"] .status__content a:not(.mention):not([href*="/tags/"]):hover,
html[data-color-scheme="dark"] .status__content a:not(.mention):not([href*="/tags/"]):focus-visible,
html[data-color-scheme="dark"] .reply-indicator__content a:not(.mention):not([href*="/tags/"]):hover,
html[data-color-scheme="dark"] .reply-indicator__content a:not(.mention):not([href*="/tags/"]):focus-visible,
html[data-color-scheme="dark"] .detailed-status__wrapper .status__content a:not(.mention):not([href*="/tags/"]):hover,
html[data-color-scheme="dark"] .detailed-status__wrapper .status__content a:not(.mention):not([href*="/tags/"]):focus-visible {
  color: #67d8a8 !important;
}

html[data-color-scheme="dark"] .status__content a.mention:hover,
html[data-color-scheme="dark"] .status__content a.mention:focus-visible,
html[data-color-scheme="dark"] .reply-indicator__content a.mention:hover,
html[data-color-scheme="dark"] .reply-indicator__content a.mention:focus-visible,
html[data-color-scheme="dark"] .status__content .h-card > a:hover,
html[data-color-scheme="dark"] .status__content .h-card > a:focus-visible,
html[data-color-scheme="dark"] .reply-indicator__content .h-card > a:hover,
html[data-color-scheme="dark"] .reply-indicator__content .h-card > a:focus-visible {
  color: #e0ba62;
}

html[data-color-scheme="dark"] .navigation-panel a,
html[data-color-scheme="dark"] .tabs-bar__wrapper a,
html[data-color-scheme="dark"] .column-header__buttons button,
html[data-color-scheme="dark"] .compose-form__highlightable > .compose-form__dropdowns button,
html[data-color-scheme="dark"] .privacy-dropdown__dropdown,
html[data-color-scheme="dark"] .navigation-panel__menu a,
html[data-color-scheme="dark"] .navigation-panel__compose-button {
  color: inherit !important;
}