iframe_editor.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. /*
  2. These CSS rules are included in both the outer and inner ACE iframe (pad editor)
  3. */
  4. @import url('./lists_and_indents.css');
  5. html.inner-editor {
  6. height: auto !important;
  7. background-color: transparent !important;
  8. scrollbar-width: thin;
  9. scrollbar-color: white transparent;
  10. }
  11. #outerdocbody {
  12. display: flex;
  13. flex-direction: row;
  14. justify-content: center;
  15. min-height: 100vh; /* take at least full height */
  16. }
  17. #outerdocbody iframe {
  18. flex: 1 auto;
  19. display: flex;
  20. width: 100%;
  21. }
  22. #outerdocbody #sidediv {
  23. order: -1; /* display it on the first row positionning, i.e. on the left */
  24. }
  25. /* ACE-PAD Container (i.e. where the text is displayed) */
  26. #innerdocbody {
  27. padding: 10px;
  28. overflow: hidden;
  29. background-color: white;
  30. line-height: 25px;
  31. /* Be careful editing following rules. Longs words should not overflow, ep_align justify should work,
  32. Test on chrome, firefox and safari... Copy / Paste a word inside a sentence should not add line-breaks
  33. and preserve the style */
  34. display: block; /* for safari and firefox, otherwise the break-word does not work */
  35. white-space: normal;
  36. word-wrap: break-word;
  37. overflow-wrap: break-word;
  38. }
  39. #innerdocbody, #sidediv {
  40. padding-top: 10px; /* Both must have same top padding, so line number are aligned with the rows */
  41. padding-bottom: 10px; /* some space when we scroll to the bottom */
  42. }
  43. #innerdocbody a {
  44. color: #2e96f3;
  45. }
  46. #innerdocbody.authorColors [class^='author-'] a {
  47. color: inherit;
  48. }
  49. #innerdocbody span {
  50. line-height: 125%;
  51. padding: 6px 0 !important;
  52. }
  53. option {
  54. text-transform: capitalize;
  55. }
  56. #innerdocbody h1,
  57. #innerdocbody h2,
  58. #innerdocbody h3,
  59. #innerdocbody h4 {
  60. margin-bottom: .5em;
  61. }
  62. /* --------------------- */
  63. /* -- BROWSER SUPPORT -- */
  64. /* --------------------- */
  65. body.mozilla, body.safari {
  66. display: table-cell; /* cause "body" area (e.g. where clicks are heard) to grow horizontally with text */
  67. }
  68. .safari div {
  69. padding-right: 1px; /* prevents the caret from disappearing on the longest line of the doc */
  70. }
  71. /* ------------------------------------------ */
  72. /* -- SIDEDIV (line number, text author..) -- */
  73. /* ------------------------------------------ */
  74. #sidediv {
  75. background-color: transparent;
  76. border-right: 1px solid #ccc;
  77. }
  78. #sidediv .line-number {
  79. font-size: 9px;
  80. padding: 0 10px;
  81. font-family: monospace;
  82. }
  83. #sidedivinner {
  84. text-align: right;
  85. opacity: .9;
  86. }
  87. #sidediv:not(.sidedivdelayed) { /* before sidediv get initialized, hide text */
  88. color: transparent;
  89. }
  90. .line-numbers-hidden #sidediv .line-number {
  91. display: none;
  92. }
  93. #linemetricsdiv {
  94. position: absolute;
  95. left: -1000px;
  96. top: -1000px;
  97. color: white;
  98. z-index: -1;
  99. font-size: 12px; /* overridden by lineMetricsDiv.style */
  100. font-family: monospace; /* overridden by lineMetricsDiv.style */
  101. }
  102. @media (max-width: 800px) {
  103. #sidediv {
  104. /* Do not use display: none to hide the sidediv, otherwise the parent container does not
  105. get its height properly calculated by flexboxes */
  106. visibility: hidden;
  107. width: 0;
  108. padding: 0;
  109. }
  110. }
  111. /* ----------- */
  112. /* -- OTHER -- */
  113. /* ----------- */
  114. ::selection {
  115. background: #acf;
  116. }
  117. ::-moz-selection {
  118. background: #acf;
  119. }
  120. #innerdocbody a {
  121. cursor: pointer !important;
  122. }
  123. body.grayedout {
  124. background-color: #eee !important
  125. }