--- /dev/null
+/*\r
+Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.\r
+For licensing, see LICENSE.md or http://ckeditor.com/license\r
+*/\r
+\r
+/*\r
+mainui.css (part of editor.css)\r
+=================================\r
+\r
+This file styles the basic structure of the CKEditor user interface - the box\r
+that holds everything.\r
+\r
+CKEditor offers two main editing modes. The main UI blocks that compose these\r
+modes are:\r
+\r
+ For "Theme UI" mode, the one most generally used:\r
+\r
+ +-- .cke_chrome ----------------------+\r
+ |+-- .cke_inner ---------------------+|\r
+ || +-- .cke_top -------------------+ ||\r
+ || | | ||\r
+ || +-------------------------------+ ||\r
+ || +-- .cke_contents --------------+ ||\r
+ || | | ||\r
+ || +-------------------------------+ ||\r
+ || +-- .cke_bottom ----------------+ ||\r
+ || | | ||\r
+ || +-------------------------------+ ||\r
+ |+-----------------------------------+|\r
+ +-------------------------------------+\r
+\r
+ For "Inline Editing" mode:\r
+\r
+ +-- .cke_chrome .cke_float------------+\r
+ |+-- .cke_inner ---------------------+|\r
+ || +-- .cke_top -------------------+ ||\r
+ || | | ||\r
+ || +-------------------------------+ ||\r
+ |+-----------------------------------+|\r
+ +-------------------------------------+\r
+\r
+Special outer level classes used in this file:\r
+\r
+ .cke_hc: Available when the editor is rendered on "High Contrast".\r
+\r
+*/\r
+\r
+/* The outer boundary of the interface. */\r
+.cke_chrome\r
+{\r
+ /* This is <span>, so transform it into a block.*/\r
+ display: block;\r
+ border: 1px solid #b6b6b6;\r
+ padding: 0;\r
+\r
+ box-shadow: 0 0 3px rgba(0,0,0,.15);\r
+}\r
+\r
+/* The inner boundary of the interface. */\r
+.cke_inner\r
+{\r
+ /* This is <span>, so transform it into a block.*/\r
+ display: block;\r
+\r
+ -webkit-touch-callout: none;\r
+\r
+ background: #fff;\r
+ padding: 0;\r
+}\r
+\r
+/* Added to the outer boundary of the UI when in inline editing,\r
+ when the UI is floating. */\r
+.cke_float\r
+{\r
+ /* Make white the space between the outer and the inner borders. */\r
+ border: none;\r
+}\r
+\r
+.cke_float .cke_inner\r
+{\r
+ /* As we don't have blocks following top (toolbar) we suppress the padding\r
+ as the toolbar defines its own margin. */\r
+ padding-bottom: 0;\r
+}\r
+\r
+/* Make the main spaces enlarge to hold potentially floated content. */\r
+.cke_top,\r
+.cke_contents,\r
+.cke_bottom\r
+{\r
+ /* These are <span>s, so transform them into blocks.*/\r
+ display: block;\r
+\r
+ /* Ideally this should be "auto", but it shows scrollbars in IE7. */\r
+ overflow: hidden;\r
+}\r
+\r
+.cke_top\r
+{\r
+ /*border: 1px solid #b2b2b2;*/\r
+ border-bottom: 1px solid #b6b6b6;\r
+ padding: 6px 8px 2px;\r
+\r
+ /* Allow breaking toolbars when in a narrow editor. (#9947) */\r
+ white-space: normal;\r
+\r
+ box-shadow: 0 1px 0 #fff inset;\r
+\r
+ background: #cfd1cf;\r
+ background-image: linear-gradient(to bottom, #f5f5f5, #cfd1cf);\r
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f5f5f5', endColorstr='#cfd1cf');\r
+}\r
+\r
+.cke_float .cke_top\r
+{\r
+ border: 1px solid #b6b6b6;\r
+ border-bottom-color: #999;\r
+}\r
+\r
+.cke_bottom\r
+{\r
+ padding: 6px 8px 2px;\r
+ position: relative;\r
+\r
+ border-top: 1px solid #bfbfbf;\r
+\r
+ box-shadow: 0 1px 0 #fff inset;\r
+\r
+ background: #cfd1cf;\r
+ background-image: linear-gradient(to bottom, #ebebeb, #cfd1cf);\r
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ebebeb', endColorstr='#cfd1cf');\r
+}\r
+\r
+/* On iOS we need to manually enable scrolling in the contents block. (#9945) */\r
+.cke_browser_ios .cke_contents\r
+{\r
+ overflow-y: auto;\r
+ -webkit-overflow-scrolling: touch;\r
+}\r
+\r
+/* The resizer is the small UI element that is rendered at the bottom right\r
+ part of the editor. It makes is possible to resize the editor UI. */\r
+.cke_resizer\r
+{\r
+ /* To avoid using images for the resizer, we create a small triangle,\r
+ using some CSS magic. */\r
+ width: 0;\r
+ height: 0;\r
+ overflow: hidden;\r
+ width: 0;\r
+ height: 0;\r
+ overflow: hidden;\r
+ border-width: 10px 10px 0 0;\r
+ border-color: transparent #666 transparent transparent;\r
+ border-style: dashed solid dashed dashed;\r
+\r
+ font-size: 0;\r
+ vertical-align: bottom;\r
+\r
+ margin-top: 6px;\r
+\r
+ /* A margin in case of no other element in the same container\r
+ to keep a distance to the bottom edge. */\r
+ margin-bottom: 2px;\r
+\r
+ box-shadow: 0 1px 0 rgba(255,255,255,.3);\r
+}\r
+\r
+.cke_hc .cke_resizer\r
+{\r
+ font-size: 15px;\r
+ width: auto;\r
+ height: auto;\r
+ border-width: 0;\r
+}\r
+\r
+.cke_resizer_ltr\r
+{\r
+ cursor: se-resize;\r
+\r
+ float: right;\r
+ margin-right: -4px;\r
+}\r
+\r
+/* This class is added in RTL mode. This is a special case for the resizer\r
+ (usually the .cke_rtl class is used), because it may not necessarily be in\r
+ RTL mode if the main UI is RTL. It depends instead on the context where the\r
+ editor is inserted on. */\r
+.cke_resizer_rtl\r
+{\r
+ border-width: 10px 0 0 10px;\r
+ border-color: transparent transparent transparent #A5A5A5;\r
+ border-style: dashed dashed dashed solid;\r
+\r
+ cursor: sw-resize;\r
+\r
+ float: left;\r
+ margin-left: -4px;\r
+ right: auto;\r
+}\r
+\r
+/* The editing area (where users type) can be rendered as an editable <div>\r
+ element (e.g. divarea plugin). In that case, this is the class applied to\r
+ that element. */\r
+.cke_wysiwyg_div\r
+{\r
+ display: block;\r
+ height: 100%;\r
+ overflow: auto;\r
+ padding: 0 8px;\r
+ outline-style: none;\r
+\r
+ box-sizing: border-box;\r
+}\r