diff --git a/services/web/frontend/js/features/source-editor/extensions/go-to-line.ts b/services/web/frontend/js/features/source-editor/extensions/go-to-line.ts index 04630305f3..639725e67e 100644 --- a/services/web/frontend/js/features/source-editor/extensions/go-to-line.ts +++ b/services/web/frontend/js/features/source-editor/extensions/go-to-line.ts @@ -25,9 +25,11 @@ const gotoLineTheme = EditorView.baseTheme({ '.cm-panel.cm-gotoLine': { padding: '10px', fontSize: '14px', + backgroundColor: 'var(--bg-secondary-themed)', '& label': { margin: 0, fontSize: '14px', + color: 'var(--content-primary-themed)', '& .cm-textfield': { margin: '0 10px', maxWidth: '100px', @@ -35,19 +37,18 @@ const gotoLineTheme = EditorView.baseTheme({ padding: '5px 16px', fontSize: '14px', fontWeight: 'normal', - lineHeight: 'var(--line-height-base)', - color: 'var(--input-color)', - backgroundColor: '#fff', + color: 'var(--content-primary-themed)', + backgroundColor: 'var(--bg-primary-themed)', + border: '1px solid var(--border-primary-themed)', backgroundImage: 'none', - borderRadius: 'var(--input-border-radius)', + borderRadius: 'var(--border-radius-full)', boxShadow: 'inset 0 1px 1px rgb(0 0 0 / 8%)', transition: 'border-color ease-in-out .15s, box-shadow ease-in-out .15s', '&:focus-visible': { outline: 'none', - }, - '&:focus': { - borderColor: 'var(--input-border-focus)', + boxShadow: + 'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%)', }, }, }, @@ -55,13 +56,17 @@ const gotoLineTheme = EditorView.baseTheme({ padding: '4px 16px 5px', textTransform: 'capitalize', fontSize: '14px', - lineHeight: 'var(--line-height-base)', userSelect: 'none', backgroundImage: 'none', - backgroundColor: 'var(--btn-default-bg)', - borderRadius: 'var(--btn-border-radius-base)', + backgroundColor: 'var(--bg-secondary-themed)', + borderRadius: 'var(--border-radius-full)', border: '0 solid transparent', - color: '#fff', + color: 'var(--content-primary-themed)', + fontWeight: '600', + transition: 'background-color ease-in-out .15s', + '&:hover': { + backgroundColor: 'var(--bg-tertiary-themed)', + }, }, }, })