444 lines
14 KiB
Plaintext
444 lines
14 KiB
Plaintext
/* REM: the modern UI's design (docs/rem/ui-modern.md, "Design") -- shared by every window.
|
|
RmlUi has no CSS variables: the tokens are written out, keep them in step with the table.
|
|
space #070b12 page ground behind full-screen pages
|
|
glass #0d1622 window fill (slightly see-through: #0d1622eb)
|
|
glass2 #122033 rows, fields, cards
|
|
line #24405c quiet lines (FL wire blue)
|
|
linehi #3d6d96 window and button frames
|
|
text #dbe6f0 muted #8197ad
|
|
amber #f2b13c active / selected cyan #5cc8f0 hover, focus
|
|
good #5fd08a warn #f2b13c bad #ef6a5b
|
|
Fonts: Saira SemiCondensed (headings, buttons, tabs), Barlow (text), IBM Plex Mono (numbers). */
|
|
|
|
/* RmlUi has no browser defaults: the block elements are set here */
|
|
div, p, h1, h2, h3, h4, section, header, footer, ul, li, form { display: block; }
|
|
strong, b { font-weight: bold; }
|
|
.btn, .close, .chip, .state, .key { display: inline-block; }
|
|
em, i { font-style: italic; }
|
|
|
|
body
|
|
{
|
|
font-family: Barlow;
|
|
font-weight: 500; /* Barlow Medium: the regular cut reads thin at high resolutions */
|
|
font-size: 15dp;
|
|
color: #dbe6f0;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- window frame */
|
|
|
|
body.window
|
|
{
|
|
position: absolute;
|
|
left: 9%;
|
|
top: 7%;
|
|
width: 82%;
|
|
height: 86%;
|
|
max-width: 1680dp;
|
|
background-color: #0d1622eb;
|
|
border: 2dp #3d6d96;
|
|
border-radius: 4dp;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* a window opens with a short fade and lift (the host sets .rem-in for one frame) */
|
|
/* the transform only while the window moves in (.rem-anim): a transformed window's scrolled
|
|
content is not clipped by the renderer (no clip mask), so a resting window has none */
|
|
body.window { opacity: 1; transition: opacity transform 0.22s cubic-out; }
|
|
body.window.rem-anim { transform: translateY(0dp) scale(1); }
|
|
body.window.rem-in { opacity: 0; transform: translateY(14dp) scale(0.985); }
|
|
/* after a bar icon flew to the middle: the window grows out of it */
|
|
body.window.rem-in.rem-zoom { opacity: 0; transform: translateY(0dp) scale(0.3); }
|
|
|
|
/* a smaller window (player, contracts, waypoints) */
|
|
body.window.medium { left: 18%; top: 12%; width: 64%; height: 76%; max-width: 1300dp; }
|
|
body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900dp; }
|
|
|
|
.win-head
|
|
{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 12dp 18dp;
|
|
border-bottom: 1dp #24405c;
|
|
drag: drag; /* the grip: a window moves by its head (rem_ui_host.cpp, rem.ini win_<name>) */
|
|
cursor: move;
|
|
}
|
|
.win-head .title
|
|
{
|
|
font-family: "Saira SemiCondensed";
|
|
font-weight: 600;
|
|
font-size: 21dp;
|
|
letter-spacing: 1.2dp;
|
|
margin-right: 16dp;
|
|
}
|
|
.win-head .loc { color: #8197ad; font-size: 15dp; }
|
|
.win-head .spacer { flex: 1; }
|
|
.chip
|
|
{
|
|
font-family: "Saira SemiCondensed";
|
|
font-size: 14dp;
|
|
letter-spacing: 0.6dp;
|
|
color: #8197ad;
|
|
padding: 2dp 11dp;
|
|
border: 2dp #3d6d96;
|
|
border-radius: 11dp;
|
|
margin-left: 10dp;
|
|
}
|
|
.chip .v { font-family: "IBM Plex Mono"; color: #dbe6f0; }
|
|
.close
|
|
{
|
|
width: 28dp;
|
|
height: 28dp;
|
|
line-height: 26dp;
|
|
text-align: center;
|
|
margin-left: 14dp;
|
|
border: 2dp #3d6d96;
|
|
border-radius: 3dp;
|
|
color: #8197ad;
|
|
font-size: 17dp;
|
|
}
|
|
.close:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
|
|
|
.win-main
|
|
{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
min-height: 0;
|
|
}
|
|
|
|
.nav
|
|
{
|
|
width: 200dp;
|
|
border-right: 1dp #24405c;
|
|
padding: 10dp 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.nav .item
|
|
{
|
|
font-family: "Saira SemiCondensed";
|
|
font-size: 16dp;
|
|
letter-spacing: 1.1dp;
|
|
text-transform: uppercase;
|
|
color: #8197ad;
|
|
padding: 9dp 18dp;
|
|
border-left: 2dp #00000000;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.nav .item .badge
|
|
{
|
|
margin-left: auto;
|
|
font-family: "IBM Plex Mono";
|
|
font-size: 11dp;
|
|
color: #dbe6f0;
|
|
background-color: #24405c;
|
|
border-radius: 3dp;
|
|
padding: 0 5dp;
|
|
}
|
|
.nav .item:hover { color: #5cc8f0; background-color: #122033; }
|
|
.nav .item img.ico { width: 20dp; height: 20dp; margin-right: 10dp; opacity: 0.7; }
|
|
.nav .item:hover img.ico, .nav .item.active img.ico { opacity: 1; }
|
|
.win-head img.head-ico { width: 26dp; height: 26dp; margin-right: 10dp; image-color: #f2b13c; }
|
|
.nav .item.active { color: #f2b13c; border-left-color: #f2b13c; background-color: #122033; }
|
|
.nav .sep { height: 1dp; background-color: #24405c; margin: 8dp 18dp; }
|
|
|
|
.content
|
|
{
|
|
flex: 1;
|
|
padding: 18dp;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.win-foot
|
|
{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-top: 1dp #24405c;
|
|
padding: 8dp 18dp;
|
|
font-size: 13dp;
|
|
color: #8197ad;
|
|
}
|
|
.win-foot .key
|
|
{
|
|
font-family: "IBM Plex Mono";
|
|
font-size: 11dp;
|
|
color: #dbe6f0;
|
|
border: 2dp #3d6d96;
|
|
border-radius: 3dp;
|
|
padding: 0 4dp;
|
|
margin-right: 5dp;
|
|
}
|
|
.win-foot .hint { margin-right: 18dp; }
|
|
.win-foot .status { margin-left: auto; color: #dbe6f0; }
|
|
|
|
/* ---------------------------------------------------------------- headings, text */
|
|
|
|
h3, .label
|
|
{
|
|
font-family: "Saira SemiCondensed";
|
|
font-size: 14dp;
|
|
letter-spacing: 1.2dp;
|
|
text-transform: uppercase;
|
|
color: #8197ad;
|
|
}
|
|
.muted { color: #8197ad; }
|
|
.hint { font-size: 13dp; color: #8197ad; }
|
|
.num { font-family: "IBM Plex Mono"; }
|
|
.big
|
|
{
|
|
font-family: "Saira SemiCondensed";
|
|
font-weight: 600;
|
|
font-size: 27dp;
|
|
}
|
|
.kind
|
|
{
|
|
font-family: "Saira SemiCondensed";
|
|
letter-spacing: 1dp;
|
|
text-transform: uppercase;
|
|
color: #8197ad;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- state chips, bars */
|
|
|
|
.state
|
|
{
|
|
font-family: "Saira SemiCondensed";
|
|
font-size: 12dp;
|
|
letter-spacing: 0.8dp;
|
|
text-transform: uppercase;
|
|
padding: 1dp 7dp;
|
|
border-width: 1dp;
|
|
border-radius: 2dp;
|
|
}
|
|
.st-good { color: #5fd08a; border-color: #5fd08a; }
|
|
.st-warn { color: #f2b13c; border-color: #f2b13c; }
|
|
.st-bad { color: #ef6a5b; border-color: #ef6a5b; }
|
|
.st-idle { color: #8197ad; border-color: #8197ad; }
|
|
|
|
.bar { height: 4dp; background-color: #00000066; border-radius: 2dp; }
|
|
.bar .fill { height: 4dp; border-radius: 2dp; background-color: #5fd08a; }
|
|
.bar .fill.warn { background-color: #f2b13c; }
|
|
.bar .fill.bad { background-color: #ef6a5b; }
|
|
|
|
/* ---------------------------------------------------------------- buttons */
|
|
|
|
.btn
|
|
{
|
|
font-family: "Saira SemiCondensed";
|
|
font-size: 14dp;
|
|
letter-spacing: 1.1dp;
|
|
text-transform: uppercase;
|
|
color: #dbe6f0;
|
|
background-color: #122033;
|
|
border: 2dp #3d6d96;
|
|
border-radius: 3dp;
|
|
padding: 7dp 16dp;
|
|
margin-right: 8dp;
|
|
margin-bottom: 8dp;
|
|
position: relative;
|
|
transition: color border-color 0.12s;
|
|
}
|
|
.btn:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
|
.btn:active { background-color: #1a2d47; }
|
|
.btn.primary { color: #f2b13c; border-color: #f2b13c; }
|
|
.btn.primary:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
|
.btn.danger { color: #ef6a5b; border-color: #7a3f3e; }
|
|
.btn.armed { color: #160604; background-color: #ef6a5b; border-color: #ef6a5b; }
|
|
.btn.disabled { color: #8197ad66; border-color: #24405c; }
|
|
.btn .small { font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; text-transform: none; letter-spacing: 0; margin-left: 6dp; }
|
|
|
|
/* a tooltip: a .tip child, shown while the button is hovered */
|
|
.tip
|
|
{
|
|
display: none;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 100%;
|
|
margin-top: 8dp;
|
|
width: 260dp;
|
|
z-index: 10;
|
|
font-family: Barlow;
|
|
font-size: 13dp;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: #dbe6f0;
|
|
background-color: #05090f;
|
|
border: 2dp #3d6d96;
|
|
border-radius: 3dp;
|
|
padding: 6dp 9dp;
|
|
}
|
|
.btn:hover .tip { display: block; }
|
|
|
|
.actions { display: flex; flex-direction: row; flex-wrap: wrap; }
|
|
|
|
/* ---------------------------------------------------------------- tabs inside a page */
|
|
|
|
.subtabs
|
|
{
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-bottom: 1dp #24405c;
|
|
margin-bottom: 12dp;
|
|
}
|
|
.subtabs .tab
|
|
{
|
|
font-family: "Saira SemiCondensed";
|
|
font-size: 14dp;
|
|
letter-spacing: 1.2dp;
|
|
text-transform: uppercase;
|
|
color: #8197ad;
|
|
padding: 7dp 14dp;
|
|
border-bottom: 2dp #00000000;
|
|
}
|
|
.subtabs .tab:hover { color: #5cc8f0; }
|
|
.subtabs .tab.active { color: #f2b13c; border-bottom-color: #f2b13c; }
|
|
|
|
/* ---------------------------------------------------------------- lists and tables */
|
|
|
|
.scroll { overflow-y: auto; }
|
|
scrollbarvertical { width: 8dp; margin-left: 4dp; }
|
|
scrollbarvertical slidertrack { background-color: #0d1622; border-radius: 4dp; }
|
|
scrollbarvertical sliderbar { background-color: #3d6d96; border-radius: 4dp; min-height: 24dp; }
|
|
scrollbarvertical sliderbar:hover { background-color: #5cc8f0; }
|
|
scrollbarvertical sliderarrowdec, scrollbarvertical sliderarrowinc { height: 0; }
|
|
|
|
input.text
|
|
{
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 7dp 10dp;
|
|
border: 2dp #24405c;
|
|
border-radius: 3dp;
|
|
background-color: #122033;
|
|
color: #dbe6f0;
|
|
font-size: 14dp;
|
|
cursor: text;
|
|
}
|
|
input.text:focus { border-color: #5cc8f0; }
|
|
input.text .placeholder, input.text:placeholder { color: #8197ad; }
|
|
|
|
.table
|
|
{
|
|
border: 2dp #24405c;
|
|
border-radius: 3dp;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
.table .head, .table .row
|
|
{
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 6dp 10dp;
|
|
}
|
|
.table .head
|
|
{
|
|
font-family: "Saira SemiCondensed";
|
|
font-size: 12dp;
|
|
letter-spacing: 1.2dp;
|
|
text-transform: uppercase;
|
|
color: #8197ad;
|
|
background-color: #0d1622;
|
|
border-bottom: 1dp #24405c;
|
|
}
|
|
.table .body { flex: 1; overflow-y: auto; }
|
|
.table .row { font-size: 14dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
|
|
.table .row:hover { background-color: #122033; }
|
|
.table .row.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
|
.table .row.current .c1 { color: #f2b13c; }
|
|
.table .c1 { flex: 1; }
|
|
.table .c2 { width: 30%; }
|
|
.table .c3 { width: 70dp; text-align: right; font-family: "IBM Plex Mono"; }
|
|
.table .c4 { width: 120dp; text-align: right; font-family: "IBM Plex Mono"; margin-right: 16dp; }
|
|
.table .head .c3, .table .head .c4 { font-family: "Saira SemiCondensed"; }
|
|
|
|
/* the amount slider (as Freelancer's quantity slider at the dealers) */
|
|
input.range { flex: 1; height: 18dp; }
|
|
input.range slidertrack { height: 4dp; margin-top: 7dp; background-color: #24405c; border-radius: 2dp; }
|
|
input.range sliderbar { width: 14dp; height: 18dp; background-color: #f2b13c; border-radius: 3dp; }
|
|
input.range sliderbar:hover { background-color: #5cc8f0; }
|
|
input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
|
|
.table .empty { padding: 12dp 10dp; color: #8197ad; }
|
|
|
|
/* ---------------------------------------------------------------- cards, stats */
|
|
|
|
.stats
|
|
{
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: 2dp #24405c;
|
|
border-radius: 3dp;
|
|
margin-bottom: 12dp;
|
|
}
|
|
.stats .cell { flex: 1; padding: 8dp 12dp; border-right: 1dp #24405c; }
|
|
.stats .cell.last { border-right-width: 0; }
|
|
.stats .k
|
|
{
|
|
font-family: "Saira SemiCondensed";
|
|
font-size: 12dp;
|
|
letter-spacing: 1.1dp;
|
|
text-transform: uppercase;
|
|
color: #8197ad;
|
|
}
|
|
.stats .v { font-family: "IBM Plex Mono"; font-size: 16dp; }
|
|
|
|
.cards { display: flex; flex-direction: row; margin-bottom: 12dp; }
|
|
.card
|
|
{
|
|
flex: 1;
|
|
border: 2dp #24405c;
|
|
border-radius: 3dp;
|
|
background-color: #122033;
|
|
padding: 12dp;
|
|
margin-right: 10dp;
|
|
}
|
|
.card.last { margin-right: 0; }
|
|
.card .t
|
|
{
|
|
font-family: "Saira SemiCondensed";
|
|
font-size: 16dp;
|
|
letter-spacing: 1dp;
|
|
text-transform: uppercase;
|
|
}
|
|
.card .p { font-family: "IBM Plex Mono"; color: #f2b13c; margin: 4dp 0; }
|
|
.card .d { font-size: 13dp; color: #8197ad; margin-bottom: 10dp; }
|
|
|
|
.blocked
|
|
{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #8197ad;
|
|
}
|
|
.blocked .t { font-family: "Saira SemiCondensed"; font-size: 22dp; color: #dbe6f0; margin-bottom: 6dp; }
|
|
|
|
/* the running light along an open window's frame (FL's windows have one): four strips the host
|
|
adds to every body.window (rem_ui_host.cpp), each lit in turn -- top left to right, right top
|
|
to bottom, bottom right to left, left bottom to top */
|
|
@keyframes run-top { 0% { left: 0%; opacity: 0; } 2% { opacity: 1; } 23% { opacity: 1; } 25% { left: 76%; opacity: 0; } 100% { left: 76%; opacity: 0; } }
|
|
@keyframes run-right { 0% { top: 0%; opacity: 0; } 25% { top: 0%; opacity: 0; } 27% { opacity: 1; } 48% { opacity: 1; } 50% { top: 76%; opacity: 0; } 100% { top: 76%; opacity: 0; } }
|
|
@keyframes run-bottom { 0% { left: 76%; opacity: 0; } 50% { left: 76%; opacity: 0; } 52% { opacity: 1; } 73% { opacity: 1; } 75% { left: 0%; opacity: 0; } 100% { left: 0%; opacity: 0; } }
|
|
@keyframes run-left { 0% { top: 76%; opacity: 0; } 75% { top: 76%; opacity: 0; } 77% { opacity: 1; } 98% { opacity: 1; } 100% { top: 0%; opacity: 0; } }
|
|
.runner { position: absolute; left: -1dp; top: -1dp; right: -1dp; bottom: -1dp; pointer-events: none; }
|
|
.runner .rt, .runner .rr, .runner .rb, .runner .rl { position: absolute; opacity: 0; }
|
|
.runner .rt { top: 0; height: 3dp; width: 24%; left: 0%; decorator: horizontal-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-top; }
|
|
.runner .rr { right: 0; width: 3dp; height: 24%; top: 0%; decorator: vertical-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-right; }
|
|
.runner .rb { bottom: 0; height: 3dp; width: 24%; left: 76%; decorator: horizontal-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-bottom; }
|
|
.runner .rl { left: 0; width: 3dp; height: 24%; top: 76%; decorator: vertical-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-left; }
|
|
.runner .rt { top: 0; height: 3dp; width: 24%; left: -24%; decorator: horizontal-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-top; }
|
|
.runner .rr { right: 0; width: 3dp; height: 24%; top: -24%; decorator: vertical-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-right; }
|
|
.runner .rb { bottom: 0; height: 3dp; width: 24%; left: 100%; decorator: horizontal-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-bottom; }
|
|
.runner .rl { left: 0; width: 3dp; height: 24%; top: 100%; decorator: vertical-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-left; }
|
|
|
|
/* a hovered bar icon turning (nnbar, rembar) */
|
|
@keyframes nb-spin { from { transform: perspective(240dp) rotateY(0deg) scale(1.12); } to { transform: perspective(240dp) rotateY(360deg) scale(1.12); } }
|