556 lines
9.4 KiB
SCSS
556 lines
9.4 KiB
SCSS
body{
|
|
// prevent marking text
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
|
|
a{
|
|
color: $teal-dark;
|
|
|
|
&:hover{
|
|
color: $teal-light;
|
|
}
|
|
}
|
|
|
|
// emphasized text
|
|
em{
|
|
|
|
font-style: italic;
|
|
|
|
&.pf-brand{
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
// full screen view of an element
|
|
/*
|
|
.pf-fullscreen{
|
|
|
|
&:fullscreen, &:-webkit-full-screen, {
|
|
background-color: red;
|
|
}
|
|
|
|
&:-webkit-full-screen{
|
|
background:url("#{$base-url}/#{$body-background-image}") $body-background-color;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
&:-moz-full-screen{
|
|
background-color: green;
|
|
}
|
|
}
|
|
*/
|
|
|
|
// laoding indicator overlay
|
|
.pf-loading-overlay{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
background: $gray-darker;
|
|
@include border-radius(5px);
|
|
|
|
.pf-loading-overlay-wrapper{
|
|
width: 25px;
|
|
height: 25px;
|
|
margin: auto;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
|
|
i{
|
|
padding: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// page menu =====================================================
|
|
.sb-left{
|
|
.list-group-item{
|
|
@include box-shadow(inset -10px 0px 5px -5px rgba(0,0,0,0.4));
|
|
}
|
|
}
|
|
|
|
.sb-right{
|
|
.list-group-item{
|
|
@include box-shadow(inset 10px 0px 5px -5px rgba(0,0,0,0.4));
|
|
}
|
|
}
|
|
|
|
// log types =====================================================
|
|
.pf-log-info{
|
|
@extend .txt-color-green;
|
|
}
|
|
|
|
.pf-log-warning{
|
|
@extend .txt-color-warning;
|
|
}
|
|
|
|
.pf-log-error{
|
|
@extend .txt-color-red;
|
|
}
|
|
|
|
// map types =====================================================
|
|
.pf-map-type-global{
|
|
color: $teal;
|
|
}
|
|
|
|
.pf-map-type-alliance{
|
|
color: $blue;
|
|
}
|
|
|
|
.pf-map-type-private{
|
|
color: $green;
|
|
}
|
|
|
|
// maps module ===================================================
|
|
#pf-map-module{
|
|
margin: 0 10px;
|
|
|
|
// Tabs (colored)
|
|
#pf-map-tabs {
|
|
|
|
.pf-map-type-tab-default{
|
|
border-top: 2px solid transparent;
|
|
}
|
|
|
|
.pf-map-type-tab-global{
|
|
border-top: 2px solid $green;
|
|
}
|
|
|
|
.pf-map-type-tab-alliance{
|
|
border-top: 2px solid $blue;
|
|
}
|
|
|
|
.pf-map-type-tab-private{
|
|
border-top: 2px solid $teal;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// Tab Content Body Grid ========================================
|
|
.pf-map-content-row{
|
|
margin: 10px 0 0 0;
|
|
padding-bottom: 40px; // space for footer
|
|
|
|
// all modules within a row
|
|
.pf-module{
|
|
font-family: $font-family-bold;
|
|
background: rgba($gray, 0.3);
|
|
padding: 10px;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
@include border-radius(5px);
|
|
}
|
|
|
|
}
|
|
|
|
// WH effects ==================================================
|
|
|
|
.pf-system-effect{
|
|
display: none; // if effect is active it will be overwritten
|
|
cursor: default;
|
|
color: $gray-lighter;
|
|
}
|
|
|
|
.pf-system-effect-magnetar{
|
|
color: $wh-color-magnetar;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pf-system-effect-redgiant{
|
|
color: $wh-color-redgiant;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pf-system-effect-pulsar{
|
|
color: $wh-color-pulsar;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pf-system-effect-wolfryet{
|
|
color: $wh-color-wolfryet;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pf-system-effect-cataclysmic{
|
|
color: $wh-color-cataclysmic;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pf-system-effect-blackhole{
|
|
color: $wh-color-blackhole;
|
|
display: inline-block;
|
|
}
|
|
|
|
// system info status ================================================
|
|
.pf-system-info-rally{
|
|
.pf-system-head{
|
|
background-color: $pink-darker;
|
|
|
|
@include background-image(linear-gradient(-45deg,
|
|
$purple-dark 25%,
|
|
transparent 25%,
|
|
transparent 50%,
|
|
$purple-dark 50%,
|
|
$purple-dark 75%,
|
|
transparent 75%,
|
|
transparent));
|
|
background-size:25px 25px;
|
|
-webkit-animation:move 3s linear infinite;
|
|
-moz-animation:move 3s linear infinite;
|
|
-ms-animation:move 3s linear infinite;
|
|
animation:move 3s linear infinite;
|
|
}
|
|
}
|
|
|
|
|
|
// system security status ============================================
|
|
|
|
.pf-system-security-0-0{
|
|
color: $system-color-sec-0-0;
|
|
}
|
|
|
|
.pf-system-security-0-1{
|
|
color: $system-color-sec-0-1;
|
|
}
|
|
|
|
.pf-system-security-0-2{
|
|
color: $system-color-sec-0-2;
|
|
}
|
|
|
|
.pf-system-security-0-3{
|
|
color: $system-color-sec-0-3;
|
|
}
|
|
|
|
.pf-system-security-0-4{
|
|
color: $system-color-sec-0-4;
|
|
}
|
|
|
|
.pf-system-security-0-5{
|
|
color: $system-color-sec-0-5;
|
|
}
|
|
|
|
.pf-system-security-0-6{
|
|
color: $system-color-sec-0-6;
|
|
}
|
|
|
|
.pf-system-security-0-7{
|
|
color: $system-color-sec-0-7;
|
|
}
|
|
|
|
.pf-system-security-0-8{
|
|
color: $system-color-sec-0-8;
|
|
}
|
|
|
|
.pf-system-security-0-9{
|
|
color: $system-color-sec-0-9;
|
|
}
|
|
|
|
.pf-system-security-1-0{
|
|
color: $system-color-sec-1-0;
|
|
}
|
|
|
|
// system security level =============================================
|
|
|
|
.pf-system-sec{
|
|
margin-right: 5px;
|
|
cursor: -moz-grab;
|
|
cursor: -webkit-grab;
|
|
}
|
|
|
|
.pf-system-sec-highSec{
|
|
color: $green;
|
|
}
|
|
|
|
.pf-system-sec-lowSec{
|
|
color: $orange;
|
|
}
|
|
|
|
.pf-system-sec-nullSec{
|
|
color: $red;
|
|
}
|
|
|
|
.pf-system-sec-high{
|
|
color: $red;
|
|
}
|
|
|
|
.pf-system-sec-mid{
|
|
color: $orange;
|
|
}
|
|
|
|
.pf-system-sec-low{
|
|
color: $blue;
|
|
}
|
|
|
|
// system status ======================================================
|
|
|
|
.pf-system-status-friendly{
|
|
border-color: $blue !important;
|
|
color: $blue;
|
|
}
|
|
|
|
.pf-system-status-occupied{
|
|
border-color: $orange !important;
|
|
color: $orange;
|
|
}
|
|
|
|
.pf-system-status-hostile{
|
|
border-color: $red !important;
|
|
color: $red;
|
|
}
|
|
|
|
.pf-system-status-empty{
|
|
border-color: $green !important;
|
|
color: $green;
|
|
}
|
|
|
|
.pf-system-status-unscanned{
|
|
border-color: $teal !important;
|
|
color: $teal;
|
|
}
|
|
|
|
// system effect info dialog
|
|
.pf-system-effect-dialog-wrapper, .pf-jump-info-dialog{
|
|
.table{
|
|
margin: 15px 0;
|
|
|
|
td{
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
}
|
|
|
|
// "fake connection" classes for the map manual
|
|
.pf-fake-connection{
|
|
box-sizing: content-box;
|
|
display: inline-block;
|
|
width: 70px;
|
|
height: 4px;
|
|
margin-right: 5px;
|
|
border-top: 2px solid $gray-light;
|
|
border-bottom: 2px solid $gray-light;
|
|
background-color: #3c3f41;
|
|
position: relative;
|
|
font-family: $font-family-sans-serif;
|
|
|
|
&.pf-map-connection-stargate{
|
|
background-color: $gray-light;
|
|
border-color: $gray-light;
|
|
}
|
|
|
|
&.pf-map-connection-jumpbridge{
|
|
background-color: $teal-light;
|
|
border-color: $gray;
|
|
background: repeating-linear-gradient(
|
|
to right,
|
|
$teal-light,
|
|
$teal-light 10px,
|
|
$gray 10px,
|
|
$gray 20px
|
|
);
|
|
}
|
|
|
|
&.pf-map-connection-wh-eol{
|
|
border-color: $pink-dark;
|
|
}
|
|
|
|
&.pf-map-connection-wh-reduced{
|
|
background-color: $orange;
|
|
}
|
|
|
|
&.pf-map-connection-wh-critical{
|
|
background-color: $red-darker;
|
|
}
|
|
|
|
&.pf-map-connection-frig{
|
|
border-style: dashed;
|
|
border-left: none;
|
|
border-right: none;
|
|
|
|
&:after{
|
|
content: 'frig';
|
|
background-color: $orange;
|
|
color: $gray-darkest;
|
|
padding: 0px 3px;
|
|
position: absolute;
|
|
left: 25px;
|
|
top: -6px;
|
|
font-family: $font-family-bold;
|
|
@include border-radius(3px);
|
|
}
|
|
}
|
|
|
|
&.pf-map-connection-preserve-mass{
|
|
&:after{
|
|
content: 'save mass';
|
|
background-color: $red-darker;
|
|
color: $gray-lightest;
|
|
padding: 0px 3px;
|
|
position: absolute;
|
|
left: 9px;
|
|
top: -6px;
|
|
font-family: $font-family-bold;
|
|
@include border-radius(3px);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// global tooltip settings ======================================
|
|
.tooltip-inner{
|
|
color: $green;
|
|
background-color: $gray;
|
|
font-family: $font-family-bold;
|
|
padding: 5px 5px;
|
|
@include border-radius(3px);
|
|
@include box-shadow(0 6px 12px rgba(0,0,0,.4));
|
|
}
|
|
|
|
.tooltip.top .tooltip-arrow,{
|
|
border-top-color: $gray-light;
|
|
}
|
|
|
|
.tooltip.right .tooltip-arrow,{
|
|
border-right-color: $gray-light;
|
|
}
|
|
|
|
.tooltip.bottom .tooltip-arrow{
|
|
border-bottom-color: $gray-light;
|
|
}
|
|
|
|
.tooltip.left .tooltip-arrow{
|
|
border-left-color: $gray-light;
|
|
}
|
|
|
|
// header =======================================================
|
|
#pf-head{
|
|
|
|
a{
|
|
|
|
&:focus{
|
|
color: $teal-dark;
|
|
}
|
|
|
|
&:hover{
|
|
text-decoration: none;
|
|
|
|
.badge{
|
|
color: $teal-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
i{
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.pf-head-menu{
|
|
.pf-head-menu-logo{
|
|
width: 18px;
|
|
height: 18px;
|
|
display: inline-block;
|
|
float: left;
|
|
background: inline-image("#{$base-url}/icons/logo-18x18-gray.png");
|
|
}
|
|
|
|
&:hover .pf-head-menu-logo{
|
|
background: inline-image("#{$base-url}/icons/logo-18x18-teal.png");
|
|
}
|
|
|
|
&:focus .pf-head-menu-logo{
|
|
background: inline-image("#{$base-url}/icons/logo-18x18-teal.png");
|
|
}
|
|
|
|
}
|
|
|
|
.badge{
|
|
background-color: $gray;
|
|
color: $gray-lighter;
|
|
}
|
|
|
|
.pf-head-active-user, .pf-head-current-location{
|
|
display: none; // triggered by js
|
|
|
|
.badge{
|
|
@include transition( color 0.3s ease-out );
|
|
}
|
|
}
|
|
|
|
.pf-head-program-status{
|
|
cursor: pointer;
|
|
}
|
|
|
|
}
|
|
|
|
// footer =======================================================
|
|
#pf-footer{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
margin: 0;
|
|
background: rgba($gray, 0.3);
|
|
|
|
a{
|
|
font-family: $font-family-serif;
|
|
color: $teal-darker;
|
|
|
|
&:hover{
|
|
color: $teal-dark;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
Animate the stripes
|
|
*/
|
|
@-webkit-keyframes move{
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
@-moz-keyframes move{
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
@-ms-keyframes move{
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
@keyframes move{
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
|
|
|
|
|