☰

CSS: meteoblue.com

Corrections to UI of meteoblue.com

目前为 2022-10-20 提交的版本。查看 最新版本。

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