- kolumna ukladu idzie prosto po . ------------------------------------------------------------------ */ body { display: flex; flex-direction: column; min-height: 100svh; text-align: center; /* Bez tego przeciaganie palcem szarpie cala strona */ overscroll-behavior: contain; } /* Przycisk podpowiedzi dzwiekowej stoi POD ukladanymi slowami, w tym samym miejscu co przyciski w app1 i app3, i ma ich wyglad z app-wspolne/motyw.css. Wczesniej siedzial w naglowku - stad dawniejsze wyjatki na waski ekran (mniejsze logo, przycisk na cala szerokosc drugiego wiersza), ktorych juz nie ma: pasek tego cwiczenia jest teraz taki sam jak pozostale. Slowa maja wlasne dopelnienie od dolu, wiec przycisk nie potrzebuje dodatkowego marginesu z gory. */ /* --------------------------------------------------------------- Zdanie po polsku - to, co trzeba ulozyc --------------------------------------------------------------- */ #sentence { width: min(var(--szerokosc), 100% - 32px); margin: 24px auto 0; padding: 16px 12px; background-color: var(--karta); border: 1px solid var(--obwodka); border-radius: var(--zaokraglenie); box-shadow: var(--cien); @media (min-width: 640px) { padding: 24px 20px; } @media (min-width: 1024px) { margin: 40px auto 0; } } .pl-sentence { font-family: "Roboto Mono", "Roboto", monospace; font-size: 2rem; line-height: 1.4; text-transform: uppercase; color: var(--tekst); @media (min-width: 640px) { font-size: 2.6rem; } @media (min-width: 1024px) { font-size: 3.6rem; } } /* Podpowiedz doklejana przez app.js pod zdaniem */ .pl-sentence span { display: block; margin-top: 16px; font-size: 1.8rem; color: var(--tekst-drugi); } .pl-sentence span:hover { color: var(--granat); } span.title { display: inline; font-size: 2rem; font-weight: 700; text-align: center; text-transform: uppercase; color: var(--tekst); } /* --------------------------------------------------------------- Slowa do przeciagania --------------------------------------------------------------- */ #english_words { display: flex; flex-wrap: wrap; justify-content: center; width: min(var(--szerokosc), 100% - 32px); margin: 0 auto; padding: 24px 0; gap: 5px; /* Na waskim ekranie palec potrzebuje wiecej miejsca miedzy wierszami */ row-gap: 20px; min-height: 80px; font-family: "Roboto Mono", "Roboto", monospace; font-weight: 400; @media (min-width: 640px) { padding: 40px 0; gap: 8px; row-gap: 8px; } @media (min-width: 1200px) { padding: 56px 0; gap: 16px; row-gap: 16px; } } .word-container { display: inline-block; position: relative; font-size: 2rem; @media (min-width: 640px) { font-size: 2.6rem; } @media (min-width: 1024px) { font-size: 3rem; } } .draggable { /* 44px to najmniejszy sensowny cel dotyku */ min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; padding: 10px 15px; border: 1px solid var(--granat-ciemny); border-radius: 6px; background-color: var(--granat); color: var(--na-kolorze); cursor: grab; user-select: none; touch-action: none; transition: all 0.2s ease; } .draggable:hover { background-color: var(--granat-ciemny); transform: scale(1.05); } .draggable:active { cursor: grabbing; } /* Kopia elementu jadaca za palcem */ .drag-clone { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); transform: scale(1.05); transition: none !important; } /* Slowo, z ktorym nastapi zamiana */ .swap-target { background-color: var(--zielen) !important; border-color: var(--zielen) !important; transform: scale(1.1); box-shadow: 0 0 12px rgba(30, 126, 52, 0.6); transition: all 0.05s ease !important; } .last-word, .non-draggable { opacity: 0.75; } .last-word { cursor: not-allowed; } .non-draggable { cursor: default; } .last-word:hover, .non-draggable:hover { background-color: var(--granat); transform: none; } .last-word:active { cursor: not-allowed; } .non-draggable:active { cursor: default; } .drop-indicator { position: absolute; top: 50%; width: 3px; height: 80%; background-color: var(--zielen); transform: translateY(-50%); display: none; z-index: 999; border-radius: 2px; box-shadow: 0 0 8px rgba(30, 126, 52, 0.6); @media (min-width: 640px) { width: 4px; } } /* --------------------------------------------------------------- Nowa mechanika przenoszenia (app-nowe.js). Ponizsze klasy nie wystepuja na stronach ze starym app.js - tam nic sie nie zmienia. --------------------------------------------------------------- */ /* Jeden plywajacy znacznik miejsca wstawienia na cala strone, pozycjonowany wzgledem okna - zamiast znacznika w kazdym kafelku */ .gap-indicator { position: fixed; width: 3px; border-radius: 2px; background-color: var(--zielen); box-shadow: 0 0 8px rgba(30, 126, 52, 0.6); pointer-events: none; z-index: 999; display: none; @media (min-width: 640px) { width: 4px; } } /* Slowo zaznaczone stuknieciem (tryb dotknij-i-wskaz) - ten sam wyglad co .swap-target w starej mechanice */ .wybrane { background-color: var(--zielen) !important; border-color: var(--zielen) !important; transform: scale(1.1); box-shadow: 0 0 12px rgba(30, 126, 52, 0.6); } /* Kafelki sa dostepne z klawiatury - fokus widoczny jak na przycisku dzwieku */ .draggable:focus-visible { outline: 3px solid var(--granat-ciemny); outline-offset: 2px; }