_code_editor.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. .gf-code-editor {
  2. min-height: 2.60rem;
  3. min-width: 20rem;
  4. flex-grow: 1;
  5. margin-right: 0.25rem;
  6. visibility: hidden;
  7. &.ace_editor {
  8. @include font-family-monospace();
  9. font-size: 1rem;
  10. min-height: 2.60rem;
  11. @include border-radius($input-border-radius-sm);
  12. border: $input-btn-border-width solid $input-border-color;
  13. }
  14. &--theme-loaded {
  15. visibility: visible;
  16. }
  17. }
  18. .ace_editor.ace_autocomplete {
  19. @include font-family-monospace();
  20. font-size: 1rem;
  21. // Ace editor adds <style> tag at the end of <head>, after grafana.css, so !important
  22. // is used for overriding styles with the same CSS specificity.
  23. background-color: $dropdownBackground !important;
  24. color: $dropdownLinkColor !important;
  25. border: 1px solid $dropdownBorder !important;
  26. width: 550px !important;
  27. .ace_scroller {
  28. .ace_selected, .ace_active-line, .ace_line-hover {
  29. color: $dropdownLinkColorHover;
  30. background-color: $dropdownLinkBackgroundHover !important;
  31. }
  32. .ace_line-hover {
  33. border-color: transparent;
  34. }
  35. .ace_completion-highlight {
  36. color: $yellow;
  37. }
  38. .ace_rightAlignedText {
  39. color: $text-muted;
  40. z-index: 0;
  41. }
  42. }
  43. }
  44. $doc-font-size: $font-size-sm;
  45. .ace_tooltip.ace_doc-tooltip {
  46. @include font-family-monospace();
  47. font-size: $doc-font-size;
  48. background-color: $popover-help-bg;
  49. color: $popover-help-color;
  50. background-image: none;
  51. border: 1px solid $dropdownBorder;
  52. padding: 0.5rem 1rem;
  53. hr {
  54. background-color: $popover-help-color;
  55. margin: 0.5rem 0rem;
  56. }
  57. code {
  58. padding: 0px 1px;
  59. margin: 0px;
  60. }
  61. }
  62. .ace_tooltip {
  63. border-radius: 3px;
  64. }
  65. .ace_hidden-cursors .ace_cursor {
  66. opacity: 0 !important;
  67. }