iframe_editor.css 3.2 KB

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