Eric Loyd
70 lines
3.1 KiB
CSS
70 lines
3.1 KiB
CSS
/* ==========================================
|
|
1. THE CANVAS: Elongated Diagonal Sky Wash
|
|
========================================== */
|
|
html body.parent div.parentpage div#header.parenthead {
|
|
width: 100% !important;
|
|
background-color: #02040a !important;
|
|
|
|
/* 45-degree angle stretches the colors sideways across your 1706px screen */
|
|
background: linear-gradient(45deg,
|
|
#02040a 0%,
|
|
#0b1736 35%,
|
|
#1e3a8a 50%,
|
|
#0b1736 65%,
|
|
#02040a 100%
|
|
) !important;
|
|
|
|
border-bottom: 2px solid #2563eb !important; /* Sharp blue accent baseline */
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7) !important;
|
|
}
|
|
|
|
/* ==========================================
|
|
2. TEXT INTERACTION: Increased Lift
|
|
========================================== */
|
|
html body.parent div.parentpage div#header.parenthead .mainmenu div a,
|
|
html body.parent div.parentpage div#header.parenthead #config-menulink span a {
|
|
display: inline-block !important;
|
|
/* Uses a spring-like ease out instead of a flat linear animation */
|
|
transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), color 0.15s ease !important;
|
|
}
|
|
|
|
html body.parent div.parentpage div#header.parenthead .mainmenu div a:hover,
|
|
html body.parent div.parentpage div#header.parenthead #config-menulink span a:hover {
|
|
color: #ffffff !important;
|
|
transform: translateY(-3px) !important; /* Doubled the lift distance for a distinct reaction */
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.4); /* Subtle text clarity boost */
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
/* ==========================================
|
|
3. BUTTON INTERACTION: Solid Scale Pop
|
|
========================================== */
|
|
html body.parent div.parentpage div#header.parenthead button.btn,
|
|
html body.parent div.parentpage div#header.parenthead .btn-primary {
|
|
transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.15s ease, filter 0.15s ease !important;
|
|
}
|
|
|
|
html body.parent div.parentpage div#header.parenthead button.btn:hover,
|
|
html body.parent div.parentpage div#header.parenthead .btn-primary:hover {
|
|
transform: translateY(-3px) scale(1.04) !important; /* Increased lift and expansion scale */
|
|
box-shadow: 0 0 15px rgba(37, 99, 235, 0.6) !important; /* Clear highlight glow underneath */
|
|
filter: brightness(1.2) !important;
|
|
}
|
|
|
|
/* ==========================================
|
|
4. UTILITY ICONS: Quick Response
|
|
========================================== */
|
|
html body.parent div.parentpage div#header.parenthead .header-right a i,
|
|
html body.parent div.parentpage div#header.parenthead #profile-button i,
|
|
html body.parent div.parentpage div#header.parenthead #help-button i {
|
|
display: inline-block !important;
|
|
transition: transform 0.12s ease, color 0.12s ease !important;
|
|
}
|
|
|
|
html body.parent div.parentpage div#header.parenthead .header-right a i:hover,
|
|
html body.parent div.parentpage div#header.parenthead #profile-button:hover i,
|
|
html body.parent div.parentpage div#header.parenthead #help-button:hover i {
|
|
color: #60a5fa !important;
|
|
transform: scale(1.2) translateY(-1px) !important; /* Visually pops forward and up slightly */
|
|
}
|