Sunshine

There is sunshine on my page
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Sunshine
// @namespace    Sunshine_on_my_page.
// @version      0.3
// @description  There is sunshine on my page
// @author       You
// @match        *://*/*
// @grant        GM_registerMenuCommand
// @grant        GM_getValue
// @grant        GM_setValue
// @icon         https://i.v2ex.co/w2nVO5jns.png
// @noframes
// ==/UserScript==

(function() {
  'use strict';
  const initSunshine = ()=>{
    const sunshineRoot = document.createElement('div')
    sunshineRoot.id = 'sunshine'
    const sunshine = sunshineRoot.attachShadow({mode: open})
    sunshine.innerHTML = `
    <style>
      .panel {
        --window-border-width: 9px;
        --sun-angle: -75deg;
        position: fixed;
        right: 0;
        top: -5vw;
        width: 80vw;
        height: 80vh;
        z-index: 2147483647;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        pointer-events: none;
        transform-origin: top right;
        transform: matrix(1, -0.1, 0, 1, 0, 0)
      }
      .panel > .win-grid {
        width: calc(40vw - var(--window-border-width));
        height: calc(40vh - var(--window-border-width));
        background: rgba(255, 255, 255, .3);
        box-shadow: -3px 3px 6px rgb(255 255 255 / 10%), 3px -3px 18px rgb(0 0 0 / 3%);
      }
      .panel > .win-grid:nth-child(even) {
        background: linear-gradient(var(--sun-angle), rgba(255, 255, 255, .5), rgba(255, 255, 255, .3));
        backdrop-filter: blur(2px) brightness(1.1);
      }
      .panel > .win-grid:nth-child(odd) {
        background: linear-gradient(var(--sun-angle), rgba(255, 255, 255, .3), rgba(255, 255, 255, .1));
        backdrop-filter: blur(1px) brightness(1.05);
      }
    </style>
    <div class="panel">
      <div class="win-grid"></div>
      <div class="win-grid"></div>
      <div class="win-grid"></div>
      <div class="win-grid"></div>
    </div>
    `
    document.documentElement.appendChild(sunshineRoot)
  }
  const exitSunshine = ()=>{
    document.documentElement.removeChild(document.documentElement.querySelector('#sunshine'))
  }
  GM_registerMenuCommand('Toggle Sunshine.', ()=>{
    if(document.documentElement.querySelector('#sunshine')){
      exitSunshine()
      GM_setValue('show_sunshine', false)
      return
    }
    initSunshine()
    GM_setValue('show_sunshine', true)
  })
  if(GM_getValue('show_sunshine', false)) initSunshine()
})();