☰

CSS: meteoblue.com

Corrections to UI of meteoblue.com

目前为 2022-12-02 提交的版本。查看 最新版本。

  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.2
  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.   //CSS for any mode
  17.   var cssUniversal = `
  18.   /*Position of cloud icons*/
  19.   .picto .weekday.alt {
  20.     line-height: unset !important;
  21.   }
  22.  
  23.   /*Font size of temperature*/
  24.   .tab-content .tab-temp-max, .tab-content .tab-temp-min {
  25.     line-height: 24.5px !important;
  26.     font-size: 17.5px !important;
  27.   }
  28.  
  29.   /*Position and background of meteo condition icons in hourly forecast table*/
  30.   .hourly-forecast .hourlywind .pictoicon {
  31.     top: 0px !important;
  32.     position: relative !important;
  33.     width: unset !important;
  34.   }
  35.   tr.pictos-1h .picon {
  36.     border-radius: 0px !important;
  37.   }
  38.   tr.pictos-1h > td > div > img[src$='_day.svg'] {
  39.     background-color: #88b7df !important;
  40.   }
  41.   tr.pictos-1h > td > div > img[src$='_night.svg'] {
  42.     background-color: #193f57 !important;
  43.   }
  44.   /*tr.pictos-1h > td {
  45.     background-color: #88b7df !important;
  46.   }*/
  47.  
  48.   /*Position of precipitation data in hourly forecast table*/
  49.   .hourly-forecast .hourlywind .precip td span {
  50.     position: unset !important;
  51.   }
  52.   .glyph.rain1h {
  53.     margin-top: -49px !important;
  54.   }
  55.   .hourly-forecast .hourlywind .precip th span:not(.glyph.rain1h)/*:not([style^='margin-top'])*/ {
  56.     position: unset !important;
  57.   }
  58.   /*No precipitation expected*/
  59.   tr.precip > td[colspan="24"] {
  60.     border-top: 1px solid #000 !important;
  61.     border-bottom: 1px solid #000 !important;
  62.     border-right: 1px solid #000 !important;
  63.   }
  64.   tr.precip > td[colspan="24"] > p {
  65.     margin: 10px !important;
  66.     line-height: 0.1em !important;
  67.   }
  68.  
  69.   /*Dividers between cloud icons on 3 hours table*/
  70.   .hourly-forecast .hourlywind tr.pictos_3h td {
  71.     padding: 0 !important;
  72.     border-right-color: gray !important;
  73.     border-right-style: solid !important;
  74.     border-right-width: thin !important;
  75.   }
  76.  
  77.   /*Headers*/
  78.   h2, h3 {
  79.     font-size: 150% !important;
  80.   }
  81.  
  82.   /*Font family and size of 14-days weather table*/
  83.   .forecast-table td {
  84.     font-family: Calibri, Roboto, Arial, sans-serif !important;
  85.     font-size: 120% !important;
  86.   }
  87.  
  88.   /*Predictability bar height*/
  89.   .fdw-svg {
  90.     stroke: #D0D0D0 !important;
  91.     stroke-width: 15 !important;
  92.   }
  93.   line[class^="predictability"] {
  94.     stroke-width: 15 !important;
  95.   }
  96.  
  97.   /*Color of precipitation probability*/
  98.   .precipitation-1 {
  99.     color:#6FBBDF !important;
  100.   }
  101.   .precipitation-2 {
  102.     color:#518CCE !important;
  103.   }
  104.   .precipitation-3 {
  105.     color:#3472B9 !important;
  106.   }
  107.  
  108.   /*Adblock warning*/
  109.   /*div[filter] {
  110.     filter: none !important;
  111.   }*/
  112.   .page-header, .wrapper-main, .wrapper-sda, .navigation-scroll-container, .footer, .footer-quick {
  113.     filter: none !important;
  114.   }
  115.   .unblock-div {
  116.     display: none !important;
  117.   }
  118.   body.unblock {
  119.     overflow: visible !important;
  120.     margin-right: 0px !important;
  121.   }
  122.  
  123.   /*Ad*/
  124.   div.ad1-box, div.ad2, div#fixity {
  125.     display: none !important;
  126.   }
  127.   `;
  128.  
  129.   //CSS for light mode only
  130.   var cssLight = `
  131.   /*Active tab colour*/
  132.   .tab.active:not(.foo) {
  133.     background: #fffeefff !important;
  134.     /*background: #ffffff !important;*/
  135.   }
  136.   /*Tab colour*/
  137.   .tab {
  138.     background: #e7ecf0 !important;
  139.     /*background: #eaeaea !important;*/
  140.   }
  141.   /*Predictability meter background*/
  142.   .tab_content .tab_predictability .meter_outer {
  143.     background-color: hsl(0, 0%, 96.9%) !important;
  144.   }
  145.  
  146.   /*Font color of precipitation probability in hourly forecast table*/
  147.   tr.precip-prop > td > span {
  148.     color: rgb(0, 64, 128) !important;
  149.   }
  150.   /*Font color of precipitation data in hourly forecast table*/
  151.   .hourly-forecast .hourlywind .precip td span {
  152.     color: rgb(0, 64, 128) !important;
  153.   }
  154.   `;
  155.  
  156.   const bodyMode = document.querySelector("body.dark");
  157.   var css;
  158.   if (bodyMode != null) {
  159.     css = cssUniversal;
  160.   } else {
  161.     css = cssUniversal + cssLight;
  162.   }
  163.  
  164.   if (typeof GM_addStyle != 'undefined') {
  165.     GM_addStyle(css);
  166.   } else if (typeof PRO_addStyle != 'undefined') {
  167.     PRO_addStyle(css);
  168.   } else if (typeof addStyle != 'undefined') {
  169.     addStyle(css);
  170.   } else {
  171.     var node = document.createElement('style');
  172.     node.type = 'text/css';
  173.     node.appendChild(document.createTextNode(css));
  174.     document.documentElement.appendChild(node);
  175.   }
  176.  
  177.   //Change body class to remove adblock warning
  178.   const rootCallback = function (mutationsList, observer) {
  179.     var body = document.querySelector("body");
  180.     if (body != null) {
  181.       if (body.getAttribute("class").indexOf("unblock") > -1) {
  182.         if (body.getAttribute("class").indexOf("dark") > -1) {
  183.           body.setAttribute("class", "                         dark");
  184.         } else {
  185.           body.setAttribute("class", "                    ");
  186.         }
  187.       }
  188.     }
  189.   }
  190.  
  191.   const config = {childList: true, subtree: true};
  192.   const rootNode = document.querySelector("body");
  193.   if (rootNode != null) {
  194.     const rootObserver = new MutationObserver(rootCallback);
  195.     rootObserver.observe(rootNode, config);
  196.   }
  197.  
  198.   //Change body class to remove adblock warning
  199.   /*var body;
  200.   let waitForUnblock = setInterval(function() { //Check page content constantly
  201.     body = document.querySelector("body");
  202.     if (body != null) {
  203.       if (body.getAttribute("class").indexOf("unblock") > -1) {
  204.         if (body.getAttribute("class").indexOf("dark") > -1) {
  205.           body.setAttribute("class", "                         dark");
  206.         } else {
  207.           body.setAttribute("class", "                    ");
  208.         }
  209.       }
  210.     }
  211.   }, 500); //Interval to check page content*/
  212.  
  213. })();