From 230b7b66802affef920ac0cc28c12584c79bc714 Mon Sep 17 00:00:00 2001
From: 65160392 <65160392@go.buu.ac.th>
Date: Mon, 24 Mar 2025 14:08:57 +0000
Subject: [PATCH] Edit style.css
---
public/css/style.css | 216 ++++++++++++++++++++++++++++++++-----------
1 file changed, 161 insertions(+), 55 deletions(-)
diff --git a/public/css/style.css b/public/css/style.css
index 5779995..be26164 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,157 +1,218 @@
:root {
- --primary-color: #2c3e50; /* น้ำเงินเข้ม */
- --secondary-color: #34495e; /* เทาเข้ม */
- --accent-color: #3498db; /* น้ำเงินสดใส */
- --light-color: #ecf0f1; /* เทาอ่อน */
- --dark-color: #2c3e50; /* น้ำเงินเข้ม */
- --success-color: #2ecc71; /* เขียว */
- --danger-color: #e74c3c; /* แดง */
- --warning-color: #f1c40f; /* เหลือง */
- --info-color: #3498db; /* น้ำเงิน */
- --text-color: #2c3e50; /* น้ำเงินเข้ม */
- --border-color: #bdc3c7; /* เทา */
+ --primary-color: #1a237e; /* น้ำเงินเข้ม */
+ --secondary-color: #3949ab; /* น้ำเงินกลาง */
+ --accent-color: #5c6bc0; /* น้ำเงินอ่อน */
+ --light-color: #f5f5f5; /* เทาอ่อนมาก */
+ --dark-color: #0d47a1; /* น้ำเงินเข้มมาก */
+ --success-color: #00c853; /* เขียวสด */
+ --danger-color: #d50000; /* แดงสด */
+ --warning-color: #ffd600; /* เหลืองสด */
+ --info-color: #00b0ff; /* น้ำเงินสด */
+ --text-color: #212121; /* ดำ */
+ --border-color: #e0e0e0; /* เทาอ่อน */
+ --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ --hover-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
body {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-family: 'Poppins', sans-serif;
background-color: var(--light-color);
color: var(--text-color);
+ line-height: 1.6;
}
/* Navbar */
.navbar {
- background-color: var(--primary-color);
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ box-shadow: var(--card-shadow);
+ padding: 1rem 2rem;
}
.navbar-brand {
color: white !important;
- font-weight: bold;
+ font-weight: 700;
+ font-size: 1.5rem;
+ letter-spacing: 1px;
}
.nav-link {
- color: rgba(255,255,255,0.8) !important;
- transition: color 0.3s ease;
+ color: rgba(255,255,255,0.9) !important;
+ font-weight: 500;
+ padding: 0.5rem 1rem;
+ margin: 0 0.2rem;
+ border-radius: 5px;
+ transition: all 0.3s ease;
}
.nav-link:hover {
color: white !important;
+ background-color: rgba(255,255,255,0.1);
+ transform: translateY(-2px);
}
/* Cards */
.card {
border: none;
- border-radius: 8px;
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
- transition: transform 0.3s ease;
+ border-radius: 15px;
+ box-shadow: var(--card-shadow);
+ transition: all 0.3s ease;
background-color: white;
+ overflow: hidden;
+ margin-bottom: 1.5rem;
}
.card:hover {
transform: translateY(-5px);
+ box-shadow: var(--hover-shadow);
}
.card-header {
- background-color: var(--primary-color);
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
- border-radius: 8px 8px 0 0 !important;
+ border-radius: 15px 15px 0 0 !important;
+ padding: 1.2rem;
+ font-weight: 600;
+}
+
+.card-body {
+ padding: 1.5rem;
}
/* Buttons */
+.btn {
+ padding: 0.8rem 1.5rem;
+ border-radius: 8px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ transition: all 0.3s ease;
+}
+
.btn-primary {
- background-color: var(--accent-color);
- border-color: var(--accent-color);
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ border: none;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-primary:hover {
- background-color: #2980b9;
- border-color: #2980b9;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn-secondary {
- background-color: var(--secondary-color);
- border-color: var(--secondary-color);
+ background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
+ border: none;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-secondary:hover {
- background-color: #2c3e50;
- border-color: #2c3e50;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* Forms */
.form-control {
- border: 1px solid var(--border-color);
- border-radius: 4px;
+ border: 2px solid var(--border-color);
+ border-radius: 8px;
+ padding: 0.8rem 1rem;
+ transition: all 0.3s ease;
}
.form-control:focus {
border-color: var(--accent-color);
- box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
+ box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.1);
}
/* Tables */
.table {
background-color: white;
- border-radius: 8px;
+ border-radius: 15px;
overflow: hidden;
+ box-shadow: var(--card-shadow);
}
.table thead th {
- background-color: var(--primary-color);
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
+ padding: 1rem;
+ font-weight: 600;
}
.table-hover tbody tr:hover {
- background-color: rgba(52, 152, 219, 0.1);
+ background-color: rgba(92, 107, 192, 0.05);
+ transition: all 0.3s ease;
}
/* Status Badges */
.badge {
- padding: 0.5em 0.8em;
+ padding: 0.6em 1em;
font-weight: 500;
+ border-radius: 6px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
}
.badge-success {
background-color: var(--success-color);
+ color: white;
}
.badge-danger {
background-color: var(--danger-color);
+ color: white;
}
.badge-warning {
background-color: var(--warning-color);
+ color: var(--text-color);
}
.badge-info {
background-color: var(--info-color);
+ color: white;
}
/* Project Cards */
.project-card {
- border-left: 4px solid var(--accent-color);
+ border-left: 5px solid var(--accent-color);
+ background: linear-gradient(to right, white, rgba(92, 107, 192, 0.05));
}
.project-card .card-header {
- background-color: var(--secondary-color);
+ background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
}
/* Task Items */
.task-item {
- border-left: 3px solid var(--accent-color);
- margin-bottom: 0.5rem;
- padding: 0.5rem;
+ border-left: 4px solid var(--accent-color);
+ margin-bottom: 1rem;
+ padding: 1rem;
background-color: white;
- border-radius: 4px;
+ border-radius: 8px;
+ box-shadow: var(--card-shadow);
+ transition: all 0.3s ease;
+}
+
+.task-item:hover {
+ transform: translateX(5px);
+ box-shadow: var(--hover-shadow);
}
/* Search Bar */
.search-bar {
background-color: white;
- border-radius: 20px;
- padding: 0.5rem 1rem;
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ border-radius: 25px;
+ padding: 0.8rem 1.5rem;
+ box-shadow: var(--card-shadow);
+ display: flex;
+ align-items: center;
+ transition: all 0.3s ease;
+}
+
+.search-bar:focus-within {
+ box-shadow: var(--hover-shadow);
+ transform: translateY(-2px);
}
.search-bar input {
@@ -159,35 +220,80 @@ body {
background: none;
outline: none;
width: 100%;
+ padding: 0.5rem;
+ font-size: 1rem;
}
/* Dashboard Stats */
.stat-card {
- background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
- border-radius: 8px;
- padding: 1.5rem;
+ border-radius: 15px;
+ padding: 2rem;
+ box-shadow: var(--card-shadow);
+ transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+ transform: translateY(-5px);
+ box-shadow: var(--hover-shadow);
}
.stat-card .stat-value {
- font-size: 2rem;
- font-weight: bold;
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 0.5rem;
+}
+
+.stat-card .stat-label {
+ font-size: 1.1rem;
+ opacity: 0.9;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
- width: 8px;
+ width: 10px;
}
::-webkit-scrollbar-track {
background: var(--light-color);
+ border-radius: 5px;
}
::-webkit-scrollbar-thumb {
- background: var(--accent-color);
- border-radius: 4px;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
- background: var(--primary-color);
+ background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
+}
+
+/* Animations */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.fade-in {
+ animation: fadeIn 0.5s ease forwards;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .navbar {
+ padding: 0.8rem 1rem;
+ }
+
+ .card {
+ margin-bottom: 1rem;
+ }
+
+ .stat-card {
+ padding: 1.5rem;
+ }
+
+ .btn {
+ padding: 0.6rem 1.2rem;
+ }
}
\ No newline at end of file
--
GitLab