/**
* Version: 1.0.1
*/
/**
Ensure that you have the proper meta tags at the beginning of
*/
:root {
--pfm-blue: #0076c2;
--pfm-light-blue: #b0c7da;
--pfm-dark-blue: #003b6e;
--pfm-gray: #5d5d5d;
--pfm-light-gray: #adadad;
--pfm-dark-gray: #303030;
--info: #3a6590;
--success: #379437;
--warning: #ff7600;
--error: #bb6a6a;
--standard: #222222;
--terminal: #41FF00;
--type-airport: #7f4cff;
--type-aircraft: #ff7600;
--type-pax: #379437;
--type-crew: #004C8B;
}
/*
*********** color categories
*/
.stripes-45 {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANUlEQVQoU2NkwAP+///vw4hLHizJyLgFqwKYJEgzhgJkSQwF6JIoCrBJwhXgkgQrwCcJUgAAzKsfUhxrVwQAAAAASUVORK5CYII=");
}
[data-alert="info"],
.alert-info {
background-color: var(--info);
color: white;
}
[data-alert="success"],
.alert-success {
background-color: var(--success);
color: white;
}
[data-alert="warning"],
.alert-warning {
background-color: var(--warning);
color: white;
}
[data-alert="error"],
.alert-error {
background-color: var(--error);
color: white;
}
[data-pfm-type="airport"],
.pfm-type-airport {
background-color: var(--type-airport);
color: white;
}
[data-pfm-type="aircraft"],
.pfm-type-aircraft {
background-color: var(--type-aircraft);
color: white;
}
[data-pfm-type="pax"],
.pfm-type-pax {
background-color: var(--type-pax);
color: white;
}
[data-pfm-type="crew"],
.pfm-type-crew {
background-color: var(--type-crew);
color: white;
}
[data-pfm-type],
.pfm [class*="pfm-type"] {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANUlEQVQoU2NkwAP+///vw4hLHizJyLgFqwKYJEgzhgJkSQwF6JIoCrBJwhXgkgQrwCcJUgAAzKsfUhxrVwQAAAAASUVORK5CYII=");
}
.reverse-blue {
background-color: var(--pfm-blue);
color: #FFFFFF;
}
.reverse-gray {
background-color: var(--pfm-gray);
color: #FFFFFF;
}
/**
fun stuff
*/
.terminal {
background: #000000 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNJREFUeNpiZFhr6MuABTD+//+fEUVgndF/MA3UgU0DAwsQw4xiRKZBRmHVwcSAAwAEGADgYAo+afrQEgAAAABJRU5ErkJggg==");
color: var(--terminal, #41FF00);
font-family: monospace;
line-height: 1.5em;
}
.blink {
animation: blink 700ms linear infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
:root {
--content-min-width: 300px;
--content-max-width: 1000px;
}
/**
************ Basics *****************
*/
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-family: arial, san-serif, serif;
/*font-size: 12px; -- do not set font-size */
}
body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.pfm.row,
.pfm .row {
flex-direction: row;
}
.pfm.column,
.pfm .column {
display: inline-flex;
flex-direction: column;
}
.pfm h1,
h1.pfm,
.pfm h2,
h2.pfm,
.pfm h3,
h3.pfm,
.pfm h4,
h4.pfm,
.pfm h5,
h5.pfm,
.pfm h6,
h6.pfm {
margin: 0.25em 0;
padding: 0.25em 5px;
}
/**
Put your main page content into a div that is a direct child of the body
*/
div.content {
position: relative;
min-width: var(--content-min-width, 300px);
max-width: var(--content-max-width, 1000px);
min-height: 100%;
margin: auto;
padding: 10px;
overflow: auto;
}
.row-wrap {
width: 100%;
display: flex;
flex-flow: row nowrap;
}
.column-wrap {
width: 100%;
display: flex;
flex-flow: column nowrap;
}
code.pfm,
.pfm code {
padding: 2px 4px;
background: var(--pfm-dark-gray, #303030);
color: white;
}
/**
*********************** buttons **********************
*/
:root {
--button-border-default: #6d6d6d;
}
.pfm button {
border: 1px solid var(--button-border-default);
padding: 6px;
outline: none;
border-radius: 4px;
margin: 0 1px;
display: flex;
align-items: center;
justify-content: center;
max-height: 28px;
}
.pfm [class*="button-group"].small button,
.pfm button.small {
padding: 4px;
max-height: 24px;
font-size: 0.8em;
}
.pfm [class*="button-group"].medium button,
.pfm button.medium {
padding: 6px;
max-height: 32px;
font-size: 1.1em;
}
.pfm [class*="button-group"].large button,
.pfm button.large {
padding: 8px;
max-height: 40px;
font-size: 1.2em;
}
.pfm [class*="button-group"].x-large button,
.pfm button.x-large {
padding: 10px;
max-height: 50px;
font-size: 1.3em;
}
.pfm button:hover {
opacity: 0.7;
cursor: pointer;
}
.pfm button[disabled],
.pfm button[disabled]:hover {
background: #d3d3d3;
cursor: default;
opacity: 1;
}
.pfm .button-group-row,
.pfm [class*="button-group"].row {
display: flex;
}
.pfm .button-group-column,
.pfm [class*="button-group"].column {
display: inline-flex;
flex-direction: column;
}
.pfm [class*="button-group"] button {
margin: 0;
border-radius: 0;
}
.pfm [class*="button-group"].row button,
.pfm .button-group-row button {
display: flex;
border-right: none;
}
.pfm [class*="button-group"].row button:first-child,
.pfm .button-group-row button:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pfm [class*="button-group"].row button:last-child,
.pfm .button-group-row button:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid var(--button-border-default);
}
.pfm [class*="button-group"].column button,
.pfm .button-group-column button {
display: inline-flex;
border-bottom: none;
}
.pfm [class*="button-group"].column button:first-child,
.pfm .button-group-column button:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.pfm [class*="button-group"].column button:last-child,
.pfm .button-group-column button:last-child {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom: 1px solid var(--button-border-default);
}
.pfm button span ~ i {
margin-left: 5px;
}
.pfm button i ~ span {
margin-left: 5px;
}
:root {
--scroll-thumb-round: 0;
--scroll-thumb-color: var(--pfm-light-gray, #adadad);
--scroll-track-color: rgba(0,0,0,0.3);
--scroll-thumb-thickness: 7px;
}
.scroller-y {
overflow-y: auto;
}
.scroller-x {
overflow-x: auto;
}
.scroller {
overflow: auto;
}
.scroller-x::-webkit-scrollbar,
.scroller-y::-webkit-scrollbar,
.scroller::-webkit-scrollbar {
height: var(--scroll-thumb-thickness);
width: var(--scroll-thumb-thickness);
}
.scroller-x::-webkit-scrollbar-track,
.scroller-y::-webkit-scrollbar-track,
.scroller::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px var(--scroll-track-color);
}
.scroller-x::-webkit-scrollbar-corner,
.scroller-y::-webkit-scrollbar-corner,
.scroller::-webkit-scrollbar-corner {
border-radius: var(--scroll-thumb-round);
}
.scroller-x::-webkit-scrollbar-thumb,
.scroller-y::-webkit-scrollbar-thumb,
.scroller::-webkit-scrollbar-thumb {
background-color: var(--scroll-thumb-color);
outline: 1px solid slategrey;
}