/** * Context menu */ .vik-context-menu { position: absolute; background: #f6f6f6; opacity: 0.95; display: block; width: auto; max-width: 400px; min-width: 160px; max-height: calc(100vh - 8px); overflow-y: scroll; border-radius: 4px; -webkit-box-shadow: 0px 0px 6px 1px rgba(136,136,136,1); -moz-box-shadow: 0px 0px 6px 1px rgba(136,136,136,1); box-shadow: 0px 0px 6px 1px rgba(136,136,136,1); z-index: 2147483647; } .vik-context-menu::-webkit-scrollbar { display: none; } .vik-context-menu ul { list-style: none; margin: 0; padding: 0; } .vik-context-menu li { padding: 0; margin: 0; } .vik-context-menu li:first-child { padding-top: 4px; } .vik-context-menu li:last-child { padding-bottom: 4px; } .vik-context-menu li.separator:not(:last-child) { border-bottom: 2px solid #e6e6e6; padding-bottom: 4px; margin-bottom: 4px; } .vik-context-menu li a.btngroup { padding-left: 8px; font-size: smaller; } .vik-context-menu li a { font-family: Helvetica; display: flex; align-items: center; text-decoration: none; color: #434355; cursor: default; padding: 6px 8px 6px 16px; font-size: 14px; } .vik-context-menu li a:not(.disabled):hover { color: #fff; background: #218cf2; } .vik-context-menu li a.disabled { opacity: 0.6; } .vik-context-menu li a.disabled:hover { color: #434355; } .vik-context-menu li a .button-icon { margin-right: 4px; font-size: 16px; } .vik-context-menu li a .button-icon img { max-width: 16px; max-height: 16px; } .vik-context-menu li a .button-text { flex: 1; } .vik-context-menu li.search-box { padding: 6px !important; position: relative; } .vik-context-menu li.search-box input { width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #ddd; color: #333; border-radius: 4px; padding: 8px 26px 8px 8px; outline: none; font-size: 14px; } .vik-context-menu li.search-box input:focus { border-color: #1674b8; } .vik-context-menu li.search-box button.search-clear { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: inline-flex; padding: 0; appearance: none; background: none; border: none; outline: none; font-size: 14px; cursor: pointer; } .vik-context-menu li.search-box button.search-clear:hover { color: #218cf2 !important; } /** * Dark Mode */ .vik-context-menu.dark-mode { background: #1f1c1c; -webkit-box-shadow: 0px 0px 6px 1px rgba(100,100,100,1); -moz-box-shadow: 0px 0px 6px 1px rgba(100,100,100,1); box-shadow: 0px 0px 6px 1px rgba(100,100,100,1); } .vik-context-menu.dark-mode li.separator:not(:last-child) { border-bottom: 2px solid #3b3b3b; } .vik-context-menu.dark-mode li a, .vik-context-menu.dark-mode li a.disabled:hover { color: #fff; } .vik-context-menu.dark-mode li.search-box input { background: #333; border-color: 1px solid #777; color: #fff; } .vik-context-menu.dark-mode li.search-box button.search-clear { color: #fff; } @media (prefers-color-scheme: dark) { .vik-context-menu:not(.light-mode) { background: #1f1c1c; -webkit-box-shadow: 0px 0px 6px 1px rgba(100,100,100,1); -moz-box-shadow: 0px 0px 6px 1px rgba(100,100,100,1); box-shadow: 0px 0px 6px 1px rgba(100,100,100,1); } .vik-context-menu:not(.light-mode) li.separator:not(:last-child) { border-bottom: 2px solid #3b3b3b; } .vik-context-menu:not(.light-mode) li a, .vik-context-menu:not(.light-mode) li a.disabled:hover { color: #fff; } .vik-context-menu:not(.light-mode) li.search-box input { background: #333; border-color: 1px solid #777; color: #fff; } .vik-context-menu:not(.light-mode) li.search-box button.search-clear { color: #fff; } } /** * Utils */ /* hack used to disable the browser selection */ .vik-context-menu-disable-selection { cursor: pointer; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } /* hack used to lock the document scroll */ body.lock-scroll { overflow: hidden; }