Add more styling to the 'rendered preview' badge.

DOMjudge · Feb 18, 2024 · ca2aaba · ca2aaba
1 parent 910faac
commit ca2aaba
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 4 deletions.
diff --git a/webapp/public/style_domjudge.css b/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;
+}
diff --git a/webapp/templates/jury/partials/clarification_form.html.twig b/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>

diff --git a/webapp/templates/team/clarification_add.html.twig b/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>

diff --git a/webapp/templates/team/clarification_add_modal.html.twig b/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>

diff --git a/webapp/templates/team/partials/clarification_content.html.twig b/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>