CSS Theming Guide

Welcome to the official SteamF2P theming documentation. This guide provides all the CSS selectors and properties you need to completely customize the desktop client. Every element is targetable.

Getting Started

To apply custom CSS, open SteamF2P, navigate to the Settings tab, and paste your CSS into the Advanced Custom CSS text area. Click "Apply & Save".

Note: We recommend using the !important flag if your styles are not being applied, as they might be overridden by inline Tailwind utilities.

Root Variables

While the app doesn't heavily rely on variables by default (it uses Tailwind), you can define your own root variables to maintain a clean custom theme. 

:root {
  /* Define your custom palette */
  --bg-main: #121212;
  --accent: #ff0055;
  --text-primary: #ffffff;
}

body {
  background-color: var(--bg-main) !important;
}

Background & Particles

The application uses a solid background color on the body, overlaid with a geometric grid and an interactive HTML5 Canvas for particles. 

/* 1. Main Application Background */
body {
  background-color: #000000 !important; /* Change main color */
}

/* 2. The Interactive Particle Canvas */
#particles-bg {
  opacity: 0.5; /* Dim or hide particles */
  filter: hue-rotate(90deg); /* Change particle color globally */
}

/* 3. The Static Geometric Grid */
.fixed.inset-0.z-0.opacity-20 {
  display: none !important; /* Hide the grid background completely */
}

Typography

SteamF2P uses heavily monospaced fonts for its tech aesthetic. You can override the font family globally. 

/* Override all monospace text */
body, .font-mono {
  font-family: "Fira Code", monospace !important;
}

/* Change text selection color */
::selection {
  background-color: #ff0055 !important;
  color: #ffffff !important;
}

Custom Titlebar

The top titlebar used for dragging the window and window controls. 

/* Titlebar Container */
#titlebar {
  background-color: #050505 !important;
  border-bottom: 1px solid #222 !important;
}

/* Window Controls (Minimize & Close) */
#minBtn {
  background-color: #ffaa00 !important; /* Custom minimize color */
  border-radius: 50% !important; /* Make them circular */
}
#closeBtn {
  background-color: #ff3333 !important;
  border-radius: 50% !important;
}

Buttons, Inputs & Dropdowns

Target search bars, general buttons, and select dropdowns across all views. 

/* Text Inputs (Search bars) */
input[type="text"] {
  background-color: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
}

/* Focus state for inputs */
input[type="text"]:focus {
  border-color: #00ffaa !important;
  box-shadow: 0 0 10px rgba(0, 255, 170, 0.2) !important;
}

/* Dropdowns (Select menus in Games List) */
select {
  background-color: #111 !important;
  color: #00ffaa !important;
}

/* Primary Buttons (e.g., Download, Save) */
button.bg-white.text-black {
  background-color: #00ffaa !important;
  color: #000 !important;
  border-color: #00ffaa !important;
  box-shadow: 0 0 15px rgba(0, 255, 170, 0.4) !important;
}

/* Secondary Buttons (e.g., Refresh, Back) */
button.bg-transparent {
  border-radius: 2px !important;
}

Main Views & Game Cards

Style the game cards inside the Games List, Library, and Manage tabs. 

/* View Headers (Top bar inside each view) */
header {
  background-color: rgba(20, 20, 20, 0.95) !important;
  border-bottom: 2px solid #333 !important;
}

/* Game Cards / Manifest Cards */
.grid > div {
  background-color: #1a1a1a !important;
  border-radius: 12px !important; /* Rounded corners */
  border: 1px solid transparent !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.5) !important;
}

/* Card Hover State */
.grid > div:hover {
  border-color: #ff0055 !important;
  transform: translateY(-2px) !important;
}

/* Game Title inside cards */
.grid > div h3, .grid > div span.text-white.font-mono {
  color: #ff0055 !important;
}

/* Remove Manifest Button inside cards */
.grid > div button.text-red-400 {
  background-color: rgba(255, 0, 0, 0.1) !important;
  border: 1px solid red !important;
}

Modals & Popups

Customize the right-click DLC Context Menu and the central warning/info Popups. 

/* DLC Context Menu (Right Click) */
#dlcContextMenu {
  background-color: #111 !important;
  border: 1px solid #444 !important;
  border-radius: 6px !important;
}

/* Central Popup Modal Background Overlay */
#customPopup {
  backdrop-filter: blur(10px) !important;
}

/* Popup Modal Box */
#customPopupContent {
  background-color: #1a1a1a !important;
  border: 2px solid #ff0055 !important;
  border-radius: 10px !important;
}

/* Popup Icon Container */
#popupIcon {
  background-color: #ff0055 !important;
  border-radius: 50% !important;
}

Custom Scrollbars

Modify the WebKit scrollbar appearance throughout the entire application. 

/* Change scrollbar width */
.custom-scrollbar::-webkit-scrollbar {
  width: 10px !important;
}

/* Scrollbar Track (Background) */
.custom-scrollbar::-webkit-scrollbar-track {
  background: #111 !important;
}

/* Scrollbar Thumb (The dragger) */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #ff0055 !important;
  border-radius: 0 !important; /* Square edges */
}

/* Hover state for thumb */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #ff3377 !important;
}