Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-10 07:05:35 +00:00
Code Issues Projects Releases Wiki Activity

Refactoring of just about everything, interface beginning to come together

Browse Source
This commit is contained in:
Colin McLeod
2015-04-28 00:46:51 -07:00
parent 7d527cdfef
commit f736a078ec
112 changed files with 3626 additions and 1210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
app/less/app.less
View File

@@ -1,45 +1,83 @@
@import 'colors';
@import 'fonts';
@import 'utilities';
@import 'logos';
@import 'icons';
@import 'shipyard';
@import 'list';
@import 'components';
@import 'slot';
@import 'ship';
@import 'charts';
@import 'meters';
html, body {
min-height: 100%;
}
body {
color: #FFF;
color: @fg;
background-color: #000;
margin: 0;
padding: 0;
font-family: @standardFamily;
font-family: @fStandard;
overflow-x: hidden;
}
#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.3;
//background-image: url(images/docking-bay.jpg);
//background-repeat: no-repeat;
//background-position: center;
//background-size: cover;
}
#main {
min-height: 90%;
margin: 10px;
min-height: 800px;
clear: both;
}
.l {
float: left;
}
.r {
float: right;
}
.cl {
clear: left;
}
.cr {
clear: right;
}
.cb {
clear: both;
}
header {
background-color: @fg;
background-color: @bg;
margin: 0;
height: 40px;
line-height: 40px;
font-family: @titleFamily;
height: 55px;
line-height: 55px;
font-family: @fTitle;
vertical-align: middle;
a {
vertical-align: middle;
color: @border;
color: @warning;
&:visited {
color: @border;
color: @warning;
}
&:hover {
color: teal;

8
app/less/charts.less Normal file
View File

@@ -0,0 +1,8 @@
svg {
.user-select-none();
display: block;
width:100%;
height:100%;
}

21
app/less/colors.less
View File

@@ -1,3 +1,20 @@
@fg: #FF8C0D; // Light Orange
@fg: #fff;
@bg: #333;
@primary: #FF8C0D; // Light Orange
@secondary: #32DBDB; // Light blue
@warning: #FF3B00; // Dark Orange
@border: rgba(201,34,2,0.50); // Dark Red
@bgDarken: 40%;
@disabledDarken: 15%;
@bgTransparency: 10%;
@disabled: #888;
@primary-disabled: darken(@primary, @disabledDarken);
@secondary-disabled: darken(@primary, @disabledDarken);
@warning-disabled: darken(@primary, @disabledDarken);
@bgBlack: rgba(0,0,0,0.6);
@primary-bg: fadeout(darken(@primary, 45%), 30%);
@secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Brown background
@warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red

118
app/less/components.less
View File

@@ -1,118 +0,0 @@
.slot-group {
border: 2px solid @border;
.border-radius(5px);
margin: 5px;
float: left;
padding: 0 5px 5px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
legend {
text-transform: uppercase;
padding: 0 5px;
color: @warning;
}
.slot {
text-transform: uppercase;
float: left;
margin: 1%;
border: 1px solid orange;
.border-radius(2px);
width: 250px;
position: relative;
padding: 3px;
color: #BBB;
font-size: 0.8em;
.lbl,.cla {
color: #666;
}
.lbl {
float: left;
}
.cla {
float: right;
}
.clear {
clear: both;
}
.select {
z-index: 1;
top: 100%;
padding-top: 10px;
display: none;
position: absolute;
width: 100%;
margin: 0;
padding: 0;
background-color: black;
border-left: 1px solid teal;
border-bottom: 1px solid teal;
border-right: 1px solid teal;
.border-bottom-radius(5px);
left: -1px;
max-height: 600px;
overflow-y: scroll;
}
.select-group {
clear: both;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
padding-left: 5px;
}
.c {
cursor: pointer;
.border-radius(3px);
display: block;
float:left;
margin: 5px;
padding: 0;
height: 20px;
line-height: 20px;
background-color: #666;
color: #BBB;
&:hover {
background-color: teal;
color: #FFF;
}
}
li.c {
width: 25px;
text-align: center;
&:nth-child(5n +1) {
clear: left;
}
}
ul {
margin: 0;
list-style: none;
}
&:hover {
border: 1px solid teal;
color: #FFF;
.lbl,.cla {
color: #999;
}
.select {
display: block;
}
}
}
}

44
app/less/fonts.less
View File

@@ -34,7 +34,45 @@
font-style: normal;
}
@font-face {
font-family: 'Sintony-Bold';
src: url('fonts/sintony-bold-webfont.eot');
src: url('fonts/sintony-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/sintony-bold-webfont.woff2') format('woff2'),
url('fonts/sintony-bold-webfont.woff') format('woff'),
url('fonts/sintony-bold-webfont.ttf') format('truetype'),
url('fonts/sintony-bold-webfont.svg#sintonybold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Sintony-Regular';
src: url('fonts/sintony-regular-webfont.eot');
src: url('fonts/sintony-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/sintony-regular-webfont.woff2') format('woff2'),
url('fonts/sintony-regular-webfont.woff') format('woff'),
url('fonts/sintony-regular-webfont.ttf') format('truetype'),
url('fonts/sintony-regular-webfont.svg#sintonyregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'eurocaps';
src: url('fonts/eurocaps-webfont.eot');
src: url('fonts/eurocaps-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/eurocaps-webfont.woff2') format('woff2'),
url('fonts/eurocaps-webfont.woff') format('woff'),
url('fonts/eurocaps-webfont.ttf') format('truetype'),
url('fonts/eurocaps-webfont.svg#euro_capsregular') format('svg');
font-weight: normal;
font-style: normal;
}
@fStandard: 'eurocaps', Helvetica, sans-serif;
@fTitle: 'Orbitron-Regular', Arial, sans-serif;
@standardFamily: Helvetica, sans-serif;
@titleFamily: 'Orbitron-Medium', Arial, sans-serif;
@itemFamily: 'Orbitron-Regular', Arial, sans-serif;

43
app/less/icons.less Normal file
View File

@@ -0,0 +1,43 @@
.logo, .icon {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.icon {
width: 25px;
height: 25px;
}
.logo {
display: inline-block;
width: 50px;
height: 50px;
}
.mount-T {
background-image: url(images/icons/mount-t.svg);
}
.mount-F {
background-image: url(images/icons/mount-f.svg);
}
.mount-G {
background-image: url(images/icons/mount-g.svg);
}
.shipyard {
background-image: url(images/icons/logo.svg);
}
.github {
background-image: url(images/icons/github-mark.svg);
}
.reddit {
background-image: url(images/icons/reddit.svg);
}
.elite-dangerous {
background-image: url(images/ed-logo-sm.png);
}

115
app/less/list.less
View File

@@ -1,61 +1,84 @@
.list {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
float: left;
overflow: hidden;
padding: 5px;
cursor: default;
position: relative;
font-size: 0.8em;
.list-item {
.header {
position: absolute;
width: 100%;
height: 1.6em;
font-family: @fTitle;
color: @primary;
text-transform: uppercase;
}
.items {
margin-top: 25px;
margin-bottom: 10px;
clear: both;
overflow: hidden;
margin: 3px 0px;
.item {
clear: both;
margin: 1px 0 0;
overflow: hidden;
.val {
float:right;
text-align: right;
}
.lbl {
float: left;
}
color: @disabled;
cursor: pointer;
&:hover {
color: @warning-disabled;
}
&.enabled {
color: @fg;
&:hover {
color: @warning;
}
}
&.consumer {
.val:before {
content: "-";
}
}
&.untoggleable {
cursor: default;
}
}
}
.val {
float:right;
.summary {
font-family: @fStandard;
overflow: hidden;
text-align: right;
.item {
float:right;
width: 25%
}
.lbl {
font-family: @fTitle;
color: @primary;
text-transform: uppercase;
}
}
.lbl {
float: left;
&:nth-child(n+2) {
border-top: 1px solid @primary;
}
}
#cost-list {
color: grey;
width: 300px;
.list-item {
cursor: pointer;
}
.enabled {
color: #FFF;
}
}
#power-list {
color: grey;
width: 300px;
.enabled {
color: #FFF;
}
.consumer {
cursor: pointer;
}
.consumer.enabled {
color: @fg;
}
.common, .internal, .hardpoints {
}
}

23
app/less/logos.less
View File

@@ -1,23 +0,0 @@
.logo {
background-repeat: no-repeat;
background-position: center;
display: inline-block;
width: 30px;
height: 30px;
}
.github {
background-image: url(images/github-mark.svg);
background-size: contain;
}
.reddit {
background-image: url(images/reddit.svg);
background-size: contain;
}
.elite-dangerous {
background-image: url(images/ed-logo-sm.png);
background-size: contain;
}

18
app/less/meters.less Normal file
View File

@@ -0,0 +1,18 @@
svg.meter {
text {
fill: @warning;
font-size: 15px;
font-family: @fStandard;
text-transform:uppercase;
alignment-baseline: middle;
}
rect {
fill: @disabled;
&.active {
fill: @warning;
}
}
}

56
app/less/ship.less
View File

@@ -14,13 +14,61 @@
}
#hardpoints {
width: 525px;
.slot:nth-child(2n) {
clear: left;
margin-right: 10px;
}
}
#standard {
width: 265px;
.slot {
clear: left;
}
}
#internal {
width: 525px;
}
.slot {
clear: left;
}
}
#summary {
.user-select-none();
float: right;
width: 40%;
border-top: 2px solid @primary;
border-bottom: 2px solid @primary;
background-color: @primary-bg;
}
legend {
text-transform: uppercase;
padding: 0 5px;
color: @warning;
font-family: @fTitle;
}
fieldset {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
cursor: default;
border: 2px solid @warning-bg;
.border-radius(5px);
margin: 5px;
padding: 1px 5px 5px;
}
.toggle {
cursor: pointer;
}
.expandable {
display: none;
&.expanded {
display: block;
}
}

15
app/less/shipyard.less
View File

@@ -5,26 +5,29 @@ a.ship {
width: 22%;
height: 30%;
margin: 1% 1%;
background-color: #222;
background-color: @bg;
padding: 0.5%;
text-decoration: none;
color: #FFF;
font-family: @standardFamily;
color: @fg;
font-family: @fStandard;
text-align: right;
.user-select-none();
&:hover {
background-color: @fg;
background-color: @secondary-bg;
}
h2 {
width: 100%;
text-transform: uppercase;
margin: 0;
font-family: @titleFamily;
font-family: @fTitle;
text-align: left;
}
small {
color: @warning;
font-family: @titleFamily;
font-family: @fTitle;
float: left;
font-size: 0.8em;
}

164
app/less/slot.less Normal file
View File

@@ -0,0 +1,164 @@
.slot-group {
float: left;
margin: 0 5px;
background-color: @bgBlack;
.user-select-none();
cursor: default;
h1 {
font-family: @fTitle;
color: @bgBlack;
background-color: @primary-disabled;
text-transform: uppercase;
margin: 2px 0;
font-size: 0.8em;
padding-left: 0.5em;
}
}
.slot {
float: left;
width: 230px;
font-size: 0.75em;
margin-top: 3px;
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: @disabled;
.details {
overflow: hidden;
height: 100%;
cursor: pointer;
}
.cb {
overflow: hidden;
}
.l {
margin-right: 1em;
}
.sz {
text-align: center;
position: absolute;
top: 0;
height: 100%;
left: 0;
font-size: 1.2em;
width: 1.2em;
color: @primary-disabled;
border-right: 1px solid @primary-disabled;
box-sizing: border-box;
}
.empty {
font-size: 1.5em;
color: lighten(@primary-bg, 12%);
text-align: center;
letter-spacing: 0.1em;
line-height: 1.8em;
}
&:hover{
color: @fg;
border: 1px solid @primary;
.sz {
color: @primary;
border-right: 1px solid @primary;
}
}
&.selected {
color: @primary-bg;
background-color: @primary;
border: 1px solid @primary;
z-index: 1;
.sz {
color: @primary;
background-color: @primary-bg;
border-right: 1px solid @primary;
}
}
}
.select {
color: @primary-disabled;
position: absolute;
left: -1px;
padding: 5px 0;
width: 100%;
margin: 0;
max-height: 300px;
overflow-y: scroll;
background-color: @bg;
border: 1px solid @primary;
.select-group {
clear: both;
margin: 5px 0;
padding-left: 5px;
border-top: 1px solid @primary-disabled;
border-bottom: 1px solid @primary-disabled;
}
.empty-c, .c, .lc {
cursor: pointer;
color: @primary-disabled;
&:hover {
color: @warning;
}
}
@optionSpacing: 1.8em;
.lc {
padding-left: 5px;
line-height:@optionSpacing;
}
.empty-c {
line-height:@optionSpacing;
text-align: center;
}
.c {
border:1px solid @primary-disabled;
display: block;
float:left;
padding: 0;
margin: 0.5em;
width: 2em;
//height: 1.5em;
line-height: @optionSpacing;
text-align: center;
&:hover {
border:1px solid @warning;
}
&:nth-child(5n +1) {
clear: left;
}
}
ul {
margin: 0;
margin-left: 20px;
padding: 0;
list-style: none;
overflow: hidden;
}
}

9
app/less/utilities.less
View File

@@ -19,4 +19,13 @@
-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;
}