705 lines
14 KiB
SCSS
705 lines
14 KiB
SCSS
$characterSlideDuration: 500ms;
|
|
|
|
.pf-animate{
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
// splash loading animation ============================================================================
|
|
|
|
.pf-color-line{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
|
|
@include rainbow;
|
|
|
|
&.warning{
|
|
background-image: linear-gradient(to right, $brand-warning, $brand-warning 100%);
|
|
}
|
|
|
|
&.danger{
|
|
background-image: linear-gradient(to right, $brand-danger, $brand-danger 100%);
|
|
}
|
|
}
|
|
|
|
.pf-splash{
|
|
position: fixed;
|
|
z-index: 2000;
|
|
background-color: $gray-darkest;
|
|
color: $gray-light;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
will-change: opacity;
|
|
|
|
&:not(.pf-splash-warning):not(.pf-splash-error){
|
|
cursor: wait;
|
|
}
|
|
|
|
.pf-splash-title{
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 30%;
|
|
text-align: center;
|
|
max-width: 500px;
|
|
padding: 20px;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.pf-splash-debug{
|
|
position: absolute;
|
|
bottom: 0;
|
|
width:100%;
|
|
|
|
.pf-splash-debug-headline{
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.pf-splash-pre{
|
|
margin-bottom: 0; // overwrite default
|
|
}
|
|
}
|
|
}
|
|
|
|
// landing page ========================================================================================
|
|
@media (max-width: $screen-md) {
|
|
.pf-landing{
|
|
|
|
#pf-logo-container{
|
|
// width: 250px;
|
|
//margin: 5px auto;
|
|
}
|
|
|
|
.pf-brand-desc {
|
|
display: none
|
|
}
|
|
|
|
.navbar .navbar-brand {
|
|
margin-left: 10px
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// content
|
|
.pf-landing{
|
|
|
|
section:not(:last-of-type){
|
|
border-bottom: 1px solid $gray-darker;
|
|
}
|
|
|
|
section{
|
|
min-height: 150px;
|
|
padding: 20px 0 40px 0;
|
|
|
|
h4:not(.pf-dynamic-area){
|
|
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;
|
|
display: inline-block;
|
|
overflow: hidden; // hide initial overlapping "before" element"
|
|
margin: 5px 0 15px 0;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
|
|
|
|
&:before{
|
|
content: '\f06e';
|
|
font-family: 'Font Awesome 5 Free';
|
|
font-size: 20px;
|
|
color: $orange;
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 10;
|
|
@include transition(transform 0.1s ease-out, opacity 0.1s ease-out);
|
|
will-change: transform, opacity;
|
|
transform: scale(1.3,1.3);
|
|
opacity: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
&:hover{
|
|
img{
|
|
border-color: $teal-lightest;
|
|
filter: brightness( 50% );
|
|
}
|
|
|
|
&:before{
|
|
@include transition-delay( 0.05s );
|
|
transform: scale(1,1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.pf-landing-image-preview{
|
|
border: {
|
|
width: 1px;
|
|
style: solid;
|
|
color: $gray-darkest
|
|
}
|
|
display: inline-block;
|
|
will-change: all;
|
|
filter: brightness( 100% );
|
|
@include transition(all 0.2s ease-out);
|
|
|
|
|
|
&.pf-landing-image-preview-small{
|
|
height: 160px;
|
|
}
|
|
|
|
&.pf-landing-image-preview-medium{
|
|
height: 256px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// lists
|
|
.pf-landing-list{
|
|
li > i{
|
|
@extend .fa-li;
|
|
@extend .fas;
|
|
@extend .fa-fw;
|
|
@extend .fa-angle-right;
|
|
@extend .txt-color;
|
|
@extend .txt-color-tealLighter;
|
|
}
|
|
}
|
|
}
|
|
// header --------------------------------------------------------------------
|
|
$headerHeight: 355px;
|
|
|
|
#pf-landing-top{
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: $headerHeight - 100px;
|
|
border-bottom: 1px solid $gray-dark;
|
|
transition: height 0.25s ease-out;
|
|
will-change: height;
|
|
background-color: #050a11; // ~img background color...
|
|
|
|
@media (max-width: $screen-xs-max) {
|
|
height: $headerHeight - 170px;
|
|
|
|
}
|
|
|
|
&.pointer-locked{
|
|
height: $headerHeight;
|
|
}
|
|
|
|
// darker bg for logo on light background image
|
|
&:after{
|
|
content: ' ';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: inherit;
|
|
width: 400px;
|
|
pointer-events: none;
|
|
background-image: linear-gradient(to right, transparent, rgba($black, 0.75));
|
|
}
|
|
|
|
.pf-header-bg{
|
|
height: inherit;
|
|
}
|
|
|
|
#pf-logo-container{
|
|
position: absolute;
|
|
height: inherit;
|
|
left: 10px;
|
|
pointer-events: none;
|
|
z-index: 20; // less than character images
|
|
|
|
@media (max-width: $screen-xs-max) {
|
|
left: initial;
|
|
}
|
|
|
|
> svg {
|
|
width: 250px; // for logo resize (if needed)
|
|
padding-top: 60px; // for top-navigation 30px + 30px padding
|
|
padding-bottom: 50px; // 50px padding
|
|
height: 100%;
|
|
opacity: .8;
|
|
will-change: height;
|
|
}
|
|
}
|
|
|
|
#pf-header-canvas{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
&.fade.in{
|
|
cursor: none;
|
|
}
|
|
}
|
|
|
|
.pf-character-selection {
|
|
position: absolute;
|
|
bottom: -70px;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
cursor: none;
|
|
z-index: 30; // character images overlap next section
|
|
pointer-events: none;
|
|
margin-bottom: 20px;
|
|
|
|
@media (max-width: $screen-xs-max) {
|
|
width: 100%;
|
|
}
|
|
|
|
.pf-character-box {
|
|
flex: 1;
|
|
transition: flex $characterSlideDuration linear;
|
|
text-align: center;
|
|
will-change: flex, opacity;
|
|
overflow: hidden; // "slide" animation
|
|
opacity: 0;
|
|
padding-top: 3px; //space for ribbon
|
|
|
|
&.new {
|
|
flex: .00001; //0 does not work so we have to use a small number
|
|
animation: flexGrow $characterSlideDuration ease forwards;
|
|
}
|
|
|
|
&.remove {
|
|
flex: 1;
|
|
opacity: 1;
|
|
animation: flexShrink $characterSlideDuration ease forwards;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pf-dynamic-area{
|
|
display: inline-block;
|
|
margin: 0 10px 10px 10px; // because of drop shadow
|
|
padding: 0; // overwrite default
|
|
overflow: visible;
|
|
min-width: 132px;
|
|
min-height: 164px;
|
|
border-radius: 0; // overwrite default
|
|
pointer-events: all;
|
|
background-color: transparent;
|
|
|
|
> a {
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8px 8px 0 0;
|
|
@include box-shadow(0 4px 10px rgba(0,0,0, 0.4));
|
|
}
|
|
|
|
.ribbon-wrapper{
|
|
z-index: 5 ;
|
|
}
|
|
|
|
// character images
|
|
.pf-character-image-wrapper{
|
|
opacity: 0;
|
|
width: 128px;
|
|
border: 2px solid $gray;
|
|
border-radius: inherit;
|
|
@include transition( border-color 0.2s ease-out, box-shadow 0.2s ease-out);
|
|
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{
|
|
filter: grayscale(50%);
|
|
}
|
|
}
|
|
|
|
// character is "online"
|
|
&.pf-character-active:after{
|
|
font-family: "Font Awesome 5 Free";
|
|
content: "\f111";
|
|
font-weight: bold;
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
height: 14px;
|
|
width: 14px;
|
|
color: $green;
|
|
font-size: 10px;
|
|
@extend .fa-rotate-180;
|
|
}
|
|
|
|
.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: 5px 0;
|
|
|
|
.pf-character-info-img{
|
|
width: 36px;
|
|
}
|
|
|
|
.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;
|
|
font-family: "Oxygen Bold", Arial, sans-serif;
|
|
letter-spacing: 0.3px;
|
|
padding: 0 5px;
|
|
text-rendering: geometricPrecision;
|
|
@include transition( color 0.2s ease-out );
|
|
}
|
|
|
|
.pf-character-image{
|
|
border-top-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
@include transition(all 0.3s ease-out);
|
|
filter: grayscale(0%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// login ----------------------------------------------------------------------
|
|
#pf-landing-login{
|
|
position: relative; // required because <canvas> gets overlapped by this element
|
|
background-color: inherit; // ^^
|
|
z-index: 20; // ^^
|
|
padding-top: 60px;
|
|
padding-bottom: 30px;
|
|
border-top: 1px solid $gray-dark;
|
|
|
|
.row{
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.pf-sso-login-button{
|
|
width: 270px;
|
|
height: 45px;
|
|
margin-top: 10px;
|
|
margin-bottom: 15px;
|
|
color: $gray-lighter;
|
|
filter: drop-shadow(0 4px 5px rgba(0,0,0, 0.4));
|
|
transition: color 0.18s ease-out, filter 0.06s ease-out;
|
|
will-change: color, fill;
|
|
|
|
&:hover {
|
|
color: $orange;
|
|
filter: drop-shadow(0 1px 3px rgba(0,0,0, 0.4));
|
|
}
|
|
|
|
> svg {
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
}
|
|
|
|
#pf-notification-panel{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// carousel -------------------------------------------------------------------
|
|
#pf-landing-gallery-carousel{
|
|
background-image: url("#{$base-url}/pf-header-bg.jpg");
|
|
|
|
.slide-content{
|
|
border-radius: 5px;
|
|
pointer-events: none; // hide show "title" attr on hover
|
|
}
|
|
|
|
// title style
|
|
h3{
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
// pricing --------------------------------------------------------------------
|
|
.pf-landing-pricing-panel{
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.pricing-big{
|
|
position: relative;
|
|
@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;
|
|
line-height: 22px;
|
|
|
|
&:not(.price-features-fluid){
|
|
min-height: 205px;
|
|
}
|
|
|
|
.list-unstyled.text-left li{
|
|
text-indent: -1em;
|
|
padding-left: 1.5em;
|
|
|
|
.fa{
|
|
text-indent: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.badge{
|
|
color: $gray-lighter;
|
|
background-color: $gray-darker;
|
|
}
|
|
|
|
// table
|
|
table tr td {
|
|
line-height: 1;
|
|
|
|
.btn-group {
|
|
.btn { // smaller buttons on /setup page in tables
|
|
border-radius: 0;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// admin ----------------------------------------------------------------------
|
|
#pf-landing-admin{
|
|
.pf-landing-admin-login{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// 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%) ;
|
|
|
|
.row{
|
|
margin-bottom: 0 !important; // overwrite default
|
|
}
|
|
|
|
.pf-social-networks{
|
|
margin-bottom: 0; // overwrite default
|
|
|
|
> 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: 14px;
|
|
margin-right: 3px;
|
|
padding: 6px 6px 2px 6px;
|
|
width: 36px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// admin page -----------------------------------------------------------------
|
|
.pf-body[data-script='admin']{
|
|
.navbar-brand:hover{
|
|
color: #777; // overwrite default
|
|
}
|
|
|
|
.panel{
|
|
text-align: initial;
|
|
|
|
h3 img{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
margin: 5px 14px 0 0;
|
|
border-radius: 5px;
|
|
width: 28px;
|
|
}
|
|
|
|
}
|
|
.form-horizontal .panel{
|
|
color: $gray-lighter;
|
|
}
|
|
}
|
|
|
|
// setup page -----------------------------------------------------------------
|
|
.pf-body[data-script='setup']{
|
|
user-select: text;
|
|
|
|
.navbar-brand:hover{
|
|
color: #777; // overwrite default
|
|
}
|
|
|
|
section {
|
|
min-height: auto; // overwrite default
|
|
padding-top: 10px; // overwrite default
|
|
padding-bottom: 0; // overwrite default
|
|
border-bottom: 0; // overwrite default
|
|
|
|
&:first-of-type{
|
|
padding-top: 60px;
|
|
}
|
|
|
|
&:last-of-type{
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
.container{
|
|
// increase container width (display more data)
|
|
@media (min-width: $screen-sm-min) {
|
|
width: $container-sm + 20px;
|
|
}
|
|
@media (min-width: $screen-md-min) {
|
|
width: $container-md + 80px;
|
|
}
|
|
@media (min-width: $screen-lg-min) {
|
|
width: $container-lg + 100px;
|
|
}
|
|
|
|
& > .row{
|
|
margin-bottom: 0; // overwrite default
|
|
}
|
|
}
|
|
}
|
|
|
|
.pf-landing-pricing-panel{
|
|
margin-top: 10px; // overwrite default
|
|
}
|
|
|
|
.panel-heading{
|
|
padding-right: 8px; // overwrite default
|
|
}
|
|
|
|
.table{
|
|
text-align: left;
|
|
}
|
|
|
|
.pf-setup-body-cronjob{
|
|
.panel-footer{
|
|
display: flex; // align multiple error/warning/.. elements
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
|
|
.pf-cron-row-active{
|
|
td:not(:last-child){
|
|
background-color: $teal-darker;
|
|
}
|
|
|
|
td:first-child{
|
|
background-color: $teal-darkest;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
*/ |