command-menu.css•4.71 kB
/* command-menu.css - Command system and menu styling */
/* Menu Container */
#chatbox {
position: relative;
}
/* Command menu container - Popup positioned */
.command-menu {
position: absolute;
bottom: 100%;
left: -5.5rem;
margin-bottom: 0.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--border-radius);
padding: 0;
min-width: 8.4rem;
max-width: 13rem;
z-index: var(--z-modal);
transition: opacity var(--transition-medium) ease, transform var(--transition-medium) ease;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
display: none;
flex-direction: column;
overflow: visible;
}
.command-menu.visible {
display: flex;
}
.command-menu-content {
padding: 0.9375rem;
max-height: 25rem;
overflow-y: auto;
overflow-x: visible;
transition: opacity var(--transition-medium) ease, transform var(--transition-medium) ease;
border-radius: 0 0 var(--border-radius) var(--border-radius);
scrollbar-width: none;
}
.command-menu-content::-webkit-scrollbar {
display: none;
}
/* Menu Header & Toggle */
.command-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.625rem 0.9375rem;
background: var(--command-menu-header-bg);
border-radius: var(--border-radius) var(--border-radius) 0 0;
cursor: pointer;
user-select: none;
}
.command-menu-title {
font-weight: 600;
color: #000;
font-size: 0.875rem;
}
.command-menu-toggle {
background: none;
border: none;
color: #000;
font-size: 1.125rem;
cursor: pointer;
transition: transform var(--transition-medium) ease;
padding: 0;
line-height: 1;
}
.command-menu.collapsed .command-menu-toggle {
transform: rotate(180deg);
}
.command-menu.collapsed .command-menu-content {
max-height: 0;
padding: 0 0.9375rem;
overflow: hidden;
}
/* Command Items */
.command-item {
position: relative;
margin-bottom: 0.625rem;
padding: 0.5rem 0.75rem;
background: var(--command-menu-bg);
border: 4px ridge #000000;
border-radius: 0.375rem;
cursor: pointer;
transition: background var(--transition-fast) ease, padding var(--transition-fast) ease;
}
.command-item:last-child {
margin-bottom: 0;
}
.command-item:hover {
background: var(--command-item-hover-bg);
padding-left: 1.0625rem;
border-left: 3px solid #3d5a80;
}
.command-name {
font-weight: 600;
color: white;
font-size: 0.875rem;
flex: 1;
}
.command-name::before {
content: '⚡';
margin-right: 0.5rem;
opacity: 0.7;
font-size: 0.75rem;
}
.command-desc {
display: none;
}
/* Notebook Submenu */
.notebook-item {
position: relative;
}
.notebook-submenu {
position: absolute;
left: 100%;
bottom: 0;
margin-left: -3.4375rem;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 0.375rem;
padding: 0.3125rem 0;
min-width: auto;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
z-index: var(--z-tooltip);
display: none;
}
.notebook-item:hover .notebook-submenu {
display: block;
}
/* Log Submenu */
.log-item {
position: relative;
}
.log-submenu {
position: absolute;
left: 100%;
bottom: 0;
margin-left: -3.4375rem;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 0.375rem;
padding: 0.3125rem 0;
min-width: auto;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
z-index: var(--z-tooltip);
display: none;
}
.log-item:hover .log-submenu {
display: block;
}
.submenu-item {
padding: 0.375rem 0.75rem;
cursor: pointer;
font-size: 0.8125rem;
color: white;
background: var(--command-menu-bg);
border: 2px solid #000000;
border-radius: 0.375rem;
margin: 0.1rem 0.2rem;
box-shadow: 0 2px 8px rgba(30, 30, 50, 0.10);
transition: background var(--transition-fast) ease, color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.submenu-item:hover {
background: var(--command-item-hover-bg);
}
.notebook-item .command-name::after {
content: ' ▶';
font-size: 0.625rem;
opacity: 0.7;
}
.log-item .command-name::after {
content: ' ▶';
font-size: 0.625rem;
opacity: 0.7;
}
/* Tooltips */
.command-item[title] {
position: relative;
}
.command-item[title]:hover::before {
content: attr(title);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: 0.625rem;
padding: 0.3125rem 0.625rem;
background: var(--tooltip-bg);
color: white;
font-size: 0.75rem;
border-radius: 0.25rem;
white-space: nowrap;
z-index: var(--z-tooltip);
pointer-events: none;
}