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