summernote.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  1. .note-editor {
  2. height: 300px;
  3. }
  4. .note-editor .note-dropzone {
  5. position: absolute;
  6. z-index: 1;
  7. display: none;
  8. color: #87cefa;
  9. background-color: white;
  10. border: 2px dashed #87cefa;
  11. opacity: .95;
  12. pointer-event: none
  13. }
  14. .note-editor .note-dropzone .note-dropzone-message {
  15. display: table-cell;
  16. font-size: 28px;
  17. font-weight: bold;
  18. text-align: center;
  19. vertical-align: middle
  20. }
  21. .note-editor .note-dropzone.hover {
  22. color: #098ddf;
  23. border: 2px dashed #098ddf
  24. }
  25. .note-editor.dragover .note-dropzone {
  26. display: table
  27. }
  28. .note-editor.fullscreen {
  29. position: fixed;
  30. top: 0;
  31. left: 0;
  32. z-index: 1050;
  33. width: 100%
  34. }
  35. .note-editor.fullscreen .note-editable {
  36. background-color: white
  37. }
  38. .note-editor.fullscreen .note-resizebar {
  39. display: none
  40. }
  41. .note-editor.codeview .note-editable {
  42. display: none
  43. }
  44. .note-editor.codeview .note-codable {
  45. display: block
  46. }
  47. .note-editor .note-toolbar {
  48. padding-bottom: 5px;
  49. padding-left: 10px;
  50. padding-top: 5px;
  51. margin: 0;
  52. background-color: #F8FAFB
  53. }
  54. .note-editor .note-toolbar > .btn-group {
  55. margin-top: 5px;
  56. margin-right: 5px;
  57. margin-left: 0
  58. }
  59. .note-editor .note-toolbar .note-table .dropdown-menu {
  60. min-width: 0;
  61. padding: 5px
  62. }
  63. .note-editor .note-toolbar .note-table .dropdown-menu .note-dimension-picker {
  64. font-size: 18px
  65. }
  66. .note-editor .note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-mousecatcher {
  67. position: absolute !important;
  68. z-index: 3;
  69. width: 10em;
  70. height: 10em;
  71. cursor: pointer
  72. }
  73. .note-editor .note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-unhighlighted {
  74. position: relative !important;
  75. z-index: 1;
  76. width: 5em;
  77. height: 5em;
  78. background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat
  79. }
  80. .note-editor .note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-highlighted {
  81. position: absolute !important;
  82. z-index: 2;
  83. width: 1em;
  84. height: 1em;
  85. background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat
  86. }
  87. .note-editor .note-toolbar .note-style h1, .note-editor .note-toolbar .note-style h2, .note-editor .note-toolbar .note-style h3, .note-editor .note-toolbar .note-style h4, .note-editor .note-toolbar .note-style h5, .note-editor .note-toolbar .note-style h6, .note-editor .note-toolbar .note-style blockquote {
  88. margin: 0
  89. }
  90. .note-editor .note-toolbar .note-color .dropdown-toggle {
  91. width: 20px;
  92. padding-left: 5px
  93. }
  94. .note-editor .note-toolbar .note-color .dropdown-menu {
  95. min-width: 290px
  96. }
  97. .note-editor .note-toolbar .note-color .dropdown-menu .btn-group {
  98. margin: 0
  99. }
  100. .note-editor .note-toolbar .note-color .dropdown-menu .btn-group:first-child {
  101. margin: 0 5px
  102. }
  103. .note-editor .note-toolbar .note-color .dropdown-menu .btn-group .note-palette-title {
  104. margin: 2px 7px;
  105. font-size: 12px;
  106. text-align: center;
  107. border-bottom: 1px solid #eee
  108. }
  109. .note-editor .note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset {
  110. padding: 0 3px;
  111. margin: 5px;
  112. font-size: 12px;
  113. cursor: pointer;
  114. -webkit-border-radius: 5px;
  115. -moz-border-radius: 5px;
  116. border-radius: 5px
  117. }
  118. .note-editor .note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset:hover {
  119. background: #eee
  120. }
  121. .note-editor .note-toolbar .note-para .dropdown-menu {
  122. min-width: 216px;
  123. padding: 5px
  124. }
  125. .note-editor .note-toolbar .note-para .dropdown-menu > div:first-child {
  126. margin-right: 5px
  127. }
  128. .note-editor .note-statusbar {
  129. background-color: #f5f5f5
  130. }
  131. .note-editor .note-statusbar .note-resizebar {
  132. width: 100%;
  133. height: 8px;
  134. cursor: s-resize;
  135. border-top: 1px solid #a9a9a9
  136. }
  137. .note-editor .note-statusbar .note-resizebar .note-icon-bar {
  138. width: 20px;
  139. margin: 1px auto;
  140. border-top: 1px solid #a9a9a9
  141. }
  142. .note-editor .note-popover .popover {
  143. max-width: none
  144. }
  145. .note-editor .note-popover .popover .popover-content {
  146. padding: 5px
  147. }
  148. .note-editor .note-popover .popover .popover-content a {
  149. display: inline-block;
  150. max-width: 200px;
  151. overflow: hidden;
  152. text-overflow: ellipsis;
  153. white-space: nowrap;
  154. vertical-align: middle
  155. }
  156. .note-editor .note-popover .popover .popover-content .btn-group + .btn-group {
  157. margin-left: 5px
  158. }
  159. .note-editor .note-popover .popover .arrow {
  160. left: 20px
  161. }
  162. .note-editor .note-handle .note-control-selection {
  163. position: absolute;
  164. display: none;
  165. border: 1px solid black
  166. }
  167. .note-editor .note-handle .note-control-selection > div {
  168. position: absolute
  169. }
  170. .note-editor .note-handle .note-control-selection .note-control-selection-bg {
  171. width: 100%;
  172. height: 100%;
  173. background-color: black;
  174. -webkit-opacity: .3;
  175. -khtml-opacity: .3;
  176. -moz-opacity: .3;
  177. opacity: .3;
  178. -ms-filter: alpha(opacity=30);
  179. filter: alpha(opacity=30)
  180. }
  181. .note-editor .note-handle .note-control-selection .note-control-handle {
  182. width: 7px;
  183. height: 7px;
  184. border: 1px solid black
  185. }
  186. .note-editor .note-handle .note-control-selection .note-control-holder {
  187. width: 7px;
  188. height: 7px;
  189. border: 1px solid black
  190. }
  191. .note-editor .note-handle .note-control-selection .note-control-sizing {
  192. width: 7px;
  193. height: 7px;
  194. background-color: white;
  195. border: 1px solid black
  196. }
  197. .note-editor .note-handle .note-control-selection .note-control-nw {
  198. top: -5px;
  199. left: -5px;
  200. border-right: 0;
  201. border-bottom: 0
  202. }
  203. .note-editor .note-handle .note-control-selection .note-control-ne {
  204. top: -5px;
  205. right: -5px;
  206. border-bottom: 0;
  207. border-left: none
  208. }
  209. .note-editor .note-handle .note-control-selection .note-control-sw {
  210. bottom: -5px;
  211. left: -5px;
  212. border-top: 0;
  213. border-right: 0
  214. }
  215. .note-editor .note-handle .note-control-selection .note-control-se {
  216. right: -5px;
  217. bottom: -5px;
  218. cursor: se-resize
  219. }
  220. .note-editor .note-handle .note-control-selection .note-control-selection-info {
  221. right: 0;
  222. bottom: 0;
  223. padding: 5px;
  224. margin: 5px;
  225. font-size: 12px;
  226. color: white;
  227. background-color: black;
  228. -webkit-border-radius: 5px;
  229. -moz-border-radius: 5px;
  230. border-radius: 5px;
  231. -webkit-opacity: .7;
  232. -khtml-opacity: .7;
  233. -moz-opacity: .7;
  234. opacity: .7;
  235. -ms-filter: alpha(opacity=70);
  236. filter: alpha(opacity=70)
  237. }
  238. .note-editor .note-dialog > div {
  239. display: none
  240. }
  241. .note-editor .note-dialog .note-image-dialog .note-dropzone {
  242. min-height: 100px;
  243. margin-bottom: 10px;
  244. font-size: 30px;
  245. line-height: 4;
  246. color: lightgray;
  247. text-align: center;
  248. border: 4px dashed lightgray
  249. }
  250. .note-editor .note-dialog .note-help-dialog {
  251. font-size: 12px;
  252. color: #ccc;
  253. background: transparent;
  254. background-color: #222 !important;
  255. border: 0;
  256. -webkit-opacity: .9;
  257. -khtml-opacity: .9;
  258. -moz-opacity: .9;
  259. opacity: .9;
  260. -ms-filter: alpha(opacity=90);
  261. filter: alpha(opacity=90)
  262. }
  263. .note-editor .note-dialog .note-help-dialog .modal-content {
  264. background: transparent;
  265. border: 1px solid white;
  266. -webkit-border-radius: 5px;
  267. -moz-border-radius: 5px;
  268. border-radius: 5px;
  269. -webkit-box-shadow: none;
  270. -moz-box-shadow: none;
  271. box-shadow: none
  272. }
  273. .note-editor .note-dialog .note-help-dialog a {
  274. font-size: 12px;
  275. color: white
  276. }
  277. .note-editor .note-dialog .note-help-dialog .title {
  278. padding-bottom: 5px;
  279. font-size: 14px;
  280. font-weight: bold;
  281. color: white;
  282. border-bottom: white 1px solid
  283. }
  284. .note-editor .note-dialog .note-help-dialog .modal-close {
  285. font-size: 14px;
  286. color: #dd0;
  287. cursor: pointer
  288. }
  289. .note-editor .note-dialog .note-help-dialog .note-shortcut-layout {
  290. width: 100%
  291. }
  292. .note-editor .note-dialog .note-help-dialog .note-shortcut-layout td {
  293. vertical-align: top
  294. }
  295. .note-editor .note-dialog .note-help-dialog .note-shortcut {
  296. margin-top: 8px
  297. }
  298. .note-editor .note-dialog .note-help-dialog .note-shortcut th {
  299. font-size: 13px;
  300. color: #dd0;
  301. text-align: left
  302. }
  303. .note-editor .note-dialog .note-help-dialog .note-shortcut td:first-child {
  304. min-width: 110px;
  305. padding-right: 10px;
  306. font-family: "Courier New";
  307. color: #dd0;
  308. text-align: right
  309. }
  310. .note-editor .note-editable {
  311. padding: 20px;
  312. overflow: auto;
  313. outline: 0;
  314. background-color: white;
  315. border: 1px solid #e5e6e7;
  316. border-radius: 1px
  317. }
  318. .note-editor .note-editable[contenteditable="false"] {
  319. background-color: #e5e5e5
  320. }
  321. .note-editor .note-codable {
  322. display: none;
  323. width: 100%;
  324. padding: 10px;
  325. margin-bottom: 0;
  326. font-family: Menlo, Monaco, monospace, sans-serif;
  327. font-size: 14px;
  328. color: #ccc;
  329. background-color: #222;
  330. border: 0;
  331. -webkit-border-radius: 0;
  332. -moz-border-radius: 0;
  333. border-radius: 0;
  334. box-shadow: none;
  335. -webkit-box-sizing: border-box;
  336. -moz-box-sizing: border-box;
  337. -ms-box-sizing: border-box;
  338. box-sizing: border-box;
  339. resize: none
  340. }
  341. .note-editor .dropdown-menu {
  342. min-width: 90px
  343. }
  344. .note-editor .dropdown-menu.right {
  345. right: 0;
  346. left: auto
  347. }
  348. .note-editor .dropdown-menu.right::before {
  349. right: 9px;
  350. left: auto !important
  351. }
  352. .note-editor .dropdown-menu.right::after {
  353. right: 10px;
  354. left: auto !important
  355. }
  356. .note-editor .dropdown-menu li a i {
  357. color: deepskyblue;
  358. visibility: hidden
  359. }
  360. .note-editor .dropdown-menu li a.checked i {
  361. visibility: visible
  362. }
  363. .note-editor .note-fontsize-10 {
  364. font-size: 10px
  365. }
  366. .note-editor .note-color-palette {
  367. line-height: 1
  368. }
  369. .note-editor .note-color-palette div .note-color-btn {
  370. width: 17px;
  371. height: 17px;
  372. padding: 0;
  373. margin: 0;
  374. border: 1px solid #fff
  375. }
  376. .note-editor .note-color-palette div .note-color-btn:hover {
  377. border: 1px solid #000
  378. }