e2ccb04c75
- added some new images to the "feature gallery" - removed "beta" status from "magnetizing" feature on map menu - hide "server status" panel on "mobile" breakpoint
638 lines
13 KiB
SCSS
638 lines
13 KiB
SCSS
.pf-animate{
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
// splash loading animation ============================================================================
|
|
|
|
.pf-color-line{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
@include background-image(linear-gradient(to right, $green-light, $green-light 100%));
|
|
|
|
&.warning{
|
|
@include background-image(linear-gradient(to right, $brand-warning, $brand-warning 100%));
|
|
}
|
|
|
|
&.danger{
|
|
@include background-image(linear-gradient(to right, $brand-danger, $brand-danger 100%));
|
|
}
|
|
}
|
|
|
|
.pf-splash{
|
|
position: absolute;
|
|
z-index: 2000;
|
|
background-color: $gray-darkest;
|
|
color: $gray-light;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
will-change: opacity;
|
|
|
|
.pf-splash-title{
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 30%;
|
|
text-align: center;
|
|
max-width: 500px;
|
|
padding: 20px;
|
|
@include transform( translate(-50%, -50%) );
|
|
}
|
|
}
|
|
|
|
// landing page ========================================================================================
|
|
@media (max-width: $screen-md) {
|
|
.pf-landing{
|
|
|
|
#pf-logo-container{
|
|
margin: 5px auto;
|
|
}
|
|
|
|
.pf-brand-desc {
|
|
display: none
|
|
}
|
|
|
|
.navbar .navbar-brand {
|
|
margin-left: 10px
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// content
|
|
.pf-landing{
|
|
section{
|
|
min-height: 200px;
|
|
padding: 20px 0 40px 0;
|
|
border-bottom: 1px solid $gray-darker;
|
|
|
|
h4{
|
|
font-size: 18px;
|
|
font-family: $font-family-sans-serif;
|
|
margin: 5px 0 10px 0;
|
|
border-bottom: 1px solid $gray-darker;
|
|
line-height: 34px;
|
|
}
|
|
}
|
|
|
|
.container > .row{
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.alert {
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
// images for gallery
|
|
|
|
a[data-gallery] {
|
|
position: relative;
|
|
|
|
&:before{
|
|
content: '\f002';
|
|
font-family: 'FontAwesome';
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
color: $orange;
|
|
position: absolute;
|
|
top: 9px;
|
|
left: 8px;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding-top: calc(50% - 10px);
|
|
z-index: 10;
|
|
text-align: center;
|
|
@include transition(transform 0.1s 0.06s ease-in, opacity 0.1s ease-out);
|
|
will-change: transform, opacity;
|
|
transform: scale(0,0);
|
|
opacity: 0;
|
|
}
|
|
|
|
&:hover{
|
|
img{
|
|
border-color: $teal-lightest;
|
|
@include filter(brightness( 50% ));
|
|
}
|
|
|
|
&:before{
|
|
@include transition-delay( 0.1s );
|
|
transform: scale(1,1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.pf-landing-image-preview{
|
|
border: {
|
|
width: 1px;
|
|
style: solid;
|
|
color: $gray-darkest
|
|
}
|
|
margin: 5px 0 15px 0;
|
|
display: inline-block;
|
|
will-change: all;
|
|
@include filter(brightness( 100% ));
|
|
@include transition(all 0.2s ease-out);
|
|
@include box-shadow(0 4px 10px rgba(0,0,0, 0.4));
|
|
|
|
|
|
&.pf-landing-image-preview-small{
|
|
height: 160px;
|
|
}
|
|
|
|
&.pf-landing-image-preview-medium{
|
|
height: 256px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// lists
|
|
.pf-landing-list{
|
|
li > i{
|
|
@extend .fa-li;
|
|
@extend .fa;
|
|
@extend .fa-fw;
|
|
@extend .fa-angle-right;
|
|
@extend .txt-color;
|
|
@extend .txt-color-tealLighter;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
// header --------------------------------------------------------------------
|
|
#pf-landing-top{
|
|
height: 450px;
|
|
border-bottom: 1px solid $gray-dark;
|
|
position: relative;
|
|
|
|
&:before{
|
|
content: '';
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
background: url("#{$base-url}/#{$body-background-image}") $body-background-color;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
@include filter(brightness(0.9))
|
|
}
|
|
|
|
// IGB fallback header
|
|
|
|
&.pf-logo-fallback{
|
|
height: 370px;
|
|
|
|
&:after{
|
|
content: '';
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
background: url("#{$base-url}/logo_alpha.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 0;
|
|
margin-top: 50px;
|
|
}
|
|
}
|
|
|
|
|
|
#pf-header-container{
|
|
position: absolute;
|
|
width: 100%;
|
|
background-position: center center;
|
|
|
|
#pf-header-canvas{
|
|
position: absolute;
|
|
visibility: hidden; // triggered by js
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#pf-logo-container{
|
|
z-index: 110;
|
|
}
|
|
|
|
#pf-header-preview-container{
|
|
position: absolute;
|
|
left: 400px;
|
|
width: 590px;
|
|
height: 350px;
|
|
top: 92px;
|
|
|
|
.pf-header-preview-element{
|
|
position: relative;
|
|
margin-left: 12px;
|
|
margin-top: 12px;
|
|
height: 155px;
|
|
width: 180px;
|
|
padding: 7px;
|
|
opacity: 0;
|
|
will-change: opacity, transform;
|
|
@include border-radius(5px);
|
|
background: {
|
|
color: rgba(43, 43, 43, 0.5);
|
|
}
|
|
|
|
&:nth-child(n+4){
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
&:after{
|
|
content: '';
|
|
position: absolute;
|
|
width: calc(100% - 14px);
|
|
height: calc(100% - 14px);
|
|
@include border-radius(3px);
|
|
background: {
|
|
repeat: no-repeat;
|
|
position: 50% 50%;
|
|
color: rgba(29, 29, 29, 0.75);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.container{
|
|
position: relative;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
// fallback logo (IGB)
|
|
/*
|
|
.pf-logo-fallback{
|
|
width: 300px;
|
|
height: 300px;
|
|
background: url("#{$base-url}/logo_alpha.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
}*/
|
|
|
|
}
|
|
|
|
#pf-header-preview-intel{
|
|
&:after{
|
|
background-image: url("#{$base-url}/landing/intel.png");
|
|
}
|
|
}
|
|
|
|
#pf-header-preview-map{
|
|
&:after{
|
|
background-image: url("#{$base-url}/landing/map.png");
|
|
}
|
|
}
|
|
|
|
#pf-header-preview-scope{
|
|
&:after{
|
|
background-image: url("#{$base-url}/landing/scope.png");
|
|
}
|
|
}
|
|
|
|
#pf-header-preview-signature{
|
|
&:after{
|
|
background-image: url("#{$base-url}/landing/signature.png");
|
|
}
|
|
}
|
|
|
|
#pf-header-preview-data{
|
|
&:after{
|
|
background-image: url("#{$base-url}/landing/data.png");
|
|
}
|
|
}
|
|
|
|
#pf-header-preview-gameplay{
|
|
&:after{
|
|
background-image: url("#{$base-url}/landing/gameplay.png");
|
|
}
|
|
}
|
|
|
|
// login ----------------------------------------------------------------------
|
|
#pf-landing-login{
|
|
padding-top: 40px;
|
|
padding-bottom: 30px;
|
|
|
|
.row{
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// character select panel animation (e.g. on delete)
|
|
.pf-character-selection > div:not(.pf-character-row-animate){
|
|
@include transition( width 0.2s ease, margin 0.2s ease);
|
|
}
|
|
|
|
.pf-dynamic-area{
|
|
display: inline-block;
|
|
margin: 10px 5px 20px 5px;
|
|
padding: 10px 10px 5px 10px;
|
|
min-width: 155px;
|
|
min-height: 184px;
|
|
@include border-radius(10px);
|
|
@include box-shadow(0 4px 10px rgba(0,0,0, 0.4));
|
|
|
|
// character images
|
|
.pf-character-image-wrapper{
|
|
opacity: 0;
|
|
width: 128px;
|
|
border: 2px solid $gray-light;
|
|
@include border-radius(8px);
|
|
@include transition( border-color 0.2s ease-out, box-shadow 0.2s ease-out);
|
|
@include transform( translate3d(0, 0, 0) );
|
|
will-change: border-color, transition;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
background-color: $gray-darker;
|
|
box-sizing: content-box; // because of the borders and the fix img with of 128
|
|
|
|
&:hover{
|
|
border-color: $green-dark;
|
|
|
|
.pf-character-name{
|
|
color: $green-dark;
|
|
}
|
|
|
|
.pf-character-image{
|
|
@include filter(grayscale(50%))
|
|
}
|
|
}
|
|
|
|
.pf-character-select-image{
|
|
overflow: hidden;
|
|
width: 128px;
|
|
height: 128px;
|
|
position: relative;
|
|
|
|
// info element visible on hover
|
|
.pf-character-info{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0; // trigger by js
|
|
height: 100%;
|
|
color: $gray-lighter;
|
|
background: rgba($gray, 0.80);
|
|
overflow: hidden;
|
|
will-change: width, transition;
|
|
padding: 10px 0;
|
|
|
|
.pf-character-info-text{
|
|
line-height: 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pf-character-name{
|
|
font-size: 13px;
|
|
line-height: 30px;
|
|
border-top: 1px solid $gray-dark;
|
|
color: $gray-lighter;
|
|
@include transition( color 0.2s ease-out );
|
|
}
|
|
|
|
.pf-character-image{
|
|
@include transition(all 0.3s ease-out);
|
|
@include filter(grayscale(0%));
|
|
}
|
|
}
|
|
}
|
|
|
|
.pf-sso-login-button{
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 270px;
|
|
height: 45px;
|
|
border: none;
|
|
margin-bottom: 10px;
|
|
background-color: transparent;
|
|
background-image: url("#{$base-url}/landing/eve_sso_login_buttons_large_black_hover.png");
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
|
@include transition(box-shadow 0.12s ease-out);
|
|
will-change: box-shadow;
|
|
|
|
&:after {
|
|
content: ' ';
|
|
position: absolute;
|
|
width: 270px;
|
|
height: 45px;
|
|
left: 0;
|
|
top: 0;
|
|
background-image: url("#{$base-url}/landing/eve_sso_login_buttons_large_black.png");
|
|
@include transition(opacity 0.12s ease-in-out);
|
|
will-change: opacity;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
|
|
|
|
&:after{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// demo map -------------------------------------------------------------------
|
|
#pf-header-map{
|
|
// the size matches the size of the svg-map
|
|
position: relative;
|
|
margin: 0 auto;
|
|
height: 380px;
|
|
width: 600px;
|
|
pointer-events: none;
|
|
|
|
.pf-header-svg-layer{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
// system layer
|
|
#pf-header-systems{
|
|
z-index: 100;
|
|
}
|
|
|
|
// connector layer
|
|
#pf-header-connectors{
|
|
z-index: 90;
|
|
}
|
|
|
|
// connector layer
|
|
#pf-header-connections{
|
|
z-index: 80;
|
|
}
|
|
|
|
// background layer
|
|
#pf-header-background{
|
|
z-index: 70;
|
|
|
|
.pf-header-system{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// map bg
|
|
#pf-header-map-bg{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
|
|
img{
|
|
pointer-events: none;
|
|
}
|
|
|
|
#pf-map-bg-image{
|
|
opacity: 0; // triggered by js
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#pf-map-neocom{
|
|
opacity: 0; // triggered by js
|
|
height: 665px;
|
|
width: 21px;
|
|
}
|
|
|
|
#pf-map-browser{
|
|
opacity: 0; // triggered by js
|
|
position: absolute;
|
|
top: 110px;
|
|
left: 21px;
|
|
height: 560px;
|
|
width: 515px;
|
|
}
|
|
}
|
|
|
|
// carousel -------------------------------------------------------------------
|
|
#pf-landing-gallery-carousel{
|
|
background-image: url("#{$base-url}/pf-header-bg.jpg");
|
|
|
|
.slide-content{
|
|
border-radius: 5px;
|
|
}
|
|
|
|
// title style
|
|
h3{
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
// gallery --------------------------------------------------------------------
|
|
#pf-landing-gallery{
|
|
|
|
}
|
|
|
|
// pricing --------------------------------------------------------------------
|
|
.pf-landing-pricing-panel{
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.pricing-big{
|
|
@include box-shadow(0 4px 10px rgba(0,0,0, 0.4));
|
|
|
|
.panel-heading{
|
|
border-color: $gray;
|
|
}
|
|
.the-price {
|
|
padding: 1px 0;
|
|
background: darken($modal-content-bg, 6%);
|
|
text-align: center;
|
|
|
|
.subscript{
|
|
font-size: 12px;
|
|
color: $gray-light;
|
|
}
|
|
}
|
|
|
|
.price-features {
|
|
background: $gray;
|
|
color: $gray-lighter;
|
|
padding: 20px 15px;
|
|
min-height: 205px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
// table
|
|
table tr td {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
// about ----------------------------------------------------------------------
|
|
#pf-landing-about{
|
|
|
|
.pf-landing-about-me{
|
|
width: 256px;
|
|
height: 256px;
|
|
border: none;
|
|
@include box-shadow(0 4px 10px rgba(0,0,0, 0.4));
|
|
}
|
|
}
|
|
|
|
// footer ---------------------------------------------------------------------
|
|
.pf-landing-footer{
|
|
padding: 30px 0;
|
|
font-family: $font-family-bold;
|
|
background-color: darken($gray-darker, 8%);
|
|
|
|
.pf-social-networks > li{
|
|
display: inline-block;
|
|
line-height: 1;
|
|
|
|
a {
|
|
display: inline-block;
|
|
background: rgba(red($gray-light), green($gray-light), blue($gray-light), 0.5);
|
|
line-height: 24px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
margin-right: 5px;
|
|
width: 28px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// TEST ---
|
|
/*
|
|
.form-control {
|
|
border: 0;
|
|
background-image: linear-gradient(#568A89,#568A89),linear-gradient(#63676A,#63676A);
|
|
background-size: 0 2px,100% 1px;
|
|
background-repeat: no-repeat;
|
|
background-position: center bottom,center calc(100% - 1px);
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.form-control:focus, .form-control.focus {
|
|
outline: none;
|
|
background-image: linear-gradient(#568A89,#568A89),linear-gradient(#63676A,#63676A);
|
|
-webkit-animation: input-highlight .5s forwards;
|
|
animation: input-highlight .5s forwards;
|
|
box-shadow: none;
|
|
background-size: 0 2px,100% 1px;
|
|
}
|
|
|
|
@keyframes input-highlight {
|
|
0% {
|
|
background-size: 0 2px, 100% 1px;
|
|
}
|
|
100% {
|
|
background-size: 100% 2px, 100% 1px;
|
|
}
|
|
}
|
|
*/ |