Как настроить CSS-стили для оформления элементов в стиле Steam?

Стиль оформления элементов в духе Steam можно создать с помощью следующих CSS-стилей:

1. Основной стиль кнопок и элементов интерфейса

.steam-style {
  font-family: 'Roboto', Arial, sans-serif;
  background-color: #333333;
  color: #f5f5f5;
  border: 1px solid #444444;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
}

.steam-style:hover {
  background-color: #444444;
  border-color: #555555;
}

.steam-style:active {
  background-color: #555555;
  border-color: #666666;
}

2. Оформление заголовков и текста

.steam-style h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  color: #f5f5f5;
}

.steam-style p {
  font-size: 14px;
  line-height: 1.5;
  color: #d9d9d9;
}

3. Оформление кнопок с иконками

.steam-style .icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
}

4. Оформление карточек и блоков

.steam-style .card {
  background-color: #333333;
  border: 1px solid #444444;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.steam-style .card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

5. Оформление ссылок и кнопок в стиле Steam

.steam-style a {
  color: #f5f5f5;
  text-decoration: none;
}

.steam-style a:hover {
  color: #d9d9d9;
}

6. Оформление выпадающих меню и списков

.steam-style ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.steam-style ul li {
  padding: 8px 0;
  border-bottom: 1px solid #444444;
}

Пример использования:

<div class="steam-style">
  <h2>Заголовок</h2>
  <p>Текст описания</p>
  <button class="icon"><img src="icon.png" alt="icon"></button>
  <a href="#">Ссылка</a>
  <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
  </ul>
</div>

Эти стили помогут создать элементы интерфейса, напоминающие оформление Steam.

Править ответ