urlmanager

www/data/css/styles.css

@@ -0,0 +1,212 @@
+body {
+    margin: 0;
+    background-color: #EEE;
+    
+    color: #CCC;
+}
+
+#content {
+    padding-top: 64px;
+    display: flex;
+    justify-content: center;
+}
+
+.headerdiv {
+    background-color: #333;
+    display: flex;
+    border-bottom: 1px solid #111;
+    box-shadow: 0 0 8px #000000;
+    position: fixed;
+    width: 100%;
+}
+
+.headerdiv .logowrapper {
+    flex: initial;
+    margin: 0;
+    padding: 0;
+    height: 42px;
+}
+
+.headerdiv > .logowrapper > .logo {
+    height: 30px;
+    margin: 4px 0px 8px 6px;
+    flex: initial;
+}
+
+.tabrow {
+    display: flex;
+    flex: auto;
+}
+
+.tab {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: #222;
+    color: #CCC;
+    border-left:  1px solid #000;
+    border-right: 1px solid #000;
+    font-weight: bold;
+
+    margin: 0px 0px 0px 20px;
+    padding: 2px 5px;
+    min-width: 64px;
+    text-align: center;
+
+    flex: initial;
+}
+
+.tab:hover {
+    cursor: pointer;
+    background-color: #555;
+}
+
+.tab_github {
+    background-color: #4078c0;
+    border-left:  1px solid #111;
+    border-right: 1px solid #111;
+    color: black;
+}
+
+.tab_split {
+    flex: auto;
+}
+
+.tab_github:hover {
+    background-color: #c9510c;
+    color: black;
+}
+
+@media (max-width: 850px) {
+
+    .headerdiv {
+        position: static;
+    }
+    
+    .logowrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .headerdiv {
+        flex-direction: column;
+    }
+
+    .tabrow {
+        flex-direction: column;
+    }
+
+    .tab {
+        border: 1px solid #000;
+        font-weight: bold;
+
+        margin: 5px 10px;
+    }
+    
+    #content {
+        padding-top: 0px;
+    }
+}
+
+
+/*############################################################################*/
+
+.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;
+    font-weight: bold;
+    text-decoration: none;
+
+    font-size: large;
+}
+
+.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; }
+