| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <style>
- .ck-content .info-box {
- background: hsl(0, 0%, 45%);
- border: 1px solid hsl(0, 0%, 80%);
- padding: 1em;
- border-radius: 8px;
- }
- .ck-content .info-box-actions button {
- font-size: 0.8em;
- border: 1px solid hsl(0, 0%, 80%);
- padding: 2px;
- }
- .ck-content .info-box-title {
- margin-bottom: 0.5em;
- font-size: 1.4em;
- color: inherit;
- border-bottom-color: inherit;
- border-bottom-style: solid;
- border-bottom-width: 1px;
- }
- .ck-content .info-box-warning {
- background: hsl(48, 100%, 87%);
- border: 1px solid hsl(47, 100%, 62%);
- }
- .ck-content .info-box-warning .info-box-title {
- color: hsl(47, 100%, 32%)
- }
- .ck-content .info-box-info {
- background: hsl(205, 100%, 95%);
- border: 1px solid hsl(205, 91%, 82%);
- }
- .ck-content .info-box-info .info-box-title {
- color: hsl(204, 79%, 41%)
- }
- .ck-content .info-box-content {
- padding: 8px 10px;
- background: hsl(0, 0%, 100%);
- border-radius: 6px;
- margin-top: 0.5em;
- }
- .ck-content .info-box-content p:only-child,
- .ck-content .info-box-content p:last-child {
- margin-bottom: 0;
- }
- </style>
- <div id="editor-element-reconversion">
- <p>Info:</p>
- <div class="info-box info-box-info">
- <div class="info-box-title">Hey! Did you know?</div>
- <div class="info-box-content">
- <p>Editable content of the <strong>info box</strong>.</p>
- </div>
- <div class="info-box-content">
- <p>Another content box.</p>
- </div>
- </div>
- <p>Warning:</p>
- <div class="info-box info-box-warning">
- <div class="info-box-title">Watch out for <strong>this</strong>!</div>
- <div class="info-box-content">
- <p>Editable content of the <strong>info box</strong>.</p>
- </div>
- </div>
- </div>
|