Refine answer spoiler style

likrant · likrant · commit 7ec6bb9d44b1 · 2025-06-23T20:33:18.000+03:00
diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
@@ -8,6 +8,7 @@ body {
     flex-direction: column;
     min-height: 100vh;
     margin: 0;
+    font-size: 1.25rem; /* enlarge text */
 }
 
 @media (prefers-color-scheme: dark) {
@@ -20,6 +21,18 @@ h1, h2, p {
     margin: 0.5em 0;
 }
 
+h1 {
+    font-size: 2em;
+    font-weight: 700;
+    margin-bottom: 0.75em;
+}
+
+h2 {
+    font-size: 1.5em;
+    font-weight: 600;
+    margin-bottom: 0.5em;
+}
+
 ul { list-style: none; padding: 0; }
 summary {
     cursor: pointer;
@@ -31,7 +44,7 @@ details[open] summary::after {
 }
 main {
     width: 100%;
-    max-width: 42rem;
+    max-width: 52.5rem; /* wider center */
     margin: 0 auto;
     padding: 1rem;
     text-align: left;
@@ -40,3 +53,57 @@ main {
     from { opacity: 0; }
     to { opacity: 1; }
 }
+
+button.btn {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    font-weight: 700;
+    font-size: 1.05rem;
+}
+
+.question {
+    margin-bottom: 1rem;
+}
+
+details.answer-container {
+    margin-top: 1rem;
+}
+
+details.answer-container summary {
+    background-color: #eff6ff;
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    border: 1px solid #bfdbfe;
+    color: #1e40af;
+    font-size: 1.1em;
+    font-weight: 600;
+    transition: background-color 0.3s, color 0.3s;
+    position: relative;
+}
+
+details.answer-container summary:hover {
+    background-color: #dbeafe;
+}
+
+details.answer-container summary::after {
+    content: "\25BC";
+    position: absolute;
+    right: 0.75rem;
+    transition: transform 0.3s ease;
+}
+
+details.answer-container.open summary::after {
+    transform: rotate(180deg);
+}
+
+details.answer-container .answer {
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: max-height 0.5s ease, opacity 0.5s ease;
+}
+
+details.answer-container.open .answer {
+    max-height: 100vh;
+    opacity: 1;
+}
diff --git a/src/main/resources/templates/question.html b/src/main/resources/templates/question.html
@@ -15,10 +15,10 @@
 <h1 th:text="'Категории: ' + ${#strings.listJoin(categories, ', ')}"></h1>
 <div th:if="${qa != null}">
     <h2 th:text="${qa.category}"></h2>
-    <div class="markdown-body" th:utext="${qa.question}"></div>
-    <details>
+    <div class="question markdown-body" th:utext="${qa.question}"></div>
+    <details class="answer-container">
         <summary>Ответ</summary>
-        <div class="markdown-body" th:utext="${qa.answer}"></div>
+        <div class="answer markdown-body" th:utext="${qa.answer}"></div>
     </details>
 </div>
 <div th:if="${qa == null}">
