☰

CSS: meteoblue.com

Corrections to UI of meteoblue.com

  1. // ==UserScript==
  2. // @name          CSS: meteoblue.com
  3. // @description   Corrections to UI of meteoblue.com
  4. // @author        MK
  5. // @namespace     max44
  6. // @homepage      https://greasyfork.org/en/users/309172-max44
  7. // @match         *://www.meteoblue.com/*
  8. // @icon          https://www.meteoblue.com/favicon.ico
  9. // @version       1.5.7
  10. // @license       MIT
  11. // @require       https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
  12. // @run-at        document-idle
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.   'use strict';
  17.  
  18.   //Workaround: This document requires 'TrustedHTML' assignment
  19.   if (window.trustedTypes && trustedTypes.createPolicy) {
  20.     if (!trustedTypes.defaultPolicy) {
  21.       const passThroughFn = (x) => x;
  22.       trustedTypes.createPolicy('default', {
  23.         createHTML: passThroughFn,
  24.         createScriptURL: passThroughFn,
  25.         createScript: passThroughFn,
  26.       });
  27.     }
  28.   }
  29.  
  30.   //CSS for any mode
  31.   var cssUniversal = `
  32.   /*Menu*/
  33.   .nav a {
  34.     padding-top: 7px !important;
  35.     padding-bottom: 7px !important;
  36.   }
  37.   not(.menu-mobile) .nav .section-end::after {
  38.     margin-top: 15px !important;
  39.     margin-bottom: 15px !important;
  40.   }
  41.   .menu-mobile-container .menu-mobile .nav > li > a {
  42.     min-height: 30px !important;
  43.   }
  44.   .menu-mobile-container .menu-mobile .nav > li.section-end + li {
  45.     margin-top: -10px !important;
  46.   }
  47.   .menu-mobile-container .menu-mobile .nav > li {
  48.     height: unset !important;
  49.   }
  50.  
  51.   /*Position of cloud icons*/
  52.   .picto .weekday.alt {
  53.     line-height: unset !important;
  54.   }
  55.  
  56.   /*Font size of temperature*/
  57.   .tab-content .tab-temp-max, .tab-content .tab-temp-min {
  58.     line-height: 24.5px !important;
  59.     font-size: 17.5px !important;
  60.   }
  61.  
  62.   /*Position of time headers*/
  63.   .picto .time time {
  64.     left: 0% !important;
  65.   }
  66.   /*Position and background of meteo condition icons in hourly forecast table*/
  67.   .hourly-forecast .hourlywind .pictoicon {
  68.     top: 0px !important;
  69.     position: relative !important;
  70.     width: unset !important;
  71.   }
  72.   tr.pictos-1h .picon {
  73.     border-radius: 0px !important;
  74.   }
  75.   tr.pictos-1h > td > div > img[src$='_day.svg'] {
  76.     background-color: #88b7df !important;
  77.   }
  78.   tr.pictos-1h > td > div > img[src$='_night.svg'] {
  79.     background-color: #193f57 !important;
  80.   }
  81.   /*tr.pictos-1h > td {
  82.     background-color: #88b7df !important;
  83.   }*/
  84.  
  85.   /*Position of precipitation data in hourly forecast table*/
  86.   .hourly-forecast .hourlywind .precip td span {
  87.     position: unset !important;
  88.   }
  89.   .glyph.rain1h {
  90.     margin-top: -49px !important;
  91.   }
  92.   .hourly-forecast .hourlywind .precip th span:not(.glyph.rain1h)/*:not([style^='margin-top'])*/ {
  93.     position: unset !important;
  94.   }
  95.   /*No precipitation expected*/
  96.   tr.precip > td[colspan="24"] {
  97.     border-top: 1px solid #000 !important;
  98.     border-bottom: 1px solid #000 !important;
  99.     border-right: 1px solid #000 !important;
  100.   }
  101.   tr.precip > td[colspan="24"] > p {
  102.     margin: 10px !important;
  103.     line-height: 0.1em !important;
  104.   }
  105.  
  106.   /*Dividers between cloud icons on 3 hours table*/
  107.   .hourly-forecast .hourlywind tr.pictos_3h td {
  108.     padding: 0 !important;
  109.     border-right-color: gray !important;
  110.     border-right-style: solid !important;
  111.     border-right-width: thin !important;
  112.   }
  113.  
  114.   /*Headers*/
  115.   h2, h3 {
  116.     font-size: 150% !important;
  117.   }
  118.  
  119.   /*Font family and size of 14-days weather table*/
  120.   .forecast-table td {
  121.     font-family: Calibri, Roboto, Arial, sans-serif !important;
  122.     font-size: 120% !important;
  123.     padding-left: 3px !important;
  124.     padding-right: 3px !important;
  125.   }
  126.   .forecast-table > tbody > tr:nth-child(2) > td { /*date*/
  127.     font-size: 90% !important;
  128.   }
  129.   .forecast-table > tbody > tr:nth-child(8) > td, /*predictability*/
  130.   .forecast-table > tbody > tr:nth-child(14) > td { /*precipitation probability*/
  131.     font-size: 105% !important;
  132.   }
  133.   .forecast-table {
  134.     padding-bottom: 5px !important;
  135.   }
  136.   .bloo table a {
  137.     padding-left: unset !important;
  138.     padding-right: unset !important;
  139.   }
  140.  
  141.   /*Predictability bar height*/
  142.   .fdw-svg {
  143.     stroke: #D0D0D0 !important;
  144.     stroke-width: 15 !important;
  145.   }
  146.   line[class^="predictability"] {
  147.     stroke-width: 15 !important;
  148.   }
  149.  
  150.   /*Color of precipitation probability*/
  151.   .precipitation-1 {
  152.     color:#6FBBDF !important;
  153.   }
  154.   .precipitation-2 {
  155.     color:#518CCE !important;
  156.   }
  157.   .precipitation-3 {
  158.     color:#3472B9 !important;
  159.   }
  160.  
  161.   /*Adblock warning*/
  162.   /*div[filter] {
  163.     filter: none !important;
  164.   }*/
  165.   .page-header, .wrapper-main, .wrapper-sda, .navigation-scroll-container, .footer, .footer-quick {
  166.     filter: none !important;
  167.   }
  168.   .unblock-div {
  169.     display: none !important;
  170.   }
  171.   body.unblock {
  172.     overflow: visible !important;
  173.     margin-right: 0px !important;
  174.   }
  175.  
  176.   /*Ad*/
  177.   div.ad1-box, div.ad2, div#fixity, div#display_mobile_ad_in_header {
  178.     display: none !important;
  179.   }
  180.   `;
  181.  
  182.   //CSS for light mode only
  183.   var cssLight = `
  184.   /*Active tab colour*/
  185.   .tab.active:not(.foo) {
  186.     background: #fffeefff !important;
  187.     /*background: #ffffff !important;*/
  188.   }
  189.   /*Tab colour*/
  190.   .tab {
  191.     background: #e7ecf0 !important;
  192.     /*background: #eaeaea !important;*/
  193.   }
  194.   /*Predictability meter background*/
  195.   .tab_content .tab_predictability .meter_outer {
  196.     background-color: hsl(0, 0%, 96.9%) !important;
  197.   }
  198.  
  199.   /*Font color of precipitation probability in hourly forecast table*/
  200.   tr.precip-prop > td > span {
  201.     color: rgb(0, 64, 128) !important;
  202.   }
  203.   /*Font color of precipitation data in hourly forecast table*/
  204.   .hourly-forecast .hourlywind .precip td span {
  205.     color: rgb(0, 64, 128) !important;
  206.   }
  207.   `;
  208.  
  209.   const bodyMode = document.querySelector("body.dark");
  210.   var css;
  211.   if (bodyMode != null) {
  212.     css = cssUniversal;
  213.   } else {
  214.     css = cssUniversal + cssLight;
  215.   }
  216.  
  217.   if (typeof GM_addStyle != 'undefined') {
  218.     GM_addStyle(css);
  219.   } else if (typeof PRO_addStyle != 'undefined') {
  220.     PRO_addStyle(css);
  221.   } else if (typeof addStyle != 'undefined') {
  222.     addStyle(css);
  223.   } else {
  224.     var node = document.createElement('style');
  225.     node.type = 'text/css';
  226.     node.appendChild(document.createTextNode(css));
  227.     document.documentElement.appendChild(node);
  228.   }
  229.  
  230.   //Change body class to remove adblock warning
  231.   const rootCallback = function (mutationsList, observer) {
  232.     var body = document.querySelector("body");
  233.     if (body != null) {
  234.       if (body.getAttribute("class").indexOf("unblock") > -1) {
  235.         if (body.getAttribute("class").indexOf("dark") > -1) {
  236.           body.setAttribute("class", "                         dark");
  237.         } else {
  238.           body.setAttribute("class", "                    ");
  239.         }
  240.       }
  241.     }
  242.   }
  243.  
  244.   const config = {childList: true, subtree: true};
  245.   const rootNode = document.querySelector("body");
  246.   if (rootNode != null) {
  247.     const rootObserver = new MutationObserver(rootCallback);
  248.     rootObserver.observe(rootNode, config);
  249.   }
  250.  
  251.   //Change body class to remove adblock warning
  252.   /*var body;
  253.   let waitForUnblock = setInterval(function() { //Check page content constantly
  254.     body = document.querySelector("body");
  255.     if (body != null) {
  256.       if (body.getAttribute("class").indexOf("unblock") > -1) {
  257.         if (body.getAttribute("class").indexOf("dark") > -1) {
  258.           body.setAttribute("class", "                         dark");
  259.         } else {
  260.           body.setAttribute("class", "                    ");
  261.         }
  262.       }
  263.     }
  264.   }, 500); //Interval to check page content*/
  265.  
  266. })();