style.css

#extension-layer {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABEVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///9o4Z9eAAAAWXRSTlMAAxVIlt7mr1IYBQk/sfj6/vvPVBABFGrx/e/yihvksm88nI1lxFAEg8E6uDAnqfcGDqL8zivudHn5zFW09pjYZz6GItKrHbsq5XhZ6AvROce/Sgpo8JcCDDLDbjEAAAABYktHRFoDu6WiAAABYklEQVQoz3WSC1OCQBSFr5SQobKbLxbIV6ZokiWKopJlWWllpWXd//9HWqQpc/LMzuzs+XbP3ReAr5CwsxtGLlHai+zDj+RoLK4QHxAaP0gkU4GdSmdUhlQTdV3UKBLVOAxI2uB2NpcvFIuFfC5LkR2tiFzSUTkuVwBME6BSrsaRGUletyaiclL3l/oAwDptoJo4g/Omja2V/w3AqtrkIAJtB50OrAMoZ7GxB10Xe0Jg9PtBX8lRKsHA9i5gQ3mNiDAkzuUmuBIRQUFPMk1zxGOur3nciA+KOgfqNnCzLWpM/y0ehk4cW7cb272zlV24n6A2/XvAh0f0duDJsMnseR3UXxiLCZCyZkhfn39B/URBNRriiXN+7bPpbQCETstFlpH9KYs3Hdl7a1mSpNKypzHUjXRQbDGfMSSe4/FGkIml9PejQ8gyJi7lv4HYrtOsyb8n+ljcd8Y3qjIcdNufoZX1BZNnPVts0zcsAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTAyLTAyVDE3OjEzOjE4KzA4OjAwJfgKpgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0wMi0wMlQxNzoxMzoxOCswODowMFSlshoAAAAASUVORK5CYII=) -12 -12, crosshair;
}

body.dark #extension-layer {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAABDlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///9x76OvAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQffCQIJGzeW//u6AAAAXUlEQVQoz41SgQkAIAjzzf5/JCiHM7ZqUJkzcVpEYiSiYxCcnyjc9iIGJnYwZBxxeFrnsjhl5W5EKzKEqB2s/CCEqAfhU0nClnsVqFtim6jafkyqVJnR/nwGnnxiAt/EVS74izmBAAAAAElFTkSuQmCC) -12 -12, crosshair;
}

#extension-switch {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 500;
}

.material-switch {
    height: 48px;
    width: 48px;
    display: block;
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative;
}

.material-switch[value~=on]:after {
    left: 22px;
    background-color: #009688;
    width: 19px;
    height: 19px;
    top: 14px;
}

.material-switch[value~=on]:before {
    background-color: #6DBDB6;
}

.material-switch:before {
    content: "";
    width: 32px;
    border-radius: 50px;
    height: 13px;
    position: absolute;
    top: 17px;
    left: 8px;
    -webkit-transition: background-color 0.25s;
    -moz-transition: background-color 0.25s;
    -o-transition: background-color 0.25s;
    transition: background-color 0.25s;
    will-change: background-color;
}

.material-switch:after {
    content: "";
    border-radius: 50%;
    position: absolute;
    -webkit-transition: left 0.25s, top 0.25s, height 0.25s, width 0.25s, background-color 0.25s;
    -moz-transition: left 0.25s, top 0.25s, height 0.25s, width 0.25s, background-color 0.25s;
    -o-transition: left 0.25s, top 0.25s, height 0.25s, width 0.25s, background-color 0.25s;
    transition: left 0.25s, top 0.25s, height 0.25s, width 0.25s, background-color 0.25s;
    will-change: left, top, height, width, background-color;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.material-switch:not([value=on]):after {
    left: 6px;
    background-color: #fff;
    width: 21px;
    height: 21px;
    top: 13px;
}

.material-switch:not([value=on]):before {
    background-color: #929292;
}

#ninja-help {
    font-family: "Candal";
    position: fixed;
    top: 14px;
    left: 76px;
    font-size: 36px;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

#ninja-logo {
    position: fixed;
    left: 80px;
    font-size: 33px;
    line-height: 33px;
    animation-name: rainbow;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    top: 14px;
    padding: 8px;
    background-color: hsla(0, 100%, 100%, 0.53);
    border-radius: 24px;
    z-index: 500;
    -webkit-user-select: none;
    cursor: default;
}

@keyframes rainbow {
    0% {
        color: #9C27B0;
    }
    20% {
        color: #3F51B5;
    }
    40% {
        color: #009688;
    }
    60% {
        color: #8BC34A;
    }
    100% {
        color: #FF5722;
    }
}