From 5ef42ac4f89290e04f7a5cfad6a1caeb07edde7f Mon Sep 17 00:00:00 2001
From: Malthbern <grantjackson95@gmail.com>
Date: Sat, 17 May 2025 21:28:28 -0500
Subject: [PATCH] Updated to work with latest UI changes

---
 ui.css | 291 ++++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 205 insertions(+), 86 deletions(-)

diff --git a/ui.css b/ui.css
index 1aec4b1..e9f09da 100755
--- a/ui.css
+++ b/ui.css
@@ -8,6 +8,12 @@
 14,814%
 */
 
+:root {
+    --menu-opacity: 0.8;
+    /* Malth is a nerd btw */
+    --menu-bg-colour: 55, 48, 33;
+}
+
 html {
     font-size: 2em;
 }
@@ -22,6 +28,8 @@ body {
     /*font-family: 'Droid Sans';*/
     font-size: 32px;
     color: #ffffff;
+
+    text-shadow: 2px 2px 8px #000;
 }
 
 h1 {
@@ -100,7 +108,7 @@ h1 {
 }
 
 .button.color-primary.disabled:hover {
-    background: #3c3c3c;
+    background: #1b5037;
 }
 
 .button.color-primary:active {
@@ -135,8 +143,7 @@ h1 {
     overflow: hidden;
 
     box-sizing: border-box;
-    //border: 3px solid #17452f;
-    background-color: rgba(55, 48, 33, 0.8);
+    background-color: rgba(var(--menu-bg-colour), var(--menu-opacity));
 
     display: flex;
 
@@ -172,7 +179,7 @@ h1 {
 }
 
 .home-background {
-    background-color: rgba(55, 48, 33, 0.8);
+    background-color: rgba(var(--menu-bg-colour), var(--menu-opacity));
 }
 
 .content.in {
@@ -296,7 +303,6 @@ h1 {
     width: 2em;
     height: 2em;
     border-radius: 50%;
-    border: 1px solid #ffffff;
     margin: 0.5em;
 
     z-index: 1;
@@ -421,7 +427,7 @@ h1 {
     list-style: none;
     width: 20px;
     height: 20px;
-    background: rgba(96, 183, 199, 0.5);
+    background: rgba(228, 54, 0, 0.7);
     animation: animate 25s linear infinite;
     bottom: calc(-150px - 40vh);
 }
@@ -432,8 +438,10 @@ h1 {
     height: 80px;
     animation-delay: 0s;
     animation-duration: 20s;
-    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
-    background: rgba(47, 44, 92, 0.5);
+    mask-image: url("gfx/HexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+    background: rgba(158, 66, 38, 0.7);
 }
 
 .hexagons li:nth-child(2) {
@@ -442,8 +450,10 @@ h1 {
     height: 20px;
     animation-delay: 0s;
     animation-duration: 25s;
-    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
-    background: rgba(96, 183, 199, 0.5);
+    mask-image: url("gfx/hexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+    background: rgba(228, 54, 0, 0.7);
 }
 
 .hexagons li:nth-child(3) {
@@ -452,8 +462,10 @@ h1 {
     height: 20px;
     animation-delay: 0s;
     animation-duration: 20s;
-    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
-    background: rgba(47, 44, 92, 0.5);
+    mask-image: url("gfx/HexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+    background: rgba(158, 66, 38, 0.7);
 }
 
 .hexagons li:nth-child(4) {
@@ -462,8 +474,10 @@ h1 {
     height: 60px;
     animation-delay: 0s;
     animation-duration: 15s;
-    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
-    background: rgba(114, 63, 145, 0.5);
+    mask-image: url("gfx/HexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+    background: rgba(201, 123, 99, 0.7);
 }
 
 .hexagons li:nth-child(5) {
@@ -472,8 +486,10 @@ h1 {
     height: 20px;
     animation-delay: 0s;
     animation-duration: 20s;
-    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
-    background: rgba(96, 183, 199, 0.5);
+    mask-image: url("gfx/HexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+    background: rgba(228, 54, 0, 0.7);
 }
 
 .hexagons li:nth-child(6) {
@@ -482,8 +498,10 @@ h1 {
     height: 90px;
     animation-delay: 0s;
     animation-duration: 25s;
-    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
-    background: rgba(114, 63, 145, 0.5);
+    mask-image: url("gfx/HexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+    background: rgba(201, 123, 99, 0.7);
 }
 
 .hexagons li:nth-child(7) {
@@ -492,8 +510,10 @@ h1 {
     height: 50px;
     animation-delay: 0s;
     animation-duration: 30s;
-    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
-    background: rgba(47, 44, 92, 0.5);
+    mask-image: url("gfx/HexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+    background: rgba(158, 66, 38, 0.7);
 }
 
 .hexagons li:nth-child(8) {
@@ -502,8 +522,10 @@ h1 {
     height: 25px;
     animation-delay: 0s;
     animation-duration: 35s;
-    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
-    background: rgba(114, 63, 145, 0.5);
+    mask-image: url("gfx/HexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+    background: rgba(201, 123, 99, 0.7);
 }
 
 .hexagons li:nth-child(9) {
@@ -512,8 +534,10 @@ h1 {
     height: 15px;
     animation-delay: 0s;
     animation-duration: 40s;
-    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
-    background: rgba(47, 44, 92, 0.5);
+    mask-image: url("gfx/HexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+    background: rgba(158, 66, 38, 0.7);
 }
 
 .hexagons li:nth-child(10) {
@@ -522,8 +546,10 @@ h1 {
     height: 50px;
     animation-delay: 0s;
     animation-duration: 45s;
-    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
-    background: rgba(96, 183, 199, 0.5);
+    mask-image: url("gfx/HexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+    background: rgba(228, 54, 0, 0.7);
 }
 
 @keyframes animate {
@@ -535,6 +561,9 @@ h1 {
         transform: translateY(-60vh) rotate(360deg);
         opacity: 1;
     }
+    80% {
+        opacity: 1;
+    }
     100% {
         transform: translateY(-120vh) rotate(720deg);
         opacity: 0;
@@ -549,7 +578,6 @@ h1 {
 
 .content-shortcuts {
     border-radius: 0.25em;
-    border: 3px solid #59885d;
 }
 
 #home .content-shortcuts .action-btn {
@@ -565,7 +593,6 @@ h1 {
 
 .content-debug {
     border-radius: 0.25em;
-    border: 3px solid #59885d;
     padding: 0.5em;
     margin-bottom: 10px;
 }
@@ -577,15 +604,14 @@ h1 {
 
 .content-panic {
     border-radius: 0.25em;
-    border: 3px solid #59885d;
     margin-bottom: 10px;
 }
 
 .content-feed {
     border-radius: 0.25em;
-    border: 3px solid #59885d;
     margin-bottom: 10px;
     height: 74%;
+    position: relative;
 }
 
 .content-panic .action-btn {
@@ -602,7 +628,6 @@ h1 {
 
 .content-shortcuts-2 {
     border-radius: 0.25em;
-    border: 3px solid #59885d;
 }
 
 #home .content-shortcuts-2 .action-btn {
@@ -620,7 +645,6 @@ h1 {
 
 .content-profile {
     border-radius: 0.25em;
-    border: 3px solid #59885d;
     text-align: center;
     padding: 0.5em 0 0.5em 0;
     margin-bottom: 10px;
@@ -670,12 +694,17 @@ h1 {
 }
 
 .profile-pic {
-    width: 10.5em;
-    height: 10em;
-    margin: 0.5em 0;
+    width: 11em;
+    height: 11em;
     background: #333333;
     aspect-ratio: 1/cos(30deg);
-    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
+    mask-image: url("gfx/HexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+}
+
+.profile-pic:hover {
+    filter: brightness(75%);
 }
 
 .profile-username {
@@ -731,7 +760,7 @@ h1 {
 
 /*World Detail*/
 #world-detail {
-    background-color: #373021;
+    background-color: #222222;
 }
 
 #world-detail h1 {
@@ -1050,7 +1079,7 @@ h1 {
 /*Instancing*/
 .world-instancing {
     position: absolute;
-    background-color: #373021;
+    background-color: #222222;
     top: 6%;
     bottom: 9%;
     left: -100%;
@@ -1103,11 +1132,11 @@ h1 {
 
 .btn-region .region-select {
     width: 33.333333%;
-    background-color: #373021;
+    background-color: #222222;
 }
 .btn-rule .rule-select {
     width: 50%;
-    background-color: #373021;
+    background-color: #222222;
 }
 .btn-region .region-select + .region-select,
 .btn-rule .rule-select + .rule-select {
@@ -1127,7 +1156,7 @@ h1 {
 /*Avatar Categories*/
 .favorite-category-selection {
     position: absolute;
-    background-color: #373021;
+    background-color: #222222;
     top: 6%;
     bottom: 9%;
     left: -100%;
@@ -1181,7 +1210,7 @@ h1 {
 
 /*Instance Detail*/
 #instance-detail {
-    background-color: #373021;
+    background-color: #222222;
 }
 
 #instance-detail h1 {
@@ -1191,6 +1220,18 @@ h1 {
     margin-right: 4em;
 }
 
+/*Group Detail*/
+#group-detail {
+    background-color: #222222;
+}
+
+#group-detail h1 {
+    text-align: left;
+    margin-top: 0.3em;
+    margin-left: 0.5em;
+    margin-right: 4em;
+}
+
 .content-instance-owner {
     position: absolute;
     top: 10%;
@@ -1207,6 +1248,10 @@ h1 {
     width: 13.5em;
     height: 13.5em;
     margin-left: 0.5em;
+    mask-image: url("gfx/HexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+    align-self: center;
 }
 
 .content-instance-owner h2 {
@@ -1332,7 +1377,7 @@ h1 {
 
 /*User Detail*/
 #user-detail {
-    background-color: #373021;
+    background-color: #222222;
 }
 #user-detail h1 {
     text-align: left;
@@ -1340,6 +1385,15 @@ h1 {
     margin-left: 0.5em;
     margin-right: 4em;
 }
+#our-user-detail {
+    background-color: #222222;
+}
+#our-user-detail h1 {
+    text-align: left;
+    margin-top: 0.3em;
+    margin-left: 0.5em;
+    margin-right: 4em;
+}
 .user-sidebar {
     position: absolute;
     top: 10%;
@@ -1352,24 +1406,32 @@ h1 {
     border: 3px solid #59885d;
 }
 #user-detail .online-state {
-    position: absolute;
-    width: 2em;
-    height: 2em;
-    border-radius: 50%;
-    border: 2px solid #ffffff;
-    margin: 1em;
-
-    z-index: 1;
-
-    background: #cc0000;
+    z-index: 0;
+    width: 15em;
+    height: 15em;
+    mask-image: url("gfx/HexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+    align-self: center;
+    display: flex;
+    justify-content: center;
 }
 
 #user-detail .online-state.online {
     background: #00cc00;
 }
+
+#user-detail .online-state.offline {
+    background: #7c0000;
+}
+
 .profile-image {
     width: 14.5em;
     height: 14.5em;
+    mask-image: url("gfx/HexagonMask.svg");
+    mask-size: contain;
+    mask-position: center;
+    align-self: center;
 }
 .user-sidebar h2, .user-sidebar h3 {
     font-weight: normal;
@@ -1377,6 +1439,13 @@ h1 {
     text-align: center;
     margin-top: 0.2em;
 }
+
+.user-sidebar h1 {
+    text-align: center !important;
+    margin: 0 !important;
+    coh-font-fit-mode: shrink;
+}
+
 .user-sidebar h3 {
     margin-top: 0;
     margin-bottom: 0.8em;
@@ -1406,7 +1475,7 @@ h1 {
 }
 .tab-list {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
 
     position: absolute;
     z-index: 1;
@@ -1430,7 +1499,7 @@ h1 {
     height: 6px;
     width: 100%;
 
-    background-color: #373021;
+    background-color: #222222;
 }
 .tab-contents {
     border-radius: 0 0 0.25em 0.25em;
@@ -1443,7 +1512,7 @@ h1 {
     bottom: 0;
     height: auto;
 
-    background-color: #373021;
+    background-color: #222222;
 }
 
 .tab-content {
@@ -1555,30 +1624,30 @@ h1 {
     padding-top: 0.8em;
 }
 
-#tab-content-activity .player-instance-world-image {
+.tab-content-activity .player-instance-world-image {
     width: 12em;
     height: 12em;
     background: red;
     margin: 0.5em 0 0 0.5em;
 }
 
-#tab-content-activity .player-instance-details {
+.tab-content-activity .player-instance-details {
     position: absolute;
     left: 13em;
     top: 0.5em;
     overflow: hidden;
     width: 22em;
 }
-#tab-content-activity .player-instance-details h2 {
+.tab-content-activity .player-instance-details h2 {
     margin-top: 0;
     height: 1.2em;
     text-overflow: ellipsis;
     overflow: hidden;
 }
-#tab-content-activity .player-instance-details .cell-name {
+.tab-content-activity .player-instance-details .cell-name {
     width: 8em;
 }
-#tab-content-activity .player-instance-rules {
+.tab-content-activity .player-instance-rules {
     position: absolute;
     left: 0.5em;
     top: 13em;
@@ -1593,7 +1662,7 @@ h1 {
 
     padding: 0.5em;
 }
-#tab-content-activity .data-instancedetails {
+.tab-content-activity .data-instancedetails {
     position: relative;
     width: inherit;
     height: inherit;
@@ -1601,7 +1670,7 @@ h1 {
     text-align: center;
 }
 
-#tab-content-activity .player-instance-players {
+.tab-content-activity .player-instance-players {
     position: absolute;
     left: 36em;
     top: 0.5em;
@@ -1645,7 +1714,7 @@ h1 {
     box-sizing: border-box;
     border: 3px solid #59885d;
 
-    background-color: #373021;
+    background-color: #222222;
 
     padding: 1em;
 
@@ -1760,7 +1829,7 @@ h1 {
     box-sizing: border-box;
     border: 3px solid #59885d;
 
-    background-color: rgba(27, 80, 55, 0.8);
+    background-color: rgba(var(--menu-bg-colour), var(--menu-opacity));
 
     display: flex;
 }
@@ -1777,7 +1846,7 @@ h1 {
 }
 
 .toolbar-btn.deactivated {
-    background-color: rgba(14, 40, 27, 0.4);
+    background-color: rgba(30, 31, 34, 0.4);
 }
 
 .toolbar-btn + .toolbar-btn {
@@ -1823,7 +1892,7 @@ h1 {
     box-sizing: border-box;
     border: 3px solid #59885d;
 
-    background-color: #373021;
+    background-color: #222222;
 
     text-align: center;
 }
@@ -1978,6 +2047,56 @@ h1 {
     padding-top: 0.4em;
 }
 
+.content-feed .scroll-content {
+    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+    top: 1.5em;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 93%;
+    overflow-x: hidden;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 5px;
+}
+
+.feed-content {
+    border: 3px solid #59885d;
+    border-radius: 0.25em;
+
+    margin-bottom: 0.2em;
+
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.feed-image {
+    width: 4em;
+    height: 4em;
+
+    border-right: 3px solid #59885d;
+
+    margin-right: 0.6em;
+}
+
+.feed-text-wrapper {
+    flex: 1;
+    padding: 0.5em 0;
+    align-self: flex-start;
+}
+
+.feed-name {
+    font-size: 1.3em;
+    font-weight: bold;
+}
+
+.feed-text {
+    margin-right: 0.6em;
+    padding-left: 0.4em;
+    padding-top: 0.4em;
+}
+
 .button-root {
     display: flex;
 }
@@ -2043,7 +2162,7 @@ h1 {
 
 /*Inputs*/
 .inp_slider {
-    border: 1px solid #59885d;
+    border: 4px solid #59885d;
     width: 100%;
     height: 2em;
     position: relative;
@@ -2087,7 +2206,7 @@ h1 {
     height: 8em;
 }
 .inp_dropdown {
-    border: 1px solid #59885d;
+    border: 4px solid #59885d;
     width: 15em;
     height: 2em;
     position: relative;
@@ -2103,7 +2222,7 @@ h1 {
     width: 100%;
 }
 .inp_dropdown_large {
-    border: 1px solid #59885d;
+    border: 4px solid #59885d;
     width: 30em;
     height: 2em;
     position: relative;
@@ -2134,9 +2253,9 @@ h1 {
     left: 0;
     width: 100%;
     display: none;
-    border: 1px solid #59885d;
+    border: 4px solid #59885d;
 
-    background-color: #373021;
+    background-color: #222222;
 }
 .inp_dropdown.open .valueList {
     display: block;
@@ -2164,7 +2283,7 @@ h1 {
 .inp_toggle {
     height: 2em;
     width: 2em;
-    border: 1px solid #59885d;
+    border: 4px solid #59885d;
     margin-bottom: 1em
 }
 .inp_toggle.checked {
@@ -2330,7 +2449,7 @@ h1 {
     box-sizing: border-box;
     border: 3px solid #59885d;
 
-    background-color: #373021;
+    background-color: #222222;
 
     text-align: center;
 }
@@ -2449,7 +2568,7 @@ h1 {
 
 .inp_button {
     width: 10%;
-    border: 1px solid #59885d;
+    border: 4px solid #59885d;
     text-align: center;
     line-height: 1.333333em;
     font-size: 1.5em;
@@ -2458,7 +2577,7 @@ h1 {
 }
 .imperialDisplay {
     width: 30%;
-    border: 1px solid #59885d;
+    border: 4px solid #59885d;
     text-align: center;
     line-height: 1.333333em;
     font-size: 1.5em;
@@ -2467,7 +2586,7 @@ h1 {
 
 .inp_btn_action {
     width: 30%;
-    border: 1px solid #59885d;
+    border: 4px solid #59885d;
     text-align: center;
     line-height: 1.333333em;
     font-size: 1.5em;
@@ -2478,7 +2597,7 @@ h1 {
 .inp_joystick {
     width: 12em;
     height: 12em;
-    border: 1px solid #59885d;
+    border: 4px solid #59885d;
     margin-bottom: 1em;
     position: relative;
     background-image: url(gfx/Joystick_bg.svg);
@@ -2489,7 +2608,7 @@ h1 {
     height: 1em;
     width: 1em;
     border-radius: 50%;
-    border: 1px solid #59885d;
+    border: 4px solid #59885d;
     background: white;
     margin-left: -0.5em;
     margin-top: -0.5em;
@@ -2498,7 +2617,7 @@ h1 {
 .inp_sliderH {
     width: 4em;
     height: 12em;
-    border: 1px solid #59885d;
+    border: 4px solid #59885d;
     position: absolute;
     left: 13em;
 }
@@ -2520,7 +2639,7 @@ h1 {
     color: #ffffff;
 }
 .inp_number {
-    border: 1px solid #59885d;
+    border: 4px solid #59885d;
     width: 100%;
     height: 1.333em;
     position: relative;
@@ -2533,7 +2652,7 @@ h1 {
 }
 
 #avatar-settings {
-    background-color: #373021;
+    background-color: #222222;
 }
 .advAvtrProfile {
     width: 100%;
@@ -2580,7 +2699,7 @@ h1 {
     box-sizing: border-box;
     border: 3px solid #59885d;
 
-    background-color: #373021;
+    background-color: #222222;
 
     text-align: center;
 }
@@ -2688,7 +2807,7 @@ h1 {
 
 /*Avatar Details*/
 #avatar-detail {
-    background-color: #373021;
+    background-color: #222222;
 }
 
 #avatar-detail h1 {
@@ -2758,7 +2877,7 @@ h1 {
 /*Prop Detail*/
 /*Avatar Details*/
 #prop-detail {
-    background-color: #373021;
+    background-color: #222222;
 }
 
 #prop-detail h1 {
@@ -3043,7 +3162,7 @@ td div {
     position: absolute;
     margin: 10px;
     background: url("gfx/nav-friends.svg") no-repeat;
-    background-color: #373021;
+    background-color: #222222;
     background-size: 60px 34px;
     background-position: 0 10px;
     padding: 10px;