☰

CSS: meteoblue.com

Corrections to UI of meteoblue.com

当前为 2025-01-09 提交的版本，查看 最新版本。

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