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

SVG sprites, modals, general improvements

Browse Source
This commit is contained in:
Colin McLeod
2015-05-08 21:16:14 -07:00
parent 75a4e18f8a
commit adc025e3d9
139 changed files with 1289 additions and 718 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/less/app.less
View File

@@ -12,6 +12,7 @@
@import 'select';
@import 'modal';
@import 'charts';
@import 'buttons';
@import 'error';
@@ -70,6 +71,10 @@ h2 {
font-family: @fTitle;
}
u { // Unit (Mj, Km, etc)
font-size: 0.8em;
text-decoration: none;
}
a, a:visited {
color: @fg;

25
app/less/buttons.less Normal file
View File

@@ -0,0 +1,25 @@
button {
.border-radius(0);
color: @primary;
fill: @primary;
border: 1px solid @primary;
font-family: @fStandard;
border: 1px solid;
padding: 0.5em;
cursor: pointer;
background: none;
outline: none;
&.danger {
color: red;
fill: red;
border: 1px solid red;
}
&:disabled {
cursor: not-allowed;
color: @disabled;
fill: @disabled;
border: 1px solid @disabled;
}
}

2
app/less/charts.less
View File

@@ -1,5 +1,5 @@
svg {
svg.chart {
.user-select-none();
display: block;
width:100%;

20
app/less/colors.less
View File

@@ -19,3 +19,23 @@
@primary-bg: fadeout(darken(@primary, 45%), 20%);
@secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Brown background
@warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red
.disabled {
color: @disabled;
fill: @disabled;
}
.primary {
color: @primary;
fill: @primary;
}
.warning {
color: @warning;
fill: @warning;
}
.warning-disabled {
color: @warning-disabled;
fill: @warning-disabled;
}

12
app/less/fonts.less
View File

@@ -70,17 +70,5 @@
font-style: normal;
}
@font-face {
font-family: 'icons';
src:url('fonts/icons.eot?-dwuzoa');
src:url('fonts/icons.eot?#iefix-dwuzoa') format('embedded-opentype'),
url('fonts/icons.woff?-dwuzoa') format('woff'),
url('fonts/icons.ttf?-dwuzoa') format('truetype'),
url('fonts/icons.svg?-dwuzoa#icons') format('svg');
font-weight: normal;
font-style: normal;
}
@fStandard: 'eurocaps', Helvetica, sans-serif;
@fTitle: 'Orbitron-Regular', Arial, sans-serif;

18
app/less/header.less
View File

@@ -2,8 +2,8 @@ header {
background-color: @bg;
margin: 0;
padding: 0 1em;
height: 4em;
line-height: 4em;
height: 3em;
line-height: 3em;
font-family: @fTitle;
vertical-align: middle;
position: relative;
@@ -43,7 +43,6 @@ header {
}
.menu-list {
width: 25em;
font-family: @fStandard;
position: absolute;
padding: 1em 1em;
@@ -51,8 +50,12 @@ header {
background-color: @bgBlack;
font-size: 0.8em;
&.sm {
width: auto;
&.dbl {
width: 22.5em;
ul {
float: left;
width: 10em;
}
}
hr {
@@ -66,6 +69,7 @@ header {
margin: 0.5em 1em 0 0;
padding: 0;
line-height: 2em;
white-space: nowrap;
}
li {
@@ -80,6 +84,10 @@ header {
text-decoration: none;
white-space: nowrap;
&.build-name {
font-family: Helvetica, sans-serif;
}
&:visited {
color: @warning;
}

447
app/less/icons.less
View File

@@ -4,434 +4,27 @@
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.icon {
vertical-align: middle;
width: 1em;
height: 1em;
}
.icon-sm {
width: 0.75em;
height: 0.75em;
}
.icon-tiny {
width: 0.5em;
height: 0.5em;
}
.icon-l {
width: 1.5em;
height: 1.5em;
}
.icon-xl {
width: 3em;
height: 3em;
}
.shipyard {
background-image: url(images/icons/logo.svg);
}
.reddit {
background-image: url(images/icons/reddit.svg);
}
.ico-l {
font-size: 2em;
}
.ico-xl {
font-size: 3em;
}
.ico {
font-family: 'icons';
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ico-coin-dollar:before {
content: "\e93b";
}
.ico-download:before {
content: "\e960";
}
.ico-upload:before {
content: "\e961";
}
.ico-floppy-disk:before {
content: "\e962";
}
.ico-spinner4:before {
content: "\e97d";
}
.ico-spinner11:before {
content: "\e984";
}
.ico-enlarge:before {
content: "\e989";
}
.ico-shrink:before {
content: "\e98a";
}
.ico-enlarge2:before {
content: "\e98b";
}
.ico-shrink2:before {
content: "\e98c";
}
.ico-wrench:before {
content: "\e991";
}
.ico-equalizer:before {
content: "\e992";
}
.ico-equalizer2:before {
content: "\e993";
}
.ico-cog:before {
content: "\e994";
}
.ico-cogs:before {
content: "\e995";
}
.ico-hammer:before {
content: "\e996";
}
.ico-pie-chart:before {
content: "\e99a";
}
.ico-stats-dots:before {
content: "\e99b";
}
.ico-stats-bars:before {
content: "\e99c";
}
.ico-stats-bars2:before {
content: "\e99d";
}
.ico-rocket:before {
content: "\e9a5";
}
.ico-meter:before {
content: "\e9a6";
}
.ico-meter2:before {
content: "\e9a7";
}
.ico-bin:before {
content: "\e9ac";
}
.ico-target:before {
content: "\e9b3";
}
.ico-shield:before {
content: "\e9b4";
}
.ico-power:before {
content: "\e9b5";
}
.ico-switch:before {
content: "\e9b6";
}
.ico-power-cord:before {
content: "\e9b7";
}
.ico-clipboard:before {
content: "\e9b8";
}
.ico-tree:before {
content: "\e9bc";
}
.ico-menu:before {
content: "\e9bd";
}
.ico-menu2:before {
content: "\e9be";
}
.ico-menu3:before {
content: "\e9bf";
}
.ico-menu4:before {
content: "\e9c0";
}
.ico-cloud:before {
content: "\e9c1";
}
.ico-cloud-download:before {
content: "\e9c2";
}
.ico-cloud-upload:before {
content: "\e9c3";
}
.ico-cloud-check:before {
content: "\e9c4";
}
.ico-link:before {
content: "\e9cb";
}
.ico-warning:before {
content: "\ea07";
}
.ico-notification:before {
content: "\ea08";
}
.ico-question:before {
content: "\ea09";
}
.ico-plus:before {
content: "\ea0a";
}
.ico-minus:before {
content: "\ea0b";
}
.ico-info:before {
content: "\ea0c";
}
.ico-cancel-circle:before {
content: "\ea0d";
}
.ico-blocked:before {
content: "\ea0e";
}
.ico-cross:before {
content: "\ea0f";
}
.ico-checkmark:before {
content: "\ea10";
}
.ico-checkmark2:before {
content: "\ea11";
}
.ico-loop:before {
content: "\ea2d";
}
.ico-loop2:before {
content: "\ea2e";
}
.ico-infinite:before {
content: "\ea2f";
}
.ico-shuffle:before {
content: "\ea30";
}
.ico-arrow-up-left:before {
content: "\ea31";
}
.ico-arrow-up:before {
content: "\ea32";
}
.ico-arrow-up-right:before {
content: "\ea33";
}
.ico-arrow-right:before {
content: "\ea34";
}
.ico-arrow-down-right:before {
content: "\ea35";
}
.ico-arrow-down:before {
content: "\ea36";
}
.ico-arrow-down-left:before {
content: "\ea37";
}
.ico-arrow-left:before {
content: "\ea38";
}
.ico-arrow-up-left2:before {
content: "\ea39";
}
.ico-arrow-up2:before {
content: "\ea3a";
}
.ico-arrow-up-right2:before {
content: "\ea3b";
}
.ico-arrow-right2:before {
content: "\ea3c";
}
.ico-arrow-down-right2:before {
content: "\ea3d";
}
.ico-arrow-down2:before {
content: "\ea3e";
}
.ico-arrow-down-left2:before {
content: "\ea3f";
}
.ico-arrow-left2:before {
content: "\ea40";
}
.ico-circle-up:before {
content: "\ea41";
}
.ico-circle-right:before {
content: "\ea42";
}
.ico-circle-down:before {
content: "\ea43";
}
.ico-circle-left:before {
content: "\ea44";
}
.ico-tab:before {
content: "\ea45";
}
.ico-move-up:before {
content: "\ea46";
}
.ico-move-down:before {
content: "\ea47";
}
.ico-sort-alpha-asc:before {
content: "\ea48";
}
.ico-sort-alpha-desc:before {
content: "\ea49";
}
.ico-sort-numeric-asc:before {
content: "\ea4a";
}
.ico-sort-numberic-desc:before {
content: "\ea4b";
}
.ico-sort-amount-asc:before {
content: "\ea4c";
}
.ico-sort-amount-desc:before {
content: "\ea4d";
}
.ico-checkbox-checked:before {
content: "\ea52";
}
.ico-checkbox-unchecked:before {
content: "\ea53";
}
.ico-radio-checked:before {
content: "\ea54";
}
.ico-radio-checked2:before {
content: "\ea55";
}
.ico-radio-unchecked:before {
content: "\ea56";
}
.ico-table:before {
content: "\ea70";
}
.ico-table2:before {
content: "\ea71";
}
.ico-share:before {
content: "\ea7d";
}
.ico-share2:before {
content: "\ea82";
}
.ico-github:before {
content: "\eab1";
}
.ico-github4:before {
content: "\eab4";
&.sm {
width: 0.75em;
height: 0.75em;
}
&.tn {
width: 0.5em;
height: 0.5em;
}
&.lg {
width: 1.5em;
height: 1.5em;
}
&.xl {
width: 2em;
height: 2em;
}
}

40
app/less/modal.less
View File

@@ -8,12 +8,17 @@
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
.user-select-none();
}
.modal {
width: 50%;
position: absolute;
left:50%; top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
max-width: 75%;
padding: 3em;
margin: 10em auto 0;
background-color: @bgBlack;
border: 1px solid @primary;
@@ -24,13 +29,34 @@
h2 {
margin: 0;
}
p {
text-align: justify;
}
}
textarea {
background: @primary-bg;
border: none;
outline: none;
color: @primary-disabled;
&.json {
display:block;
width:40em;
height: 10em;
resize: vertical;
margin:2em 0;
}
}
input {
background: @primary-bg;
border: 1px solid @primary-disabled;
color: @secondary-disabled;
outline: none;
}
.dismiss {
outline: none;
background-color: @primary-bg;
font-family: @fStandard;
color: @primary;
line-height: 1.5em;
border: 1px solid @primary;
}

19
app/less/outfit.less
View File

@@ -16,15 +16,20 @@
line-height: 2em;
input {
background: @primary-bg;
color: @secondary;
background: none;
color: @secondary-disabled;
outline: none;
border: none;
font-size: 0.8em;
line-height: 2em;
text-align: right;
text-align: center;
border: 1px solid @secondary-disabled;
box-sizing: border-box;
display: block;
width: 100%;
margin-bottom: 0.5em;
&:hover, &:focus {
background-color: @secondary-bg;
border: 1px solid @secondary;
color: @secondary;
}
}
}
@@ -48,10 +53,6 @@
}
}
u { // Unit (Mj, Km, etc)
font-size: 0.8em;
text-decoration: none;
}
#summary {
.user-select-none();

31
app/less/select.less
View File

@@ -23,16 +23,21 @@
cursor: pointer;
color: @primary-disabled;
stroke-width: 1em;
stroke: @primary-disabled;
&:hover {
color: @warning;
stroke: @warning;
}
&.disabled {
cursor: not-allowed;
color: @disabled;
stroke: @disabled;
}
&.active {
color: @secondary;
stroke: @secondary;
}
}
@@ -48,17 +53,6 @@
text-align: center;
}
&.hardpoint {
.c {
width: 4em;
/* &:nth-child(3n + 1) {
clear: left;
}
&:nth-child(5n +1) {
clear: none;
}*/
}
}
.c {
border:1px solid @primary-disabled;
@@ -74,10 +68,6 @@
border:1px solid @warning;
}
/*&:nth-child(5n +1) {
clear: left;
}*/
&.disabled {
border:1px solid @disabled;
}
@@ -93,4 +83,15 @@
list-style: none;
overflow: hidden;
}
&.hardpoint {
.c {
width: auto;
padding: 0.1em 0.5em;
}
ul {
margin-left: 1em;
}
}
}

61
app/less/table.less
View File

@@ -4,8 +4,10 @@ table {
background-color: @primary-bg;
border-spacing: 0;
font-size: 0.8em;
cursor: default;
a {
a, a:visited {
color: @primary;
text-decoration: none;
}
}
@@ -13,22 +15,61 @@ table {
thead {
color: @bgBlack;
background-color: @primary-disabled;
.user-select-none();
.main th {
border-left: 1px solid @primary-bg;
&:first-child {
border-left: none;
}
}
th {
padding: 0 0.75em;
&[ng-click] {
cursor: pointer;
&:hover {
color: @primary;
}
}
&.lft {
border-left: 1px solid @primary-bg;
}
}
}
tbody tr {
&:hover {
color: #000;
background-color: @secondary;
}
}
&.tr {
color: @disabled;
text-align: right;
&:hover {
color: @fg;
background-color: @warning-bg;
}
td {
padding: 0 0.7em;
}
}
th {
padding: 0.1em 0.5em;
}
td {
padding-left: 0.5em;
font-size: 0.9em;
}
&.tl {
text-align: left;
padding-left: 0.7em;
}
&.tc {
text-align: center;
}
}