| @@ -40,8 +40,12 @@ | ||
| 40 | 40 | border-bottom: 2px solid #e6e6e6; |
| 41 | 41 | padding-bottom: 4px; |
| 42 | 42 | margin-bottom: 4px; |
| 43 | 43 | } |
| 44 | +.vik-context-menu li a.btngroup { | |
| 45 | + padding-left: 8px; | |
| 46 | + font-size: smaller; | |
| 47 | +} | |
| 44 | 48 | .vik-context-menu li a { |
| 45 | 49 | font-family: Helvetica; |
| 46 | 50 | display: flex; |
| 47 | 51 | align-items: center; |
| @@ -72,8 +76,44 @@ | ||
| 72 | 76 | .vik-context-menu li a .button-text { |
| 73 | 77 | flex: 1; |
| 74 | 78 | } |
| 75 | 79 | |
| 80 | +.vik-context-menu li.search-box { | |
| 81 | + padding: 6px !important; | |
| 82 | + position: relative; | |
| 83 | +} | |
| 84 | +.vik-context-menu li.search-box input { | |
| 85 | + width: 100%; | |
| 86 | + box-sizing: border-box; | |
| 87 | + background: #fff; | |
| 88 | + border: 1px solid #ddd; | |
| 89 | + color: #333; | |
| 90 | + border-radius: 4px; | |
| 91 | + padding: 8px 26px 8px 8px; | |
| 92 | + outline: none; | |
| 93 | + font-size: 14px; | |
| 94 | +} | |
| 95 | +.vik-context-menu li.search-box input:focus { | |
| 96 | + border-color: #1674b8; | |
| 97 | +} | |
| 98 | +.vik-context-menu li.search-box button.search-clear { | |
| 99 | + position: absolute; | |
| 100 | + top: 50%; | |
| 101 | + right: 14px; | |
| 102 | + transform: translateY(-50%); | |
| 103 | + display: inline-flex; | |
| 104 | + padding: 0; | |
| 105 | + appearance: none; | |
| 106 | + background: none; | |
| 107 | + border: none; | |
| 108 | + outline: none; | |
| 109 | + font-size: 14px; | |
| 110 | + cursor: pointer; | |
| 111 | +} | |
| 112 | +.vik-context-menu li.search-box button.search-clear:hover { | |
| 113 | + color: #218cf2 !important; | |
| 114 | +} | |
| 115 | + | |
| 76 | 116 | /** |
| 77 | 117 | * Dark Mode |
| 78 | 118 | */ |
| 79 | 119 | |
| @@ -89,8 +129,16 @@ | ||
| 89 | 129 | .vik-context-menu.dark-mode li a, |
| 90 | 130 | .vik-context-menu.dark-mode li a.disabled:hover { |
| 91 | 131 | color: #fff; |
| 92 | 132 | } |
| 133 | +.vik-context-menu.dark-mode li.search-box input { | |
| 134 | + background: #333; | |
| 135 | + border-color: 1px solid #777; | |
| 136 | + color: #fff; | |
| 137 | +} | |
| 138 | +.vik-context-menu.dark-mode li.search-box button.search-clear { | |
| 139 | + color: #fff; | |
| 140 | +} | |
| 93 | 141 | |
| 94 | 142 | @media (prefers-color-scheme: dark) { |
| 95 | 143 | .vik-context-menu:not(.light-mode) { |
| 96 | 144 | background: #1f1c1c; |
| @@ -102,8 +150,16 @@ | ||
| 102 | 150 | border-bottom: 2px solid #3b3b3b; |
| 103 | 151 | } |
| 104 | 152 | .vik-context-menu:not(.light-mode) li a, |
| 105 | 153 | .vik-context-menu:not(.light-mode) li a.disabled:hover { |
| 154 | + color: #fff; | |
| 155 | + } | |
| 156 | + .vik-context-menu:not(.light-mode) li.search-box input { | |
| 157 | + background: #333; | |
| 158 | + border-color: 1px solid #777; | |
| 159 | + color: #fff; | |
| 160 | + } | |
| 161 | + .vik-context-menu:not(.light-mode) li.search-box button.search-clear { | |
| 106 | 162 | color: #fff; |
| 107 | 163 | } |
| 108 | 164 | } |
| 109 | 165 | |
