1  /**
  2   * @license Copyright (c) 2014-2023, CKSource Holding sp. z o.o. All rights reserved.
  3   * This file is licensed under the terms of the MIT License (see LICENSE.md).
  4   */
  5  
  6   :root {
  7      --ck-sample-base-spacing: 2em;
  8      --ck-sample-color-white: #fff;
  9      --ck-sample-color-green: #279863;
 10      --ck-sample-color-blue: #1a9aef;
 11      --ck-sample-container-width: 1285px;
 12      --ck-sample-sidebar-width: 350px;
 13      --ck-sample-editor-min-height: 180px;
 14      --ck-sample-editor-z-index: 10;
 15  }
 16  
 17  /* --------- EDITOR STYLES  ---------------------------------------------------------------------------------------- */
 18  
 19  .editor__editable,
 20      /* Classic build. */
 21  main .ck-editor[role='application'] .ck.ck-content,
 22      /* Decoupled document build. */
 23  .ck.editor__editable[role='textbox'],
 24  .ck.ck-editor__editable[role='textbox'],
 25      /* Inline & Balloon build. */
 26  .ck.editor[role='textbox'] {
 27      width: 100%;
 28      background: #fff;
 29      font-size: 1em;
 30      line-height: 1.6em;
 31      min-height: var(--ck-sample-editor-min-height);
 32      padding: 1.5em 2em;
 33  }
 34  
 35  .ck.ck-editor__editable {
 36      background: #fff;
 37      border: 1px solid hsl(0, 0%, 70%);
 38      width: 100%;
 39  }
 40  
 41  /* .ck .ck-editor__main h1 {
 42      font-size: 2em; //32 px
 43      font-weight: bolder
 44  } */
 45  
 46  .ck .ck-editor__main h2 {
 47      font-size: 1.5em; /* 24px */
 48      /* font-weight: bolder  */
 49  }
 50  
 51  .ck .ck-editor__main h3 {
 52      font-size: 1.17em; /* 18.72px */
 53      /* font-weight: bolder  */
 54  }
 55  
 56  .ck .ck-editor__main h4 {
 57      font-size: 1em;  /* 16px */
 58      /* font-weight: bolder  */
 59  }
 60  
 61  .ck .ck-editor__main h5 {
 62      font-size: .83em;  /* 13.28px */
 63      /* font-weight: bolder  */
 64  }
 65  
 66  .ck .ck-editor__main h6 {
 67      font-size: .67em;  /* 10.72px */
 68      /* font-weight: bolder  */
 69  }
 70  
 71  .ck .ck-editor__main ul,
 72  .ck .ck-editor__main ol,
 73  .requirement-template-description ol,
 74  .requirement-template-description ul {
 75      margin-left: 40px;
 76  }
 77  
 78  .ck-editor-height .ck-editor__editable{
 79      min-height: 250px !important;
 80  }
 81  
 82  /* Because of sidebar `position: relative`, Edge is overriding the outline of a focused editor. */
 83  /*
 84  .ck.ck-editor__editable {
 85      position: relative;
 86      z-index: var(--ck-sample-editor-z-index);
 87  }
 88   */
 89  
 90  .editor-container {
 91      display: flex;
 92      flex-direction: row;
 93      flex-wrap: nowrap;
 94      position: relative;
 95      width: 100%;
 96      justify-content: center;
 97  }
 98  
 99  /* --------- DECOUPLED (DOCUMENT) BUILD. ---------------------------------------------*/
100  body[data-editor='DecoupledDocumentEditor'] .document-editor__toolbar {
101      width: 100%;
102  }
103  
104  body[data-editor='DecoupledDocumentEditor'] .collaboration-demo__editable,
105  body[data-editor='DecoupledDocumentEditor'] .row-editor .editor {
106      /* A pixel is added for each of the border. */
107      width: calc(21cm + 2px);
108      min-height: calc(29.7cm + 2px);
109      /* To avoid having extra scrolls inside the editor container. */
110      height: fit-content;
111      padding: 2cm 1.2cm;
112      margin: 2.5rem;
113      border: 1px hsl( 0, 0%, 82.7% ) solid;
114      background-color: var(--ck-sample-color-white);
115      box-shadow: 0 0 5px hsla( 0, 0%, 0%, .1 );
116      box-sizing: border-box;
117  }
118  
119  body[data-editor='DecoupledDocumentEditor'] .row-editor {
120      display: flex;
121      position: relative;
122      justify-content: center;
123      overflow-y: auto;
124      background-color: #f2f2f2;
125      border: 1px solid hsl(0, 0%, 77%);
126      /* Limit the max-height of the editor to avoid scrolling from bottom to top to see the toolbar. */
127      max-height: 700px;
128  }
129  
130  body[data-editor='DecoupledDocumentEditor'] .sidebar {
131      background: transparent;
132      border: 0;
133      box-shadow: none;
134  }