deemixer/src/styles/scss/tabs/_search-tab.scss
2020-10-10 17:35:04 +02:00

106 lines
1.5 KiB
SCSS

#main_search {
.search_section {
float: none;
padding-top: 20px;
padding-bottom: 20px;
&:not(:first-child) {
border-top: 1px solid theme('colors.grayscale.500');
}
}
.top_result_header {
display: block;
cursor: default;
font-size: 2rem;
text-align: center;
}
}
.search_header {
display: inline-block;
cursor: pointer;
font-size: 1.75rem;
margin-bottom: 25px;
text-transform: capitalize;
&:not(.top_result_header) {
transition: color 200ms ease-in-out;
&:hover {
color: var(--accent-color);
}
}
}
/* Top Result */
.top_result {
display: flex;
align-items: center;
flex-direction: column;
> .cover_container {
width: 156px;
height: 156px;
}
.info_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 15px;
.primary-text,
.secondary-text {
font-size: 18px;
text-align: center;
}
.primary-text {
margin-bottom: 5px;
}
.secondary-text {
margin-bottom: 10px;
}
.tag {
width: 40px;
text-align: center;
}
}
}
/* Releases */
.release {
.primary-text,
.secondary-text {
margin: 0px;
margin-bottom: 4px;
}
.secondary-text {
opacity: 0.75;
font-size: 14px;
.material-icons {
font-size: 17px !important;
margin-left: 4px;
}
}
}
.release_grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
grid-gap: 1rem;
&.firstrow_only {
grid-template-rows: 1fr;
grid-auto-rows: 0;
grid-row-gap: 0px;
overflow-y: hidden;
}
}