Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Game UI Wiki: Difference between revisions

From Game UI Wiki
(Lighten border colours)
(Use subtle transparent borders for dark mode)
Line 7: Line 7:
</div>
</div>


<div style="display: flex; justify-content: center; gap: 40px; padding: 15px 0; margin-bottom: 10px; border-top: 1px solid #888; border-bottom: 1px solid #888;">
<div style="display: flex; justify-content: center; gap: 40px; padding: 15px 0; margin-bottom: 10px; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12);">
<div style="text-align: center;">'''10'''<br/>Games</div>
<div style="text-align: center;">'''10'''<br/>Games</div>
<div style="text-align: center;">'''282'''<br/>Screenshots</div>
<div style="text-align: center;">'''282'''<br/>Screenshots</div>
Line 16: Line 16:


<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;">
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;">
<div class="game-card" style="border: 1px solid #888; border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
<div class="game-card" style="border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
[[File:BaldursGate3_Frontend.png|400px|link=Baldur's Gate 3]]
[[File:BaldursGate3_Frontend.png|400px|link=Baldur's Gate 3]]
<div style="padding: 8px; text-align: center;">'''[[Baldur's Gate 3|Baldur's Gate 3]]'''<br/><small>PC - RPG</small></div>
<div style="padding: 8px; text-align: center;">'''[[Baldur's Gate 3|Baldur's Gate 3]]'''<br/><small>PC - RPG</small></div>
</div>
</div>


<div class="game-card" style="border: 1px solid #888; border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
<div class="game-card" style="border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
[[File:OblivionRemastered_Frontend.jpg|400px|link=The Elder Scrolls IV: Oblivion Remastered]]
[[File:OblivionRemastered_Frontend.jpg|400px|link=The Elder Scrolls IV: Oblivion Remastered]]
<div style="padding: 8px; text-align: center;">'''[[The Elder Scrolls IV: Oblivion Remastered|Oblivion Remastered]]'''<br/><small>PC - RPG</small></div>
<div style="padding: 8px; text-align: center;">'''[[The Elder Scrolls IV: Oblivion Remastered|Oblivion Remastered]]'''<br/><small>PC - RPG</small></div>
</div>
</div>


<div class="game-card" style="border: 1px solid #888; border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
<div class="game-card" style="border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
[[File:RimWorld_Frontend.jpg|400px|link=RimWorld]]
[[File:RimWorld_Frontend.jpg|400px|link=RimWorld]]
<div style="padding: 8px; text-align: center;">'''[[RimWorld|RimWorld]]'''<br/><small>PC - Simulation</small></div>
<div style="padding: 8px; text-align: center;">'''[[RimWorld|RimWorld]]'''<br/><small>PC - Simulation</small></div>
</div>
</div>


<div class="game-card" style="border: 1px solid #888; border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
<div class="game-card" style="border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
[[File:WorldofTanks_Garage.jpeg|400px|link=World of Tanks]]
[[File:WorldofTanks_Garage.jpeg|400px|link=World of Tanks]]
<div style="padding: 8px; text-align: center;">'''[[World of Tanks|World of Tanks]]'''<br/><small>PC - MMO</small></div>
<div style="padding: 8px; text-align: center;">'''[[World of Tanks|World of Tanks]]'''<br/><small>PC - MMO</small></div>
</div>
</div>


<div class="game-card" style="border: 1px solid #888; border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
<div class="game-card" style="border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
[[File:SunlessSea_Frontend.png|400px|link=Sunless Sea]]
[[File:SunlessSea_Frontend.png|400px|link=Sunless Sea]]
<div style="padding: 8px; text-align: center;">'''[[Sunless Sea|Sunless Sea]]'''<br/><small>PC - RPG</small></div>
<div style="padding: 8px; text-align: center;">'''[[Sunless Sea|Sunless Sea]]'''<br/><small>PC - RPG</small></div>
</div>
</div>


<div class="game-card" style="border: 1px solid #888; border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
<div class="game-card" style="border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
[[File:UmamusumePrettyDerby_Frontend.jpg|400px|link=Umamusume: Pretty Derby]]
[[File:UmamusumePrettyDerby_Frontend.jpg|400px|link=Umamusume: Pretty Derby]]
<div style="padding: 8px; text-align: center;">'''[[Umamusume: Pretty Derby|Umamusume: Pretty Derby]]'''<br/><small>Mobile</small></div>
<div style="padding: 8px; text-align: center;">'''[[Umamusume: Pretty Derby|Umamusume: Pretty Derby]]'''<br/><small>Mobile</small></div>
</div>
</div>


<div class="game-card" style="border: 1px solid #888; border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
<div class="game-card" style="border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
[[File:BrookhavenRP_Frontend.jpg|400px|link=Brookhaven RP (Roblox)]]
[[File:BrookhavenRP_Frontend.jpg|400px|link=Brookhaven RP (Roblox)]]
<div style="padding: 8px; text-align: center;">'''[[Brookhaven RP (Roblox)|Brookhaven RP (Roblox)]]'''<br/><small>Roblox</small></div>
<div style="padding: 8px; text-align: center;">'''[[Brookhaven RP (Roblox)|Brookhaven RP (Roblox)]]'''<br/><small>Roblox</small></div>
</div>
</div>


<div class="game-card" style="border: 1px solid #888; border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
<div class="game-card" style="border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
[[File:StickyBusiness_Frontend.png|400px|link=Sticky Business]]
[[File:StickyBusiness_Frontend.png|400px|link=Sticky Business]]
<div style="padding: 8px; text-align: center;">'''[[Sticky Business|Sticky Business]]'''<br/><small>PC - Simulation</small></div>
<div style="padding: 8px; text-align: center;">'''[[Sticky Business|Sticky Business]]'''<br/><small>PC - Simulation</small></div>
</div>
</div>


<div class="game-card" style="border: 1px solid #888; border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
<div class="game-card" style="border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
[[File:Wolfenstein3D_Frontend.png|400px|link=Wolfenstein 3D]]
[[File:Wolfenstein3D_Frontend.png|400px|link=Wolfenstein 3D]]
<div style="padding: 8px; text-align: center;">'''[[Wolfenstein 3D|Wolfenstein 3D]]'''<br/><small>PC - FPS</small></div>
<div style="padding: 8px; text-align: center;">'''[[Wolfenstein 3D|Wolfenstein 3D]]'''<br/><small>PC - FPS</small></div>
</div>
</div>


<div class="game-card" style="border: 1px solid #888; border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
<div class="game-card" style="border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: var(--color-surface-1, #1a1a1a);">
[[File:Populous_Frontend.png|400px|link=Populous]]
[[File:Populous_Frontend.png|400px|link=Populous]]
<div style="padding: 8px; text-align: center;">'''[[Populous|Populous]]'''<br/><small>PC</small></div>
<div style="padding: 8px; text-align: center;">'''[[Populous|Populous]]'''<br/><small>PC</small></div>

Revision as of 13:48, 18 February 2026

Game UI Wiki
The open game UI archive.

Start contributing | Create an account

10
Games
282
Screenshots
94
Categories

Games

Browse by screen type

Menus: Frontend · Settings · Game Menu · Pause · Load Game · Credits
Gameplay: HUD · Inventory · Map · Dialogue · Combat · Crafting · Skill Tree
Social: Friends List · Lobby · Messages · Profile · Achievements
Overlay: Modal · Popup · Radial Menu · Loading
Onboarding: Onboarding · Help · Create Character

Browse by platform & genre

Platform: PC · Console · Mobile · Roblox · Steam Deck

Genre: RPG · FPS · Simulation · MMO · Survival · Open World

See all categories for the full list.

How to add a game

  1. Create an account and confirm your email
  2. After 1 day, search for a game - if no page exists, click "Create the page"
  3. Copy the template from Template:Game/Preload and add your screenshots
  4. See How to contribute for the full guide

Anyone can add games, upload screenshots, and improve pages.