ui/perkunlockprogresspanel.razor.scss
PerkUnlockProgressPanel {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 990;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.65);
pointer-events: all;
color: white;
.run_xp_label {
position: relative;
text-align: center;
font-family: "Cal Sans";
font-size: 22px;
color: rgba(160, 220, 255, 0.85);
text-shadow: 2px 2px 0px black;
pointer-events: none;
margin-bottom: 8px;
}
.panel_bg {
position: relative;
width: 560px;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 36px 48px 40px 48px;
background-color: rgba(8, 12, 10, 0.97);
border: 2px solid rgba(100, 220, 160, 0.2);
border-radius: 10px;
}
.progress_title_label {
position: relative;
font-family: "Cal Sans";
font-size: 22px;
color: rgba(200, 240, 220, 0.75);
text-shadow: 2px 2px 0px black;
letter-spacing: 2px;
text-transform: uppercase;
}
.xp_bar_container {
position: relative;
width: 100%;
height: 26px;
background-color: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 13px;
overflow: hidden;
flex-shrink: 0;
.xp_bar_new {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0%;
background-color: rgba(255, 255, 255, 1);
border-radius: 13px;
}
.xp_bar_fill {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0%;
background-color: rgba(80, 200, 140, 0.85);
border-radius: 13px;
opacity: 0.8;
&.animated {
transition: width 0.6s ease-out;
}
}
}
.xp_label {
position: relative;
font-size: 14px;
color: rgba(255, 255, 255, 0.45);
text-align: center;
}
.continue_button {
position: relative;
padding: 10px 36px;
font-size: 18px;
font-family: "Cal Sans";
color: rgba(255, 255, 255, 0.9);
background-color: rgba(60, 160, 110, 0.85);
border: 1px solid rgba(100, 220, 160, 0.4);
border-radius: 6px;
cursor: pointer;
&:hover {
background-color: rgba(70, 185, 125, 0.95);
}
}
.unlock_text {
position: relative;
font-size: 30px;
color: rgba(255, 220, 80, 0.95);
text-shadow: 0px 0px 20px rgba(255, 200, 60, 0.6);
text-align: center;
transition: all 0.25s ease-out;
}
}