Repository: hydralauncher/hydra-themes
Pull request #328: PhantomLiberty
Author: login: totryon
Created: 2025-03-08T04:28:18Z | Merged: 2025-03-09T16:02:40Z



Diff:
diff --git a/themes/PhantomLiberty-B5gZwxwQ/screenshot.png b/themes/PhantomLiberty-B5gZwxwQ/screenshot.png
new file mode 100644
index 00000000..ba5f9299
Binary files /dev/null and b/themes/PhantomLiberty-B5gZwxwQ/screenshot.png differ
diff --git a/themes/PhantomLiberty-B5gZwxwQ/theme.css b/themes/PhantomLiberty-B5gZwxwQ/theme.css
new file mode 100644
index 00000000..9a2278d9
--- /dev/null
+++ b/themes/PhantomLiberty-B5gZwxwQ/theme.css
@@ -0,0 +1,824 @@
+/*asstro lyk*/
+
+/* Reset básico */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Estilos globais */
+html, body, #root, main {
+  height: 100%;
+}
+
+body {
+  font-family: 'Noto Sans', sans-serif, Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 15px;
+  font-weight: 400;
+  color: #b6000079;
+  background-color: rgba(123, 0, 0, 0.534);
+  border-radius: 10px; /* Arredondamento do body */
+  overflow: hidden;
+  user-select: none;
+  transition: background-color 0.5s ease-in-out; /* Suaviza mudança de cor do background */
+  border-bottom: solid 1px rgb(122 104 0 / 43%);
+}
+
+/* Container principal */
+#root {
+  background: #5300007b url("https://w.wallhaven.cc/full/5g/wallhaven-5gj5j8.jpg") no-repeat center center;
+  background-size: cover;
+  border-radius: 30px; /* Arredondamento do container principal */
+  transition: transform 0.3s ease, opacity 0.3s ease; /* Suaviza transformações e transições */
+}
+
+/* Header */
+.header {
+  background: #7600000f !important;
+  backdrop-filter: blur(10px);
+  border-radius: 0px; /* Arredondamento do header */
+  transition: background-color 0.3s ease; /* Suaviza a transição de cor */
+  color: #aeae00;
+  width: 100%;
+    padding: 16px 24px;
+    gap: 16px;
+}
+
+/* Sidebar */
+.sidebar {
+  background: transparent !important;
+  background-color: rgba(90, 2, 2, 0.281) !important;
+  backdrop-filter: blur(6px);
+  border-radius: 30px; /* Arredondamento da sidebar */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza a mudança de cor de fundo e transição */
+  border-right: solid 1px rgba(153, 0, 0, 0.292);
+}
+
+
+
+/* Conteúdo principal */
+.container__content {
+  color: hwb(63 0% 26%);
+  background: transparent !important;
+  border-radius: 0px; /* Arredondamento do conteúdo principal */
+  transition: background-color 0.3s ease; /* Suaviza a mudança de cor de fundo */
+}
+
+/* Painel inferior */
+.bottom-panel {
+  background: transparent !important;
+  background-color: rgba(69, 0, 0, 0.46);
+  backdrop-filter: blur(3px);
+  border-radius: 30px; /* Arredondamento do painel inferior */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza a transição de transformação */
+}
+
+/* Toast */
+.toast {
+  border-radius: 30px; /* Arredondamento do toast */
+  transition: transform 0.3s ease, opacity 0.3s ease; /* Suaviza a transformação do toast */
+}
+
+/* Botões */
+.button {
+  border-radius: 30px; /* Arredondamento dos botões */
+  transition: background-color 0.3s ease, transform 0.3s ease; /* Efeito de transição suave ao clicar */
+}
+
+.container__content .button--outline {
+  backdrop-filter: blur(10px);
+  background-color: rgba(89, 0, 0, 0.523);
+  border-radius: 30px; /* Arredondamento dos botões outline */
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+/* Barra de título */
+.title-bar {
+  background-color: #7600000f;
+  backdrop-filter: blur(10px);
+  border-radius: 30px; /* Arredondamento da barra de título */
+  transition: background-color 0.3s ease; /* Transição suave da cor de fundo */
+}
+
+/* Conteúdo da página inicial */
+.home__content {
+  background-color: rgba(151, 2, 34, 0.237);
+  backdrop-filter: blur(3px);
+  border-radius: 30px; /* Arredondamento do conteúdo da página inicial */
+}
+
+/* Widget Featurebase */
+.featurebase-widget {
+  --featurebase-widget-max-height: 700px;
+  --featurebase-widget-bottom: 75px;
+  --featurebase-widget-height: 75vh;
+  --featurebase-widget-width: 420px;
+  --featurebase-widget-border-radius: 80px; /* Não alterar o border-radius dos widgets */
+  transition: transform 0.3s ease, opacity 0.3s ease; /* Suaviza a transformação do widget */
+}
+
+.featurebase-widget.featurebase-right {
+  --featurebase-widget-button-left: auto;
+  --featurebase-widget-button-right: 15px;
+  --featurebase-widget-left: auto;
+  --featurebase-widget-right: 15px;
+  --featurebase-widget-fullscreen-x-left: auto;
+  --featurebase-widget-fullscreen-x-right: 30px;
+}
+
+.featurebase-widget.featurebase-fullscreen {
+  --featurebase-widget-max-height: 100%;
+  --featurebase-widget-width: 580px;
+  --featurebase-widget-bottom: 0px;
+  --featurebase-widget-height: 100vh;
+  --featurebase-widget-border-radius: 0px; /* Não alterar o border-radius dos widgets */
+}
+
+/* Estilos da scrollbar */
+::-webkit-scrollbar {
+  width: 9px;
+  height: 20px;
+  background-color: transparent; /* Agora a scrollbar é transparente */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(181, 26, 26, 0.318);
+  border-radius: 10px;
+  transition: background-color 0.3s ease; /* Efeito de transição suave */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(181, 26, 26, 0.6); /* Efeito de cor mais destacada quando passar o mouse */
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent; /* Fundo da track também transparente */
+}
+
+/* Elementos comuns */
+.text-field-container__text-field--dark,
+.text-field-container__text-field--primary,
+.header__search,
+.game-item,
+.settings__content,
+.catalogue__filters-container,
+.friends-box__box,
+.user-stats__box,
+.recent-games__box,
+.sidebar {
+  background-color: rgba(89, 2, 2, 0.168) !important;
+  backdrop-filter: blur(10px);
+  border-radius: 6px; /* Arredondamento dos elementos comuns */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza a mudança de fundo e a transformação */
+}
+
+.settings-download-sources__item,
+.download-group__item,
+.game-item {
+  background-color: rgba(95, 1, 1, 0.692) !important;
+  border-radius: 30px; /* Arredondamento dos itens de download e dos itens de jogo */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza o efeito de transformação */
+}
+
+/* Efeitos de hover e foco */
+.game-item:hover,
+.text-field-container__text-field--dark:hover,
+.text-field-container__text-field--primary:hover,
+.button:hover {
+  border-radius: 15px; /* Garantir que o hover mantenha o arredondamento */
+  background-color: rgba(181, 26, 26, 0.518); /* Alteração sutil do fundo no hover */
+  transform: translateY(-2px); /* Levanta o item sutilmente */
+  cursor: pointer;
+  transition: all 0.3s ease; /* Transição suave */
+}
+
+.game-item:active,
+.text-field-container__text-field--dark:active,
+.text-field-container__text-field--primary:active,
+.button:active {
+  transform: translateY(2px); /* Efeito ao clicar */
+}
+
+.text-field-container__text-field--dark,
+.text-field-container__text-field--primary {
+  transition: border-color 0.3s ease; /* Transição suave para bordas */
+}
+
+.text-field-container__text-field--dark:focus,
+.text-field-container__text-field--primary:focus {
+  border-color: #b60000; /* Cor suave no foco */
+  box-shadow: 0 0 10px rgba(182, 0, 0, 0.5); /* Sombra suave no foco */
+}
+
+/* Efeitos ao passar o mouse em cima de textos */
+.text-field-container__text-field--dark:hover,
+.text-field-container__text-field--primary:hover {
+  border-color: rgba(182, 0, 0, 0.7);
+  background-color: rgba(174, 166, 0, 0.326);
+}
+
+.game-item .game-description {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.game-item:hover .game-description {
+  opacity: 0.8; /* Deixa a descrição mais sutil quando o mouse passar por cima */
+  transform: translateY(5px); /* Move a descrição suavemente para cima */
+}
+
+.game-item:active .game-description {
+  opacity: 1;
+  transform: translateY(0px);
+}
+
+/* Foto de perfil */
+.profile-picture {
+  border-radius: 100%; /* Arredondar a imagem de perfil para que seja circular */
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para zoom e sombra */
+}
+
+.profile-picture:hover {
+  transform: scale(1.05); /* Leve aumento da imagem ao passar o mouse */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra suave ao passar o mouse */
+}
+
+/* Banner do perfil */
+.profile-banner {
+  border-radius: 15px; /* Bordas arredondadas de forma sutil no banner */
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para zoom e sombra */
+}
+
+.profile-banner:hover {
+  transform: scale(1.02); /* Leve aumento do banner ao passar o mouse */
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Sombra suave ao passar o mouse */
+}
+
+/* Caixa de informações do perfil */
+.user-stats__box {
+  background-color: rgba(89, 2, 2, 0.388) !important;
+  backdrop-filter: blur(10px);
+  border-radius: 20px; /* Bordas arredondadas na caixa de informações */
+  padding: 10px;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.user-stats__box:hover {
+  transform: scale(1.02); /* Leve aumento ao passar o mouse */
+  background-color: rgba(89, 2, 2, 0.45); /* Leve escurecimento do fundo */
+}
+
+/* Efeito de transição suave para texto dentro do perfil */
+.profile-text {
+  font-size: 16px;
+  color: #fff;
+  transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease, text-shadow 0.3s ease; /* Inclui transição para text-shadow */
+}
+
+.profile-text:hover {
+  color: #ff2200; /* Mudança suave de cor ao passar o mouse */
+  transform: scale(1.05); /* Efeito de aproximação sutil ao passar o mouse */
+  text-shadow: 0 0 8px rgba(255, 204, 0, 0.6); /* Efeito de sombra sutil para destacar o texto sem blur */
+}
+
+/* Ajustando os ícones dos jogos na tela inicial para preencher completamente o card */
+.game-card {
+  border-radius: 40px; /* Deixa os cards mais arredondados */
+  overflow: hidden; /* Garante que nada ultrapasse as bordas */
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Sombreamento suave */
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)); /* Fundo moderno */
+  padding: 0; /* Remove padding que pode afetar o preenchimento da imagem */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.game-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);
+}
+
+/* Ajuste das imagens dentro dos cards para cobrir toda a área */
+.game-card img {
+  border-radius: 40px; /* Mantém o arredondamento */
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* Faz com que a imagem preencha todo o espaço sem cortes */
+  position: absolute; /* Posiciona a imagem corretamente */
+}
+
+/* Ajustando os botões e textos dentro dos cards */
+.game-card .game-info {
+  position: relative; /* Para manter os textos acima da imagem */
+  padding: 10px;
+  border-radius: 15px;
+  background: rgba(0, 0, 0, 0.7);
+  color: rgb(195, 255, 0);
+  text-align: center;
+  font-size: 14px;
+}
+
+/* Ajustando tags de categorias dos jogos */
+.game-card .game-tags {
+  position: relative; /* Mantém as tags visíveis sobre a imagem */
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  justify-content: center;
+  z-index: 2; /* Garante que fiquem acima da imagem */
+}
+
+.game-card .game-tags span {
+  background: rgba(215, 204, 0, 0.726);
+  padding: 5px 10px;
+  border-radius: 15px;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+/* Melhorando responsividade */
+@media (max-width: 768px) {
+  .game-card {
+    border-radius: 15px;
+  }
+  
+  .game-card img {
+    border-radius: 15px;
+  }
+
+  .game-card .game-info {
+    font-size: 15px;
+  }
+  
+  .game-card .game-tags span {
+    font-size: 15px;
+  }
+}
+
+/* Adicionando arredondamento ao avatar do perfil */
+.profile-avatar {
+  border-radius: 50%;
+  overflow: visible;
+  width: 100px; /* Ajuste conforme necessário */
+  height: 100px; /* Ajuste conforme necessário */
+  border: 4px solid rgba(255, 0, 0, 0.186); /* Opcional: borda sutil */
+   background-color: transparent; /* Remove qualquer fundo padrão */
+  box-shadow: none; /* Remove sombras indesejadas */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 10px;
+}
+
+
+/* Efeito Neon */
+.profile-avatar::before {
+  content: "";
+  position: absolute;
+  top: -8px;
+    left: -8px;
+    right: -8px;
+    bottom: -8px;
+  inset: -8px; /* Define um espaço externo ao avatar */
+  border-radius: 50%;
+  border: 3px solid rgba(255, 0, 0, 0.8);
+  box-shadow: 0 0 20px 5px rgba(255, 0, 0, 0.8);
+  animation: pulse 1.5s infinite alternate ease-in-out;
+  z-index: -1; /* Coloca a borda atrás do avatar */
+}
+
+/* Animação de pulsação */
+@keyframes pulse {
+  0% {
+    border-color: rgba(255, 0, 0, 0.6);
+    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
+  }
+  100% {
+    border-color: rgba(255, 0, 0, 1);
+    box-shadow: 0 0 20px rgba(255, 0, 0, 1);
+  }
+}
+.profile-avatar img {
+  width: 100%; /* Garante que a imagem ocupe todo o espaço do avatar */
+  height: 100%; /* Garante que a imagem ocupe todo o espaço do avatar */
+  object-fit: cover; /* Faz com que a imagem preencha o espaço sem distorção */
+  display: block; /* Remove espaços extras abaixo da imagem */
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.hero {
+  border-radius: 20px; /* Ajuste o valor conforme necessário */
+  overflow: visible; /* Garante que a imagem dentro do banner também fique arredondada */
+}
+
+.avatar-container {
+  background: transparent !important;
+  box-shadow: none !important;
+  position: relative;
+  overflow: visible;
+}
+
+::-webkit-scrollbar {
+  width: 8px; /* Largura da scrollbar */
+  border-radius: 10px; /* Deixa a barra arredondada */
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.2); /* Fundo da trilha da scrollbar */
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(88, 0, 0, 0.8); /* Cor da barra */
+  border-radius: 10px; /* Deixa a barra arredondada */
+  border: 2px solid rgba(0, 0, 0, 0.2); /* Evita que vaze da margem */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 213, 0, 0.179); /* Cor ao passar o mouse */
+}
+
+.sidebar-profile__friends-button {
+    color: #00bad2;
+    border-radius: 50%;
+    width: 40px;
+    min-width: 40px;
+    min-height: 40px;
+    height: 40px;
+    background-color: #45000000;
+    position: relative;
+    transition: all ease 0.3s;
+}
+
+.modal {
+    animation: scale-fade-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+    background-color: #33000042;
+    border-radius: 30px;
+    min-width: 400px;
+    max-width: 600px;
+    color: #8e919b;
+    max-height: 100%;
+    border: solid 1px rgba(184, 153, 0, 0);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    backdrop-filter: blur(20px);
+}
+
+.button {
+    padding: 12px 20px;
+    background-color: #adaa00d4;
+    border-radius: 30px;
+    border: solid 1px transparent;
+    transition: all ease 0.2s;
+    cursor: pointer;
+    min-height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.container__content .button--outline {
+    backdrop-filter: blur(10px);
+    background-color: rgba(0, 0, 0, 0.66);
+    border-radius: 30px;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.hero {
+    width: 100%;
+    height: 350px;
+    min-height: 480px;
+    max-height: 480px;
+    border-radius: 60px;
+    color: #dadbe1;
+    overflow: hidden;
+    box-shadow: 0px 0px 15px 0px #4e00008d;
+    cursor: pointer;
+    border: solid 1px rgba(255, 255, 255, 0.15);
+    z-index: 1;
+}
+
+.game-details__description-container {
+    display: flex;
+    width: 100%;
+    flex: 1;
+    background: linear-gradient(0deg, #000000d5 50%, #000000 100%);
+}
+
+.container__content {
+    color: hwb(62 0% 27% / 0.834);
+}
+
+element.style {
+    background-color: rgb(0, 0, 0);
+}
+
+.hero-panel {border-bottom: solid 1px rgba(84, 77, 0, 0.463);
+position: relative;
+    overflow: hidden;
+    top: 0;
+    z-index: 2;
+}
+
+.content-sidebar {
+    border-left: solid 1px rgb(0 0 0 / 15%);
+    background-color: #000000e6;
+    width: 100%;
+    height: 100%;
+}
+
+.sidebar-section__button {
+    background-color: #000000e6;
+    color: #d0c600d2;
+}
+
+.description-header {background-color: #000000b8;
+}
+
+.checkbox-field__checkbox {
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
+    border-radius: 10px;
+    background-color: #75790052;
+    border: solid 1px rgba(0, 0, 0, 0.404);
+}
+
+.button {
+    padding: 12px 20px;
+    background-color: #7b00006d; /* Cor final aplicada */
+    border-radius: 30px;
+    border: 1px solid transparent;
+}
+
+.home__content {
+    background-color: rgba(151, 2, 2, 0.066);
+    backdrop-filter: blur(10px);
+    border-radius: 0px;
+}
+.home__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 24px;
+    flex: 1;
+    overflow-y: auto;
+}
+
+.text-field-container__text-field--drk, .text-field-container__text-field--primary, .header__search, .game-item, .settings__content, .catalogue__filters-container, .friends-box__box, .user-stats__box, .recent-games__box, .sidebar {
+    background-color: rgba(96, 0, 0, 0.245) !important;
+    backdrop-filter: blur(10px);
+    border-radius: 10px;
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.theme-card {
+    width: 100%;
+    min-height: 160px;
+    display: flex;
+    flex-direction: column;border: 1px solid rgba(226, 226, 226, 0.15);
+    border-radius: 40px;
+    gap: 4px;
+    transition: background-color 0.2s ease;
+    padding: 16px;
+    position: relative;
+}
+
+.sidebar__handle {
+    width: 5px;
+    height: 100%;
+    cursor: col-resize;
+    position: absolute;
+    right: 0;
+}
+button {
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    font-family: inherit;
+}
+
+.title-bar{
+  font-size: 0.4cm;
+  font-family: 'verdana';
+  transition: background-color 0.3s ease;
+  border: none;
+}
+
+/* Efeitos de hover e foco */
+.game-item:hover,
+.text-field-container__text-field--dark:hover,
+.text-field-container__text-field--primary:hover,
+.button:hover {
+  border-radius: 30px;
+  background-color: rgba(93, 0, 0, 0.52);
+  transform: translateY(-2px);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+/* Efeito de blur e animação para itens de download e jogos */
+.settings-download-sources__item,
+.download-group__item,
+.game-item {
+  background-color: rgba(95, 1, 1, 0.184) !important;
+  border-radius: 30px;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+  overflow: hidden; /* Garante que o conteúdo interno não ultrapasse as bordas arredondadas */
+  position: relative; /* Permite posicionar o pseudo-elemento corretamente */
+}
+
+/* Pseudo-elemento para aplicar o blur */
+.settings-download-sources__item::before,
+.download-group__item::before,
+.game-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(5px); /* Efeito de blur */
+  z-index: -1; /* Coloca o blur atrás do conteúdo */
+  border-radius: 30px; /* Mantém o arredondamento */
+}
+
+/* Efeito de hover para itens de download e jogos */
+.settings-download-sources__item:hover,
+.download-group__item:hover,
+.game-item:hover {
+  transform: scale(1.02) translateY(-2px); /* Aumenta levemente o tamanho e levanta o item */
+  background-color: rgba(34, 0, 0, 0.34) !important; /* Fundo mais escuro ao passar o mouse */
+}
+
+element.style {
+    width: 96px;
+    height: 96px;
+}
+
+.profile-hero__avatar-button {
+    width: 96px;
+    min-width: 96px;
+    height: 96px;
+    border-radius: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #ffffff00;
+    border: solid 1px rgba(255, 255, 255, 0.15);
+    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.7);
+    cursor: pointer;
+    transition: all ease 0.3s;
+    color: #c0c1c7;
+    position: relative;
+}
+
+
+.edit-profile-modal__avatar-container {
+    align-self: center;
+    display: flex;
+    color: #8e919b00;
+    justify-content: center;
+    align-items: center;
+    /* background-color: #1c1c1c; */
+    position: relative;
+    cursor: pointer;
+    background-color: #1c1c1c00;
+}
+style
+button {
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    font-family: inherit;
+}
+
+
+.sidebar-profile__button {
+    display: flex;
+    cursor: pointer;
+    transition: all ease 0.1s;
+    color: #ffffffa0;
+    width: 100%;
+    padding: 8px 8px;
+    overflow: hidden;
+    border-radius: 50px;
+}
+
+.achievement-panel {
+    width: 100%;
+    padding: 16px 24px;
+    background-color: #2e1d01a1;
+}
+
+
+.achievements__list {background-color: #000000;
+}
+
+
+.achievements-content__user-summary__container__stats {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    color: #8b8400bf;
+}
+
+.dropdown-menu__content {
+    background-color: #1515156b;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 20px;
+    min-width: 200px;
+}
+
+
+.dropdown-menu__separator {
+    width: 100%;
+    height: 1px;
+    background-color: rgba(0, 0, 0, 0.829);
+}
+
+.dropdown-menu__item {border-radius: 40px;
+    padding: 5px 12px;
+    cursor: pointer;
+    transition: background-color 0.1s ease-in-out;
+    font-size: 14px;
+}
+
+.checkbox-field__checkbox {
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
+    border-radius: 10px;
+    background-color: #47000052;
+    border: solid 1px rgba(0, 0, 0, 0.404);
+}
+
+element.style {
+    background-color: rgb(65 157 0);
+}
+
+element.style {
+    background-color: rgb(204 92 0);
+}
+
+element.style {
+    background-color: rgb(0 151 171);
+}
+
+
+.friends-box__list-item {
+    display: flex;
+    cursor: pointer;
+    transition: all ease 0.1s;
+    color: #c0c1c7;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 50px;
+    padding: 12px;
+    gap: 16px;
+    align-items: center;
+}
+
+.game-card {
+    border-radius: 40px;
+    overflow: hidden;
+    box-shadow: 0px 4px 10px rgba(87, 0, 0, 0.4)
+}
+
+.edit-profile-modal__avatar-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0);
+    color: #c0c1c7;
+}
+
+.cloud-sync-modal__artifact {
+    display: flex;
+    text-align: left;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    color: #dfba00;
+    padding: 16px;
+    background-color: #000000;
+    border: 1px solid rgba(77, 0, 0, 0.796);
+    border-radius: 30px;
+}
+
+.game-details__cloud-sync-button {
+    padding: 12px 16px;
+    background-color: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(20px);
+    border-radius: 30px;
+}
\ No newline at end of file


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

Added a new PhantomLiberty theme featuring a dark red and gold aesthetic with extensive UI component styling. Here are the key points:

- Inconsistent border-radius values (ranging from 0px to 80px) across components could affect visual harmony
- Redundant CSS selectors and properties, particularly for background-color and border-radius declarations
- Multiple overlapping backdrop-filter blur effects (3px, 6px, 10px) may impact performance
- Hardcoded color values instead of CSS variables make theme customization difficult
- Excessive use of !important flags (over 20 instances) could cause specificity issues

<sub>💡 (2/5) Greptile learns from your feedback when you react with 👍/👎!</sub>

<sub>1 file(s) reviewed, 3 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_328)</sub>
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-08T04:29:12Z

Review comments:
diff_hunk: @@ -0,0 +1,825 @@
+/*asstro lyk*/
+
+/* Reset básico */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Estilos globais */
+html, body, #root, main {
+  height: 100%;
+}
+
+body {
+  font-family: 'Noto Sans', sans-serif, Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 15px;
+  font-weight: 400;
+  color: #b6000079;
+  background-color: rgba(123, 0, 0, 0.534);
+  border-radius: 10px; /* Arredondamento do body */
+  overflow: hidden;
+  user-select: none;
+  transition: background-color 0.5s ease-in-out; /* Suaviza mudança de cor do background */
+  border-bottom: solid 1px rgb(122 104 0 / 43%);
+}
+
+/* Container principal */
+#root {
+  background: #5300007b url("https://w.wallhaven.cc/full/5g/wallhaven-5gj5j8.jpg") no-repeat center center;
+  background-size: cover;
+  border-radius: 30px; /* Arredondamento do container principal */
+  transition: transform 0.3s ease, opacity 0.3s ease; /* Suaviza transformações e transições */
+}
+
+/* Header */
+.header {
+  background: #7600000f !important;
+  backdrop-filter: blur(10px);
+  border-radius: 0px; /* Arredondamento do header */
+  transition: background-color 0.3s ease; /* Suaviza a transição de cor */
+  color: #aeae00;
+  width: 100%;
+    padding: 16px 24px;
+    gap: 16px;
+}
+
+/* Sidebar */
+.sidebar {
+  background: transparent !important;
+  background-color: rgba(90, 2, 2, 0.281) !important;
+  backdrop-filter: blur(6px);
+  border-radius: 30px; /* Arredondamento da sidebar */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza a mudança de cor de fundo e transição */
+  border-right: solid 1px rgba(153, 0, 0, 0.292);
+}
+
+
+
+/* Conteúdo principal */
+.container__content {
+  color: hwb(63 0% 26%);
+  background: transparent !important;
+  border-radius: 0px; /* Arredondamento do conteúdo principal */
+  transition: background-color 0.3s ease; /* Suaviza a mudança de cor de fundo */
+}
+
+/* Painel inferior */
+.bottom-panel {
+  background: transparent !important;
+  background-color: rgba(69, 0, 0, 0.46);
+  backdrop-filter: blur(3px);
+  border-radius: 30px; /* Arredondamento do painel inferior */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza a transição de transformação */
+}
+
+/* Toast */
+.toast {
+  border-radius: 30px; /* Arredondamento do toast */
+  transition: transform 0.3s ease, opacity 0.3s ease; /* Suaviza a transformação do toast */
+}
+
+/* Botões */
+.button {
+  border-radius: 30px; /* Arredondamento dos botões */
+  transition: background-color 0.3s ease, transform 0.3s ease; /* Efeito de transição suave ao clicar */
+}
+
+.container__content .button--outline {
+  backdrop-filter: blur(10px);
+  background-color: rgba(89, 0, 0, 0.523);
+  border-radius: 30px; /* Arredondamento dos botões outline */
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+/* Barra de título */
+.title-bar {
+  background-color: #7600000f;
+  backdrop-filter: blur(10px);
+  border-radius: 30px; /* Arredondamento da barra de título */
+  transition: background-color 0.3s ease; /* Transição suave da cor de fundo */
+}
+
+/* Conteúdo da página inicial */
+.home__content {
+  background-color: rgba(151, 2, 34, 0.237);
+  backdrop-filter: blur(3px);
+  border-radius: 30px; /* Arredondamento do conteúdo da página inicial */
+}
+
+/* Widget Featurebase */
+.featurebase-widget {
+  --featurebase-widget-max-height: 700px;
+  --featurebase-widget-bottom: 75px;
+  --featurebase-widget-height: 75vh;
+  --featurebase-widget-width: 420px;
+  --featurebase-widget-border-radius: 80px; /* Não alterar o border-radius dos widgets */
+  transition: transform 0.3s ease, opacity 0.3s ease; /* Suaviza a transformação do widget */
+}
+
+.featurebase-widget.featurebase-right {
+  --featurebase-widget-button-left: auto;
+  --featurebase-widget-button-right: 15px;
+  --featurebase-widget-left: auto;
+  --featurebase-widget-right: 15px;
+  --featurebase-widget-fullscreen-x-left: auto;
+  --featurebase-widget-fullscreen-x-right: 30px;
+}
+
+.featurebase-widget.featurebase-fullscreen {
+  --featurebase-widget-max-height: 100%;
+  --featurebase-widget-width: 580px;
+  --featurebase-widget-bottom: 0px;
+  --featurebase-widget-height: 100vh;
+  --featurebase-widget-border-radius: 0px; /* Não alterar o border-radius dos widgets */
+}
+
+/* Estilos da scrollbar */
+::-webkit-scrollbar {
+  width: 9px;
+  height: 20px;
+  background-color: transparent; /* Agora a scrollbar é transparente */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(181, 26, 26, 0.318);
+  border-radius: 10px;
+  transition: background-color 0.3s ease; /* Efeito de transição suave */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(181, 26, 26, 0.6); /* Efeito de cor mais destacada quando passar o mouse */
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent; /* Fundo da track também transparente */
+}
+
+/* Elementos comuns */
+.text-field-container__text-field--dark,
+.text-field-container__text-field--primary,
+.header__search,
+.game-item,
+.settings__content,
+.catalogue__filters-container,
+.friends-box__box,
+.user-stats__box,
+.recent-games__box,
+.sidebar {
+  background-color: rgba(89, 2, 2, 0.168) !important;
+  backdrop-filter: blur(10px);
+  border-radius: 6px; /* Arredondamento dos elementos comuns */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza a mudança de fundo e a transformação */
+}
+
+.settings-download-sources__item,
+.download-group__item,
+.game-item {
+  background-color: rgba(95, 1, 1, 0.692) !important;
+  border-radius: 30px; /* Arredondamento dos itens de download e dos itens de jogo */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza o efeito de transformação */
+}
+
+/* Efeitos de hover e foco */
+.game-item:hover,
+.text-field-container__text-field--dark:hover,
+.text-field-container__text-field--primary:hover,
+.button:hover {
+  border-radius: 15px; /* Garantir que o hover mantenha o arredondamento */
+  background-color: rgba(181, 26, 26, 0.518); /* Alteração sutil do fundo no hover */
+  transform: translateY(-2px); /* Levanta o item sutilmente */
+  cursor: pointer;
+  transition: all 0.3s ease; /* Transição suave */
+}
+
+.game-item:active,
+.text-field-container__text-field--dark:active,
+.text-field-container__text-field--primary:active,
+.button:active {
+  transform: translateY(2px); /* Efeito ao clicar */
+}
+
+.text-field-container__text-field--dark,
+.text-field-container__text-field--primary {
+  transition: border-color 0.3s ease; /* Transição suave para bordas */
+}
+
+.text-field-container__text-field--dark:focus,
+.text-field-container__text-field--primary:focus {
+  border-color: #b60000; /* Cor suave no foco */
+  box-shadow: 0 0 10px rgba(182, 0, 0, 0.5); /* Sombra suave no foco */
+}
+
+/* Efeitos ao passar o mouse em cima de textos */
+.text-field-container__text-field--dark:hover,
+.text-field-container__text-field--primary:hover {
+  border-color: rgba(182, 0, 0, 0.7);
+  background-color: rgba(174, 166, 0, 0.326);
+}
+
+.game-item .game-description {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.game-item:hover .game-description {
+  opacity: 0.8; /* Deixa a descrição mais sutil quando o mouse passar por cima */
+  transform: translateY(5px); /* Move a descrição suavemente para cima */
+}
+
+.game-item:active .game-description {
+  opacity: 1;
+  transform: translateY(0px);
+}
+
+/* Foto de perfil */
+.profile-picture {
+  border-radius: 100%; /* Arredondar a imagem de perfil para que seja circular */
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para zoom e sombra */
+}
+
+.profile-picture:hover {
+  transform: scale(1.05); /* Leve aumento da imagem ao passar o mouse */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra suave ao passar o mouse */
+}
+
+/* Banner do perfil */
+.profile-banner {
+  border-radius: 15px; /* Bordas arredondadas de forma sutil no banner */
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para zoom e sombra */
+}
+
+.profile-banner:hover {
+  transform: scale(1.02); /* Leve aumento do banner ao passar o mouse */
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Sombra suave ao passar o mouse */
+}
+
+/* Caixa de informações do perfil */
+.user-stats__box {
+  background-color: rgba(89, 2, 2, 0.388) !important;
+  backdrop-filter: blur(10px);
+  border-radius: 20px; /* Bordas arredondadas na caixa de informações */
+  padding: 10px;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.user-stats__box:hover {
+  transform: scale(1.02); /* Leve aumento ao passar o mouse */
+  background-color: rgba(89, 2, 2, 0.45); /* Leve escurecimento do fundo */
+}
+
+/* Efeito de transição suave para texto dentro do perfil */
+.profile-text {
+  font-size: 16px;
+  color: #fff;
+  transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease, text-shadow 0.3s ease; /* Inclui transição para text-shadow */
+}
+
+.profile-text:hover {
+  color: #ff2200; /* Mudança suave de cor ao passar o mouse */
+  transform: scale(1.05); /* Efeito de aproximação sutil ao passar o mouse */
+  text-shadow: 0 0 8px rgba(255, 204, 0, 0.6); /* Efeito de sombra sutil para destacar o texto sem blur */
+}
+
+/* Ajustando os ícones dos jogos na tela inicial para preencher completamente o card */
+.game-card {
+  border-radius: 40px; /* Deixa os cards mais arredondados */
+  overflow: hidden; /* Garante que nada ultrapasse as bordas */
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Sombreamento suave */
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)); /* Fundo moderno */
+  padding: 0; /* Remove padding que pode afetar o preenchimento da imagem */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.game-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);
+}
+
+/* Ajuste das imagens dentro dos cards para cobrir toda a área */
+.game-card img {
+  border-radius: 40px; /* Mantém o arredondamento */
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* Faz com que a imagem preencha todo o espaço sem cortes */
+  position: absolute; /* Posiciona a imagem corretamente */
+}
+
+/* Ajustando os botões e textos dentro dos cards */
+.game-card .game-info {
+  position: relative; /* Para manter os textos acima da imagem */
+  padding: 10px;
+  border-radius: 15px;
+  background: rgba(0, 0, 0, 0.7);
+  color: rgb(195, 255, 0);
+  text-align: center;
+  font-size: 14px;
+}
+
+/* Ajustando tags de categorias dos jogos */
+.game-card .game-tags {
+  position: relative; /* Mantém as tags visíveis sobre a imagem */
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  justify-content: center;
+  z-index: 2; /* Garante que fiquem acima da imagem */
+}
+
+.game-card .game-tags span {
+  background: rgba(215, 204, 0, 0.726);
+  padding: 5px 10px;
+  border-radius: 15px;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+/* Melhorando responsividade */
+@media (max-width: 768px) {
+  .game-card {
+    border-radius: 15px;
+  }
+  
+  .game-card img {
+    border-radius: 15px;
+  }
+
+  .game-card .game-info {
+    font-size: 15px;
+  }
+  
+  .game-card .game-tags span {
+    font-size: 15px;
+  }
+}
+
+/* Adicionando arredondamento ao avatar do perfil */
+.profile-avatar {
+  border-radius: 50%;
+  overflow: visible;
+  width: 100px; /* Ajuste conforme necessário */
+  height: 100px; /* Ajuste conforme necessário */
+  border: 4px solid rgba(255, 0, 0, 0.186); /* Opcional: borda sutil */
+   background-color: transparent; /* Remove qualquer fundo padrão */
+  box-shadow: none; /* Remove sombras indesejadas */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 10 px;
path: themes/PhantomLiberty-B5gZwxwQ/theme.css
user: login: greptile-apps[bot]
body: syntax: Invalid CSS syntax: space between '10' and 'px' in margin-bottom value

```suggestion
  margin-bottom: 10px;
```
created_at: 2025-03-08T04:28:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,825 @@
+/*asstro lyk*/
+
+/* Reset básico */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Estilos globais */
+html, body, #root, main {
+  height: 100%;
+}
+
+body {
+  font-family: 'Noto Sans', sans-serif, Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 15px;
+  font-weight: 400;
+  color: #b6000079;
+  background-color: rgba(123, 0, 0, 0.534);
+  border-radius: 10px; /* Arredondamento do body */
+  overflow: hidden;
+  user-select: none;
+  transition: background-color 0.5s ease-in-out; /* Suaviza mudança de cor do background */
+  border-bottom: solid 1px rgb(122 104 0 / 43%);
+}
+
+/* Container principal */
+#root {
+  background: #5300007b url("https://w.wallhaven.cc/full/5g/wallhaven-5gj5j8.jpg") no-repeat center center;
+  background-size: cover;
+  border-radius: 30px; /* Arredondamento do container principal */
+  transition: transform 0.3s ease, opacity 0.3s ease; /* Suaviza transformações e transições */
+}
+
+/* Header */
+.header {
+  background: #7600000f !important;
+  backdrop-filter: blur(10px);
+  border-radius: 0px; /* Arredondamento do header */
+  transition: background-color 0.3s ease; /* Suaviza a transição de cor */
+  color: #aeae00;
+  width: 100%;
+    padding: 16px 24px;
+    gap: 16px;
+}
+
+/* Sidebar */
+.sidebar {
+  background: transparent !important;
+  background-color: rgba(90, 2, 2, 0.281) !important;
+  backdrop-filter: blur(6px);
+  border-radius: 30px; /* Arredondamento da sidebar */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza a mudança de cor de fundo e transição */
+  border-right: solid 1px rgba(153, 0, 0, 0.292);
+}
+
+
+
+/* Conteúdo principal */
+.container__content {
+  color: hwb(63 0% 26%);
+  background: transparent !important;
+  border-radius: 0px; /* Arredondamento do conteúdo principal */
+  transition: background-color 0.3s ease; /* Suaviza a mudança de cor de fundo */
+}
+
+/* Painel inferior */
+.bottom-panel {
+  background: transparent !important;
+  background-color: rgba(69, 0, 0, 0.46);
+  backdrop-filter: blur(3px);
+  border-radius: 30px; /* Arredondamento do painel inferior */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza a transição de transformação */
+}
+
+/* Toast */
+.toast {
+  border-radius: 30px; /* Arredondamento do toast */
+  transition: transform 0.3s ease, opacity 0.3s ease; /* Suaviza a transformação do toast */
+}
+
+/* Botões */
+.button {
+  border-radius: 30px; /* Arredondamento dos botões */
+  transition: background-color 0.3s ease, transform 0.3s ease; /* Efeito de transição suave ao clicar */
+}
+
+.container__content .button--outline {
+  backdrop-filter: blur(10px);
+  background-color: rgba(89, 0, 0, 0.523);
+  border-radius: 30px; /* Arredondamento dos botões outline */
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+/* Barra de título */
+.title-bar {
+  background-color: #7600000f;
+  backdrop-filter: blur(10px);
+  border-radius: 30px; /* Arredondamento da barra de título */
+  transition: background-color 0.3s ease; /* Transição suave da cor de fundo */
+}
+
+/* Conteúdo da página inicial */
+.home__content {
+  background-color: rgba(151, 2, 34, 0.237);
+  backdrop-filter: blur(3px);
+  border-radius: 30px; /* Arredondamento do conteúdo da página inicial */
+}
+
+/* Widget Featurebase */
+.featurebase-widget {
+  --featurebase-widget-max-height: 700px;
+  --featurebase-widget-bottom: 75px;
+  --featurebase-widget-height: 75vh;
+  --featurebase-widget-width: 420px;
+  --featurebase-widget-border-radius: 80px; /* Não alterar o border-radius dos widgets */
+  transition: transform 0.3s ease, opacity 0.3s ease; /* Suaviza a transformação do widget */
+}
+
+.featurebase-widget.featurebase-right {
+  --featurebase-widget-button-left: auto;
+  --featurebase-widget-button-right: 15px;
+  --featurebase-widget-left: auto;
+  --featurebase-widget-right: 15px;
+  --featurebase-widget-fullscreen-x-left: auto;
+  --featurebase-widget-fullscreen-x-right: 30px;
+}
+
+.featurebase-widget.featurebase-fullscreen {
+  --featurebase-widget-max-height: 100%;
+  --featurebase-widget-width: 580px;
+  --featurebase-widget-bottom: 0px;
+  --featurebase-widget-height: 100vh;
+  --featurebase-widget-border-radius: 0px; /* Não alterar o border-radius dos widgets */
+}
+
+/* Estilos da scrollbar */
+::-webkit-scrollbar {
+  width: 9px;
+  height: 20px;
+  background-color: transparent; /* Agora a scrollbar é transparente */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(181, 26, 26, 0.318);
+  border-radius: 10px;
+  transition: background-color 0.3s ease; /* Efeito de transição suave */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(181, 26, 26, 0.6); /* Efeito de cor mais destacada quando passar o mouse */
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent; /* Fundo da track também transparente */
+}
+
+/* Elementos comuns */
+.text-field-container__text-field--dark,
+.text-field-container__text-field--primary,
+.header__search,
+.game-item,
+.settings__content,
+.catalogue__filters-container,
+.friends-box__box,
+.user-stats__box,
+.recent-games__box,
+.sidebar {
+  background-color: rgba(89, 2, 2, 0.168) !important;
+  backdrop-filter: blur(10px);
+  border-radius: 6px; /* Arredondamento dos elementos comuns */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza a mudança de fundo e a transformação */
+}
+
+.settings-download-sources__item,
+.download-group__item,
+.game-item {
+  background-color: rgba(95, 1, 1, 0.692) !important;
+  border-radius: 30px; /* Arredondamento dos itens de download e dos itens de jogo */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza o efeito de transformação */
+}
+
+/* Efeitos de hover e foco */
+.game-item:hover,
+.text-field-container__text-field--dark:hover,
+.text-field-container__text-field--primary:hover,
+.button:hover {
+  border-radius: 15px; /* Garantir que o hover mantenha o arredondamento */
+  background-color: rgba(181, 26, 26, 0.518); /* Alteração sutil do fundo no hover */
+  transform: translateY(-2px); /* Levanta o item sutilmente */
+  cursor: pointer;
+  transition: all 0.3s ease; /* Transição suave */
+}
+
+.game-item:active,
+.text-field-container__text-field--dark:active,
+.text-field-container__text-field--primary:active,
+.button:active {
+  transform: translateY(2px); /* Efeito ao clicar */
+}
+
+.text-field-container__text-field--dark,
+.text-field-container__text-field--primary {
+  transition: border-color 0.3s ease; /* Transição suave para bordas */
+}
+
+.text-field-container__text-field--dark:focus,
+.text-field-container__text-field--primary:focus {
+  border-color: #b60000; /* Cor suave no foco */
+  box-shadow: 0 0 10px rgba(182, 0, 0, 0.5); /* Sombra suave no foco */
+}
+
+/* Efeitos ao passar o mouse em cima de textos */
+.text-field-container__text-field--dark:hover,
+.text-field-container__text-field--primary:hover {
+  border-color: rgba(182, 0, 0, 0.7);
+  background-color: rgba(174, 166, 0, 0.326);
+}
+
+.game-item .game-description {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.game-item:hover .game-description {
+  opacity: 0.8; /* Deixa a descrição mais sutil quando o mouse passar por cima */
+  transform: translateY(5px); /* Move a descrição suavemente para cima */
+}
+
+.game-item:active .game-description {
+  opacity: 1;
+  transform: translateY(0px);
+}
+
+/* Foto de perfil */
+.profile-picture {
+  border-radius: 100%; /* Arredondar a imagem de perfil para que seja circular */
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para zoom e sombra */
+}
+
+.profile-picture:hover {
+  transform: scale(1.05); /* Leve aumento da imagem ao passar o mouse */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra suave ao passar o mouse */
+}
+
+/* Banner do perfil */
+.profile-banner {
+  border-radius: 15px; /* Bordas arredondadas de forma sutil no banner */
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para zoom e sombra */
+}
+
+.profile-banner:hover {
+  transform: scale(1.02); /* Leve aumento do banner ao passar o mouse */
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Sombra suave ao passar o mouse */
+}
+
+/* Caixa de informações do perfil */
+.user-stats__box {
+  background-color: rgba(89, 2, 2, 0.388) !important;
+  backdrop-filter: blur(10px);
+  border-radius: 20px; /* Bordas arredondadas na caixa de informações */
+  padding: 10px;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.user-stats__box:hover {
+  transform: scale(1.02); /* Leve aumento ao passar o mouse */
+  background-color: rgba(89, 2, 2, 0.45); /* Leve escurecimento do fundo */
+}
+
+/* Efeito de transição suave para texto dentro do perfil */
+.profile-text {
+  font-size: 16px;
+  color: #fff;
+  transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease, text-shadow 0.3s ease; /* Inclui transição para text-shadow */
+}
+
+.profile-text:hover {
+  color: #ff2200; /* Mudança suave de cor ao passar o mouse */
+  transform: scale(1.05); /* Efeito de aproximação sutil ao passar o mouse */
+  text-shadow: 0 0 8px rgba(255, 204, 0, 0.6); /* Efeito de sombra sutil para destacar o texto sem blur */
+}
+
+/* Ajustando os ícones dos jogos na tela inicial para preencher completamente o card */
+.game-card {
+  border-radius: 40px; /* Deixa os cards mais arredondados */
+  overflow: hidden; /* Garante que nada ultrapasse as bordas */
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Sombreamento suave */
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)); /* Fundo moderno */
+  padding: 0; /* Remove padding que pode afetar o preenchimento da imagem */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.game-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);
+}
+
+/* Ajuste das imagens dentro dos cards para cobrir toda a área */
+.game-card img {
+  border-radius: 40px; /* Mantém o arredondamento */
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* Faz com que a imagem preencha todo o espaço sem cortes */
+  position: absolute; /* Posiciona a imagem corretamente */
+}
+
+/* Ajustando os botões e textos dentro dos cards */
+.game-card .game-info {
+  position: relative; /* Para manter os textos acima da imagem */
+  padding: 10px;
+  border-radius: 15px;
+  background: rgba(0, 0, 0, 0.7);
+  color: rgb(195, 255, 0);
+  text-align: center;
+  font-size: 14px;
+}
+
+/* Ajustando tags de categorias dos jogos */
+.game-card .game-tags {
+  position: relative; /* Mantém as tags visíveis sobre a imagem */
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  justify-content: center;
+  z-index: 2; /* Garante que fiquem acima da imagem */
+}
+
+.game-card .game-tags span {
+  background: rgba(215, 204, 0, 0.726);
+  padding: 5px 10px;
+  border-radius: 15px;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+/* Melhorando responsividade */
+@media (max-width: 768px) {
+  .game-card {
+    border-radius: 15px;
+  }
+  
+  .game-card img {
+    border-radius: 15px;
+  }
+
+  .game-card .game-info {
+    font-size: 15px;
+  }
+  
+  .game-card .game-tags span {
+    font-size: 15px;
+  }
+}
+
+/* Adicionando arredondamento ao avatar do perfil */
+.profile-avatar {
+  border-radius: 50%;
+  overflow: visible;
+  width: 100px; /* Ajuste conforme necessário */
+  height: 100px; /* Ajuste conforme necessário */
+  border: 4px solid rgba(255, 0, 0, 0.186); /* Opcional: borda sutil */
+   background-color: transparent; /* Remove qualquer fundo padrão */
+  box-shadow: none; /* Remove sombras indesejadas */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 10 px;
+}
+
+
+/* Efeito Neon */
+.profile-avatar::before {
+  content: "";
+  position: absolute;
+  top: -8px;
+    left: -8px;
+    right: -8px;
+    bottom: -8px;
+  inset: -8px; /* Define um espaço externo ao avatar */
+  border-radius: 50%;
+  border: 3px solid rgba(255, 0, 0, 0.8);
+  box-shadow: 0 0 20px 5px rgba(255, 0, 0, 0.8);
+  animation: pulse 1.5s infinite alternate ease-in-out;
+  z-index: -1; /* Coloca a borda atrás do avatar */
+}
+
+/* Animação de pulsação */
+@keyframes pulse {
+  0% {
+    border-color: rgba(255, 0, 0, 0.6);
+    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
+  }
+  100% {
+    border-color: rgba(255, 0, 0, 1);
+    box-shadow: 0 0 20px rgba(255, 0, 0, 1);
+  }
+}
+.profile-avatar img {
+  width: 100%; /* Garante que a imagem ocupe todo o espaço do avatar */
+  height: 100%; /* Garante que a imagem ocupe todo o espaço do avatar */
+  object-fit: cover; /* Faz com que a imagem preencha o espaço sem distorção */
+  display: block; /* Remove espaços extras abaixo da imagem */
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.hero {
+  border-radius: 20px; /* Ajuste o valor conforme necessário */
+  overflow: visible; /* Garante que a imagem dentro do banner também fique arredondada */
+}
+
+.avatar-container {
+  background: transparent !important;
+  box-shadow: none !important;
+  position: relative;
+  overflow: visible;
+}
+
+::-webkit-scrollbar {
+  width: 8px; /* Largura da scrollbar */
+  border-radius: 10px; /* Deixa a barra arredondada */
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.2); /* Fundo da trilha da scrollbar */
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(88, 0, 0, 0.8); /* Cor da barra */
+  border-radius: 10px; /* Deixa a barra arredondada */
+  border: 2px solid rgba(0, 0, 0, 0.2); /* Evita que vaze da margem */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 213, 0, 0.179); /* Cor ao passar o mouse */
+}
+
+.sidebar-profile__friends-button {
+    color: #00bad2;
+    border-radius: 50%;
+    width: 40px;
+    min-width: 40px;
+    min-height: 40px;
+    height: 40px;
+    background-color: #45000000;
+    position: relative;
+    transition: all ease 0.3s;
+}
+
+.modal {
+    animation: scale-fade-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+    background-color: #33000042;
+    border-radius: 30px;
+    min-width: 400px;
+    max-width: 600px;
+    color: #8e919b;
+    max-height: 100%;
+    border: solid 1px rgba(184, 153, 0, 0);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    backdrop-filter: blur (20px);
path: themes/PhantomLiberty-B5gZwxwQ/theme.css
user: login: greptile-apps[bot]
body: syntax: Invalid backdrop-filter syntax: extra space in 'blur (20px)'

```suggestion
    backdrop-filter: blur(20px);
```
created_at: 2025-03-08T04:28:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,825 @@
+/*asstro lyk*/
+
+/* Reset básico */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Estilos globais */
+html, body, #root, main {
+  height: 100%;
+}
+
+body {
+  font-family: 'Noto Sans', sans-serif, Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 15px;
+  font-weight: 400;
+  color: #b6000079;
+  background-color: rgba(123, 0, 0, 0.534);
+  border-radius: 10px; /* Arredondamento do body */
+  overflow: hidden;
+  user-select: none;
+  transition: background-color 0.5s ease-in-out; /* Suaviza mudança de cor do background */
+  border-bottom: solid 1px rgb(122 104 0 / 43%);
+}
+
+/* Container principal */
+#root {
+  background: #5300007b url("https://w.wallhaven.cc/full/5g/wallhaven-5gj5j8.jpg") no-repeat center center;
+  background-size: cover;
+  border-radius: 30px; /* Arredondamento do container principal */
+  transition: transform 0.3s ease, opacity 0.3s ease; /* Suaviza transformações e transições */
+}
+
+/* Header */
+.header {
+  background: #7600000f !important;
+  backdrop-filter: blur(10px);
+  border-radius: 0px; /* Arredondamento do header */
+  transition: background-color 0.3s ease; /* Suaviza a transição de cor */
+  color: #aeae00;
+  width: 100%;
+    padding: 16px 24px;
+    gap: 16px;
+}
+
+/* Sidebar */
+.sidebar {
+  background: transparent !important;
+  background-color: rgba(90, 2, 2, 0.281) !important;
+  backdrop-filter: blur(6px);
+  border-radius: 30px; /* Arredondamento da sidebar */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza a mudança de cor de fundo e transição */
+  border-right: solid 1px rgba(153, 0, 0, 0.292);
+}
+
+
+
+/* Conteúdo principal */
+.container__content {
+  color: hwb(63 0% 26%);
+  background: transparent !important;
+  border-radius: 0px; /* Arredondamento do conteúdo principal */
+  transition: background-color 0.3s ease; /* Suaviza a mudança de cor de fundo */
+}
+
+/* Painel inferior */
+.bottom-panel {
+  background: transparent !important;
+  background-color: rgba(69, 0, 0, 0.46);
+  backdrop-filter: blur(3px);
+  border-radius: 30px; /* Arredondamento do painel inferior */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza a transição de transformação */
+}
+
+/* Toast */
+.toast {
+  border-radius: 30px; /* Arredondamento do toast */
+  transition: transform 0.3s ease, opacity 0.3s ease; /* Suaviza a transformação do toast */
+}
+
+/* Botões */
+.button {
+  border-radius: 30px; /* Arredondamento dos botões */
+  transition: background-color 0.3s ease, transform 0.3s ease; /* Efeito de transição suave ao clicar */
+}
+
+.container__content .button--outline {
+  backdrop-filter: blur(10px);
+  background-color: rgba(89, 0, 0, 0.523);
+  border-radius: 30px; /* Arredondamento dos botões outline */
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+/* Barra de título */
+.title-bar {
+  background-color: #7600000f;
+  backdrop-filter: blur(10px);
+  border-radius: 30px; /* Arredondamento da barra de título */
+  transition: background-color 0.3s ease; /* Transição suave da cor de fundo */
+}
+
+/* Conteúdo da página inicial */
+.home__content {
+  background-color: rgba(151, 2, 34, 0.237);
+  backdrop-filter: blur(3px);
+  border-radius: 30px; /* Arredondamento do conteúdo da página inicial */
+}
+
+/* Widget Featurebase */
+.featurebase-widget {
+  --featurebase-widget-max-height: 700px;
+  --featurebase-widget-bottom: 75px;
+  --featurebase-widget-height: 75vh;
+  --featurebase-widget-width: 420px;
+  --featurebase-widget-border-radius: 80px; /* Não alterar o border-radius dos widgets */
+  transition: transform 0.3s ease, opacity 0.3s ease; /* Suaviza a transformação do widget */
+}
+
+.featurebase-widget.featurebase-right {
+  --featurebase-widget-button-left: auto;
+  --featurebase-widget-button-right: 15px;
+  --featurebase-widget-left: auto;
+  --featurebase-widget-right: 15px;
+  --featurebase-widget-fullscreen-x-left: auto;
+  --featurebase-widget-fullscreen-x-right: 30px;
+}
+
+.featurebase-widget.featurebase-fullscreen {
+  --featurebase-widget-max-height: 100%;
+  --featurebase-widget-width: 580px;
+  --featurebase-widget-bottom: 0px;
+  --featurebase-widget-height: 100vh;
+  --featurebase-widget-border-radius: 0px; /* Não alterar o border-radius dos widgets */
+}
+
+/* Estilos da scrollbar */
+::-webkit-scrollbar {
+  width: 9px;
+  height: 20px;
+  background-color: transparent; /* Agora a scrollbar é transparente */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(181, 26, 26, 0.318);
+  border-radius: 10px;
+  transition: background-color 0.3s ease; /* Efeito de transição suave */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(181, 26, 26, 0.6); /* Efeito de cor mais destacada quando passar o mouse */
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent; /* Fundo da track também transparente */
+}
+
+/* Elementos comuns */
+.text-field-container__text-field--dark,
+.text-field-container__text-field--primary,
+.header__search,
+.game-item,
+.settings__content,
+.catalogue__filters-container,
+.friends-box__box,
+.user-stats__box,
+.recent-games__box,
+.sidebar {
+  background-color: rgba(89, 2, 2, 0.168) !important;
+  backdrop-filter: blur(10px);
+  border-radius: 6px; /* Arredondamento dos elementos comuns */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza a mudança de fundo e a transformação */
+}
+
+.settings-download-sources__item,
+.download-group__item,
+.game-item {
+  background-color: rgba(95, 1, 1, 0.692) !important;
+  border-radius: 30px; /* Arredondamento dos itens de download e dos itens de jogo */
+  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza o efeito de transformação */
+}
+
+/* Efeitos de hover e foco */
+.game-item:hover,
+.text-field-container__text-field--dark:hover,
+.text-field-container__text-field--primary:hover,
+.button:hover {
+  border-radius: 15px; /* Garantir que o hover mantenha o arredondamento */
+  background-color: rgba(181, 26, 26, 0.518); /* Alteração sutil do fundo no hover */
+  transform: translateY(-2px); /* Levanta o item sutilmente */
+  cursor: pointer;
+  transition: all 0.3s ease; /* Transição suave */
+}
+
+.game-item:active,
+.text-field-container__text-field--dark:active,
+.text-field-container__text-field--primary:active,
+.button:active {
+  transform: translateY(2px); /* Efeito ao clicar */
+}
+
+.text-field-container__text-field--dark,
+.text-field-container__text-field--primary {
+  transition: border-color 0.3s ease; /* Transição suave para bordas */
+}
+
+.text-field-container__text-field--dark:focus,
+.text-field-container__text-field--primary:focus {
+  border-color: #b60000; /* Cor suave no foco */
+  box-shadow: 0 0 10px rgba(182, 0, 0, 0.5); /* Sombra suave no foco */
+}
+
+/* Efeitos ao passar o mouse em cima de textos */
+.text-field-container__text-field--dark:hover,
+.text-field-container__text-field--primary:hover {
+  border-color: rgba(182, 0, 0, 0.7);
+  background-color: rgba(174, 166, 0, 0.326);
+}
+
+.game-item .game-description {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.game-item:hover .game-description {
+  opacity: 0.8; /* Deixa a descrição mais sutil quando o mouse passar por cima */
+  transform: translateY(5px); /* Move a descrição suavemente para cima */
+}
+
+.game-item:active .game-description {
+  opacity: 1;
+  transform: translateY(0px);
+}
+
+/* Foto de perfil */
+.profile-picture {
+  border-radius: 100%; /* Arredondar a imagem de perfil para que seja circular */
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para zoom e sombra */
+}
+
+.profile-picture:hover {
+  transform: scale(1.05); /* Leve aumento da imagem ao passar o mouse */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra suave ao passar o mouse */
+}
+
+/* Banner do perfil */
+.profile-banner {
+  border-radius: 15px; /* Bordas arredondadas de forma sutil no banner */
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para zoom e sombra */
+}
+
+.profile-banner:hover {
+  transform: scale(1.02); /* Leve aumento do banner ao passar o mouse */
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Sombra suave ao passar o mouse */
+}
+
+/* Caixa de informações do perfil */
+.user-stats__box {
+  background-color: rgba(89, 2, 2, 0.388) !important;
+  backdrop-filter: blur(10px);
+  border-radius: 20px; /* Bordas arredondadas na caixa de informações */
+  padding: 10px;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.user-stats__box:hover {
+  transform: scale(1.02); /* Leve aumento ao passar o mouse */
+  background-color: rgba(89, 2, 2, 0.45); /* Leve escurecimento do fundo */
+}
+
+/* Efeito de transição suave para texto dentro do perfil */
+.profile-text {
+  font-size: 16px;
+  color: #fff;
+  transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease, text-shadow 0.3s ease; /* Inclui transição para text-shadow */
+}
+
+.profile-text:hover {
+  color: #ff2200; /* Mudança suave de cor ao passar o mouse */
+  transform: scale(1.05); /* Efeito de aproximação sutil ao passar o mouse */
+  text-shadow: 0 0 8px rgba(255, 204, 0, 0.6); /* Efeito de sombra sutil para destacar o texto sem blur */
+}
+
+/* Ajustando os ícones dos jogos na tela inicial para preencher completamente o card */
+.game-card {
+  border-radius: 40px; /* Deixa os cards mais arredondados */
+  overflow: hidden; /* Garante que nada ultrapasse as bordas */
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Sombreamento suave */
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)); /* Fundo moderno */
+  padding: 0; /* Remove padding que pode afetar o preenchimento da imagem */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.game-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);
+}
+
+/* Ajuste das imagens dentro dos cards para cobrir toda a área */
+.game-card img {
+  border-radius: 40px; /* Mantém o arredondamento */
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* Faz com que a imagem preencha todo o espaço sem cortes */
+  position: absolute; /* Posiciona a imagem corretamente */
+}
+
+/* Ajustando os botões e textos dentro dos cards */
+.game-card .game-info {
+  position: relative; /* Para manter os textos acima da imagem */
+  padding: 10px;
+  border-radius: 15px;
+  background: rgba(0, 0, 0, 0.7);
+  color: rgb(195, 255, 0);
+  text-align: center;
+  font-size: 14px;
+}
+
+/* Ajustando tags de categorias dos jogos */
+.game-card .game-tags {
+  position: relative; /* Mantém as tags visíveis sobre a imagem */
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  justify-content: center;
+  z-index: 2; /* Garante que fiquem acima da imagem */
+}
+
+.game-card .game-tags span {
+  background: rgba(215, 204, 0, 0.726);
+  padding: 5px 10px;
+  border-radius: 15px;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+/* Melhorando responsividade */
+@media (max-width: 768px) {
+  .game-card {
+    border-radius: 15px;
+  }
+  
+  .game-card img {
+    border-radius: 15px;
+  }
+
+  .game-card .game-info {
+    font-size: 15px;
+  }
+  
+  .game-card .game-tags span {
+    font-size: 15px;
+  }
+}
+
+/* Adicionando arredondamento ao avatar do perfil */
+.profile-avatar {
+  border-radius: 50%;
+  overflow: visible;
+  width: 100px; /* Ajuste conforme necessário */
+  height: 100px; /* Ajuste conforme necessário */
+  border: 4px solid rgba(255, 0, 0, 0.186); /* Opcional: borda sutil */
+   background-color: transparent; /* Remove qualquer fundo padrão */
+  box-shadow: none; /* Remove sombras indesejadas */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 10 px;
+}
+
+
+/* Efeito Neon */
+.profile-avatar::before {
+  content: "";
+  position: absolute;
+  top: -8px;
+    left: -8px;
+    right: -8px;
+    bottom: -8px;
+  inset: -8px; /* Define um espaço externo ao avatar */
+  border-radius: 50%;
+  border: 3px solid rgba(255, 0, 0, 0.8);
+  box-shadow: 0 0 20px 5px rgba(255, 0, 0, 0.8);
+  animation: pulse 1.5s infinite alternate ease-in-out;
+  z-index: -1; /* Coloca a borda atrás do avatar */
+}
+
+/* Animação de pulsação */
+@keyframes pulse {
+  0% {
+    border-color: rgba(255, 0, 0, 0.6);
+    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
+  }
+  100% {
+    border-color: rgba(255, 0, 0, 1);
+    box-shadow: 0 0 20px rgba(255, 0, 0, 1);
+  }
+}
+.profile-avatar img {
+  width: 100%; /* Garante que a imagem ocupe todo o espaço do avatar */
+  height: 100%; /* Garante que a imagem ocupe todo o espaço do avatar */
+  object-fit: cover; /* Faz com que a imagem preencha o espaço sem distorção */
+  display: block; /* Remove espaços extras abaixo da imagem */
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.hero {
+  border-radius: 20px; /* Ajuste o valor conforme necessário */
+  overflow: visible; /* Garante que a imagem dentro do banner também fique arredondada */
+}
+
+.avatar-container {
+  background: transparent !important;
+  box-shadow: none !important;
+  position: relative;
+  overflow: visible;
+}
+
+::-webkit-scrollbar {
+  width: 8px; /* Largura da scrollbar */
+  border-radius: 10px; /* Deixa a barra arredondada */
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.2); /* Fundo da trilha da scrollbar */
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(88, 0, 0, 0.8); /* Cor da barra */
+  border-radius: 10px; /* Deixa a barra arredondada */
+  border: 2px solid rgba(0, 0, 0, 0.2); /* Evita que vaze da margem */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 213, 0, 0.179); /* Cor ao passar o mouse */
+}
+
+.sidebar-profile__friends-button {
+    color: #00bad2;
+    border-radius: 50%;
+    width: 40px;
+    min-width: 40px;
+    min-height: 40px;
+    height: 40px;
+    background-color: #45000000;
+    position: relative;
+    transition: all ease 0.3s;
+}
+
+.modal {
+    animation: scale-fade-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+    background-color: #33000042;
+    border-radius: 30px;
+    min-width: 400px;
+    max-width: 600px;
+    color: #8e919b;
+    max-height: 100%;
+    border: solid 1px rgba(184, 153, 0, 0);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    backdrop-filter: blur (20px);
+}
+
+.button {
+    padding: 12px 20px;
+    background-color: #adaa00d4;
+    border-radius: 30px;
+    border: solid 1px transparent;
+    transition: all ease 0.2s;
+    cursor: pointer;
+    min-height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.container__content .button--outline {
+    backdrop-filter: blur(10px);
+    background-color: rgba(0, 0, 0, 0.66);
+    border-radius: 30px;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.hero {
+    width: 100%;
+    height: 350px;
+    min-height: 480px;
+    max-height: 480px;
+    border-radius: 60px;
+    color: #dadbe1;
+    overflow: hidden;
+    box-shadow: 0px 0px 15px 0px #4e00008d;
+    cursor: pointer;
+    border: solid 1px rgba(255, 255, 255, 0.15);
+    z-index: 1;
+}
+
+.game-details__description-container {
+    display: flex;
+    width: 100%;
+    flex: 1;
+    background: linear-gradient(0deg, #000000d5 50%, #000000 100%);
+}
+
+.container__content {
+    color: hwb(62 0% 27% / 0.834);
+}
+
+element.style {
+    background-color: rgb(0, 0, 0);
+}
+
+.hero-panel {border-bottom: solid 1px rgba(84, 77, 0, 0.463);
+position: relative;
+    overflow: hidden;
+    top: 0;
+    z-index: 2;
+}
+
+.content-sidebar {
+    border-left: solid 1px rgb(0 0 0 / 15%);
+    background-color: #000000e6;
+    width: 100%;
+    height: 100%;
+}
+
+.sidebar-section__button {
+    background-color: #000000e6;
+    color: #d0c600d2;
+}
+
+.description-header {background-color: #000000b8;
+}
+
+.checkbox-field__checkbox {
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
+    border-radius: 10px;
+    background-color: #75790052;
+    border: solid 1px rgba(0, 0, 0, 0.404);
+}
+
+.button {
+    padding: 12px 20px;
+    background-color: #7b00006d; /* Cor final aplicada */
+    border-radius: 30px;
+    border: 1px solid transparent;
+}
+
+.home__content {
+    background-color: rgba(151, 2, 2, 0.066);
+    backdrop-filter: blur(10px);
+    border-radius: 0px;
+}
+.home__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 24px;
+    flex: 1;
+    overflow-y: auto;
+}
+
+.text-field-container__text-field--drk, .text-field-container__text-field--primary, .header__search, .game-item, .settings__content, .catalogue__filters-container, .friends-box__box, .user-stats__box, .recent-games__box, .sidebar {
+    background-color: rgba(96, 0, 0, 0.245) !important;
+    backdrop-filter: blur(10px);
+    border-radius: 10px;
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.theme-card {
+    width: 100%;
+    min-height: 160px;
+    display: flex;
+    flex-direction: column;border: 1px solid rgba(226, 226, 226, 0.15);
+    border-radius: 40px;
+    gap: 4px;
+    transition: background-color 0.2s ease;
+    padding: 16px;
+    position: relative;
+}
+
+.sidebar__handle {
+    width: 5px;
+    height: 100%;
+    cursor: col-resize;
+    position: absolute;
+    right: 0;
+}
+button {
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    font-family: inherit;
+}
+
+.title-bar{
+  font-size: 0.4cm;
+  font-family: 'verdana';
+  transition: background-color 0.3s ease;
+  border: none;
+}
+
+/* Efeitos de hover e foco */
+.game-item:hover,
+.text-field-container__text-field--dark:hover,
+.text-field-container__text-field--primary:hover,
+.button:hover {
+  border-radius: 30px;
+  background-color: rgba(93, 0, 0, 0.52);
+  transform: translateY(-2px);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+/* Efeito de blur e animação para itens de download e jogos */
+.settings-download-sources__item,
+.download-group__item,
+.game-item {
+  background-color: rgba(95, 1, 1, 0.184) !important;
+  border-radius: 30px;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+  overflow: hidden; /* Garante que o conteúdo interno não ultrapasse as bordas arredondadas */
+  position: relative; /* Permite posicionar o pseudo-elemento corretamente */
+}
+
+/* Pseudo-elemento para aplicar o blur */
+.settings-download-sources__item::before,
+.download-group__item::before,
+.game-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(5px); /* Efeito de blur */
+  z-index: -1; /* Coloca o blur atrás do conteúdo */
+  border-radius: 30px; /* Mantém o arredondamento */
+}
+
+/* Efeito de hover para itens de download e jogos */
+.settings-download-sources__item:hover,
+.download-group__item:hover,
+.game-item:hover {
+  transform: scale(1.02) translateY(-2px); /* Aumenta levemente o tamanho e levanta o item */
+  background-color: rgba(34, 0, 0, 0.34) !important; /* Fundo mais escuro ao passar o mouse */
+}
+
+element.style {
+    width: 96px;
+    height: 96px;
+}
+
+.profile-hero__avatar-button {
+    width: 96px;
+    min-width: 96px;
+    height: 96px;
+    border-radius: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #ffffff00;
+    border: solid 1px rgba(255, 255, 255, 0.15);
+    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.7);
+    cursor: pointer;
+    transition: all ease 0.3s;
+    color: #c0c1c7;
+    position: relative;
+}
+
+
+.edit-profile-modal__avatar-container {
+    align-self: center;
+    display: flex;
+    color: #8e919b00;
+    justify-content: center;
+    align-items: center;
+    /* background-color: #1c1c1c; */
+    position: relative;
+    cursor: pointer;
+    background-color: #1c1c1c00;
+}
+style
+button {
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    font-family: inherit;
+}
+
+
+.sidebar-profile__button {
+    display: flex;
+    cursor: pointer;
+    transition: all ease 0.1s;
+    color: #ffffffa0;
+    width: 100%;
+    /* overflow: hidden; */
+    padding: 8px 8px;
+    overflow:   hidden;
path: themes/PhantomLiberty-B5gZwxwQ/theme.css
user: login: greptile-apps[bot]
body: logic: Duplicate overflow property with conflicting values (commented and active)

```suggestion
    padding: 8px 8px;
    overflow: hidden;
```
created_at: 2025-03-08T04:28:52Z
author_association: CONTRIBUTOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-03-09T16:02:28Z
body: ## [![Quality Gate Failed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-failed-20px.png 'Quality Gate Failed')](https://sonarcloud.io/dashboard?id=hydralauncher_hydra-themes&pullRequest=328) **Quality Gate failed**  
Failed conditions  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/failed-16px.png '') [D Reliability Rating on New Code](https://sonarcloud.io/dashboard?id=hydralauncher_hydra-themes&pullRequest=328) (required ≥ A)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=hydralauncher_hydra-themes&pullRequest=328)

##   
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/light_bulb-16px.png '') Catch issues before they fail your Quality Gate with our IDE extension ![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/sonarlint-16px.png '') [SonarQube for IDE](https://www.sonarsource.com/products/sonarlint/features/connected-mode/?referrer=pull-request)


author_association: NONE