Files
pathfinder/sass/layout/_system-info.scss
Mark Friedrich 161c37c256 - added "lazy update" (ctrl + v) for "intel module", closed #246
- fixed JS bug where signature sync (client side update) failed
2018-05-05 12:24:02 +02:00

268 lines
5.2 KiB
SCSS

// system info module ======================================================
.pf-system-info-module{
// breadcrumb
h5{
text-transform: capitalize;
}
// dynamic area specific for the description field
.pf-system-info-description-area{
min-height: 123px;
// textarea system description
.editable-container{
width: 100%;
.editableform{
width: 100%;
.form-group{
width: 100%;
.editable-input{
width: calc(100% - 75px);
textarea{
width: 100%;
max-height: 200px;
resize: vertical;
}
}
}
}
}
}
}
// signature table module ==================================================
.pf-signature-table-module{
// delete signature button
.pf-sig-table-clear-button{
will-change: opacity, transform;
display: none;
}
.pf-sig-table{
font-size: 10px;
.pf-sig-table-edit-desc-text{
white-space: normal;
&.editable-empty{
border-bottom: none;
@extend .pf-dialog-icon-button;
}
}
.fa-plus{
@extend .pf-dialog-icon-button;
}
// textarea field
.pf-editable-description{
background-color: $gray-darker;
max-height: 50px;
}
.pf-sig-table-edit-name-input{
text-transform: uppercase;
}
// table filter fields
.pf-editable-filter{
// overwrites default xEditable style
color: $gray-light;
border: none;
font-style: normal;
}
}
}
// table filter (active) select (popover)
// -> popover is child from <body>
.pf-editable-filter-active{
min-width: 100px;
}
// system graph module =====================================================
.pf-system-graph-module{
.pf-system-graph{
position: relative;
width: 100%;
height: 100px;
}
}
// route module ============================================================
.pf-system-route-module{
.pf-system-route-table{
width: 100%;
font-size: 10px;
td{
text-transform: capitalize;
& > .fas, & > .far{
font-size: 10px;
}
.fa-sync, .fa-search-plus{
@extend .pf-dialog-icon-button;
}
.pf-fake-connection{
display: none; // toggled by js see .pf-table-jump-cell
width: 12px;
height: 3px;
cursor: pointer;
&[data-disabled]{
cursor: initial;
}
&.pf-map-connection-frig{
width: 32px;
&:after{
left: 4px;
}
}
&.pf-map-connection-preserve-mass{
width: 26px;
&:after{
content: "\f071";
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: bold;
left: 4px;
}
}
}
&.pf-table-jump-cell{
.pf-fake-connection{
display: inline-block;
}
}
}
}
}
// intel module ============================================================
.pf-system-intel-module{
.pf-system-structure-table{
font-size: 10px;
}
}
// killboard module ========================================================
.pf-system-killboard-module{
.pf-system-killboard-graph-kills{
width: 100%;
height: 100px;
position: relative;
margin-bottom: 30px;
}
.pf-system-killboard-list{
padding-bottom: 10px;
border-bottom: 1px solid $gray-darker;
li{
margin-left: 0;
overflow: visible;
min-height: 50px;
will-change: margin-left;
@include transition( margin-left 0.12s cubic-bezier(0.30, 0.80, 0.80, 1.70));
// character headline
h5{
white-space: nowrap;
}
// ISK headline
h3{
width: 120px;
display: inline-block;
}
.pf-system-killboard-img-corp{
margin-right: 10px;
width: 16px;
}
.pf-system-killboard-img-ship{
width: 50px;
margin-right: 10px;
border: 1px solid $gray-darker;
transform: translateZ(1px);
will-change: border-color;
@include border-radius(25px);
@include transition( border-color 0.12s ease-out);
}
&:before{
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: bold;
position: absolute;
z-index: 10;
left: -25px;
top: 15px;
color: $teal;
opacity: 0;
will-change: opacity, left;
@include transition(all 0.12s ease-out);
}
&:hover{
margin-left: 20px;
.pf-system-killboard-img-ship{
border-color: $teal-lighter;
}
&:before{
opacity: 1;
left: -20px;
}
}
}
}
}
// connection info module ==================================================
.pf-connection-info-module{
.row{
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
.pf-dynamic-area{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
min-height: inherit;
}
.pf-connection-info-table{
width: 100%;
font-size: 10px;
td{
& > .fas, & > .far{
font-size: 10px;
}
}
}
}