| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- <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-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;
- }
- .ck-content .info-box-url {
- margin: 0.5em 0;
- font-style: italic;
- font-size: 0.8em;
- color: hsl(0, 0%, 20%);
- }
- .ck-content .info-box-actions {
- margin: 0.5em 0;
- }
- .ck-content .info-box-actions button {
- font-size: 0.8em;
- border: 1px solid hsl(0, 0%, 80%);
- padding: 2px 4px;
- margin-right: 0.5em;
- }
- </style>
- <div id="editor-element-reconversion">
- <p>Info box with two content fields:</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 box with URL attribute:</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>
- allowContentOf: '$root',<div class="info-box-url">http://cksource.com</div>
- </div>
- </div>
|