2025r180 #1

Merged
Malthbern merged 9 commits from nerdbranch-dev into main 2025-08-27 11:34:47 +00:00
Showing only changes of commit 4f9ffdf709 - Show all commits

516
ui.css
View File

@@ -21,7 +21,7 @@ body {
/*font-family: 'Droid Sans';*/
font-size: 32px;
color: #FFF;
color: #ffffff;
}
h1 {
@@ -67,6 +67,7 @@ h1 {
margin-top: 0.1em;
color: #AAA;
padding-top: 10px;
text-align: center;
}
.color-primary {
@@ -80,14 +81,14 @@ h1 {
/* Note: We are defining :hover and .active separately because :active:not(.active) isn't working, and to avoid using !important */
.button:hover {
background-color: rgb(27, 80, 55);
background-color: #1b5037;
}
.button:active {
background-color: rgb(45, 128, 89);
background-color: #2d8059;
}
.button.active {
background-color: rgb(27, 80, 55);
background-color: #1b5037;
}
.button:disabled, .button.disabled {
@@ -134,15 +135,46 @@ h1 {
overflow: hidden;
box-sizing: border-box;
border: 3px solid #17452f;
background-color: #373021;
//border: 3px solid #17452f;
background-color: rgba(55, 48, 33, 0.8);
display: flex;
left: -100%;
transition: left 0.2s linear;
}
.home-container {
background-color: rgba(0,0,0,0);
}
.flex-container {
display: flex;
flex-direction: column;
}
.home-right {
width: 22%;
align-self: center;
position: relative;
}
.home-left {
width: 22%;
align-self: center;
position: relative;
}
.home-center {
width: auto;
display: flex;
flex-direction: column;
align-self: center;
position: relative;
}
.home-background {
background-color: rgba(55, 48, 33, 0.8);
}
.content.in {
left: 0%;
transition: left 0.2s linear;
@@ -156,6 +188,19 @@ h1 {
visibility: hidden;
}
.contentNoBG.in {
left: 0%;
transition: left 0.2s linear;
}
.contentNoBG.out {
left: 100%;
transition: left 0.2s linear;
}
.contentNoBG.hidden {
visibility: hidden;
}
.list-filter {
width: 25%;
padding: 1%;
@@ -173,7 +218,7 @@ h1 {
.list-filter h1 {
text-align: center;
color: #FFF;
color: #ffffff;
margin-top: 0;
}
@@ -251,7 +296,7 @@ h1 {
width: 2em;
height: 2em;
border-radius: 50%;
border: 1px solid #FFF;
border: 1px solid #ffffff;
margin: 0.5em;
z-index: 1;
@@ -356,16 +401,153 @@ h1 {
text-align: center;
width: 100%;
margin-top: 0.2em;
margin-bottom: 0.2em;
}
/* Animated Circles CSS */
.hexagons {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.hexagons li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(96, 183, 199, 0.5);
animation: animate 25s linear infinite;
bottom: calc(-150px - 40vh);
}
.hexagons li:nth-child(1) {
left: 25%;
width: 80px;
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);
}
.hexagons li:nth-child(2) {
left: 10%;
width: 20px;
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);
}
.hexagons li:nth-child(3) {
left: 70%;
width: 20px;
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);
}
.hexagons li:nth-child(4) {
left: 40%;
width: 60px;
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);
}
.hexagons li:nth-child(5) {
left: 65%;
width: 20px;
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);
}
.hexagons li:nth-child(6) {
left: 75%;
width: 90px;
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);
}
.hexagons li:nth-child(7) {
left: 35%;
width: 50px;
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);
}
.hexagons li:nth-child(8) {
left: 50%;
width: 25px;
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);
}
.hexagons li:nth-child(9) {
left: 20%;
width: 15px;
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);
}
.hexagons li:nth-child(10) {
left: 85%;
width: 50px;
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);
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 0;
}
50% {
transform: translateY(-60vh) rotate(360deg);
opacity: 1;
}
100% {
transform: translateY(-120vh) rotate(720deg);
opacity: 0;
}
}
.home-content-root {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.content-shortcuts {
position: absolute;
top: 10%;
width: 24%;
padding: 1%;
height: 58%;
left: 1%;
border-radius: 0.25em;
border: 3px solid #59885d;
}
@@ -382,51 +564,28 @@ h1 {
}
.content-debug {
position: absolute;
top: 71%;
width: 24%;
padding: 1% 0.5em;
height: 26%;
left: 1%;
border-radius: 0.25em;
border: 3px solid #59885d;
}
.content-feed {
position: absolute;
top: 10%;
width: 52%;
padding: 1%;
height: 19%;
left: 26%;
border-radius: 0.25em;
border: 3px solid #59885d;
padding: 0.5em;
margin-bottom: 10px;
}
.content-avatar-functions {
position: absolute;
top: 31%;
width: 52%;
padding: 1%;
height: 37%;
left: 26%;
border-radius: 0.25em;
border: 3px solid #59885d;
}
.content-panic {
position: absolute;
top: 71%;
width: 52%;
padding: 1%;
height: 26%;
left: 26%;
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%;
}
.content-panic .action-btn {
@@ -442,13 +601,6 @@ h1 {
}
.content-shortcuts-2 {
position: absolute;
top: 10%;
width: 20%;
padding: 1%;
height: 36.5%;
left: 79%;
border-radius: 0.25em;
border: 3px solid #59885d;
}
@@ -461,23 +613,49 @@ h1 {
text-align: center;
}
#home .content-shortcuts-2 .action-btn img {
width: 2em;
width: 2em;
height: 2em;
margin-bottom: 0.5em;
}
.content-call {
position: absolute;
top: 49%;
width: 20%;
padding: 1%;
height: 48%;
left: 79%;
.content-profile {
border-radius: 0.25em;
border: 3px solid #59885d;
text-align: center;
padding: 0.5em 0 0.5em 0;
margin-bottom: 10px;
}
.content-profile .button-root {
margin-top: 20px;
}
.content-profile .profile-btn {
padding: 0.5em 0em;
text-align: center;
border-radius: 0.25em;
border: 3px solid #59885d;
display: flex;
min-width: 45%;
justify-content: center;
margin-left: 10px;
margin-right: 10px;
z-index: 1;
}
.content-profile .profile-btn img {
width: 2em;
height: 2em;
}
.content-profile .profile-btn p {
align-self: center;
margin-top: 0;
margin-bottom: 0;
}
.content-profile p {
margin: 0;
}
@keyframes calling {
@@ -485,28 +663,39 @@ h1 {
100% {box-shadow: 0 0 2em 1em #0AA48E}
}
.call-profile {
width: 8em;
height: 8em;
border-radius: 50%;
margin: 2em 0;
.profile-icon {
height: 1em;
width: 1em;
margin-right: 10px;
}
.profile-pic {
width: 10.5em;
height: 10em;
margin: 0.5em 0;
background: #333333;
aspect-ratio: 1/cos(30deg);
clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
}
.call-profile.calling {
animation: calling 2s infinite alternate;
}
.call-name {
.profile-username {
font-size: 1.5em;
margin-bottom: 0.5em;
}
.call-duration {
font-size: 1.5em;
margin-bottom: 0.5em;
.profile-rank {
display: flex;
flex-direction: row;
}
.profile-title {
display: flex;
flex-direction: row;
}
.profile-group {
display: flex;
flex-direction: row;
}
.content-caption {
width: 100%;
@@ -659,6 +848,11 @@ h1 {
display: flex;
}
.row-wrapper {
display: flex;
flex-direction: row;
}
.content-world-actions .world-fileSize {
position: absolute;
top: 7.4em;
@@ -868,6 +1062,9 @@ h1 {
padding: 0.5em;
}
.world-instancing.group {
height: 89%;
}
.world-instancing.in {
left: 35%;
transition: left 0.2s linear;
@@ -895,6 +1092,14 @@ h1 {
display: flex;
margin-bottom: 1em;
}
#instance_group {
width: 100%;
display: none;
z-index: 10;
}
.group #instance_group {
display: block;
}
.btn-region .region-select {
width: 33.333333%;
@@ -912,7 +1117,7 @@ h1 {
.btn-region .region-select:hover,
.btn-rule .rule-select.active,
.btn-rule .rule-select:hover {
background-color: rgba(27, 80, 55, 1);
background-color: #1b5037;
}
.inp-hidden {
@@ -1063,6 +1268,10 @@ h1 {
width: 8.000000em;
}
.content-instance-information .hidden {
display: none;
}
.content-instance-buttons {
position: absolute;
top: 77%;
@@ -1073,7 +1282,7 @@ h1 {
border-radius: 0.25em;
border: 3px solid #59885d;
display: flex;
}
.content-instance-buttons .instance-btn {
@@ -1147,7 +1356,7 @@ h1 {
width: 2em;
height: 2em;
border-radius: 50%;
border: 2px solid #FFF;
border: 2px solid #ffffff;
margin: 1em;
z-index: 1;
@@ -1437,12 +1646,12 @@ h1 {
border: 3px solid #59885d;
background-color: #373021;
padding: 1em;
left: -100%;
transition: left 0.2s linear;
z-index: 100;
}
@@ -1551,7 +1760,7 @@ h1 {
box-sizing: border-box;
border: 3px solid #59885d;
background-color: rgba(27, 80, 55, 0.5);
background-color: rgba(27, 80, 55, 0.8);
display: flex;
}
@@ -1563,12 +1772,12 @@ h1 {
text-align: center;
font-weight: normal;
color: #FFF;
color: #ffffff;
font-size: 1.3em;
}
.toolbar-btn.deactivated {
background-color: rgba(14, 40, 27, 1);
background-color: rgba(14, 40, 27, 0.4);
}
.toolbar-btn + .toolbar-btn {
@@ -1582,7 +1791,7 @@ h1 {
text-align: center;
font-weight: bold;
color: #FFF;
color: #ffffff;
font-size: 1.3em;
border-left: 3px solid #59885d;
@@ -1692,7 +1901,7 @@ h1 {
left: 0;
height: 100%;
width: 0;
background: #FFFFFF;
background: #ffffff;
border: 0.25em solid rgb(128, 128, 128);
}
@@ -1706,10 +1915,10 @@ h1 {
/*Settings*/
.settings-categorie {
display: none;
display: none;
}
.settings-categorie.active {
display: block;
display: block;
}
.settings-categorie h1 {
margin-top: 0;
@@ -1740,20 +1949,37 @@ h1 {
margin-bottom: 1em;
display: flex;
align-items: center;
}
.message-image {
width: 5em;
height: 5em;
height: 100%;
border-right: 3px solid #59885d;
margin-right: 1em;
margin-right: 0.6em;
}
.message-text-wrapper {
flex: 1;
padding: 0.5em 0;
align-self: flex-start;
}
.message-name {
font-size: 1.3em;
font-weight: bold;
}
.message-text {
margin-right: 0.6em;
padding-left: 0.4em;
padding-top: 0.4em;
}
.button-root {
display: flex;
}
.message-btn {
@@ -1779,21 +2005,21 @@ h1 {
height: 79vh;
}
.noMessagesInfo {
position: absolute;
position: absolute;
border-radius: 0.25em;
border: 3px solid #59885d;
border-radius: 0.25em;
border: 3px solid #59885d;
display: flex;
display: flex;
top: 38%;
bottom: 38%;
height: auto;
top: 38%;
bottom: 38%;
height: auto;
left: 20%;
width: 60%;
left: 20%;
width: 60%;
padding: 1.2em;
padding: 1.2em;
}
.noMessagesInfo img {
@@ -1982,7 +2208,7 @@ h1 {
border-radius: 0.25em;
padding: 0.5em;
margin-left: -0.05em;
color: #FFFFFF;
color: #ffffff;
}
/*Quick Menu*/
@@ -2002,21 +2228,21 @@ h1 {
background-color: rgba(128, 128, 128, 0.8);
position: absolute;
top: 140px;
left: 140px;
padding: 0.25em 0;
}
.quick-menu-wrapper .action-btn {
width: 10em;
height: 10em;
width: 10em;
height: 10em;
padding: 1em;
margin: 0.5em 1em;
padding: 1em;
margin: 0.5em 1em;
text-align: center;
text-align: center;
}
.quick-menu-wrapper .action-btn img {
width: 7.2em;
@@ -2122,7 +2348,7 @@ h1 {
position: absolute;
top: 0;
left: 0;
display: flex;
}
.keyboard-row + .keyboard-row {
@@ -2153,7 +2379,7 @@ h1 {
width: 100%;
height: 100%;
border: 0;
text-align: center;
font-size: 2em;
line-height: 1.5em;
@@ -2171,7 +2397,7 @@ h1 {
.keyboard-key.active,
.keyboard-mod.active,
.keyboard-func.active {
background-color: rgba(27, 80, 55, 1);
background-color: #1b5037;
}
.keyboard-key + .keyboard-key,
.keyboard-key + .keyboard-mod,
@@ -2291,7 +2517,7 @@ h1 {
text-align: center;
line-height: 1.333333em;
font-size: 1.5em;
color: #FFFFFF;
color: #ffffff;
}
.inp_number {
border: 1px solid #59885d;
@@ -2303,7 +2529,7 @@ h1 {
text-align: center;
line-height: 1.333333em;
font-size: 1.5em;
color: #FFFFFF;
color: #ffffff;
}
#avatar-settings {
@@ -2322,7 +2548,7 @@ h1 {
.advAvtrProfName {
flex: 1;
border: 2px solid #59885d;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -2443,8 +2669,8 @@ h1 {
}
.numpadButton.btn-back {
top: 0;
background: #E43600;
top: 0;
background: #E43600;
}
.numpadButton.btn-back:hover {
background: #f56b40;
@@ -2636,7 +2862,6 @@ h1 {
.settings-categorie .contact-icons {
position: relative;
display: flex;
margin-bottom: 1em;
text-align: center;
}
.settings-categorie .contact-icons .contact-icon {
@@ -2646,7 +2871,25 @@ h1 {
.settings-categorie .contact-icons .contact-icon img {
width: 150px;
height: 150px;
margin-bottom: 1em;
}
.settings-categorie .contact-icons-center {
position: relative;
display: flex;
justify-content: center;
text-align: center;
}
.settings-categorie .contact-icons-center .contact-icon {
position: relative;
width: 33.3333%;
}
.settings-categorie .contact-icons-center .contact-icon img {
width: 150px;
height: 150px;
margin-bottom: 1em;
}
.settings-categorie .text-wrapper {
position: relative;
display: flex;
@@ -2742,7 +2985,7 @@ td div {
height: 70px;
font-size: 30px;
color: #333333;
background: #FFFFFF;
background: #ffffff;
}
.option-caption.nsfw-toggle-caption {
@@ -2781,7 +3024,7 @@ td div {
width: 60%;
top: 100%;
height: 10%;
z-index: 10000;
}
.message-box.loading-box.in {
@@ -2800,7 +3043,7 @@ td div {
position: absolute;
margin: 10px;
background: url("gfx/nav-friends.svg") no-repeat;
background-color: #222222;
background-color: #373021;
background-size: 60px 34px;
background-position: 0 10px;
padding: 10px;
@@ -2882,7 +3125,7 @@ img[data-loading-url] {
display: flex;
justify-content: space-between;
overflow: hidden;
}
.color-indicator.half {
@@ -2911,18 +3154,35 @@ img[data-loading-url] {
margin-left: -180px;
}
.log-entry {
position: relative;
display: flex;
align-items: flex-start;
padding: 5px 10px;
}
.log-time {
width: 100px;
flex-shrink: 0;
font-weight: bold;
}
.log-message {
flex-grow: 1;
width: 95%;
white-space: pre-wrap;
word-break: break-word;
}
.log-divider {
border: 0;
height: 1px;
background: rgba(255, 255, 255, 0.2);
margin: 5px 0;
}
.log-level-ERROR {
color: #BB0000;
}
.log-level-WARNING {
color: #BBBB00;
}
}