|
|
|
|
|
|
| .dashboard-page {
|
| padding: var(--spacing-6);
|
| }
|
|
|
| .dashboard-grid {
|
| display: grid;
|
| grid-template-columns: repeat(1, 1fr);
|
| gap: var(--spacing-6);
|
| margin-bottom: var(--spacing-6);
|
| }
|
|
|
| @media (min-width: 768px) {
|
| .dashboard-grid {
|
| grid-template-columns: repeat(2, 1fr);
|
| }
|
| }
|
|
|
| @media (min-width: 1024px) {
|
| .dashboard-grid {
|
| grid-template-columns: repeat(4, 1fr);
|
| }
|
| }
|
|
|
| .dashboard-card {
|
| background: var(--color-neutral-0);
|
| border-radius: var(--radius-lg);
|
| padding: var(--spacing-6);
|
| box-shadow: var(--shadow-md);
|
| transition: all var(--transition-duration-300) var(--transition-timing-function-ease);
|
| }
|
|
|
| .dashboard-card:hover {
|
| transform: translateY(-4px);
|
| box-shadow: var(--shadow-xl);
|
| }
|
|
|
| .dashboard-card-icon {
|
| width: 3rem;
|
| height: 3rem;
|
| border-radius: var(--radius-lg);
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| margin-bottom: var(--spacing-4);
|
| font-size: 1.5rem;
|
| }
|
|
|
| .dashboard-card-icon.primary {
|
| background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-200));
|
| color: var(--color-primary-600);
|
| }
|
|
|
| .dashboard-card-icon.secondary {
|
| background: linear-gradient(135deg, var(--color-secondary-100), var(--color-secondary-200));
|
| color: var(--color-secondary-600);
|
| }
|
|
|
| .dashboard-card-icon.success {
|
| background: linear-gradient(135deg, color-mix(in srgb, var(--color-success) 20%, white), color-mix(in srgb, var(--color-success) 40%, white));
|
| color: var(--color-success);
|
| }
|
|
|
| .dashboard-card-title {
|
| font-size: var(--text-sm);
|
| font-weight: var(--font-weight-medium);
|
| color: var(--color-neutral-500);
|
| margin-bottom: var(--spacing-2);
|
| }
|
|
|
| .dashboard-card-value {
|
| font-size: var(--text-2xl);
|
| font-weight: var(--font-weight-bold);
|
| color: var(--color-neutral-900);
|
| margin-bottom: var(--spacing-2);
|
| }
|
|
|
| .dashboard-card-change {
|
| font-size: var(--text-sm);
|
| display: flex;
|
| align-items: center;
|
| gap: var(--spacing-1);
|
| }
|
|
|
| .dashboard-card-change.positive {
|
| color: var(--color-success);
|
| }
|
|
|
| .dashboard-card-change.negative {
|
| color: var(--color-error);
|
| }
|
|
|
|
|
| .dashboard-charts {
|
| display: grid;
|
| grid-template-columns: repeat(1, 1fr);
|
| gap: var(--spacing-6);
|
| margin-bottom: var(--spacing-6);
|
| }
|
|
|
| @media (min-width: 1024px) {
|
| .dashboard-charts {
|
| grid-template-columns: repeat(2, 1fr);
|
| }
|
| }
|
|
|
| .chart-card {
|
| background: var(--color-neutral-0);
|
| border-radius: var(--radius-lg);
|
| padding: var(--spacing-6);
|
| box-shadow: var(--shadow-md);
|
| }
|
|
|
| .chart-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| margin-bottom: var(--spacing-4);
|
| }
|
|
|
| .chart-title {
|
| font-size: var(--text-lg);
|
| font-weight: var(--font-weight-semibold);
|
| color: var(--color-neutral-900);
|
| margin: 0;
|
| }
|
|
|
| .chart-actions {
|
| display: flex;
|
| gap: var(--spacing-2);
|
| }
|
|
|
|
|
| .recent-activity {
|
| background: var(--color-neutral-0);
|
| border-radius: var(--radius-lg);
|
| padding: var(--spacing-6);
|
| box-shadow: var(--shadow-md);
|
| }
|
|
|
| .activity-list {
|
| list-style: none;
|
| padding: 0;
|
| margin: 0;
|
| }
|
|
|
| .activity-item {
|
| display: flex;
|
| align-items: flex-start;
|
| gap: var(--spacing-3);
|
| padding: var(--spacing-3) 0;
|
| border-bottom: 1px solid var(--color-neutral-200);
|
| }
|
|
|
| .activity-item:last-child {
|
| border-bottom: none;
|
| }
|
|
|
| .activity-icon {
|
| width: 2.5rem;
|
| height: 2.5rem;
|
| border-radius: var(--radius-full);
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| flex-shrink: 0;
|
| }
|
|
|
| .activity-icon.success {
|
| background: color-mix(in srgb, var(--color-success) 20%, white);
|
| color: var(--color-success);
|
| }
|
|
|
| .activity-icon.warning {
|
| background: color-mix(in srgb, var(--color-warning) 20%, white);
|
| color: var(--color-warning);
|
| }
|
|
|
| .activity-icon.info {
|
| background: color-mix(in srgb, var(--color-info) 20%, white);
|
| color: var(--color-info);
|
| }
|
|
|
| .activity-content {
|
| flex: 1;
|
| }
|
|
|
| .activity-title {
|
| font-size: var(--text-sm);
|
| font-weight: var(--font-weight-medium);
|
| color: var(--color-neutral-900);
|
| margin-bottom: var(--spacing-1);
|
| }
|
|
|
| .activity-description {
|
| font-size: var(--text-sm);
|
| color: var(--color-neutral-500);
|
| margin-bottom: var(--spacing-2);
|
| }
|
|
|
| .activity-time {
|
| font-size: var(--text-xs);
|
| color: var(--color-neutral-400);
|
| }
|
|
|
|
|
| .museums-page {
|
| padding: var(--spacing-6);
|
| }
|
|
|
| .page-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| margin-bottom: var(--spacing-6);
|
| padding-bottom: var(--spacing-4);
|
| border-bottom: 1px solid var(--color-neutral-200);
|
| }
|
|
|
| .page-title {
|
| font-size: var(--text-3xl);
|
| font-weight: var(--font-weight-bold);
|
| color: var(--color-neutral-900);
|
| margin: 0;
|
| }
|
|
|
| .page-subtitle {
|
| font-size: var(--text-lg);
|
| color: var(--color-neutral-500);
|
| margin: var(--spacing-2) 0 0;
|
| }
|
|
|
| .page-actions {
|
| display: flex;
|
| gap: var(--spacing-3);
|
| }
|
|
|
|
|
| .museums-grid {
|
| display: grid;
|
| grid-template-columns: repeat(1, 1fr);
|
| gap: var(--spacing-6);
|
| }
|
|
|
| @media (min-width: 640px) {
|
| .museums-grid {
|
| grid-template-columns: repeat(2, 1fr);
|
| }
|
| }
|
|
|
| @media (min-width: 1024px) {
|
| .museums-grid {
|
| grid-template-columns: repeat(3, 1fr);
|
| }
|
| }
|
|
|
| .museum-card {
|
| background: var(--color-neutral-0);
|
| border-radius: var(--radius-xl);
|
| overflow: hidden;
|
| box-shadow: var(--shadow-lg);
|
| transition: all var(--transition-duration-300) var(--transition-timing-function-ease);
|
| }
|
|
|
| .museum-card:hover {
|
| transform: translateY(-8px);
|
| box-shadow: var(--shadow-2xl);
|
| }
|
|
|
| .museum-card-image {
|
| height: 200px;
|
| background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-300));
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .museum-card-image img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| transition: transform var(--transition-duration-500) var(--transition-timing-function-ease);
|
| }
|
|
|
| .museum-card:hover .museum-card-image img {
|
| transform: scale(1.1);
|
| }
|
|
|
| .museum-card-badge {
|
| position: absolute;
|
| top: var(--spacing-4);
|
| left: var(--spacing-4);
|
| background: var(--color-secondary-500);
|
| color: white;
|
| padding: var(--spacing-1) var(--spacing-3);
|
| border-radius: var(--radius-full);
|
| font-size: var(--text-xs);
|
| font-weight: var(--font-weight-bold);
|
| }
|
|
|
| .museum-card-content {
|
| padding: var(--spacing-6);
|
| }
|
|
|
| .museum-card-title {
|
| font-size: var(--text-xl);
|
| font-weight: var(--font-weight-bold);
|
| color: var(--color-neutral-900);
|
| margin-bottom: var(--spacing-2);
|
| }
|
|
|
| .museum-card-location {
|
| display: flex;
|
| align-items: center;
|
| gap: var(--spacing-2);
|
| color: var(--color-neutral-500);
|
| margin-bottom: var(--spacing-4);
|
| font-size: var(--text-sm);
|
| }
|
|
|
| .museum-card-description {
|
| color: var(--color-neutral-600);
|
| line-height: var(--line-height-relaxed);
|
| margin-bottom: var(--spacing-4);
|
| display: -webkit-box;
|
| -webkit-line-clamp: 3;
|
| -webkit-box-orient: vertical;
|
| overflow: hidden;
|
| }
|
|
|
| .museum-card-stats {
|
| display: flex;
|
| gap: var(--spacing-4);
|
| margin-bottom: var(--spacing-4);
|
| padding-bottom: var(--spacing-4);
|
| border-bottom: 1px solid var(--color-neutral-200);
|
| }
|
|
|
| .museum-stat {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| gap: var(--spacing-1);
|
| }
|
|
|
| .museum-stat-value {
|
| font-size: var(--text-lg);
|
| font-weight: var(--font-weight-bold);
|
| color: var(--color-neutral-900);
|
| }
|
|
|
| .museum-stat-label {
|
| font-size: var(--text-xs);
|
| color: var(--color-neutral-500);
|
| text-transform: uppercase;
|
| letter-spacing: 0.5px;
|
| }
|
|
|
| .museum-card-actions {
|
| display: flex;
|
| gap: var(--spacing-2);
|
| }
|
|
|
|
|
| .museum-details-page {
|
| padding: var(--spacing-6);
|
| }
|
|
|
| .museum-header {
|
| display: flex;
|
| align-items: flex-start;
|
| gap: var(--spacing-6);
|
| margin-bottom: var(--spacing-6);
|
| padding-bottom: var(--spacing-6);
|
| border-bottom: 1px solid var(--color-neutral-200);
|
| }
|
|
|
| @media (max-width: 768px) {
|
| .museum-header {
|
| flex-direction: column;
|
| }
|
| }
|
|
|
| .museum-cover {
|
| width: 300px;
|
| height: 200px;
|
| border-radius: var(--radius-xl);
|
| overflow: hidden;
|
| flex-shrink: 0;
|
| }
|
|
|
| .museum-cover img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| }
|
|
|
| .museum-info {
|
| flex: 1;
|
| }
|
|
|
| .museum-title {
|
| font-size: var(--text-4xl);
|
| font-weight: var(--font-weight-bold);
|
| color: var(--color-neutral-900);
|
| margin-bottom: var(--spacing-2);
|
| }
|
|
|
| .museum-meta {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: var(--spacing-4);
|
| margin-bottom: var(--spacing-4);
|
| }
|
|
|
| .museum-meta-item {
|
| display: flex;
|
| align-items: center;
|
| gap: var(--spacing-2);
|
| color: var(--color-neutral-500);
|
| }
|
|
|
| .museum-description {
|
| font-size: var(--text-lg);
|
| line-height: var(--line-height-relaxed);
|
| color: var(--color-neutral-700);
|
| }
|
|
|
| .museum-sections {
|
| display: grid;
|
| grid-template-columns: repeat(1, 1fr);
|
| gap: var(--spacing-6);
|
| }
|
|
|
| @media (min-width: 1024px) {
|
| .museum-sections {
|
| grid-template-columns: 2fr 1fr;
|
| }
|
| }
|
|
|
| .museum-section {
|
| background: var(--color-neutral-0);
|
| border-radius: var(--radius-lg);
|
| padding: var(--spacing-6);
|
| box-shadow: var(--shadow-md);
|
| }
|
|
|
| .museum-section-title {
|
| font-size: var(--text-xl);
|
| font-weight: var(--font-weight-semibold);
|
| color: var(--color-neutral-900);
|
| margin-bottom: var(--spacing-4);
|
| padding-bottom: var(--spacing-2);
|
| border-bottom: 2px solid var(--color-primary-500);
|
| }
|
|
|
|
|
| .exhibits-grid {
|
| display: grid;
|
| grid-template-columns: repeat(1, 1fr);
|
| gap: var(--spacing-4);
|
| }
|
|
|
| @media (min-width: 640px) {
|
| .exhibits-grid {
|
| grid-template-columns: repeat(2, 1fr);
|
| }
|
| }
|
|
|
| @media (min-width: 1024px) {
|
| .exhibits-grid {
|
| grid-template-columns: repeat(3, 1fr);
|
| }
|
| }
|
|
|
| .exhibit-card {
|
| background: var(--color-neutral-50);
|
| border-radius: var(--radius-lg);
|
| padding: var(--spacing-4);
|
| transition: all var(--transition-duration-200) var(--transition-timing-function-ease);
|
| border: 1px solid transparent;
|
| }
|
|
|
| .exhibit-card:hover {
|
| background: var(--color-neutral-0);
|
| border-color: var(--color-neutral-200);
|
| transform: translateY(-2px);
|
| box-shadow: var(--shadow-md);
|
| }
|
|
|
| .exhibit-card-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: flex-start;
|
| margin-bottom: var(--spacing-3);
|
| }
|
|
|
| .exhibit-card-title {
|
| font-size: var(--text-lg);
|
| font-weight: var(--font-weight-semibold);
|
| color: var(--color-neutral-900);
|
| margin: 0;
|
| }
|
|
|
| .exhibit-card-badge {
|
| background: var(--color-primary-100);
|
| color: var(--color-primary-700);
|
| padding: 2px 8px;
|
| border-radius: var(--radius-full);
|
| font-size: var(--text-xs);
|
| font-weight: var(--font-weight-semibold);
|
| }
|
|
|
| .exhibit-card-description {
|
| color: var(--color-neutral-600);
|
| font-size: var(--text-sm);
|
| line-height: var(--line-height-relaxed);
|
| margin-bottom: var(--spacing-3);
|
| display: -webkit-box;
|
| -webkit-line-clamp: 2;
|
| -webkit-box-orient: vertical;
|
| overflow: hidden;
|
| }
|
|
|
| .exhibit-card-footer {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| }
|
|
|
| .exhibit-card-date {
|
| font-size: var(--text-xs);
|
| color: var(--color-neutral-500);
|
| }
|
|
|
|
|
| .exhibits-page {
|
| padding: var(--spacing-6);
|
| }
|
|
|
| .exhibits-toolbar {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| margin-bottom: var(--spacing-6);
|
| padding: var(--spacing-4);
|
| background: var(--color-neutral-0);
|
| border-radius: var(--radius-lg);
|
| box-shadow: var(--shadow-sm);
|
| }
|
|
|
| .exhibits-search {
|
| position: relative;
|
| width: 300px;
|
| }
|
|
|
| .exhibits-search input {
|
| width: 100%;
|
| padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-12);
|
| border: 1px solid var(--color-neutral-300);
|
| border-radius: var(--radius-md);
|
| background: var(--color-neutral-50);
|
| transition: all var(--transition-duration-200) var(--transition-timing-function-ease);
|
| }
|
|
|
| .exhibits-search input:focus {
|
| border-color: var(--color-primary-500);
|
| background: var(--color-neutral-0);
|
| box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
|
| }
|
|
|
| .exhibits-search-icon {
|
| position: absolute;
|
| right: var(--spacing-4);
|
| top: 50%;
|
| transform: translateY(-50%);
|
| color: var(--color-neutral-400);
|
| }
|
|
|
| .exhibits-filters {
|
| display: flex;
|
| gap: var(--spacing-3);
|
| }
|
|
|
| .filter-group {
|
| display: flex;
|
| align-items: center;
|
| gap: var(--spacing-2);
|
| }
|
|
|
| .filter-label {
|
| font-size: var(--text-sm);
|
| font-weight: var(--font-weight-medium);
|
| color: var(--color-neutral-600);
|
| }
|
|
|
| .filter-select {
|
| padding: var(--spacing-2) var(--spacing-3);
|
| border: 1px solid var(--color-neutral-300);
|
| border-radius: var(--radius-md);
|
| background: var(--color-neutral-50);
|
| font-size: var(--text-sm);
|
| color: var(--color-neutral-700);
|
| transition: all var(--transition-duration-200) var(--transition-timing-function-ease);
|
| }
|
|
|
| .filter-select:focus {
|
| border-color: var(--color-primary-500);
|
| background: var(--color-neutral-0);
|
| outline: none;
|
| box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
|
| }
|
|
|
|
|
| .exhibits-table-container {
|
| background: var(--color-neutral-0);
|
| border-radius: var(--radius-lg);
|
| overflow: hidden;
|
| box-shadow: var(--shadow-md);
|
| }
|
|
|
| .exhibits-table {
|
| width: 100%;
|
| border-collapse: collapse;
|
| }
|
|
|
| .exhibits-table thead {
|
| background: var(--color-neutral-50);
|
| }
|
|
|
| .exhibits-table th {
|
| padding: var(--spacing-4);
|
| text-align: right;
|
| font-weight: var(--font-weight-semibold);
|
| color: var(--color-neutral-700);
|
| border-bottom: 2px solid var(--color-neutral-200);
|
| }
|
|
|
| .exhibits-table td {
|
| padding: var(--spacing-4);
|
| border-bottom: 1px solid var(--color-neutral-200);
|
| vertical-align: middle;
|
| }
|
|
|
| .exhibits-table tbody tr {
|
| transition: all var(--transition-duration-200) var(--transition-timing-function-ease);
|
| }
|
|
|
| .exhibits-table tbody tr:hover {
|
| background: var(--color-neutral-50);
|
| }
|
|
|
| .exhibit-row-image {
|
| width: 60px;
|
| height: 60px;
|
| border-radius: var(--radius-md);
|
| overflow: hidden;
|
| }
|
|
|
| .exhibit-row-image img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| }
|
|
|
| .exhibit-row-info {
|
| display: flex;
|
| flex-direction: column;
|
| gap: var(--spacing-1);
|
| }
|
|
|
| .exhibit-row-title {
|
| font-weight: var(--font-weight-semibold);
|
| color: var(--color-neutral-900);
|
| }
|
|
|
| .exhibit-row-museum {
|
| font-size: var(--text-sm);
|
| color: var(--color-neutral-500);
|
| }
|
|
|
| .exhibit-row-actions {
|
| display: flex;
|
| gap: var(--spacing-2);
|
| opacity: 0;
|
| transition: opacity var(--transition-duration-200) var(--transition-timing-function-ease);
|
| }
|
|
|
| .exhibits-table tbody tr:hover .exhibit-row-actions {
|
| opacity: 1;
|
| }
|
|
|
|
|
| .exhibit-details-page {
|
| padding: var(--spacing-6);
|
| }
|
|
|
| .exhibit-gallery {
|
| display: grid;
|
| grid-template-columns: repeat(1, 1fr);
|
| gap: var(--spacing-4);
|
| margin-bottom: var(--spacing-6);
|
| }
|
|
|
| @media (min-width: 768px) {
|
| .exhibit-gallery {
|
| grid-template-columns: 2fr 1fr;
|
| }
|
| }
|
|
|
| .exhibit-main-image {
|
| height: 400px;
|
| border-radius: var(--radius-xl);
|
| overflow: hidden;
|
| }
|
|
|
| .exhibit-main-image img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| }
|
|
|
| .exhibit-thumbnails {
|
| display: grid;
|
| grid-template-columns: repeat(2, 1fr);
|
| gap: var(--spacing-4);
|
| }
|
|
|
| @media (min-width: 768px) {
|
| .exhibit-thumbnails {
|
| grid-template-columns: 1fr;
|
| }
|
| }
|
|
|
| .exhibit-thumbnail {
|
| height: 120px;
|
| border-radius: var(--radius-lg);
|
| overflow: hidden;
|
| cursor: pointer;
|
| transition: all var(--transition-duration-200) var(--transition-timing-function-ease);
|
| border: 2px solid transparent;
|
| }
|
|
|
| .exhibit-thumbnail:hover {
|
| transform: scale(1.05);
|
| }
|
|
|
| .exhibit-thumbnail.active {
|
| border-color: var(--color-primary-500);
|
| }
|
|
|
| .exhibit-thumbnail img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| }
|
|
|
| .exhibit-content {
|
| display: grid;
|
| grid-template-columns: repeat(1, 1fr);
|
| gap: var(--spacing-6);
|
| }
|
|
|
| @media (min-width: 1024px) {
|
| .exhibit-content {
|
| grid-template-columns: 2fr 1fr;
|
| }
|
| }
|
|
|
| .exhibit-info {
|
| background: var(--color-neutral-0);
|
| border-radius: var(--radius-lg);
|
| padding: var(--spacing-6);
|
| box-shadow: var(--shadow-md);
|
| }
|
|
|
| .exhibit-info-grid {
|
| display: grid;
|
| grid-template-columns: repeat(1, 1fr);
|
| gap: var(--spacing-4);
|
| }
|
|
|
| @media (min-width: 768px) {
|
| .exhibit-info-grid {
|
| grid-template-columns: repeat(2, 1fr);
|
| }
|
| }
|
|
|
| .info-item {
|
| display: flex;
|
| flex-direction: column;
|
| gap: var(--spacing-2);
|
| }
|
|
|
| .info-label {
|
| font-size: var(--text-sm);
|
| font-weight: var(--font-weight-medium);
|
| color: var(--color-neutral-500);
|
| }
|
|
|
| .info-value {
|
| font-size: var(--text-base);
|
| color: var(--color-neutral-900);
|
| }
|
|
|
| .info-value.badge {
|
| width: fit-content;
|
| }
|
|
|
| .exhibit-sidebar {
|
| display: flex;
|
| flex-direction: column;
|
| gap: var(--spacing-6);
|
| }
|
|
|
| .exhibit-actions {
|
| background: var(--color-neutral-0);
|
| border-radius: var(--radius-lg);
|
| padding: var(--spacing-6);
|
| box-shadow: var(--shadow-md);
|
| }
|
|
|
| .exhibit-actions-title {
|
| font-size: var(--text-lg);
|
| font-weight: var(--font-weight-semibold);
|
| color: var(--color-neutral-900);
|
| margin-bottom: var(--spacing-4);
|
| }
|
|
|
| .exhibit-actions-list {
|
| display: flex;
|
| flex-direction: column;
|
| gap: var(--spacing-3);
|
| }
|
|
|
| .exhibit-stats {
|
| background: var(--color-neutral-0);
|
| border-radius: var(--radius-lg);
|
| padding: var(--spacing-6);
|
| box-shadow: var(--shadow-md);
|
| }
|
|
|
| .exhibit-stats-title {
|
| font-size: var(--text-lg);
|
| font-weight: var(--font-weight-semibold);
|
| color: var(--color-neutral-900);
|
| margin-bottom: var(--spacing-4);
|
| }
|
|
|
| .exhibit-stats-grid {
|
| display: grid;
|
| grid-template-columns: repeat(2, 1fr);
|
| gap: var(--spacing-4);
|
| }
|
|
|
| .exhibit-stat {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| gap: var(--spacing-1);
|
| padding: var(--spacing-3);
|
| background: var(--color-neutral-50);
|
| border-radius: var(--radius-md);
|
| }
|
|
|
| .exhibit-stat-value {
|
| font-size: var(--text-2xl);
|
| font-weight: var(--font-weight-bold);
|
| color: var(--color-neutral-900);
|
| }
|
|
|
| .exhibit-stat-label {
|
| font-size: var(--text-xs);
|
| color: var(--color-neutral-500);
|
| text-align: center;
|
| text-transform: uppercase;
|
| letter-spacing: 0.5px;
|
| }
|
|
|
|
|
| .form-page {
|
| max-width: 800px;
|
| margin: 0 auto;
|
| padding: var(--spacing-6);
|
| }
|
|
|
| .form-header {
|
| margin-bottom: var(--spacing-6);
|
| text-align: center;
|
| }
|
|
|
| .form-header-title {
|
| font-size: var(--text-3xl);
|
| font-weight: var(--font-weight-bold);
|
| color: var(--color-neutral-900);
|
| margin-bottom: var(--spacing-2);
|
| }
|
|
|
| .form-header-subtitle {
|
| font-size: var(--text-lg);
|
| color: var(--color-neutral-500);
|
| }
|
|
|
| .form-card {
|
| background: var(--color-neutral-0);
|
| border-radius: var(--radius-xl);
|
| padding: var(--spacing-8);
|
| box-shadow: var(--shadow-lg);
|
| }
|
|
|
| .form-section {
|
| margin-bottom: var(--spacing-6);
|
| padding-bottom: var(--spacing-6);
|
| border-bottom: 1px solid var(--color-neutral-200);
|
| }
|
|
|
| .form-section:last-child {
|
| margin-bottom: 0;
|
| padding-bottom: 0;
|
| border-bottom: none;
|
| }
|
|
|
| .form-section-title {
|
| font-size: var(--text-xl);
|
| font-weight: var(--font-weight-semibold);
|
| color: var(--color-neutral-900);
|
| margin-bottom: var(--spacing-4);
|
| display: flex;
|
| align-items: center;
|
| gap: var(--spacing-2);
|
| }
|
|
|
| .form-section-title::before {
|
| content: '';
|
| width: 4px;
|
| height: 1.5em;
|
| background: linear-gradient(to bottom, var(--color-primary-500), var(--color-secondary-500));
|
| border-radius: var(--radius-full);
|
| }
|
|
|
| .form-row {
|
| display: grid;
|
| grid-template-columns: repeat(1, 1fr);
|
| gap: var(--spacing-4);
|
| margin-bottom: var(--spacing-4);
|
| }
|
|
|
| @media (min-width: 768px) {
|
| .form-row {
|
| grid-template-columns: repeat(2, 1fr);
|
| }
|
| }
|
|
|
| .form-actions {
|
| display: flex;
|
| justify-content: flex-end;
|
| gap: var(--spacing-3);
|
| margin-top: var(--spacing-8);
|
| padding-top: var(--spacing-6);
|
| border-top: 1px solid var(--color-neutral-200);
|
| }
|
|
|
|
|
| .file-upload {
|
| border: 2px dashed var(--color-neutral-300);
|
| border-radius: var(--radius-lg);
|
| padding: var(--spacing-8);
|
| text-align: center;
|
| transition: all var(--transition-duration-200) var(--transition-timing-function-ease);
|
| cursor: pointer;
|
| }
|
|
|
| .file-upload:hover {
|
| border-color: var(--color-primary-500);
|
| background: var(--color-primary-50);
|
| }
|
|
|
| .file-upload-icon {
|
| font-size: 3rem;
|
| color: var(--color-neutral-400);
|
| margin-bottom: var(--spacing-3);
|
| transition: color var(--transition-duration-200) var(--transition-timing-function-ease);
|
| }
|
|
|
| .file-upload:hover .file-upload-icon {
|
| color: var(--color-primary-500);
|
| }
|
|
|
| .file-upload-text {
|
| font-size: var(--text-lg);
|
| font-weight: var(--font-weight-medium);
|
| color: var(--color-neutral-700);
|
| margin-bottom: var(--spacing-2);
|
| }
|
|
|
| .file-upload-hint {
|
| font-size: var(--text-sm);
|
| color: var(--color-neutral-500);
|
| }
|
|
|
| .file-upload input[type="file"] {
|
| display: none;
|
| }
|
|
|
|
|
| .image-preview {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
| gap: var(--spacing-3);
|
| margin-top: var(--spacing-4);
|
| }
|
|
|
| .preview-item {
|
| position: relative;
|
| width: 120px;
|
| height: 120px;
|
| border-radius: var(--radius-md);
|
| overflow: hidden;
|
| }
|
|
|
| .preview-item img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| }
|
|
|
| .preview-remove {
|
| position: absolute;
|
| top: 5px;
|
| left: 5px;
|
| width: 24px;
|
| height: 24px;
|
| background: var(--color-error);
|
| color: white;
|
| border: none;
|
| border-radius: var(--radius-full);
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| cursor: pointer;
|
| opacity: 0;
|
| transition: opacity var(--transition-duration-200) var(--transition-timing-function-ease);
|
| }
|
|
|
| .preview-item:hover .preview-remove {
|
| opacity: 1;
|
| }
|
|
|
|
|
| .loading-page {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| min-height: 100vh;
|
| padding: var(--spacing-6);
|
| text-align: center;
|
| }
|
|
|
| .loading-spinner-large {
|
| width: 4rem;
|
| height: 4rem;
|
| border: 0.5rem solid var(--color-neutral-200);
|
| border-right-color: var(--color-primary-500);
|
| border-radius: var(--radius-full);
|
| animation: spin 1s linear infinite;
|
| margin-bottom: var(--spacing-4);
|
| }
|
|
|
| .loading-text {
|
| font-size: var(--text-lg);
|
| color: var(--color-neutral-600);
|
| margin-bottom: var(--spacing-2);
|
| }
|
|
|
| .loading-subtext {
|
| font-size: var(--text-sm);
|
| color: var(--color-neutral-500);
|
| }
|
|
|
|
|
| .skeleton {
|
| background: linear-gradient(90deg,
|
| var(--color-neutral-200) 25%,
|
| var(--color-neutral-300) 50%,
|
| var(--color-neutral-200) 75%
|
| );
|
| background-size: 200% 100%;
|
| animation: shimmer 1.5s infinite;
|
| }
|
|
|
| .skeleton-text {
|
| height: 1em;
|
| border-radius: var(--radius-sm);
|
| margin-bottom: 0.5em;
|
| }
|
|
|
| .skeleton-text:last-child {
|
| margin-bottom: 0;
|
| width: 80%;
|
| }
|
|
|
| .skeleton-circle {
|
| width: 3rem;
|
| height: 3rem;
|
| border-radius: var(--radius-full);
|
| }
|
|
|
| .skeleton-card {
|
| border-radius: var(--radius-lg);
|
| padding: var(--spacing-6);
|
| }
|
|
|
| .skeleton-card .skeleton-text:first-child {
|
| width: 60%;
|
| }
|
|
|
| .skeleton-card .skeleton-text:nth-child(2) {
|
| width: 40%;
|
| }
|
|
|
| @keyframes shimmer {
|
| 0% { background-position: 200% 0; }
|
| 100% { background-position: -200% 0; }
|
| }
|
|
|
|
|
| .empty-state {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| padding: var(--spacing-12) var(--spacing-6);
|
| text-align: center;
|
| }
|
|
|
| .empty-state-icon {
|
| font-size: 4rem;
|
| color: var(--color-neutral-300);
|
| margin-bottom: var(--spacing-4);
|
| }
|
|
|
| .empty-state-title {
|
| font-size: var(--text-2xl);
|
| font-weight: var(--font-weight-semibold);
|
| color: var(--color-neutral-700);
|
| margin-bottom: var(--spacing-2);
|
| }
|
|
|
| .empty-state-description {
|
| font-size: var(--text-lg);
|
| color: var(--color-neutral-500);
|
| margin-bottom: var(--spacing-6);
|
| max-width: 400px;
|
| }
|
|
|
|
|
| .error-state {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| padding: var(--spacing-12) var(--spacing-6);
|
| text-align: center;
|
| }
|
|
|
| .error-state-icon {
|
| font-size: 4rem;
|
| color: var(--color-error);
|
| margin-bottom: var(--spacing-4);
|
| }
|
|
|
| .error-state-title {
|
| font-size: var(--text-2xl);
|
| font-weight: var(--font-weight-semibold);
|
| color: var(--color-neutral-700);
|
| margin-bottom: var(--spacing-2);
|
| }
|
|
|
| .error-state-description {
|
| font-size: var(--text-lg);
|
| color: var(--color-neutral-500);
|
| margin-bottom: var(--spacing-6);
|
| max-width: 400px;
|
| }
|
|
|
|
|
| @media (max-width: 768px) {
|
| .dashboard-page,
|
| .museums-page,
|
| .exhibits-page,
|
| .exhibit-details-page,
|
| .form-page {
|
| padding: var(--spacing-4);
|
| }
|
|
|
| .page-header {
|
| flex-direction: column;
|
| align-items: flex-start;
|
| gap: var(--spacing-4);
|
| }
|
|
|
| .page-actions {
|
| width: 100%;
|
| justify-content: flex-end;
|
| }
|
|
|
| .exhibits-toolbar {
|
| flex-direction: column;
|
| gap: var(--spacing-4);
|
| align-items: stretch;
|
| }
|
|
|
| .exhibits-search {
|
| width: 100%;
|
| }
|
|
|
| .exhibits-filters {
|
| flex-wrap: wrap;
|
| }
|
|
|
| .form-card {
|
| padding: var(--spacing-6);
|
| }
|
|
|
| .form-actions {
|
| flex-direction: column;
|
| }
|
|
|
| .form-actions .btn {
|
| width: 100%;
|
| }
|
| }
|
|
|
| @media (max-width: 640px) {
|
| .dashboard-card,
|
| .chart-card,
|
| .recent-activity,
|
| .museum-card,
|
| .museum-section,
|
| .exhibit-info,
|
| .exhibit-actions,
|
| .exhibit-stats {
|
| padding: var(--spacing-4);
|
| }
|
|
|
| .museum-card-stats {
|
| flex-wrap: wrap;
|
| }
|
|
|
| .exhibits-table {
|
| display: block;
|
| overflow-x: auto;
|
| }
|
|
|
| .exhibit-gallery {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .exhibit-thumbnails {
|
| grid-template-columns: repeat(3, 1fr);
|
| }
|
| }
|
|
|
|
|
| @media print {
|
| .dashboard-page,
|
| .museums-page,
|
| .exhibits-page,
|
| .exhibit-details-page,
|
| .form-page {
|
| padding: 0 !important;
|
| }
|
|
|
| .page-header,
|
| .exhibits-toolbar,
|
| .form-actions,
|
| .exhibit-actions {
|
| display: none !important;
|
| }
|
|
|
| .dashboard-card,
|
| .chart-card,
|
| .recent-activity,
|
| .museum-card,
|
| .museum-section,
|
| .exhibit-info,
|
| .exhibit-stats,
|
| .form-card {
|
| box-shadow: none !important;
|
| border: 1px solid var(--color-neutral-300) !important;
|
| page-break-inside: avoid;
|
| }
|
|
|
| .exhibits-table {
|
| border: 1px solid var(--color-neutral-300);
|
| }
|
|
|
| .exhibits-table th,
|
| .exhibits-table td {
|
| border: 1px solid var(--color-neutral-300);
|
| }
|
|
|
| .btn {
|
| display: none !important;
|
| }
|
| } |
