Disable the power button if the schedule is active

src/options/header.css

@@ -61,6 +61,34 @@ html[dark_mode='false'] #header-light { display: none }
 #power-icon {
   display: flex;
   justify-content: center;
+  position: relative;
+}
+#power-pop-up {
+  position: absolute;
+  font-size: 0.85rem;
+  width: 200px;
+  top: 115%;
+  right: -75%;
+  border-radius: var(--border-radius);
+  user-select: none;
+
+  padding: 10px;
+  background-color: var(--body-color);
+  color: var(--body-background-color);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+html[schedule='true'] #power-icon,
+html[schedule='true'] #power-icon svg {
+  cursor: default;
+}
+html[schedule='true'] #power-icon:active {
+  pointer-events: none;
+}
+html[schedule='true'] #power-icon:hover #power-pop-up {
+  opacity: 1;
+  visibility: visible;
 }
 #power-icon svg {
   cursor: pointer;

src/options/main.html

@@ -141,6 +141,7 @@
       </div>
 
       <a title='On/Off' id="power-icon">
+        <div id='power-pop-up'>Button is disabled because the schedule is active.</div>
         <svg id="header-toggle" class='global_enable header-toggle' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
           <path d=" M 244.802 61.643 C 234.168 50.875 224.661 42.297 210.837 35.523 C 202.151 31.261 191.669 34.934 187.47 43.717 C 183.243 52.501 186.889 63.072 195.566 67.334 C 205.86 72.375 212.776 77.95 220.72 85.992 C 259.717 125.427 259.717 189.586 220.72 229.011 C 201.83 248.125 176.694 258.624 149.984 258.624 C 123.266 258.624 98.138 248.116 79.247 229.011 C 40.251 189.586 40.251 125.427 79.247 85.992 C 87.218 77.941 95.099 72.384 104.885 67.352 C 113.15 63.081 116.608 52.519 112.597 43.726 C 108.584 34.952 99.952 31.341 91.482 35.487 C 78.051 42.082 65.844 50.875 55.184 61.643 C 2.901 114.498 2.901 200.488 55.184 253.352 C 81.33 279.775 115.662 293 149.994 293 C 184.334 293 218.666 279.784 244.803 253.352 C 297.104 200.506 297.104 114.507 244.802 61.643 Z  M 149.984 174 C 159.849 174 167.855 165.993 167.855 156.129 L 167.882 24.871 C 167.882 15.007 159.876 7 150.011 7 C 140.145 7 132.139 15.007 132.139 24.871 L 132.139 78.486 L 132.112 156.128 C 132.112 166.002 140.118 174 149.984 174 Z " fill="#000000"/>
         </svg>

src/options/main.js

@@ -203,7 +203,7 @@ function updateTimeInfo() {
   if (!nextTimedChange) {
     const remainingTime = nextChange - Date.now();
     const { days, hours, minutes, seconds } = parseTimeRemaining(remainingTime);
-    let title = `Turning ${nextTimedValue ? 'on' : 'off'} in `;
+    let title = `Turning ${scheduleIsActive ? 'off' : 'on'} in `;
     if (days) title = title.concat(days, ' days and ');
     if (hours) title = title.concat(hours, ' hours and ');
     if (minutes) title = title.concat(minutes, ' minutes and ');