2086 lines
39 KiB
SCSS
2086 lines
39 KiB
SCSS
$endpointBubbleWidth: 18px;
|
||
|
||
:fullscreen{
|
||
overflow-y: scroll; // overwrites browser default
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
// links ==========================================================================================
|
||
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;
|
||
}
|
||
|
||
&.disabled{
|
||
color: $navbar-default-link-color;
|
||
pointer-events: none;
|
||
cursor: default;
|
||
}
|
||
}
|
||
|
||
em,
|
||
.pf-font-italic{
|
||
font-style: italic;
|
||
|
||
&.pf-brand{
|
||
text-transform: uppercase;
|
||
}
|
||
}
|
||
|
||
.pf-font-uppercase{
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.pf-font-capitalize{
|
||
text-transform: capitalize;
|
||
}
|
||
|
||
.pf-font-line-through{
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.pf-text-ellipsis{
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.fa-char{
|
||
&:before{
|
||
font-family: Arial, sans-serif;
|
||
font-weight: bold;
|
||
content: attr(data-char-content);
|
||
}
|
||
}
|
||
|
||
.fa-tree-child{
|
||
@extend .fa-fw;
|
||
@extend .fa-lg;
|
||
@extend .fa-level-up-alt;
|
||
@extend .fa-rotate-90;
|
||
color: $gray-light;
|
||
padding-right: 5px;
|
||
}
|
||
|
||
.no-scroll{
|
||
overflow: hidden;
|
||
}
|
||
|
||
.no-padding{
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.no-margin{
|
||
margin: 0 !important;
|
||
}
|
||
|
||
// show/hide by [data-attr] value =================================================================
|
||
.pf-hidden-by-attr{
|
||
&[data-attr='']{
|
||
display: none;
|
||
}
|
||
|
||
&:not([data-attr='']){
|
||
display: initial;
|
||
}
|
||
|
||
&:before{
|
||
content: attr(data-attr) ' ' attr(data-attr-label);
|
||
}
|
||
}
|
||
|
||
.pf-shown-by-attr{
|
||
&[data-attr='']{
|
||
display: initial;
|
||
}
|
||
|
||
&:not([data-attr='']){
|
||
display: none;
|
||
}
|
||
|
||
&:before{
|
||
content: attr(data-attr) ' ' attr(data-attr-label);
|
||
}
|
||
}
|
||
|
||
// scroll bar =====================================================================================
|
||
html{
|
||
scrollbar-width: thin; // Firefox
|
||
scrollbar-color: #717171 #222223; // Firefox
|
||
}
|
||
|
||
::-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;
|
||
}
|
||
|
||
.row{
|
||
// swap render order
|
||
&--reverse{
|
||
display: flex;
|
||
flex-direction: column-reverse;
|
||
}
|
||
}
|
||
|
||
// Flex layout ====================================================================================
|
||
.pf-container-flex-end{
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
// .well variants =================================================================================
|
||
.well{
|
||
&.well-text-number{
|
||
// .well with improved contrast
|
||
font-family: Oxygen, Arial, sans-serif;
|
||
font-weight: bold;
|
||
letter-spacing: .02em;
|
||
line-height: 16px;
|
||
text-rendering: geometricPrecision;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
// .collapse ======================================================================================
|
||
.collapse{
|
||
will-change: height;
|
||
}
|
||
|
||
// 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;
|
||
pointer-events: auto; // enable mouse events even if a parent was set to 'none' (e.g. disabled xEditable cells in sig-reader dialog table)
|
||
@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;
|
||
color: $gray-light; // overwrite xEditable button style
|
||
@include transition(color 0.15s ease-out);
|
||
|
||
&.fas {
|
||
position: relative; // for absolute positioned [data-badge]:after elements
|
||
}
|
||
|
||
&:hover, &.active{
|
||
color: $orange !important;
|
||
}
|
||
|
||
&.editable{
|
||
border-bottom: none !important; // overwrite xEditable button style
|
||
}
|
||
|
||
&[data-badge]:after {
|
||
content: attr(data-badge);
|
||
position: absolute;
|
||
top: -8px;
|
||
left: calc(100% - 5px);
|
||
color: $orange;
|
||
border-radius: 9px;
|
||
padding: 3px 4px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
vertical-align: baseline;
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
font-family: Oxygen, Arial, sans-serif;
|
||
}
|
||
}
|
||
|
||
.pf-module-icon-button-copy{
|
||
cursor: copy;
|
||
-moz-user-select: text;
|
||
user-select: text;
|
||
}
|
||
|
||
%pf-bg-image-wrapper{
|
||
background-size: contain;
|
||
background-origin: content-box;
|
||
background-repeat: no-repeat;
|
||
background-image: var(--bg-image);
|
||
background-position: bottom 0 right 0;
|
||
image-rendering: -webkit-optimize-contrast;
|
||
}
|
||
|
||
.pf-bg-icon-inline{
|
||
@extend %pf-bg-image-wrapper;
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin: -5px 5px;
|
||
outline: 1px solid;
|
||
outline-color: transparent;
|
||
outline-offset: 2px;
|
||
@include transition(outline-color 0.15s ease-out);
|
||
|
||
&:hover{
|
||
outline-color: $teal;
|
||
}
|
||
}
|
||
// 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;
|
||
}
|
||
}
|
||
|
||
.editable-checklist {
|
||
> div > label {
|
||
@extend .checkbox;
|
||
display: block !important;
|
||
padding-left: 20px !important; // overwrite inline-form styles
|
||
color: $gray-lighter;
|
||
|
||
> span {
|
||
@extend label;
|
||
|
||
&:after {
|
||
top: -2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// layout settings popover (active map modules)
|
||
&.pf-editable-settings {
|
||
display: grid;
|
||
column-gap: 15px;
|
||
grid-template-columns: repeat(2, auto);
|
||
align-items: end;
|
||
|
||
> .pf-editable-headline {
|
||
grid-column: 1;
|
||
|
||
&:before {
|
||
content: attr(data-headline);
|
||
display: block;
|
||
text-transform: capitalize;
|
||
font-weight: bold;
|
||
line-height: 18px;
|
||
margin-bottom: 5px;
|
||
margin-top: 5px;
|
||
color: lighten($gray-light, 10%);
|
||
padding-left: 25px;
|
||
}
|
||
|
||
+ .pf-editable-headline[data-count='1'] {
|
||
grid-column: 2;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pf-editable-unknown[value='0'] + span {
|
||
color: $red;
|
||
}
|
||
|
||
.pf-editable-warn + span {
|
||
color: $orange;
|
||
}
|
||
}
|
||
|
||
// toggle 2 elements active (settings popover)
|
||
.pf-editable-toggle {
|
||
display: flex;
|
||
margin-bottom: 5px;
|
||
justify-content: space-between;
|
||
|
||
.pf-editable-toggle-item {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
|
||
&:nth-child(odd) {
|
||
margin-right: 4px;
|
||
}
|
||
|
||
> .btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
&.pf-editable-toggle-btn {
|
||
font-size: 13px;
|
||
|
||
&:not(.disabled) {
|
||
color: $gray-darker;
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
color: $gray-dark; // overwrite default
|
||
background-color: $btn-primary-bg;
|
||
border-color: $btn-primary-border;
|
||
}
|
||
|
||
&.disabled {
|
||
color: $gray-dark;
|
||
pointer-events: all; // required for cursor: not-allowed change (bootstrap bug) https://stackoverflow.com/a/50349274/4329969
|
||
}
|
||
|
||
&.active, &:active {
|
||
+ .btn.active, + .btn:active {
|
||
clip-path: inset(-15px -15px -15px 0);
|
||
}
|
||
}
|
||
}
|
||
|
||
> .pf-editable-toggle-svg {
|
||
width: 98px;
|
||
height: 68px;
|
||
color: $gray-dark; // SVG color
|
||
padding: 3px;
|
||
margin: 0 3px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
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,
|
||
.select2-container--pathfinder {
|
||
[class*="col-"]{
|
||
// smaller and less padding
|
||
padding-left: 3px;
|
||
padding-right: 3px;
|
||
line-height: 22px;
|
||
|
||
&:first-child{
|
||
padding-left: 0;
|
||
}
|
||
|
||
&:last-child{
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
|
||
// custom "remove" X icon for multi select
|
||
.select2-selection__choice__remove {
|
||
display: flex !important; // overwrite default
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0; // hide default char
|
||
|
||
&:before {
|
||
font-family: "Font Awesome 5 Free";
|
||
content: "\f00d";
|
||
font-weight: bold;
|
||
display: inline-block;
|
||
margin-right: 3px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.select2{
|
||
::-webkit-search-cancel-button{
|
||
-webkit-appearance: none !important;
|
||
}
|
||
}
|
||
|
||
.select2-results.mCustomScrollbar{
|
||
.select2-results__option--load-more{
|
||
position: absolute;
|
||
margin-top: 50px; // margin gets removed on totalScroll -> enables ajax select options to load next page
|
||
}
|
||
}
|
||
// global dataTable styles ========================================================================
|
||
.dataTables_wrapper{
|
||
|
||
.dataTables_length select{
|
||
margin: 0 3px; // <select> for page size
|
||
padding: 1px;
|
||
}
|
||
|
||
.pf-table-toolbar-status{
|
||
text-align: center;
|
||
line-height: 22px;
|
||
color: $gray-light;
|
||
}
|
||
|
||
.dataTables_filter {
|
||
margin-top: 0; // overwrite default (mobile breakpoint)
|
||
|
||
@media (max-width: $screen-xs-max) {
|
||
input[type='search'] {
|
||
width: 100px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dt-buttons,
|
||
.dt-stats{
|
||
display: inline-block;
|
||
|
||
.dt-button{
|
||
padding: 0 5px; // overwrite default
|
||
line-height: 22px; // overwrite default
|
||
margin-bottom: 0; // overwrite default
|
||
|
||
&:not(:last-child){
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
|
||
.dt-button,
|
||
.dt-stat{
|
||
.fas{
|
||
margin-right: 5px;
|
||
}
|
||
|
||
&.disabled{
|
||
color: darken($gray-light, 8%)
|
||
}
|
||
|
||
&.processing{
|
||
&:after {
|
||
border: 2px solid darken($gray-light, 8%);
|
||
border-left-color: $orange;
|
||
border-right-color: $orange;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// condensed dataTable toolbar
|
||
.pf-dataTable-condensed-toolbar{
|
||
padding-top: 3px;
|
||
|
||
.dataTables_info{
|
||
padding-top: 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.dataTables_paginate{
|
||
padding-top: 0;
|
||
margin-top: 0;
|
||
|
||
.paginate_button{
|
||
padding: 0;
|
||
height: 13px;
|
||
border: 0 !important;
|
||
|
||
&:before, &:after{
|
||
top: 0;
|
||
}
|
||
&:hover{
|
||
background: transparent !important;
|
||
color: $orange !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dt-buttons{
|
||
text-align: right;
|
||
margin-bottom: 0;
|
||
float: right !important;
|
||
|
||
.dt-button{
|
||
line-height: 18px;
|
||
padding-right: 0;
|
||
|
||
.fa{
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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{
|
||
|
||
&.editable-disabled:focus{
|
||
// disabled xEditable td´s should not get focus style
|
||
// -> "pointer-events = none" would be nicer but does not work because "mousedown" should work -> select row function
|
||
outline: none;
|
||
background-color: transparent;
|
||
}
|
||
|
||
&.editable-click:not(.editable-disabled){
|
||
cursor: pointer;
|
||
}
|
||
|
||
&:focus, &.editable-open, &.cellHighlight {
|
||
// set td as :focus even is td content is focused
|
||
outline: 1px solid $orange-dark;
|
||
outline-offset: -1px;
|
||
background-color: rgba($orange-dark, .08);
|
||
}
|
||
|
||
> .fa-circle{
|
||
font-size: 9px !important; // should not be "so big" (10px default)
|
||
}
|
||
|
||
> .label{
|
||
font-size: 80%;
|
||
}
|
||
|
||
> .pf-fake-connection {
|
||
height: 3px;
|
||
}
|
||
|
||
&.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;
|
||
|
||
> .fas {
|
||
pointer-events: none; // event listeners are on parent <td> -> ignore icon in e.target
|
||
}
|
||
|
||
// 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-type-cell{
|
||
> span {
|
||
&:first-child{
|
||
display: inline-block;
|
||
width: 28px;
|
||
}
|
||
&:nth-child(2){
|
||
display: inline-block;
|
||
width: 22px;
|
||
|
||
kbd{
|
||
&:empty{
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.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;
|
||
border-right: 1px solid transparent;
|
||
img{
|
||
width: 23px; // 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;
|
||
}
|
||
|
||
.pf-endpoint-bubble{
|
||
width: 15px;
|
||
height: 15px;
|
||
|
||
&:after{
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// column separator
|
||
td, th{
|
||
&.separator-right{
|
||
border-right: 1px solid $gray;
|
||
}
|
||
|
||
svg.peity{
|
||
// center vertical in column
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
// column highlight cell class
|
||
thead{
|
||
th.colHighlight{
|
||
border-bottom: 1px solid $orange-dark;
|
||
}
|
||
}
|
||
|
||
tbody{
|
||
td.colHighlight{
|
||
border-left: 1px solid $orange-dark;
|
||
border-right: 1px solid $orange-dark;
|
||
background-color: rgba($orange-dark, .08);
|
||
}
|
||
|
||
tr:first-child td.colHighlight{
|
||
border-top: 1px solid $orange-dark;
|
||
}
|
||
|
||
tr:last-child td.colHighlight{
|
||
border-bottom: 1px solid $orange-dark;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
// table styles ===================================================================================
|
||
table{
|
||
// required for native .ellipses to work in some columns
|
||
&.pf-table-fixed{
|
||
width: 100%;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
|
||
&.collapsing{
|
||
@include transition( height .01s ease );
|
||
|
||
}
|
||
|
||
&.collapse.in{
|
||
display: table;
|
||
}
|
||
|
||
tr{
|
||
&.collapsing{
|
||
@include transition( height .01s ease );
|
||
}
|
||
|
||
&.collapse{
|
||
&.in{
|
||
display: table-row !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
td, th{
|
||
&.separator-right{
|
||
border-right: 1px solid $gray-dark;
|
||
}
|
||
|
||
&.pf-table-cell-10{
|
||
width: 10px;
|
||
}
|
||
|
||
&.pf-table-cell-20{
|
||
width: 20px;
|
||
}
|
||
|
||
&.pf-table-cell-50{
|
||
width: 50px;
|
||
}
|
||
|
||
&.pf-table-cell-100{
|
||
max-width: 100px;
|
||
}
|
||
|
||
&.pf-table-cell-ellipses-auto{
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
&.pf-table-cell-bg-image{
|
||
padding: 0 0 0 5px !important;
|
||
vertical-align: middle !important;
|
||
border-top-color: transparent !important;
|
||
|
||
.pf-table-cell-bg-image-wrapper{
|
||
@extend %pf-bg-image-wrapper;
|
||
display: block;
|
||
width: auto;
|
||
height: 40px;
|
||
padding: 2px 0;
|
||
|
||
&.smaller{
|
||
height: 30px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.pf-table-cell-chart{
|
||
position: relative;
|
||
|
||
svg.peity{
|
||
display: block;
|
||
position: absolute;
|
||
margin-top: -2px; // ugly fix
|
||
}
|
||
}
|
||
|
||
&.pf-table-cell-progress{
|
||
position: relative;
|
||
|
||
&:before{
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 0; // default if no --width var set
|
||
width: calc(var(--width) * 1%);
|
||
height: 1px;
|
||
border-top: 1px solid $blue;
|
||
}
|
||
|
||
&:after{
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 1px;
|
||
border-width: 0 2px;
|
||
border-style: solid;
|
||
border-color: $gray-lighter;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// table icon toolbar
|
||
.pf-table-tools{
|
||
height: 45px;
|
||
|
||
& > .btn-labeled:not(:last-child){
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.pf-table-tools-action{
|
||
will-change: height, opacity;
|
||
opacity: 0; // triggered by js
|
||
display: none; // triggered by js
|
||
height: 0;
|
||
overflow: 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;
|
||
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%;
|
||
}
|
||
}
|
||
|
||
.modal .navbar-nav {
|
||
li {
|
||
@include pf-navigation-indicator(top);
|
||
}
|
||
}
|
||
|
||
.navbar-fixed-top .navbar-nav {
|
||
li {
|
||
@include pf-navigation-indicator(bottom);
|
||
}
|
||
}
|
||
|
||
.pf-navbar-version-info{
|
||
cursor: pointer;
|
||
}
|
||
|
||
// page menu ======================================================================================
|
||
.pf-site{
|
||
background-color: $body-background-color;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.pf-menu{
|
||
color: $gray-light;
|
||
background-color: $gray-dark;
|
||
width: 150px;
|
||
transition-duration: 180ms;
|
||
will-change: transform;
|
||
|
||
.panel-heading {
|
||
text-align: right;
|
||
padding: 6px 15px; // overwrite default
|
||
}
|
||
}
|
||
|
||
.pf-menu-left{
|
||
.list-group-item{
|
||
cursor: pointer;
|
||
@include box-shadow(inset -10px 0px 5px -5px rgba(0,0,0,0.4));
|
||
}
|
||
}
|
||
|
||
.pf-menu-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;
|
||
}
|
||
}
|
||
&.loading{
|
||
pointer-events: none;
|
||
color: $navbar-default-link-color;
|
||
|
||
&:after{
|
||
content: '\f021';
|
||
font-family: 'Font Awesome 5 Free';
|
||
font-weight: bold;
|
||
position: absolute;
|
||
right: 8px;
|
||
animation: fa-spin 2s infinite linear;
|
||
}
|
||
}
|
||
}
|
||
|
||
// custom scrollbars ==============================================================================
|
||
.mCSB_container, .mCSB_dragger{
|
||
will-change: top, left, height, width;
|
||
transition: height .18s linear, width .18s linear; // smoother animation on window resize
|
||
}
|
||
|
||
.mCSB_container{
|
||
overflow-x: visible !important; // for map zoom
|
||
overflow-y: visible !important; // for map zoom
|
||
}
|
||
|
||
// 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;
|
||
}
|
||
|
||
// User status ====================================================================================
|
||
.pf-user-status{
|
||
color: $red-dark;
|
||
}
|
||
|
||
.pf-user-status-corp{
|
||
color: $green;
|
||
}
|
||
|
||
.pf-user-status-ally{
|
||
color: $blue;
|
||
}
|
||
|
||
.pf-user-status-own{
|
||
color: $indigo;
|
||
}
|
||
|
||
// Connection Endpoint types ======================================================================
|
||
.pf-endpoint-bubble{
|
||
display: inline-block;
|
||
position: relative;
|
||
width: $endpointBubbleWidth;
|
||
height: $endpointBubbleWidth;
|
||
|
||
&:after{
|
||
content: var(--svgBubble);
|
||
display: inline-block;
|
||
pointer-events: none;
|
||
width: $endpointBubbleWidth;
|
||
height: $endpointBubbleWidth;
|
||
vertical-align: top;
|
||
}
|
||
}
|
||
|
||
// 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-rally{
|
||
text-shadow: 1px 1px 2px $gray-darkest; // improve text contrast
|
||
background-color: $pink-darker;
|
||
|
||
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;
|
||
animation: move 6s linear infinite;
|
||
}
|
||
|
||
.pf-system-info-rally{
|
||
.pf-system-head{
|
||
@extend .pf-rally;
|
||
}
|
||
}
|
||
|
||
// 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{
|
||
display: inline-block; // fixed "blurry" text in scaled parent
|
||
transform: translateY(0); // s.o.
|
||
-webkit-font-smoothing: antialiased; // s.o.
|
||
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-triglav{
|
||
color: $red-dark;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.pf-system-sec-special{
|
||
color: $yellow-dark;
|
||
}
|
||
|
||
.pf-system-sec-drifter{
|
||
color: $aqua;
|
||
}
|
||
|
||
// 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{
|
||
.clearfix + .col-md-6{
|
||
margin-top: 10px;
|
||
+ .col-md-6{
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// planet types ===================================================================================
|
||
.pf-planet-barren{
|
||
color: $planet-color-barren;
|
||
}
|
||
|
||
.pf-planet-gas{
|
||
color: $planet-color-gas;
|
||
}
|
||
|
||
.pf-planet-ice{
|
||
color: $planet-color-ice;
|
||
}
|
||
|
||
.pf-planet-lava{
|
||
color: $planet-color-lava;
|
||
}
|
||
|
||
.pf-planet-oceanic{
|
||
color: $planet-color-oceanic;
|
||
}
|
||
|
||
.pf-planet-plasma{
|
||
color: $planet-color-plasma;
|
||
}
|
||
|
||
.pf-planet-shattered{
|
||
color: $planet-color-shattered;
|
||
}
|
||
|
||
.pf-planet-storm{
|
||
color: $planet-color-storm;
|
||
}
|
||
|
||
.pf-planet-temperate{
|
||
color: $planet-color-temperate;
|
||
}
|
||
|
||
// connection size by jump mass ===================================================================
|
||
.pf-jump-mass-xl{
|
||
//color: $indigo;
|
||
}
|
||
|
||
.pf-jump-mass-l{
|
||
//color: $blue;
|
||
}
|
||
|
||
.pf-jump-mass-m{
|
||
//color: $yellow-dark;
|
||
}
|
||
|
||
.pf-jump-mass-s{
|
||
//color: $orange;
|
||
}
|
||
|
||
// "fake connection" classes for the map manual
|
||
.pf-fake-connection{
|
||
box-sizing: content-box;
|
||
display: inline-block;
|
||
width: 70px;
|
||
height: 4px;
|
||
max-width: 100%;
|
||
border-top: 2px solid $gray-light;
|
||
border-bottom: 2px solid $gray-light;
|
||
background-color: $gray;
|
||
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-dark;
|
||
}
|
||
|
||
&.pf-map-connection-wh-size-s,
|
||
&.pf-map-connection-wh-size-m,
|
||
&.pf-map-connection-wh-size-l,
|
||
&.pf-map-connection-wh-size-xl,
|
||
&.pf-map-connection-preserve-mass{
|
||
&:after{
|
||
content: '?';
|
||
background-color: $gray;
|
||
color: $gray-lighter;
|
||
padding: 1px 2px;
|
||
position: absolute;
|
||
left: calc(50% - 12px);
|
||
top: -5px;
|
||
font-family: Arial, sans-serif;
|
||
font-size: 11px;
|
||
line-height: 12px;
|
||
min-width: 14px;
|
||
text-align: center;
|
||
border-radius: 3px;
|
||
@include box-shadow(0 3px 6px rgba(0,0,0,.3));
|
||
}
|
||
}
|
||
|
||
&.pf-map-connection-wh-size-s{
|
||
border-style: dotted;
|
||
|
||
&:after{
|
||
content: 'S';
|
||
}
|
||
}
|
||
|
||
&.pf-map-connection-wh-size-m{
|
||
border-style: dashed;
|
||
|
||
&:after{
|
||
content: 'M';
|
||
}
|
||
}
|
||
|
||
&.pf-map-connection-wh-size-l{
|
||
|
||
&:after{
|
||
content: 'L';
|
||
}
|
||
}
|
||
|
||
&.pf-map-connection-wh-size-xl{
|
||
|
||
&:after{
|
||
content: 'XL';
|
||
}
|
||
}
|
||
|
||
&.pf-map-connection-preserve-mass{
|
||
|
||
&:after{
|
||
content: 'save mass';
|
||
background-color: $red-dark;
|
||
color: $gray-lightest;
|
||
left: calc(50% - 28px);
|
||
}
|
||
}
|
||
}
|
||
|
||
// "fake connection" classes for inline text
|
||
.pf-fake-connection-text{
|
||
padding: 0 2px;
|
||
border-style: solid;
|
||
border-color: darken($gray-light, 5%);
|
||
border-width: 2px;
|
||
border-left: none;
|
||
border-right: none;
|
||
|
||
&.pf-wh-eol{
|
||
border-color: $pink-dark;
|
||
}
|
||
|
||
&.pf-wh-reduced{
|
||
background-color: $orange;
|
||
color: $black;
|
||
}
|
||
|
||
&.pf-wh-critical{
|
||
background-color: $red-dark;
|
||
color: $black;
|
||
}
|
||
|
||
&.pf-wh-frig{
|
||
border-top-style: dotted;
|
||
border-bottom-style: dotted;
|
||
}
|
||
}
|
||
|
||
// structure status ===============================================================================
|
||
.pf-structure-status-unknown{
|
||
color: $teal-lighter;
|
||
}
|
||
|
||
.pf-structure-status-online{
|
||
color: $green;
|
||
}
|
||
|
||
.pf-structure-status-offline{
|
||
color: $red-dark;
|
||
}
|
||
|
||
// global tooltip settings ========================================================================
|
||
.tooltip-inner{
|
||
color: $gray-lighter;
|
||
background-color: $gray;
|
||
font-family: $font-family-bold;
|
||
padding: 5px 5px;
|
||
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;
|
||
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;
|
||
}
|
||
|
||
&[data-resizebar]{
|
||
padding-bottom: 15px;
|
||
|
||
&:hover{
|
||
.pf-resizearea{
|
||
@include transition-delay(.15s);
|
||
height: 40px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.pf-resizebar-bar{
|
||
border-top: 1px solid $orange !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
&:not([data-resizebar]){
|
||
.pf-dynamic-area-resizebar{
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.pf-resizearea{
|
||
height: 0;
|
||
opacity: 0;
|
||
@include transition(height .12s ease-out, opacity .12s ease-out);
|
||
will-change: height, opacity;
|
||
}
|
||
|
||
.pf-dynamic-area-statusbar{
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
background-color: $gray-dark;
|
||
padding: 1px 0;
|
||
|
||
.pf-dynamic-area-resizebar{
|
||
width: 100%;
|
||
height: 9px;
|
||
padding-top: 1px;
|
||
cursor: row-resize;
|
||
|
||
&:hover{
|
||
.pf-resizebar-bar{
|
||
border-top: 1px solid $orange;
|
||
}
|
||
}
|
||
|
||
.pf-resizebar-bar{
|
||
border-top: 1px solid $gray-light;
|
||
transition: border-top 0.15s ease-out;
|
||
width: 20px;
|
||
margin: 1px auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// code highlighting ==============================================================================
|
||
.pf-code-ObjectBrace {
|
||
color: lighten($pink-darker, 15%);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.pf-code-ArrayBrace {
|
||
color: $teal-lightest;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.pf-code-PropertyName {
|
||
color: lighten($gray-light, 15%);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.pf-code-String {
|
||
color: $orange;
|
||
}
|
||
|
||
.pf-code-Number {
|
||
color: $green;
|
||
}
|
||
|
||
.pf-code-Boolean {
|
||
color: $indigo;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.pf-code-Function {
|
||
color: lighten($gray-light, 15%);
|
||
font-style: italic;
|
||
white-space: pre;
|
||
}
|
||
|
||
.pf-code-Null {
|
||
color: $red;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.pf-code-Comma {
|
||
color: lighten($gray-light, 15%);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.pf-code-Date {
|
||
color: lighten($gray-light, 15%);
|
||
font-style: italic;
|
||
}
|
||
|
||
pre {
|
||
.fa-ul {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 15px;
|
||
}
|
||
|
||
> ul {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
code {
|
||
.fas, .far, .fab {
|
||
color: $gray-light;
|
||
cursor: pointer;
|
||
margin: 0 3px;
|
||
}
|
||
|
||
section {
|
||
border-radius: 5px;
|
||
|
||
&:not(:last-child) {
|
||
border-bottom: 1px dashed $gray;
|
||
padding-bottom: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 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{
|
||
opacity: 0; // triggered by js
|
||
visibility: hidden;
|
||
}
|
||
|
||
.pf-head-active-users{
|
||
cursor: pointer;
|
||
}
|
||
|
||
.pf-head-active-users{
|
||
display: none; // triggered by js
|
||
|
||
.badge{
|
||
@include transition( color 0.3s ease-out );
|
||
}
|
||
}
|
||
|
||
.pf-head-image{
|
||
display: inline-block;
|
||
margin-top: -6px;
|
||
margin-bottom: -6px;
|
||
width: 27px;
|
||
border: 1px solid $gray;
|
||
image-rendering: -webkit-optimize-contrast;
|
||
@include transition( border-color 0.15s ease-out );
|
||
will-change: border-color;
|
||
|
||
&.--left{
|
||
margin-right: 3px;
|
||
}
|
||
|
||
&.--right{
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
|
||
.pf-head-program-status{
|
||
cursor: pointer;
|
||
}
|
||
|
||
.pf-head-map-tracking{
|
||
margin-bottom: 4px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
// 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;
|
||
|
||
&:empty{
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
small{
|
||
font-family: $font-family-bold;
|
||
}
|
||
}
|
||
|
||
// footer (map) ===================================================================================
|
||
#pf-footer{
|
||
display: flex;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
margin: 0;
|
||
background: rgba($gray, 0.3);
|
||
padding: 1px 0;
|
||
|
||
a{
|
||
font-family: $font-family-bold;
|
||
color: $teal-dark;
|
||
|
||
&:hover{
|
||
color: $teal;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
.pf-footer-left{
|
||
display: flex;
|
||
flex: none; // shorthand for: flex-grow: 0, flex-shrink: 0, flex-basis: auto
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.pf-footer-center{
|
||
display: flex;
|
||
flex: 1; // shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.pf-footer-right{
|
||
display: flex;
|
||
flex: none; // shorthand for: flex-grow: 0, flex-shrink: 0, flex-basis: auto
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
|
||
// footer (navigation) ============================================================================
|
||
.navbar-fixed-bottom{
|
||
padding: 2px 0;
|
||
|
||
.container-fluid{
|
||
padding-left: 0; // overwrite default
|
||
padding-right: 0; // overwrite default
|
||
}
|
||
}
|
||
|
||
.flex-row {
|
||
display: flex;
|
||
flex: 0 1 auto;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.flex-col {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.flex-grow {
|
||
flex-grow: 1;
|
||
flex-basis: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.flex-between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
// global info panel ==============================================================================
|
||
#pf-global-info{
|
||
width: 100%;
|
||
margin-bottom: 0; // overwrite default "alert" style
|
||
border: none;
|
||
padding: 9px 10px;
|
||
|
||
.ui-pnotify-icon{
|
||
float: left;
|
||
|
||
> span{
|
||
display: block;
|
||
}
|
||
}
|
||
.ui-pnotify-title{
|
||
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;
|
||
}
|
||
}
|
||
|
||
/*
|
||
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;
|
||
}
|
||
} |