优化外观和动画效果

src/index.css

@@ -21,6 +21,8 @@ body {
     position: absolute;
     top: -200%;
     left: 0;
+    box-shadow: 0 0rem 10rem black;
+    overflow: hidden;
 }
 
 .light {
@@ -45,16 +47,28 @@ body {
     -moz-transition-delay: 0.5s;
     -o-transition-delay: 0.5s;
     -webkit-transition-delay: 0.5s;
-    animation: fadin-and-out 0.8s;
-    animation-delay: 0.5s;
-    animation-fill-mode: forwards;
 }
 
-@keyframes fadin-and-out {
-    0%  {opacity: 0}
-    10% {opacity: 90}
-    70% {opacity: 100}
-    100% {opacity: 0}
+.percents {
+    position: absolute;
+    left: 0;
+    top: 46%;
+    color: white;
+    margin-left: -2.5rem;
+    font-size: 1.5rem;
+    opacity: 0;
+}
+
+.percents.fadein {
+    -webkit-transition: 6s ease-out;
+    transition: 6s ease-out;
+    opacity: 100;
+}
+
+.percents.fadeout {
+    -webkit-transition: 3s ease-in;
+    transition: 3s ease-in;
+    opacity: 0;
 }
 
 .progress-ctn .title {

src/index.html

@@ -18,6 +18,7 @@
         <div class="past">
             <div class="light"></div>
         </div>
+        <span class="percents clear-text"></span>
         <div class="title">
             <span class="clear-text" contenteditable="true"></span>
         </div>
@@ -53,6 +54,7 @@
     </div>
 
     <script src="network.js"></script>
+    <script src="theme.js"></script>
     <script src="index.js"></script>
 
 </body>

src/index.js

@@ -119,27 +119,33 @@ function refreshColors(){
     var bgColor = Settings.bgColor;
     var fgColor = Settings.fgColor;
     if(bgColor){
-        $('.progress-ctn').style['background-color'] = bgColor;
-        $('.progress-ctn .title').style['color'] = bgColor;
-        $('.search-ctn input').style['color'] = bgColor;
-        $('.suggestions-ctn').style['color'] = bgColor;
+        Theme.changeRule('.progress-ctn', 'background-color', bgColor);
+        Theme.changeRule('.progress-ctn .title', 'color', bgColor);
+        Theme.changeRule('.search-ctn input', 'color', bgColor);
+        Theme.changeRule('.suggestions-ctn', 'color', bgColor);
+        Theme.changeRule('.percents', 'color', bgColor);
     }
     if(fgColor){
-        $('.progress-ctn .past').style['background-color'] = fgColor;
-        $('.clear-text').style['text-shadow'] = '2px 0 2px ' + fgColor + ',0 2px 2px ' + fgColor + ',-2px 0 2px ' + fgColor + ',0 -2px 2px ' + fgColor;
+        Theme.changeRule('.progress-ctn .past', 'background-color', fgColor);
+        Theme.changeRule('.progress-ctn .past', 'box-shadow', '0 0rem 10rem ' + fgColor);
+        Theme.changeRule('.clear-text', 'text-shadow', '2px 0 2px ' + fgColor + ',0 2px 2px ' + fgColor + ',-2px 0 2px ' + fgColor + ',0 -2px 2px ' + fgColor);
     }
     if(bgColor && fgColor){
-        $('.clear-box-shadow').style['box-shadow'] = '2px 2px 1rem ' + fgColor + ', -2px -2px 1rem ' + bgColor;
+        Theme.changeRule('.clear-box-shadow', 'box-shadow', '2px 2px 1rem ' + fgColor + ', -2px -2px 1rem ' + bgColor);
     }
 }
 
-//高光动画
+//高光和百分比动画
 function initLight(){
     $('.progress-ctn .past').onmouseover = function(){
         $('.progress-ctn .light').classList.add('ani');
+        $('.progress-ctn .percents').classList.remove('fadeout');
+        $('.progress-ctn .percents').classList.add('fadein');
     };
     $('.progress-ctn .past').onmouseout = function(){
         $('.progress-ctn .light').classList.remove('ani');
+        $('.progress-ctn .percents').classList.remove('fadein');
+        $('.progress-ctn .percents').classList.add('fadeout');
     };
 }
 
@@ -304,6 +310,9 @@ function setProgress(past, total){
     var pastPercent = (past / total * 1000) / 10;
     var past = $('.progress-ctn .past');
     aniToPast(pastPercent);
+    var percentSpan = $('.percents');
+    percentSpan.style.left = pastPercent + '%';
+    percentSpan.innerHTML = (Math.round(pastPercent * 10) / 10) + '%';
     if(pastPercent > 90){
         past.style.transform = 'rotate(' + (100 - pastPercent) + 'deg)';
     }else{

src/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "__MSG_pluginName__",
     "short_name": "__MSG_shortName__",
-    "version": "1.0.6",
+    "version": "1.0.7",
     "description": "__MSG_pluginDesc__",
     "icons":
     {

src/theme.js

@@ -0,0 +1,23 @@
+var Theme = {
+    cssRulesMap: {},
+    loadCssRules: function(){
+        var cssSheets = document.styleSheets;
+        for(var i = 0; i < cssSheets.length; i++){
+            var cssSheet = document.styleSheets[i];
+            if(!cssSheet.disabled){
+                var cssRules = cssSheet.cssRules;
+                for(var j = 0; j < cssRules.length; j++){
+                    Theme.cssRulesMap[cssRules[j].selectorText] = cssRules[j];
+                }
+            }
+        }
+    },
+    changeRule: function(selector, style, newValue){
+        var cssRule = Theme.cssRulesMap[selector];
+        if(cssRule){
+            cssRule.style[style] = newValue;
+        }
+    }
+};
+
+Theme.loadCssRules();