Megosztás a következőn keresztül:

CSS-sablon referencia-útmutatója

  • Cikk

A vállalati védjegyzés felhasználói bejelentkezési folyamathoz való konfigurálása zökkenőmentes felhasználói élményt nyújt azokban az alkalmazásokban, amelyek a Microsoft Entra-azonosítót használják identitás- és hozzáférés-kezelési szolgáltatásként. Ezt a CSS-referencia-útmutatót akkor használhatja, ha a CSS-sablont a céges védjegyzési folyamat részeként használja.

HTML-választók

Az alábbi CSS-stílusok lesznek a teljes oldal alapértelmezett törzs- és hivatkozásstílusai. Stílusok alkalmazása más hivatkozásokhoz vagy szöveg felülbírálási CSS-választókhoz.

  • body - Stílusok az egész oldalhoz
  • Hivatkozások stílusai:
    • a, a:link - Minden hivatkozás
    • a:hover - Ha az egér túl van a hivatkozáson
    • a:focus - Ha a hivatkozás fókuszban van
    • a:focus:hover - Ha a hivatkozás fókuszban van, és az egér a hivatkozás felett van
    • a:active - Amikor a hivatkozásra kattint

Microsoft Entra CSS-választók

A bejelentkezés részleteinek konfigurálásához használja az alábbi CSS-választókat.

  • .ext-background-image – Tároló, amely tartalmazza a háttérképet az alapértelmezett lightbox-sablonban

  • .ext-header - Fejléc a tároló tetején

  • .ext-header-logo - Fejléc emblémája a tároló tetején

    Screenshot of the sign-in screen with the .ext-header and .ext-header-logo areas highlighted.

  • .ext-middle - A teljes képernyős háttér stílusa, amely függőlegesen középre és vízszintesen középre igazítja a bejelentkezési mezőt

  • .ext-vertical-split-main-section- A függőleges felosztási sablon részleges képernyős hátterének tárolójának stílusa, amely egy bejelentkezési mezőt és egy hátteret is tartalmaz (Ez a stílus a Active Directory összevonási szolgáltatások (AD FS) (ADFS) sablonként is ismert.)

  • .ext-vertical-split-background-image-container - Bejelentkezési háttér a függőleges felosztási/ADFS-sablonban

  • .ext-sign-in-box - Bejelentkezési doboz tároló

  • .ext-title - Cím szövege

    Screenshot of the sign-in box, with the portion of the box that is styled with the .ext-sign-in-box selector.

  • .ext-subtitle - Felirat szövege

  • Elsődleges gombok stílusai:

    • .ext-button.ext-primary – Elsődleges gomb alapértelmezett stílusa
    • .ext-button.ext-primary:hover - Ha az egér a gomb felett van
    • .ext-button.ext-primary:focus - Ha a gomb fókuszban van
    • .ext-button.ext-primary:focus:hover - Ha a gomb fókuszban van, és az egér a gomb felett van
    • .ext-button.ext-primary:active - Amikor a gombra kattint

    Screenshot of the sign-in box with the primary - Next - button highlighted.

  • Stílusok másodlagos gombokhoz:

    • .ext-button.ext-secondary - Másodlagos gombok
    • .ext-button.ext-secondary:hover - Ha az egér a gomb felett van
    • .ext-button.ext-secondary:focus Ha a gomb fókuszban van
    • .ext-button.ext-secondary:focus:hover - Ha a gomb fókuszban van, és az egér a gomb felett van
    • .ext-button.ext-secondary:active - Amikor a gombra kattint

    Screenshot of the sign-in box at the Sign-in options step, with the secondary - Back - button highlighted.

  • .ext-error - Hibaszöveg

    Screenshot of the sign-in box with error text highlighted.

  • Szövegdobozok stílusai:

    • .ext-input.ext-text-box -Szövegdobozok
    • .ext-input.ext-text-box.ext-has-error – Ha a szövegmezőhöz érvényesítési hiba van társítva
    • .ext-input.ext-text-box:hover - Ha az egér túl van a szövegmezőn
    • .ext-input.ext-text-box:focus – Ha a szövegdoboz fókuszban van
    • .ext-input.ext-text-box:focus:hover - Ha a szövegdoboz fókuszban van, és az egér a szövegdoboz felett van

    Screenshot of the sign-in box with the text box with sample text highlighted.

  • .ext-boilerplate-text – Egyéni üzenetszöveg a bejelentkezési mező alján

  • .ext-promoted-fed-cred-box – Bejelentkezési beállítások szövegmezője

    Screenshot of the sign-in box with the optional boilerplate text area highlighted.

  • Stílusok az élőlábhoz:

    • .ext-footer - Élőláb terület az oldal alján
    • .ext-footer-links - Hivatkozások terület az élőláb alján az oldal
    • .ext-footer-item - Az oldal alján található láblécben található elemek (például "Használati feltételek" vagy "Adatvédelmi cookie-k") csatolása
    • .ext-debug-item - Hibakeresési részletek három pont a láblécben az oldal alján