1 files changed, 247 insertions, 149 deletions
diff --git a/views/menu.css b/views/menu.css
index d6fc60e..dea591c 100644
--- a/views/menu.css
+++ b/views/menu.css
@@ -1,150 +1,248 @@
-.services li .item {
-    padding: 4px;
-    font-size: 20px;
-    width: 300px;
-    border-color: transparent;
-    margin-right: auto !important;
-    display: block;
-    text-align: left;
-    border-left-width: 3px;
-    border-left-style: solid;
-    border-color: transparent;
-}
-
-.services {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    top: 150px;
-    padding-top: 50px;
-}
-
-.services li {
-    color: transparent;
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
-
-.services li .item a {
-    color: white !important;
-    text-decoration: none;
-    transition: color 200ms;
-}
-
-.services li.selected .item a {
-    text-decoration: none;
-}
-
-.services:not(.services-settings) li.selected .item {
-    border-color: #00ff99;
-    animation-direction: alternate-reverse;
-    animation-duration: 3s;
-    animation-name: border-overlay;
-    animation-fill-mode: both;
-    animation-iteration-count: infinite;
-}
-
-.services.services-settings li.selected .item {
-    border-color: #00ff99;
-    background-color: rgba(0, 255, 153, 0.25);
-    animation-direction: alternate-reverse;
-    animation-duration: 3s;
-    animation-name: border-overlay2;
-    animation-fill-mode: both;
-    animation-iteration-count: infinite;
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
-}
-
-@keyframes border-overlay {
-    0% {
-        border-color: #00ff66;
-    }
-    100% {
-        border-color: #00ccff;
-    }
-}
-
-@keyframes border-overlay2 {
-    0% {
-        border-color: #00ff66;
-        background-color: rgba(0, 255, 102, 0.25);
-    }
-    100% {
-        border-color: #00ccff;
-        background-color: rgba(0, 204, 255, 0.25);
-    }
-}
-
-.services li .item {
-    margin-left: 12.5px;
-    transition: margin-left 200ms, background-color 200ms, border 200ms;
-}
-
-.services li .help {
-    color: white;
-    margin-left: 5px;
-    display: inline-block;
-    font-size: 12px;
-    position: relative;
-    top: -2.5px;
-    opacity: 0;
-    transition: opacity 200ms;
-}
-
-.services li .help.exit {
-    color: #ff6969;
-}
-
-.services li.selected .help {
-    opacity: 1;
-}
-
-#copyright {
-    color: rgba(255, 255, 255, .5);
-    position: fixed;
-    bottom: 30px;
-    right: 30px;
-    text-align: right;
-    font-size: 12px;
-}
-
-.setting-status {
-    float: right;
-}
-
-#notice {
-    color: white;
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    width: 180px;
-    text-align: right;
-    font-size: 14px;
-}
-
-#scroll {
-    display: block;
-    text-align: center;
-    color: white;
-    padding-top: 100vh;
-    padding-bottom: 100vh;
-}
-
-.cred-title {
-    color: yellow;
-}
-
-.cred-content {
-    color: white;
-}
-
-.technical {
-    color: cyan;
-}
-
-.item-icon {
-    filter: invert(1);
-    vertical-align: middle;
+.services li .item {
+    padding: 4px;
+    font-size: 20px;
+    width: 300px;
+    border-color: transparent;
+    margin-right: auto !important;
+    display: block;
+    text-align: left;
+    border-left-width: 3px;
+    border-left-style: solid;
+    border-color: transparent;
+}
+
+.services {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    top: 150px;
+    padding-top: 50px;
+}
+
+.services li {
+    color: transparent;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.services li .item a {
+    color: white !important;
+    text-decoration: none;
+    transition: color 200ms;
+}
+
+.services li.selected .item a {
+    text-decoration: none;
+}
+
+.services:not(.services-settings) li.selected .item {
+    background-color: rgba(0, 255, 153, 0.25);
+    backdrop-filter: blur(10px);
+    border-radius: 10px;
+    animation-direction: alternate-reverse;
+    position: relative;
+    z-index: 9999999999;
+    animation-duration: 3s;
+    animation-name: border-overlay;
+    animation-fill-mode: both;
+    animation-iteration-count: infinite;
+}
+
+.services.services-settings li.selected .item {
+    border-color: #00ff99;
+    background-color: rgba(0, 255, 153, 0.25);
+    animation-direction: alternate-reverse;
+    animation-duration: 3s;
+    animation-name: border-overlay2;
+    animation-fill-mode: both;
+    animation-iteration-count: infinite;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+@keyframes border-overlay {
+    0% {
+        background-color: rgba(0, 255, 102, 0.25);
+    }
+    100% {
+        background-color: rgba(0, 204, 255, 0.25);
+    }
+}
+
+@keyframes border-overlay2 {
+    0% {
+        border-color: #00ff66;
+        background-color: rgba(0, 255, 102, 0.25);
+    }
+    100% {
+        border-color: #00ccff;
+        background-color: rgba(0, 204, 255, 0.25);
+    }
+}
+
+.services li .item {
+    margin-left: 12.5px;
+    transition: margin-left 200ms, background-color 200ms, border 200ms;
+}
+
+.services li .help {
+    color: white;
+    margin-left: 5px;
+    display: inline-block;
+    font-size: 12px;
+    position: relative;
+    top: -2.5px;
+    opacity: 0;
+    transition: opacity 200ms;
+}
+
+.services li .help.exit {
+    color: #ff6969;
+}
+
+.services li.selected .help {
+    opacity: 1;
+}
+
+#copyright {
+    color: rgba(255, 255, 255, .5);
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    text-align: right;
+    font-size: 12px;
+}
+
+.setting-status {
+    float: right;
+}
+
+#notice {
+    color: white;
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    width: 180px;
+    text-align: right;
+    font-size: 14px;
+}
+
+#scroll {
+    display: block;
+    text-align: center;
+    color: white;
+    padding-top: 100vh;
+    padding-bottom: 100vh;
+}
+
+.cred-title {
+    color: yellow;
+}
+
+.cred-content {
+    color: white;
+}
+
+.technical {
+    color: cyan;
+}
+
+.item-icon {
+    filter: invert(1);
+    vertical-align: middle;
+    display: inline-block;
+    margin-top: 3px;
+    margin-bottom: -1px;
+}
+
+div.services.home {
+    top: 115px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    bottom: 70px;
+    z-index: 9999;
+}
+
+div.services.home > div.items > ul > li > span.item {
+    width: 216px;
+    border-radius: 0;
+}
+
+div.services.home > div.items > ul > li > span.item > a {
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 100%;
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+div.services.home > div.items {
+    width: 256px;
+}
+
+div.services.home > div.items > ul {
+    padding: 0;
+}
+
+div.services.home > div.items > ul > li {
+    list-style: none;
+}
+
+div.services.home > div.items > ul > li > span.item {
+    margin-left: 10vw;
+    transition: none;
+}
+
+img[alt="full-logo"] {
+    margin-left: calc(10vw + 37.5px) !important;
+    margin-top: 55px !important;
+    height: 56px !important;
+    z-index: 99999;
+    position: fixed;
+}
+
+span#copyright {
+    bottom: 46px;
+    left: 10vw;
+    z-index: 9999;
+    color: rgba(255, 255, 255, 0.75);
+    right: unset;
+    width: 227px;
+    text-align: center;
+}
+
+#services-background {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    width: 227px;
+    z-index: 9;
+    backdrop-filter: blur(10px);
+    background: rgba(0, 0, 0, 0.5);
+    left: 10vw;
+}
+
+.item-text {
+    vertical-align: middle;
+    margin-top: 8px;
+    display: inline-block;
+}
+
+@media (max-height: 600px) {
+    img[alt="full-logo"][src="../logo/full.png"].full-logo {
+        margin-top: 16px !important;
+    }
+
+    span#copyright.copyright {
+        bottom: 14px !important;
+    }
+}
+
+body {
+    height: calc(100vh / 1.2);
+    overflow: hidden;
 }
 \ No newline at end of file