diff --git a/src/app/app.component.css b/src/app/app.component.css index 48fc657..d3c577e 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,40 +1,62 @@ .mat-toolbar { display: flex; + flex-wrap: wrap; /* Pozwala zawijać elementy na mniejszych ekranach */ align-items: center; - justify-content: space-between; /* Równe rozmieszczenie elementów */ - padding: 0 16px; /* Marginesy wewnętrzne */ + justify-content: space-between; /* Rozdzielenie elementów */ + padding: 0 16px; } .col-left { display: flex; align-items: center; - justify-content: flex-start; /* Wyrównanie flagi do lewej */ + justify-content: flex-start; } .flag { - height: 25px; /* Powiększenie flagi */ + height: 25px; width: auto; - margin-right: 16px; /* Odstęp od sąsiednich elementów */ - border: none; /* Brak ramki */ + margin-right: 16px; + border: none; } .toolbar-item { - font-size: 22px; /* Większy rozmiar tekstu */ + font-size: 22px; font-weight: 500; - text-transform: none; /* Bez uppercase */ - color: white; /* Kolor tekstu */ + text-transform: none; + color: white; + padding: 8px; } button.mat-icon-button { - padding: 0; /* Brak dodatkowych marginesów */ + padding: 0; } .mat-toolbar-row { display: flex; + flex-wrap: wrap; /* Pozwala zawijać elementy */ + justify-content: space-between; width: 100%; } .col { - text-align: center; /* Wyśrodkowanie tekstu w kolumnach */ - flex: 1; /* Równe rozciąganie kolumn */ + text-align: center; + flex: 1; /* Równe rozciąganie na większych ekranach */ +} + +@media (max-width: 768px) { + .mat-toolbar { + flex-direction: column; /* Elementy ułożą się pionowo na małych ekranach */ + padding: 8px; /* Zmniejszenie paddingu */ + } + + .toolbar-item { + font-size: 18px; /* Zmniejszenie rozmiaru tekstu */ + text-align: center; + width: 100%; /* Każdy przycisk zajmie pełną szerokość */ + margin: 4px 0; /* Odstępy między przyciskami */ + } + + .flag { + height: 20px; /* Zmniejszenie rozmiaru flagi */ + } }