page_notes.css 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. #pageNotesHost {
  2. display: flex;
  3. flex-direction: column;
  4. height: 100%;
  5. }
  6. #pageNotesHostBtn {
  7. order: 2;
  8. }
  9. #pageNotesHostBtn a {
  10. background: url('images/notes_panel_on.svg') no-repeat center center,linear-gradient(transparent, transparent);
  11. }
  12. #pageNotesHostBtn a.selected, #pageNotesHostBtn a.selected:hover {
  13. background: url('images/notes_panel_off.svg') no-repeat center center,linear-gradient(transparent, transparent);
  14. }
  15. #pageNotesScrollContainer {
  16. overflow: auto;
  17. width: 100%;
  18. flex: 1;
  19. -webkit-overflow-scrolling: touch;
  20. }
  21. #pageNotesContent {
  22. overflow: visible;
  23. }
  24. #pageNotesHeader {
  25. padding: 20px 15px;
  26. }
  27. .pageNoteContainer {
  28. padding: 0px 15px 8px 15px;
  29. }
  30. .mobileMode .pageNoteContainer {
  31. padding: 0px 16px 8px 17px;
  32. }
  33. .pageNoteName {
  34. font-size: 13px;
  35. font-weight: bold;
  36. /*color: #2c2c2c;*/
  37. margin: 15px 0px 5px 0px;
  38. white-space: nowrap;
  39. }
  40. .pageNote {
  41. font-size: 13px;
  42. color: #081222;
  43. line-height: 1.67;
  44. word-wrap: break-word;
  45. }
  46. .pageNote ul {
  47. list-style: disc;
  48. padding: 0px 0px 0px 40px;
  49. }
  50. .pageNote ul ul{
  51. list-style: circle;
  52. }
  53. .pageNote ul ul ul{
  54. list-style: square;
  55. }
  56. .pageNote ul ul ul ul {
  57. list-style: disc;
  58. }
  59. .pageNote ul ul ul ul ul {
  60. list-style: circle;
  61. }
  62. .pageNote ul ul ul ul ul ul {
  63. list-style: square;
  64. }
  65. .widgetNoteContainer {
  66. padding: 15px;
  67. border: 2px solid transparent;
  68. margin-left: .5px;
  69. border-radius: 4px;
  70. cursor: pointer;
  71. color: #64748B;
  72. }
  73. .widgetNoteTitle {
  74. display: flex;
  75. justify-content: space-between;
  76. align-items: flex-start;
  77. }
  78. .widgetNoteContainer:hover {
  79. background-color: #f7f8fb;
  80. }
  81. .notesDialog .widgetNoteContainer:hover {
  82. background-color: transparent;
  83. }
  84. .mobileMode .widgetNoteContainer {
  85. padding: 12px 16px 12px 17px;
  86. }
  87. .widgetNoteContainerSelected {
  88. background-color: white;
  89. border: 2px solid #2563eb;
  90. color: #1E293B;
  91. }
  92. .widgetNoteContainerSelected:hover {
  93. background-color: white;
  94. }
  95. .widgetNoteFootnote {
  96. display: inline-block;
  97. padding-top: 1px;
  98. background-color: #fff849;
  99. font-size: 11px;
  100. font-weight: bold;
  101. line-height: 16px;
  102. margin-right: 8px;
  103. padding: 0px 5px;
  104. color: #000;
  105. }
  106. div.annnoteline {
  107. display: inline-block;
  108. width: 9px;
  109. height: 1px;
  110. border-bottom: 1px solid white;
  111. margin-top: 1px;
  112. }
  113. .widgetNoteLabel {
  114. font-size: 14px;
  115. margin-top: 4px;
  116. word-break: break-word;
  117. text-align: right;
  118. }
  119. .noteLink {
  120. text-decoration: inherit;
  121. color: inherit;
  122. }
  123. .noteLink:hover {
  124. background-color: white;
  125. }
  126. .notesSectionHeader {
  127. margin: 0px 15px 4px 15px;
  128. }
  129. .notesPageNameHeader {
  130. margin: 8px 15px 15px 15px;
  131. }
  132. .mobileMode .notesPageNameHeader {
  133. margin: 18px 14px 5px 16px;
  134. }
  135. #notesOverlay {
  136. width: 0;
  137. height: 0;
  138. position: absolute;
  139. overflow: visible;
  140. z-index: 1;
  141. }
  142. div.closeNotesDialog {
  143. position: absolute;
  144. top: 6px;
  145. right: 6px;
  146. width: 11px;
  147. height: 10px;
  148. object-fit: contain;
  149. background: url(../../../resources/images/close_x.svg) no-repeat center center, linear-gradient(transparent, transparent);
  150. margin-left: auto;
  151. cursor: pointer;
  152. }
  153. div.resizeNotesDialog {
  154. position: absolute;
  155. bottom: 2px;
  156. right: 2px;
  157. width: 11px;
  158. height: 10px;
  159. object-fit: contain;
  160. background: url(../../../resources/images/resize.svg) no-repeat center center, linear-gradient(transparent, transparent);
  161. margin-left: auto;
  162. cursor: nwse-resize;
  163. }
  164. div.notesDialog {
  165. position: absolute;
  166. padding: 16px 3px 10px 3px;
  167. background-color: #FCFDFF;
  168. width: 300px;
  169. height: 300px;
  170. line-height: normal;
  171. border: #8F949A solid 1px;
  172. box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
  173. cursor: move;
  174. display: flex;
  175. flex-direction: column;
  176. box-sizing: border-box;
  177. }
  178. div.notesDialog.active {
  179. user-select: none;
  180. }
  181. div.notesDialog .widgetNoteContainer {
  182. cursor: auto;
  183. padding: 2px 26px 16px 14px;
  184. }
  185. div.notesDialogScroll {
  186. overflow-x: hidden;
  187. overflow-y: auto;
  188. height: 100%;
  189. cursor: auto;
  190. }
  191. .mobileMode .pageNoteName, .mobileMode #pageNotesToolbar, .mobileMode .dottedDivider {
  192. display: none;
  193. }