hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: tooltip should respect themes

Browse source
This commit is contained in:
robase 2025-07-27 22:02:06 +01:00 • committed by github.com/robase
parent 3292f88810
commit e7839a09a1
1 changed files with 33 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

57
website/src/repl/Repl.css
View file

@ -71,50 +71,54 @@
} }
/* Override default styles from the codemirror inline css for autocomplete info tooltip*/ /* Override default styles from the codemirror inline css for autocomplete info tooltip*/
/* Override default styles from the c odemirror inline css for autocomplete info tooltip*/
.cm-tooltip.cm-completionInfo { .cm-tooltip.cm-completionInfo {
padding: 0 !important; padding: 12px !important;
background: #1e1e1e !important; padding-bottom: 12px !important;
border: 1px solid #3a3a3a !important; border: 1px solid var(--foreground) !important;
border-radius: 4px !important; border-radius: 4px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
max-width: 500px !important; max-width: 500px !important;
min-width: 300px !important; min-width: 300px !important;
max-height: 400px !important; max-height: 400px !important;
white-space: normal !important; white-space: normal !important;
overflow: auto !important;
background-color: var(--lineHighlight) !important;
} }
/* Main tooltip container */ /* Main tooltip container */
.autocomplete-info-tooltip { .autocomplete-info-tooltip {
padding: 12px; border-radius: 4px !important;
color: #d4d4d4; color: var(--foreground);
font-family: 'SF Mono', 'Monaco', monospace; font-family: var(--font-family, 'SF Mono', 'Monaco', monospace);
font-size: 13px; font-size: var(--font-size, 13px);
line-height: 1.4; line-height: 1.4;
overflow-y: auto;
max-width: 600px; max-width: 600px;
max-height: 400px; max-height: 400px;
min-width: 400px;
} }
/* Function name */ /* Function name */
.autocomplete-info-function-name { .autocomplete-info-function-name {
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: #ffffff; color: var(--foreground);
margin: 0 0 8px 0; margin: 0 0 8px 0;
} }
/* Function description */ /* Function description */
.autocomplete-info-function-description { .autocomplete-info-function-description {
margin: 0 0 12px 0; margin: 0 0 12px 0;
color: #b4b4b4; color: var(--foreground);
line-height: 1.5; line-height: 1.5;
opacity: 0.8;
} }
/* Section titles */ /* Section titles */
.autocomplete-info-section-title { .autocomplete-info-section-title {
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: #ffffff; color: var(--foreground);
margin: 16px 0 6px 0; margin: 16px 0 6px 0;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
@ -138,9 +142,9 @@
.autocomplete-info-param-item { .autocomplete-info-param-item {
margin-bottom: 8px; margin-bottom: 8px;
padding: 8px; padding: 8px;
background: #2a2a2a; background-color: var(--lineBackground);
border-radius: 3px; border-radius: 3px;
border-left: 2px solid #555; border-left: 2px solid var(--foreground, #555);
} }
.autocomplete-info-param-item:last-child { .autocomplete-info-param-item:last-child {
@ -149,23 +153,24 @@
.autocomplete-info-param-name { .autocomplete-info-param-name {
font-weight: 600; font-weight: 600;
color: #ffffff; color: var(--variable, var(--foreground));
margin-right: 8px; margin-right: 8px;
} }
.autocomplete-info-param-type { .autocomplete-info-param-type {
color: #888; color: var(--comment);
font-size: 12px; font-size: 12px;
background: #333; background-color: var(--gutterForeground);
padding: 1px 4px; padding: 1px 4px;
border-radius: 2px; border-radius: 2px;
} }
.autocomplete-info-param-desc { .autocomplete-info-param-desc {
color: #b4b4b4; color: var(--foreground);
font-size: 10px; font-size: 10px;
margin-top: 4px; margin-top: 4px;
line-height: 1.4; line-height: 1.4;
opacity: 0.7;
} }
/* Examples */ /* Examples */
@ -174,29 +179,33 @@
} }
.autocomplete-info-example-code { .autocomplete-info-example-code {
background: #2a2a2a; background: var(--lineBackground);
color: #d4d4d4; color: var(--foreground);
padding: 8px; padding: 8px;
border-radius: 3px; border-radius: 3px;
font-family: 'SF Mono', 'Monaco', monospace; font-family: var(--font-family, 'SF Mono', 'Monaco', monospace);
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
margin: 4px 0; margin: 4px 0;
overflow-x: auto; overflow-x: auto;
white-space: pre; white-space: pre;
border: 1px solid #3a3a3a; border: 1px solid var(--foreground, #3a3a3a);
} }
/* Scrollbar */ /* Scrollbar - using theme colors */
.autocomplete-info-tooltip::-webkit-scrollbar { .autocomplete-info-tooltip::-webkit-scrollbar {
width: 4px; width: 4px;
} }
.autocomplete-info-tooltip::-webkit-scrollbar-track { .autocomplete-info-tooltip::-webkit-scrollbar-track {
background: #2a2a2a; /* background: var(--lineBackground, var(--background)); */
} }
.autocomplete-info-tooltip::-webkit-scrollbar-thumb { .autocomplete-info-tooltip::-webkit-scrollbar-thumb {
background: #555; /* background: var(--border, #555); */
border-radius: 2px; border-radius: 2px;
} }
.autocomplete-info-tooltip::-webkit-scrollbar-thumb:hover {
/* background: var(--selection, var(--border, #777)); */
}