516 lines
12 KiB
CSS
516 lines
12 KiB
CSS
/**
|
|
* Macro System Styles
|
|
* Styles for the macro browser, documentation, and related UI components.
|
|
*/
|
|
|
|
/* =============================================================================
|
|
MACRO BROWSER
|
|
Dynamic documentation browser for macros, similar to SlashCommandBrowser.
|
|
============================================================================= */
|
|
|
|
.macroBrowser {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Toolbar (Search + Sort)
|
|
----------------------------------------------------------------------------- */
|
|
|
|
.macroBrowser .macro-toolbar {
|
|
display: flex;
|
|
gap: 1em;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.macroBrowser .macro-search-label {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
gap: 0.5em;
|
|
align-items: center;
|
|
min-width: 200px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.macroBrowser .macro-search-input {
|
|
flex: 1 1 auto;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.macroBrowser .macro-sort-btn {
|
|
flex: 0 0 auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.macroBrowser .macro-sort-btn.active {
|
|
background-color: var(--SmartThemeQuoteColor);
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Container (List + Details panels)
|
|
----------------------------------------------------------------------------- */
|
|
|
|
.macroBrowser .macro-container {
|
|
display: flex;
|
|
gap: 1em;
|
|
align-items: flex-start;
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.macroBrowser .macro-list-panel {
|
|
flex: 1 1 60%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.macroBrowser .macro-details-panel {
|
|
flex: 0 0 40%;
|
|
position: sticky;
|
|
top: 0;
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border-radius: 10px;
|
|
padding: 1em;
|
|
}
|
|
|
|
.macroBrowser .macro-details-placeholder {
|
|
opacity: 0.6;
|
|
text-align: center;
|
|
padding: 2em;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Category Headers
|
|
----------------------------------------------------------------------------- */
|
|
|
|
.macroBrowser .macro-category-header {
|
|
font-weight: bold;
|
|
padding: 0.75em 0.5em 0.25em;
|
|
margin-top: 0.5em;
|
|
border-bottom: 1px solid var(--SmartThemeBorderColor);
|
|
border-radius: 10px 10px 0 0;
|
|
color: var(--SmartThemeQuoteColor);
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--SmartThemeChatTintColor);
|
|
z-index: 1;
|
|
}
|
|
|
|
.macroBrowser .macro-category-header:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.macroBrowser .macro-category-header.isFiltered {
|
|
display: none;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Macro List Items
|
|
Layout: [signature] [description (shrinks)] [source icon]
|
|
----------------------------------------------------------------------------- */
|
|
|
|
.macroBrowser .macro-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
padding: 0.5em;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.15s;
|
|
min-width: 0; /* Allow children to shrink */
|
|
}
|
|
|
|
.macroBrowser .macro-item:hover {
|
|
background: var(--black30a);
|
|
}
|
|
|
|
.macroBrowser .macro-item.selected {
|
|
background: var(--SmartThemeQuoteColor);
|
|
}
|
|
|
|
.macroBrowser .macro-item.isFiltered {
|
|
display: none;
|
|
}
|
|
|
|
.macroBrowser .macro-signature {
|
|
padding: 0.2em 0;
|
|
font-family: var(--monoFontFamily);
|
|
font-size: 0.9em;
|
|
color: var(--SmartThemeQuoteColor);
|
|
flex: 0 1 auto; /* Can shrink, but prefers not to */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 3em; /* Minimum before fully hidden */
|
|
}
|
|
|
|
.macroBrowser .macro-desc-preview {
|
|
flex: 1 1 0; /* Shrinks first, starts at 0 basis */
|
|
opacity: 0.7;
|
|
font-size: 0.9em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0; /* Allow shrinking to nothing */
|
|
}
|
|
|
|
.macroBrowser .macro-source {
|
|
flex: 0 0 auto; /* Never shrinks */
|
|
font-size: 0.8em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.macroBrowser .macro-source.isExtension.isThirdParty {
|
|
color: #f0a030;
|
|
}
|
|
|
|
.macroBrowser .macro-source.isExtension.isCore {
|
|
color: #30a0f0;
|
|
}
|
|
|
|
.macroBrowser .macro-source.isCore:not(.isExtension) {
|
|
color: #50c050;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Macro Details Panel
|
|
----------------------------------------------------------------------------- */
|
|
|
|
.macro-details .macro-details-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 0.5em;
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.macro-details .macro-details-name {
|
|
font-family: var(--monoFontFamily);
|
|
font-size: 1.1em;
|
|
color: var(--SmartThemeQuoteColor);
|
|
background: var(--black30a);
|
|
padding: 0.15em 0.4em 0.3em;
|
|
border-radius: 4px;
|
|
word-break: break-all;
|
|
display: inline-block; /* Shrink-wrap to content */
|
|
}
|
|
|
|
.macro-details .macro-details-header > .macro-source {
|
|
flex: 0 0 auto;
|
|
font-size: 1em;
|
|
margin-top: 0.15em; /* Align with name top padding */
|
|
}
|
|
|
|
.macro-details .macro-category-badge {
|
|
display: inline-block;
|
|
font-size: 0.75em;
|
|
padding: 0.2em 0.6em;
|
|
border-radius: 10px;
|
|
background: color-mix(in srgb, var(--SmartThemeQuoteColor) 50%, transparent);
|
|
color: var(--SmartThemeBodyColor);
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.macro-details .macro-details-section {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.macro-details .macro-details-label {
|
|
font-weight: bold;
|
|
font-size: 0.85em;
|
|
opacity: 0.8;
|
|
margin-bottom: 0.25em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.macro-details .macro-details-text {
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.macro-details .macro-returns-content {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5em;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Arguments List (in details panel)
|
|
----------------------------------------------------------------------------- */
|
|
|
|
.macro-details .macro-args-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.macro-details .macro-arg-item {
|
|
padding: 0.4em 0;
|
|
border-bottom: 1px solid var(--black30a);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.macro-details .macro-arg-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.macro-details .macro-arg-name {
|
|
font-family: var(--monoFontFamily);
|
|
font-weight: bold;
|
|
color: var(--SmartThemeQuoteColor);
|
|
}
|
|
|
|
.macro-details .macro-arg-type {
|
|
font-size: 0.75em;
|
|
padding: 0.1em 0.4em;
|
|
border-radius: 3px;
|
|
background: var(--black30a);
|
|
color: var(--SmartThemeEmColor);
|
|
}
|
|
|
|
.macro-details .macro-arg-required {
|
|
font-size: 0.8em;
|
|
color: var(--warning-color, #e8a97f);
|
|
}
|
|
|
|
.macro-details .macro-arg-desc {
|
|
flex: 1 1 100%;
|
|
font-size: 0.9em;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.macro-details .macro-arg-sample {
|
|
font-size: 0.85em;
|
|
opacity: 0.6;
|
|
font-style: italic;
|
|
}
|
|
|
|
.macro-details .macro-arg-list-info {
|
|
font-size: 0.85em;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.macro-details .macro-example-list {
|
|
list-style: disc;
|
|
padding-left: 1.5em;
|
|
margin: 0.25em 0;
|
|
}
|
|
|
|
.macro-details .macro-example-list li {
|
|
padding: 0.2em 0;
|
|
}
|
|
|
|
.macro-details .macro-example-list code {
|
|
font-family: var(--monoFontFamily);
|
|
background: var(--black30a);
|
|
padding: 0.1em 0.3em;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Alias indicator icon in list items */
|
|
.macro-details .macro-alias-indicator {
|
|
flex: 0 0 auto;
|
|
font-size: 0.8em;
|
|
opacity: 0.6;
|
|
margin-left: 0.5em;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.macro-details .macro-item.isAlias .macro-signature {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* Alias of indicator in details panel */
|
|
.macro-details .macro-alias-of {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
margin: 0.5em 0;
|
|
padding: 0.4em 0.6em;
|
|
background: var(--black30a);
|
|
border-radius: 4px;
|
|
font-size: 0.9em;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.macro-details .macro-alias-of i {
|
|
transform: rotate(90deg);
|
|
font-size: 0.85em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.macro-details .macro-alias-of code {
|
|
font-family: var(--monoFontFamily);
|
|
background: var(--black30a);
|
|
padding: 0.1em 0.4em;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Aliases list in details panel */
|
|
.macro-details .macro-alias-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0.25em 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.macro-details .macro-alias-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3em;
|
|
}
|
|
|
|
.macro-details .macro-alias-item code {
|
|
font-family: var(--monoFontFamily);
|
|
background: var(--black30a);
|
|
padding: 0.2em 0.5em;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.macro-details .macro-alias-item.isHidden {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.macro-details .macro-alias-item.isHidden code {
|
|
text-decoration: line-through;
|
|
text-decoration-style: dashed;
|
|
}
|
|
|
|
.macro-details .macro-alias-hidden-badge {
|
|
font-size: 0.75em;
|
|
opacity: 0.7;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ============================================
|
|
Enhanced Macro Autocomplete Styles
|
|
============================================ */
|
|
|
|
/* Fix macro items in autocomplete list - override the grid display: contents */
|
|
.autoComplete > .item.macro-ac-item {
|
|
display: flex !important;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
grid-column: 1 / -1;
|
|
padding: 0.25em 0.5em;
|
|
min-height: 1.8em;
|
|
}
|
|
|
|
.autoComplete > .item.macro-ac-item > .type {
|
|
flex: 0 0 auto;
|
|
width: 2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.autoComplete > .item.macro-ac-item > .specs {
|
|
flex: 0 0 auto;
|
|
max-width: 40%;
|
|
}
|
|
|
|
.autoComplete > .item.macro-ac-item > .specs > .name {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.autoComplete > .item.macro-ac-item > .stopgap {
|
|
flex: 0 0 0.5em;
|
|
display: block !important;
|
|
}
|
|
|
|
.autoComplete > .item.macro-ac-item > .help {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.autoComplete > .item.macro-ac-item > .help > .helpContent {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
}
|
|
|
|
/* Indicator icons (alias and source) at the end */
|
|
.autoComplete > .item.macro-ac-item > .macro-ac-indicator {
|
|
flex: 0 0 auto;
|
|
font-size: 0.85em;
|
|
opacity: 0.6;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.autoComplete > .item.macro-ac-item > .macro-ac-indicator:first-of-type {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.autoComplete > .item.macro-ac-item > .macro-ac-indicator + .macro-ac-indicator {
|
|
margin-left: 0.25em;
|
|
}
|
|
|
|
/* Third-party source indicator */
|
|
.autoComplete > .item.macro-ac-item > .macro-source.isThirdParty {
|
|
color: #F89406;
|
|
}
|
|
|
|
/* Current argument hint banner in details */
|
|
.macro-ac-arg-hint {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5em;
|
|
padding: 0.5em 0.75em;
|
|
background: linear-gradient(90deg, var(--ac-color-selectedBackground, var(--SmartThemeQuoteColor)), transparent);
|
|
border-left: 3px solid var(--ac-color-matchedText, var(--SmartThemeBorderColor));
|
|
border-radius: 0 4px 4px 0;
|
|
margin-bottom: 0.5em;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.macro-ac-arg-hint i {
|
|
color: var(--ac-color-matchedText, var(--SmartThemeBorderColor));
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.macro-ac-hint-type {
|
|
font-family: var(--monoFontFamily);
|
|
font-size: 0.85em;
|
|
padding: 0.1em 0.3em;
|
|
background: var(--ac-color-hoveredBackground, var(--black30a));
|
|
border-radius: 3px;
|
|
margin-left: 0.25em;
|
|
}
|
|
|
|
.macro-ac-hint-desc {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.macro-ac-hint-sample {
|
|
opacity: 0.6;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Details panel using MacroBrowser styles - just add autocomplete context adjustments */
|
|
.autoComplete-details .macro-ac-details {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
/* Highlight current argument in arguments list */
|
|
.autoComplete-details .macro-arg-item.current {
|
|
background: var(--ac-color-selectedBackground, var(--SmartThemeQuoteColor));
|
|
padding: 0.25em 0.5em;
|
|
margin: 0 -0.5em;
|
|
border-radius: 4px;
|
|
}
|