/* ========================================= 1. 전체 배경 강제 고정 및 투명화 (유포리아 방식) ========================================= */ /* 가장 밑바닥(body)에 배경을 깔아 버튼들과의 충돌을 원천 차단합니다[cite: 1] */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; background-size: cover !important; background-attachment: fixed !important; background-position: center !important; opacity: 1 !important; } /* 🖤 다크 모드 메인 배경 */ html[data-color-scheme="dark"] body::before { background-image: url('https://saindo.site/system/media_attachments/files/116/804/936/857/626/503/original/c37d0786007ce62f.png') !important; } /* 🤍 [핵심 함정 돌파] 에 'light'가 들어간 CSS 파일이 로드되면 -> 즉시 요청하신 새 하얀 배경으로 대반전! */ html[data-color-scheme="light"] body::before { background-image: url('https://saindo.site/system/media_attachments/files/116/805/810/568/173/102/original/8ac413095ff04e4b.png') !important; } /* 기본 상위 컨테이너들 뒷배경 완전 투명화 */ body, .ui, .wrapper, .columns-area, .drawer, .scrollable, .columns-area__panels, .columns-area__panels__main, .columns-area__panels__pane { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; } /* 🤍 라이트모드: Mastodon이 React 렌더링 후 덮어쓰는 배경 강제 제거 */ html[data-color-scheme="light"] body, html[data-color-scheme="light"] .ui, html[data-color-scheme="light"] .columns-area, html[data-color-scheme="light"] .columns-area__panels, html[data-color-scheme="light"] .columns-area__panels__main, html[data-color-scheme="light"] .columns-area__panels__pane, html[data-color-scheme="light"] .columns-area__panels__pane__inner, html[data-color-scheme="light"] .drawer, html[data-color-scheme="light"] .scrollable { background: transparent !important; background-color: transparent !important; } /* ========================================= 2. 마스토돈 시스템 전체 테마 변수 강제 변경[cite: 1] ========================================= */ /* 마스토돈의 코어 파란색/보라색을 뿌리째 사인도 초록색(#65D96E)으로 바꿉니다[cite: 1] */ :root, body { --ui-highlight-color: #65D96E !important; --color-brand-blue: #65D96E !important; --color-brand-blue-light: #65D96E !important; --color-brand-blue-dark: #65D96E !important; } /* ========================================= 3. UI 레이아웃 순서 좌우 반전 ========================================= */ .columns-area__panels:not(.admin-wrapper *) { display: flex !important; flex-direction: row !important; justify-content: center !important; } .columns-area__panels__pane--navigational { order: 1 !important; } .columns-area__panels__main { order: 2 !important; } .columns-area__panels__pane--compositional { order: 3 !important; } /* ========================================= 4. 타임라인 피드 영역 및 글씨색 (다크 vs 라이트 철저한 분리) ========================================= */ /* 🖤 다크 모드 타임라인 피드 — data-color-scheme 기반 적용 */ html[data-color-scheme="dark"] .columns-area__panels__main .column, html[data-color-scheme="dark"] .columns-area__panels__main .status, html[data-color-scheme="dark"] .columns-area__panels__main .detailed-status, html[data-color-scheme="dark"] .columns-area__panels__main .status__wrapper, html[data-color-scheme="dark"] .columns-area__panels__main .notification { background-color: rgba(20, 22, 28, 0.90) !important; color: #ffffff !important; } html[data-color-scheme="dark"] .status__content, html[data-color-scheme="dark"] .status__content p, html[data-color-scheme="dark"] .display-name strong { color: #ffffff !important; } /* 🤍 라이트 모드 피드 연회색 */ html[data-color-scheme="light"] .columns-area__panels__main .column, html[data-color-scheme="light"] .columns-area__panels__main .status, html[data-color-scheme="light"] .columns-area__panels__main .status__wrapper, html[data-color-scheme="light"] .columns-area__panels__main .status__wrapper--filtered, html[data-color-scheme="light"] .columns-area__panels__main .notification, html[data-color-scheme="light"] .columns-area__panels__main .detailed-status, html[data-color-scheme="light"] .columns-area__panels__main .scrollable, html[data-color-scheme="light"] .columns-area__panels__main .timeline-hint, html[data-color-scheme="light"] .columns-area__panels__main .load-more, html[data-color-scheme="light"] .columns-area__panels__main .column-header, html[data-color-scheme="light"] .columns-area__panels__main .column-header__wrapper, html[data-color-scheme="light"] .columns-area__panels__main > .column > * { background-color: rgba(235, 237, 240, 0.92) !important; color: #000000 !important; } html[data-color-scheme="light"] .status__content, html[data-color-scheme="light"] .status__content p, html[data-color-scheme="light"] .display-name strong, html[data-color-scheme="light"] .status__content a { color: #000000 !important; } /* ========================================= 5. 왼쪽 메뉴판 텍스트 및 아이콘 반전 ========================================= */ /* 🖤 다크 모드 메뉴 링크 */ html[data-color-scheme="dark"] a.column-link { color: #ffffff !important; } html[data-color-scheme="dark"] a.column-link svg, html[data-color-scheme="dark"] a.column-link path { fill: #ffffff !important; } /* 🤍 라이트 모드 감지 시 (검은색 반전) */ html[data-color-scheme="light"] a.column-link, html[data-color-scheme="light"] .navigation-panel a.column-link { color: #000000 !important; } html[data-color-scheme="light"] a.column-link svg, html[data-color-scheme="light"] a.column-link path { fill: #000000 !important; } /* 💚 다크모드: 호버/활성 초록 */ html[data-color-scheme="dark"] a.column-link:hover, html[data-color-scheme="dark"] a.column-link.active { color: #65D96E !important; } html[data-color-scheme="dark"] a.column-link:hover svg, html[data-color-scheme="dark"] a.column-link:hover path, html[data-color-scheme="dark"] a.column-link.active svg, html[data-color-scheme="dark"] a.column-link.active path { fill: #65D96E !important; } /* 💚 라이트모드: 호버/활성 초록 (텍스트 + 아이콘) */ html[data-color-scheme="light"] a.column-link:hover, html[data-color-scheme="light"] a.column-link.active { color: #65D96E !important; } html[data-color-scheme="light"] a.column-link:hover svg, html[data-color-scheme="light"] a.column-link:hover path, html[data-color-scheme="light"] a.column-link.active svg, html[data-color-scheme="light"] a.column-link.active path { fill: #65D96E !important; } /* ========================================= 6. [성공 유지] 글쓰기 창 초록색 단추 무적 고정[cite: 1] ========================================= */ .compose-form .text-icon-button, .compose-form .privacy-dropdown__value, .compose-form .language-dropdown__value, .privacy-dropdown__value, .language-dropdown__value, .privacy-dropdown button, .language-dropdown button { color: #65D96E !important; border-color: #65D96E !important; background-color: transparent !important; } .compose-form .icon-button, .compose-form__action-bar .icon-button { color: #65D96E !important; } .compose-form .icon-button svg, .compose-form .text-icon-button svg, .compose-form .icon-button path, .compose-form .text-icon-button path, .compose-form .privacy-dropdown__value *, .compose-form .language-dropdown__value *, .privacy-dropdown__value *, .language-dropdown__value * { fill: #65D96E !important; color: #65D96E !important; } .compose-form .button:not(.icon-button), .compose-form button[class*="active"]:not(.icon-button), .compose-form .dropdown-button:not(.icon-button) { background-color: #65D96E !important; border-color: #65D96E !important; color: #ffffff !important; } .compose-form .button:not(.icon-button) svg, .compose-form .button:not(.icon-button) path { fill: #ffffff !important; color: #ffffff !important; } /* 라이트 모드 글쓰기창 입력칸 텍스트 가독성 패치 */ html[data-color-scheme="light"] .autosuggest-textarea__textarea { color: #000000 !important; background-color: rgba(248, 250, 250, 0.95) !important; } /* ========================================= 7. 사인도 로고 강제 교체 ========================================= */ .navigation-panel__logo img, .column-header__logo img, .sidebar-wrapper__logo img, .navigation-panel__logo a svg, .column-header__logo svg, .brand__logo-link svg { display: none !important; } .navigation-panel__logo a, .column-header__logo, .sidebar-wrapper__logo, .brand__logo-link { display: block !important; background-image: url('https://saindo.site/system/media_attachments/files/116/804/957/530/537/428/original/253db8a7e7b9be01.png') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; min-width: 140px !important; min-height: 40px !important; text-indent: -9999px; } /* ========================================= 8. 기본 프로필 및 헤더 이미지 강제 교체 ========================================= */ /* 기본 프로필 (프사 미설정 유저) 강제 교체 */ img[src*="avatars/original/missing.png"] { content: url('https://saindo.site/system/media_attachments/files/116/807/865/771/319/525/original/89be033f027f4f83.png') !important; } /* 기본 헤더 (배너 미설정 유저) 강제 교체 */ img[src*="headers/original/missing.png"] { content: url('https://saindo.site/system/media_attachments/files/116/807/865/724/465/736/original/7327f3235ece673d.png') !important; }