game setup.css

game-setup.css Documentation

This CSS file styles the 'Game Setup' page. The overall layout of the page is centered using flex properties. Various elements including heading, form labels and inputs, buttons, and past game records have their own particular stylings.

Styling Guide

Body

• The body has a flex box layout, positioned centrally both horizontally and vertically.
• The font family is set to Arial, with sans-serif as the fallback.
• It has no margin and its height is set to fill the viewport height.
• The background color is a very light gray, #f4f4f9.

Container

• The .container is also a flex box, with the width set to be 100% of its parent but will not exceed 800px.
• The background is white with padding of 20px, and the corners are slightly rounded with an 8px radius.
• It also has a slight box shadow for a subtle 3D effect.

Column

• The .column class sets the flex value to 1, allowing it to fill available space.
• It applies a padding of 20px and sets the box-sizing property to border-box.

Headings (h1)

• The font color for h1 tags is a dark gray, #333.
• There is a margin 20px below the h1 tag.

Label

• The label is displayed as a block, with a font weight of bold and a similar dark gray color as the h1 tag.
• A margin-top of 15px is applied.

Text and File Inputs (input[type="text"], input[type="file"])

• Text and file inputs fill 100% of their container width.
• They have a padding of 10px, a border with 1px solid in color #ccc, and a border radius of 4px.
• The box-sizing property is set to border-box.

Small

• The small tag is displayed as a block.
• A slight margin-top of 5px is applied.
• The font size is reduced to 0.8em and the color is a lighter gray, #666.

Button

• The button fills 100% of their container width.
• It has a padding of 10px, a font size of 1em, and a font weight of bold.
• The text color is white while the background color is a strong green, #4CAF50.
• The border is removed, corners are slightly rounded with a 4px radius, and the cursor is set to pointer.

Button (Hover action)

• When hovered, the button's background color changes to a slightly darker green, #45a049.

Past Games (#pastGames and its div children)

• The #pastGames ID refers to a block that has a maximum height of 400px, beyond which it becomes a scrollable container.
• Each div within #pastGames acts as an individual past game record.
• It has a margin-bottom of 10px, padding of 10px, a border with 1px solid in color #ccc, and a border radius of 4px.
• The background color is a very light gray, #f9f9f9, and the cursor is set to pointer.
• When a div within #pastGames is hovered, the background color changes to #e9e9e9.