diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro index 106bd7e3c03..f2a532d91be 100644 --- a/src/html/components/dashboard/_sidenav.astro +++ b/src/html/components/dashboard/_sidenav.astro @@ -279,7 +279,7 @@ const htmlPath = convertPathToHtml(path);

- Login & Register + Auth

@@ -296,6 +296,12 @@ const htmlPath = convertPathToHtml(path);

Register v1

+
  • + + +

    Lockscreen

    +     +
    • diff --git a/src/html/pages/examples/lockscreen.astro b/src/html/pages/examples/lockscreen.astro new file mode 100644 index 00000000000..a2206842bf6 --- /dev/null +++ b/src/html/pages/examples/lockscreen.astro @@ -0,0 +1,63 @@ +--- +import Head from "@components/_head.astro"; +import Scripts from "@components/_scripts.astro"; + +const title = "AdminLTE 4 | Lockscreen"; +const path = "../../../dist"; +const htmlPath = ".."; +const year = new Date().getFullYear(); +--- + + + + + + + + + + +
    + + +
    John Doe
    + +
    +
    + User Image +
    + +
    +
    + +
    + +
    +
    +
    +
    + +
    + Enter your password to retrieve your session +
    +
    + Or sign in as a different user +
    +
    + Copyright © 2014-{year} + AdminLTE.io
    + All rights reserved +
    +
    + + + + diff --git a/src/scss/pages/_lockscreen.scss b/src/scss/pages/_lockscreen.scss new file mode 100644 index 00000000000..abf14cf1645 --- /dev/null +++ b/src/scss/pages/_lockscreen.scss @@ -0,0 +1,74 @@ +// +// Pages: Lock Screen +// + +// ADD THIS CLASS TO THE TAG +.lockscreen { + // User name [optional] + .lockscreen-name { + font-weight: 600; + text-align: center; + } + + .lockscreen-logo { + margin-bottom: 25px; + font-size: 35px; + font-weight: 300; + text-align: center; + + a { + color: var(--#{$prefix}emphasis-color); + } + } + + .lockscreen-wrapper { + max-width: 400px; + margin: 0 auto; + margin-top: 10%; + } + + // Will contain the image and the sign in form + .lockscreen-item { + position: relative; + width: 290px; + padding: 0; + margin: 10px auto 30px; + background-color: var(--#{$prefix}body-bg); + @include border-radius(4px); + } + + // User image + .lockscreen-image { + position: absolute; + top: -25px; + left: -10px; + z-index: 10; + padding: 5px; + background-color: var(--#{$prefix}body-bg); + @include border-radius(50%); + + > img { + @include border-radius(50%); + width: 70px; + height: 70px; + } + } + + // Contains the password input and the login button + .lockscreen-credentials { + margin-left: 70px; + + .form-control { + border: 0; + } + + .btn { + padding: 0 10px; + border: 0; + } + } + + .lockscreen-footer { + margin-top: 10px; + } +} diff --git a/src/scss/parts/_pages.scss b/src/scss/parts/_pages.scss index 0dbe3a162e2..01cab17e26b 100644 --- a/src/scss/parts/_pages.scss +++ b/src/scss/parts/_pages.scss @@ -3,3 +3,4 @@ // @import "../pages/login_and_register"; +@import "../pages/lockscreen";