diff --git a/package-lock.json b/package-lock.json index 44700b3f..d9d9d55f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "coriolis-v", + "name": "coriolis", "version": "0.1.0", "lockfileVersion": 1, "requires": true, diff --git a/package.json b/package.json index d9a454fb..1a20b5a4 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "coriolis-v", + "name": "coriolis", "version": "0.1.0", "private": true, "scripts": { diff --git a/public/index.html b/public/index.html index 65b7158d..e558d609 100644 --- a/public/index.html +++ b/public/index.html @@ -16,7 +16,7 @@ -
+
diff --git a/src/App.vue b/src/App.vue index 9373367d..9031ea5f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,5 @@ - - diff --git a/src/fonts/eurostile.eot b/src/fonts/eurostile.eot new file mode 100755 index 00000000..bd7a184b Binary files /dev/null and b/src/fonts/eurostile.eot differ diff --git a/src/fonts/eurostile.svg b/src/fonts/eurostile.svg new file mode 100755 index 00000000..f004762c --- /dev/null +++ b/src/fonts/eurostile.svg @@ -0,0 +1,237 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/fonts/eurostile.ttf b/src/fonts/eurostile.ttf new file mode 100755 index 00000000..9c4cfd58 Binary files /dev/null and b/src/fonts/eurostile.ttf differ diff --git a/src/fonts/eurostile.woff b/src/fonts/eurostile.woff new file mode 100755 index 00000000..1d890316 Binary files /dev/null and b/src/fonts/eurostile.woff differ diff --git a/src/fonts/eurostile.woff2 b/src/fonts/eurostile.woff2 new file mode 100755 index 00000000..264307b0 Binary files /dev/null and b/src/fonts/eurostile.woff2 differ diff --git a/src/images/Empire.svg b/src/images/Empire.svg new file mode 100755 index 00000000..e8fb475e --- /dev/null +++ b/src/images/Empire.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/Federation.svg b/src/images/Federation.svg new file mode 100755 index 00000000..309aba0d --- /dev/null +++ b/src/images/Federation.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/logo/144x144.png b/src/images/logo/144x144.png new file mode 100755 index 00000000..6726730d Binary files /dev/null and b/src/images/logo/144x144.png differ diff --git a/src/images/logo/192x192.png b/src/images/logo/192x192.png new file mode 100755 index 00000000..e0f5140d Binary files /dev/null and b/src/images/logo/192x192.png differ diff --git a/src/images/logo/72x72.png b/src/images/logo/72x72.png new file mode 100755 index 00000000..2451eee2 Binary files /dev/null and b/src/images/logo/72x72.png differ diff --git a/src/images/logo/96x96.png b/src/images/logo/96x96.png new file mode 100755 index 00000000..8550f000 Binary files /dev/null and b/src/images/logo/96x96.png differ diff --git a/src/images/logo/apple-touch-icon-precomposed.png b/src/images/logo/apple-touch-icon-precomposed.png new file mode 100755 index 00000000..28055042 Binary files /dev/null and b/src/images/logo/apple-touch-icon-precomposed.png differ diff --git a/src/images/logo/apple-touch-icon.png b/src/images/logo/apple-touch-icon.png new file mode 100755 index 00000000..944ac92b Binary files /dev/null and b/src/images/logo/apple-touch-icon.png differ diff --git a/src/images/logo/browserconfig.xml b/src/images/logo/browserconfig.xml new file mode 100755 index 00000000..a0f57c99 --- /dev/null +++ b/src/images/logo/browserconfig.xml @@ -0,0 +1,12 @@ + + + + + + + + + #000000 + + + diff --git a/src/images/logo/favicon2.ico b/src/images/logo/favicon2.ico new file mode 100755 index 00000000..76f0ddf6 Binary files /dev/null and b/src/images/logo/favicon2.ico differ diff --git a/src/images/logo/manifest.json b/src/images/logo/manifest.json new file mode 100755 index 00000000..828229e4 --- /dev/null +++ b/src/images/logo/manifest.json @@ -0,0 +1,33 @@ +{ + "name": "Coriolis EDCD Edition", + "short_name": "Coriolis", + "icons": [ + { + "src": "\/72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": "1.5" + }, + { + "src": "\/96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": "2.0" + }, + { + "src": "\/144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": "3.0" + }, + { + "src": "\/192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": "4.0" + } + ], + "start_url": "https:\/\/coriolis.io", + "display": "standalone", + "orientation": "portrait" +} diff --git a/src/images/logo/mstile-144x144.png b/src/images/logo/mstile-144x144.png new file mode 100755 index 00000000..71b4fe62 Binary files /dev/null and b/src/images/logo/mstile-144x144.png differ diff --git a/src/images/logo/mstile-150x150.png b/src/images/logo/mstile-150x150.png new file mode 100755 index 00000000..309891bc Binary files /dev/null and b/src/images/logo/mstile-150x150.png differ diff --git a/src/images/logo/mstile-310x150.png b/src/images/logo/mstile-310x150.png new file mode 100755 index 00000000..b0e7a968 Binary files /dev/null and b/src/images/logo/mstile-310x150.png differ diff --git a/src/images/logo/mstile-310x310.png b/src/images/logo/mstile-310x310.png new file mode 100755 index 00000000..f4c7877c Binary files /dev/null and b/src/images/logo/mstile-310x310.png differ diff --git a/src/images/logo/mstile-70x70.png b/src/images/logo/mstile-70x70.png new file mode 100755 index 00000000..2c7785fc Binary files /dev/null and b/src/images/logo/mstile-70x70.png differ diff --git a/src/images/splash/1024x748.png b/src/images/splash/1024x748.png new file mode 100755 index 00000000..e479015d Binary files /dev/null and b/src/images/splash/1024x748.png differ diff --git a/src/images/splash/1136x640.png b/src/images/splash/1136x640.png new file mode 100755 index 00000000..80b59c6c Binary files /dev/null and b/src/images/splash/1136x640.png differ diff --git a/src/images/splash/1242x2148.png b/src/images/splash/1242x2148.png new file mode 100755 index 00000000..46df3c33 Binary files /dev/null and b/src/images/splash/1242x2148.png differ diff --git a/src/images/splash/1280x720.png b/src/images/splash/1280x720.png new file mode 100755 index 00000000..e0ba2251 Binary files /dev/null and b/src/images/splash/1280x720.png differ diff --git a/src/images/splash/1334x750.png b/src/images/splash/1334x750.png new file mode 100755 index 00000000..5919db46 Binary files /dev/null and b/src/images/splash/1334x750.png differ diff --git a/src/images/splash/1536x2008.png b/src/images/splash/1536x2008.png new file mode 100755 index 00000000..cd7556dc Binary files /dev/null and b/src/images/splash/1536x2008.png differ diff --git a/src/images/splash/200x320.png b/src/images/splash/200x320.png new file mode 100755 index 00000000..8bac766a Binary files /dev/null and b/src/images/splash/200x320.png differ diff --git a/src/images/splash/2048x1496.png b/src/images/splash/2048x1496.png new file mode 100755 index 00000000..98b9f24a Binary files /dev/null and b/src/images/splash/2048x1496.png differ diff --git a/src/images/splash/2208x1242.png b/src/images/splash/2208x1242.png new file mode 100755 index 00000000..cca68907 Binary files /dev/null and b/src/images/splash/2208x1242.png differ diff --git a/src/images/splash/320x200.png b/src/images/splash/320x200.png new file mode 100755 index 00000000..3ea1eff9 Binary files /dev/null and b/src/images/splash/320x200.png differ diff --git a/src/images/splash/320x460.png b/src/images/splash/320x460.png new file mode 100755 index 00000000..c67f79e1 Binary files /dev/null and b/src/images/splash/320x460.png differ diff --git a/src/images/splash/320x480.png b/src/images/splash/320x480.png new file mode 100755 index 00000000..6758145e Binary files /dev/null and b/src/images/splash/320x480.png differ diff --git a/src/images/splash/480x320.png b/src/images/splash/480x320.png new file mode 100755 index 00000000..2a9b8b29 Binary files /dev/null and b/src/images/splash/480x320.png differ diff --git a/src/images/splash/480x800.png b/src/images/splash/480x800.png new file mode 100755 index 00000000..66fafcf2 Binary files /dev/null and b/src/images/splash/480x800.png differ diff --git a/src/images/splash/640x1096.png b/src/images/splash/640x1096.png new file mode 100755 index 00000000..c10934f0 Binary files /dev/null and b/src/images/splash/640x1096.png differ diff --git a/src/images/splash/640x920.png b/src/images/splash/640x920.png new file mode 100755 index 00000000..aa7cf83e Binary files /dev/null and b/src/images/splash/640x920.png differ diff --git a/src/images/splash/720x1280.png b/src/images/splash/720x1280.png new file mode 100755 index 00000000..cc441637 Binary files /dev/null and b/src/images/splash/720x1280.png differ diff --git a/src/images/splash/750x1294.png b/src/images/splash/750x1294.png new file mode 100755 index 00000000..cd118c44 Binary files /dev/null and b/src/images/splash/750x1294.png differ diff --git a/src/images/splash/768x1004.png b/src/images/splash/768x1004.png new file mode 100755 index 00000000..38732c22 Binary files /dev/null and b/src/images/splash/768x1004.png differ diff --git a/src/images/splash/800x480.png b/src/images/splash/800x480.png new file mode 100755 index 00000000..c7dbb73a Binary files /dev/null and b/src/images/splash/800x480.png differ diff --git a/src/images/splash/960x640.png b/src/images/splash/960x640.png new file mode 100755 index 00000000..dae8a61a Binary files /dev/null and b/src/images/splash/960x640.png differ diff --git a/src/images/surface_port_pm.svg b/src/images/surface_port_pm.svg new file mode 100755 index 00000000..5d8b722d --- /dev/null +++ b/src/images/surface_port_pm.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/less/app.less b/src/less/app.less new file mode 100755 index 00000000..69c72d71 --- /dev/null +++ b/src/less/app.less @@ -0,0 +1,173 @@ +@import 'colors'; +@import 'fonts'; +@import 'responsive'; +@import 'utilities'; +@import 'icons'; +@import 'header'; +@import 'shipyard'; +@import 'list'; +@import 'slot'; +@import 'outfit'; +@import 'comparison'; +@import 'table'; +@import 'select'; +@import 'modal'; +@import 'charts'; +@import 'tooltip'; +@import 'buttons'; +@import 'error'; +@import 'sortable'; +@import 'loader'; +@import 'pips'; +@import 'boost'; +@import 'movement'; +@import 'shippicker'; +@import 'defence'; +@import 'offence'; + +html, body { + height: 100%; + width: 100%; + text-rendering: optimizeLegibility; + overflow: hidden; +} + +body { + color: @fg; + margin: 0; + padding: 0; + font-family: @fStandard; + letter-spacing: 0.05em; +} + +div, a, li { + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +#coriolis { + width: 100%; + height: 100%; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + box-sizing: border-box; +} + +.page { + margin: 0; + padding: 0.5em; + width: 100%; + min-height: 100%; + clear: both; + text-align: center; + box-sizing: border-box; + + .largePhone({ + padding: 0.5em 0.25em; + }); +} + +.l { + float: left; +} + +.r { + float: right; +} + +.cl { + clear: left; +} + +.cr { + clear: right; +} + +.cb { + clear: both; +} + +.ri { + text-align: right; +} + +.le { + text-align: left; +} + +.cen { + text-align: center; +} + +.cap { + text-transform: capitalize; +} + +.upp { + text-transform: uppercase; +} + +.scroll-x { + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +.ptr { + cursor: pointer; +} + +h1 { + font-family: @fTitle; + color: @primary; + font-size: 1.6em; + letter-spacing: 0.1em; +} + +h2 { + text-transform: uppercase; + font-family: @fStandard; + font-size: 1.2em; + font-weight: normal; +} + +h3 { + text-transform: uppercase; + font-family: @fStandard; + font-weight: normal; + font-size: 1em; + margin: 0.2em 0; + color: @primary; +} + +u { // Unit (Mj, Km, etc) + font-size: 0.8em; + text-decoration: none; + text-transform: none; +} + +a, a:visited { + color: @fg; +} + +p { + text-align: justify; +} + +input { + background: @primary-bg; + border: 1px solid @primary-disabled; + color: @primary-disabled; + outline: none; +} + +footer { + clear: both; + font-size: 0.6em; + color: #999; + padding: 1em; + overflow: hidden; + + .right { + float: right; + text-align: right; + } +} diff --git a/src/less/boost.less b/src/less/boost.less new file mode 100755 index 00000000..75db11be --- /dev/null +++ b/src/less/boost.less @@ -0,0 +1,14 @@ +#boost { + button { + font-size: 1.2em; + background: @primary-bg; + color: @primary; + border: 1px solid @primary; + &.selected { + // Shown when button is selected + background: @primary; + color: @primary-bg; + } + } +} + diff --git a/src/less/buttons.less b/src/less/buttons.less new file mode 100755 index 00000000..9a52a550 --- /dev/null +++ b/src/less/buttons.less @@ -0,0 +1,84 @@ +button { + .border-radius(0); + color: @primary; + svg { + fill: @primary; + } + border: none; + text-transform: capitalize; + font-family: @fStandard; + font-size: 0.75em; + vertical-align: middle; + padding: 0.5em; + cursor: pointer; + background: none; + outline: none; + + &.danger { + color: red; + svg { + fill: red; + } + + } + + &:disabled { + cursor: not-allowed; + color: @disabled; + svg { + fill: @disabled; + } + } +} + +.button-inline-menu { + white-space: nowrap; + line-height: 1.5em; + text-align: center; + margin: 0.5em 0; + padding-left: 5px; + border-top: 1px solid @primary-disabled; + border-bottom: 1px solid @primary-disabled; + overflow: hidden; + text-overflow: ellipsis; + background: @primary-bg; + + &.warning { + border-color: @warning-disabled; + color: @warning-disabled; + stroke: @warning-disabled; + + .no-touch &:hover { + border-color: @warning; + color: @warning; + stroke: @warning; + } + } + + &.disabled, &.disabled:hover { + cursor: not-allowed; + border-color: @disabled; + color: @disabled; + stroke: @disabled; + } + + &.active { + border-color: @secondary; + color: @secondary; + stroke: @secondary; + } + + &:hover { + border-color: @primary; + color: @primary; + stroke: @primary; + } + } + +.button-lbl { + margin-left: 0.5em; + + .smallTablet({ + display: none; + }); +} diff --git a/src/less/charts.less b/src/less/charts.less new file mode 100755 index 00000000..22006184 --- /dev/null +++ b/src/less/charts.less @@ -0,0 +1,75 @@ +.chart { + .user-select-none(); + display: inline-block; + margin: 0; + cursor: default; + overflow: hidden; + width: 33%; + box-sizing: border-box; + + .tablet({ + width: 50%; + }); + + .largePhone({ + width: 100%; + }); + + h3 { + text-align: center; + + &[ng-click] { + cursor: pointer; + } + + } +} + +svg { + + .axis { + + line, path { + fill: none; + stroke: @primary-disabled; + } + + text { + font-size: 1.2em; + font-family: @fStandard; + fill: @primary-disabled; + } + + } + + .label, .text-tip { + text-transform: capitalize; + } + + .x { + fill: @fg; + } + + .metric { + text-transform: none; + } + + .marker { + fill: @secondary; + } + + .label { + font-size: 1.1em; + } + + .text-tip { + font-size: 0.8em + } + + .tooltip { + fill: @bgBlack; + stroke: @secondary; + stroke-width: 1px; + font-size: 0.8em + } +} diff --git a/src/less/colors.less b/src/less/colors.less new file mode 100755 index 00000000..42c88579 --- /dev/null +++ b/src/less/colors.less @@ -0,0 +1,90 @@ +// Constants for calculations +@bgDarken: 40%; +@disabledDarken: 15%; +@bgTransparency: 10%; + +// Foreground colors +@fg: #CCC; +@muted: #999; +@primary: #FF8C0D; // Light Orange +@secondary: #1FB0FF; // Light blue +@warning: #FF3B00; // Dark Orange +@disabled: #555; // Light grey +@success: #71a052; // Green +@purple: #800080; // Purple +@primary-disabled: darken(@primary, @disabledDarken); +@secondary-disabled: darken(@secondary, @disabledDarken); +@warning-disabled: darken(@warning, @disabledDarken); + +// Background colors +@bg: rgba(30,30,30,1); +@bgBlack: #000; +@primary-bg: fadeout(darken(@primary, 47%), 15%); +@alt-primary-bg: fadeout(darken(@primary, 42%), 15%); // Lighter brown background +@secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Brown background +@warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red + + +.fg { + color: @fg; + stroke: @fg; + fill: @fg; +} + +.muted { + color: @muted; + stroke: @muted; + fill: @muted; +} + +.disabled { + color: @disabled; + stroke: @disabled; + fill: @disabled; +} + +.primary { + color: @primary; + stroke: @primary; + fill: @primary; +} + +.primary-bg { + color: @primary-bg; + stroke: @primary-bg; + fill: @primary-bg; +} + +.primary-disabled { + color: @primary-disabled; + stroke: @primary-disabled; + fill: @primary-disabled; +} + +.secondary { + color: @secondary; + stroke: @secondary; + fill: @secondary; +} + +.secondary-disabled { + color: @secondary-disabled; + stroke: @secondary-disabled; + fill: @secondary-disabled; +} + +.warning { + color: @warning; + stroke: @warning; + fill: @warning; +} + +.warning-disabled { + color: @warning-disabled; + stroke: @warning-disabled; + fill: @warning-disabled; +} + +.bg-warning-disabled { + background-color: @warning-disabled; +} diff --git a/src/less/comparison.less b/src/less/comparison.less new file mode 100755 index 00000000..35384d35 --- /dev/null +++ b/src/less/comparison.less @@ -0,0 +1,165 @@ + +#comparison { + display: inline-block; + text-align: left; + border-collapse: collapse; + text-transform: uppercase; + font-size: 0.8em; + + td { + border: 1px solid @primary-disabled; + padding: 0; + + h3 { + font-size: 1.1em; + margin: 0 1em; + line-height: 2em; + display: inline-block; + } + + .tablet({ + font-size: 0.9em; + }); + } + + input { + background: none; + line-height: 1.3em; + width: 20em; + height: 100%; + display: inline-block; + padding: 0.3em; + font-size: 1em; + vertical-align: middle; + border: none; + border-right: 1px solid @primary-disabled; + + .largePhone({ + width: 100%; + height: 2em; + border-right: none; + border-bottom: 1px solid @primary-disabled; + }); + } + + .head { + background-color: @primary-disabled; + color: @primary-bg; + padding: 0 0.5em; + text-align: right; + } +} + +#facet-container { + display: block; + .user-select-none(); + cursor: default; + white-space: nowrap; + overflow: hidden; + margin: 0; + padding: 0 1px; + + .as-sortable-placeholder { + background-color: @primary-bg; + } + .as-sortable-dragging { + cursor: ew-resize; + } +} + +.facet-placeholder { + display: inline-block; + background-color: @primary-bg; +} + +.facet { + cursor: pointer; + display: inline-block; + background-color: @primary-bg; + margin: 0; + padding: 0 0.5em; + line-height: 2.5em; + list-style: none; + white-space: nowrap; + color: @disabled; + + &.active { + color: @warning; + svg { + fill: @warning; + } + background-color: @warning-bg; + } +} + +#build-select { + clear: both; + margin: 1em 0 0; + overflow-y:auto; + text-align: center; + + h1 { + display: inline-block; + margin: 0 0.7em; + vertical-align: top; + } + + .build-section { + box-sizing: border-box; + display: inline-block; + width: 45%; + + .smallTablet({ + width: 100%; + }); + + h1 { + box-sizing: border-box; + margin: 0; + width: 100%; + font-size: 1em; + color: #000; + padding: 2px 0.4em 0; + background-color: #c06400; + text-transform: uppercase; + line-height: 1.3em; + font-weight: normal; + } + + div { + display: block; + font-size: 0.8em; + width: 100%; + overflow-y: auto; + z-index: 0; + -webkit-overflow-scrolling: touch; + height: 8em; + max-height: 8em; + } + + table { + width: 100%; + } + + td { + cursor: pointer; + vertical-align: top; + border-bottom: 1px solid @primary-disabled; + } + } + +} + +#comp-tbl { + margin: 1em auto; + white-space: nowrap; + font-size: 0.8em; + + td { + padding: 0 0.5em; + } + + .tablet({ + font-size: 0.7em; + }); +} diff --git a/src/less/defence.less b/src/less/defence.less new file mode 100755 index 00000000..2c5c730e --- /dev/null +++ b/src/less/defence.less @@ -0,0 +1,14 @@ +#defence { + table { + background-color: @bgBlack; + color: @primary; + margin: 0 auto; + } + + .icon { + stroke: @primary; + stroke-width: 20; + fill: transparent; + } +} + diff --git a/src/less/error.less b/src/less/error.less new file mode 100755 index 00000000..82b1b9a1 --- /dev/null +++ b/src/less/error.less @@ -0,0 +1,16 @@ + +.error { + width: 50%; + margin: 10% auto; + text-align: center; + + small { + color: @primary-disabled; + } +} + +pre { + white-space: pre-wrap; + white-space: -moz-pre-wrap; + white-space: -o-pre-wrap; +} \ No newline at end of file diff --git a/src/less/fonts.less b/src/less/fonts.less new file mode 100755 index 00000000..be93f188 --- /dev/null +++ b/src/less/fonts.less @@ -0,0 +1,15 @@ + +@font-face { + font-family: 'Eurostile'; + src: url('../fonts/eurostile.eot'); + src: url('../fonts/eurostile.eot?#iefix') format('embedded-opentype'), + url('../fonts/eurostile.woff2') format('woff2'), + url('../fonts/eurostile.woff') format('woff'), + url('../fonts/eurostile.ttf') format('truetype'), + url('../fonts/eurostile.svg#euro_capsregular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@fStandard: 'Eurostile', Helvetica, sans-serif; +@fTitle: 'Eurostile', Arial, sans-serif; diff --git a/src/less/header.less b/src/less/header.less new file mode 100755 index 00000000..3004d8a2 --- /dev/null +++ b/src/less/header.less @@ -0,0 +1,219 @@ +#app-update { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 3em; + z-index: 3; + line-height: 3em; + text-align: center; + background-color: @bg; + color: @warning; + cursor: pointer; +} + +.view-changes { + position: fixed; + top: 3em; + left: 0; + right: 0; + height: 3em; + z-index: 3; + line-height: 3em; + text-align: center; + background-color: @bg; + color: @warning; + cursor: pointer; +} + +header { + background-color: @bg; + margin: 0; + padding: 0 0 0 1em; + height: 3em; + line-height: 3em; + font-family: @fTitle; + vertical-align: middle; + position: relative; + z-index: 2; + box-sizing: border-box; + .user-select-none(); + + .menu { + position: relative; + z-index: 1; + cursor: default; + + &.r { + .menu-list { + right: 0; + } + } + + .smallTablet({ + position: static; + position: initial; + }); + } + + .menu-header { + height: 100%; + z-index: 2; + padding : 0 1em; + cursor: pointer; + color: @warning; + text-transform: uppercase; + // Less than 600px screen width: hide text + + &.disabled { + color: @warning-disabled; + cursor: default; + } + + &.selected { + background-color: @bgBlack; + } + + .menu-item-label { + margin-left: 1em; + display: inline-block; + + .smallTablet({ + display: none; + }); + } + } + + .menu-list { + font-family: @fStandard; + position: absolute; + padding: 0.5em 1em; + box-sizing: border-box; + min-width: 100%; + overflow-x: hidden; + background-color: @bgBlack; + font-size: 0.9em; + overflow-y: auto; + z-index: 0; + -webkit-overflow-scrolling: touch; + max-height: 500px; + + &::-webkit-scrollbar { + width: 0.5em; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: @warning-disabled; + } + + input { + border: none; + background-color: transparent; + text-align: right; + font-size: 1em; + font-family: @fStandard; + } + + .smallTablet({ + max-height: 400px; + left: 0; + right: 0; + border-bottom: 1px solid @bg; + }); + + + .tablet({ + li, a { + padding: 0.3em 0; + } + }); + } + + .dbl { + -webkit-column-count: 2; /* Chrome, Safari, Opera */ + -moz-column-count: 2; /* Firefox */ + column-count: 2; + ul { + min-width: 10em; + } + + .smallTablet({ + -webkit-column-count: 3; /* Chrome, Safari, Opera */ + -moz-column-count: 3; /* Firefox */ + column-count: 3; + + ul { + min-width: 20em; + } + }); + + .largePhone({ + -webkit-column-count: 2; /* Chrome, Safari, Opera */ + -moz-column-count: 2; /* Firefox */ + column-count: 2; + }); + + .smallPhone({ + -webkit-column-count: 1; /* Chrome, Safari, Opera */ + -moz-column-count: 1; /* Firefox */ + column-count: 1; + }); + } + + ul { + display: inline-block; + white-space: nowrap; + margin: 0 0 0.5em; + padding: 0; + line-height: 1.3em; + } + + li { + white-space: normal; + list-style: none; + margin-left: 1em; + line-height: 1.1em; + } + + a { + vertical-align: middle; + color: @warning; + text-decoration: none; + + &:visited { + color: @warning; + } + .no-touch &:hover { + color: teal; + } + &.active { + color: @primary; + } + } + + hr { + border: none; + border-top: 1px solid @disabled; + } + + .no-wrap { + overflow-x: auto; + white-space: nowrap; + } + + .block { + display: block; + line-height: 1.5em; + } + + .title { + font-size: 1.3em; + display: inline-block; + margin:0px; + text-transform: uppercase; + } +} diff --git a/src/less/icons.less b/src/less/icons.less new file mode 100755 index 00000000..0d3cfcd3 --- /dev/null +++ b/src/less/icons.less @@ -0,0 +1,68 @@ + +// Standard icons +.icon { + display: inline-block; + vertical-align: middle; + width: 1.1em; + height: 1em; + + &.sm { + width: 0.8em; + height: 0.75em; + } + + &.tn { + width: 0.6em; + height: 0.5em; + } + + &.lg { + width: 1.6em; + height: 1.5em; + } + + &.xl { + width: 2.1em; + height: 2em; + } +} + +// Modifiction icons - hard-code fill +.modicon { + display: inline-block; + vertical-align: middle; + width: 1.1em; + height: 1em; + stroke-width: 20; + fill: transparent; + + + &.sm { + width: 0.8em; + height: 0.75em; + } + + &.tn { + width: 0.6em; + height: 0.5em; + } + + &.lg { + width: 1.6em; + height: 1.5em; + } + + &.xl { + width: 2.1em; + height: 2em; + } +} + +.summary { + stroke: @fg; + fill: @fg; + + svg { + stroke-width: 10; + } +} diff --git a/src/less/list.less b/src/less/list.less new file mode 100755 index 00000000..66a965f4 --- /dev/null +++ b/src/less/list.less @@ -0,0 +1,37 @@ + +.items { + margin-bottom: 10px; + clear: both; + overflow: hidden; + + .item { + clear: both; + margin: 1px 0 0; + overflow: hidden; + + .val { + float:right; + text-align: right; + } + + .lbl { + float: left; + } + color: @disabled; + cursor: pointer; + + &.enabled { + color: @fg; + } + + &.consumer { + .val:before { + content: "-"; + } + } + + &.untoggleable { + cursor: default; + } + } +} diff --git a/src/less/loader.less b/src/less/loader.less new file mode 100755 index 00000000..9975822b --- /dev/null +++ b/src/less/loader.less @@ -0,0 +1,38 @@ +@keyframes outer { + 0% { opacity: 0.3; } + 20% { opacity: 1; } + 100% { opacity: 0.3; } +} + +@keyframes inner { + 0% { opacity: 0.4; } + 20% { opacity: 1; } + 100% { opacity: 0.4; } +} + +@animationTime: 750ms; +@outerTriangles: 19; +@animationDelay: @animationTime / @outerTriangles; + +.loader { + + path { + stroke: #000; + stroke-width: 0; + opacity: 0; + } +} + +.l1 { animation: outer @animationTime linear infinite; } +.l2 { animation: inner @animationTime linear infinite; } + +.mixin-loop (@i) when (@i > 0) { + .d@{i} { + opacity: @i / @outerTriangles; + animation-delay: @i * @animationDelay; + } + .mixin-loop(@i - 1); +} + +.mixin-loop(@outerTriangles); + diff --git a/src/less/modal.less b/src/less/modal.less new file mode 100755 index 00000000..cd6daa5e --- /dev/null +++ b/src/less/modal.less @@ -0,0 +1,64 @@ + + +.modal-bg { + z-index: 2; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(0,0,0,0.5); + .user-select-none(); +} + +.modal { + position: absolute; + left:50%; top:50%; + transform:translate(-50%,-50%); + -webkit-transform:translate(-50%,-50%); + width: 800px; + max-height: 90%; + padding: 2em; + background-color: @bgBlack; + box-sizing: border-box; + border: 1px solid @primary; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + + .smallTablet({ + width: 90%; + }); + + .largePhone({ + padding: 1em; + width: 100%; + }); + + h1 { + margin: 0.2em 0; + } + + h2 { + margin: 0; + } +} + +textarea { + background: @primary-bg; + border: none; + outline: none; + color: @primary-disabled; + + &.json { + display:block; + width:100%; + min-height: 10em; + resize: vertical; + user-select: auto; + margin:2em 0; + } +} + +.dismiss { + background-color: @primary-bg; +} diff --git a/src/less/movement.less b/src/less/movement.less new file mode 100755 index 00000000..796468f5 --- /dev/null +++ b/src/less/movement.less @@ -0,0 +1,14 @@ + +#movement { + svg { + width: 75%; + height: 75%; + stroke: @primary-disabled; + fill: @primary-disabled; + + text { + stroke: @primary; + font-size: 2em; + } + } +} diff --git a/src/less/offence.less b/src/less/offence.less new file mode 100755 index 00000000..39679f27 --- /dev/null +++ b/src/less/offence.less @@ -0,0 +1,14 @@ +#offence { + table { + background-color: @bgBlack; + color: @fg; + margin: 0 auto; + } + + .icon { + stroke: @fg; + stroke-width: 20; + fill: transparent; + } +} + diff --git a/src/less/outfit.less b/src/less/outfit.less new file mode 100755 index 00000000..0ec6db88 --- /dev/null +++ b/src/less/outfit.less @@ -0,0 +1,384 @@ + +#outfit { + max-width: 1600px; + margin: 0 auto; + .user-select-none(); + font-size: 0.9em; + + .tablet({ + font-size: 0.8em; + width: 100%; + }); + + .smallTablet({ + font-size: 1em; + }); + + table { + white-space: nowrap; + } +} + +#overview { + h1 { + margin: 0 1em 0.2em 0; + float: left; + } + overflow: hidden; + margin: 0.5em; +} + +#requirements { + margin: 0; + float: left; + text-align: left; + + div { + display: inline-block; + margin: 0 1em 0.5em 0; + height: 1.6em; + line-height: 1.6em; + text-align: left; + vertical-align: middle; + cursor: default; + background-repeat: no-repeat; + background-position: left center; + background-size: contain; + } + + .federation { + background-image: url('../images/Federation.svg'); + padding-left: 1.985em + 0.5em; + } + + .empire { + background-image: url('../images/Empire.svg'); + padding-left: 2.750em + 0.5em; + } + + .horizons { + background-image: url('../images/surface_port_pm.svg'); + padding-left: 1.415em + 0.5em; + } +} + +#summary { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + width: 100%; + padding: 0.5em 0.2em; + font-size: 0.9em; + + .summaryTable { + .user-select-none(); + width: 100%; + border-collapse: collapse; + + & > thead.blue { + background-color: @secondary; + border-left: 1px solid @primary-bg; + color: @primary-bg; + } + + & > thead.green { + background-color: @success; + border-left: 1px solid @primary-bg; + color: @primary-bg; + } + + & > thead.purple { + background-color: @purple; + border-left: 1px solid @primary-bg; + color: @primary-bg; + } + + & thead th.bordered { + border-left: 1px solid @primary-bg; + } + } +} + +.flip { + display: inline-block; + -moz-transform: scaleX(-1); /* Gecko */ + -o-transform: scaleX(-1); /* Operah */ + -webkit-transform: scaleX(-1); /* webkit */ + transform: scaleX(-1); /* standard */ +} + +.section-menu { + position: relative; + z-index: 0; + + &.selected { + z-index: 1; + h1 { + background-color: @primary; + } + } + + h1 { + cursor: pointer; + + .icon { + float: right; + margin: 0.1em 0.3em 0 0; + } + } + + .select { + box-sizing: border-box; + left: 0; + } +} + +#build { + float: right; + line-height: 2em; + text-align: left; + + input { + background: none; + line-height: 1.3em; + width: 15em; + font-size: 0.9em; + box-sizing: border-box; + display: inline-block; + padding: 0.3em; + vertical-align: middle; + + &:focus { + border: 1px solid @primary; + color: @primary; + } + + .smallTablet({ + width: 60%; + }); + + .largePhone({ + width: 100%; + }); + + } + + .smallTablet({ + float: left; + clear: left; + width: 100%; + }); +} + +.shorten { + overflow: hidden; + max-width: 8em; + text-overflow: ellipsis; +} + +.optional-hide { + .largePhone({ + display: none; + }); +} + +.tabs { + width: 100%; + box-sizing: border-box; + margin-bottom: 1px; + + &, th { + cursor: pointer; + border-collapse: collapse; + color: @primary-disabled; + background-color: @primary-bg; + border: 1px solid @primary-disabled; + padding-top: 1px; + } + + .active { + color: @primary-bg; + background-color: @primary-disabled; + } + +} + +.group { + width: 25%; + padding: 0.5em 0.2em; + vertical-align: top; + box-sizing: border-box; + display: inline-block; + .user-select-none(); + cursor: default; + + h1 { + font-family: @fStandard; + color: @bgBlack; + background-color: @primary-disabled; + text-transform: uppercase; + margin: 0; + padding-top: 2px; + font-size: 1em; + line-height: 1.3em; + font-weight: normal; + } + + .smallTablet({ + width: 50%; + }); + + .largePhone({ + width: 100%; + }); + + &.half { + width: 50%; + + .tablet({ + td { + line-height: 2em; + } + }); + + .smallTablet({ + width: 100% !important; + }); + } + + &.quarter { + width: 25%; + + .tablet({ + td { + line-height: 2em; + } + }); + + .smallTablet({ + width: 50% !important; + }); + } + + &.third { + width: 33%; + + .smallTablet({ + width: 50% !important; + }); + } + + &.twothirds { + width: 67%; + + .smallTablet({ + width: 100% !important; + }); + } + + &.threequarters { + width: 75%; + + .smallTablet({ + width: 100% !important; + }); + } + + &.full { + width: 100%; + + .smallTablet({ + width: 100% !important; + }); + } + + .smallScreen({ + .axis.x { + g.tick:nth-child(2n + 1) text { + display: none; + } + } + }); +} + +.power-band { + text, rect { + cursor: pointer; + } + + rect { + stroke-width: 1px; + stroke: #000; + } + +} + +.threshold { + stroke: @secondary-disabled !important; + fill: @secondary-disabled !important; + + &.exceeded { + stroke: @warning !important; + fill: @warning !important; + } +} + +#componentPriority { + .tablet({ + text.primary, text.warning, text.primary-bg, text.secondary { + font-size: 0.8em; + } + + span.btn { + vertical-align: middle; + font-size: 1.6em; + } + }); + + .medPhone({ + .axis { + font-size: 0.8em; + + g.tick:nth-child(2n) text { + display: none; + } + } + + table thead tr.main th { + font-size: 0.8em; + + &:nth-child(2) { + display: none; + } + } + + table tbody tr td { + &:nth-child(1) { + padding: 0; + margin: 0; + max-width: 0 !important; + width: 0 !important; + color: transparent; + } + &:nth-child(3) { + display: none; + } + } + }); + + .smallPhone({ + table tbody tr td { + padding: 0; + + &:nth-child(6) { + padding: 0; + margin: 0; + max-width: 0 !important; + width: 0 !important; + color: transparent; + + u { display: none; } + } + } + }); +} diff --git a/src/less/pips.less b/src/less/pips.less new file mode 100755 index 00000000..1e7b5ace --- /dev/null +++ b/src/less/pips.less @@ -0,0 +1,39 @@ +// The pips table - keep the background black +#pips { + + table { + background-color: @bgBlack; + color: @primary; + margin: 0 auto; + } + + // A clickable entity in the pips table + .clickable { + cursor: pointer; + } + + // A multi-crew pip + .mc { + stroke: @secondary; + fill: @secondary; + } + + // A full pip + .full { + stroke: @primary; + fill: @primary; + } + + // A half pip + .half { + stroke: @primary-disabled; + fill: @primary-disabled; + } + + // An empty pip + .empty { + stroke: @primary-bg; + fill: @primary-bg; + } +} + diff --git a/src/less/responsive.less b/src/less/responsive.less new file mode 100755 index 00000000..3f9e3490 --- /dev/null +++ b/src/less/responsive.less @@ -0,0 +1,40 @@ +// Screens less than 1024 wide +// More will be added over time to support mobile devices better +// These are designed to trickle down. So tablet styles will apply to tablet and smaller, etc +// To overwrite, put the smallest devices at the bottom + +.smallPhone(@rules) { + @media only screen and (max-width: 400px) { + @rules(); + } +} + +.medPhone(@rules) { + @media only screen and /*(min-width: 351px) and */ (max-width: 550px) { + @rules(); + } +} + +.largePhone(@rules) { + @media only screen and /*(min-width: 551px) and */ (max-width: 640px) { + @rules(); + } +} + +.smallTablet(@rules) { + @media only screen and /*(min-width: 641px) and */(max-width: 1000px) { + @rules(); + } +} + +.tablet(@rules) { + @media only screen and /*(min-width: 601px) and */(max-width: 1024px) { + @rules(); + } +} + +.smallScreen(@rules) { + @media only screen and /*(min-width: 601px) and */(max-width: 1400px) { + @rules(); + } +} diff --git a/src/less/select.less b/src/less/select.less new file mode 100755 index 00000000..012baa18 --- /dev/null +++ b/src/less/select.less @@ -0,0 +1,171 @@ +select { + .border-radius(0); + cursor: pointer; + background: none; + color: @primary-disabled; + font-family: @fStandard; + font-size: 1em; + background-color: transparent; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0 0.5em; + outline:none; + border: 0; + + &:focus { + outline:none; + } + + &::-moz-focus-inner { + border: 0; + } +} + +.cmdr-select { + border: 1px solid @primary; + padding: 0.5em 0.5em; +} + +.select { + color: @primary-disabled; + position: absolute; + left: -1px; + padding: 0.5em 0; + width: 100%; + margin: 0; + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; + z-index: 0; + -webkit-overflow-scrolling: touch; + background-color: @bg; + border: 1px solid @primary; + text-align: center; + + .tablet({ + max-height: 300px; + }); + + &::-webkit-scrollbar { + width: 0.5em; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + border-left: 1px solid @primary; + } + + &::-webkit-scrollbar-thumb { + background-color: @primary-disabled; + } + + .select-category { + white-space: nowrap; + line-height: 2em; + font-size: 1.2em; + text-align: center; + margin: 0.5em 0; + padding-left: 5px; + border-top: 3px solid @primary-disabled; + border-bottom: 3px solid @primary-disabled; + overflow: hidden; + text-overflow: ellipsis; + } + + .select-group { + white-space: nowrap; + line-height: 1.5em; + text-align: center; + margin: 0.5em 0; + padding-left: 5px; + border-top: 1px solid @primary-disabled; + border-bottom: 1px solid @primary-disabled; + overflow: hidden; + text-overflow: ellipsis; + } + + @optionSpacing: 2em; + + .empty-c, .c, .lc { + white-space: nowrap; + text-align: center; + cursor: pointer; + line-height:@optionSpacing; + color: @primary-disabled; + stroke: @primary-disabled; + + .no-touch &:hover { + border-color: @primary; + color: @primary; + stroke: @primary; + } + + svg { + stroke-width: 0.5em; + } + } + + .lc, .c { + border:1px solid @primary-disabled; + padding: 0.1em 0.25em; + margin: 0.3em; + + &.warning { + border-color: @warning-disabled; + color: @warning-disabled; + stroke: @warning-disabled; + + .no-touch &:hover { + border-color: @warning; + color: @warning; + stroke: @warning; + } + } + + &.disabled, &.disabled:hover { + cursor: not-allowed; + border-color: @disabled; + color: @disabled; + stroke: @disabled; + } + &.active { + border-color: @secondary; + color: @secondary; + stroke: @secondary; + } + } + + .lc { + overflow: hidden; + text-overflow: ellipsis; + text-transform: capitalize; + } + + .c { + display: inline-block; + width: 2em; + } + + span { + vertical-align: middle; + } + + ul { + display: inline-block; + text-align: left; + min-width: 16em; + max-width: 100%; + margin: 0 auto; + padding: 0; + list-style: none; + } + + &.hardpoint { + .c { + width: 4.5em; + padding: 0.1em 0.2em; + } + } + +} diff --git a/src/less/shippicker.less b/src/less/shippicker.less new file mode 100755 index 00000000..bd5c4c17 --- /dev/null +++ b/src/less/shippicker.less @@ -0,0 +1,176 @@ +.shippicker { + background-color: @bgBlack; + margin: 0; + height: 3em; + font-family: @fTitle; + vertical-align: middle; + position: relative; + display: block; + + .user-select-none(); + + .menu { + position: relative; + cursor: default; + + &.r { + .menu-list { + right: 0; + } + } + + .smallTablet({ + position: static; + position: initial; + }); + } + + .menu-header { + height: 100%; + z-index: 2; + padding : 0 1em; + cursor: pointer; + color: @warning; + text-transform: uppercase; + + &.disabled { + color: @warning-disabled; + cursor: default; + } + + &.selected { + background-color: @bgBlack; + } + + .menu-item-label { + margin-left: 1em; + + .smallTablet({ + display: none; + }); + } + } + + .menu-list { + font-family: @fStandard; + position: absolute; + padding: 0.5em 1em; + box-sizing: border-box; + min-width: 100%; + overflow-x: hidden; + background-color: @bgBlack; + font-size: 0.9em; + overflow-y: auto; + z-index: 1; + -webkit-overflow-scrolling: touch; + max-height: 500px; + + &::-webkit-scrollbar { + width: 0.5em; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: @warning-disabled; + } + + input { + border: none; + background-color: transparent; + text-align: right; + font-size: 1em; + font-family: @fStandard; + } + + .smallTablet({ + max-height: 400px; + left: 0; + right: 0; + border-bottom: 1px solid @bg; + }); + + .tablet({ + li, a { + padding: 0.3em 0; + } + }); + } + + .quad { + -webkit-column-count: 4; /* Chrome, Safari, Opera */ + -moz-column-count: 4; /* Firefox */ + column-count: 4; + ul { + min-width: 10em; + } + + .smallTablet({ + -webkit-column-count: 3; /* Chrome, Safari, Opera */ + -moz-column-count: 3; /* Firefox */ + column-count: 3; + + ul { + min-width: 20em; + } + }); + + .largePhone({ + -webkit-column-count: 2; /* Chrome, Safari, Opera */ + -moz-column-count: 2; /* Firefox */ + column-count: 2; + }); + + .smallPhone({ + -webkit-column-count: 1; /* Chrome, Safari, Opera */ + -moz-column-count: 1; /* Firefox */ + column-count: 1; + }); + } + + ul { + display: inline-block; + white-space: nowrap; + margin: 0 0 0.5em; + padding: 0; + line-height: 1.3em; + color: @fg; + } + + li { + white-space: normal; + list-style: none; + margin-left: 1em; + line-height: 1.1em; + color: @warning; + cursor: pointer; + + &.selected { + color: @primary; + } + } + + hr { + border: none; + border-top: 1px solid @disabled; + } + + .no-wrap { + overflow-x: auto; + white-space: nowrap; + } + + .block { + display: block; + line-height: 1.5em; + } + + .title { + font-size: 1.3em; + display: inline-block; + margin:0px; + text-transform: uppercase; + } +} diff --git a/src/less/shipyard.less b/src/less/shipyard.less new file mode 100755 index 00000000..150e87b8 --- /dev/null +++ b/src/less/shipyard.less @@ -0,0 +1,52 @@ + +#shipyard { + vertical-align: top; + text-align: center; +} + +a.ship { + display: inline-block; + width: 15em; + margin: 0.5em; + background-color: @bg; + padding: 0.5em; + text-decoration: none; + color: @fg; + font-family: @fStandard; + text-align: right; + .user-select-none(); + + .smallPhone({ + width: 16em; + }); + + h2 { + width: 100%; + margin: 0; + text-align: left; + font-size: 1.1em; + } + + small { + color: @warning; + font-family: @fStandard; + float: left; + font-size: 0.8em; + margin-right: 2em; + } + + .subtitle { + overflow: hidden; + margin-bottom: 20px; + } + + .size { + float: left; + font-size: 0.8em; + } + .purpose { + text-transform: uppercase; + font-size: 0.7em; + float: right; + } +} \ No newline at end of file diff --git a/src/less/slot.less b/src/less/slot.less new file mode 100755 index 00000000..c6d79e6d --- /dev/null +++ b/src/less/slot.less @@ -0,0 +1,196 @@ + +.slot { + float: left; + text-align: left; + width: 100%; + margin-top: 0.25em; + position: relative; + z-index: 0; + padding-right: 0.4em; + padding-left: 1.65em; + box-sizing: border-box; + background-color: @primary-bg; + border: 1px solid @primary-disabled; + color: @fg; + stroke: @fg; + fill: @fg; + + .details-container { + min-height: 2.7em; + padding: 0.25em 0; + box-sizing: border-box; + overflow: hidden; + height: 100%; + cursor: pointer; + text-transform: none; + } + + .details { + min-height: 2.2em; + background-color: @primary-bg; + } + + .name { + overflow: hidden; + white-space: nowrap; + max-width: 80%; + text-overflow: ellipsis; + } + + .modification-container { + @input-container-width: 75%; + td { + width: 100% - @input-container-width; + text-align: center; + } + + .input-container { + width: @input-container-width; + text-align: right; + } + + input { + width: 80%; + } + + .unit-container { + width: 30px; + padding: 3px; + text-align: left; + display: inline-block; + } + + .header-adjuster { + width: 100% - @input-container-width; + display: inline-block; + } + } + + .cb { + overflow: hidden; + } + + input.cb:focus { + border-color:#fff; + } + + input.greyed-out { + border-color: #888; + color: #888; + } + + .l { + text-transform: capitalize; + margin-right: 0.8em; + } + + .sz { + text-align: center; + position: absolute; + top: 0; + height: 100%; + left: 0; + font-size: 1.2em; + width: 1.2em; + color: @primary-disabled; + stroke: @primary-disabled; + border-right: 1px solid @primary-disabled; + box-sizing: border-box; + padding-top: 0.2em; + padding-left: 0.05em; + svg { + stroke-width: 20; + } + } + + .empty { + text-transform: uppercase; + font-size: 1.3em; + color: lighten(@primary-bg, 12%); + stroke: lighten(@primary-bg, 12%); + text-align: center; + letter-spacing: 0.1em; + line-height: 1.7em; + svg { + stroke-width: 20; + } + } + + &.selected { + color: @primary-bg; + stroke: @primary-bg; + fill: @primary-bg; + background-color: @primary; + border: 1px solid @primary; + z-index: 1; + .sz { + color: @primary; + stroke: @primary; + background-color: @primary-bg; + border-right: 1px solid @primary; + svg { + stroke-width: 20; + } + } + .details { + background-color: transparent; + } + svg { + stroke-width: 20; + } + } + + &.eligible { + border: 1px solid @secondary-disabled; + .sz { + color: @secondary-disabled; + border-right: 1px solid @secondary-disabled; + } + .details { + background-color: transparent; + } + } + + &.ineligible { + cursor: no-drop; + color: @disabled; + fill: @disabled; + border: 1px solid @disabled; + .sz { + color: @disabled; + border-right: 1px solid @disabled; + } + } + + &.dropEmpty { + color: @warning-disabled; + fill: @warning-disabled; + border: 1px solid @warning-disabled; + .sz { + color: @warning-disabled; + border-right: 1px solid @warning-disabled; + } + .details { + background-color: transparent; + } + } + + &.drop { + color: @secondary-bg; + fill: @secondary-bg; + border: 1px solid @secondary; + background-color: @secondary-disabled; + .sz { + color: @secondary; + background-color: @primary-bg; + border-right: 1px solid @secondary; + } + .details { + background-color: transparent; + } + } + + svg { + stroke-width: 20; + } +} diff --git a/src/less/sortable.less b/src/less/sortable.less new file mode 100755 index 00000000..a93a390c --- /dev/null +++ b/src/less/sortable.less @@ -0,0 +1,8 @@ +.sortable { + .user-select-none(); + cursor: pointer; + + .no-touch &:hover { + color: @primary; + } +} diff --git a/src/less/table.less b/src/less/table.less new file mode 100755 index 00000000..1cce0319 --- /dev/null +++ b/src/less/table.less @@ -0,0 +1,86 @@ + +table { + background-color: @primary-bg; + border-spacing: 0; + cursor: default; + + a, a:visited { + color: @primary; + text-decoration: none; + } +} + +thead { + color: @bgBlack; + background-color: @primary-disabled; + text-transform: uppercase; + line-height: 1.3em; + .user-select-none(); + + .main th { + border-left: 1px solid @primary-bg; + + &:first-child { + border-left: none; + } + } + + th { + vertical-align: middle; + font-weight: normal; + padding: 2px 0.4em 0; // Padding top for font vertical alignment + + &.lft { + border-left: 1px solid @primary-bg; + } + + &.rgt { + border-right: 1px solid @primary-bg; + } + + &.invisible { + color: @primary-disabled; + } + } +} + +tbody tr { + + &.tr { + color: @fg; + text-align: right; + } + + .no-touch &.highlight:hover, .no-touch &.highlighted { + background-color: @warning-bg; + } + + &.alt { + background-color: @alt-primary-bg; + } +} + +td { + line-height: 1.4em; + padding: 0 0.3em; + + &.val { + border: 1px solid @primary-disabled; + } + + &.lbl { + border: 1px solid @primary-disabled; + text-transform: uppercase; + color: @primary-bg; + background-color: @primary-disabled; + } + + &.tl { + text-align: left; + padding-left: 0.7em; + } + + &.tc { + text-align: center; + } +} diff --git a/src/less/tooltip.less b/src/less/tooltip.less new file mode 100755 index 00000000..e690af13 --- /dev/null +++ b/src/less/tooltip.less @@ -0,0 +1,69 @@ +.tip { + position: absolute; + z-index: 2; + font-size: 0.8em; + padding: 0.25em 0.5em; + display: inline-block; + background: @bgBlack; + box-sizing: border-box; + border: 1px solid @primary; + color: @fg; + pointer-events: none; + .border-radius(); + + &.n { + margin-top: -6px; + left: 50%; + .transform(translate3d(-50%, -100%, 0)); + } + &.s { + margin-top: 6px; + left: 50%; + .transform(translate3d(-50%, 0, 0)); + } + &.e { + margin-left: 6px; + .transform(translate3d(0, -50%, 0)); + } + &.w { + margin-left: -6px; + .transform(translate3d(-100%, -50%, 0)); + } +} + +/* Triangle 'pointer' for the tooltip */ +.arr { + width: 0; + height: 0; + position: absolute; + z-index: 2; + .transform(translate3d(0, 0, 0)); // Fix iOS Safari 8 Scroll bug + + &.n { + border-top: 6px solid @primary; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + margin-top: -6px; + margin-left: -8px; + } + &.s { + border-bottom: 6px solid @primary; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + margin-left: -8px; + } + &.e { + border-right: 6px solid @primary; + border-bottom: 8px solid transparent; + border-top: 8px solid transparent; + margin-top: -8px; + } + &.w { + border-left: 6px solid @primary; + border-bottom: 8px solid transparent; + border-top: 8px solid transparent; + margin-top: -8px; + margin-left: -6px; + } +} + diff --git a/src/less/utilities.less b/src/less/utilities.less new file mode 100755 index 00000000..05e3fa09 --- /dev/null +++ b/src/less/utilities.less @@ -0,0 +1,39 @@ +.border-radius (@radius: 5px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; + + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} + +.border-bottom-radius (@radius: 5px) { + -webkit-border-bottom-left-radius: @radius; + -moz-border-bottom-left-radius: @radius; + border-bottom-left-radius: @radius; + -webkit-border-bottom-right-radius: @radius; + -moz-border-bottom-right-radius: @radius; + border-bottom-right-radius: @radius; + + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} + +.user-select-none () { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.transform(@transform) { + -webkit-transform: @transform; + -moz-transform: @transform; + -ms-transform: @transform; + -o-transform: @transform; + transform: @transform; +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 73ea62f1..81506f4a 100644 --- a/src/main.js +++ b/src/main.js @@ -3,6 +3,7 @@ import App from "./App.vue"; import router from "./router"; import store from "./store"; import "./registerServiceWorker"; +import "./less/app.less"; Vue.config.productionTip = false; @@ -10,4 +11,4 @@ new Vue({ router, store, render: h => h(App) -}).$mount("#app"); +}).$mount("#coriolis");