diff --git a/public/css/modules/base/base.css b/public/css/modules/base/base.css index 3e7dd4c..413c2ba 100644 --- a/public/css/modules/base/base.css +++ b/public/css/modules/base/base.css @@ -29,6 +29,10 @@ html[data-theme='light'] { --panels-background: #222324; --panels-text: #ffffff; --accent-text: #ffffff; + + --table-bg: #ffffff; + --table-zebra: #c9c9c9; + --table-highlight: #8f8f8f; } html[data-theme='dark'] { @@ -39,6 +43,10 @@ html[data-theme='dark'] { --panels-background: #1a1a1a; --panels-text: #ffffff; --accent-text: #dfdfdf; + + --table-bg: #141414; + --table-zebra: #242424; + --table-highlight: #747474; } html[data-theme='purple'] { @@ -50,6 +58,10 @@ html[data-theme='purple'] { --panels-background: #100727; --panels-text: #ffffff; --accent-text: #dfdfdf; + + --table-bg: #0c041b; + --table-zebra: #130a29; + --table-highlight: #321874; } body { diff --git a/public/css/modules/base/normalize.css b/public/css/modules/base/normalize.css index e118b4f..66c7e45 100644 --- a/public/css/modules/base/normalize.css +++ b/public/css/modules/base/normalize.css @@ -4,6 +4,27 @@ box-sizing: border-box; } -body { +:root { font-size: 16px; } + +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/public/css/modules/globals.css b/public/css/modules/globals.css index 87f591c..60a386e 100644 --- a/public/css/modules/globals.css +++ b/public/css/modules/globals.css @@ -2,27 +2,69 @@ .table { width: 100%; + background: var(--table-bg); -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; } .table td, .table th { - height: 50px; - padding: 4px 12px 4px 5px; + /* min-height: 50px; */ + /* padding: 4px 12px 4px 5px; */ vertical-align: middle; - /* border: 0px black solid; */ } .table th { - text-align: left; + /* text-align: left; */ } .table tr:nth-child(even) { - background-color: var(--secondary-background); - border: 0px black solid; + background: var(--table-zebra); } +.table tbody tr:hover { + background: var(--table-highlight); +} + +/* === Tracks Table === */ +.table--design-1 { + border-collapse: collapse; +} + +.table--design-1 td { + vertical-align: middle; +} + +.table--design-1 td:first-child { + /* width: 32px; */ + padding: 0 10px 0 20px; +} + +.table--design-1 td:nth-child(2) { + width: 45%; + padding: 0 10px; +} + +.table--design-1 td:nth-child(3) { + width: 16.8%; + padding: 0 10px; +} + +.table--design-1 td:nth-child(4) { + width: 16.8%; + padding: 0 10px; +} +.table--design-1 td:nth-child(5) { + width: 6%; + padding: 0 10px; +} + +.table--design-1 td:last-child { + padding: 0 20px 0 10px; +} + +/* === Tracks Table End === */ + .table td img { vertical-align: middle; } diff --git a/public/css/modules/tabs/search-tab.css b/public/css/modules/tabs/search-tab.css index 1fcc22e..f68b2e6 100644 --- a/public/css/modules/tabs/search-tab.css +++ b/public/css/modules/tabs/search-tab.css @@ -1,6 +1,5 @@ #main_search .search_section { float: none; - cursor: pointer; padding-top: 20px; padding-bottom: 20px; } @@ -11,6 +10,7 @@ .search_header { display: inline-block; + cursor: pointer; font-size: 1.75rem; margin-bottom: 25px; } diff --git a/public/index.html b/public/index.html index 372c757..293d80e 100644 --- a/public/index.html +++ b/public/index.html @@ -122,37 +122,39 @@