1 files changed, 196 insertions, 0 deletions
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..eaba8a2
--- /dev/null
+++ b/style.css
@@ -0,0 +1,196 @@
+html {
+  background: #ffffff;
+  font: normal 100%/1.4 sans-serif;
+  margin: unset;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  margin: unset;
+}
+
+a {
+  color: #137ba9;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #014c8c;
+  !text-decoration: underline;
+}
+
+#header {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  white-space: nowrap;
+  background-color: white;
+  height: 60px;
+  position: fixed;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
+}
+
+#header_left {
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  align-items: center;
+  width: 228px;
+}
+
+#header_center {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-right: 16px;
+  margin-left: 16px;
+}
+
+#header_right {
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+  align-items: center;
+  margin-right: 8px;
+  width: 228px;
+}
+
+#header_label {
+  color: #949494;
+  font-size: 50px;
+}
+
+#header_image {
+  width: auto;
+  height: 60px;
+  margin-top: 8px;
+  margin-left: 8px;
+}
+
+#header_wiki_label {
+  display: flex;
+  align-items: center;
+  font-size: 24px;
+  margin-left: 8px;
+  height: 100%;
+}
+
+#body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 90px;
+  min-height: 300px;
+}
+
+#content {
+  display: flex;
+  flex-direction: column;
+  width: 800px;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
+  background-color: #f5f5f5;
+  overflow: auto;
+  margin-top: 30px;
+  min-height: 150px;
+  flex-shrink: 1;
+}
+
+.content_item {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  justify-items: stretch;
+  align-items: center;
+  min-height: 50px;
+  height: 80px;
+  border-bottom: 1px solid #e2e2e2;
+}
+
+.content_item:hover {
+  background-color: #efeeee;
+}
+
+.content_item_part {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-left: 1px solid #e2e2e2;
+  border-right: 1px solid #e2e2e2;
+}
+
+.content_item_part_title {
+}
+
+.content_item_part_subtitle {
+  color: #000;
+  font-size: 10px;
+}
+
+.success {
+  color: #58dc42; !#15e005;
+}
+
+.warning {
+  color: #f6cc5e;
+}
+
+.error {
+  color: #ce2323;
+}
+
+#log {
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
+  background-color: #f5f5f5;
+  min-height: 150px;
+  max-height: 600px;
+  white-space: nowrap;
+  overflow: auto;
+  margin-top: 60px;
+  flex-shrink: 5;
+  margin-bottom: 90px;
+}
+
+.log_item {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  justify-items: stretch;
+  align-items: center;
+  border-bottom: 1px solid #e2e2e2;
+  min-height: 34px;
+  width: 100%;
+}
+
+.log_item_part {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-right: 5px;
+}
+
+.time {
+  color: #40bac8;
+  padding-left: 10px;
+}
+
+.service {
+  color: #2196f3;
+}
+
+.log_item:hover {
+  background-color: #efeeee;
+}