/** * Prihlasovacia stránka administrácie. * * Prekrýva login.css, preto sa načítava až za ním. Vypnutie = zmazanie * jedného riadku v app/View/Layouts/backoffice_login.ctp. * * Skladba: rozostrená fotka cez celú plochu, na nej tmavý závoj a nad ním * matná sklenená karta. Závoj a krytie karty sú nastavené tak, aby biely * text držal kontrast aj nad úplne svetlým miestom fotky — čitateľnosť tak * nezávisí od toho, akú fotku do pozadia dáš. * * Ikony pri poliach sa nepoužívajú, polia idú cez celú šírku. */ /* ---------------------------------------------------------------- pozadie */ /* fotka ide priamo na nad firemnou modrou — žiadna :before vrstva */ body { animation: none; background-color: #6c7cff; background: url(/img/universal/bg-backoffice-login.jpg) center center / cover no-repeat #6c7cff; color: #ffffff; } /* :before z login.css sa nepoužíva */ body:before { content: none; display: none; } /* závoj sa nepoužíva */ body:after { content: none; display: none; } /* ------------------------------------------------------------------ karta */ .login .box { background-color: rgba(18, 22, 29, .88); -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); border: 1px solid rgba(255, 255, 255, .10); border-radius: 16px; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06); } /* Značka a názov pod ňou sú jediný obsah hlavičky karty — preto stĺpec na * stred. .title je z login.css flex-row, tu sa prepína na zvislé usporiadanie. */ .login .content .title { flex-direction: column; justify-content: center; align-items: center; } .login .logo { width: auto; height: auto; max-width: 95px; } .login .content .title .logo-title { margin-top: 10px; color: #ffffff; font-size: 17px; font-weight: 600; letter-spacing: .2px; line-height: 1.2; } /* Doména vo fialovej; karta je tmavá, značková #6c7cff na nej drží 5,17:1. */ .login .content .title .logo-title .tld { color: #6c7cff; } .login h1 { color: #ffffff; font-size: 25px; font-weight: 600; letter-spacing: -.4px; } .login h2 { color: rgba(255, 255, 255, .72); font-size: 15px; font-weight: 400; } /* ------------------------------------------------------------------ polia */ /* ikony sa nepoužívajú */ .login .content .input .icon-login { display: none; } .login .content .input input { background-color: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .20); border-radius: 8px; color: #ffffff; font-weight: 400; } .login .content .input input::placeholder { color: rgba(255, 255, 255, .78); opacity: 1; } .login .content .input input::-webkit-input-placeholder { color: rgba(255, 255, 255, .78); } .login .content .input input:focus { outline: none; background-color: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .55); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); } /* prehliadačom vyplnené polia nesmú preblysnúť bielym podkladom */ .login .content .input input:-webkit-autofill, .login .content .input input:-webkit-autofill:hover, .login .content .input input:-webkit-autofill:focus { -webkit-text-fill-color: #ffffff; -webkit-box-shadow: 0 0 0 1000px #232833 inset; caret-color: #ffffff; } /* --------------------------------------------------------------- tlačidlo */ .login .content .button { width: 100%; background-color: rgb(108, 124, 255); border: 1px solid rgb(108, 124, 255); border-radius: 8px; color: #ffffff; font-weight: 600; letter-spacing: .2px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .06s ease; } .login .content .button:hover { background-color: rgb(126, 140, 255); border-color: rgb(126, 140, 255); color: #ffffff; } .login .content .button:active { transform: translateY(1px); } /* ------------------------------------------------------------ drobný text */ /* Kontaktný riadok pod kartou — plná biela, žiadne stlmenie. Nesie ho * priesvitná fotka, takže akékoľvek zníženie krytia ho hneď rozpije. */ .login .content .text, .login .content .link, .login .content .text a, .login .content .link a, .login .content .text small { color: #ffffff; opacity: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); } .login .content .text a, .login .content .link { color: #ffffff; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); } .login .content .text a:hover, .login .content .link:hover { border-bottom-color: #ffffff; text-decoration: none; } /* -------------------------------------------------------------- hlásenie */ .login .alert-danger { background-color: rgba(186, 90, 79, .22); border: 1px solid rgba(232, 160, 150, .45); border-radius: 8px; color: #ffd9d4; font-size: 14px; } .login .close { color: #ffd9d4; opacity: .8; text-shadow: none; }