✨ add theme hotaru

resource/static/theme-hotaru/css/darkmode.css

@@ -0,0 +1,47 @@
+/* Dark mode */
+
+#darkmodeButton {
+    background-color: black;
+    width: 3rem;
+    height: 3rem;
+    position: fixed;
+    bottom: 2rem;
+    right: 0.5rem;
+    z-index: 9999;
+    border-radius: 50%;
+    outline: 0;
+}
+
+body.dark #darkmodeButton {
+    background-color: white;
+}
+
+body.dark {
+    background: #263236;
+    color: #aaa;
+}
+
+body.dark table.table-striped tr.even {
+    background-color: #212f36;
+}
+
+body.dark table.table-striped tr.odd {
+    background-color: #2f3c42;
+}
+
+body.dark tr.expandRow {
+    background-color: #263238 !important;
+}
+
+body.dark .panel {
+    background-color: #384d58;
+    color: #aaa;
+}
+
+body.dark .panel h3, body.dark .panel span {
+    color: #aaa;
+}
+
+body.dark .page-section {
+    border-bottom: 1px solid #212f36;
+}

resource/static/theme-hotaru/css/main.css

@@ -0,0 +1,312 @@
+body {
+    margin: 0;
+    color: #616366;
+    background: url(../img/bg_parts.png) repeat-y left top, url(../img/bg.png) repeat left top;
+}
+
+a {
+    -webkit-transition: all ease-in .15s;
+    -moz-transition: all ease-in .15s;
+    -ms-transition: all ease-in .15s;
+    -o-transition: all ease-in .15s;
+    transition: all ease-in .15s;
+}
+
+th {
+    padding: 0;
+    text-align: center;
+}
+
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+@media (max-width: 991px) {
+    .container {
+        padding-left: 24px;
+        padding-right: 24px;
+    }
+}
+
+@media (max-width: 767px) {
+    .container {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+}
+
+.page-section {
+    padding-top: 48px;
+    padding-bottom: 55px;
+    border-bottom: 1px solid #edeff2;
+}
+
+@media (max-width: 991px) {
+    .page-section {
+        padding-top: 25px;
+        padding-bottom: 35px;
+    }
+}
+
+.location-header {
+    padding: 0 0 20px 0;
+}
+
+.location-header .h4 {
+    margin: 0;
+}
+
+.location-header .h4 small {
+    display: block;
+    padding: 3px 0 0 0;
+    color: #919699;
+    font-size: 12px;
+    font-weight: 300;
+    text-transform: none;
+}
+
+.location-info {
+    margin: 0 0 -5px 0;
+    font-size: 14px;
+    opacity: 1;
+    visibility: visible;
+    -webkit-transform: translateX(0) translateY(0);
+    transform: translateX(0) translateY(0);
+    -webkit-transition: all ease-in .25s, transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
+    -moz-transition: all ease-in .25s, transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
+    transition: all ease-in .25s, transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.location-info>li {
+    margin: 0;
+}
+
+.location-header>i {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    font-size: 24px;
+}
+
+.location-progress .progress {
+    margin: 0 0 15px 0;
+}
+
+.progress {
+    background-color: #d5dade;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.progress-bar {
+    background: linear-gradient(to right, #44ce78 0%, #43ce9f 100%) !important;
+}
+
+.progress-bar-danger {
+    background: #d9534f !important;
+}
+
+.progress-bar-warning {
+    background: #f0ad4e !important;
+}
+
+.progress-sm {
+    height: 5px;
+}
+
+.table {
+    /* font-size: 0.9rem; */
+    font-weight: 800;
+}
+
+.table>thead>tr>th:first-child {
+    padding-left: 5px;
+}
+
+.table>thead>tr>th:last-child {
+    padding-right: 5px;
+}
+
+.hotaru-cover p,
+h1 {
+    color: white;
+    font-weight: bolder;
+}
+
+
+@media only screen and (min-width: 992px) {
+    .hotaru-cover {
+        background: url(../img/tenshi_l.png) center no-repeat;
+        background-size: 100%;
+    }
+}
+
+@media only screen and (max-width: 992px) {
+
+    #location,
+    tr td:nth-child(4) {
+        display: none;
+        visibility: hidden;
+    }
+
+    .hotaru-cover {
+        background: url(../img/tenshi_l.png) center no-repeat;
+        background-size: 100%;
+    }
+}
+
+@media only screen and (max-width: 720px) {
+
+    #type,
+    tr td:nth-child(3) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #location,
+    tr td:nth-child(4) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #uptime,
+    tr td:nth-child(5) {
+        display: none;
+        visibility: hidden;
+    }
+
+    .hotaru-cover {
+        background: url(../img/tenshi.png) no-repeat;
+        background-size: 100%;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+
+    #type,
+    tr td:nth-child(3) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #location,
+    tr td:nth-child(4) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #uptime,
+    tr td:nth-child(5) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #load,
+    tr td:nth-child(6) {
+        display: none;
+        visibility: hidden;
+    }
+
+    .hotaru-cover {
+        background: url(../img/tenshi.png) no-repeat;
+        background-size: 100%;
+    }
+}
+
+@media only screen and (max-width: 533px) {
+
+    #type,
+    tr td:nth-child(3) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #location,
+    tr td:nth-child(4) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #uptime,
+    tr td:nth-child(5) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #traffic,
+    tr td:nth-child(8) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #load,
+    tr td:nth-child(6) {
+        display: none;
+        visibility: hidden;
+    }
+
+    .hotaru-cover {
+        background: url(../img/tenshi.png) no-repeat;
+        background-size: 100%;
+    }
+
+    @media only screen and (max-width: 450px) {
+        body {
+            font-size: 10px;
+        }
+
+        .content {
+            padding: 0;
+        }
+
+        #name,
+        tr td:nth-child(2) {
+            min-width: 20px;
+            max-width: 60px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+
+        #type,
+        tr td:nth-child(3) {
+            display: none;
+            visibility: hidden;
+        }
+
+        #location,
+        tr td:nth-child(4) {
+            display: none;
+            visibility: hidden;
+        }
+
+        #uptime,
+        tr td:nth-child(5) {
+            display: none;
+            visibility: hidden;
+        }
+
+        #traffic,
+        tr td:nth-child(8) {
+            display: none;
+            visibility: hidden;
+        }
+
+        #hdd,
+        tr td:nth-child(11) {
+            display: none;
+            visibility: hidden;
+        }
+
+        #cpu,
+        #ram {
+            min-width: 20px;
+            max-width: 40px;
+        }
+
+        .hotaru-cover {
+            background: url(../img/tenshi.png) no-repeat;
+            background-size: 100%;
+        }
+    }