menu.css 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. /*
  2. Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. For licensing, see LICENSE.md or http://ckeditor.com/license
  4. */
  5. /*
  6. menu.css (part of editor.css)
  7. ===============================
  8. This file styles menus used in the editor UI. These menus are the list of
  9. options available inside some "floating panels", like menu buttons of the
  10. toolbar or the context menu.
  11. Note that the menu itself doesn't include the floating element that holds it.
  12. That element is styles in the panel.css file.
  13. The following is a visual representation of the main elements of a menu:
  14. +-- .cke_menu -----------------+
  15. | +-- .cke_menuitem --------+ |
  16. | | +-- .cke_menubutton ---+ | |
  17. | | | | | |
  18. | | +----------------------+ | |
  19. | +--------------------------+ |
  20. | +-- .cke_menuseparator ----+ |
  21. | ... |
  22. +------------------------------+
  23. This is the .cke_menubutton structure:
  24. (Note that the menu button icon shares with toolbar button the common class .cke_button_icon to achieve the same outlook.)
  25. +-- .cke_menubutton -------------------------------------------------------------------------+
  26. | +-- .cke_menubutton_inner ---------------------------------------------------------------+ |
  27. | | +-- .cke_menubutton_icon ---+ +-- .cke_menubutton_label --+ +-- .cke_cke_menuarrow --+ | |
  28. | | | +-- .cke_button_icon ---+ | | | | | | |
  29. | | | | | | | | | | | |
  30. | | | +-----------------------+ | | | | | | |
  31. | | +---------------------------+ +---------------------------+ +------------------------+ | |
  32. | +----------------------------------------------------------------------------------------+ |
  33. +--------------------------------------------------------------------------------------------+
  34. Special outer level classes used in this file:
  35. .cke_hc: Available when the editor is rendered on "High Contrast".
  36. .cke_rtl: Available when the editor UI is on RTL.
  37. */
  38. /* .cke_menuitem is the element that holds the entire structure of each of the
  39. menu items. */
  40. .cke_menubutton
  41. {
  42. /* The "button" inside a menu item is a <a> element.
  43. Transforms it into a block. */
  44. display: block;
  45. }
  46. .cke_menuitem span
  47. {
  48. /* Avoid the text selection cursor inside menu items. */
  49. cursor: default;
  50. }
  51. .cke_menubutton:hover,
  52. .cke_menubutton:focus,
  53. .cke_menubutton:active
  54. {
  55. background-color: #D3D3D3;
  56. display: block;
  57. }
  58. .cke_hc .cke_menubutton
  59. {
  60. padding: 2px;
  61. }
  62. .cke_hc .cke_menubutton:hover,
  63. .cke_hc .cke_menubutton:focus,
  64. .cke_hc .cke_menubutton:active
  65. {
  66. border: 2px solid;
  67. padding: 0;
  68. }
  69. .cke_menubutton_inner {
  70. display: table-row;
  71. }
  72. .cke_menubutton_icon,
  73. .cke_menubutton_label,
  74. .cke_menuarrow {
  75. display: table-cell;
  76. }
  77. /* The menu item icon. */
  78. .cke_menubutton_icon
  79. {
  80. background-color: #D7D8D7;
  81. opacity: 0.70; /* Safari, Opera and Mozilla */
  82. filter: alpha(opacity=70); /* IE */
  83. padding: 4px;
  84. }
  85. .cke_hc .cke_menubutton_icon
  86. {
  87. height: 16px;
  88. width: 0;
  89. padding: 4px 0;
  90. }
  91. .cke_menubutton:hover .cke_menubutton_icon,
  92. .cke_menubutton:focus .cke_menubutton_icon,
  93. .cke_menubutton:active .cke_menubutton_icon
  94. {
  95. background-color: #D0D2D0;
  96. }
  97. .cke_menubutton_disabled:hover .cke_menubutton_icon,
  98. .cke_menubutton_disabled:focus .cke_menubutton_icon,
  99. .cke_menubutton_disabled:active .cke_menubutton_icon
  100. {
  101. /* The icon will get opacity as well when hovered. */
  102. opacity: 0.3;
  103. filter: alpha(opacity=30);
  104. }
  105. /* The textual part of each menu item. */
  106. .cke_menubutton_label
  107. {
  108. padding: 0 5px;
  109. background-color: transparent;
  110. width: 100%;
  111. vertical-align: middle;
  112. }
  113. .cke_menubutton_disabled .cke_menubutton_label
  114. {
  115. /* Greyed label text indicates a disabled menu item. */
  116. opacity: 0.3;
  117. filter: alpha(opacity=30);
  118. }
  119. .cke_menubutton_on
  120. {
  121. border: 1px solid #dedede;
  122. background-color: #f2f2f2;
  123. box-shadow: 0 0 2px rgba(0,0,0,.1) inset;
  124. }
  125. .cke_menubutton_on .cke_menubutton_icon
  126. {
  127. padding-right: 3px;
  128. }
  129. .cke_menubutton:hover,
  130. .cke_menubutton:focus,
  131. .cke_menubutton:active
  132. {
  133. background-color: #EFF0EF;
  134. }
  135. .cke_panel_frame .cke_menubutton_label
  136. {
  137. display: none;
  138. }
  139. /* The separator used to separate menu item groups. */
  140. .cke_menuseparator
  141. {
  142. background-color: #D3D3D3;
  143. height: 1px;
  144. filter: alpha(opacity=70); /* IE */
  145. opacity: 0.70; /* Safari, Opera and Mozilla */
  146. }
  147. /* The small arrow shown for item with sub-menus. */
  148. .cke_menuarrow
  149. {
  150. background-image: url(images/arrow.png);
  151. background-position: 0 10px;
  152. background-repeat: no-repeat;
  153. padding: 0 5px;
  154. }
  155. .cke_rtl .cke_menuarrow
  156. {
  157. background-position: 5px -13px;
  158. background-repeat: no-repeat;
  159. }
  160. .cke_menuarrow span
  161. {
  162. display: none;
  163. }
  164. .cke_hc .cke_menuarrow span
  165. {
  166. vertical-align: middle;
  167. display: inline;
  168. }