2133 lines
38 KiB
CSS
2133 lines
38 KiB
CSS
/* Resonance Rumble Styles */
|
|
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background-color: #120458;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
font-family: 'Orbitron', sans-serif;
|
|
color: #00ffff;
|
|
}
|
|
|
|
#gameCanvas {
|
|
display: block;
|
|
}
|
|
|
|
#ui {
|
|
position: fixed;
|
|
top: 10px;
|
|
left: 10px;
|
|
display: flex;
|
|
gap: 10px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#levelUpPopup {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: rgba(18, 4, 88, 0.9);
|
|
color: #00ffff;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
z-index: 1000;
|
|
box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff;
|
|
border: 2px solid #ff00ff;
|
|
font-family: 'Orbitron', sans-serif;
|
|
animation: popIn 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes popIn {
|
|
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
|
|
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
|
|
}
|
|
|
|
#levelUpPopup h2 {
|
|
font-size: 36px;
|
|
margin-bottom: 20px;
|
|
text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
|
|
}
|
|
|
|
#levelUpPopup p {
|
|
font-size: 18px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#upgradeOptions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.upgrade-button, .upgrade-option {
|
|
background-color: #ff00ff;
|
|
color: white;
|
|
border: none;
|
|
padding: 15px;
|
|
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 18px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
transition: all 0.3s ease;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.upgrade-button:hover {
|
|
background-color: #00ffff;
|
|
color: #120458;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
.upgrade-name {
|
|
flex-grow: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.upgrade-value {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.fade-out {
|
|
animation: fadeOut 0.5s ease-in forwards;
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
|
|
#gameControls {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
background-color: rgba(18, 4, 88, 0.8);
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff;
|
|
border: 2px solid #ff00ff;
|
|
}
|
|
|
|
.button {
|
|
background-color: #ff00ff;
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
|
|
font-size: 18px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
|
|
}
|
|
|
|
.button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
transform: rotate(45deg);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: #00ffff;
|
|
color: #120458;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
.button:hover::before {
|
|
left: 150%;
|
|
}
|
|
|
|
#startMessage {
|
|
color: #00ffff;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
text-shadow: 0 0 10px #00ffff;
|
|
}
|
|
|
|
#uiWidget {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
background-color: rgba(18, 4, 88, 0.9);
|
|
color: #00ffff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
opacity: 0;
|
|
z-index: 1000;
|
|
box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff;
|
|
border: 2px solid #ff00ff;
|
|
pointer-events: none;
|
|
width: 80%;
|
|
max-width: 600px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#uiWidget.visible {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
#account {
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
#accountContent {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.widget-tabs {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tab-button {
|
|
background-color: #ff00ff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 16px;
|
|
transition: all 0.3s ease;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
transform: rotate(45deg);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
|
|
.tab-button:hover, .tab-button.active {
|
|
background-color: #00ffff;
|
|
color: #120458;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
.tab-button:hover::before, .tab-button.active::before {
|
|
left: 150%;
|
|
}
|
|
|
|
.widget-content {
|
|
text-align: left;
|
|
padding-bottom: 20px;
|
|
background-color: transparent; /* Remove background color */
|
|
border-radius: 10px;
|
|
box-shadow: none; /* Remove box shadow */
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
|
|
.tab-content {
|
|
display: none;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: flex;
|
|
}
|
|
|
|
|
|
#uiWidget, #classWidget, #infoWidget {
|
|
/* ... other styles ... */
|
|
display: none;
|
|
}
|
|
|
|
#uiWidget.visible, #classWidget.visible, #infoWidget.visible {
|
|
display: block;
|
|
}
|
|
|
|
.close-button {
|
|
background-color: #ff00ff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 16px;
|
|
transition: all 0.3s ease;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
|
|
margin-top: 20px;
|
|
align-self: center;
|
|
}
|
|
|
|
.close-button:hover {
|
|
background-color: #00ffff;
|
|
color: #120458;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
#weaponSelector {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.weapon-option {
|
|
width: 80px;
|
|
height: 80px;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border: 2px solid #00ffff;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.weapon-option:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
.weapon-option img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
|
|
.weapon-option.selected {
|
|
background-color: rgba(0, 255, 255, 0.2);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
#buyWeaponButton {
|
|
background-color: #ff00ff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
|
|
border-radius: 5px;
|
|
transition: all 0.3s ease;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
#buyWeaponButton:hover {
|
|
background-color: #00ffff;
|
|
color: #120458;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
|
|
}
|
|
|
|
|
|
|
|
.weapon-button {
|
|
background-color: #ff00ff;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
border-radius: 5px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 0 5px #ff00ff;
|
|
}
|
|
|
|
.weapon-button:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
|
|
}
|
|
|
|
.weapon-button.selected {
|
|
background-color: #00ffff;
|
|
color: #120458;
|
|
box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
|
|
}
|
|
|
|
#authButtons {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.auth-form {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.auth-form input {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border: 2px solid #00ffff;
|
|
color: #00ffff;
|
|
padding: 12px;
|
|
font-size: 16px;
|
|
width: 200px;
|
|
text-align: center;
|
|
font-family: 'Orbitron', sans-serif;
|
|
border-radius: 5px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.auth-form input:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
|
|
}
|
|
|
|
.auth-form input.valid {
|
|
box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
|
|
}
|
|
|
|
.auth-form input.invalid {
|
|
box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
|
|
}
|
|
|
|
/* Add this to your existing CSS */
|
|
.synth-coins-counter {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
color: #FFD700;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
|
|
|
|
#logoutButton {
|
|
display: none;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#welcomeMessage {
|
|
color: #00ffff;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
text-shadow: 0 0 10px #00ffff;
|
|
margin: 0;
|
|
}
|
|
|
|
#playerName {
|
|
display: none;
|
|
}
|
|
|
|
#skinCustomization {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.skin-section {
|
|
opacity: 1;
|
|
display: block;
|
|
}
|
|
|
|
.loading-spinner {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100px;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
|
|
.skin-section h4 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#colorOptions, #hatOptions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.skin-option {
|
|
position: relative;
|
|
width: 60px;
|
|
height: 60px;
|
|
margin: 5px;
|
|
|
|
border: 2px solid #00ffff;
|
|
border-radius: 10px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.skin-option:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
.skin-option.selected {
|
|
border-color: #ff00ff;
|
|
box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff;
|
|
}
|
|
|
|
.skin-option.selected::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
color: #ff00ff;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#colorOptions .skin-option {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
#hatOptions .skin-option {
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.skin-option.glow-effect {
|
|
animation: glow 1.5s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes glow {
|
|
from {
|
|
box-shadow: 0 0 5px 2px currentColor;
|
|
}
|
|
to {
|
|
box-shadow: 0 0 15px 5px currentColor;
|
|
}
|
|
}
|
|
|
|
.song-duration-bar {
|
|
position: fixed;
|
|
top: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 300px;
|
|
height: 30px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border: 2px solid #00ffff;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
display: none;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.song-duration-fill {
|
|
height: 100%;
|
|
background-color: rgba(0, 255, 255, 0.3);
|
|
transition: width 1s linear;
|
|
}
|
|
|
|
.song-info {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
box-sizing: border-box;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 14px;
|
|
color: #00ffff;
|
|
}
|
|
|
|
#songName {
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#songName .scrolling-text {
|
|
display: inline-block;
|
|
padding-left: 100%;
|
|
animation: scroll 15s linear infinite;
|
|
padding-right: 20px; /* Add padding to prevent overlap with timer */
|
|
}
|
|
|
|
@keyframes scroll {
|
|
0% {
|
|
transform: translate(0, 0);
|
|
}
|
|
100% {
|
|
transform: translate(-100%, 0);
|
|
}
|
|
}
|
|
|
|
#songTimer {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Updated styles for mobile */
|
|
@media screen and (max-width: 600px) {
|
|
.song-duration-bar {
|
|
top: 10px;
|
|
left: auto;
|
|
right: 10px;
|
|
transform: none;
|
|
width: calc(100% - 130px); /* Full width minus space for buttons and buffer */
|
|
max-width: 200px; /* Limit maximum width */
|
|
height: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
#ui {
|
|
display: flex;
|
|
align-items: center;
|
|
position: fixed;
|
|
top: 10px;
|
|
left: 10px;
|
|
z-index: 1001; /* Ensure UI is above song duration bar */
|
|
}
|
|
|
|
#ui button {
|
|
padding: 5px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
#songName {
|
|
font-size: 10px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex-grow: 1; /* Allow song name to take up available space */
|
|
}
|
|
|
|
#songTimer {
|
|
font-size: 10px;
|
|
margin-left: 5px;
|
|
flex-shrink: 0; /* Prevent timer from shrinking */
|
|
}
|
|
|
|
.song-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
|
|
/* Additional adjustments for very small screens */
|
|
@media screen and (max-width: 400px) {
|
|
.song-duration-bar {
|
|
width: calc(100% - 120px); /* Slightly more space on very small screens */
|
|
}
|
|
|
|
#songName, #songTimer {
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
|
|
|
|
.skin-option.glow-effect {
|
|
box-shadow: 0 0 10px 3px currentColor;
|
|
animation: glow 1.5s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.no-skins-message {
|
|
text-align: center;
|
|
color: #00ffff;
|
|
font-size: 16px;
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
background-color: rgba(0, 255, 255, 0.1);
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px #00ffff;
|
|
}
|
|
|
|
.sign-in-message {
|
|
text-align: center;
|
|
color: #00ffff;
|
|
font-size: 16px;
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
background-color: rgba(0, 255, 255, 0.1);
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px #00ffff;
|
|
}
|
|
|
|
|
|
#minimap-container {
|
|
position: fixed;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#minimap {
|
|
display: none;
|
|
border: 2px solid #00ffff;
|
|
background-color: rgba(18, 4, 88, 0.7);
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
|
|
}
|
|
|
|
#toggle-minimap {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ff00ff;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
transition: all 0.3s ease;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#toggle-minimap::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
transform: rotate(45deg);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
|
|
#toggle-minimap:hover {
|
|
background-color: #00ffff;
|
|
color: #120458;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
#toggle-minimap:hover::before {
|
|
left: 150%;
|
|
}
|
|
|
|
|
|
|
|
#minimap.small {
|
|
display: block;
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
#minimap.large {
|
|
display: block;
|
|
position: fixed;
|
|
width: 80%;
|
|
height: 80%;
|
|
top: 10%;
|
|
left: 10%;
|
|
z-index: 1001;
|
|
}
|
|
|
|
|
|
|
|
#infoWidget {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
background-color: rgba(18, 4, 88, 0.9);
|
|
color: #00ffff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
opacity: 0;
|
|
z-index: 1000;
|
|
box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff;
|
|
border: 2px solid #ff00ff;
|
|
pointer-events: none;
|
|
width: 80%;
|
|
max-width: 600px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#infoWidget.visible {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
margin-top: 20px;
|
|
margin-bottom: 10px; /* Add margin to the bottom */
|
|
padding: 10px;
|
|
background-color: rgba(18, 4, 88, 0.6);
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px #ff00ff, inset 0 0 5px #00ffff;
|
|
}
|
|
|
|
.social-link {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 20px;
|
|
background-color: rgba(255, 0, 255, 0.1);
|
|
border: 1px solid #ff00ff;
|
|
border-radius: 5px;
|
|
color: #00ffff;
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
letter-spacing: 1px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.social-link:hover {
|
|
background-color: rgba(0, 255, 255, 0.1);
|
|
border-color: #00ffff;
|
|
box-shadow: 0 0 15px #00ffff;
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.social-link i {
|
|
margin-right: 15px;
|
|
font-size: 24px;
|
|
width: 24px;
|
|
text-align: center;
|
|
color: #ff00ff;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.social-link:hover i {
|
|
color: #00ffff;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
/* Update for both uiWidget and infoWidget */
|
|
#uiWidget .widget-content,
|
|
#infoWidget .widget-content {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Remove any specific styling for social-links container if it exists */
|
|
.social-links {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Ensure tab content is visible without the container styling */
|
|
.tab-content {
|
|
color: #00ffff; /* Ensure text is visible against the widget background */
|
|
}
|
|
|
|
/* Adjust spacing as needed */
|
|
.close-button {
|
|
margin-top: 10px; /* Reduce top margin slightly */
|
|
}
|
|
|
|
#classSelectorButton {
|
|
background-color: #ff00ff;
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
|
|
font-size: 18px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
transition: all 0.3s ease;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#classSelectorButton:hover {
|
|
background-color: #00ffff;
|
|
color: #120458;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
.class-option:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
.class-option img {
|
|
width: 100px;
|
|
height: 100px;
|
|
object-fit: contain;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.class-option h3 {
|
|
color: #00ffff;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.class-option p {
|
|
color: white;
|
|
font-size: 14px;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.class-option.locked {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.lock-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.lock-overlay i {
|
|
font-size: 48px;
|
|
color: #ff00ff;
|
|
}
|
|
|
|
.requirements-popup {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: rgba(18, 4, 88, 0.9);
|
|
color: #00ffff;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
z-index: 1000;
|
|
box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff;
|
|
border: 2px solid #ff00ff;
|
|
}
|
|
|
|
.requirements-popup h3 {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.requirements-popup ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.requirements-popup li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.requirements-popup button {
|
|
background-color: #ff00ff;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 16px;
|
|
transition: all 0.3s ease;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.requirements-popup button:hover {
|
|
background-color: #00ffff;
|
|
color: #120458;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
#classWidget {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
background-color: rgba(18, 4, 88, 0.9);
|
|
color: #00ffff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
opacity: 0;
|
|
z-index: 1000;
|
|
box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff;
|
|
border: 2px solid #ff00ff;
|
|
pointer-events: none;
|
|
width: 80%;
|
|
max-width: 600px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#classWidget.visible {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
#classInfoBox {
|
|
display: flex;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border: 2px solid #00ffff;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#classImage {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
#classImage img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
#classDetails {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#className {
|
|
color: #00ffff;
|
|
margin-bottom: 10px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
#classStats p {
|
|
color: white;
|
|
font-size: 14px;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
|
|
#classSelector {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.class-option {
|
|
width: 80px;
|
|
height: 80px;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border: 2px solid #00ffff;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.class-option:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
|
|
.class-option img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.class-option h3 {
|
|
color: #00ffff;
|
|
margin-bottom: 5px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.class-option p {
|
|
color: white;
|
|
font-size: 12px;
|
|
margin: 3px 0;
|
|
}
|
|
|
|
.class-option.selected {
|
|
background-color: rgba(0, 255, 255, 0.2);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
.class-option.selected::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
color: #00ffff;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.class-option.locked {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
#className .locked-indicator {
|
|
font-size: 0.8em;
|
|
color: #ff00ff;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#experienceBar {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80%;
|
|
max-width: 400px;
|
|
height: 20px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#synthCoinsCounter {
|
|
position: fixed;
|
|
bottom: 50px; /* Positioned above the shop button */
|
|
left: 10px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
|
|
|
|
.lock-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.lock-overlay i {
|
|
font-size: 24px;
|
|
color: #ff00ff;
|
|
}
|
|
|
|
/* Add these styles to your existing styles.css file */
|
|
|
|
#shopButton {
|
|
position: fixed;
|
|
bottom: 10px; /* Position at the bottom */
|
|
left: 10px; /* Position on the left */
|
|
background-color: #ff00ff;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
transition: all 0.3s ease;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
|
|
overflow: hidden;
|
|
z-index: 1000;
|
|
}
|
|
|
|
|
|
#shopButton::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
transform: rotate(45deg);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#shopButton:hover {
|
|
background-color: #00ffff;
|
|
color: #120458;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
#shopButton:hover::before {
|
|
left: 150%;
|
|
}
|
|
|
|
#shopWidget {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
background-color: rgba(18, 4, 88, 0.9);
|
|
color: #00ffff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
opacity: 0;
|
|
z-index: 1000;
|
|
box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff;
|
|
border: 2px solid #ff00ff;
|
|
pointer-events: none;
|
|
width: 80%;
|
|
max-width: 600px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
display: none;
|
|
}
|
|
|
|
#shopWidget.visible {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
display: block;
|
|
}
|
|
|
|
#shopWidget .tab-content {
|
|
display: none;
|
|
}
|
|
|
|
#shopWidget .tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
|
|
#weaponInfoBox {
|
|
display: flex;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border: 2px solid #00ffff;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#weaponImage {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
#weaponImage img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
#weaponDetails {
|
|
flex-grow: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
#weaponName {
|
|
color: #00ffff;
|
|
margin-bottom: 10px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
#weaponStats p {
|
|
color: white;
|
|
font-size: 14px;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
|
|
#shopWidget h2 {
|
|
font-size: 24px;
|
|
margin-bottom: 20px;
|
|
text-shadow: 0 0 10px #00ffff;
|
|
}
|
|
|
|
#shopItems {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
gap: 20px;
|
|
}
|
|
|
|
.shop-item {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border: 2px solid #00ffff;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
width: 200px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.shop-item:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
|
|
}
|
|
|
|
.shop-item img {
|
|
width: 100px;
|
|
height: 100px;
|
|
object-fit: contain;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.shop-item h3 {
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.shop-item p {
|
|
font-size: 14px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.buy-button {
|
|
background-color: #ff00ff;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
|
|
border-radius: 5px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.buy-button:hover {
|
|
background-color: #00ffff;
|
|
color: #120458;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.setting-option {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#debugCheckbox, #autoFireCheckbox {
|
|
appearance: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #00ffff;
|
|
border-radius: 4px;
|
|
background-color: transparent;
|
|
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#debugCheckbox:checked, #autoFireCheckbox:checked {
|
|
background-color: #00ffff;
|
|
position: relative;
|
|
}
|
|
|
|
#debugCheckbox:checked::before, #autoFireCheckbox:checked::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #120458;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.draggable {
|
|
cursor: move;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
.draggable * {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
|
|
.setting-option label {
|
|
color: #00ffff;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
#notificationContainer {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 2000;
|
|
}
|
|
|
|
.achievements-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
|
gap: 10px;
|
|
padding: 10px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.achievement.locked {
|
|
border-color: #ff00ff;
|
|
}
|
|
|
|
.achievement.locked img {
|
|
filter: grayscale(100%) brightness(40%);
|
|
}
|
|
|
|
|
|
.achievement.locked::after {
|
|
content: '\f023'; /* Lock icon */
|
|
font-family: 'Font Awesome 5 Free';
|
|
font-weight: 900;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 24px;
|
|
color: #ff00ff;
|
|
text-shadow: 0 0 5px #ff00ff;
|
|
}
|
|
|
|
|
|
|
|
|
|
#achievementsContainer {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.achievements-container {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
|
|
.achievement {
|
|
width: 80px;
|
|
height: 80px;
|
|
border: 2px solid #00ffff;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
position: relative;
|
|
}
|
|
|
|
.achievement:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.achievement img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: filter 0.2s;
|
|
}
|
|
|
|
|
|
.achievement-info-box {
|
|
width: 300px;
|
|
padding: 20px;
|
|
background-color: rgba(18, 4, 88, 0.8);
|
|
border-left: 2px solid #00ffff;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.achievement-info-box.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.achievement-info-box img {
|
|
width: 100px;
|
|
height: 100px;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.achievement-info-box h3 {
|
|
color: #00ffff;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.achievement-info-box p {
|
|
color: #ffffff;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#achievementUnlocks h4 {
|
|
color: #00ffff;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#achievementUnlocks h5 {
|
|
color: #00ffff;
|
|
margin-top: 10px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.sign-in-message,
|
|
.no-achievements-message,
|
|
.error-message {
|
|
text-align: center;
|
|
color: #00ffff;
|
|
font-size: 16px;
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
background-color: rgba(0, 255, 255, 0.1);
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px #00ffff;
|
|
}
|
|
|
|
|
|
.sign-in-message p,
|
|
.no-achievements-message p,
|
|
.error-message p {
|
|
margin-bottom: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.sign-in-message,
|
|
.no-achievements-message,
|
|
.error-message {
|
|
padding: 15px;
|
|
}
|
|
|
|
.sign-in-message p,
|
|
.no-achievements-message p,
|
|
.error-message p {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
|
|
.glowing-button {
|
|
background-color: transparent;
|
|
border: 2px solid #00ffff;
|
|
color: #00ffff;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 0 10px #00ffff;
|
|
}
|
|
|
|
.glowing-button:hover {
|
|
background-color: #00ffff;
|
|
color: #000000;
|
|
box-shadow: 0 0 20px #00ffff;
|
|
}
|
|
|
|
|
|
|
|
.unlock-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.unlock-item img {
|
|
width: 30px;
|
|
height: 30px;
|
|
object-fit: cover;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.unlock-item span {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.custom-notification {
|
|
background-color: rgba(18, 4, 88, 0.9);
|
|
color: #00ffff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff;
|
|
border: 2px solid #ff00ff;
|
|
font-family: 'Orbitron', sans-serif;
|
|
max-width: 300px;
|
|
margin-bottom: 10px;
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
transition: opacity 0.3s, transform 0.3s;
|
|
}
|
|
|
|
.custom-notification.show {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.custom-notification .notification-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.custom-notification p {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.custom-notification .close-notification {
|
|
background-color: #ff00ff;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
transition: all 0.3s ease;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.custom-notification .close-notification:hover {
|
|
background-color: #00ffff;
|
|
color: #120458;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
|
|
}
|
|
|
|
body {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
img {
|
|
-webkit-user-drag: none;
|
|
-khtml-user-drag: none;
|
|
-moz-user-drag: none;
|
|
-o-user-drag: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.discord-info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 20px;
|
|
background-color: rgba(0, 255, 255, 0.1);
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.discord-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
border: 2px solid #00ffff;
|
|
}
|
|
|
|
.discord-username {
|
|
flex-grow: 1;
|
|
margin-left: 15px;
|
|
font-size: 16px;
|
|
color: #00ffff;
|
|
}
|
|
|
|
|
|
|
|
.discord-details {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.small-button {
|
|
background-color: #ff00ff;
|
|
color: white;
|
|
border: none;
|
|
padding: 5px 10px;
|
|
font-size: 12px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
transition: all 0.3s ease;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 5px #ff00ff;
|
|
}
|
|
|
|
.small-button:hover {
|
|
background-color: #00ffff;
|
|
color: #120458;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Custom Cursor Styles */
|
|
:root {
|
|
--cursor-color: #ff00ff; /* Neon pink */
|
|
--cursor-outline: #00ffff; /* Cyan outline */
|
|
}
|
|
|
|
body {
|
|
cursor: none;
|
|
}
|
|
|
|
.custom-cursor {
|
|
position: fixed;
|
|
width: 20px;
|
|
height: 20px;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
mix-blend-mode: difference; /* This will help the cursor stand out on different backgrounds */
|
|
}
|
|
|
|
.cursor-dot {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 4px;
|
|
height: 4px;
|
|
background-color: var(--cursor-color);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 5px var(--cursor-color), 0 0 10px var(--cursor-color);
|
|
}
|
|
|
|
.cursor-outline {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid var(--cursor-outline);
|
|
border-radius: 50%;
|
|
transition: all 0.1s ease-out;
|
|
}
|
|
|
|
.custom-cursor.clicking .cursor-outline {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
/* Style for interactive elements */
|
|
button, .draggable, .class-option, .weapon-option {
|
|
cursor: none;
|
|
}
|
|
|
|
button:hover, .draggable:hover, .class-option:hover, .weapon-option:hover {
|
|
cursor: none;
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
.achievements-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.achievements-grid {
|
|
max-height: 40vh;
|
|
}
|
|
|
|
.achievement-info-box {
|
|
width: 100%;
|
|
border-left: none;
|
|
border-top: 2px solid #00ffff;
|
|
}
|
|
|
|
.achievement-info-box img {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.achievement-info-box h3 {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.achievement-info-box p {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.unlock-item img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.unlock-item span {
|
|
font-size: 0.8em;
|
|
}
|
|
}
|
|
|
|
|
|
/* Hide custom cursor for mobile devices */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
body {
|
|
cursor: auto;
|
|
}
|
|
|
|
.custom-cursor {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 600px) {
|
|
|
|
#weaponSelector {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
#weaponInfoBox {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
#weaponImage {
|
|
margin-right: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#weaponDetails {
|
|
text-align: center;
|
|
}
|
|
|
|
.weapon-option {
|
|
width: 60px;
|
|
height: 60px;
|
|
padding: 5px;
|
|
}
|
|
|
|
#synthCoinsCounter {
|
|
bottom: 40px; /* Slightly closer to the shop button on smaller screens */
|
|
}
|
|
|
|
#shopWidget {
|
|
max-width: 95%;
|
|
}
|
|
|
|
.shop-item {
|
|
width: 150px;
|
|
}
|
|
|
|
.shop-item img {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.shop-item h3 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.shop-item p {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.buy-button {
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
|
|
#experienceBar {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
left: 70px;
|
|
width: calc(100% - 140px);
|
|
max-width: none;
|
|
transform: none;
|
|
z-index: 999;
|
|
}
|
|
|
|
#experienceBar canvas {
|
|
font-size: 10px; /* Adjust this value as needed */
|
|
}
|
|
|
|
#levelText {
|
|
font-size: 10px; /* Adjust this value as needed */
|
|
}
|
|
|
|
|
|
|
|
#classInfoBox {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
#classImage {
|
|
margin-right: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#classDetails {
|
|
text-align: center;
|
|
}
|
|
|
|
.class-option {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
|
|
.social-link {
|
|
font-size: 16px;
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.social-link i {
|
|
font-size: 20px;
|
|
width: 20px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
@keyframes glow {
|
|
from {
|
|
box-shadow: 0 0 5px 2px currentColor;
|
|
}
|
|
to {
|
|
box-shadow: 0 0 15px 5px currentColor;
|
|
}
|
|
}
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
#gameControls {
|
|
width: 90%;
|
|
}
|
|
|
|
#uiWidget {
|
|
width: 95%;
|
|
max-height: 95vh;
|
|
}
|
|
}
|
|
|
|
/* Responsive styles for mobile devices */
|
|
@media screen and (max-width: 600px) {
|
|
#ui {
|
|
top: 5px;
|
|
left: 5px;
|
|
gap: 5px;
|
|
}
|
|
|
|
.button {
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#gameControls {
|
|
padding: 20px;
|
|
}
|
|
|
|
#startMessage {
|
|
font-size: 18px;
|
|
}
|
|
|
|
#uiWidget {
|
|
width: 95%;
|
|
padding: 15px;
|
|
}
|
|
|
|
.widget-tabs {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tab-button {
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.weapon-button {
|
|
padding: 8px 16px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.auth-form input {
|
|
padding: 8px;
|
|
font-size: 14px;
|
|
width: 100%;
|
|
}
|
|
|
|
#welcomeMessage {
|
|
font-size: 18px;
|
|
}
|
|
|
|
#minimap.small {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
#minimap.large {
|
|
width: 90%;
|
|
height: 90%;
|
|
top: 5%;
|
|
left: 5%;
|
|
}
|
|
|
|
#shopButton,
|
|
#toggle-minimap {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#shopButton {
|
|
left: 10px;
|
|
}
|
|
|
|
#toggle-minimap {
|
|
right: 10px;
|
|
}
|
|
|
|
/* Experience bar specific styles */
|
|
#levelUpPopup {
|
|
padding: 20px;
|
|
width: 90%;
|
|
max-width: none;
|
|
}
|
|
|
|
#levelUpPopup h2 {
|
|
font-size: 24px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#levelUpPopup p {
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.upgrade-button, .upgrade-option {
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
/* Additional adjustments for very small screens */
|
|
@media screen and (max-width: 320px) {
|
|
#ui {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.button {
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
#startMessage {
|
|
font-size: 16px;
|
|
}
|
|
|
|
#uiWidget {
|
|
padding: 10px;
|
|
}
|
|
|
|
.tab-button {
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.weapon-button {
|
|
padding: 6px 12px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
#welcomeMessage {
|
|
font-size: 16px;
|
|
}
|
|
|
|
#minimap.small {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
#toggle-minimap {
|
|
padding: 4px 8px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* Experience bar specific styles */
|
|
#levelUpPopup h2 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
#levelUpPopup p {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.upgrade-button, .upgrade-option {
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
}
|
|
}
|