diff --git a/src/styles/brackets_codemirror_override.less b/src/styles/brackets_codemirror_override.less index 23d480310ad..37458121fe2 100644 --- a/src/styles/brackets_codemirror_override.less +++ b/src/styles/brackets_codemirror_override.less @@ -50,14 +50,28 @@ background: transparent; } +.CodeMirror .CodeMirror-activeline-background { + background: @activeline-bg-unfocused; +} + .CodeMirror-focused .CodeMirror-activeline-background { background: @activeline-bg; } +.show-line-padding .CodeMirror .CodeMirror-activeline-background { + box-shadow: inset @code-padding 0 0 0 @activeline-number-bg-unfocused; +} + .show-line-padding .CodeMirror-focused .CodeMirror-activeline-background { box-shadow: inset @code-padding 0 0 0 @activeline-number-bg; } +.CodeMirror .CodeMirror-activeline { + .CodeMirror-gutter-elt { + background: @activeline-number-bg-unfocused; + } +} + .CodeMirror-focused .CodeMirror-activeline { & > div, .CodeMirror-gutter-elt { height: 100%; @@ -252,6 +266,10 @@ div.CodeMirror-cursors { color: @accent-comment; } + .CodeMirror .CodeMirror-activeline-background { + background: @activeline-bg-unfocused; + } + .CodeMirror-focused .CodeMirror-activeline-background { background: @activeline-bg; } @@ -260,6 +278,12 @@ div.CodeMirror-cursors { box-shadow: inset @code-padding 0 0 0 @background; } + .CodeMirror .CodeMirror-activeline { + .CodeMirror-gutter-elt { + background: @activeline-number-bg-inline-unfocused; + } + } + .CodeMirror-focused .CodeMirror-activeline { .CodeMirror-gutter-elt { background: @activeline-number-bg-inline; diff --git a/src/styles/brackets_theme_default.less b/src/styles/brackets_theme_default.less index 5938cf06392..a55648ff981 100644 --- a/src/styles/brackets_theme_default.less +++ b/src/styles/brackets_theme_default.less @@ -103,6 +103,16 @@ @activeline-number-bg: #dee5e6; @activeline-number-bg-inline: #d7dede; +/* background color of the line that has the cursor in the inactive pane */ +@activeline-bg-unfocused: #f1f1f1; +@activeline-number-unfocused: rgba(0, 0, 0, 0.7); +@activeline-number-bg-unfocused: rgba(222, 229, 230, 0.7); +@activeline-number-bg-inline-unfocused: rgba(215, 222, 222, 0.5); + +/* same for dark theme */ +@activeline-bg-unfocused-dark: rgba(255, 255, 255, 0.04); +@activeline-number-bg-unfocused-dark: rgba(0, 0, 0, 0.4); + /* custom scrollbar colors */ @win-scrollbar-track: rgb(240, 240, 240); @win-scrollbar-thumb: rgb(206, 206, 206); @@ -159,6 +169,17 @@ .dark { .inline-widget { + + .CodeMirror .CodeMirror-activeline-background { + background-color: @activeline-bg-unfocused-dark; + } + + .CodeMirror .CodeMirror-activeline { + .CodeMirror-gutter-elt { + background-color: @activeline-number-bg-unfocused-dark; + } + } + color: @dark-bc-text; background-color: @dark-bc-bg-inline-widget; border-top: 1px solid rgba(255, 255, 255, 0.1); @@ -247,6 +268,31 @@ color: @dark-bc-text-thin-quiet; } } + + .CodeMirror .CodeMirror-activeline-background { + background-color: @activeline-bg-unfocused-dark; + } + + .CodeMirror .CodeMirror-activeline { + .CodeMirror-gutter-elt { + background-color: @activeline-number-bg-unfocused-dark; + } + } + + /* For nested editor */ + .CodeMirror { + .CodeMirror .CodeMirror-activeline-background { + /* Only way I found to override the normal style*/ + background-color: @activeline-bg-unfocused-dark!important; + } + + .CodeMirror .CodeMirror-activeline { + .CodeMirror-gutter-elt { + /* Only way I found to override the normal style*/ + background-color: @activeline-number-bg-unfocused-dark!important; + } + } + } } /* Variables and Mixins for non-code UI elements that can be styled */