Stylizacja CSS

[Jarek]

Witam.

Chciałbym podzielić się z Wami sposobem stylizacji skryptów zakładek z PaneluRadiowego za pomocą definicji zmiennych dla kolorów na przykładowym CSS ramówki 

 

/* Definicja zmiennych dla kolorów */
:root {
  --primary-bg-color: #f0f4f8; /* Jasnoszare tło strony */
  --primary-font-color: #333333; /* Ciemny szary tekst */
  --secondary-bg-color: #ffffff; /* Białe tło dla pól */
  --accent-color: #3b82f6; /* Niebieski kolor akcentu */
  --accent-gradient-start: #60a5fa; /* Gradient start */
  --accent-gradient-end: #2563eb; /* Gradient end */
  --border-color: #d1d5db; /* Jaśniejsza szarość dla ramek */
  --highlight-color: #f59e0b; /* Pomarańczowy do wyróżnienia */
}

/* Tło strony i czcionka */
body {
  margin: 10px 0;
  padding: 0;
  background-color: var(--primary-bg-color);
  font-size: 14px;
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: var(--primary-font-color);
}

/* Całościowa szerokość ramówki */
.szerokosc {
  max-width: 550px;
  margin: 0 auto;
}

/* Ramki tabelek */
.ramka {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

/* Nagłówki tabelek */
.naglowek {
  padding: 10px;
  height: auto;
  background: var(--accent-color);
  background: linear-gradient(to bottom, var(--accent-gradient-start), var(--accent-gradient-end));
  color: #fff;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--border-color);
  font-weight: bold;
  font-size: 14px;
}

/* Pole z audycjami */
.pole {
  background-color: var(--secondary-bg-color);
  padding: 10px;
  color: var(--primary-font-color);
}

/* Pole z audycjami - co drugi wiersz */
.pole2 {
  background-color: #f9fafb; /* Lekko szary dla kontrastu */
}

/* Napis oznaczający dzień */
.dzien {
  font-size: 16px;
  font-weight: bold;
  color: var(--primary-font-color);
}

/* Wyróżnienie trwającej audycji */
.trwajaca-audycja {
  color: var(--highlight-color);
  font-weight: bold;
}

/* Dodatkowe stylizacje */
body, .naglowek, .pole, .dzien, .trwajaca-audycja {
  transition: all 0.3s ease;
}

body:hover .naglowek {
  background: linear-gradient(to bottom, var(--accent-gradient-end), var(--accent-gradient-start));
}
 

I o to w szybki sposób możemy sobie wystylizować każdą zakładkę. 

Edytowane 31 Sierpnia przez Jarek