Repository: hydralauncher/hydra-themes
Pull request #352: Updates themes
Author: login: naitangs
Created: 2025-03-13T01:54:16Z | Merged: 2025-03-13T11:33:37Z

Modificações na home, titulo, barra de pesquisa e alguns outros ajustes.


Diff:
diff --git a/themes/EREN GREEN COMPACT-pyWxkeQq/screenshot.png b/themes/EREN GREEN COMPACT-pyWxkeQq/screenshot.png
index cb1bcbb5..b9decd33 100644
Binary files a/themes/EREN GREEN COMPACT-pyWxkeQq/screenshot.png and b/themes/EREN GREEN COMPACT-pyWxkeQq/screenshot.png differ
diff --git a/themes/EREN GREEN COMPACT-pyWxkeQq/theme.css b/themes/EREN GREEN COMPACT-pyWxkeQq/theme.css
index 6432ed05..355c9f7e 100644
--- a/themes/EREN GREEN COMPACT-pyWxkeQq/theme.css	
+++ b/themes/EREN GREEN COMPACT-pyWxkeQq/theme.css	
@@ -34,7 +34,6 @@ body {
 .user-stats__box,
 .recent-games__box,
 .friends-box__box,
-.settings-download-sources__item,
 .download-group__item,
 .auto-update-sub-header {
     background-color: var(--color-background-base);
@@ -69,13 +68,18 @@ body {
     margin: 0;
 }
 
+.sidebar__content section {
+    max-width: 310px;
+    text-align: end;
+}
+
 .sidebar__content section:nth-child(1) {
     margin-left: 22px;
 }
 
-.sidebar__content section {
-    max-width: 250px;
-    text-align: end;
+.sidebar__content section:nth-child(2):nth-last-child(2) {
+    border-left: 1px solid var(--color-background-checkbox);
+    border-right: 1px double var(--color-background-checkbox);
 }
 
 .sidebar__menu {
@@ -90,7 +94,7 @@ body {
 }
 
 .sidebar__menu::-webkit-scrollbar {
-    height: 5px;
+    height: 4px;
 }
 
 .sidebar__menu-item {
@@ -210,11 +214,11 @@ body {
 .container__content {
     background: none;
     color: var(--color-text);
-    padding: 20px;
+    padding: 10px;
 }
 
 .container {
-    height: 94%;
+    height: 93%;
 }
 
 /* Painel inferior */
@@ -328,27 +332,6 @@ body {
     background: var(--color-all);
 }
 
-/* Grupos de download */
-.download-group__downloads {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    padding: 0;
-    list-style-type: none;
-}
-
-.download-group__downloads li {
-    flex: 0 0 500px;
-    margin-right: 20px;
-    border: 1px solid #ccc;
-    padding: 10px;
-    text-align: center;
-}
-
-.download-group__details {
-    text-align: left;
-}
-
 /* Barra de progresso */
 .hero-panel__progress-bar,
 .achievements-content__user-summary__container__stats__progress-bar {
@@ -373,7 +356,7 @@ body {
 }
 
 .theme-card {
-    width: 250px;
+    width: 230px;
     height: 150px;
     margin-bottom: 5px;
     margin-left: 5px;
@@ -386,7 +369,7 @@ body {
 }
 
 .theme-card--active {
-    border: 1px solid var(--color-all);
+    border: 3px solid var(--color-all);
 }
 
 /* Lista de conquistas */
@@ -464,12 +447,6 @@ body {
     text-align: center;
 }
 
-/* Seções da sidebar */
-.sidebar__content section:nth-child(2):nth-last-child(2) {
-    border-left: 1px solid var(--color-background-checkbox);
-    border-right: 1px double var(--color-background-checkbox);
-}
-
 /* Elementos principais */
 main {
     display: block;
@@ -522,12 +499,28 @@ main {
     padding: 10px;
 }
 
-.header__action-button,
 .header__search {
-    height: 29px;
-    padding: 5px;
+  display: inline-flex;
+  align-items: center;
+  background-color: transparent;
+  width: fit-content;
+  border: none;
+  overflow: hidden;
+}
+
+.header__search-input {
+  opacity: 0;
+  width: 0;
+  transition: opacity 0.3s ease, width 0.3s ease;
 }
 
+.header__search--focused .header__search-input {
+  opacity: 1;
+  width: 150px;
+  display: inline-block; 
+}
+
+
 /* Configurações */
 .settings__content {
     background-color: var(--color-background-base);
@@ -544,10 +537,14 @@ main {
 }
 
 .settings-download-sources__item {
-    flex-basis: 300px;
+    flex-basis: 219px;
     box-sizing: border-box;
     text-align: center;
     align-items: center;
+    background-color: var(--color-background-base);
+    color: var(--color-text);
+    box-shadow: 0px 2px 5px var(--color-shadow);
+    padding: 10px;
 }
 
 .settings-download-sources__item-header div {
@@ -564,6 +561,25 @@ main {
     width: 200px;
     margin-right: 10px;
 }
+/* Home */
+.home__cards{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.home__cards .game-card{
+    width: 298px;
+}
+.container h2{
+    border-bottom: 2px solid var(--color-all);
+    padding-bottom: 5px;
+}
+.home__content{
+    padding: 0px 23px 10px 30px;
+}
+.header__title{
+    text-align: center;
+}
 
 /* Media Queries */
 @media (max-width: 1198px) {
@@ -584,10 +600,6 @@ main {
         width: 100%;
         grid-template-columns: repeat(2, 1fr);
     }
-
-    .settings-download-sources__item {
-        flex-basis: 219px;
-    }
 }
 
 @media (min-width: 1199px) {
@@ -599,6 +611,18 @@ main {
         width: 180px;
         height: 250px;
     }
+    .home__cards .game-card{
+    width: 357px;
+    }
+    .settings-download-sources__item {
+        flex-basis: 265px;
+    }
+    .theme-card {
+    width: 275px;
+    }
+    .sidebar__content section {
+    max-width: 400px;
+}
 }
 
 @media (min-width: 1390px) {
@@ -637,4 +661,16 @@ main {
     .sidebar__content section {
         max-width: 500px;
     }
-}
\ No newline at end of file
+    .home__cards .game-card{
+    width: 420px;
+    }
+    .container {
+    height: 95%;
+    }
+    .settings-download-sources__item {
+        flex-basis: 285px;
+    }
+    .theme-card {
+    width: 295px;
+    }
+}
diff --git a/themes/EREN ORANGE COMPACT-pyWxkeQq/screenshot.png b/themes/EREN ORANGE COMPACT-pyWxkeQq/screenshot.png
index a4dca259..3f540c9d 100644
Binary files a/themes/EREN ORANGE COMPACT-pyWxkeQq/screenshot.png and b/themes/EREN ORANGE COMPACT-pyWxkeQq/screenshot.png differ
diff --git a/themes/EREN ORANGE COMPACT-pyWxkeQq/theme.css b/themes/EREN ORANGE COMPACT-pyWxkeQq/theme.css
index 1f07d209..2ff547e9 100644
--- a/themes/EREN ORANGE COMPACT-pyWxkeQq/theme.css	
+++ b/themes/EREN ORANGE COMPACT-pyWxkeQq/theme.css	
@@ -34,7 +34,6 @@ body {
 .user-stats__box,
 .recent-games__box,
 .friends-box__box,
-.settings-download-sources__item,
 .download-group__item,
 .auto-update-sub-header {
     background-color: var(--color-background-base);
@@ -69,13 +68,18 @@ body {
     margin: 0;
 }
 
+.sidebar__content section {
+    max-width: 310px;
+    text-align: end;
+}
+
 .sidebar__content section:nth-child(1) {
     margin-left: 22px;
 }
 
-.sidebar__content section {
-    max-width: 250px;
-    text-align: end;
+.sidebar__content section:nth-child(2):nth-last-child(2) {
+    border-left: 1px solid var(--color-background-checkbox);
+    border-right: 1px double var(--color-background-checkbox);
 }
 
 .sidebar__menu {
@@ -90,7 +94,7 @@ body {
 }
 
 .sidebar__menu::-webkit-scrollbar {
-    height: 5px;
+    height: 4px;
 }
 
 .sidebar__menu-item {
@@ -210,11 +214,11 @@ body {
 .container__content {
     background: none;
     color: var(--color-text);
-    padding: 20px;
+    padding: 10px;
 }
 
 .container {
-    height: 94%;
+    height: 93%;
 }
 
 /* Painel inferior */
@@ -328,27 +332,6 @@ body {
     background: var(--color-all);
 }
 
-/* Grupos de download */
-.download-group__downloads {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    padding: 0;
-    list-style-type: none;
-}
-
-.download-group__downloads li {
-    flex: 0 0 500px;
-    margin-right: 20px;
-    border: 1px solid #ccc;
-    padding: 10px;
-    text-align: center;
-}
-
-.download-group__details {
-    text-align: left;
-}
-
 /* Barra de progresso */
 .hero-panel__progress-bar,
 .achievements-content__user-summary__container__stats__progress-bar {
@@ -373,7 +356,7 @@ body {
 }
 
 .theme-card {
-    width: 250px;
+    width: 230px;
     height: 150px;
     margin-bottom: 5px;
     margin-left: 5px;
@@ -386,7 +369,7 @@ body {
 }
 
 .theme-card--active {
-    border: 1px solid var(--color-all);
+    border: 3px solid var(--color-all);
 }
 
 /* Lista de conquistas */
@@ -464,12 +447,6 @@ body {
     text-align: center;
 }
 
-/* Seções da sidebar */
-.sidebar__content section:nth-child(2):nth-last-child(2) {
-    border-left: 1px solid var(--color-background-checkbox);
-    border-right: 1px double var(--color-background-checkbox);
-}
-
 /* Elementos principais */
 main {
     display: block;
@@ -522,12 +499,28 @@ main {
     padding: 10px;
 }
 
-.header__action-button,
 .header__search {
-    height: 29px;
-    padding: 5px;
+  display: inline-flex;
+  align-items: center;
+  background-color: transparent;
+  width: fit-content;
+  border: none;
+  overflow: hidden;
+}
+
+.header__search-input {
+  opacity: 0;
+  width: 0;
+  transition: opacity 0.3s ease, width 0.3s ease;
 }
 
+.header__search--focused .header__search-input {
+  opacity: 1;
+  width: 150px;
+  display: inline-block; 
+}
+
+
 /* Configurações */
 .settings__content {
     background-color: var(--color-background-base);
@@ -544,10 +537,14 @@ main {
 }
 
 .settings-download-sources__item {
-    flex-basis: 300px;
+    flex-basis: 219px;
     box-sizing: border-box;
     text-align: center;
     align-items: center;
+    background-color: var(--color-background-base);
+    color: var(--color-text);
+    box-shadow: 0px 2px 5px var(--color-shadow);
+    padding: 10px;
 }
 
 .settings-download-sources__item-header div {
@@ -564,6 +561,25 @@ main {
     width: 200px;
     margin-right: 10px;
 }
+/* Home */
+.home__cards{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.home__cards .game-card{
+    width: 298px;
+}
+.container h2{
+    border-bottom: 2px solid var(--color-all);
+    padding-bottom: 5px;
+}
+.home__content{
+    padding: 0px 23px 10px 30px;
+}
+.header__title{
+    text-align: center;
+}
 
 /* Media Queries */
 @media (max-width: 1198px) {
@@ -584,10 +600,6 @@ main {
         width: 100%;
         grid-template-columns: repeat(2, 1fr);
     }
-
-    .settings-download-sources__item {
-        flex-basis: 219px;
-    }
 }
 
 @media (min-width: 1199px) {
@@ -599,6 +611,18 @@ main {
         width: 180px;
         height: 250px;
     }
+    .home__cards .game-card{
+    width: 357px;
+    }
+    .settings-download-sources__item {
+        flex-basis: 265px;
+    }
+    .theme-card {
+    width: 275px;
+    }
+    .sidebar__content section {
+    max-width: 400px;
+}
 }
 
 @media (min-width: 1390px) {
@@ -637,4 +661,16 @@ main {
     .sidebar__content section {
         max-width: 500px;
     }
-}
\ No newline at end of file
+    .home__cards .game-card{
+    width: 420px;
+    }
+    .container {
+    height: 95%;
+    }
+    .settings-download-sources__item {
+        flex-basis: 285px;
+    }
+    .theme-card {
+    width: 295px;
+    }
+}
diff --git a/themes/EREN RED COMPACT-pyWxkeQq/screenshot.png b/themes/EREN RED COMPACT-pyWxkeQq/screenshot.png
index 34792d8a..175bafa8 100644
Binary files a/themes/EREN RED COMPACT-pyWxkeQq/screenshot.png and b/themes/EREN RED COMPACT-pyWxkeQq/screenshot.png differ
diff --git a/themes/EREN RED COMPACT-pyWxkeQq/theme.css b/themes/EREN RED COMPACT-pyWxkeQq/theme.css
index 972f5f49..ab6018b1 100644
--- a/themes/EREN RED COMPACT-pyWxkeQq/theme.css	
+++ b/themes/EREN RED COMPACT-pyWxkeQq/theme.css	
@@ -34,7 +34,6 @@ body {
 .user-stats__box,
 .recent-games__box,
 .friends-box__box,
-.settings-download-sources__item,
 .download-group__item,
 .auto-update-sub-header {
     background-color: var(--color-background-base);
@@ -69,13 +68,18 @@ body {
     margin: 0;
 }
 
+.sidebar__content section {
+    max-width: 310px;
+    text-align: end;
+}
+
 .sidebar__content section:nth-child(1) {
     margin-left: 22px;
 }
 
-.sidebar__content section {
-    max-width: 250px;
-    text-align: end;
+.sidebar__content section:nth-child(2):nth-last-child(2) {
+    border-left: 1px solid var(--color-background-checkbox);
+    border-right: 1px double var(--color-background-checkbox);
 }
 
 .sidebar__menu {
@@ -90,7 +94,7 @@ body {
 }
 
 .sidebar__menu::-webkit-scrollbar {
-    height: 5px;
+    height: 4px;
 }
 
 .sidebar__menu-item {
@@ -210,11 +214,11 @@ body {
 .container__content {
     background: none;
     color: var(--color-text);
-    padding: 20px;
+    padding: 10px;
 }
 
 .container {
-    height: 94%;
+    height: 93%;
 }
 
 /* Painel inferior */
@@ -328,27 +332,6 @@ body {
     background: var(--color-all);
 }
 
-/* Grupos de download */
-.download-group__downloads {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    padding: 0;
-    list-style-type: none;
-}
-
-.download-group__downloads li {
-    flex: 0 0 500px;
-    margin-right: 20px;
-    border: 1px solid #ccc;
-    padding: 10px;
-    text-align: center;
-}
-
-.download-group__details {
-    text-align: left;
-}
-
 /* Barra de progresso */
 .hero-panel__progress-bar,
 .achievements-content__user-summary__container__stats__progress-bar {
@@ -373,7 +356,7 @@ body {
 }
 
 .theme-card {
-    width: 250px;
+    width: 230px;
     height: 150px;
     margin-bottom: 5px;
     margin-left: 5px;
@@ -386,7 +369,7 @@ body {
 }
 
 .theme-card--active {
-    border: 1px solid var(--color-all);
+    border: 3px solid var(--color-all);
 }
 
 /* Lista de conquistas */
@@ -464,12 +447,6 @@ body {
     text-align: center;
 }
 
-/* Seções da sidebar */
-.sidebar__content section:nth-child(2):nth-last-child(2) {
-    border-left: 1px solid var(--color-background-checkbox);
-    border-right: 1px double var(--color-background-checkbox);
-}
-
 /* Elementos principais */
 main {
     display: block;
@@ -522,12 +499,28 @@ main {
     padding: 10px;
 }
 
-.header__action-button,
 .header__search {
-    height: 29px;
-    padding: 5px;
+  display: inline-flex;
+  align-items: center;
+  background-color: transparent;
+  width: fit-content;
+  border: none;
+  overflow: hidden;
+}
+
+.header__search-input {
+  opacity: 0;
+  width: 0;
+  transition: opacity 0.3s ease, width 0.3s ease;
 }
 
+.header__search--focused .header__search-input {
+  opacity: 1;
+  width: 150px;
+  display: inline-block; 
+}
+
+
 /* Configurações */
 .settings__content {
     background-color: var(--color-background-base);
@@ -544,10 +537,14 @@ main {
 }
 
 .settings-download-sources__item {
-    flex-basis: 300px;
+    flex-basis: 219px;
     box-sizing: border-box;
     text-align: center;
     align-items: center;
+    background-color: var(--color-background-base);
+    color: var(--color-text);
+    box-shadow: 0px 2px 5px var(--color-shadow);
+    padding: 10px;
 }
 
 .settings-download-sources__item-header div {
@@ -564,6 +561,25 @@ main {
     width: 200px;
     margin-right: 10px;
 }
+/* Home */
+.home__cards{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.home__cards .game-card{
+    width: 298px;
+}
+.container h2{
+    border-bottom: 2px solid var(--color-all);
+    padding-bottom: 5px;
+}
+.home__content{
+    padding: 0px 23px 10px 30px;
+}
+.header__title{
+    text-align: center;
+}
 
 /* Media Queries */
 @media (max-width: 1198px) {
@@ -584,10 +600,6 @@ main {
         width: 100%;
         grid-template-columns: repeat(2, 1fr);
     }
-
-    .settings-download-sources__item {
-        flex-basis: 219px;
-    }
 }
 
 @media (min-width: 1199px) {
@@ -599,6 +611,18 @@ main {
         width: 180px;
         height: 250px;
     }
+    .home__cards .game-card{
+    width: 357px;
+    }
+    .settings-download-sources__item {
+        flex-basis: 265px;
+    }
+    .theme-card {
+    width: 275px;
+    }
+    .sidebar__content section {
+    max-width: 400px;
+}
 }
 
 @media (min-width: 1390px) {
@@ -637,4 +661,16 @@ main {
     .sidebar__content section {
         max-width: 500px;
     }
-}
\ No newline at end of file
+    .home__cards .game-card{
+    width: 420px;
+    }
+    .container {
+    height: 95%;
+    }
+    .settings-download-sources__item {
+        flex-basis: 285px;
+    }
+    .theme-card {
+    width: 295px;
+    }
+}
diff --git a/themes/Hydra Blackout-pyWxkeQq/screenshot.png b/themes/Hydra Blackout-pyWxkeQq/screenshot.png
index b3b2c4d9..8d990ac2 100644
Binary files a/themes/Hydra Blackout-pyWxkeQq/screenshot.png and b/themes/Hydra Blackout-pyWxkeQq/screenshot.png differ
diff --git a/themes/Hydra Blackout-pyWxkeQq/theme.css b/themes/Hydra Blackout-pyWxkeQq/theme.css
index 2abcd17d..b94f2e9a 100644
--- a/themes/Hydra Blackout-pyWxkeQq/theme.css	
+++ b/themes/Hydra Blackout-pyWxkeQq/theme.css	
@@ -38,7 +38,6 @@ body {
 .user-stats__box,
 .recent-games__box,
 .friends-box__box,
-.settings-download-sources__item,
 .download-group__item,
 .auto-update-sub-header {
     background-color: var(--color-background-base);
@@ -73,13 +72,18 @@ body {
     margin: 0;
 }
 
+.sidebar__content section {
+    max-width: 310px;
+    text-align: end;
+}
+
 .sidebar__content section:nth-child(1) {
     margin-left: 22px;
 }
 
-.sidebar__content section {
-    max-width: 250px;
-    text-align: end;
+.sidebar__content section:nth-child(2):nth-last-child(2) {
+    border-left: 1px solid var(--color-background-checkbox);
+    border-right: 1px double var(--color-background-checkbox);
 }
 
 .sidebar__menu {
@@ -94,7 +98,7 @@ body {
 }
 
 .sidebar__menu::-webkit-scrollbar {
-    height: 5px;
+    height: 4px;
 }
 
 .sidebar__menu-item {
@@ -214,11 +218,11 @@ body {
 .container__content {
     background: none;
     color: var(--color-text);
-    padding: 20px;
+    padding: 10px;
 }
 
 .container {
-    height: 94%;
+    height: 93%;
 }
 
 /* Painel inferior */
@@ -332,27 +336,6 @@ body {
     background: var(--color-all);
 }
 
-/* Grupos de download */
-.download-group__downloads {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    padding: 0;
-    list-style-type: none;
-}
-
-.download-group__downloads li {
-    flex: 0 0 500px;
-    margin-right: 20px;
-    border: 1px solid #ccc;
-    padding: 10px;
-    text-align: center;
-}
-
-.download-group__details {
-    text-align: left;
-}
-
 /* Barra de progresso */
 .hero-panel__progress-bar,
 .achievements-content__user-summary__container__stats__progress-bar {
@@ -377,7 +360,7 @@ body {
 }
 
 .theme-card {
-    width: 250px;
+    width: 230px;
     height: 150px;
     margin-bottom: 5px;
     margin-left: 5px;
@@ -390,7 +373,7 @@ body {
 }
 
 .theme-card--active {
-    border: 1px solid var(--color-all);
+    border: 3px solid var(--color-all);
 }
 
 /* Lista de conquistas */
@@ -468,12 +451,6 @@ body {
     text-align: center;
 }
 
-/* Seções da sidebar */
-.sidebar__content section:nth-child(2):nth-last-child(2) {
-    border-left: 1px solid var(--color-background-checkbox);
-    border-right: 1px double var(--color-background-checkbox);
-}
-
 /* Elementos principais */
 main {
     display: block;
@@ -526,12 +503,28 @@ main {
     padding: 10px;
 }
 
-.header__action-button,
 .header__search {
-    height: 29px;
-    padding: 5px;
+  display: inline-flex;
+  align-items: center;
+  background-color: transparent;
+  width: fit-content;
+  border: none;
+  overflow: hidden;
+}
+
+.header__search-input {
+  opacity: 0;
+  width: 0;
+  transition: opacity 0.3s ease, width 0.3s ease;
 }
 
+.header__search--focused .header__search-input {
+  opacity: 1;
+  width: 150px;
+  display: inline-block; 
+}
+
+
 /* Configurações */
 .settings__content {
     background-color: var(--color-background-base);
@@ -548,10 +541,14 @@ main {
 }
 
 .settings-download-sources__item {
-    flex-basis: 300px;
+    flex-basis: 219px;
     box-sizing: border-box;
     text-align: center;
     align-items: center;
+    background-color: var(--color-background-base);
+    color: var(--color-text);
+    box-shadow: 0px 2px 5px var(--color-shadow);
+    padding: 10px;
 }
 
 .settings-download-sources__item-header div {
@@ -568,6 +565,25 @@ main {
     width: 200px;
     margin-right: 10px;
 }
+/* Home */
+.home__cards{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.home__cards .game-card{
+    width: 298px;
+}
+.container h2{
+    border-bottom: 2px solid var(--color-all);
+    padding-bottom: 5px;
+}
+.home__content{
+    padding: 0px 23px 10px 30px;
+}
+.header__title{
+    text-align: center;
+}
 
 /* Media Queries */
 @media (max-width: 1198px) {
@@ -588,10 +604,6 @@ main {
         width: 100%;
         grid-template-columns: repeat(2, 1fr);
     }
-
-    .settings-download-sources__item {
-        flex-basis: 219px;
-    }
 }
 
 @media (min-width: 1199px) {
@@ -603,6 +615,18 @@ main {
         width: 180px;
         height: 250px;
     }
+    .home__cards .game-card{
+    width: 357px;
+    }
+    .settings-download-sources__item {
+        flex-basis: 265px;
+    }
+    .theme-card {
+    width: 275px;
+    }
+    .sidebar__content section {
+    max-width: 400px;
+}
 }
 
 @media (min-width: 1390px) {
@@ -641,4 +665,16 @@ main {
     .sidebar__content section {
         max-width: 500px;
     }
-}
\ No newline at end of file
+    .home__cards .game-card{
+    width: 420px;
+    }
+    .container {
+    height: 95%;
+    }
+    .settings-download-sources__item {
+        flex-basis: 285px;
+    }
+    .theme-card {
+    width: 295px;
+    }
+}


Reviews:
user: login: greptile-apps[bot]
body: 
## PR Summary

Added significant UI improvements across EREN themes and Hydra Blackout, focusing on enhanced search functionality and responsive layouts.

- Added collapsible search bar animation with smooth opacity/width transitions in `.header__search-input`
- Standardized sidebar section widths with new borders and max-width values (320px-500px) across breakpoints
- Implemented new home page card system with flex layout and responsive widths (298px-420px)
- Reduced scrollbar height to 4px and container padding to 10px for better space utilization
- Added new theme card styling with 3px active borders and responsive widths (230px-295px)

<sub>4 file(s) reviewed, 7 comment(s)</sub>
<sub>[Edit PR Review Bot Settings](https://app.greptile.com/review/github) | [Greptile](https://greptile.com?utm_source=greptile_expert&utm_medium=github&utm_campaign=code_reviews&utm_content=hydra-themes_352)</sub>
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T01:56:25Z

Review comments:
diff_hunk: @@ -522,12 +499,28 @@ main {
     padding: 10px;
 }
 
-.header__action-button,
 .header__search {
-    height: 29px;
-    padding: 5px;
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--background-main);
path: themes/EREN GREEN COMPACT-pyWxkeQq/theme.css
user: login: greptile-apps[bot]
body: logic: Using var(--background-main) as background could make search input hard to read since it's an image

```suggestion
  background-color: var(--color-background-base);
```
created_at: 2025-03-13T01:55:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -599,6 +611,18 @@ main {
         width: 180px;
         height: 250px;
     }
+    .home__cards .game-card{
+    width: 357px;
+    }
path: themes/EREN GREEN COMPACT-pyWxkeQq/theme.css
user: login: greptile-apps[bot]
body: syntax: Inconsistent indentation in media query rules
created_at: 2025-03-13T01:55:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -522,12 +499,28 @@ main {
     padding: 10px;
 }
 
-.header__action-button,
 .header__search {
-    height: 29px;
-    padding: 5px;
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--background-main);
+  width: fit-content;
+  border: none;
+  overflow: hidden;
+}
path: themes/EREN ORANGE COMPACT-pyWxkeQq/theme.css
user: login: greptile-apps[bot]
body: logic: Using var(--background-main) as background-color could make search hard to see since it's an image URL
created_at: 2025-03-13T01:55:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -599,6 +611,18 @@ main {
         width: 180px;
         height: 250px;
     }
+    .home__cards .game-card{
+    width: 357px;
+    }
path: themes/EREN RED COMPACT-pyWxkeQq/theme.css
user: login: greptile-apps[bot]
body: style: Indentation is inconsistent with surrounding code
created_at: 2025-03-13T01:55:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -599,6 +611,18 @@ main {
         width: 180px;
         height: 250px;
     }
+    .home__cards .game-card{
+    width: 357px;
+    }
path: themes/EREN ORANGE COMPACT-pyWxkeQq/theme.css
user: login: greptile-apps[bot]
body: style: Indentation inconsistency with surrounding media query rules

```suggestion
    .home__cards .game-card {
        width: 357px;
    }
```
created_at: 2025-03-13T01:55:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -522,12 +499,28 @@ main {
     padding: 10px;
 }
 
-.header__action-button,
 .header__search {
-    height: 29px;
-    padding: 5px;
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--background-main);
path: themes/EREN RED COMPACT-pyWxkeQq/theme.css
user: login: greptile-apps[bot]
body: logic: Using background-main as background-color could cause readability issues since it's an image URL

```suggestion
  background-color: var(--color-background-base);
```
created_at: 2025-03-13T01:55:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -603,6 +615,18 @@ main {
         width: 180px;
         height: 250px;
     }
+    .home__cards .game-card{
+    width: 357px;
+    }
path: themes/Hydra Blackout-pyWxkeQq/theme.css
user: login: greptile-apps[bot]
body: style: Inconsistent indentation in media query rules compared to surrounding code
created_at: 2025-03-13T01:56:03Z
author_association: CONTRIBUTOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-03-13T02:20:34Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=hydralauncher_hydra-themes&pullRequest=352) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=hydralauncher_hydra-themes&pullRequest=352&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=hydralauncher_hydra-themes&pullRequest=352&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=hydralauncher_hydra-themes&pullRequest=352&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=hydralauncher_hydra-themes&pullRequest=352&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=hydralauncher_hydra-themes&pullRequest=352&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=hydralauncher_hydra-themes&pullRequest=352)


author_association: NONE