diff --git a/static/css/simple-blog-template.css b/static/css/simple-blog-template.css index 4c99507..0a588e7 100644 --- a/static/css/simple-blog-template.css +++ b/static/css/simple-blog-template.css @@ -132,6 +132,56 @@ nav { } /* --- Comments Section --- */ + +/* Modernizing the container */ +.comment-card { + background: #ffffff; + border: 1px solid #e1e4e8; + border-radius: 8px; + padding: 24px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); + margin-top: 30px; +} + +.comment-card h4 { + margin-top: 0; + font-weight: 600; + color: #333; + margin-bottom: 20px; +} + +/* Styling the inputs */ +.comment-card .form-control { + border-radius: 6px; + border: 1px solid #d1d5da; + box-shadow: none; + transition: + border-color 0.2s, + box-shadow 0.2s; + padding: 10px 12px; +} + +.comment-card .form-control:focus { + border-color: #007bff; + box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); + outline: none; +} + +/* Making the button pop */ +.comment-card .btn-primary { + background-color: #007bff; + border: none; + padding: 8px 20px; + font-weight: 500; + border-radius: 6px; + margin-top: 15px; + transition: background 0.2s; +} + +.comment-card .btn-primary:hover { + background-color: #0056b3; +} + .comment-card { background: #ffffff; border: 1px solid #e1e4e8;