shelter.id Dark Mode (Color Inverted) by MaGyul

/* ==UserStyle==
@name         shelter.id Dark Mode (Color Inverted)
@version      20240711.13.33
@namespace    https://userstyles.world/user/MaGyul
@description  Shelter Dark Mode
@author       MaGyul
@license      MIT
==/UserStyle== */

@-moz-document url-prefix("https://shelter.id") {
html body {
    --footer-title-text-color: #cfcfcf;
    --dark: #cfcfcf;
}

body, app-shelter-modal-container, 
button.chat__btn > app-user-name,
div.profile > app-user-name, 
.simple-notice-container > a, 
div.art_txt > app-media-slider img, 
app-froala-container > div.froala-toolbar-container > div.fr-toolbar svg,
app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-popup > div.fr-color-set,
:where(
    img:not(div.fr-element img), 
    video:not(div.fr-element video),
    embed:not(div.fr-element embed),
    iframe:not(div.fr-element iframe),
    object:not(div.fr-element object),
    picture:not(div.fr-element picture),
    canvas:not(div.fr-element canvas),
    span:not(div.fr-element span),
    p:not(div.fr-element p),
    app-shelter-name,
    app-froala-container) {
    filter: invert(1);
}

/* app-froala-container > div.froala-container-wrapper > div.edit-container > div.fr-box > div.fr-wrapper > div.fr-element > p img,
app-froala-container > div.froala-container-wrapper > div.edit-container > div.fr-box > div.fr-wrapper > div.fr-element p span,
app-froala-container > div.froala-container-wrapper > div.edit-container > div.fr-box > div.fr-wrapper > div.fr-element p, */
app-shelter-modal-container :where(img, video, embed, iframe, object, picture, canvas, span, p), 
app-board-list-item > a[style*="--header-color: #000000;"] .title-header, 
div.reward-explanation-container > app-html-content-viewer > div.art_txt,
span[style*="--header-color: #000000;"], 
button.chat__btn > app-user-name > span,
div.profile > app-user-name > img,
div.comment-content-container div.art_txt,
app-html-content-viewer > div.art_txt,
div.art_txt iframe,
div.art_txt span,
div.art_txt > table p,
div.thumbnail-container > img,
app-shelter-name > span {
    filter: unset;
}

span > span, 
div.video-js, 
div.video-js span, 
div.video-js > video,
.setting-menu-title > img,
div.art_txt > p img,
.simple-notice-container > a > div > img {
    filter: invert(0) !important;
}

div.video-js span {
    margin-bottom: 30px;
}

div.video-js > button.vjs-big-play-button > span.vjs-icon-placeholder:before {
    margin-left: -15px;
    margin-top: -22px;
}

app-modal-wrapper {
    background-color: #ffffffcc;
}

main.shelter-modal-content {
    background-color: #ededed;
}

.shelter-modal-dialog .shelter-modal-body, .modal-ref-list, .close-btn {
    background-color: #ededed !important;
}

button.chat__btn {
    background-color: #d0d0d0 !important;
}

button.chat__btn:hover {
    background-color: #60a0e0 !important;
}

app-shelter-wrapper-page {
    background-color:  transparent!important;
}

.shelter-profile-nickname-wrapper > app-shelter-name > span, 
div[role="listitem"] span, 
app-shelter-name > span {
    color: currentColor !important;
}

.fr-box.fr-basic .fr-element, 
.sidebar-title > span {
    color: var(--dark) !important;
}

span, 
div.art_txt > p,
app-user-name:not([style*="--text-color"]) {
    color: var(--dark);
}

[style*="--text-color"] > span {
    color: var(--text-color);
}

app-froala-container > div.froala-toolbar-container > div.fr-toolbar, 
app-froala-container > div.froala-container-wrapper > div.edit-container > div.fr-box > div.fr-wrapper > div.fr-element {
    background-color: black;
}

app-froala-container > div.froala-container-wrapper > div.edit-container > div.fr-box > div.fr-wrapper,
app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-more-toolbar > div.fr-dropdown-menu,
app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-popup span {
    color: #CFCFCF;
}

app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-btn-grp > button.fr-open,
app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-more-toolbar,
app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-popup input,
app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-popup label,
app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-popup {
    background-color: #0A0A0A !important;
}

app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-more-toolbar > button.fr-btn-active-popup,
app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-more-toolbar > div.fr-dropdown-menu,
app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-more-toolbar > button.fr-active,
app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-more-toolbar > button:hover {
    background-color: #202020 !important;
}

app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-more-toolbar > div.fr-dropdown-menu li > a.fr-active {
    background-color: #3a3a3a !important;
}

app-froala-container > div.froala-toolbar-container > div.fr-toolbar > div.fr-more-toolbar > button.fr-command:after {
    filter: invert(1);
}

.remain-fill {
    min-height: 50% !important;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

#shelter-spinner {
    background-color: #dddddde6;
}

.shelter-alert-container {
    background-color: #cccccc66;
}
}