niklas.ortmann/webprogrammierung
0
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Antwortmöglichkeit

Browse Source
This commit is contained in:
Caroline Schulte
2026-06-15 22:41:05 +02:00
parent 86222aa92e
commit efb179dec2
1 changed files with 70 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/showArticle.css
+30 -30
View File
@@ -1,7 +1,7 @@
/* Container für den gesamten articleikel */ /* Container für den gesamten articleikel */
.article-view-container { .article-view-container {
box-sizing: border-box; box-sizing: border-box;
max-width: 900px; /* Angenehme Lesebreite für längere Texte */ max-width: 900px;
margin: 3rem auto; margin: 3rem auto;
padding: 0 2rem; padding: 0 2rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -105,7 +105,7 @@
cursor: default; cursor: default;
} }
/* Responsive Anpassungen unter 760px (für z.B. Smarticlephones) */ /* Responsive Anpassungen unter 760px */
@media (max-width: 760px) { @media (max-width: 760px) {
.article-view-container { .article-view-container {
margin: 1.5rem auto; margin: 1.5rem auto;
@@ -117,52 +117,54 @@
} }
} }
/* --- KOMMENTARE --- */ /* --- KOMMENTARE --- */
.article-comments-section { .article-comments-section {
margin-top: 3rem; margin-top: 3rem;
padding-top: 2rem; padding-top: 2rem;
border-top: 1px solid #e2e8f0; border-top: 1px solid #e2e8f0;
} }
.article-comments-section h2 { .article-comments-section h2 {
font-size: 2rem; font-size: 2rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
#comments-list { #comments-list {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.comment-item { .comment-item {
background-color: #f8fafc; background-color: #f8fafc;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
border-radius: 10px; border-radius: 10px;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
#comment-form { #comment-form {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
} }
#comment-content { #comment-content {
width: 100% !important; width: 100%;
min-height: 130px !important; min-height: 130px;
padding: 1rem; padding: 1rem;
border: 1px solid #cbd5e1; border: 1px solid #cbd5e1;
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
} }
#comment-form .button { #comment-form .button {
width: 100%; width: 100%;
.reply-button { }
.reply-button {
display: inline-block; display: inline-block;
margin-top: 0.75rem; margin-top: 0.75rem;
background: none; background: none;
@@ -172,28 +174,26 @@
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
font-size: 0.95rem; font-size: 0.95rem;
} }
.reply-button:hover { .reply-button:hover {
text-decoration: underline; text-decoration: underline;
} }
.comment-replies { .comment-replies {
margin-top: 1rem; margin-top: 1rem;
margin-left: 2rem; margin-left: 2rem;
padding-left: 1rem; padding-left: 1rem;
border-left: 3px solid #cbd5e1; border-left: 3px solid #cbd5e1;
} }
.comment-reply { .comment-reply {
background-color: #eef6ff; background-color: #eef6ff;
margin-top: 1rem; margin-top: 1rem;
} }
.reply-info { .reply-info {
margin: 0.5rem 0; margin: 0.5rem 0;
color: #475569; color: #475569;
font-weight: 600; font-weight: 600;
} }
}