/* * Κοινά CSS στυλ για το Σύστημα Νεκροταφείου * Χρήση: ή include στο */ /* Reset και βασικά στυλ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; line-height: 1.6; } /* Container και layout */ .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .content-wrapper { padding: 20px; } /* Τυπογραφία */ h1, h2, h3, h4 { color: #2c3e50; margin-bottom: 15px; } h1 { font-size: 28px; font-weight: bold; } h2 { font-size: 22px; } h3 { font-size: 18px; } p { color: #666; margin-bottom: 15px; line-height: 1.5; } /* Κουμπιά */ .btn { background: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; text-decoration: none; display: inline-block; transition: background-color 0.3s; } .btn:hover { background: #45a049; } .btn-primary { background: #3498db; } .btn-primary:hover { background: #2980b9; } .btn-secondary { background: #95a5a6; } .btn-secondary:hover { background: #7f8c8d; } .btn-danger { background: #e74c3c; } .btn-danger:hover { background: #c0392b; } /* Φόρμες */ .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; font-weight: bold; color: #333; } input[type="text"], input[type="password"], input[type="email"], select, textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; box-sizing: border-box; transition: border-color 0.3s; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus { outline: none; border-color: #3498db; box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); } /* Cards */ .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-left: 4px solid #3498db; margin-bottom: 20px; } .card h3 { color: #2c3e50; margin-bottom: 10px; } .card p { color: #7f8c8d; line-height: 1.5; } .dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; } /* Quick Actions */ .quick-actions { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 20px; } .action-btn { background: #3498db; color: white; padding: 12px 20px; border: none; border-radius: 5px; text-decoration: none; font-size: 14px; transition: background-color 0.3s; display: inline-flex; align-items: center; gap: 8px; } .action-btn:hover { background: #2980b9; } .action-btn.secondary { background: #95a5a6; } .action-btn.secondary:hover { background: #7f8c8d; } /* Μηνύματα */ .success { background: #d4edda; color: #155724; padding: 15px; border-radius: 5px; border: 1px solid #c3e6cb; margin: 15px 0; } .error { background: #f8d7da; color: #721c24; padding: 15px; border-radius: 5px; border: 1px solid #f5c6cb; margin: 15px 0; } .warning { background: #fff3cd; color: #856404; padding: 15px; border-radius: 5px; border: 1px solid #ffeaa7; margin: 15px 0; } .info { background: #cce5ff; color: #004085; padding: 15px; border-radius: 5px; border: 1px solid #99d3ff; margin: 15px 0; } /* Loading */ .loading { display: flex; justify-content: center; align-items: center; padding: 20px; } .spinner { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Modal */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border-radius: 8px; width: 80%; max-width: 800px; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; right: 15px; top: 10px; } .close:hover, .close:focus { color: #000; } /* Responsive */ @media (max-width: 768px) { .container { padding: 15px; margin: 10px; } .dashboard-cards { grid-template-columns: 1fr; } .quick-actions { flex-direction: column; align-items: stretch; } .action-btn { text-align: center; justify-content: center; } input[type="text"], input[type="password"], input[type="email"] { font-size: 16px; /* Αποφυγή zoom στα iOS devices */ } } /* Utility Classes */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 10px; } .mb-2 { margin-bottom: 20px; } .mb-3 { margin-bottom: 30px; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 30px; } .p-0 { padding: 0; } .p-1 { padding: 10px; } .p-2 { padding: 20px; } .p-3 { padding: 30px; } .d-flex { display: flex; } .justify-content-between { justify-content: space-between; } .align-items-center { align-items: center; } .gap-1 { gap: 10px; } .gap-2 { gap: 20px; } .hidden { display: none; } .visible { display: block; } /* Print Styles */ @media print { .no-print { display: none !important; } .sidebar { display: none !important; } .main-content { margin-left: 0 !important; } }