diff --git a/public/css/modules/base/base.css b/public/css/modules/base/base.css index 6a8c058..c326b61 100644 --- a/public/css/modules/base/base.css +++ b/public/css/modules/base/base.css @@ -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; } diff --git a/public/css/modules/tabs/search-tab.css b/public/css/modules/tabs/search-tab.css index 4f313fd..408c36e 100644 --- a/public/css/modules/tabs/search-tab.css +++ b/public/css/modules/tabs/search-tab.css @@ -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;