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

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

@ -1,24 +1,46 @@
#main_search .search_section { #main_search .search_section {
float: none; float: none;
cursor: pointer; cursor: pointer;
border-top: 1px solid var(--separator);
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
/* Top Result */ #main_search .search_section:not(:first-child) {
.top_result_header { border-top: 1px solid var(--separator);
font-size: 2rem;
} }
.search_header { .search_header {
display: inline-block;
font-size: 1.75rem; font-size: 1.75rem;
margin-bottom: 25px; 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 { .top_result {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column;
} }
.top_result > .cover_container { .top_result > .cover_container {
@ -26,19 +48,40 @@
height: 156px; height: 156px;
} }
.top_result > .info_box { .top_result .info_box {
display: inline-block; display: flex;
padding-left: 24px; 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 .primary-text,
.release .secondary-text { .release .secondary-text {
margin: 0px; margin: 0px;
margin-bottom: 4px; margin-bottom: 4px;
} }
/* Releases */
.release .secondary-text { .release .secondary-text {
opacity: 0.75; opacity: 0.75;
font-size: 14px; font-size: 14px;