modify colors

BlocklyDuino · Oct 8, 2020 · 9cdaa7a · 9cdaa7a
1 parent 17ef8d6
commit 9cdaa7a
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 22 deletions.
diff --git a/blocklyduino/css/overload.css b/blocklyduino/css/overload.css
@@ -0,0 +1,50 @@
+/**
+* @license
+* Copyright 2020 Sébastien CANET
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+
+/* CSS specific added for the theme */
+
+body {
+    background-color: #006468;
+}
+#separator {
+    background-color: #006468;
+}
+#helpModal_header {
+    background-color: #006468;
+}
+.config_content {
+    background-color: #006468;
+}
+.modal-header {
+    background-color: #006468;
+}
+.accordion {
+  background-color: #006468;
+}
+.accordion:hover {
+  color: #006468;
+}
+.active {
+    color: #006468;
+  background-color: #FFCC00;
+}
+.collapsibleButton {
+    background-color: #006468;
+}
+.active:after {
+    color: #006468;
+}
+#lateral-panel-setup-label {
+    color: #006468;
+}
+.closeModal:hover,
+.closeModal:focus {
+    color: #FFCC00;
+}
+/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+.active, .collapsibleButton:hover {
+    background-color: #FFCC00;
+}
diff --git a/css/UI.css b/css/UI.css
@@ -156,7 +156,6 @@ td.tabMiddle {
 
 #separator {
     cursor: col-resize;
-    background-color: #006468;
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='white' stroke='white'/></svg>");
     background-repeat: no-repeat;
     background-position: center;
@@ -191,7 +190,6 @@ td.tabMiddle {
     padding: 5px;
     cursor: move;
     z-index: 10;
-    background-color: #006468;
     color: #fff;
 }
 
@@ -239,7 +237,6 @@ td.tabMiddle {
 }
 .config_content {
     margin: 5px;
-    background-color: #006468;
 }
 #content_code {
     width: 40px;
@@ -330,14 +327,12 @@ td.tabMiddle {
 }
 .closeModal:hover,
 .closeModal:focus {
-    color: #FFCC00;
     text-decoration: none;
     cursor: pointer;
 }
 /* Modal Header */
 .modal-header {
     padding: 10px;
-    background-color: #006468;
     color: white;
     -webkit-border-radius: 15px !important;
     -moz-border-radius: 15px !important;
@@ -388,7 +383,6 @@ td.tabMiddle {
 }
 /* collapsible content inside div */
 .collapsibleButton {
-    background-color: #006468;
     color: #FFFFFF;
     cursor: pointer;
     padding: 10px;
@@ -399,11 +393,6 @@ td.tabMiddle {
     font-size: large;
     font-weight: bold;
 }
-/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
-.active, .collapsibleButton:hover {
-    background-color: #FFCC00;
-    color: #000000;
-}
 /* Style the collapsible content. Note: hidden by default */
 .collapsibleContent {
     visibility: hidden;

diff --git a/css/lateral-panel.css b/css/lateral-panel.css
@@ -13,7 +13,6 @@
     display: grid;
     align-items: center;
     text-align: center;
-    color: #FFFFFF;
 }
 #CLI_title {
     display:flex;
@@ -57,7 +56,6 @@
     height: 28px;
     cursor: pointer;
     font-size: 1.5em;
-    color: #03234B;
 }
 #lateral-panel-CLI-bloc,
 #lateral-panel-setup-label,
@@ -84,7 +82,6 @@
  * accordion effect inside setup panel
  */
 .accordion {
-  background-color: #03234b;
   color: #FFFFFF;
   cursor: pointer;
   padding: 8px;
@@ -105,7 +102,6 @@
 }
 .accordion:hover {
   background-color: #FFFFFF;
-  color: #03234b;
 }
 
 /* Style the accordion panel. Note: hidden by default */

diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
         <link rel="stylesheet" href="./css/lateral-panel.css" />
         <link rel="stylesheet" href="./css/UI.css" />
         <link rel="stylesheet" href="./blocklyduino/css/blocklyduino.css" />
+        <link rel="stylesheet" href="./blocklyduino/css/overload.css" />
     </head>
     <body>
         <div class="table_wrapper">

diff --git a/js/blockly/playground.js b/js/blockly/playground.js
@@ -125,20 +125,14 @@ function fontSpacingPageModify(classToModify, spacingToModify) {
 }
 
 function setOnOffLine() {
-    // Set background colour to differentiate server vs local copy.
+    // Set UI to differentiate server vs local copy.
     if (location.protocol === 'file:') {
-        document.body.style.backgroundColor = '#006468';
-        document.getElementById('CLI_content').style.backgroundColor = '#006468';
-        document.getElementById('setup_content').style.backgroundColor = '#006468';
         document.getElementById('verifyButton').disabled = false;
         document.getElementById('serialButton').disabled = false;
         document.getElementById('uploadButton').disabled = false;
         document.getElementById('serialConnectButton').disabled = false;
         document.getElementById('serialMenu').disabled = false;
     } else {
-        document.body.style.backgroundColor = '#17a1a5';
-        document.getElementById('CLI_content').style.backgroundColor = '#17a1a5';
-        document.getElementById('setup_content').style.backgroundColor = '#17a1a5';
         document.getElementById('verifyButton').disabled = true;
         document.getElementById('serialButton').disabled = true;
         document.getElementById('uploadButton').disabled = true;