ノート詳細

@arsn5312026-02-28 16:55

CW: 【カスタムCSS】通知ポップアップ虹色にする fix fix

Firefoxでも機能するようにしました！
ちゃんとChromeでも動くﾖ

css
/* 通知ポップアップを虹色にする */
.xpjbG.xqdFD .x7tOU:has(._acrylic),
.xpjbG.xqdFD .notification._acrylic {
    animation: rainbow 3s infinite;
}

.xpjbG.xqdFD .x7tOU:has(._acrylic) {
    border: solid 2px var(--MI_THEME-renote);
}

@keyframes rainbow {
    0% {
        background-color: red;
        box-shadow: 0 0 2rem 0 red;
        color: #fff;
    }

    12.5% {
        background-color: orange;
        box-shadow: 0 0 2rem 0 orange;
        color: #333;
    }

    37.5% {
        background-color: yellow;
        box-shadow: 0 0 2rem 0 yellow;
        color: #333;
    }

    50% {
        background-color: green;
        box-shadow: 0 0 2rem 0 green;
        color: #fff;
    }

    62.5% {
        background-color: aqua;
        box-shadow: 0 0 2rem 0 aqua;
        color: #333;
    }

    75% {
        background-color: blue;
        box-shadow: 0 0 2rem 0 blue;
        color: #fff;
    }

    87.5% {
        background-color: purple;
        box-shadow: 0 0 2rem 0 purple;
        color: #fff;
    }

    100% {
        background-color: red;
        box-shadow: 0 0 2rem 0 red;
        color: #fff;
    }
}

返信

ARSN【アルせな】＠ロトあだ

@arsn5312026-03-01 15:06

public · ローカルのみ

3周年めでたいので通知も賑やかにしましょう！実際に賑やかにしてるやつ

ARSN【アルせな】＠ロトあだ

@arsn5312026-02-28 16:55

public · ローカルのみ · しがない技術屋の質問箱

CW: 【カスタムCSS】通知ポップアップ虹色にする fix fix

Firefoxでも機能するようにしました！
ちゃんとChromeでも動くﾖ

css
/* 通知ポップアップを虹色にする */
.xpjbG.xqdFD .x7tOU:has(._acrylic),
.xpjbG.xqdFD .notification._acrylic {
    animation: rainbow 3s infinite;
}

.xpjbG.xqdFD .x7tOU:has(._acrylic) {
    border: solid 2px var(--MI_THEME-renote);
}

@keyframes rainbow {
    0% {
        background-color: red;
        box-shadow: 0 0 2rem 0 red;
        color: #fff;
    }

    12.5% {
        background-color: orange;
        box-shadow: 0 0 2rem 0 orange;
        color: #333;
    }

    37.5% {
        background-color: yellow;
        box-shadow: 0 0 2rem 0 yellow;
        color: #333;
    }

    50% {
        background-color: green;
        box-shadow: 0 0 2rem 0 green;
        color: #fff;
    }

    62.5% {
        background-color: aqua;
        box-shadow: 0 0 2rem 0 aqua;
        color: #333;
    }

    75% {
        background-color: blue;
        box-shadow: 0 0 2rem 0 blue;
        color: #fff;
    }

    87.5% {
        background-color: purple;
        box-shadow: 0 0 2rem 0 purple;
        color: #fff;
    }

    100% {
        background-color: red;
        box-shadow: 0 0 2rem 0 red;
        color: #fff;
    }
}

2 2 1 5

ARSN【アルせな】＠ロトあだ

@arsn5312026-03-01 14:34

public · ローカルのみ

ARSN【アルせな】＠ロトあだ

@arsn5312026-02-28 16:55

public · ローカルのみ · しがない技術屋の質問箱

CW: 【カスタムCSS】通知ポップアップ虹色にする fix fix

Firefoxでも機能するようにしました！
ちゃんとChromeでも動くﾖ

css
/* 通知ポップアップを虹色にする */
.xpjbG.xqdFD .x7tOU:has(._acrylic),
.xpjbG.xqdFD .notification._acrylic {
    animation: rainbow 3s infinite;
}

.xpjbG.xqdFD .x7tOU:has(._acrylic) {
    border: solid 2px var(--MI_THEME-renote);
}

@keyframes rainbow {
    0% {
        background-color: red;
        box-shadow: 0 0 2rem 0 red;
        color: #fff;
    }

    12.5% {
        background-color: orange;
        box-shadow: 0 0 2rem 0 orange;
        color: #333;
    }

    37.5% {
        background-color: yellow;
        box-shadow: 0 0 2rem 0 yellow;
        color: #333;
    }

    50% {
        background-color: green;
        box-shadow: 0 0 2rem 0 green;
        color: #fff;
    }

    62.5% {
        background-color: aqua;
        box-shadow: 0 0 2rem 0 aqua;
        color: #333;
    }

    75% {
        background-color: blue;
        box-shadow: 0 0 2rem 0 blue;
        color: #fff;
    }

    87.5% {
        background-color: purple;
        box-shadow: 0 0 2rem 0 purple;
        color: #fff;
    }

    100% {
        background-color: red;
        box-shadow: 0 0 2rem 0 red;
        color: #fff;
    }
}