diff --git a/script_foreground.js b/script_foreground.js
index 29d55d4..9542b66 100644
--- a/script_foreground.js
+++ b/script_foreground.js
@@ -154,8 +154,10 @@ function appendTool(html){
let watching = document.querySelector('#watching');
let waitBrach = document.querySelector('#waiting-branch');
let watchBrach = document.querySelector('#watching-branch');
+ let toolbarDiv = document.querySelector('#toolbar');
let volume = document.querySelector('#volume');
waiting.addEventListener('click', function(){
+ toolbarDiv.classList = "watching";
waitBrach.style.display = "none";
watchBrach.style.display = "inline";
timer = setInterval(function(){
@@ -168,6 +170,7 @@ function appendTool(html){
return timer;
});
watching.addEventListener('click', function(){
+ toolbarDiv.classList = "waiting";
waitBrach.style.display = "inline";
watchBrach.style.display = "none";
clearInterval(timer);
diff --git a/styles.css b/styles.css
index 83b534b..4fac356 100644
--- a/styles.css
+++ b/styles.css
@@ -15,11 +15,16 @@
width: 30px;
background-color:transparent;
border-radius: 15px;
- border-right: 3px solid #5FB4D8;
display: inline;
float: left;
position: absolute;
}
+#toolbar.waiting>#volume div{
+ border-right: 3px solid rgb(220, 89, 96);
+}
+#toolbar.watching>#volume div{
+ border-right: 3px solid #5FB4D8;
+}
#volume div:first-child{
bottom: 40%;
@@ -64,6 +69,12 @@
font-style: italic;
font-weight: bold;
}
+#toolbar.watching>h1>span{
+ color:#5FB4D8;
+}
+#toolbar.waiting>h1>span{
+ color: rgb(220, 89, 96);
+}
[contenteditable="true"]{
cursor: text !important;