1395 lines
26 KiB
SCSS
1395 lines
26 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;
|
|
cursor: default;
|
|
}
|
|
|
|
.pf-body{
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
a, .pf-link{
|
|
color: $teal;
|
|
will-change: color;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
@include transition( color 0.08s ease-out, background-color 0.08s ease-out );
|
|
|
|
&:hover{
|
|
color: $teal-lightest;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:focus{
|
|
color: $teal;
|
|
}
|
|
}
|
|
|
|
// emphasized text
|
|
em{
|
|
|
|
font-style: italic;
|
|
|
|
&.pf-brand{
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
.pf-font-capitalize{
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.pf-font-line-through{
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.no-padding{
|
|
padding: 0 !important;
|
|
}
|
|
|
|
// scroll bar (webkit only) =======================================================================
|
|
::-webkit-scrollbar {
|
|
display: none; // hides the scrollbar but is still scrollable
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: $gray-darker;
|
|
border-left: 1px solid $gray-dark;
|
|
border-radius: 2px;
|
|
@include transition( background-color .5s );
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
height: 6px;
|
|
border: 5px solid transparent;
|
|
background-clip: padding-box;
|
|
-webkit-border-radius: 8px;
|
|
background-color: lighten($gray, 30%);
|
|
|
|
&:hover{
|
|
background-color: lighten($gray, 40%);
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar-button {
|
|
width: 0;
|
|
height: 0;
|
|
display: none;
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background-color: transparent;
|
|
}
|
|
|
|
// text selection =================================================================================
|
|
::selection{
|
|
background: $gray-lighter; /* WebKit/Blink Browsers */
|
|
color: $gray-darkest;
|
|
}
|
|
::-moz-selection{
|
|
background: $gray-lighter; /* Gecko Browsers */
|
|
color: $gray-darkest;
|
|
}
|
|
// help elements ==================================================================================
|
|
.pf-help-light{
|
|
@extend .txt-color;
|
|
@extend .txt-color-grayLight;
|
|
@extend .pf-help-default;
|
|
}
|
|
|
|
.pf-help{
|
|
@extend .txt-color;
|
|
@extend .txt-color-gray;
|
|
@extend .pf-help-default;
|
|
}
|
|
|
|
.pf-help-default{
|
|
cursor: help;
|
|
@include transition( color 0.08s ease-out );
|
|
|
|
&:hover{
|
|
@extend .txt-color-blue;
|
|
}
|
|
}
|
|
|
|
// icon buttons ===================================================================================
|
|
.pf-dialog-icon-button{
|
|
cursor: pointer;
|
|
margin-top: 2px;
|
|
@include transition(color 0.15s ease-out);
|
|
|
|
&:not(.collapsed), &:hover{
|
|
color: $orange;
|
|
}
|
|
}
|
|
|
|
.pf-module-icon-button{
|
|
cursor: pointer;
|
|
@include transition(color 0.15s ease-out);
|
|
|
|
&:hover, &.active{
|
|
color: $orange !important;
|
|
}
|
|
}
|
|
|
|
.pf-module-icon-button-copy{
|
|
cursor: copy;
|
|
-moz-user-select: text;
|
|
user-select: text;
|
|
}
|
|
|
|
// links ==========================================================================================
|
|
a{
|
|
&.disabled{
|
|
color: $navbar-default-link-color;
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
// alert messages =================================================================================
|
|
.alert{
|
|
will-change: opacity, transform;
|
|
}
|
|
|
|
// form fields custom styles ======================================================================
|
|
.editable-input{
|
|
optgroup[label]{
|
|
background-color: $gray;
|
|
color: $gray-light;
|
|
|
|
option{
|
|
background-color: $gray-dark;
|
|
color: $gray-lighter;
|
|
font-family: $font-family-monospace;
|
|
}
|
|
}
|
|
}
|
|
select:active, select:hover {
|
|
outline: none
|
|
}
|
|
|
|
/* make it red instead (with with same width and style) */
|
|
select:active, select:hover {
|
|
outline-color: red
|
|
}
|
|
|
|
// select2 custom template ========================================================================
|
|
.select2-results{
|
|
[class*="col-"]{
|
|
// smaller and less padding
|
|
line-height: 22px;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
}
|
|
}
|
|
|
|
.select2{
|
|
::-webkit-search-cancel-button{
|
|
-webkit-appearance: none !important;
|
|
}
|
|
|
|
.select2-selection__choice__remove{
|
|
float: left;
|
|
}
|
|
|
|
.select2-selection--multiple{
|
|
input{
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// global dataTable styles ========================================================================
|
|
.dataTable{
|
|
th{
|
|
&.pf-table-image-cell,
|
|
&.pf-table-image-small-cell,
|
|
&.pf-table-image-smaller-cell{
|
|
// no padding for image content
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
}
|
|
&.sorting,
|
|
&.sorting_asc,
|
|
&.sorting_desc{
|
|
// prevent overlapping of text and sort icon (if text-right align)
|
|
padding-right: 18px !important;
|
|
}
|
|
}
|
|
|
|
tr.group{
|
|
background-color: rgba($gray-darker, 0.4);
|
|
}
|
|
|
|
// "special" column styles
|
|
td{
|
|
|
|
> .fa-circle{
|
|
font-size: 9px !important; // should not be "so big" (10px default)
|
|
}
|
|
|
|
&.pf-table-link-cell{
|
|
cursor: pointer;
|
|
@extend .txt-color;
|
|
@extend .txt-color-teal;
|
|
@include transition( color 0.08s ease-out );
|
|
|
|
&:hover{
|
|
@extend .txt-color-tealLightest;
|
|
}
|
|
}
|
|
|
|
&.pf-table-action-cell{
|
|
cursor: pointer;
|
|
|
|
// icon within <td> cell content that should be highlighted on hover
|
|
> .pf-table-action-icon-cell{
|
|
@extend .txt-color;
|
|
@extend .txt-color-gray;
|
|
@include transition( color 0.08s ease-out );
|
|
}
|
|
|
|
&:hover{
|
|
> .pf-table-action-icon-cell{
|
|
@extend .txt-color-orange;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.pf-table-image-cell{
|
|
padding: 0 !important;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
|
|
img{
|
|
width: 26px; // smaller image (default 32)
|
|
box-sizing: content-box;
|
|
border-left: 1px solid $gray;
|
|
border-right: 1px solid $gray;
|
|
}
|
|
}
|
|
|
|
&.pf-table-image-small-cell{
|
|
img{
|
|
width: 24px; // smaller image (default 32)
|
|
// overwrite "default" border for image cells
|
|
border-left: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
}
|
|
}
|
|
|
|
&.pf-table-image-smaller-cell{
|
|
padding: 0 !important;
|
|
img{
|
|
width: 25px; // smaller image (default 32)
|
|
// overwrite "default" border for image cells
|
|
border-left: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
}
|
|
}
|
|
|
|
&.pf-table-button-sm-cell{
|
|
padding: 0 5px;
|
|
}
|
|
|
|
&.pf-table-counter-cell{
|
|
color: $gray-light;
|
|
|
|
.pf-digit-counter-small{
|
|
width: 20px;
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.pf-digit-counter-large{
|
|
width: 26px;
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
.pf-table-unknown-cell{
|
|
color: $red;
|
|
font-style: italic;
|
|
}
|
|
|
|
.pf-table-cell-ellipsis{
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pf-table-cell-80{
|
|
width: 90px;
|
|
}
|
|
|
|
.pf-table-cell-90{
|
|
width: 100px;
|
|
}
|
|
|
|
.pf-table-cell-100{
|
|
width: 110px;
|
|
}
|
|
}
|
|
|
|
// column separator
|
|
td, th{
|
|
&.separator-right{
|
|
border-right: 1px solid $gray;
|
|
}
|
|
|
|
svg.peity{
|
|
// center vertical in column
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// table styles ===================================================================================
|
|
table{
|
|
// required for native .ellipses to work in some columns
|
|
&.pf-table-fixed{
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
tr{
|
|
&.collapsing{
|
|
@include transition( height .01s ease );
|
|
}
|
|
|
|
&.collapse{
|
|
&.in{
|
|
display: table-row !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
td, th{
|
|
&.pf-table-cell-10{
|
|
width: 10px;
|
|
}
|
|
|
|
&.pf-table-cell-20{
|
|
width: 20px;
|
|
}
|
|
|
|
&.pf-table-cell-ellipses-auto{
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// table icon toolbar
|
|
.pf-table-tools{
|
|
height: 45px;
|
|
|
|
& > .btn-labeled:not(:last-child){
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.pf-table-tools-action{
|
|
will-change: height, opacity, display;
|
|
opacity: 0; // triggered by js
|
|
display: none; // triggered by js
|
|
height: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
// landing indicator overlay ======================================================================
|
|
.pf-loading-overlay{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
background: $gray-darker;
|
|
z-index: 1060;
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// navbar li =====================================================================================
|
|
.navbar-header-block{
|
|
width: 100%;
|
|
|
|
.navbar-nav{
|
|
width: 100%;
|
|
}
|
|
}
|
|
.navbar-nav {
|
|
li:not(.disabled):not(.hide-before){
|
|
&:hover, &.active{
|
|
|
|
&:before{
|
|
top: -4px;
|
|
opacity: 1;
|
|
}
|
|
|
|
}
|
|
|
|
&:before{
|
|
@include navigation-active-indicator(top);
|
|
width: 100%;
|
|
height: 2px;
|
|
top: 0;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.pf-navbar-version-info{
|
|
cursor: pointer;
|
|
}
|
|
|
|
// page menu ======================================================================================
|
|
.pf-site{
|
|
will-change: transform;
|
|
}
|
|
|
|
.sb-slidebar{
|
|
will-change: transform;
|
|
}
|
|
|
|
.sb-left{
|
|
.list-group-item{
|
|
cursor: pointer;
|
|
@include box-shadow(inset -10px 0px 5px -5px rgba(0,0,0,0.4));
|
|
}
|
|
}
|
|
|
|
.sb-right{
|
|
.list-group-item{
|
|
cursor: pointer;
|
|
@include box-shadow(inset 10px 0px 5px -5px rgba(0,0,0,0.4));
|
|
}
|
|
}
|
|
|
|
.list-group-item{
|
|
&.disabled{
|
|
&:after{
|
|
content: '\f023';
|
|
font-family: 'Font Awesome 5 Free';
|
|
font-weight: bold;
|
|
color: $gray-darker;
|
|
position: absolute;
|
|
right: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// custom scrollbars ==============================================================================
|
|
.mCSB_container, .mCSB_dragger{
|
|
will-change: top, left;
|
|
}
|
|
|
|
// log types ======================================================================================
|
|
.pf-log-info{
|
|
@extend .txt-color-green;
|
|
}
|
|
|
|
.pf-log-warning{
|
|
@extend .txt-color-warning;
|
|
}
|
|
|
|
.pf-log-error{
|
|
@extend .txt-color-red;
|
|
}
|
|
|
|
// timestamp counter ==============================================================================
|
|
.pf-timestamp-counter{
|
|
visibility: hidden; // show by JS
|
|
}
|
|
// map types ======================================================================================
|
|
.pf-map-type-private{
|
|
color: $indigo;
|
|
}
|
|
|
|
.pf-map-type-corporation{
|
|
color: $green;
|
|
}
|
|
|
|
.pf-map-type-alliance{
|
|
color: $blue;
|
|
}
|
|
|
|
.pf-map-type-global{
|
|
color: $teal-lighter;
|
|
}
|
|
|
|
// maps module ====================================================================================
|
|
#pf-map-module{
|
|
margin: 20px 10px 0 10px;
|
|
|
|
// Tabs (colored)
|
|
#pf-map-tabs {
|
|
|
|
a[role="tab"]:hover{
|
|
.pf-map-tab-handler:before{
|
|
color: $orange
|
|
}
|
|
}
|
|
|
|
.pf-map-tab-handler{
|
|
&:before{
|
|
content: '\22EE\22EE\00A0';
|
|
display: inline-block;
|
|
cursor: -moz-grab !important;
|
|
cursor: -webkit-grab !important;
|
|
cursor: grab !important;
|
|
color: $gray-light;
|
|
width: 12px;
|
|
transition: color 0.15s ease-out, background-color 0.15s ease-out;
|
|
pointer-events: all;
|
|
}
|
|
}
|
|
|
|
.pf-map-type-tab-default{
|
|
border-top: 2px solid transparent;
|
|
}
|
|
|
|
.pf-map-type-tab-private{
|
|
border-top: 2px solid $indigo;
|
|
}
|
|
|
|
.pf-map-type-tab-corporation{
|
|
border-top: 2px solid $green;
|
|
}
|
|
|
|
.pf-map-type-tab-alliance{
|
|
border-top: 2px solid $blue;
|
|
}
|
|
|
|
.pf-map-type-tab-global{
|
|
border-top: 2px solid $teal-lighter;
|
|
}
|
|
|
|
.pf-map-tab-icon{
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.pf-map-tab-shared-icon{
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tab Content Body Grid ==========================================================================
|
|
.pf-map-content-row{
|
|
margin-top: 10px;
|
|
padding-bottom: 40px; // space for footer
|
|
|
|
// all modules within a row
|
|
.pf-module{
|
|
font-family: $font-family-bold;
|
|
background: rgba($gray, 0.27);
|
|
padding: 10px;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
will-change: height, transform, opacity;
|
|
overflow: hidden;
|
|
@include border-radius(5px);
|
|
|
|
&:before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-style: solid;
|
|
border-width: 0 0 8px 8px;
|
|
border-color: transparent transparent transparent $gray;
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
// all labels in a module
|
|
.label{
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
// dynamic areas as child of a module
|
|
.pf-dynamic-area{
|
|
background: rgba($gray-darker, 0.4);
|
|
}
|
|
|
|
.pf-module-head{
|
|
margin-bottom: 10px;
|
|
|
|
.pf-module-handler-drag{
|
|
display: inline-block;
|
|
cursor: -moz-grab !important;
|
|
cursor: -webkit-grab !important;
|
|
cursor: grab !important;
|
|
transition: color 0.15s ease-out;
|
|
|
|
&:before{
|
|
content: '\22EE\22EE\00A0';
|
|
}
|
|
|
|
&:hover{
|
|
color: $orange-light;
|
|
}
|
|
}
|
|
|
|
h5{
|
|
display: inline-block;
|
|
line-height: 16px;
|
|
margin-bottom: 0;
|
|
|
|
// icons in headline
|
|
.pf-module-icon-button{
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// system info table
|
|
.pf-module-table{
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// User status ====================================================================================
|
|
.pf-user-status{
|
|
color: $red-darker;
|
|
}
|
|
|
|
.pf-user-status-corp{
|
|
color: $green;
|
|
}
|
|
|
|
.pf-user-status-ally{
|
|
color: $blue;
|
|
}
|
|
|
|
.pf-user-status-own{
|
|
color: $indigo;
|
|
}
|
|
|
|
// WH effects =====================================================================================
|
|
.pf-system-effect{
|
|
display: none; // if effect is active it will be overwritten
|
|
color: $gray-lighter;
|
|
cursor: help;
|
|
}
|
|
|
|
.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-wolfrayet{
|
|
color: $wh-color-wolfrayet;
|
|
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;
|
|
cursor: 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;
|
|
}
|
|
|
|
.pf-system-sec-unknown{
|
|
color: $indigo;
|
|
}
|
|
|
|
.pf-system-sec-abyssal{
|
|
color: $pink;
|
|
}
|
|
|
|
// 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-lighter !important;
|
|
color: $teal-lighter;
|
|
}
|
|
|
|
// system status within label
|
|
.pf-system-info-status-label{
|
|
background-color: $gray-light;
|
|
color: $black;
|
|
will-change: background-color;
|
|
@include transition( background-color 0.3s ease-out );
|
|
|
|
&.pf-system-status-friendly{
|
|
background-color: $blue;
|
|
}
|
|
|
|
&.pf-system-status-occupied{
|
|
background-color: $orange;
|
|
}
|
|
|
|
&.pf-system-status-hostile{
|
|
background-color: $red;
|
|
}
|
|
|
|
&.pf-system-status-empty{
|
|
background-color: $green;
|
|
}
|
|
|
|
&.pf-system-status-unscanned{
|
|
background-color: $teal-lighter;
|
|
}
|
|
}
|
|
|
|
// Filter =========================================================================================
|
|
.pf-system-hidden{
|
|
opacity: 0.15 !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
// 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;
|
|
border-top: 2px solid $gray-light;
|
|
border-bottom: 2px solid $gray-light;
|
|
background-color: #3c3f41;
|
|
position: relative;
|
|
font-size: 10px;
|
|
font-family: $font-family-sans-serif;
|
|
|
|
&.pf-map-connection-stargate{
|
|
background-color: $indigo-darkest;
|
|
border-color: $gray-light;
|
|
}
|
|
|
|
&.pf-map-connection-jumpbridge{
|
|
background-color: $teal-lightest;
|
|
border-color: $gray;
|
|
background: repeating-linear-gradient(
|
|
to right,
|
|
$teal-lightest,
|
|
$teal-lightest 10px,
|
|
$gray 10px,
|
|
$gray 20px
|
|
);
|
|
}
|
|
|
|
&.pf-map-connection-abyssal{
|
|
background-color: darken($pink-darker, 8%);
|
|
border-color: $gray;
|
|
background: repeating-linear-gradient(
|
|
to right,
|
|
darken($pink-darker, 8%),
|
|
darken($pink-darker, 8%) 5px,
|
|
$gray 5px,
|
|
$gray 10px
|
|
);
|
|
}
|
|
|
|
&.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: 8px;
|
|
top: -6px;
|
|
font-family: $font-family-bold;
|
|
@include border-radius(3px);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// structure status ===============================================================================
|
|
.pf-structure-status-unknown{
|
|
color: $teal-lighter;
|
|
}
|
|
|
|
.pf-structure-status-online{
|
|
color: $green;
|
|
}
|
|
|
|
.pf-structure-status-offline{
|
|
color: $red-darker;
|
|
}
|
|
|
|
// global tooltip settings ========================================================================
|
|
.tooltip-inner{
|
|
color: $gray-lighter;
|
|
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));
|
|
}
|
|
|
|
|
|
.modal{
|
|
// tooltips within modals
|
|
.tooltip{
|
|
// higher z-index
|
|
z-index: $zindex-modal + 10;
|
|
|
|
.tooltip-inner{
|
|
color: $gray-dark;
|
|
background-color: $gray-lighter;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
// elements that are popover "triggers" (root elements) (e.g. open on right click)-----------------
|
|
td.pf-popover-trigger{
|
|
&:hover{
|
|
color: $teal;
|
|
}
|
|
}
|
|
|
|
.pf-notransition {
|
|
-webkit-transition: none !important;
|
|
-moz-transition: none !important;
|
|
-o-transition: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
// dynamic area (e.g. for loading animation) ======================================================
|
|
.pf-dynamic-area{
|
|
padding: 10px;
|
|
min-height: 100px;
|
|
position: relative;
|
|
background-color: $gray-dark;
|
|
overflow: hidden;
|
|
@include border-radius(5px);
|
|
|
|
.dl-horizontal{
|
|
margin-bottom: 0;
|
|
|
|
dd{
|
|
min-width: 100px;
|
|
|
|
&.txt-color{
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
// last alert box in dynamic-area
|
|
> [class~='alert']:last-of-type{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// code highlighting ==============================================================================
|
|
.pf-code-ObjectBrace {
|
|
color: $pink-darker;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pf-code-ArrayBrace {
|
|
color: $purple-dark;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pf-code-PropertyName {
|
|
color: $gray-darkest;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pf-code-String {
|
|
color: $orange;
|
|
}
|
|
|
|
.pf-code-Number {
|
|
color: $green-dark;
|
|
}
|
|
|
|
.pf-code-Boolean {
|
|
color: $indigo-darkest;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pf-code-Function {
|
|
color: $pink-darker;
|
|
}
|
|
|
|
.pf-code-Null {
|
|
color: $gray-darker;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pf-code-Comma {
|
|
color: $gray-darkest;
|
|
font-weight: bold;
|
|
}
|
|
|
|
code {
|
|
.fas, .far, .fab {
|
|
color: $gray;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
// svg logo =======================================================================================
|
|
#pf-logo-wrapper{
|
|
display: block; // remove default height
|
|
}
|
|
|
|
// header =========================================================================================
|
|
#pf-head{
|
|
margin-bottom: 0px;
|
|
|
|
a{
|
|
@include transition( color 0.15s ease-out );
|
|
will-change: color;
|
|
|
|
&:focus{
|
|
color: $teal;
|
|
|
|
img{
|
|
border-color: $gray;
|
|
}
|
|
}
|
|
|
|
&:hover{
|
|
text-decoration: none;
|
|
|
|
.badge{
|
|
color: $teal-lightest;
|
|
}
|
|
|
|
img{
|
|
border-color: $teal-lighter;
|
|
}
|
|
}
|
|
}
|
|
|
|
i{
|
|
margin-right: 2px;
|
|
}
|
|
|
|
// brand description (smaller text)
|
|
.pf-brand-desc{
|
|
margin: 6px 10px 0 90px;
|
|
width: 180px;
|
|
}
|
|
|
|
.pf-head-menu{
|
|
|
|
//overwrite some default styles
|
|
padding: 3px 10px;
|
|
line-height: 24px;
|
|
|
|
.pf-head-menu-logo{
|
|
width: 24px;
|
|
height: 24px;
|
|
display: inline-block;
|
|
float: left;
|
|
}
|
|
|
|
}
|
|
|
|
.pf-head-user-character, .pf-head-user-ship{
|
|
opacity: 0; // triggered by js
|
|
visibility: hidden;
|
|
}
|
|
|
|
.pf-head-active-user{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pf-head-active-user, #pf-head-current-location{
|
|
display: none; // triggered by js
|
|
|
|
.badge{
|
|
@include transition( color 0.3s ease-out );
|
|
}
|
|
}
|
|
|
|
.pf-head-user-character-image, .pf-head-user-ship-image{
|
|
display: inline-block;
|
|
margin-top: -6px;
|
|
margin-bottom: -6px;
|
|
width: 27px;
|
|
border: 1px solid $gray;
|
|
margin-right: 3px;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
@include transition( border-color 0.15s ease-out );
|
|
will-change: border-color;
|
|
}
|
|
|
|
.pf-head-program-status{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.navbar-text{
|
|
min-width: 60px; // fixes a load-delay issue for "toggle" map-tracking
|
|
}
|
|
|
|
// tooltips header
|
|
.tooltip{
|
|
.tooltip-inner{
|
|
color: $gray-lighter;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.pf-head{
|
|
@include box-shadow(0 6px 12px rgba(0,0,0,.4));
|
|
|
|
.badge{
|
|
background-color: $gray;
|
|
color: $gray-lighter;
|
|
}
|
|
|
|
small{
|
|
font-family: $font-family-bold;
|
|
}
|
|
}
|
|
|
|
// character switch popover
|
|
#pf-head-character-switch{
|
|
td{
|
|
border: none;
|
|
|
|
&:first-child + td{
|
|
// 2nd column
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// footer (map) ===================================================================================
|
|
#pf-footer{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
margin: 0;
|
|
background: rgba($gray, 0.3);
|
|
|
|
a{
|
|
font-family: $font-family-bold;
|
|
color: $teal-dark;
|
|
|
|
&:hover{
|
|
color: $teal;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// footer (navigation) ============================================================================
|
|
.navbar-fixed-bottom{
|
|
padding: 2px 0;
|
|
|
|
.container-fluid{
|
|
padding-left: 0; // overwrite default
|
|
padding-right: 0; // verwrite default
|
|
}
|
|
}
|
|
|
|
// left menu ======================================================================================
|
|
.pf-menu-clock{
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 6px 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
// global info panel ==============================================================================
|
|
#pf-global-info{
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 32px;
|
|
width: 100%;
|
|
height: 32px;
|
|
margin-bottom: 0; // overwrite default "alert" style
|
|
}
|
|
|
|
// reverse order (reverse render order)
|
|
.panel-reverse-order{
|
|
display: table;
|
|
width: 100%;
|
|
|
|
.reverse-order-header{
|
|
display: table-header-group;
|
|
}
|
|
|
|
.reverse-order-footer{
|
|
display: table-footer-group;
|
|
}
|
|
}
|
|
|
|
// drag&drop (Sortable) ===========================================================================
|
|
.pf-sortable-ghost{
|
|
will-change: opacity;
|
|
transition: opacity 0.2s ease-out;
|
|
opacity: 0.7 !important;
|
|
|
|
.pf-module-handler-drag{
|
|
color: $orange-light;
|
|
cursor: -moz-grabbing;
|
|
cursor: -webkit-grabbing;
|
|
cursor: grabbing;
|
|
}
|
|
}
|
|
|
|
/*
|
|
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;
|
|
}
|
|
}
|
|
|
|
|