SAE_2.02/CodeIgniter-3.1.13/assets/css/search_results.css

174 lines
3.3 KiB
CSS
Raw Permalink Normal View History

2024-05-26 17:44:28 +02:00
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
2024-05-30 14:11:04 +02:00
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
2024-05-26 17:44:28 +02:00
}
2024-05-30 14:11:04 +02:00
.title {
color: #6a0dad;
2024-05-26 17:44:28 +02:00
text-align: center;
2024-05-30 14:11:04 +02:00
margin-top: 20px;
2024-05-26 17:44:28 +02:00
}
.section {
2024-05-30 14:11:04 +02:00
margin-bottom: 40px;
2024-05-26 17:44:28 +02:00
}
.section-title {
color: #6a0dad;
2024-05-30 14:11:04 +02:00
font-size: 1.8em;
border-bottom: 2px solid #6a0dad;
padding-bottom: 10px;
margin-bottom: 20px;
2024-05-26 17:44:28 +02:00
}
2024-05-30 14:11:04 +02:00
.music-list, .album-list, .genre-list, .artist-list {
list-style-type: none;
2024-05-26 17:44:28 +02:00
padding: 0;
}
2024-05-30 14:11:04 +02:00
.music-list li, .album-list li, .genre-list li, .artist-list li {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
2024-05-26 17:44:28 +02:00
margin-bottom: 10px;
2024-05-30 14:11:04 +02:00
padding: 15px;
transition: transform 0.3s ease;
2024-05-26 17:44:28 +02:00
}
2024-05-30 14:11:04 +02:00
.music-list li:hover, .album-list li:hover, .genre-list li:hover, .artist-list li:hover {
transform: translateY(-5px);
}
.music-list li a, .album-list li a, .artist-list li a, .genre-list li a {
2024-05-26 17:44:28 +02:00
color: #6a0dad;
transition: color 0.3s ease;
}
2024-05-30 14:11:04 +02:00
.music-list li a:hover, .album-list li a:hover, .artist-list li a:hover, .genre-list li a:hover {
2024-05-26 17:44:28 +02:00
color: #4a0772;
}
2024-05-30 14:11:04 +02:00
.error-message {
color: red;
text-align: center;
margin: 20px 0;
}
2024-05-26 17:44:28 +02:00
.no-results {
text-align: center;
2024-05-30 14:11:04 +02:00
font-size: 1.2em;
color: #888;
}
.music-links {
margin-top: 10px;
}
.music-links a {
display: inline-block;
margin-right: 10px;
padding: 5px 10px;
border-radius: 5px;
color: #fff;
text-decoration: none;
transition: background-color 0.3s ease;
}
.music-links a.spotify {
background-color: #1DB954;
}
.music-links a.deezer {
background-color: #6E44FF;
}
.music-links a.youtube {
background-color: #FF0000;
}
.music-links a.spotify:hover, .music-links a.deezer:hover, .music-links a.youtube:hover {
color: black;
background-color: rgba(255, 255, 255, 0.8);
2024-05-26 17:44:28 +02:00
}
@media screen and (max-width: 768px) {
2024-05-30 14:11:04 +02:00
.music-list li, .album-list li, .genre-list li, .artist-list li {
2024-05-26 17:44:28 +02:00
width: 45%;
2024-05-30 14:11:04 +02:00
margin: 10px 0;
2024-05-26 17:44:28 +02:00
}
}
@media screen and (max-width: 576px) {
2024-05-30 14:11:04 +02:00
.music-list li, .album-list li, .genre-list li, .artist-list li {
2024-05-26 17:44:28 +02:00
width: 100%;
}
}
2024-05-30 14:11:04 +02:00
.filters button {
background-color: #8c00ff;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
.filters button:hover {
background-color: #6a0080;
}
.pagination {
text-align: center;
margin-top: 20px;
}
.pagination a {
display: inline-block;
padding: 8px 16px;
margin: 0 4px;
background-color: #6a0dad;
color: #fff;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.3s ease;
margin-bottom: 10px;
}
.pagination a:hover {
background-color: #4a0772;
}
.pagination .active {
background-color: #29043e;
}
2024-06-01 17:49:36 +02:00
.btn-add-to-playlist {
margin-top: 10px;
background-color: #4a0772;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
}
.select-playlist {
margin-top: 10px;
display: block;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.select-playlist option {
padding: 5px;
}