Make quotes widget clear.

stardepp

It is very advantageous that you can make the dashboard widget transparent with Vivaldi 7.1. But it doesn't work with the quotes widget.

Can someone make this mod transparent?

https://forum.vivaldi.net/topic/101613/custom-dashboard-widgets/13

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Quote of the day</title>
  <style>
    @font-face { font-family: 'Comic Sans MS'; src: url('fonts/ComicSans MS-Regular.ttf') format('truetype'); }

     html, body { font-family: 'Comic Sans MS', cursive; font-size: 5vh; height: 100%; }

    /* Theme colors */
    @media (prefers-color-scheme: dark) {
      body { background: var(--colorBg, #000000); color: var(--colorFg, #000000); }
      #author { color: var(--colorHighlightBg, #000000); }
    }

    @media (prefers-color-scheme: light) {
      body { background: var(--colorBg, #fcfcfc); color: var(--colorFg, #000000); }
      #author { color: var(--colorHighlightBg, #000000); }
    }
    
    /* Wrapper */
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2vw;
    }

    p { margin-block-start: unset; }

    #quote, #author { line-height: 1.3; }

    #author { font-size: 4vh; font-style: italic; margin-right: -30vw; }

    /* Small widget layout */
    @media screen and (max-height: 200px) {
      body { display: block; margin-top: 15vh; }
      #quote { font-size: 5vw; }
      #author { font-size: 4.0vw; text-align: end; margin-right: 10vw; text-align: right;}
    }
    
    /* Hides scrollbars */
    ::-webkit-scrollbar { display: none;
    }
  </style>
</head>

<body>
  <p id="quote"></p>
  <p id="author"></p>
  <script>
    const generateQuote = function () {
      let arrayIndex = Math.floor(Math.random() * quote.length);
      document.getElementById("quote").innerHTML = quote[arrayIndex].quote;
      document.getElementById("author").innerHTML = quote[arrayIndex].author;
    }

    function write_quotes(el) {
      const random = Math.floor(Math.random() * data.length);
      const rnd = data[random];
      const author = rnd.author ?
        `${typ(rnd.quote)}${typ(rnd.author)}` :
        typ(rnd.quote);
      console.info(`${random}: ${author}`);
      el.innerHTML = author;
    }

    function init() {
      const quotes = document.getElementById("quote");
      write_quotes(quotes);
    }

    window.onload = function () {
      generateQuote();
    }
  </script>
  <script src="quotes.js"></script>
</body>

</html>

Bild Text

luetage

@stardepp No, it’s a webpage widget, you would have to make the main html canvas of the webpage transparent. Don’t believe that’s possible.

LonM

@stardepp You can use a mod to make the <webivew> of the whole widget less opaque using the css opacity property, but then you will lose contrast on the text. Depending on your reading ability that might or might not be a deal breaker

stardepp

@LonM And how do I create this mod?

LonM

@stardepp A css mod will work, with this content:

.Dashboard-Widgets .dashboard-widget:nth-of-type(3) webview {
    opacity: 0.5;
}

.Dashboard-Widgets .dashboard-widget:nth-of-type(3) {
    background-color: transparent;
}

Change nth-of-type from 3 to whatever position your chosen widget is in, and you can change the opacity a bit to get a number that has enough transparency while still being readable.

stardepp

@LonM Thank you very much for your help, yes it works so well:

Bild Text