/* Web Publication System Styles */ /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Typography */ h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; font-weight: 600; line-height: 1.2; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } p { margin-bottom: 1rem; } a { color: #007bff; text-decoration: none; transition: color 0.2s ease; } a:hover { color: #0056b3; text-decoration: underline; } /* Buttons */ .btn { display: inline-block; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: 0.375rem; cursor: pointer; transition: all 0.2s ease; } .btn-primary { color: white; background-color: #007bff; border-color: #007bff; } .btn-primary:hover { background-color: #0056b3; border-color: #0056b3; color: white; text-decoration: none; } .btn-secondary { color: #6c757d; background-color: #fff; border-color: #6c757d; } .btn-secondary:hover { background-color: #6c757d; color: white; text-decoration: none; } .btn-danger { color: white; background-color: #dc3545; border-color: #dc3545; } .btn-danger:hover { background-color: #c82333; border-color: #c82333; color: white; text-decoration: none; } .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } /* Forms */ .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; } input[type="text"], input[type="email"], input[type="password"], textarea, select { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 0.375rem; font-size: 1rem; transition: border-color 0.2s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); } textarea { resize: vertical; min-height: 100px; } /* Alerts */ .alert { padding: 1rem; margin-bottom: 1.5rem; border: 1px solid transparent; border-radius: 0.375rem; } .alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; } .alert-error { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } /* Login Page */ .login-page { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-form { background: white; padding: 2rem; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); width: 100%; max-width: 400px; } .login-form h1 { text-align: center; margin-bottom: 2rem; color: #333; } /* Admin Layout */ .admin-layout { min-height: 100vh; background-color: #f8f9fa; } .admin-header { background: white; border-bottom: 1px solid #dee2e6; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .header-content { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; max-width: 1200px; margin: 0 auto; } .admin-nav { display: flex; gap: 2rem; } .nav-link { color: #6c757d; text-decoration: none; padding: 0.5rem 0; border-bottom: 2px solid transparent; transition: all 0.2s ease; } .nav-link:hover, .nav-link.active { color: #007bff; border-bottom-color: #007bff; } .user-info { color: #6c757d; font-size: 0.875rem; } .admin-main { padding: 2rem; max-width: 1200px; margin: 0 auto; } /* Dashboard Stats */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .stat-card { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center; } .stat-card h3 { color: #6c757d; font-size: 0.875rem; margin-bottom: 0.5rem; } .stat-number { font-size: 2rem; font-weight: 600; color: #007bff; } /* Tables */ .table-container { background: white; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 1.5rem; } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th, .admin-table td { padding: 1rem; text-align: left; border-bottom: 1px solid #dee2e6; } .admin-table th { background-color: #f8f9fa; font-weight: 600; color: #495057; } .admin-table tr:hover { background-color: #f8f9fa; } .status-badge { padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; } .status-published { background-color: #d4edda; color: #155724; } .status-draft { background-color: #fff3cd; color: #856404; } .status-archived { background-color: #f8d7da; color: #721c24; } /* Publication Form */ .publication-form { background: white; padding: 2rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .category-checkboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem; } .checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .checkbox-label input[type="checkbox"] { width: auto; } .form-actions { display: flex; gap: 1rem; margin-top: 2rem; } /* Public Site Styles */ .site-header { background: white; border-bottom: 1px solid #dee2e6; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 1rem 20px; } .site-header h1 { margin: 0; } .site-header h1 a { color: #333; text-decoration: none; } .main-nav { display: flex; gap: 2rem; } .main-nav a { color: #6c757d; text-decoration: none; padding: 0.5rem 0; border-bottom: 2px solid transparent; transition: all 0.2s ease; } .main-nav a:hover { color: #007bff; border-bottom-color: #007bff; } /* Content Layout */ .content-layout { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; margin-top: 2rem; } /* Sidebar */ .sidebar { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); height: fit-content; } .sidebar-section { margin-bottom: 2rem; } .sidebar-section:last-child { margin-bottom: 0; } .sidebar-section h3 { font-size: 1.125rem; margin-bottom: 1rem; color: #333; } .search-form { display: flex; gap: 0.5rem; } .search-form input { flex: 1; } .category-list { list-style: none; } .category-list li { margin-bottom: 0.5rem; } .category-list a { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; color: #6c757d; text-decoration: none; border-radius: 0.25rem; transition: all 0.2s ease; } .category-list a:hover, .category-list a.active { background-color: #f8f9fa; color: #007bff; } .category-list .count { font-size: 0.875rem; color: #6c757d; } /* Main Content */ .main-content { min-height: 400px; } /* Publication Lists */ .publication-list { display: flex; flex-direction: column; gap: 1.5rem; } .publication-summary { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .publication-summary h3 { margin-bottom: 0.5rem; } .publication-summary h3 a { color: #333; text-decoration: none; } .publication-summary h3 a:hover { color: #007bff; } .publication-summary .summary { color: #6c757d; margin-bottom: 1rem; } .publication-summary .meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.875rem; color: #6c757d; } .category-tag { background-color: #e9ecef; color: #495057; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; text-decoration: none; } .category-tag:hover { background-color: #dee2e6; color: #495057; text-decoration: none; } /* Full Publication */ .publication-full { background: white; padding: 2rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; } .publication-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #dee2e6; } .publication-header h1 { margin-bottom: 1rem; } .publication-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.875rem; color: #6c757d; margin-bottom: 1rem; } .publication-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; } .publication-summary { background-color: #f8f9fa; padding: 1rem; border-radius: 0.375rem; margin-bottom: 2rem; border-left: 4px solid #007bff; } .publication-body { font-size: 1.125rem; line-height: 1.8; } /* Related Publications */ .related-publications { margin-bottom: 2rem; } .publication-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .publication-card { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .publication-card h3 { margin-bottom: 0.5rem; } .publication-card h3 a { color: #333; text-decoration: none; } .publication-card h3 a:hover { color: #007bff; } .publication-card .summary { color: #6c757d; margin-bottom: 1rem; } .publication-card .meta { font-size: 0.875rem; color: #6c757d; } /* Search */ .search-form-large { background: white; padding: 2rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; display: flex; gap: 1rem; } .search-form-large input { flex: 1; font-size: 1.125rem; } .search-results h3 { margin-bottom: 1rem; } .results-count { color: #6c757d; margin-bottom: 1.5rem; } /* Pagination */ .pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; } .pagination-link, .pagination-current { padding: 0.5rem 0.75rem; border: 1px solid #dee2e6; border-radius: 0.375rem; text-decoration: none; color: #007bff; } .pagination-current { background-color: #007bff; color: white; border-color: #007bff; } .pagination-link:hover { background-color: #e9ecef; color: #007bff; } /* Footer */ .site-footer { background: white; border-top: 1px solid #dee2e6; margin-top: 3rem; padding: 2rem 0; text-align: center; color: #6c757d; } /* Actions */ .actions { margin-top: 1.5rem; } .publication-actions { text-align: center; margin-top: 2rem; } /* LDAP Authentication Styles */ .auth-info { background-color: #e3f2fd; border: 1px solid #bbdefb; border-radius: 0.375rem; padding: 1rem; margin-bottom: 1.5rem; } .ldap-notice { color: #1565c0; font-size: 0.875rem; margin: 0; } .ldap-notice strong { color: #0d47a1; } .help-text { font-size: 0.75rem; color: #6c757d; margin-top: 0.25rem; font-style: italic; } /* LDAP Users Page Styles */ .ldap-search { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; } .ldap-status { margin-top: 1rem; padding: 0.5rem; border-radius: 0.25rem; font-weight: 500; } .status-ok { background-color: #d4edda; color: #155724; } .status-error { background-color: #f8d7da; color: #721c24; } .user-exists { background-color: #f8f9fa; opacity: 0.7; } .ldap-import-form { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Setup Form Enhancements */ .setup-form { background: white; padding: 2rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); max-width: 800px; margin: 0 auto; } .setup-form h2 { border-bottom: 2px solid #007bff; padding-bottom: 0.5rem; margin-top: 2rem; margin-bottom: 1.5rem; } .setup-form h2:first-child { margin-top: 0; } .setup-form h3 { color: #495057; font-size: 1.125rem; margin-bottom: 1rem; } .setup-form input[type="checkbox"] { width: auto; margin-right: 0.5rem; } .setup-form label { font-weight: 500; margin-bottom: 0.5rem; display: block; } /* Language Switcher */ .language-switcher { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; margin-left: auto; } .language-label { color: #6c757d; font-weight: 500; } .language-link { padding: 0.25rem 0.5rem; border-radius: 0.25rem; text-decoration: none; color: #6c757d; transition: all 0.2s ease; } .language-link:hover { background-color: #f8f9fa; color: #495057; } .language-link.active { background-color: #007bff; color: white; font-weight: 500; } /* Responsive Design */ @media (max-width: 768px) { .content-layout { grid-template-columns: 1fr; } .header-content { flex-direction: column; gap: 1rem; text-align: center; } .admin-nav { flex-wrap: wrap; justify-content: center; gap: 1rem; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .publication-grid { grid-template-columns: 1fr; } .publication-meta, .publication-summary .meta { flex-direction: column; gap: 0.5rem; } .search-form-large { flex-direction: column; } .form-actions { flex-direction: column; } .category-checkboxes { grid-template-columns: 1fr; } .setup-form { padding: 1rem; } .language-switcher { margin-left: 0; margin-top: 0.5rem; justify-content: center; } } @media (max-width: 480px) { .container { padding: 0 15px; } .admin-main { padding: 1rem; } .publication-full, .publication-form { padding: 1rem; } .stats-grid { grid-template-columns: 1fr; } .table-container { overflow-x: auto; } }