76 lines
1.6 KiB
CSS
76 lines
1.6 KiB
CSS
/* styles/controllerButton.css - EXACT from original JS */
|
|
|
|
/* Menu separator */
|
|
.cf-menu-separator {
|
|
margin: 20px 0;
|
|
width: 100%;
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Button wrapper */
|
|
.cf-button-wrapper {
|
|
display: flex;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* Main menu button */
|
|
.cf-menu-button {
|
|
font-family: var(--cf-brand-font, Arial), sans-serif;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
background: #252525;
|
|
border: 1px solid #333;
|
|
color: white;
|
|
padding: 5px 10px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
margin: 0 3px;
|
|
transition: all 0.2s ease;
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Hover effects */
|
|
.cf-menu-button:hover {
|
|
background: #2a2a2a;
|
|
border-color: var(--cf-brand-primary, #FF5722);
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Active/pressed state */
|
|
.cf-menu-button:active {
|
|
background: #222;
|
|
transform: translateY(0);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
|
|
}
|
|
|
|
/* Branding text elements */
|
|
.cf-brand-text {
|
|
font-family: var(--cf-brand-font, Arial), sans-serif;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.cf-brand-highlight {
|
|
color: var(--cf-brand-primary, #FF5722);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Connected state */
|
|
.cf-menu-button.connected {
|
|
animation: cf-button-pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes cf-button-pulse {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.4);
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 6px rgba(255, 87, 34, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(255, 87, 34, 0);
|
|
}
|
|
}
|