included chart header and improved styling

lavolp3 · Aug 24, 2020 · 28beacb · 28beacb
1 parent 677f715
commit 28beacb
Show file tree

Hide file tree

Showing 8 changed files with 235 additions and 147 deletions.
diff --git a/MMM-AVStock.css b/MMM-AVStock.css
@@ -9,35 +9,54 @@
   line-height:1.5em;
 }
 
-#AVSTOCK_CANVAS {
-  width: 100%;
-  height: 250px;
-  padding: 5px;
+#AVSTOCK .changeP {
+    margin-left: 6px;
 }
 
-#AVSTOCK_SERIES .stock {
-  display: flex;
-  flex-direction: column;
+#AVSTOCK .up .change,
+#AVSTOCK .up .changeP {
+  color: #0f0;
 }
 
-#AVSTOCK_SERIES .anchor {
-  display: flex;
-  flex-direction: row;
+#AVSTOCK .down .change,
+#AVSTOCK .down .changeP {
+  color: #f00f00;
 }
 
-#AVSTOCK_SERIES .symbol {
-  font-size: 16px;
-  color: #FFF;
+#AVSTOCK .up .change::before,
+#AVSTOCK .up .changeP::before {
+  content: " ▲";
+}
+
+#AVSTOCK .down .change::before,
+#AVSTOCK .down .changeP::before {
+  content: " ▼";
+}
+
+#AVSTOCK .stock_item {
+  padding: 2px 10px;
+  background-color:#444;
+  border: 1px solid #666;
+  margin: 5px;
+  width: 200px;
+  line-height: 1.2em;
+  display: inline-block;
 }
 
+#AVSTOCK .anchor {
+  display:flex;
+  flex-direction:row;
+}
+
+
+/***** TICKER *****/
 
 #AVSTOCK .ticker-wrap {
   width: 100%;
   overflow: hidden;
   box-sizing: content-box;
 }
 
-
 #AVSTOCK .ticker-wrap .ticker {
   white-space: nowrap;
   box-sizing: content-box;
@@ -72,88 +91,51 @@
   }
 }
 
-#AVSTOCK .ticker-wrap .ticker__item {
-  padding: 2px 10px;
-  background-color:#444;
-  border: 1px solid #666;
-  margin: 5px;
-  width: 200px;
-  line-height: 1.2em;
-  display: inline-block;
-}
-
-#AVSTOCK .ticker__item .item_sect {
-  display:flex;
-  flex-direction:column;
-}
-#AVSTOCK .ticker__item .item_sect.anchor {
-  display:flex;
-  flex-direction:row;
-}
 
+/***** TABLE *****/
 
 #AVSTOCK_TABLE {
   border-spacing: 2px;
   border-collapse: separate;
   text-align: center;
 }
 
-
-
-#AVSTOCK .tagline {
-  font-size: 16px;
-  text-align:right;
-}
-
-#AVSTOCK .tagline.alert:before {
-  color: orange;
-}
-
 #AVSTOCK td {
   margin:2px;
   padding:5px 5px;
   line-height:1.5em;
 }
 
-#AVSTOCK .animated {
-  animation: flash linear 1s;
-}
-
-
 #AVSTOCK thead td {
   background-color:#999;
   color:#000;
   font-weight:bold;
   text-align: center;
 }
 
-#AVSTOCK .stock .symbol {
+#AVSTOCK .stock_tr .symbol {
   color:#FFF;
   font-weight:bold;
   text-align:left;
 }
 
-#AVSTOCK .stock .price {
+#AVSTOCK .price {
   color:#FF9;
   font-weight:bold;
 }
 
-#AVSTOCK .up .change,
-#AVSTOCK .up .changeP {
-  color: #0f0;
-}
 
-#AVSTOCK .down .change,
-#AVSTOCK .down .changeP {
-  color: #f00f00;
+/***** ALL *****/
+
+#AVSTOCK .tagline.alert:before {
+  color: orange;
 }
 
-#AVSTOCK .up .change::before,
-#AVSTOCK .up .changeP::before {
-  content: " ▲ ";
+#AVSTOCK .animated {
+  animation: flash linear 1s;
 }
 
-#AVSTOCK .down .change::before,
-#AVSTOCK .down .changeP::before {
-  content: " ▼ ";
+#AVSTOCK .tagline {
+  font-size: 16px;
+  text-align:right;
 }