search.less 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. .search-container {
  2. left: 52px;
  3. top: 33px;
  4. margin: 15px;
  5. z-index: 1000;
  6. position: absolute;
  7. width: 700px;
  8. box-shadow: 0px 0px 55px 0px black;
  9. padding: 10px;
  10. background-color: @grafanaPanelBackground;
  11. border: 1px solid @grafanaTargetFuncBackground;
  12. .label-tag {
  13. margin-left: 6px;
  14. font-size: 11px;
  15. padding: 2px 6px;
  16. }
  17. }
  18. // Search
  19. .search-field-wrapper {
  20. padding-bottom: 10px;
  21. input {
  22. width: 100%;
  23. padding: 18px 8px;
  24. box-sizing: border-box;
  25. }
  26. button {
  27. margin: 0 4px 0 0;
  28. }
  29. > span {
  30. display: block;
  31. overflow: hidden;
  32. }
  33. }
  34. .search-results-container {
  35. height: 450px;
  36. overflow: auto;
  37. display: block;
  38. line-height: 28px;
  39. .search-result-item:hover, .search-result-item.selected {
  40. background-color: @grafanaListHighlight;
  41. }
  42. .selected {
  43. .search-result-tag {
  44. opacity: 0.70;
  45. color: white;
  46. }
  47. }
  48. .fa-star, .fa-star-o {
  49. padding-left: 13px;
  50. }
  51. .fa-star {
  52. color: @orange;
  53. }
  54. .search-result-link {
  55. color: @grafanaListMainLinkColor;
  56. .fa {
  57. padding-right: 10px;
  58. }
  59. }
  60. .search-result-item {
  61. display: block;
  62. padding: 3px 10px;
  63. white-space: nowrap;
  64. background-color: @grafanaListBackground;
  65. margin-bottom: 4px;
  66. }
  67. .search-result-tags {
  68. float: right;
  69. }
  70. .search-result-actions {
  71. float: right;
  72. padding-left: 20px;
  73. }
  74. }
  75. .search-switches {
  76. position: absolute;
  77. top: 19px;
  78. right: 21px;
  79. }
  80. .search-button-row {
  81. padding-top: 20px;
  82. button, a {
  83. margin-right: 10px;
  84. }
  85. }