217 lines
		
	
	
		
			5.1 KiB
		
	
	
	
		
			CSS
		
	
	
	
		
		
			
		
	
	
			217 lines
		
	
	
		
			5.1 KiB
		
	
	
	
		
			CSS
		
	
	
	
| 
								 | 
							
								/*
							 | 
						||
| 
								 | 
							
								Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
							 | 
						||
| 
								 | 
							
								For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
							 | 
						||
| 
								 | 
							
								*/
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/*
							 | 
						||
| 
								 | 
							
								menu.css (part of editor.css)
							 | 
						||
| 
								 | 
							
								===============================
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								This file styles menus used in the editor UI. These menus are the list of
							 | 
						||
| 
								 | 
							
								options available inside some "floating panels", like menu buttons of the
							 | 
						||
| 
								 | 
							
								toolbar or the context menu.
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								Note that the menu itself doesn't include the floating element that holds it.
							 | 
						||
| 
								 | 
							
								That element is styles in the panel.css file.
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								The following is a visual representation of the main elements of a menu:
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								+-- .cke_menu -----------------+
							 | 
						||
| 
								 | 
							
								| +-- .cke_menuitem  --------+ |
							 | 
						||
| 
								 | 
							
								| | +-- .cke_menubutton ---+ | |
							 | 
						||
| 
								 | 
							
								| | |                      | | |
							 | 
						||
| 
								 | 
							
								| | +----------------------+ | |
							 | 
						||
| 
								 | 
							
								| +--------------------------+ |
							 | 
						||
| 
								 | 
							
								| +-- .cke_menuseparator ----+ |
							 | 
						||
| 
								 | 
							
								| ...                          |
							 | 
						||
| 
								 | 
							
								+------------------------------+
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								This is the .cke_menubutton structure:
							 | 
						||
| 
								 | 
							
								(Note that the menu button icon shares with toolbar button the common class .cke_button_icon to achieve the same outlook.)
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								+-- .cke_menubutton -------------------------------------------------------------------------+
							 | 
						||
| 
								 | 
							
								| +-- .cke_menubutton_inner ---------------------------------------------------------------+ |
							 | 
						||
| 
								 | 
							
								| | +-- .cke_menubutton_icon ---+ +-- .cke_menubutton_label --+ +-- .cke_cke_menuarrow --+ | |
							 | 
						||
| 
								 | 
							
								| | | +-- .cke_button_icon ---+ | |                           | |                        | | |
							 | 
						||
| 
								 | 
							
								| | | |                       | | |                           | |                        | | |
							 | 
						||
| 
								 | 
							
								| | | +-----------------------+ | |                           | |                        | | |
							 | 
						||
| 
								 | 
							
								| | +---------------------------+ +---------------------------+ +------------------------+ | |
							 | 
						||
| 
								 | 
							
								| +----------------------------------------------------------------------------------------+ |
							 | 
						||
| 
								 | 
							
								+--------------------------------------------------------------------------------------------+
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								Special outer level classes used in this file:
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									.cke_hc: Available when the editor is rendered on "High Contrast".
							 | 
						||
| 
								 | 
							
									.cke_rtl: Available when the editor UI is on RTL.
							 | 
						||
| 
								 | 
							
								*/
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* .cke_menuitem is the element that holds the entire structure of each of the
							 | 
						||
| 
								 | 
							
								   menu items. */
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_menubutton
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									/* The "button" inside a menu item is a <a> element.
							 | 
						||
| 
								 | 
							
									   Transforms it into a block. */
							 | 
						||
| 
								 | 
							
									display:block;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_menuitem span
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									/* Avoid the text selection cursor inside menu items. */
							 | 
						||
| 
								 | 
							
									cursor: default;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_menubutton:hover,
							 | 
						||
| 
								 | 
							
								.cke_menubutton:focus,
							 | 
						||
| 
								 | 
							
								.cke_menubutton:active
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									background-color: #D3D3D3;
							 | 
						||
| 
								 | 
							
									display:block;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_hc .cke_menubutton:hover,
							 | 
						||
| 
								 | 
							
								.cke_hc .cke_menubutton:focus,
							 | 
						||
| 
								 | 
							
								.cke_hc .cke_menubutton:active
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									border: 2px solid;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_menubutton_inner {
							 | 
						||
| 
								 | 
							
									display: table-row;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_menubutton_icon,
							 | 
						||
| 
								 | 
							
								.cke_menubutton_label,
							 | 
						||
| 
								 | 
							
								.cke_menuarrow {
							 | 
						||
| 
								 | 
							
									display: table-cell;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* The menu item icon. */
							 | 
						||
| 
								 | 
							
								.cke_menubutton_icon
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									background-color: #D3D3D3;
							 | 
						||
| 
								 | 
							
									opacity: 0.70; /* Safari, Opera and Mozilla */
							 | 
						||
| 
								 | 
							
									filter: alpha(opacity=70); /* IE */
							 | 
						||
| 
								 | 
							
									padding: 4px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_hc .cke_menubutton_icon
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									height: 16px;
							 | 
						||
| 
								 | 
							
									width: 0;
							 | 
						||
| 
								 | 
							
									padding: 4px 0;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_menubutton:hover .cke_menubutton_icon,
							 | 
						||
| 
								 | 
							
								.cke_menubutton:focus .cke_menubutton_icon,
							 | 
						||
| 
								 | 
							
								.cke_menubutton:active .cke_menubutton_icon
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									background-color: #9d9d9d;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_menubutton_disabled:hover .cke_menubutton_icon,
							 | 
						||
| 
								 | 
							
								.cke_menubutton_disabled:focus .cke_menubutton_icon,
							 | 
						||
| 
								 | 
							
								.cke_menubutton_disabled:active .cke_menubutton_icon
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									/* The icon will get opacity as well when hovered. */
							 | 
						||
| 
								 | 
							
									opacity: 0.3;
							 | 
						||
| 
								 | 
							
									filter: alpha(opacity=30);
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* The textual part of each menu item. */
							 | 
						||
| 
								 | 
							
								.cke_menubutton_label
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									padding: 0 5px;
							 | 
						||
| 
								 | 
							
									background-color: transparent;
							 | 
						||
| 
								 | 
							
									width: 100%;
							 | 
						||
| 
								 | 
							
									vertical-align: middle;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* Keyboard shortcut placed next to the label. */
							 | 
						||
| 
								 | 
							
								.cke_menubutton_shortcut
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									color: #979797;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_menubutton_disabled .cke_menubutton_label
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									/* Greyed label text indicates a disabled menu item. */
							 | 
						||
| 
								 | 
							
									opacity: 0.3;
							 | 
						||
| 
								 | 
							
									filter: alpha(opacity=30);
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_menubutton_on
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									border: 1px solid #ccc;
							 | 
						||
| 
								 | 
							
									background-color: #e9f5ff;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_menubutton_on .cke_menubutton_icon
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									padding-right: 3px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_menubutton:hover,
							 | 
						||
| 
								 | 
							
								.cke_menubutton:focus,
							 | 
						||
| 
								 | 
							
								.cke_menubutton:active
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									background-color: #D3D3D3;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_menubutton_on:hover,
							 | 
						||
| 
								 | 
							
								.cke_menubutton_on:focus,
							 | 
						||
| 
								 | 
							
								.cke_menubutton_on:active
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									border-color: #316ac5;
							 | 
						||
| 
								 | 
							
									background-color: #dff1ff;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_panel_frame .cke_menubutton_label
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									display: none;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* The separator used to separate menu item groups. */
							 | 
						||
| 
								 | 
							
								.cke_menuseparator
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									background-color: #D3D3D3;
							 | 
						||
| 
								 | 
							
									height: 2px;
							 | 
						||
| 
								 | 
							
									filter: alpha(opacity=70); /* IE */
							 | 
						||
| 
								 | 
							
									opacity: 0.70; /* Safari, Opera and Mozilla */
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* The small arrow shown for item with sub-menus. */
							 | 
						||
| 
								 | 
							
								.cke_menuarrow
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									/* arrowright.gif*/
							 | 
						||
| 
								 | 
							
									background-image: url(images/sprites.png);
							 | 
						||
| 
								 | 
							
									background-position: 0 -1400px;
							 | 
						||
| 
								 | 
							
									background-repeat: no-repeat;
							 | 
						||
| 
								 | 
							
									padding: 0 5px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_rtl .cke_menuarrow
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									/* arrowleft.gif*/
							 | 
						||
| 
								 | 
							
									background-image: url(images/sprites.png);
							 | 
						||
| 
								 | 
							
									background-position: 7px -1380px;
							 | 
						||
| 
								 | 
							
									background-repeat: no-repeat;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_menuarrow span
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									display: none;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_hc .cke_menuarrow
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.cke_hc .cke_menuarrow span
							 | 
						||
| 
								 | 
							
								{
							 | 
						||
| 
								 | 
							
									vertical-align: middle;
							 | 
						||
| 
								 | 
							
									display: inline;
							 | 
						||
| 
								 | 
							
								}
							 |