mirror of
https://github.com/aljazceru/RogueSploit.git
synced 2025-12-17 06:14:21 +01:00
Create style.scss
This commit is contained in:
Francesco Grotti
545
weblogin/scss/style.scss
Normal file
545
weblogin/scss/style.scss
Normal file
@@ -0,0 +1,545 @@
|
|||||||
|
@import "compass/css3";
|
||||||
|
|
||||||
|
@import 'compass';
|
||||||
|
|
||||||
|
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/bootstrap.min.css';
|
||||||
|
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/r8-style.css';
|
||||||
|
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/r8-login.css';
|
||||||
|
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/r8-keyframes.css';
|
||||||
|
|
||||||
|
|
||||||
|
@mixin vendor-prefix($name, $argument) {
|
||||||
|
-webkit-#{$name}: #{$argument};
|
||||||
|
-ms-#{$name}: #{$argument};
|
||||||
|
-moz-#{$name}: #{$argument};
|
||||||
|
-o-#{$name}: #{$argument};
|
||||||
|
#{$name}: #{$argument};
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin absolute-position-center {
|
||||||
|
content:'';
|
||||||
|
position:absolute;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
#r8-logo-coin{
|
||||||
|
width:110px;
|
||||||
|
height:110px;
|
||||||
|
display:block;
|
||||||
|
margin:15px;
|
||||||
|
position:absolute;
|
||||||
|
bottom:15px;
|
||||||
|
right:15px;
|
||||||
|
border: none;
|
||||||
|
outline:none;
|
||||||
|
@include vendor-prefix( user-select, none );
|
||||||
|
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/R8-launcher-icon-dark.svg') 0 0 no-repeat!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/stardust.png") repeat;
|
||||||
|
}
|
||||||
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||||
|
body {
|
||||||
|
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/stardust_@2X.png") repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#wrapper{
|
||||||
|
min-height:500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#boxy-login-wrapper {
|
||||||
|
width: 31.5em;
|
||||||
|
height: 4em!important;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -16em;
|
||||||
|
border: 1em;
|
||||||
|
|
||||||
|
@include vendor-prefix( perspective, 1000 );
|
||||||
|
@include vendor-prefix( transition, width 550ms linear );
|
||||||
|
|
||||||
|
&.shake {
|
||||||
|
@include vendor-prefix( animation, bad-input-animation .5s linear );
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip{
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap!important;
|
||||||
|
text-transform: lowercase;
|
||||||
|
border-top: 1px solid #F9F9F9!important;
|
||||||
|
padding-top: -8px!important;
|
||||||
|
|
||||||
|
@include vendor-prefix( border-radius, 2px );
|
||||||
|
|
||||||
|
.tooltip-arrow {
|
||||||
|
border-bottom-color: #222229;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-inner{
|
||||||
|
display:block;
|
||||||
|
padding: 4px 5px 4px 5px!important;
|
||||||
|
margin: -4px 0px 0px 0px!important;
|
||||||
|
border-width: 1px;
|
||||||
|
background-color: #222229;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-transform: lowercase;
|
||||||
|
|
||||||
|
@include vendor-prefix( border-radius, 2px );
|
||||||
|
|
||||||
|
-webkit-border-image:
|
||||||
|
-webkit-gradient(linear, 0 0, 0 100%, from(#F9F9F9), to(rgba(0, 0, 0, 0))) 1 100%;
|
||||||
|
-webkit-border-image:
|
||||||
|
-webkit-linear-gradient(#F9F9F9, rgba(0, 0, 0, 0)) 1 100%;
|
||||||
|
-o-border-image:
|
||||||
|
-o-linear-gradient(#F9F9F9, rgba(0, 0, 0, 0)) 1 100%;
|
||||||
|
-moz-border-image:
|
||||||
|
-moz-linear-gradient(#F9F9F9, rgba(0, 0, 0, 0)) 1 100%;
|
||||||
|
-ms-border-image:
|
||||||
|
-ms-linear-gradient(#F9F9F9, rgba(0, 0, 0, 0)) 1 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
span.boxy-refresh{
|
||||||
|
width: 1.30em;
|
||||||
|
height: 1.30em;
|
||||||
|
position: absolute;
|
||||||
|
top: -.25em;
|
||||||
|
right: -1.5em;
|
||||||
|
//clear: both;
|
||||||
|
//float: right;
|
||||||
|
opacity: .5;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
&:before{
|
||||||
|
clear: both;
|
||||||
|
width: 1.30em;
|
||||||
|
height: 1.30em;
|
||||||
|
padding: .15em 0 0 .15em;
|
||||||
|
color: #D9D9DA;
|
||||||
|
display: block;
|
||||||
|
@include vendor-prefix( border-radius, 50% );
|
||||||
|
@include vendor-prefix( transform-origin, center );
|
||||||
|
@include vendor-prefix( transition, all 250ms linear );
|
||||||
|
}
|
||||||
|
&:hover:before{
|
||||||
|
color: #2EBEA5;
|
||||||
|
@include vendor-prefix( transform, rotate(180deg) );
|
||||||
|
}
|
||||||
|
/*&.animate-refresh{
|
||||||
|
&:before{
|
||||||
|
background: #f9f9f9;
|
||||||
|
}
|
||||||
|
}*/
|
||||||
|
}
|
||||||
|
|
||||||
|
em.small-forgot{
|
||||||
|
display:none;
|
||||||
|
font-size: 12px;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 400;
|
||||||
|
float: right;
|
||||||
|
height: 30px;
|
||||||
|
color: #666;
|
||||||
|
margin: 5px 5px 0 0;
|
||||||
|
|
||||||
|
@include vendor-prefix( transition, all 250ms linear );
|
||||||
|
|
||||||
|
a.boxy-forgot{
|
||||||
|
color: #777!important;
|
||||||
|
@include vendor-prefix( transition, color 250ms linear );
|
||||||
|
|
||||||
|
&:link,
|
||||||
|
&:focus,
|
||||||
|
&:active{
|
||||||
|
color: #666!important;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
color: #2EBEA5!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
form#boxy-login-form{
|
||||||
|
height: 4em!important;
|
||||||
|
margin: 0!important;
|
||||||
|
padding: 0!important;
|
||||||
|
margin-left: 1em!important;
|
||||||
|
|
||||||
|
.glyphicon{
|
||||||
|
|
||||||
|
&.glyphicon-refresh{
|
||||||
|
|
||||||
|
@include vendor-prefix( transition, all 250ms linear);
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
color: #F7F7F7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset{
|
||||||
|
|
||||||
|
margin:0!important;
|
||||||
|
padding:0!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxy-form-inner{
|
||||||
|
color: #ccc;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: 'Josefin Sans', sans-serif;
|
||||||
|
width: 30em;
|
||||||
|
height: 4em;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
@include vendor-prefix( transition, all 0.85s cubic-bezier(.17,.67,.14,.93) );
|
||||||
|
@include vendor-prefix( transform-style, preserve-3d );
|
||||||
|
@include vendor-prefix( transform-origin, 50% 50% );
|
||||||
|
|
||||||
|
&.rotated {
|
||||||
|
@include vendor-prefix( transform, rotateX(0deg) );
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rotated90 {
|
||||||
|
@include vendor-prefix( transform, rotateX(90deg) );
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rotated180 {
|
||||||
|
@include vendor-prefix( transform, rotateX(180deg) );
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rotatedBack90 {
|
||||||
|
@include vendor-prefix( transform, rotateX(-90deg) );
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rotatedBack180 {
|
||||||
|
@include vendor-prefix( transform, rotateX(-180deg) );
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rotate3d{
|
||||||
|
@include vendor-prefix( transform, rotateY(90deg) );
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rotateFirst3d{
|
||||||
|
@include vendor-prefix( transform, rotateY(-90deg) );
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rotate360{
|
||||||
|
//animation-iteration-count:2;
|
||||||
|
@include vendor-prefix( transform, rotateX(360deg) );
|
||||||
|
}
|
||||||
|
|
||||||
|
.end-cap{
|
||||||
|
height: 4em;
|
||||||
|
width: 4em;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #F7F7F7!important;
|
||||||
|
position: absolute;
|
||||||
|
cursor: normal;
|
||||||
|
margin:0;
|
||||||
|
padding:20px auto;
|
||||||
|
|
||||||
|
@include vendor-prefix( border-radius, 2px );
|
||||||
|
|
||||||
|
&.left,
|
||||||
|
&.right {
|
||||||
|
|
||||||
|
|
||||||
|
.tooltip{
|
||||||
|
margin-left: -1em!important;
|
||||||
|
margin-bottom: -1em!important;
|
||||||
|
margin-top: 1em!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glyphicon{
|
||||||
|
|
||||||
|
width: 100%!important;
|
||||||
|
@include vendor-prefix( transition, color 250ms linear);
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
color: #2EBEA5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.glyphicon-user,
|
||||||
|
&.glyphicon-remove-circle{
|
||||||
|
&:before{
|
||||||
|
display: block;
|
||||||
|
width: 1.3em;
|
||||||
|
height: 1.3em;
|
||||||
|
padding: 2em auto;
|
||||||
|
margin: 0.73em;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include vendor-prefix( transform, rotateY( 90deg ) translate3d(0, 0, 28em) );
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
border: 2px solid #F9F9F9;
|
||||||
|
background: url('../img/loader.gif') 50% 50% no-repeat;
|
||||||
|
@include vendor-prefix( transform, rotateY( -90deg ) translate3d(0, 0, 2em) );
|
||||||
|
|
||||||
|
.tooltip{
|
||||||
|
margin-left: -0.73em!important;
|
||||||
|
margin-bottom: 2em!important;
|
||||||
|
margin-top: -2em!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-success,
|
||||||
|
.icon-failure {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.boxy-success{
|
||||||
|
|
||||||
|
color: #2EBEA5!important;
|
||||||
|
background: #F7F7F7!important;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
color: #666!important;
|
||||||
|
}
|
||||||
|
.icon-success {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.icon-failure {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.boxy-failure{
|
||||||
|
|
||||||
|
color: #EA1F54!important;
|
||||||
|
background: #F7F7F7!important;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
color: #333!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-success {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.icon-failure {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.side{
|
||||||
|
background-color: #F7F7F7!important;
|
||||||
|
border:1px thin #ccc;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
height: 4em;
|
||||||
|
width: 30em;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
@include vendor-prefix( border-radius, 2px );
|
||||||
|
|
||||||
|
|
||||||
|
.glyphicon{
|
||||||
|
&.glyphicon-check{}
|
||||||
|
&.glyphicon-user,
|
||||||
|
&.glyphicon-asterisk,
|
||||||
|
&.glyphicon-question-sign{
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
height: 1em;
|
||||||
|
margin: 1.3em 1.2em;
|
||||||
|
color: #999;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&.bad-resp{
|
||||||
|
color: #EA1F54;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after{
|
||||||
|
content: '|';
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: 'Josefin Sans', sans-serif;
|
||||||
|
float: right;
|
||||||
|
margin-right: -1.6em;
|
||||||
|
height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include vendor-prefix( transition, color 250ms linear);
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
color: #2EBEA5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input{
|
||||||
|
background:transparent;
|
||||||
|
border: none;
|
||||||
|
margin: 0 0 0 -5px;
|
||||||
|
height: 4em;
|
||||||
|
width: 21em;
|
||||||
|
padding: 15px 15px 15px 35px;
|
||||||
|
color: #666;
|
||||||
|
float: left;
|
||||||
|
font-size: 14px;
|
||||||
|
font-size-adjust: 3em;
|
||||||
|
font-weight: 700;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
background: transparent;
|
||||||
|
border:none;
|
||||||
|
margin: 0;
|
||||||
|
height: 4em;
|
||||||
|
width: 4em;
|
||||||
|
padding: 15px 5px;
|
||||||
|
float: right;
|
||||||
|
overflow: hidden!important;
|
||||||
|
color: #333;
|
||||||
|
opacity:.25;
|
||||||
|
outline:none;
|
||||||
|
|
||||||
|
@include vendor-prefix( transition, all 250ms linear );
|
||||||
|
|
||||||
|
&:before{
|
||||||
|
content: "\00BB";
|
||||||
|
font-size: 5em;
|
||||||
|
line-height: .4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
opacity:1;
|
||||||
|
color:#2EBEA5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input+button{}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&.front {
|
||||||
|
@include vendor-prefix(transform, translate3d(0, 0, 2em) );
|
||||||
|
}
|
||||||
|
|
||||||
|
&.bottom {
|
||||||
|
@include vendor-prefix(transform, rotateX(-90deg) translate3d(0, 0, 2em) );
|
||||||
|
}
|
||||||
|
|
||||||
|
&.top {
|
||||||
|
@include vendor-prefix(transform, rotateX(90deg) translate3d(0, 0, 2em) );
|
||||||
|
}
|
||||||
|
|
||||||
|
&.back {
|
||||||
|
|
||||||
|
.glyphicon{
|
||||||
|
width: 4em;
|
||||||
|
height: 4em;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
padding: 20px;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
@include vendor-prefix( transition, color 250ms linear );
|
||||||
|
|
||||||
|
&.boxy-checked{
|
||||||
|
display:block;
|
||||||
|
color: #2EBEA5;
|
||||||
|
}
|
||||||
|
&.boxy-unchecked{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label{
|
||||||
|
|
||||||
|
max-width: 25em;
|
||||||
|
height: 4em;
|
||||||
|
width: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
clear: both;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-left: 3em;
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@include vendor-prefix( user-select, none);
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox]{
|
||||||
|
height: 4em;
|
||||||
|
width: 4em!important;
|
||||||
|
clear: both;
|
||||||
|
overflow: hidden;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
|
||||||
|
width:4em;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
margin: 0;
|
||||||
|
height: 4em;
|
||||||
|
padding: 15px 5px;
|
||||||
|
float: right;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #1B1B1B;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
@include vendor-prefix( transition, all 250ms linear );
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
background-color: #2EBEA5!important;
|
||||||
|
color: #F7F7F7!important;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-of-type{
|
||||||
|
border-right: 1px solid #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type{
|
||||||
|
border-left: 1px solid #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before{
|
||||||
|
content:'';
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include vendor-prefix(transform, rotateX(-180deg) translate3d(0, 0, 2em) );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user