Scrollbars (Fixes #275)

Chat improvements Updated README.md and screenshots
tkashkin · Oct 12, 2024 · 928fceb · 928fceb
1 parent 4a10031
commit 928fceb
Show file tree

Hide file tree

Showing 15 changed files with 651 additions and 411 deletions.
diff --git a/README.md b/README.md
@@ -2,37 +2,28 @@
 
 A skin to make Steam look more like a native GNOME app
 
-<p align="center"><img src="screenshot.png?raw=true"/></p>
-
-## Current state and plans
-
-* **Main Window**: Done.
-* **Login**: Done
-* **Library**: Done
-* **Small Mode**: Done.
-* **Chat**: Done
-* **Settings**: Mostly done.
-* **New Overlay**: Mostly done.
-* **New Big Picture**: Not done.
-* **Recoloring**: Colors can be changed via making a new theme. See [colorthemes](/adwaita/colorthemes) dir.
-* **Light Themes**: Not currently planned, though may now be more feasible with the new UI.
+<p align="center">
+	<img alt="Store" src="/screenshots/store.png?raw=true" width="45%">
+	&nbsp; &nbsp; &nbsp; &nbsp;
+	<img alt="Library" src="/screenshots/library.png?raw=true" width="45%">
+</p>
 
 ### Limitations
 
 * **Steam updates may reset theme**: While the installer will patch steam files in order to theme the interface, these files may be reset by steam updates. If this happens, you will need to reinstall to repatch them.
-* **Rounded corners**: Not all elements can be rounded, use [Rounded Window Corners extension](https://github.com/yilozt/rounded-window-corners) or [mutter-rounded](https://github.com/yilozt/mutter-rounded) on GNOME.
-* **Steam website pages (Store/Community/Profiles/Etc)**: No longer themable with our current method.
+* **Rounded corners**: Not all elements can be rounded, use [Rounded Window Corners Reborn extension](https://github.com/flexagoon/rounded-window-corners) on GNOME.
+* **Steam website pages (Store/Community/Profiles/etc)**: No longer themable with our current method.
 * **Position of notifications**: Doesn't seem to be possible to change.
-* **Height of sidebar items**: Doesn't seem to be possible to increase.
+* **Height of game list entries**: Doesn't seem to be possible to increase.
 
 ## Requirements
 
 * [Python 3](https://www.python.org/downloads/)
 * The skin is created and tested mostly on the Linux version of Steam. Steam's new UI has largely unified platform differences, so other platforms should work, but are not a priority.
 
-## Previews
+## Color themes
 
-<details><summary>Previews</summary>
+<details><summary>Color theme previews</summary>
 
 ### Adwaita
 
@@ -42,6 +33,10 @@ A skin to make Steam look more like a native GNOME app
 
 ![Breeze](/adwaita/colorthemes/breeze/preview.png?raw=true)
 
+### Canta
+
+![Canta](/adwaita/colorthemes/canta/preview.png?raw=true)
+
 ### Catppuccin-Frappe
 
 ![Catppuccin-Frappe](/adwaita/colorthemes/catppuccin-frappe/preview.png?raw=true)
@@ -58,6 +53,10 @@ A skin to make Steam look more like a native GNOME app
 
 ![Dracula](/adwaita/colorthemes/dracula/preview.png?raw=true)
 
+### Everforest
+
+![Everforest](/adwaita/colorthemes/everforest/preview.png?raw=true)
+
 ### Gruvbox
 
 ![Gruvbox](/adwaita/colorthemes/gruvbox/preview.png?raw=true)
@@ -116,14 +115,14 @@ cd Adwaita-for-Steam
 
 #### Arguments
 
-| Argument         | Short  | Required Values                    | Description                                              |
-| ---------------- | ------ | ---------------------------------- | -------------------------------------------------------- |
-| --color-theme    | -c     | [Colortheme](/adwaita/colorthemes) | Change color theme                                       |
-| --custom-css     |        |                                    | Enable [custom css](/custom)                             |
-| --extras         | -e     | [Extra](adwaita/extras)            | Enable one or multiple theme extras                      |
-| --list-options   | -l     |                                    | List available themes and extras                         |
-| --target         | -t     | normal / flatpak / [custom dir]    | Choose target location for install (default: both)       |
-| --uninstall      | -u     |                                    | Uninstall theme                                          |
+| Argument       | Short | Required Values                    | Description                                        |
+|----------------|-------|------------------------------------|----------------------------------------------------|
+| --color-theme  | -c    | [Colortheme](/adwaita/colorthemes) | Change color theme                                 |
+| --custom-css   |       |                                    | Enable [custom css](/custom)                       |
+| --extras       | -e    | [Extra](adwaita/extras)            | Enable one or multiple theme extras                |
+| --list-options | -l    |                                    | List available themes and extras                   |
+| --target       | -t    | normal / flatpak / [custom dir]    | Choose target location for install (default: both) |
+| --uninstall    | -u    |                                    | Uninstall theme                                    |
 
 #### Example Usage
 

diff --git a/adwaita/css/_root/icons.css b/adwaita/css/_root/icons.css
diff --git a/adwaita/css/chat/messages.css b/adwaita/css/chat/messages.css
@@ -59,6 +59,7 @@ html.client_chat_frame
 							width: 0 !important;
 							flex-grow: 1 !important;
 							height: 34px !important;
+							padding: 0 !important;
 							margin: 0 !important;
 							background: transparent !important;
 							border-radius: var(--adw-button-radius) !important;
@@ -126,7 +127,7 @@ html.client_chat_frame
 								opacity: 0 !important;
 								min-width: 0 !important;
 								max-width: 0 !important;
-								margin-left: -27px !important;
+								margin-left: -5px !important;
 								transform: none !important;
 							}
 
@@ -150,7 +151,7 @@ html.client_chat_frame
 								opacity: 0 !important;
 								min-width: 0 !important;
 								max-width: 0 !important;
-								margin-left: -27px !important;
+								margin-left: -5px !important;
 								transform: none !important;
 							}
 
@@ -159,11 +160,18 @@ html.client_chat_frame
 								display: flex !important;
 								flex-grow: 1 !important;
 								justify-content: center !important;
-								-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) calc(100% - 8px), rgba(0, 0, 0, 0)) !important;
+								-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) calc(100% - 20px), rgba(0, 0, 0, 0)) !important;
+								padding: 0 6px !important;
+								transition: padding 250ms var(--adw-base-transition-curve) !important;
 
 								div._2XZq-_f6npaQdAgeRzKIkz:hover &, div._2XZq-_f6npaQdAgeRzKIkz.Yd-DsWkYiFiYwpci--Yk_ &
 								{
-									-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) calc(100% - 24px), rgba(0, 0, 0, 0) calc(100% - 16px), rgba(0, 0, 0, 0)) !important;
+									-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) calc(100% - 36px), rgba(0, 0, 0, 0) calc(100% - 28px), rgba(0, 0, 0, 0)) !important;
+								}
+
+								div._2XZq-_f6npaQdAgeRzKIkz._3oBG-wxQS7a_pEKk1hBUPx &
+								{
+									padding: 0 28px !important;
 								}
 
 								div.friend
@@ -183,6 +191,11 @@ html.client_chat_frame
 								div.labelHolder
 								{
 									height: fit-content !important;
+
+									div._3sxE7F1LV2IcSX68YsH9dI
+									{
+										display: none !important;
+									}
 								}
 
 								div.nOdcT-MoOaXGePXLyPe0H, div._1HNpQBKKKQ1tG2OZH3CSsh
@@ -199,10 +212,10 @@ html.client_chat_frame
 								}
 							}
 
-							div._1JXI4j2_xSpVK1YjyEuebr
+							div._1JXI4j2_xSpVK1YjyEuebr, div.c9l09VKqQIXJvsl0gqItO
 							{
 								position: absolute !important;
-								right: 4px !important;
+								top: 5px !important;
 								width: 24px !important;
 								height: 24px !important;
 								padding: 4px !important;
@@ -211,6 +224,11 @@ html.client_chat_frame
 								margin: 0 !important;
 								opacity: 0 !important;
 								cursor: default !important;
+							}
+
+							div._1JXI4j2_xSpVK1YjyEuebr
+							{
+								right: 4px !important;
 
 								&:hover
 								{
@@ -245,6 +263,24 @@ html.client_chat_frame
 									-webkit-mask-image: var(--adw-icon-window-close);
 								}
 							}
+
+							div.c9l09VKqQIXJvsl0gqItO
+							{
+								left: 4px !important;
+								opacity: 1 !important;
+								background: none !important;
+
+								svg
+								{
+									padding: 0 !important;
+									margin: 0 !important;
+
+									*
+									{
+										fill: rgb(var(--adw-headerbar-fg-rgb)) !important;
+									}
+								}
+							}
 						}
 					}
 				}
@@ -271,6 +307,13 @@ html.client_chat_frame
 				min-height: 0 !important;
 			}
 
+			div.OneOnOneVoiceRoomControls
+			{
+				background: rgb(var(--adw-window-bg-rgb)) !important;
+				box-shadow: none !important;
+				height: 46px !important;
+			}
+
 			div.chatRoomGroupNavColumn, div.MemberListColumn
 			{
 				background: rgb(var(--adw-secondary-sidebar-bg-rgb)) !important;
@@ -345,7 +388,7 @@ html.client_chat_frame
 						position: sticky;
 						height: 4px;
 						left: 0;
-						right: 0;
+						right: calc(var(--adw-scrollbar-size) * -1);
 						z-index: 100;
 						pointer-events: none;
 					}