ckeditor.admin.css

Same filename in this branch
  1. 8.9.x core/themes/stable/css/ckeditor/ckeditor.admin.css
Same filename in other branches
  1. 9 core/themes/stable9/css/ckeditor/ckeditor.admin.css
  2. 9 core/themes/claro/css/theme/ckeditor.admin.css
  3. 9 core/themes/stable/css/ckeditor/ckeditor.admin.css
  4. 9 core/modules/ckeditor/css/ckeditor.admin.css

Styles for configuration of CKEditor module.

Many of these styles are adapted directly from the default CKEditor theme "moono".

File

core/modules/ckeditor/css/ckeditor.admin.css

View source 
  1. /**

  2.  * @file

  3.  * Styles for configuration of CKEditor module.

  4.  *

  5.  * Many of these styles are adapted directly from the default CKEditor theme

  6.  * "moono".

  7.  */

  8. 

  9. .ckeditor-toolbar {

  10.   margin: 5px 0;

  11.   padding: 0.1667em 0.1667em 0.08em;

  12.   /* Disallow any user selections in the drag-and-drop toolbar config UI. */

  13.   -webkit-user-select: none;

  14.   -moz-user-select: none;

  15.   -ms-user-select: none;

  16.   user-select: none;

  17.   border: 1px solid #b6b6b6;

  18.   background: #cfd1cf;

  19.   background-image: -webkit-linear-gradient(top, whiteSmoke, #cfd1cf);

  20.   background-image: linear-gradient(top, whiteSmoke, #cfd1cf);

  21.   box-shadow: 0 1px 0 white inset;

  22. }

  23. .ckeditor-toolbar-active {

  24.   margin-top: 0.25em;

  25. }

  26. .ckeditor-toolbar-disabled {

  27.   margin-bottom: 0.5em;

  28. }

  29. .ckeditor-toolbar ul,

  30. .ckeditor-toolbar-disabled ul {

  31.   margin: 0;

  32.   padding: 0;

  33.   list-style: none;

  34. }

  35. /* This is required to win over specificity of [dir="rtl"] ul */

  36. [dir="rtl"] .ckeditor-toolbar ul,

  37. [dir="rtl"] .ckeditor-toolbar-disabled ul {

  38.   margin-right: 0;

  39. }

  40. 

  41. .ckeditor-row {

  42.   padding: 2px 0 3px;

  43.   border-radius: 3px;

  44. }

  45. .ckeditor-group-names-are-visible .ckeditor-row {

  46.   border: 1px solid whitesmoke;

  47. }

  48. .ckeditor-row + .ckeditor-row {

  49.   margin-top: 0.25em;

  50. }

  51. .ckeditor-toolbar-group,

  52. .ckeditor-toolbar-group-placeholder,

  53. .ckeditor-add-new-group {

  54.   float: left; /* LTR */

  55. }

  56. [dir="rtl"] .ckeditor-toolbar-group,

  57. [dir="rtl"] .ckeditor-toolbar-group-placeholder,

  58. [dir="rtl"] .ckeditor-add-new-group {

  59.   float: right;

  60. }

  61. .ckeditor-toolbar-groups {

  62.   min-height: 2em;

  63. }

  64. .ckeditor-toolbar-group {

  65.   margin: 0 0.3333em;

  66.   cursor: move;

  67. }

  68. .ckeditor-group-names-are-visible .ckeditor-toolbar-group,

  69. .ckeditor-add-new-group {

  70.   padding: 0.2em 0.4em;

  71.   border: 1px dotted #a6a6a6;

  72.   border-radius: 3px;

  73. }

  74. .ckeditor-toolbar-group.placeholder,

  75. .ckeditor-toolbar-group.placeholder .ckeditor-toolbar-group-name {

  76.   cursor: not-allowed;

  77. }

  78. .ckeditor-toolbar-group.placeholder .ckeditor-toolbar-group-name {

  79.   font-style: italic;

  80. }

  81. .ckeditor-toolbar-group-name {

  82.   display: none;

  83.   margin: 0.25em 0;

  84.   font-size: 1em;

  85.   font-weight: normal;

  86. }

  87. .ckeditor-group-names-are-visible .ckeditor-toolbar-group-name {

  88.   display: block;

  89.   cursor: pointer;

  90. }

  91. .ckeditor-toolbar-active .placeholder,

  92. .ckeditor-toolbar-active .ckeditor-add-new-group {

  93.   display: none;

  94. }

  95. .ckeditor-group-names-are-visible .placeholder,

  96. .ckeditor-group-names-are-visible .ckeditor-add-new-group {

  97.   display: block;

  98. }

  99. .ckeditor-toolbar-group-buttons {

  100.   float: left; /* LTR */

  101. }

  102. [dir="rtl"] .ckeditor-toolbar-group-buttons {

  103.   float: right;

  104. }

  105. .ckeditor-groupnames-toggle {

  106.   float: right; /* LTR */

  107.   cursor: pointer;

  108. }

  109. [dir="rtl"] .ckeditor-groupnames-toggle {

  110.   float: left;

  111. }

  112. .ckeditor-toolbar .ckeditor-toolbar-group > li {

  113.   margin: 3px 6px;

  114.   padding: 3px;

  115.   border: 1px solid white;

  116.   border-radius: 5px;

  117.   background-image: -webkit-linear-gradient(transparent 60%, rgba(0, 0, 0, 0.1));

  118.   background-image: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.1));

  119. }

  120. .ckeditor-toolbar-configuration .fieldset-description {

  121.   margin-bottom: 1em;

  122. }

  123. .ckeditor-toolbar-disabled .ckeditor-toolbar-available,

  124. .ckeditor-toolbar-disabled .ckeditor-toolbar-dividers {

  125.   box-sizing: border-box;

  126. }

  127. .ckeditor-toolbar-disabled .ckeditor-toolbar-available {

  128.   float: left; /* LTR */

  129.   width: 80%;

  130. }

  131. [dir="rtl"] .ckeditor-toolbar-disabled .ckeditor-toolbar-available {

  132.   float: right;

  133. }

  134. .ckeditor-toolbar-disabled .ckeditor-toolbar-dividers {

  135.   float: right; /* LTR */

  136.   width: 20%;

  137. }

  138. [dir="rtl"] .ckeditor-toolbar-disabled .ckeditor-toolbar-dividers {

  139.   float: left;

  140. }

  141. .ckeditor-toolbar-disabled .ckeditor-buttons li a,

  142. .ckeditor-toolbar .ckeditor-buttons,

  143. .ckeditor-add-new-group button {

  144.   border: 1px solid #a6a6a6;

  145.   border-bottom-color: #979797;

  146.   border-radius: 3px;

  147.   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 1px 0 rgba(255, 255, 255, 0.15) inset;

  148. }

  149. .ckeditor-toolbar-disabled .ckeditor-buttons {

  150.   border: 0;

  151. }

  152. .ckeditor-toolbar-disabled .ckeditor-buttons li {

  153.   margin: 2px;

  154. }

  155. .ckeditor-buttons {

  156.   min-width: 26px;

  157.   min-height: 26px;

  158. }

  159. .ckeditor-buttons li {

  160.   float: left; /* LTR */

  161.   margin: 0;

  162.   padding: 0;

  163. }

  164. [dir="rtl"] .ckeditor-buttons li {

  165.   float: right;

  166. }

  167. .ckeditor-buttons li a,

  168. .ckeditor-add-new-group button {

  169.   color: #474747;

  170.   background: #e4e4e4;

  171.   background-image: -webkit-linear-gradient(top, white, #e4e4e4);

  172.   background-image: linear-gradient(top, white, #e4e4e4);

  173. }

  174. .ckeditor-buttons li a {

  175.   position: relative;

  176.   display: block;

  177.   min-height: 18px;

  178.   padding: 4px 6px;

  179.   cursor: move;

  180.   white-space: nowrap;

  181.   text-decoration: none;

  182.   border: 0;

  183.   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

  184.   line-height: 1.4;

  185. }

  186. .ckeditor-toolbar-dividers {

  187.   float: right; /* LTR */

  188. }

  189. [dir="rtl"] .ckeditor-toolbar-dividers {

  190.   float: left;

  191. }

  192. .ckeditor-buttons li .cke-icon-only {

  193.   /* Firefox includes the offscreen text in the focus indicator, resulting in a

  194.      far too wide focus indicator. This fixes that. */

  195.   overflow: hidden;

  196.   width: 16px;

  197.   text-indent: -9999px;

  198. }

  199. .ckeditor-buttons .cke_button_icon img {

  200.   width: 16px;

  201.   height: 16px;

  202. }

  203. .ckeditor-buttons li .cke_ltr {

  204.   direction: ltr;

  205. }

  206. .ckeditor-buttons li .cke_rtl {

  207.   direction: rtl;

  208. }

  209. .ckeditor-buttons li a:focus,

  210. .ckeditor-buttons li a:active,

  211. .ckeditor-multiple-buttons li a:focus {

  212.   z-index: 11; /* Ensure focused buttons show their outline on all sides. */

  213. }

  214. .ckeditor-buttons li:first-child a {

  215.   border-top-left-radius: 2px; /* LTR */

  216.   border-bottom-left-radius: 2px; /* LTR */

  217. }

  218. [dir="rtl"] .ckeditor-buttons li:first-child a {

  219.   border-top-right-radius: 2px;

  220.   border-bottom-right-radius: 2px;

  221. }

  222. .ckeditor-buttons li:last-child a {

  223.   border-top-right-radius: 2px; /* LTR */

  224.   border-bottom-right-radius: 2px; /* LTR */

  225. }

  226. [dir="rtl"] .ckeditor-buttons li:last-child a {

  227.   border-top-left-radius: 2px;

  228.   border-bottom-left-radius: 2px;

  229. }

  230. .ckeditor-button-placeholder,

  231. .ckeditor-buttons .ckeditor-button-placeholder a,

  232. .ckeditor-toolbar-group-placeholder {

  233.   background: #9dcae7;

  234. }

  235. .ckeditor-toolbar-group-placeholder {

  236.   border-radius: 4px;

  237. }

  238. .ckeditor-multiple-buttons {

  239.   float: left; /* LTR */

  240.   margin: 5px;

  241.   padding: 1px 2px;

  242.   list-style: none;

  243. }

  244. [dir="rtl"] .ckeditor-multiple-buttons {

  245.   float: right;

  246. }

  247. .ckeditor-multiple-buttons li {

  248.   float: left; /* LTR */

  249.   margin: 0;

  250.   padding: 0;

  251. }

  252. [dir="rtl"] .ckeditor-multiple-buttons li {

  253.   float: right;

  254. }

  255. .ckeditor-multiple-buttons li a {

  256.   display: inline-block;

  257.   min-height: 18px;

  258.   margin: 0;

  259.   padding: 2px 0;

  260.   cursor: move;

  261.   line-height: 1.4;

  262. }

  263. .ckeditor-buttons .ckeditor-group-button-separator,

  264. .ckeditor-multiple-buttons .ckeditor-group-button-separator {

  265.   margin: -1px -3px -2px;

  266. }

  267. .ckeditor-buttons .ckeditor-group-button-separator a,

  268. .ckeditor-multiple-buttons .ckeditor-group-button-separator a {

  269.   position: relative;

  270.   z-index: 10;

  271.   width: 13px;

  272.   height: 29px;

  273.   padding: 0;

  274.   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAdCAMAAABG4xbVAAAAhFBMVEUAAACmpqampqampqb////l5eX////5+fmmpqatra2urq6vr6+1tbW2tra4uLi6urq8vLzb29ve3t7i4uLl5eXn5+fo6Ojp6enq6urr6+vs7Ozt7e3u7u7v7+/w8PDx8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz+/v7qIQO+AAAACHRSTlMATVmAi8XM29MuWToAAABjSURBVBiVrc5BCoAwDETRMKhtRBduev9LKm1xjItWRBBE6Nt9QkIwOTcUzk0Imi8aoMssxbgoTHMtqsFMLta0vPh2N49HyfdelPg6k9uvX/a+Bmggt1qJRNzQFVgjEnkUZDoBmH57VSypjg4AAAAASUVORK5CYII=) no-repeat center center;

  275. }

  276. ul.ckeditor-buttons li.ckeditor-button-separator a {

  277.   position: relative;

  278.   z-index: 10;

  279.   width: 1px;

  280.   height: 24px;

  281.   margin: 1px 0 0;

  282.   padding: 0;

  283.   background: #e4e4e4;

  284.   background-image: -webkit-linear-gradient(#e4e4e4, #b4b4b4);

  285.   background-image: linear-gradient(#e4e4e4, #b4b4b4);

  286. }

  287. .ckeditor-multiple-buttons .ckeditor-button-separator a {

  288.   width: 2px;

  289.   height: 26px;

  290.   margin: 0 10px;

  291.   padding: 0;

  292. }

  293. .ckeditor-separator {

  294.   display: block;

  295.   width: 1px;

  296.   height: 18px;

  297.   margin: 5px 0;

  298.   background-color: silver;

  299.   background-color: rgba(0, 0, 0, 0.2);

  300.   box-shadow: 1px 0 1px rgba(255, 255, 255, 0.5);

  301. }

  302. .ckeditor-button-arrow {

  303.   display: inline-block;

  304.   width: 0;

  305.   margin: 0 4px 2px;

  306.   text-align: center;

  307.   border-top: 3px solid #333;

  308.   border-right: 3px solid transparent;

  309.   border-left: 3px solid transparent;

  310. }

  311. .ckeditor-row-controls {

  312.   float: right; /* LTR */

  313.   width: 40px;

  314.   text-align: right; /* LTR */

  315.   font-size: 18px;

  316. }

  317. [dir="rtl"] .ckeditor-row-controls {

  318.   float: left;

  319.   text-align: left;

  320. }

  321. .ckeditor-row-controls a {

  322.   display: inline-block;

  323.   box-sizing: border-box;

  324.   width: 20px;

  325.   height: 28px;

  326.   padding: 6px 2px;

  327.   text-decoration: none;

  328.   color: #333;

  329.   font-weight: bold;

  330.   line-height: 0.9;

  331. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.