first commit

media/templates/administrator/atum/scss/blocks/_login.scss

@@ -0,0 +1,266 @@
+// Login page
+
+.view-login,
+.task-logout {
+
+  .container-main {
+    order: 1;
+
+    @include media-breakpoint-down(md) {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      min-height: calc(100vh - 35vh);
+    }
+
+    #content {
+      @include media-breakpoint-down(md) {
+        max-width: 98%;
+        padding: 0;
+      }
+    }
+  }
+
+  .login {
+    width: 100%;
+    max-width: 25rem;
+    padding: 30px;
+    margin: 1rem;
+    color: var(--template-text-dark);
+    background: var(--body-bg);
+    border-radius: 10px;
+    box-shadow: 0 4px 20px -10px var(--template-bg-dark-50);
+
+    @include media-breakpoint-down(lg) {
+      margin-bottom: 3rem;
+    }
+
+    img {
+      width: auto;
+      max-height: 4.4rem;
+    }
+
+    .logo {
+      padding: 0 20px 20px;
+    }
+
+    svg.joomla-logo {
+      width: 2.4rem;
+      height: 4.4rem;
+      background-size: 4.4rem 2.4rem;
+
+      path {
+        fill: var(--template-bg-dark);
+      }
+    }
+
+    &-watermark {
+      position: absolute;
+      z-index: -1;
+      max-width: 500px;
+      transform: rotate(12deg) translate(40%, 10%);
+    }
+
+  }
+
+  .form-group {
+    position: relative;
+    margin-bottom: 1.85rem;
+
+    label {
+      span {
+        font-size: ($font-size-base * .9);
+
+        @include media-breakpoint-down(sm) {
+          width: 100%;
+        }
+      }
+    }
+
+    .form-control-feedback {
+      position: absolute;
+      inset-inline-end: 0;
+      bottom: -1.5rem;
+      font-size: ($font-size-base * .75);
+      text-align: end;
+    }
+
+    .form-control-hint {
+      position: absolute;
+      top: .1rem;
+      inset-inline-end: 0;
+      font-size: ($font-size-base * .75);
+      text-align: end;
+    }
+  }
+
+  input:focus,
+  select:focus {
+    box-shadow: inset 0 0 1px 1px var(--template-contrast);
+  }
+
+  h1 {
+    margin-bottom: .25rem;
+    color: $white;
+    text-align: center;
+  }
+
+  h2 {
+    font-weight: $font-weight-normal;
+    color: var(--template-bg-dark-10);
+  }
+
+  .btn {
+    @include media-breakpoint-only(xs) {
+      padding: 8px 10px;
+      font-size: ($font-size-base * .875);
+    }
+  }
+
+  .form-control,
+  .form-select {
+    max-width: none;
+  }
+
+  .sidebar-wrapper,
+  .header .logo {
+    flex: 1 0 400px;
+  }
+
+  .sidebar-wrapper {
+    display: flex;
+    flex-direction: column;
+    max-width: none;
+    background-color: var(--template-sidebar-bg);
+
+    @include media-breakpoint-down(md) {
+      order: 2;
+      margin-bottom: 3rem;
+    }
+
+    .main-brand {
+      margin-bottom: auto;
+
+      a {
+        font-size: ($font-size-base * .875);
+      }
+    }
+
+    .card-header {
+      font-size: ($font-size-base * 1.125);
+      color: $white;
+    }
+  }
+
+  #sidebar {
+    align-self: flex-end;
+    width: 100%;
+    font-size: ($font-size-base * .875);
+    --body-color: var(--template-text-light);
+    color: var(--template-text-light);
+    text-align: center;
+
+    .card {
+      background: rgba(0, 0, 0, .1);
+      box-shadow: none;
+
+      .module-body {
+        padding: .75rem 1.25rem;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      position: relative;
+      bottom: 0;
+    }
+  }
+
+  .container-main,
+  .sidebar-wrapper {
+
+    @include media-breakpoint-down(md) {
+      flex: 1 0 100% !important;
+      max-width: 100% !important;
+      min-height: auto;
+    }
+  }
+
+  .wrapper {
+    display: flex;
+
+    @include media-breakpoint-down(md) {
+      flex-direction: column;
+    }
+  }
+
+  .header {
+    display: flex;
+
+    .logo {
+      &.small {
+        line-height: 2.5rem;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      background: var(--template-bg-dark-70);
+    }
+  }
+}
+
+label {
+  color: $darkblue;
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    label {
+      color: var(--white);
+    }
+  }
+}
+
+
+.com_login .sidebar-wrapper .main-brand {
+  flex: 1;
+  flex-basis: auto;
+  margin-top: 100px;
+  text-align: center;
+
+  @include media-breakpoint-down(md) {
+    margin-top: 10px;
+  }
+}
+
+.com_login .sidebar-wrapper #sidebar p {
+  margin-bottom: .2rem;
+}
+
+.com_login .sidebar-wrapper .main-brand a,
+.com_login .sidebar-wrapper #sidebar,
+.com_login .sidebar-wrapper #sidebar a {
+  color: var(--template-text-light);
+}
+
+.view-login {
+  #wrapper.d-flex {
+    @include media-breakpoint-down(md) {
+      display: flex !important;
+    }
+  }
+
+  #sidebar-wrapper:not(.show):not(.collapse) {
+    @include media-breakpoint-down(md) {
+      display: block;
+    }
+  }
+
+  .invalid .form-control-feedback {
+    color: var(--danger);
+  }
+}
+
+.login_message {
+  margin: 1rem 1rem 0;
+}