jquery.contextMenu.css 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. /*
  2. * jQuery contextMenu - Plugin for simple contextMenu handling
  3. *
  4. * Version: 1.5.2
  5. *
  6. * Authors: Rodney Rehm, Addy Osmani (patches for FF)
  7. * Web: http://medialize.github.com/jQuery-contextMenu/
  8. *
  9. * Licensed under
  10. * MIT License http://www.opensource.org/licenses/mit-license
  11. * GPL v3 http://opensource.org/licenses/GPL-3.0
  12. *
  13. */
  14. .context-menu-list {
  15. margin:0;
  16. padding:0;
  17. min-width: 120px;
  18. max-width: 250px;
  19. display: inline-block;
  20. position: absolute;
  21. list-style-type: none;
  22. border: 1px solid #333333;
  23. background: #f0f0f0;
  24. -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  25. -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  26. -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  27. -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  28. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  29. font-family: Arial, Helvetica, sans-serif;
  30. font-size: 11px;
  31. }
  32. .context-menu-item {
  33. padding: 2px 5px;
  34. background-color: #f0f0f0;
  35. position: relative;
  36. min-height: 18px;
  37. -moz-user-select: -moz-none;
  38. display: block;
  39. width: 100%;
  40. -moz-box-sizing: border-box;
  41. -webkit-box-sizing: border-box;
  42. box-sizing: border-box;
  43. }
  44. .context-menu-item.icon {
  45. padding: 2px 2px 2px 28px;
  46. }
  47. .context-menu-separator {
  48. padding-bottom:0;
  49. border-bottom: 1px solid #DDD;
  50. min-height: 2px;
  51. }
  52. .context-menu-item > label {
  53. -moz-user-select: text;
  54. }
  55. .context-menu-item.hover {
  56. cursor: pointer;
  57. background-color: #ff5d1a;
  58. }
  59. .context-menu-item.disabled {
  60. color: #666;
  61. }
  62. .context-menu-input.hover,
  63. .context-menu-item.disabled.hover {
  64. cursor: default;
  65. background-color: #EEE;
  66. }
  67. .context-menu-submenu:after {
  68. content: ">";
  69. color: #666;
  70. position: absolute;
  71. top: 0;
  72. right: 3px;
  73. z-index: 1;
  74. }
  75. /* icons
  76. #protip:
  77. In case you want to use sprites for icons (which I would suggest you do) have a look at
  78. http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement
  79. .context-menu-item.icon:before {}
  80. */
  81. .context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
  82. .context-menu-item.icon-edit { background-image: url(images/icon_edit_cm.png); }
  83. .context-menu-item.icon-cut { background-image: url(images/icon_cut_cm.png); }
  84. .context-menu-item.icon-copy { background-image: url(images/icon_copy_cm.png); }
  85. .context-menu-item.icon-paste { background-image: url(images/icon_paste_cm.png); }
  86. .context-menu-item.icon-delete { background-image: url(images/icon_delete_cm.png); }
  87. .context-menu-item.icon-quit { background-image: url(images/icon_door_cm.png); }
  88. .context-menu-item.icon-soundcloud { background-image: url(images/icon_soundcloud_cm.png); }
  89. .context-menu-item.icon-download { background-image: url(images/icon_download_cm.png); }
  90. .context-menu-item.icon-overview { background-image: url(images/icon_overview_cm.png); }
  91. .context-menu-item.icon-play { background-image: url(images/icon_play_cm.png); }
  92. .context-menu-item.icon-select-cursor { background-image: url(images/icon_select-cursor_cm.png); }
  93. .context-menu-item.icon-add-playlist { background-image: url(images/icon_add_playlist_cm.png); }
  94. .context-menu-item.icon-add-remove-content { background-image: url(images/icon_add_content_cm.png); }
  95. .context-menu-item.icon-remove-all-content { background-image: url(images/icon_remove_all_content_cm.png); }
  96. .context-menu-item.icon-error { background-image: url(images/icon_alert_cal_alt.png); }
  97. /* vertically align inside labels */
  98. .context-menu-input > label > * { vertical-align: top; }
  99. /* position checkboxes and radios as icons */
  100. .context-menu-input > label > input[type="checkbox"],
  101. .context-menu-input > label > input[type="radio"] {
  102. margin-left: -17px;
  103. }
  104. .context-menu-input > label > span {
  105. margin-left: 5px;
  106. }
  107. .context-menu-input > label,
  108. .context-menu-input > label > input[type="text"],
  109. .context-menu-input > label > textarea,
  110. .context-menu-input > label > select {
  111. display: block;
  112. width: 100%;
  113. -webkit-box-sizing: border-box;
  114. -moz-box-sizing: border-box;
  115. -ms-box-sizing: border-box;
  116. -o-box-sizing: border-box;
  117. box-sizing: border-box;
  118. }
  119. .context-menu-input > label > textarea {
  120. height: 100px;
  121. }
  122. .context-menu-item > .context-menu-list {
  123. display: none;
  124. /* re-positioned by js */
  125. right: -5px;
  126. top: 5px;
  127. }
  128. .context-menu-item.hover > .context-menu-list {
  129. display: block;
  130. }
  131. .context-menu-accesskey {
  132. text-decoration: underline;
  133. }