evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styled search tab links and centered top result

Browse Source
This commit is contained in:
Roberto Tonino 2020-05-09 19:27:47 +02:00
parent 19b6d56fc9
commit 76afeb2c17
2 changed files with 55 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/css/modules/base/base.css
View File

@ -6,11 +6,12 @@
} */
html {
height: 100%;
height: 100vh;
--main-background: #ffffff;
--secondary-background: #eeeeee;
--main-text: #333333;
--main-text-inverted: #eeeeee;
--main-scroll: #555;
--panels-background: #222324;
--panels-text: #ffffff;
@ -29,6 +30,7 @@ html[data-theme='dark'] {
--main-background: #141414;
--secondary-background: #242424;
--main-text: #eeeeee;
--main-text-inverted: #333333;
--panels-background: #1a1a1a;
--panels-text: #ffffff;
}

61
public/css/modules/tabs/search-tab.css
View File

@ -1,24 +1,46 @@
#main_search .search_section {
float: none;
cursor: pointer;
border-top: 1px solid var(--separator);
padding-top: 20px;
padding-bottom: 20px;
}
/* Top Result */
.top_result_header {
font-size: 2rem;
#main_search .search_section:not(:first-child) {
border-top: 1px solid var(--separator);
}
.search_header {
display: inline-block;
font-size: 1.75rem;
margin-bottom: 25px;
}
.search_header:not(.top_result_header) {
transition: color 200ms ease-in-out;
}
.search_header:not(.top_result_header):hover {
color: var(--accent-color);
}
/* Tab links */
.search_tablinks.active {
color: var(--main-text-inverted);
}
/* Top Result */
#main_search .top_result_header {
display: block;
cursor: default;
font-size: 2rem;
text-align: center;
}
.top_result {
display: flex;
align-items: center;
flex-direction: column;
}
.top_result > .cover_container {
@ -26,19 +48,40 @@
height: 156px;
}
.top_result > .info_box {
display: inline-block;
padding-left: 24px;
.top_result .info_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 15px;
}
.top_result > .info_box > p,
.top_result .info_box .primary-text,
.top_result .info_box .secondary-text {
font-size: 18px;
text-align: center;
}
.top_result .info_box .primary-text {
margin-bottom: 5px;
}
.top_result .info_box .secondary-text {
margin-bottom: 10px;
}
.top_result .info_box .tag {
width: 40px;
text-align: center;
}
/* Releases */
.release .primary-text,
.release .secondary-text {
margin: 0px;
margin-bottom: 4px;
}
/* Releases */
.release .secondary-text {
opacity: 0.75;
font-size: 14px;