"Fossies" - the Fresh Open Source Software Archive

Member "neos-development-collection-7.0.1/Neos.Neos/Resources/Private/Styles/Login.scss" (23 Feb 2021, 6602 Bytes) of package /linux/www/neos-development-collection-7.0.1.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) SASS/SCSS source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file.

    1 // Core variables and mixins
    2 @import "Foundation/variables"; // Modify this for custom colors, font-sizes, etc
    3 @import "Foundation/mixins";
    4 @import "Constants";
    5 @import "Mixins";
    6 @import "Fonts";
    7 
    8 $loginBoxWidth: $unit * 8;
    9 
   10 body {
   11     background-color: #141414;
   12     margin: 0;
   13     background-size: cover;
   14     background-repeat: no-repeat;
   15     background-position: center;
   16     background-attachment: fixed;
   17 }
   18 
   19 body,
   20 html,
   21 .neos-modal-centered {
   22     // IE 10+ needs this to work in combination with `flex: 1 0 auto` to make the footer stick to the bottom
   23     height: 100%;
   24 }
   25 
   26 .neos {
   27     // CSS Reset
   28     @import "Foundation/reset";
   29     @import "Foundation/grid";
   30     @import "Foundation/forms";
   31     @import "Foundation/tooltip";
   32     @import "Shared/Ellipsis";
   33 
   34     @include font;
   35 
   36 
   37     &[style] {
   38         .neos-login-box {
   39             padding: $unit;
   40             position: relative;
   41             overflow: hidden;
   42 
   43             &.background-image-active {
   44                 &:before,
   45                 &:after {
   46                     z-index: -1;
   47                     display: block;
   48                     position: absolute;
   49                     content: ' ';
   50                     top: 0;
   51                     left: 0;
   52                     height: 100%;
   53                     width: 100%;
   54                 }
   55 
   56                 &:before {
   57                     // the `background-image` property is set within the template
   58                     background-size: cover;
   59                     background-repeat: no-repeat;
   60                     background-position: center;
   61                     background-attachment: fixed;
   62                     -webkit-filter: blur(10px); /* Chrome, Opera, etc. */
   63                     -moz-filter: blur(10px);
   64                     -o-filter: blur(10px);
   65                     -ms-filter: blur(10px);
   66                     filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
   67                     filter: url('../../Public/Images/blur.svg#blur'); /* Older FF and others - http://jordanhollinger.com/media/blur.svg */
   68                     filter: blur(10px); /* Firefox 35+, eventually all */
   69                     padding: $unit;
   70                 }
   71 
   72                 &:after {
   73                     background: rgba(#fff, .25);
   74                 }
   75             }
   76             &-logo {
   77                 margin: 0 0 $unit/2 0;
   78                 &-resource {
   79                     margin: 0 auto 0 auto;
   80                     display: block;
   81                 }
   82             }
   83         }
   84 
   85         input[type="text"],
   86         input[type="password"] {
   87             background-color: rgba(#fff, .75);
   88             color: $textOnWhite;
   89 
   90             &:focus,
   91             &:invalid:focus {
   92                 background-color: rgba(#fff, .9);
   93                 box-shadow: none;
   94             }
   95 
   96             &:-webkit-autofill {
   97                 -webkit-box-shadow: 0 0 0 50px #fff inset;
   98                 -webkit-text-fill-color: $textOnWhite;
   99 
  100                 &:focus {
  101                     -webkit-box-shadow: 0 0 0 50px #fff inset;
  102                     -webkit-text-fill-color: $textOnWhite;
  103                 }
  104             }
  105         }
  106 
  107         .neos-login-footer {
  108             p,
  109             a {
  110                 color: rgba(#fff, .75);
  111                 text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
  112             }
  113         }
  114     }
  115 
  116     form {
  117         margin-bottom: 0;
  118     }
  119 
  120     input[type="text"],
  121     input[type="password"] {
  122         width: 100%;
  123         min-width: $inspectorWidth - $defaultMargin * 2;
  124         height: $unit;
  125         border: none;
  126         background-color: $grayMedium;
  127         color: $textOnGray;
  128         font-size: 14px;
  129         padding: 0 ($defaultMargin - 2px);
  130         margin: 0;
  131         border-radius: 0;
  132         box-sizing: border-box;
  133         box-shadow: none;
  134         transition: none;
  135         @include font;
  136 
  137         &:focus,
  138         &:invalid:focus {
  139             background-color: #fff;
  140             color: $textOnWhite;
  141             box-shadow: none;
  142         }
  143 
  144         &:-webkit-autofill {
  145             -webkit-box-shadow: 0 0 0 50px $grayMedium inset;
  146             -webkit-text-fill-color: $textOnGray;
  147 
  148             &:focus {
  149                 -webkit-box-shadow: 0 0 0 50px #fff inset;
  150                 -webkit-text-fill-color: $textOnWhite;
  151             }
  152         }
  153     }
  154 
  155     .neos-modal-centered {
  156         @include flex();
  157         @include flex-align(center);
  158         @include flex-justify(center);
  159         @include flex-direction(column);
  160         min-height: 100vh;
  161     }
  162 
  163     .neos-login-main {
  164         @include flex();
  165         @include flex-align(center);
  166         @include flex-justify(center);
  167         flex: 1 0 auto;
  168         width: 100%;
  169     }
  170 
  171     .neos-login-box {
  172         background: transparent;
  173         border: none;
  174         width: $loginBoxWidth;
  175         z-index: 10;
  176 
  177         box-shadow: none;
  178         border-radius: none;
  179 
  180         svg {
  181             margin: 0 auto;
  182             display: block;
  183         }
  184 
  185         .neos-login-heading {
  186             color: #fff;
  187             font-size: 16px;
  188             margin-bottom: $defaultMargin;
  189             text-align: center;
  190             font-weight: normal;
  191         }
  192 
  193         .neos-login-body {
  194             padding: 0;
  195             overflow: visible;
  196         }
  197 
  198         .neos-actions {
  199             bottom: 0;
  200             width: 100%;
  201             min-height: $unit;
  202 
  203             button, .btn {
  204                 text-align: center;
  205                 text-decoration: none !important;
  206                 display: block;
  207                 height: $unit;
  208                 line-height: $unit;
  209                 color: #fff;
  210                 border: none;
  211                 background-image: none;
  212                 font-size: 14px;
  213                 text-shadow: none;
  214                 box-shadow: none;
  215                 box-sizing: border-box;
  216                 @include font;
  217 
  218                 &:focus {
  219                     outline: none;
  220                 }
  221 
  222                 &.neos-login-btn {
  223                     background-color: $blue;
  224                     width: 100%;
  225                 }
  226 
  227                 &.neos-hidden {
  228                     display: none;
  229                 }
  230 
  231                 &.neos-disabled {
  232                     cursor: not-allowed;
  233                     opacity: .65;
  234                 }
  235             }
  236         }
  237 
  238         .neos-controls {
  239             height: $unit;
  240             margin-bottom: 15px;
  241         }
  242 
  243         .neos-tooltip {
  244             left: -4px;
  245             top: 0;
  246             width: 100%;
  247             position: relative;
  248             clear: both;
  249             float: none;
  250 
  251             &.neos-bottom {
  252                 padding: $relatedMargin 0 0 0;
  253                 margin-left: $tightMargin;
  254                 margin-top: -1px;
  255             }
  256 
  257             &.neos-in {
  258                 opacity: 1;
  259             }
  260 
  261             .neos-tooltip-arrow {
  262                 margin-left: -$relatedMargin;
  263                 border-width: 0 $relatedMargin $relatedMargin $relatedMargin;
  264             }
  265 
  266             .neos-tooltip-inner {
  267                 max-width: $loginBoxWidth;
  268                 font-size: 13px;
  269                 color: #fff;
  270                 border-radius: 0;
  271                 box-sizing: border-box;
  272             }
  273         }
  274 
  275         .neos-tooltip-error {
  276             .neos-tooltip-arrow {
  277                 border-bottom-color: $warning;
  278             }
  279 
  280             .neos-tooltip-inner {
  281                 background-color: $warning;
  282             }
  283         }
  284 
  285         .neos-tooltip-notice {
  286             .neos-tooltip-arrow {
  287                 border-bottom-color: $green;
  288             }
  289 
  290             .neos-tooltip-inner {
  291                 background-color: $green;
  292             }
  293         }
  294     }
  295 
  296     .neos-login-footer {
  297         width: 50%;
  298         padding: $unit /2;
  299         @include font;
  300         box-sizing: border-box;
  301 
  302         p {
  303             font-size: 12px;
  304             color: #535353;
  305             line-height: 1.3em;
  306             margin: 0;
  307         }
  308 
  309         a {
  310             color: #535353;
  311             &:hover {
  312                 text-decoration: none;
  313             }
  314         }
  315     }
  316 }
  317 
  318 @media (max-width: 1400px) {
  319     .neos {
  320         &[style] {
  321             .neos-login-footer {
  322                 width: 70%;
  323             }
  324         }
  325     }
  326 }
  327 
  328 @media (max-width: 1000px) {
  329     .neos {
  330         &[style] {
  331             .neos-login-footer {
  332                 width: 90%;
  333             }
  334         }
  335     }
  336 }
  337 
  338 @media (max-width: 480px) {
  339     .neos {
  340         &[style] {
  341             .neos-login-box {
  342                 width: 100%;
  343                 padding: $unit/2;
  344             }
  345 
  346             .neos-login-footer {
  347                 width: 100%;
  348             }
  349         }
  350 
  351         input[type="text"],
  352         input[type="password"] {
  353             min-width: 0;
  354         }
  355     }
  356 }
  357 
  358 .effect--shake {
  359     animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  360     transform: translate3d(0, 0, 0);
  361     backface-visibility: hidden;
  362     perspective: 1000px;
  363 }
  364 
  365 @keyframes shake {
  366     10%, 90% {
  367         transform: translate3d(-1px, 0, 0);
  368     }
  369 
  370     20%, 80% {
  371         transform: translate3d(2px, 0, 0);
  372     }
  373 
  374     30%, 50%, 70% {
  375         transform: translate3d(-4px, 0, 0);
  376     }
  377 
  378     40%, 60% {
  379         transform: translate3d(4px, 0, 0);
  380     }
  381 }