update friend bar & server selection (thanks Kirito)
This commit is contained in:
才羽青空
parent
eb0008a2dc
commit
4094df3182
7 changed files with 413 additions and 47 deletions
314
css/style.css
314
css/style.css
|
|
@ -279,6 +279,8 @@ body {
|
|||
|
||||
.layer-3 {
|
||||
z-index: 0;
|
||||
width: 104%;
|
||||
height: 112%;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
|
|
@ -301,16 +303,15 @@ body {
|
|||
/* 平铺服务器区域按钮 */
|
||||
.join-server-container {
|
||||
display: flex;
|
||||
padding: 0vh 1.5vh 1vh 1.5vh;
|
||||
padding: 0.3vh 1.0vh 1.0vh 1.0vh;
|
||||
margin-bottom: 0vh;
|
||||
margin-left: 0vh;
|
||||
width: 25vh;
|
||||
width: 26vh;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.85);
|
||||
border: 1px solid rgba(227, 182, 47, 0.6);
|
||||
border-top: none;
|
||||
border-radius: 0 0 4px 4px;
|
||||
background-color: rgba(0, 0, 0, 0.95);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -324,13 +325,13 @@ body {
|
|||
|
||||
.join-server-container.show {
|
||||
opacity: 1;
|
||||
max-height: 80vh;
|
||||
max-height: 100vh;
|
||||
overflow: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.dropdown-section {
|
||||
margin-bottom: 1.5vh;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
|
@ -338,44 +339,73 @@ body {
|
|||
font-size: 2.2vh;
|
||||
color: rgba(227, 182, 47, 1);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1vh;
|
||||
margin-bottom: 1.5vh;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
padding-bottom: 0.3vh;
|
||||
border-bottom: 1px solid rgba(227, 182, 47, 0.3);
|
||||
padding-bottom: 0.5vh;
|
||||
border-bottom: 1px solid rgba(227, 182, 47, 1);
|
||||
}
|
||||
|
||||
.sel-server-button {
|
||||
font-family: 'Agency';
|
||||
margin-bottom: 0.8vh;
|
||||
font-size: 2.1vh;
|
||||
font-size: 2vh;
|
||||
text-align: left;
|
||||
padding: 0.6vh 1vh;
|
||||
padding: 0.6vh 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sel-server-button:hover {
|
||||
color: rgba(227, 182, 47, 1);
|
||||
background-color: rgba(227, 182, 47, 0.1);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.sel-server-button.active {
|
||||
color: rgba(227, 182, 47, 1);
|
||||
background-color: rgba(227, 182, 47, 0.15);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
margin-right: 1.2vh;
|
||||
color: rgba(227, 182, 47, 1);
|
||||
width: 2.0vh;
|
||||
height: 2.0vh;
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Custom Match Button */
|
||||
.custom-match-button {
|
||||
font-family: 'Agency', sans-serif;
|
||||
font-size: 2.2vh;
|
||||
font-weight: bold;
|
||||
font-size: 2vh;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
background-color: rgba(227, 182, 47, 0.7);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 1.5vh 1.0vh;
|
||||
margin: 1vh -1.0vh -1.0vh -1.0vh;
|
||||
cursor: pointer;
|
||||
text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.7);
|
||||
transition: all 0.2s ease;
|
||||
width: calc(100% + 2vh);
|
||||
text-align: center;
|
||||
letter-spacing: 0.1em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.custom-match-button:hover {
|
||||
background-color: rgba(227, 182, 47, 1);
|
||||
box-shadow: 0 0 15px rgba(227, 182, 47, 0.5);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -426,6 +456,231 @@ body {
|
|||
margin-right: 1.5vh;
|
||||
}
|
||||
|
||||
/* Friends List Dropdown Styles */
|
||||
.friends-list-container {
|
||||
position: fixed;
|
||||
bottom: 4vh;
|
||||
left: 0.5vw;
|
||||
width: 13.5vw;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
border-radius: 4px 4px 0 0;
|
||||
border: none;
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transform: translateY(100%);
|
||||
transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.friends-list-container.show {
|
||||
opacity: 1;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Hover effect to show friends list automatically */
|
||||
.friends-bar:hover + .friends-list-container,
|
||||
.friends-list-container:hover {
|
||||
opacity: 1;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.friends-list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1vh 1.5vh;
|
||||
border-bottom: 1px solid rgba(227, 182, 47, 0.3);
|
||||
background-color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
.friends-list-header span {
|
||||
color: #fff;
|
||||
font-family: 'Agency';
|
||||
font-size: 2vh;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
background-color: transparent;
|
||||
color: #e3b62f;
|
||||
border: 1px solid #e3b62f;
|
||||
padding: 0.5vh 1vh;
|
||||
font-size: 1.5vh;
|
||||
font-family: 'Agency';
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.refresh-button:hover {
|
||||
background-color: rgba(227, 182, 47, 0.2);
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
overflow-y: auto;
|
||||
max-height: calc(50vh - 6vh);
|
||||
}
|
||||
|
||||
.friend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1vh 1.5vh;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: background-color 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.friend-item:hover {
|
||||
background-color: rgba(227, 182, 47, 0.1);
|
||||
}
|
||||
|
||||
.friend-avatar {
|
||||
width: 4vh;
|
||||
height: 4vh;
|
||||
border-radius: 50%;
|
||||
margin-right: 1vh;
|
||||
object-fit: cover;
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.friend-item:hover .friend-avatar {
|
||||
border-color: #e3b62f;
|
||||
}
|
||||
|
||||
.friend-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.friend-name {
|
||||
color: #fff;
|
||||
font-family: 'Agency';
|
||||
font-size: 1.8vh;
|
||||
margin-bottom: 0.2vh;
|
||||
}
|
||||
|
||||
.friend-status {
|
||||
font-size: 1.4vh;
|
||||
font-family: 'Agency';
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.friend-status.online {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.friend-status.offline {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.invite-button {
|
||||
background-color: #e3b62f;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 0.5vh 1vh;
|
||||
font-size: 1.5vh;
|
||||
font-family: 'Agency';
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.friend-item:hover .invite-button {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.invite-button:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Friend Item Selected State */
|
||||
.friend-item.selected {
|
||||
background-color: rgba(227, 182, 47, 0.2);
|
||||
border-left: 3px solid #e3b62f;
|
||||
}
|
||||
|
||||
.friend-item.selected .friend-avatar {
|
||||
border-color: #e3b62f;
|
||||
}
|
||||
|
||||
/* Friend Action Dropdown */
|
||||
.friend-action-dropdown {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.95);
|
||||
border-top: 1px solid rgba(227, 182, 47, 0.3);
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transform: translateY(10px);
|
||||
transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
|
||||
z-index: 110;
|
||||
}
|
||||
|
||||
.friend-action-dropdown.show {
|
||||
opacity: 1;
|
||||
max-height: 100vh;
|
||||
overflow: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.friend-action-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 1.2vh 1.5vh;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
font-family: 'Agency';
|
||||
font-size: 2vh;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.friend-action-button:hover {
|
||||
background-color: rgba(227, 182, 47, 0.1);
|
||||
color: #e3b62f;
|
||||
}
|
||||
|
||||
.friend-action-button.view-button:hover {
|
||||
background-color: rgba(76, 175, 80, 0.1);
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.friend-action-button.invite-button:hover {
|
||||
background-color: rgba(227, 182, 47, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.receive-invite-button {
|
||||
background-color: #E3B62F;
|
||||
color: #000;
|
||||
|
|
@ -600,27 +855,28 @@ body {
|
|||
.play-text {
|
||||
font-family: 'Bombard', 'Agency', 'PUBG Sans Regular', sans-serif;
|
||||
color: #fff;
|
||||
font-size: 5.5vh;
|
||||
font-size: 6vh;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.9);
|
||||
margin-bottom: 0.5vh;
|
||||
text-shadow: 0.2em 0.2em 0.4em rgba(0, 0, 0, 0.9);
|
||||
margin-bottom: 0.8vh;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
letter-spacing: 5px;
|
||||
line-height: 1;
|
||||
animation: pulse-opacity 3s infinite ease-in-out;
|
||||
text-align: left;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
font-family: 'Moonshiner', 'Agency', 'PUBG Sans Regular', sans-serif;
|
||||
font-size: 3vh;
|
||||
font-size: 3.2vh;
|
||||
text-transform: uppercase;
|
||||
color: rgba(227, 182, 47, 1);
|
||||
text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.9);
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: 0.15em 0.15em 0.3em rgba(0, 0, 0, 0.9);
|
||||
letter-spacing: 0.08em;
|
||||
position: relative;
|
||||
opacity: 0.9;
|
||||
opacity: 1;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Tips text container */
|
||||
|
|
@ -652,6 +908,8 @@ body {
|
|||
left: 0;
|
||||
text-align: left;
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px rgba(227, 182, 47, 0.9), 0 0 32px rgba(227, 182, 47, 0.7);
|
||||
}
|
||||
|
||||
/* Show hover text when button is hovered or dropdown is active */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue