manualsave.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <div class="snippet-manual-save-header">
  2. <div class="snippet-manual-save-submit">
  3. <input id="snippet-manual-save" type="submit" value="Save">
  4. </div>
  5. <div class="snippet-manual-save-server">
  6. <div class="snippet-manual-save-server_label">HTTP server lag (ms):</div>
  7. <input id="snippet-manual-lag" type="number" value="500" step="100" min="0" max="9000">
  8. </div>
  9. </div>
  10. <div id="snippet-manual">
  11. <p>Test me!</p>
  12. </div>
  13. <p>Server data:</p>
  14. <pre>
  15. <code id="snippet-manual-save-console"></code>
  16. </pre>
  17. <style>
  18. .snippet-manual-save-header {
  19. display: flex;
  20. justify-content: space-between;
  21. align-items: center;
  22. background: var(--ck-color-toolbar-background);
  23. border: 1px solid var(--ck-color-toolbar-border);
  24. padding: 10px;
  25. border-radius: var(--ck-border-radius);
  26. margin-top: 1.5em;
  27. }
  28. .snippet-manual-save-server,
  29. .snippet-manual-save-submit {
  30. display: flex;
  31. align-items: center;
  32. }
  33. .snippet-manual-save-server_label,
  34. .snippet-manual-save-status_label {
  35. font-weight: bold;
  36. margin-right: var(--ck-spacing-large);
  37. }
  38. #snippet-manual-save-lag {
  39. padding: 4px;
  40. }
  41. #snippet-manual-save {
  42. color: #fff;
  43. background: hsl( 161, 74%, 46% );
  44. opacity: 0.5;
  45. padding: 7px 30px;
  46. display: block;
  47. border: 0;
  48. border-radius: 30px;
  49. font-weight: bold;
  50. outline: none;
  51. transition: 300ms ease background;
  52. }
  53. #snippet-manual-save.active {
  54. cursor: pointer;
  55. opacity: 1;
  56. }
  57. #snippet-manual-save.saving {
  58. background: hsl( 161, 74%, 36% );
  59. }
  60. #snippet-manual-save-console {
  61. /* Lets wrap content. */
  62. max-height: 300px;
  63. overflow: auto;
  64. white-space: normal;
  65. }
  66. </style>