body { font-family: sans-serif; margin: 0; background-image: url('../картинки/фон.jpg'); padding: 0; } .container { display: flex; height: 100vh; height: 1000px; background-color: #f1f1f1; } .sidebar { width: 250px; background-color: #dfdfdf; padding: 20px; overflow-y: auto; } .sidebar input[type="text"] { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .sidebar ul { list-style: none; padding: 0; margin-top: 20px; } .sidebar li { margin-bottom: 10px; } .sidebar a { display: block; padding: 10px; text-decoration: none; color: #333; } .sidebar a:hover { background-color: #c2c2c2; } .content { flex: 1; padding: 20px; overflow-y: auto; } /* Стили для результатов поиска */ .search-results { margin-top: 20px; } .search-results li { margin-bottom: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } .search-results li mark { background-color: yellow; } /* Стили для прелоадера */ .loader { border: 5px solid #f3f3f3; /* Светло-серый */ border-top: 5px solid #3498db; /* Синий */ border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; margin: 20px auto; /* Центрируем прелоадер */ display: none; /* Прячем прелоадер по умолчанию */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }