EGYADMIN's picture
Create web/styles/main.css
352de00 verified
/* التنسيقات الرئيسية للتطبيق */
/* الخطوط */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
/* تنسيقات عامة */
body {
font-family: 'Tajawal', sans-serif;
color: #333;
}
/* العناوين */
h1, h2, h3, h4, h5, h6 {
font-family: 'Tajawal', sans-serif;
font-weight: 700;
color: #0d47a1;
}
/* البطاقات */
.card {
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
margin-bottom: 1.5rem;
background-color: white;
}
.card-header {
font-weight: 700;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #eaeaea;
}
/* الأزرار */
.stButton > button {
border-radius: 8px;
font-weight: 500;
padding: 0.5rem 1rem;
}
.primary-btn {
background-color: #0d47a1;
color: white;
}
.secondary-btn {
background-color: #f5f5f5;
color: #333;
border: 1px solid #ddd;
}
/* مؤشرات الأداء */
.metric-card {
padding: 1rem;
border-radius: 8px;
border-left: 5px solid #0d47a1;
background-color: #f8f9fa;
}
.metric-value {
font-size: 1.8rem;
font-weight: 700;
color: #0d47a1;
}
.metric-label {
font-size: 0.9rem;
color: #666;
}
/* تلوين الجداول */
.styled-table {
width: 100%;
border-collapse: collapse;
}
.styled-table th {
background-color: #0d47a1;
color: white;
padding: 0.75rem;
text-align: right;
}
.styled-table td {
padding: 0.75rem;
border-bottom: 1px solid #eaeaea;
}
.styled-table tr:nth-child(even) {
background-color: #f8f9fa;
}
/* الشريط الجانبي */
.sidebar .sidebar-content {
background-color: #f8f9fa;
}
/* الرسوم البيانية */
.chart-container {
margin-top: 1rem;
margin-bottom: 1.5rem;
}
/* مؤشرات المخاطر */
.risk-high {
color: #d32f2f;
}
.risk-medium {
color: #ff9800;
}
.risk-low {
color: #4caf50;
}
/* لوحة المعلومات */
.dashboard-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
/* تنسيق النموذج */
.form-container {
background-color: #f8f9fa;
padding: 1.5rem;
border-radius: 10px;
}
/* المؤشرات والرموز */
.icon-text {
display: flex;
align-items: center;
}
.icon-text svg {
margin-left: 0.5rem;
}
/* تنسيق رفع الملفات */
.file-uploader {
border: 2px dashed #ddd;
border-radius: 10px;
padding: 2rem;
text-align: center;
background-color: #f8f9fa;
}