Gitlab@Informatics

Skip to content
Snippets Groups Projects
Commit 230b7b66 authored by 65160392's avatar 65160392
Browse files

Edit style.css

parent 288f7f67
No related branches found
No related tags found
No related merge requests found
: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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment