highlight.html 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <style>
  2. :root {
  3. --ck-manual-test-highlight-yellow: hsla(60, 100%, 50%, 0.5);
  4. --ck-manual-test-highlight-red: hsla(0, 100%, 50%, 0.5);
  5. --ck-manual-test-highlight-blue: hsla(240, 100%, 50%, 0.5);
  6. }
  7. span.highlight-yellow {
  8. background-color: var(--ck-manual-test-highlight-yellow);
  9. }
  10. span.highlight-blue {
  11. background-color: var(--ck-manual-test-highlight-blue);
  12. }
  13. span.highlight-red {
  14. background-color: var(--ck-manual-test-highlight-red);
  15. }
  16. .ck-widget.fancy-widget {
  17. background-color: hsl(0, 0%, 0%);
  18. color: hsl(0, 0%, 100%);
  19. text-align: center;
  20. height: 40px;
  21. line-height: 40px;
  22. }
  23. .ck-widget.fancy-widget.highlight-yellow {
  24. background-color: var(--ck-manual-test-highlight-yellow);
  25. color: hsl(0, 0%, 0%);
  26. }
  27. .ck-widget.fancy-widget.highlight-blue {
  28. background-color: var(--ck-manual-test-highlight-blue);
  29. color: hsl(0, 0%, 0%);
  30. }
  31. .ck-widget.fancy-widget.highlight-red {
  32. background-color: var(--ck-manual-test-highlight-red);
  33. color: hsl(0, 0%, 0%);
  34. }
  35. .table td.highlight-yellow,
  36. .table th.highlight-yellow {
  37. /* !important to override selected editable styles. */
  38. background-color: var(--ck-manual-test-highlight-yellow) !important;
  39. }
  40. .table td.highlight-blue,
  41. .table th.highlight-blue {
  42. /* !important to override selected editable styles. */
  43. background-color: var(--ck-manual-test-highlight-blue) !important;
  44. }
  45. .table td.highlight-red,
  46. .table th.highlight-red {
  47. /* !important to override selected editable styles. */
  48. background-color: var(--ck-manual-test-highlight-red) !important;
  49. }
  50. button {
  51. width: 200px;
  52. }
  53. </style>
  54. <div id="editor">
  55. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at diam quis justo imperdiet posuere non eu tortor. Mauris vel magna eu sem hendrerit varius. Ut imperdiet velit ut ante interdum convallis. Vestibulum vitae lacinia mi. </p>
  56. <figure></figure>
  57. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at diam quis justo imperdiet posuere non eu tortor. Mauris vel magna eu sem hendrerit varius. Ut imperdiet velit ut ante interdum convallis. Vestibulum vitae lacinia mi. </p>
  58. <table>
  59. <tr>
  60. <td>foo</td>
  61. <td>bar</td>
  62. </tr>
  63. <tr>
  64. <td>baz</td>
  65. <td>qux</td>
  66. </tr>
  67. </table>
  68. </div>
  69. <h2>Markers</h2>
  70. <button id="add-marker-yellow">Set yellow highlight</button><button id="remove-marker-yellow">Remove yellow highlight</button>
  71. <br />
  72. <button id="add-marker-red">Set red highlight</button><button id="remove-marker-red">Remove red highlight</button>
  73. <br />
  74. <button id="add-marker-blue">Set blue highlight</button><button id="remove-marker-blue">Remove blue highlight</button>
  75. <br />
  76. <button id="remove-markers">Remove all highlights</button>