Add more styling to the 'rendered preview' badge.

Author: meisterT

webapp/public/style_domjudge.css

@@ -635,3 +635,14 @@ blockquote {
     margin-right: 2em;
     font-weight: normal;
 }
+
+.rendered-preview-badge {
+    position: relative;
+    float: right;
+    background-color: Gainsboro;
+    padding-left: 6px;
+    padding-right: 6px;
+    border-radius: 4px;
+    font-style: italic;
+    font-size: smaller;
+}

webapp/templates/jury/partials/clarification_form.html.twig

@@ -5,7 +5,7 @@
 <div class="mb-3">
     <div class="card">
         <div class="card-body">
-            <label class="form-label text-muted"><small>rendered preview</small></label>
+            <label class="rendered-preview-badge">rendered preview</label>
             <div id="messagepreview">Start typing to see a preview of your message</div>
         </div>
     </div>

webapp/templates/team/clarification_add.html.twig

@@ -14,7 +14,7 @@
             <div class="mb-3">
                 <div class="card">
                     <div class="card-body">
-                        <label class="form-label text-muted"><small>rendered preview</small></label>
+                        <label class="rendered-preview-badge">rendered preview</label>
                         <div id="messagepreview">Start typing to see a preview of your message</div>
                     </div>
                 </div>

webapp/templates/team/clarification_add_modal.html.twig

@@ -15,7 +15,7 @@
                     <div class="mb-3">
                         <div class="card">
                             <div class="card-body">
-                                <label class="form-label text-muted"><small>rendered preview</small></label>
+                                <label class="rendered-preview-badge">rendered preview</label>
                                 <div id="messagepreview">Start typing to see a preview of your message</div>
                             </div>
                         </div>

webapp/templates/team/partials/clarification_content.html.twig

@@ -16,7 +16,7 @@
         <div class="mb-3">
             <div class="card">
                 <div class="card-body">
-                    <label class="form-label text-muted"><small>rendered preview</small></label>
+                    <label class="rendered-preview-badge">rendered preview</label>
                     <div id="messagepreview">Start typing to see a preview of your message</div>
                 </div>
             </div>