pongpon pitisuk
381 lines
7.5 KiB
CSS
381 lines
7.5 KiB
CSS
:root {
|
|
--app-bg: #f4f7fb;
|
|
--app-surface: #ffffff;
|
|
--app-surface-soft: #f8fafc;
|
|
--app-border: #dbe4ef;
|
|
--app-text: #172033;
|
|
--app-muted: #64748b;
|
|
--app-primary: #1455a3;
|
|
--app-primary-dark: #0d376d;
|
|
--app-primary-soft: #e8f1fb;
|
|
--app-success: #16845b;
|
|
--app-warning: #c47a08;
|
|
--app-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
|
|
--app-radius: 8px;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Sarabun', 'Segoe UI', Tahoma, sans-serif;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(20, 85, 163, 0.08), transparent 34rem),
|
|
linear-gradient(180deg, #f7faff 0%, var(--app-bg) 42%, #eef3f8 100%);
|
|
color: var(--app-text);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.app-navbar {
|
|
background: linear-gradient(90deg, var(--app-primary-dark), var(--app-primary));
|
|
box-shadow: 0 10px 28px rgba(13, 55, 109, 0.24);
|
|
padding-block: 0.65rem;
|
|
}
|
|
|
|
.app-navbar .navbar-brand,
|
|
.app-navbar .nav-link {
|
|
color: rgba(255, 255, 255, 0.88);
|
|
}
|
|
|
|
.app-navbar .nav-link {
|
|
border-radius: 6px;
|
|
font-weight: 500;
|
|
padding-inline: 0.85rem;
|
|
}
|
|
|
|
.app-navbar .nav-link:hover,
|
|
.app-navbar .nav-link:focus {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
color: #fff;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.user-chip {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
color: #fff !important;
|
|
}
|
|
|
|
.app-shell {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.page-heading {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.page-heading h4,
|
|
.page-heading h5 {
|
|
color: var(--app-primary);
|
|
font-weight: 800;
|
|
margin: 0;
|
|
}
|
|
|
|
.page-heading .text-muted {
|
|
color: rgba(20, 85, 163, 0.75) !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.card {
|
|
background: var(--app-surface);
|
|
border: 1px solid rgba(219, 228, 239, 0.9);
|
|
border-radius: var(--app-radius);
|
|
box-shadow: var(--app-shadow);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-header {
|
|
background: var(--app-surface) !important;
|
|
border-bottom: 1px solid var(--app-border);
|
|
border-radius: var(--app-radius) var(--app-radius) 0 0 !important;
|
|
color: var(--app-text) !important;
|
|
font-weight: 700;
|
|
padding: 0.95rem 1.1rem;
|
|
}
|
|
|
|
.card-header h4,
|
|
.card-header h5 {
|
|
color: inherit;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.card-header.bg-primary,
|
|
.card-header.bg-info,
|
|
.card-header.bg-success,
|
|
.card-header.bg-secondary,
|
|
.card-header.bg-warning {
|
|
border-left: 4px solid var(--app-primary);
|
|
}
|
|
|
|
.card-header.bg-success {
|
|
border-left-color: var(--app-success);
|
|
}
|
|
|
|
.card-header.bg-warning {
|
|
border-left-color: var(--app-warning);
|
|
}
|
|
|
|
.dashboard-hero {
|
|
background: linear-gradient(135deg, #0d376d, #1455a3 56%, #1570b8);
|
|
border: 0;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.dashboard-hero .card-header,
|
|
.dashboard-hero .card-body {
|
|
background: transparent !important;
|
|
border: 0;
|
|
color: #fff !important;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stat-card {
|
|
border: none;
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
|
overflow: hidden;
|
|
position: relative;
|
|
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
|
min-height: 120px;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.stat-card .card-body {
|
|
padding: 1.25rem 1.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.stat-card.card-curriculum {
|
|
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.stat-card.card-dt {
|
|
background: linear-gradient(135deg, #1d3557 0%, #457b9d 100%);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.stat-card.card-dbc {
|
|
background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.stat-card.card-all {
|
|
background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.stat-card.card-transfer {
|
|
background: linear-gradient(135deg, #d35400 0%, #f1c40f 100%);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.stat-card .stat-label {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.stat-card.card-curriculum .stat-label,
|
|
.stat-card.card-dt .stat-label,
|
|
.stat-card.card-dbc .stat-label,
|
|
.stat-card.card-all .stat-label,
|
|
.stat-card.card-transfer .stat-label {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
.stat-card .stat-value {
|
|
font-size: 2.25rem;
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.stat-card.card-curriculum .stat-value,
|
|
.stat-card.card-dt .stat-value,
|
|
.stat-card.card-dbc .stat-value,
|
|
.stat-card.card-all .stat-value,
|
|
.stat-card.card-transfer .stat-value {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.stat-img-wrapper {
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 18px;
|
|
display: flex;
|
|
height: 4.8rem;
|
|
justify-content: center;
|
|
width: 4.8rem;
|
|
padding: 0.5rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
flex-shrink: 0;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.stat-card:hover .stat-img-wrapper {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
.stat-img {
|
|
height: 100%;
|
|
object-fit: contain;
|
|
width: 100%;
|
|
}
|
|
|
|
.summary-card {
|
|
background: var(--app-surface);
|
|
color: var(--app-text);
|
|
}
|
|
|
|
.table {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.table th {
|
|
background-color: var(--app-surface-soft);
|
|
color: #334155;
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table td {
|
|
color: #243044;
|
|
}
|
|
|
|
.table-hover tbody tr:hover {
|
|
background-color: #f2f7fd;
|
|
}
|
|
|
|
.table-responsive {
|
|
border: 1px solid var(--app-border);
|
|
border-radius: var(--app-radius);
|
|
}
|
|
|
|
.table-responsive .table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.btn {
|
|
border-radius: 7px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-primary,
|
|
.bg-primary {
|
|
background-color: var(--app-primary) !important;
|
|
border-color: var(--app-primary) !important;
|
|
}
|
|
|
|
.btn-success,
|
|
.bg-success {
|
|
background-color: var(--app-success) !important;
|
|
border-color: var(--app-success) !important;
|
|
}
|
|
|
|
.btn-warning,
|
|
.bg-warning {
|
|
background-color: #f6c453 !important;
|
|
border-color: #f6c453 !important;
|
|
}
|
|
|
|
.btn-info,
|
|
.bg-info {
|
|
background-color: #2c7fb8 !important;
|
|
border-color: #2c7fb8 !important;
|
|
}
|
|
|
|
.form-control,
|
|
.form-select {
|
|
border-color: #cfd9e6;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
border-color: var(--app-primary);
|
|
box-shadow: 0 0 0 0.22rem rgba(20, 85, 163, 0.14);
|
|
}
|
|
|
|
.badge {
|
|
border-radius: 999px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.badge-credit {
|
|
background-color: var(--app-primary-soft);
|
|
color: var(--app-primary);
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.curriculum-tree {
|
|
padding-left: 20px;
|
|
border-left: 3px solid var(--app-primary);
|
|
}
|
|
|
|
.course-item {
|
|
border-left: 3px solid transparent;
|
|
border-radius: 6px;
|
|
transition: background-color 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
.course-item:hover {
|
|
background-color: #eef5ff;
|
|
border-left-color: var(--app-primary);
|
|
}
|
|
|
|
.status-badge {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.soft-panel {
|
|
background: var(--app-surface-soft);
|
|
border: 1px solid var(--app-border);
|
|
border-radius: var(--app-radius);
|
|
padding: 1rem;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.app-shell {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.page-heading {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-header.d-flex {
|
|
align-items: flex-start !important;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.8rem;
|
|
}
|
|
}
|