[Summary view] [Print] [Text view]

   1  // Login page
   2  
   3  .view-login,
   4  .task-logout {
   5  
   6    .container-main {
   7      order: 1;
   8  
   9      @include media-breakpoint-down(md) {
  10        display: flex;
  11        flex-wrap: wrap;
  12        align-items: center;
  13        justify-content: center;
  14        min-height: calc(100vh - 35vh);
  15      }
  16  
  17      #content {
  18        @include media-breakpoint-down(md) {
  19          max-width: 98%;
  20          padding: 0;
  21        }
  22      }
  23    }
  24  
  25    .login {
  26      width: 100%;
  27      max-width: 25rem;
  28      padding: 30px;
  29      margin: 1rem;
  30      color: var(--template-text-dark);
  31      background: var(--white);
  32      border-radius: 10px;
  33      box-shadow: 0 4px 20px -10px var(--template-bg-dark-50);
  34  
  35      @include media-breakpoint-down(lg) {
  36        margin-bottom: 3rem;
  37      }
  38  
  39      img {
  40        max-height: 4.4rem;
  41      }
  42  
  43      .logo {
  44        padding: 0 20px 20px;
  45      }
  46  
  47      svg.joomla-logo {
  48        width: 2.4rem;
  49        height: 4.4rem;
  50        background-size: 4.4rem 2.4rem;
  51  
  52        path {
  53          fill: var(--template-bg-dark);
  54        }
  55      }
  56  
  57      &-watermark {
  58        position: absolute;
  59        z-index: -1;
  60        max-width: 500px;
  61        transform: rotate(12deg) translate(40%, 10%);
  62      }
  63  
  64    }
  65  
  66    .form-group {
  67      position: relative;
  68      margin-bottom: 1.85rem;
  69  
  70      label {
  71        span {
  72          font-size: ($font-size-base * .9);
  73  
  74          @include media-breakpoint-down(sm) {
  75            width: 100%;
  76          }
  77  
  78          &.text-end {
  79            font-size: ($font-size-base * .75);
  80            color: var(--template-special-color);
  81          }
  82        }
  83      }
  84  
  85      .form-control-feedback {
  86        position: absolute;
  87        inset-inline-end: 0;
  88        bottom: -1.5rem;
  89        font-size: ($font-size-base * .75);
  90        text-align: end;
  91      }
  92  
  93      .form-control-hint {
  94        position: absolute;
  95        top: .1rem;
  96        inset-inline-end: 0;
  97        font-size: ($font-size-base * .75);
  98        text-align: end;
  99      }
 100    }
 101  
 102    input:focus,
 103    select:focus {
 104      background: $white;
 105      box-shadow: inset 0 0 1px 1px var(--template-contrast);
 106    }
 107  
 108    h1 {
 109      margin-bottom: .25rem;
 110      color: $white;
 111      text-align: center;
 112    }
 113  
 114    h2 {
 115      font-weight: $font-weight-normal;
 116      color: var(--template-bg-dark-10);
 117    }
 118  
 119    .btn {
 120      @include media-breakpoint-only(xs) {
 121        padding: 8px 10px;
 122        font-size: ($font-size-base * .875);
 123      }
 124    }
 125  
 126    .form-control,
 127    .form-select {
 128      max-width: none;
 129    }
 130  
 131    .sidebar-wrapper,
 132    .header .logo {
 133      flex: 1 0 400px;
 134    }
 135  
 136    .sidebar-wrapper {
 137      display: flex;
 138      flex-direction: column;
 139      max-width: none;
 140      background-color: var(--template-sidebar-bg);
 141  
 142      @include media-breakpoint-down(md) {
 143        order: 2;
 144        margin-bottom: 3rem;
 145      }
 146  
 147      .main-brand {
 148        margin-bottom: auto;
 149  
 150        a {
 151          font-size: ($font-size-base * .875);
 152        }
 153      }
 154  
 155      .card-header {
 156        font-size: ($font-size-base * 1.125);
 157        color: $white;
 158      }
 159    }
 160  
 161    #sidebar {
 162      align-self: flex-end;
 163      width: 100%;
 164      font-size: ($font-size-base * .875);
 165      color: var(--template-text-light);
 166      text-align: center;
 167  
 168      .card {
 169        background: rgba(0, 0, 0, .1);
 170        box-shadow: none;
 171  
 172        .module-body {
 173          padding: .75rem 1.25rem;
 174        }
 175      }
 176  
 177      @include media-breakpoint-down(md) {
 178        position: relative;
 179        bottom: 0;
 180      }
 181    }
 182  
 183    .container-main,
 184    .sidebar-wrapper {
 185  
 186      @include media-breakpoint-down(md) {
 187        flex: 1 0 100% !important;
 188        max-width: 100% !important;
 189        min-height: auto;
 190      }
 191    }
 192  
 193    .wrapper {
 194      display: flex;
 195  
 196      @include media-breakpoint-down(md) {
 197        flex-direction: column;
 198      }
 199    }
 200  
 201    .header {
 202      display: flex;
 203  
 204      .logo {
 205        &.small {
 206          line-height: 2.5rem;
 207        }
 208      }
 209  
 210      @include media-breakpoint-down(md) {
 211        background: var(--template-bg-dark-70);
 212      }
 213    }
 214  }
 215  
 216  label {
 217    color: $darkblue;
 218  }
 219  
 220  .com_login .sidebar-wrapper .main-brand {
 221    flex: 1;
 222    flex-basis: auto;
 223    margin-top: 100px;
 224    text-align: center;
 225  
 226    @include media-breakpoint-down(md) {
 227      margin-top: 10px;
 228    }
 229  }
 230  
 231  .com_login .sidebar-wrapper #sidebar p {
 232    margin-bottom: .2rem;
 233  }
 234  
 235  .com_login .sidebar-wrapper .main-brand a,
 236  .com_login .sidebar-wrapper #sidebar,
 237  .com_login .sidebar-wrapper #sidebar a {
 238    color: var(--template-text-light);
 239  }
 240  
 241  .view-login {
 242    #wrapper.d-flex {
 243      @include media-breakpoint-down(md) {
 244        display: flex !important;
 245      }
 246    }
 247  
 248    #sidebar-wrapper:not(.show):not(.collapse) {
 249      @include media-breakpoint-down(md) {
 250        display: block;
 251      }
 252    }
 253  
 254    .invalid .form-control-feedback {
 255      color: var(--danger);
 256    }
 257  }
 258  
 259  // Detect IE 10+ and display alert
 260  .ie11 {
 261    display: none;
 262  }
 263  
 264  @media all and (-ms-high-contrast: none),
 265    (-ms-high-contrast: active) {
 266    .ie11 {
 267      display: block;
 268    }
 269  }
 270  
 271  .login_message {
 272    margin: 1rem 1rem 0;
 273  }