/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ .no-scrollbar::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* Wymuszenie własnego wyglądu kulki w przeglądarkach WebKit (Safari, Chrome) */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; background: #0284c7 !important; /* sky-600 */ cursor: pointer; } /* Opcjonalnie dla Firefoxa */ input[type="range"]::-moz-range-thumb { width: 16px !important; height: 16px !important; border-radius: 50% !important; background: #0284c7 !important; border: none !important; cursor: pointer; } #iti-0__country-selector { height: 300px !important; position: absolute !important; top: 3rem !important; background-color: #ffffff !important; } .iti__country-list { height: 258px !important; overflow-y: auto !important; } .iti__selected-country { position: absolute !important; top: 0 !important; left: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; /* Odpowiednik gap-2 (8px) */ width: fit-content !important; font-size: 0.875rem !important; /* Odpowiednik text-sm (14px) */ z-index: 20 !important; background-color: #e5e7eb !important; /* Odpowiednik bg-gray-200 */ padding-left: 0.625rem !important; /* Odpowiednik pl-2.5 (10px) */ padding-top: 0.625rem !important; /* Odpowiednik py-2.5 (10px) */ padding-bottom: 0.625rem !important; padding-right: 0.625rem !important; /* Odpowiednik pr-2.5 (10px) */ border-top-left-radius: 24px !important; /* Odpowiednik rounded-l-4xl */ border-bottom-left-radius: 24px !important; cursor: pointer !important; } /* Kontener wyszukiwarki: ustawiamy go jako flex, żeby ikona i input stały obok siebie */ .iti__search-input-wrapper { display: flex !important; align-items: center !important; position: relative !important; padding: 0 12px !important; background-color: #f8fafc !important; /* Delikatne tło dla pola szukania */ border-bottom: 1px solid #e2e8f0 !important; } /* Ikona lupy: dajemy jej przestrzeń i odpowiednie kolory */ .iti__search-icon { display: flex !important; align-items: center !important; justify-content: center !important; margin-right: 8px !important; color: #94a3b8 !important; /* Szary kolor ikonki (Tailwind gray-400) */ } /* Sam element SVG – musimy wymusić linie zamiast wypełnienia */ .iti__search-icon-svg { fill: none !important; stroke: currentColor !important; /* Przyjmie kolor z rodzica (.iti__search-icon) */ stroke-width: 2 !important; /* Grubość linii lupy */ } /* Sam input tekstowy: resetujemy domyślne ramki, żeby nie rozwalały layoutu */ .iti__search-input { flex: 1 !important; border: none !important; background: transparent !important; padding: 10px 0 !important; outline: none !important; font-size: 14px !important; } .iti__a11y-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border-0 !important; } /* ========================================================================== TRYB CIEMNY (Aktywuje się, gdy ma klasę .dark) ========================================================================== */ /* Główny kontener dropdownu i lista państw */ .dark #iti-0__country-selector, .dark .iti__country-list { background-color: #1e293b !important; } /* Kafelek wybranego kraju obok inputu telefonicznego */ .dark .iti__selected-country { background-color: #0f172a !important; color: #f8fafc !important; } /* Kontener wyszukiwarki */ .dark .iti__search-input-wrapper { background-color: #0f172a !important; border-bottom: 1px solid #334155 !important; } /* Ikona lupy */ .dark .iti__search-icon { color: #94a3b8 !important; } /* Tekst wpisywany w wyszukiwarkę */ .dark .iti__search-input { color: #f8fafc !important; } /* Nazwy państw na liście */ .dark .iti__country { color: #f8fafc !important; } /* Kody telefoniczne w nawiasach */ .dark .iti__dial-code { color: #94a3b8 !important; } /* Efekt najechania myszką / podświetlenia pozycji na liście */ .dark .iti__country:hover, .dark .iti__country.iti__highlight { background-color: #334155 !important; color: #ffffff !important; }