From bc7c02a893a9258641d67f9e0c7126116e1e5f47 Mon Sep 17 00:00:00 2001
From: Milo Gertjejansen <milo@milogert.com>
Date: Thu, 21 Dec 2023 01:50:50 -0600
Subject: [PATCH] focus ring patches

---
 steam-deck/Custom.css     | 16 ----------------
 steam-deck/home-page.css  | 37 ++++++++++++++++++++++++++++++++-----
 steam-deck/pill-menus.css |  2 +-
 steam-deck/system.css     | 24 ++++++++++++++++++++++++
 4 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/steam-deck/Custom.css b/steam-deck/Custom.css
index 8297aa5..2691e79 100644
--- a/steam-deck/Custom.css
+++ b/steam-deck/Custom.css
@@ -137,19 +137,3 @@
 .salepreviewwidgets_Discounted_35-Ub {
   background: var(--srcery-bright-white);
 }
-
-/* Carousel stuff */
-
-.basicgamecarousel_TextBoxCarouselContents_3bvCH.basicgamecarousel_BasicGameCarouselItemMediaContainer_1HIFN.Panel.Focusable.gpfocus.gpfocuswithin {
-  color: var(--srcery-bright-white);
-}
-
-.basicgamecarousel_BasicGameCarouselItem_3YYQ9 .basicgamecarousel_TextBoxCarouselContents_3bvCH {
-  background: linear-gradient(313deg, var(--srcery-xgray1), var(--srcery-xgray6));
-}
-
-.appportrait_LibraryItemBox_WYgDg.appportrait_Portrait_1Pf6J.appportrait_InRecentGames_biTV-.appportrait_BasicMode_3vi6S.Panel.Focusable.gpfocus.gpfocuswithin {
-  transition: filter,box-shadow,transform .3s cubic-bezier(0.16, 0.86, 0.43, 0.99);
-  box-shadow: 0px 16px 24px 0px var(--srcery-hard-black);
-  outline: 2px solid var(--srcery-bright-black);
-}
diff --git a/steam-deck/home-page.css b/steam-deck/home-page.css
index 8e694d7..ee6ab32 100644
--- a/steam-deck/home-page.css
+++ b/steam-deck/home-page.css
@@ -1,3 +1,35 @@
+/* Carousel stuff */
+
+.basicgamecarousel_TextBoxCarouselContents_3bvCH.basicgamecarousel_BasicGameCarouselItemMediaContainer_1HIFN.Panel.Focusable.gpfocus.gpfocuswithin {
+  color: var(--srcery-bright-white);
+}
+
+.basicgamecarousel_BasicGameCarouselItem_3YYQ9 .basicgamecarousel_TextBoxCarouselContents_3bvCH {
+  background: linear-gradient(313deg, var(--srcery-xgray1), var(--srcery-xgray6));
+}
+
+@keyframes appportrait_fadeOutline_1FLuV {
+  0% {
+    outline-color: var(--srcery-xgray3);
+  }
+
+  100% {
+    outline-color: var(--srcery-bright-black);
+  }
+}
+
+@keyframes appportrait_blinker_2tSbN {
+  50% {
+      outline: 2px solid var(--srcery-bright-white);
+  }
+}
+
+.BasicUI .appportrait_LibraryItemBox_WYgDg.Focusable:focus,
+.appportrait_LibraryItemBox_WYgDg.appportrait_Portrait_1Pf6J.appportrait_InRecentGames_biTV-.appportrait_BasicMode_3vi6S.Panel.Focusable.gpfocus.gpfocuswithin {
+  box-shadow: 0 16px 24px 0 var(--srcery-hard-black);
+  outline: 2px solid var(--srcery-bright-black);
+}
+
 .BasicUI .basicappdetailssectionstyler_AppDetailsRoot_3fp5y {
   background: transparent;
 }
@@ -133,11 +165,6 @@
   background: var(--srcery-xgray6);
 }
 
-.appdetailsfriendssection_FriendsPlayingNowBadge_38sNQ.appdetailsfriendssection_InFriendsTab_15Vpl.appdetailsfriendssection_TabSelected_mHKj- {
-  background-color: var(--srcery-green);
-  color: var(--srcery-bright-white);
-}
-
 /** Recommended */
 .BasicUI .discoveryqueuewidget_DiscoveryQueueWidgetCtn_1iOb7 .discoveryqueuewidget_WidgetHeaderCtn_3u5R_ {
   background: linear-gradient(90deg, var(--srcery-blue) 0%, var(--srcery-bright-blue) 75%, transparent 100%);
diff --git a/steam-deck/pill-menus.css b/steam-deck/pill-menus.css
index 8a279e3..960fd74 100644
--- a/steam-deck/pill-menus.css
+++ b/steam-deck/pill-menus.css
@@ -33,7 +33,7 @@
 }
 
 /* Friends playing pills label */
-.appdetailsfriendssection_FriendsPlayingNowBadge_38sNQ.appdetailsfriendssection_InFriendsTab_15Vpl {
+.appdetailsfriendssection_FriendsPlayingNowBadge_38sNQ.appdetailsfriendssection_InFriendsTab_15Vpl.appdetailsfriendssection_TabSelected_mHKj- {
   color: var(--srcery-bright-white);
   background-color: var(--srcery-green);
 }
diff --git a/steam-deck/system.css b/steam-deck/system.css
index de438ea..1350566 100644
--- a/steam-deck/system.css
+++ b/steam-deck/system.css
@@ -105,6 +105,30 @@
 
 /* Focus Ring */
 
+@keyframes srcery-focusring_flash_1YTKZ {
+  0% {
+    background-color: rgba(255,255,255,.08)
+  }
+
+  100% {
+    background-color: transparent
+  }
+}
+
+@keyframes srcery-focusring_fadeOutline_2hZu3 {
+  0% {
+    outline-color: var(--srcery-xgray3);
+  }
+
+  100% {
+    outline-color: var(--srcery-bright-black);
+  }
+}
+
 .focusring_FocusRingRoot_3PH_X .focusring_FocusRing_1IZrQ {
+  animation: srcery-focusring_flash_1YTKZ .5s ease,
+      focusring_growOutline_Z3LxS .4s ease,
+      srcery-focusring_fadeOutline_2hZu3 .4s ease,
+      focusring_blinker_3wFMM 1.2s ease-in-out .4s 20;
   outline: 2px solid var(--srcery-bright-black);
 }