From 2148ba75f33c55646e9696866b898552efd57b14 Mon Sep 17 00:00:00 2001 From: Caroline Schulte Date: Sun, 19 Jul 2026 17:27:35 +0200 Subject: [PATCH] =?UTF-8?q?Button=20hervorheben=20und=20Kommentare=20?= =?UTF-8?q?=C3=A4ndern=20versch=C3=B6nert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/main.css | 90 +++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 85 insertions(+), 5 deletions(-) diff --git a/css/main.css b/css/main.css index 82a8780..02b5bbe 100644 --- a/css/main.css +++ b/css/main.css @@ -154,21 +154,32 @@ h1 { .button { width: 100%; - padding: 12px; + padding: 14px; background-color: #2563eb; color: white; - border: none; + border: 2px solid transparent; border-radius: 8px; font-size: 1rem; font-weight: bold; cursor: pointer; - transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; + transition: + background-color 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease, + border-color 0.2s ease; } .button:hover { + background-color: #1e40af; + border-color: #93c5fd; + transform: translateY(-3px) scale(1.01); + box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35); +} + +.button:active { background-color: #1d4ed8; - transform: translateY(-2px); - box-shadow: 0 4px 10px rgba(0,0,0,0.15); + transform: translateY(1px) scale(0.99); + box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25); } .register-link { @@ -245,4 +256,73 @@ h1 { .register-link a:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; +} +/* Kommentarbereich */ + +#comments-list { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 40px; +} + +#comments-list > div, +.comment { + background-color: #ffffff; + border: 1px solid #dbe3ec; + border-radius: 12px; + padding: 24px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); + transition: + transform 0.2s ease, + box-shadow 0.2s ease, + border-color 0.2s ease; +} + +#comments-list > div:hover, +.comment:hover { + transform: translateY(-3px); + border-color: #93c5fd; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); +} + +#comments-list textarea, +#comment-content { + width: 100%; + box-sizing: border-box; + padding: 14px; + border: 1px solid #cbd5e1; + border-radius: 8px; + font-size: 1rem; + resize: vertical; + transition: + border-color 0.2s ease, + box-shadow 0.2s ease; +} + +#comments-list textarea:focus, +#comment-content:focus { + outline: none; + border-color: #2563eb; + box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18); +} + +#comments-list a { + color: #2563eb; + font-weight: bold; + text-decoration: none; + border-radius: 4px; + transition: + color 0.2s ease, + background-color 0.2s ease; +} + +#comments-list a:hover { + color: #1e40af; + background-color: #dbeafe; + text-decoration: underline; +} + +#comments-list button { + cursor: pointer; } \ No newline at end of file