SCSS

www/data/css/styles_eulerpanel.scss

@@ -0,0 +1,100 @@
+@import 'styles_config';
+
+.euler_pnl_base {
+  display: inline-flex;
+  flex-direction: column;
+
+  border: 1px solid #AAA;
+  border-radius: 5px 5px 0 0;
+  margin: 15px;
+}
+
+.euler_pnl_header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 4px;
+  background: #AAA;
+}
+
+.euler_pnl_header a {
+  color: #222;
+  text-decoration: none;
+
+
+  font-family: $FONT_HEADER;
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.euler_pnl_header a:hover {
+  text-decoration: underline;
+}
+
+.euler_pnl_content {
+  display: flex;
+  flex-direction: column;
+
+  background: #DDD;
+
+  padding: 6px;
+}
+
+.euler_pnl_row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 850px) { .euler_pnl_row { flex-direction: column; } }
+
+.euler_pnl_row2 {
+  display: flex;
+  flex-direction: row;
+}
+
+.euler_pnl_cell {
+  width: 24px;
+  height: 24px;
+  font-size: 11px;
+
+  margin: 3px;
+
+  border: 1px solid #333;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.euler_pnl_cell:hover {
+  box-shadow: 0 0 4px #000000;
+}
+
+.euler_pnl_cell a {
+  color: black;
+  text-decoration: none;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.euler_pnl_cell a:hover {
+  color: black;
+  text-decoration: none;
+}
+
+.euler_pnl_cell a:visited {
+  color: black;
+  text-decoration: none;
+}
+
+.euler_pnl_celltime_perfect { background: #98C398; }
+.euler_pnl_celltime_good    { background: #B9D89B; }
+.euler_pnl_celltime_ok      { background: #D8D898; }
+.euler_pnl_celltime_bad     { background: #D8B298; }
+.euler_pnl_celltime_fail    { background: #D89D9D; }
+.euler_pnl_cell_notexist    { background: #CCCCCC; }