New Client: working navigation (#8131)

* initial work

* new client: working navigation and tasks showing up

* finish header menu and add avatar component

* fix sprites in new client

* initial header version

* initial styling for top menu

* more progress on the header menu

* almost complete menu and avatar

* correctly apply active class for /social and /help

* fix header colors and simplify css

* switch from Roboto to native fonts

* remove small avatar and add viewport

* fixes

* fix user menu with and progress bars

* fix avatar rendeting

* move bars colors to theme

* add site overrides

* fix tests

* shrinkwrap

* fix sprites path

* another try at fixing the sprites path

* another try at fixing the sprites path
This commit is contained in:
Matteo Pagliazzi 2016-11-18 19:20:25 +01:00 committed by GitHub
parent 3b5e4b6d84
commit 64754777ed
128 changed files with 49347 additions and 6886 deletions

View file

@ -57,7 +57,7 @@ module.exports = function(grunt) {
files: [
{expand: true, cwd: 'website/client-old/', src: 'favicon.ico', dest: 'website/build/'},
{expand: true, cwd: 'website/client-old/', src: 'favicon_192x192.png', dest: 'website/build/'},
{expand: true, cwd: 'website/assets/sprites/dist/', src: 'spritesmith*.png', dest: 'website/build/'},
{expand: true, cwd: 'website/assets/sprites/dist/', src: 'spritesmith*.png', dest: 'website/build/static/sprites'},
{expand: true, cwd: 'website/assets/sprites/', src: 'backer-only/*.gif', dest: 'website/build/'},
{expand: true, cwd: 'website/assets/sprites/', src: 'npc_ian.gif', dest: 'website/build/'},
{expand: true, cwd: 'website/assets/sprites/', src: 'quest_*.gif', dest: 'website/build/'},
@ -78,6 +78,7 @@ module.exports = function(grunt) {
'website/build/favicon.ico',
'website/build/favicon_192x192.png',
'website/build/*.png',
'website/build/static/sprites/*.png',
'website/build/*.gif',
'website/build/bower_components/bootstrap/dist/fonts/*'
],

View file

@ -12,6 +12,9 @@ import {each} from 'lodash';
const MAX_SPRITESHEET_SIZE = 1024 * 1024 * 3;
const DIST_PATH = 'website/assets/sprites/dist/';
const IMG_DIST_PATH_NEW_CLIENT = 'website/static/sprites/';
const CSS_DIST_PATH_NEW_CLIENT = 'website/client/assets/css/sprites/';
gulp.task('sprites:compile', ['sprites:clean', 'sprites:main', 'sprites:largeSprites', 'sprites:checkCompiledDimensions']);
gulp.task('sprites:main', () => {
@ -25,7 +28,7 @@ gulp.task('sprites:largeSprites', () => {
});
gulp.task('sprites:clean', (done) => {
clean(`${DIST_PATH}spritesmith*`, done);
clean(`{${DIST_PATH}spritesmith*,${IMG_DIST_PATH_NEW_CLIENT}spritesmith*,${CSS_DIST_PATH_NEW_CLIENT}spritesmith*}`, done);
});
gulp.task('sprites:checkCompiledDimensions', ['sprites:main', 'sprites:largeSprites'], () => {
@ -66,14 +69,16 @@ function createSpritesStream (name, src) {
algorithm: 'binary-tree',
padding: 1,
cssTemplate: 'website/assets/sprites/css/css.template.handlebars',
cssVarMap: cssVarMap
cssVarMap: cssVarMap,
}));
let imgStream = spriteData.img
.pipe(imagemin())
.pipe(gulp.dest(IMG_DIST_PATH_NEW_CLIENT))
.pipe(gulp.dest(DIST_PATH));
let cssStream = spriteData.css
.pipe(gulp.dest(CSS_DIST_PATH_NEW_CLIENT))
.pipe(gulp.dest(DIST_PATH));
stream.add(imgStream);

4776
npm-shrinkwrap.json generated

File diff suppressed because it is too large Load diff

View file

@ -64,13 +64,14 @@
"image-size": "~0.3.2",
"in-app-purchase": "^1.1.6",
"jade": "~1.11.0",
"jquery": "https://registry.npmjs.org/jquery/-/jquery-3.1.1.tgz",
"js2xmlparser": "~1.0.0",
"json-loader": "^0.5.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"lodash": "^3.10.1",
"lodash.setwith": "^4.2.0",
"lodash.pickby": "^4.2.0",
"lodash.setwith": "^4.2.0",
"merge-stream": "^1.0.0",
"method-override": "^2.3.5",
"moment": "^2.13.0",
@ -90,6 +91,7 @@
"passport-google-oauth20": "1.0.0",
"paypal-ipn": "3.0.0",
"paypal-rest-sdk": "^1.2.1",
"postcss-easy-import": "^1.0.1",
"pretty-data": "^0.40.0",
"ps-tree": "^1.0.0",
"pug": "^2.0.0-beta6",

View file

@ -36,7 +36,10 @@ webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || [];
webpackConfig.module.preLoaders.unshift({
test: /\.js$/,
loader: 'isparta',
include: path.resolve(projectRoot, 'website/client'),
include: [
path.resolve(projectRoot, 'website/client'),
path.resolve(projectRoot, 'website/common'),
],
});
// only apply babel for test files when using isparta

View file

@ -2,6 +2,7 @@ var path = require('path');
var config = require('./config');
var utils = require('./utils');
var projectRoot = path.resolve(__dirname, '../');
var webpack = require('webpack');
var IS_PROD = process.env.NODE_ENV === 'production';
var baseConfig = {
@ -17,6 +18,7 @@ var baseConfig = {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
jquery: 'jquery/src/jquery',
client: path.resolve(__dirname, '../website/client'),
assets: path.resolve(__dirname, '../website/client/assets'),
components: path.resolve(__dirname, '../website/client/components'),
@ -25,6 +27,12 @@ var baseConfig = {
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')],
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
],
module: {
preLoaders: !IS_PROD ? [
{
@ -79,6 +87,9 @@ var baseConfig = {
require('autoprefixer')({
browsers: ['last 2 versions'],
}),
require('postcss-easy-import')({
glob: true,
}),
],
},
};

View file

@ -1,13 +1,13 @@
{{#sprites}}
.{{name}} {
background-image: url(/{{{escaped_image}}});
background-image: url(/static/sprites/{{{escaped_image}}});
background-position: {{px.offset_x}} {{px.offset_y}};
width: {{px.width}};
height: {{px.height}};
}
{{#if custom}}
.customize-option.{{name}} {
background-image: url(/{{{escaped_image}}});
background-image: url(/static/sprites/{{{escaped_image}}});
background-position: {{custom.px.offset_x}} {{custom.px.offset_y}};
width: {{custom.px.width}};
height: {{custom.px.height}};

View file

@ -1,647 +1,647 @@
.promo_android {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -857px;
width: 175px;
height: 175px;
}
.promo_backgrounds_armoire_201602 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1156px -573px;
width: 141px;
height: 294px;
}
.promo_backgrounds_armoire_201603 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1298px -573px;
width: 141px;
height: 294px;
}
.promo_backgrounds_armoire_201604 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -452px 0px;
width: 140px;
height: 441px;
}
.promo_backgrounds_armoire_201605 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -452px -442px;
width: 140px;
height: 441px;
}
.promo_backgrounds_armoire_201606 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -140px -525px;
width: 140px;
height: 447px;
}
.promo_backgrounds_armoire_201607 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -525px;
width: 139px;
height: 588px;
}
.promo_backgrounds_armoire_201608 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -875px -442px;
width: 140px;
height: 439px;
}
.promo_backgrounds_armoire_201609 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px 0px;
width: 139px;
height: 438px;
}
.promo_backgrounds_armoire_201610 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -593px -442px;
width: 140px;
height: 441px;
}
.promo_backgrounds_armoire_201611 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -734px 0px;
width: 140px;
height: 441px;
}
.promo_backtoschool {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -1572px;
width: 150px;
height: 150px;
}
.promo_burnout {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1156px -151px;
width: 219px;
height: 240px;
}
.promo_chairs_glasses {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -593px -884px;
width: 51px;
height: 210px;
}
.promo_classes_fall_2014 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -643px -1313px;
width: 321px;
height: 100px;
}
.promo_classes_fall_2015 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -430px -1210px;
width: 377px;
height: 99px;
}
.promo_classes_fall_2016 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -332px;
width: 103px;
height: 348px;
}
.promo_contrib_spotlight_beffymaroo {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1440px -573px;
width: 114px;
height: 147px;
}
.promo_contrib_spotlight_blade {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1714px -1033px;
width: 89px;
height: 111px;
}
.promo_contrib_spotlight_cantras {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1708px -1181px;
width: 87px;
height: 109px;
}
.promo_cow {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -875px 0px;
width: 140px;
height: 441px;
}
.promo_dilatoryDistress {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1505px;
width: 90px;
height: 90px;
}
.promo_egg_mounts {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1156px -868px;
width: 280px;
height: 147px;
}
.promo_enchanted_armoire {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -499px -1114px;
width: 374px;
height: 76px;
}
.promo_enchanted_armoire_201507 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -1332px;
width: 217px;
height: 90px;
}
.promo_enchanted_armoire_201508 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -794px -1461px;
width: 180px;
height: 90px;
}
.promo_enchanted_armoire_201509 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -504px;
width: 90px;
height: 90px;
}
.promo_enchanted_armoire_201511 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px -797px;
width: 122px;
height: 90px;
}
.promo_enchanted_armoire_201601 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1414px;
width: 90px;
height: 90px;
}
.promo_floral_potions {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1661px -332px;
width: 105px;
height: 273px;
}
.promo_ghost_potions {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -593px 0px;
width: 140px;
height: 441px;
}
.promo_habitica {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -681px;
width: 175px;
height: 175px;
}
.promo_habitica_sticker {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -220px;
width: 305px;
height: 304px;
}
.promo_habitoween_2016 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -281px -525px;
width: 140px;
height: 441px;
}
.promo_haunted_hair {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px -439px;
width: 100px;
height: 137px;
}
.promo_item_notif {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -326px -1461px;
width: 249px;
height: 102px;
}
.promo_mystery_201405 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -686px;
width: 90px;
height: 90px;
}
.promo_mystery_201406 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -316px;
width: 90px;
height: 96px;
}
.promo_mystery_201407 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -645px -954px;
width: 42px;
height: 62px;
}
.promo_mystery_201408 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1733px -939px;
width: 60px;
height: 71px;
}
.promo_mystery_201409 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1596px;
width: 90px;
height: 90px;
}
.promo_mystery_201410 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -875px -1030px;
width: 72px;
height: 63px;
}
.promo_mystery_201411 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1050px;
width: 90px;
height: 90px;
}
.promo_mystery_201412 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -688px -884px;
width: 42px;
height: 66px;
}
.promo_mystery_201501 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -795px -1032px;
width: 48px;
height: 63px;
}
.promo_mystery_201502 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1445px -1461px;
width: 90px;
height: 90px;
}
.promo_mystery_201503 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -413px;
width: 90px;
height: 90px;
}
.promo_mystery_201504 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -734px -1032px;
width: 60px;
height: 69px;
}
.promo_mystery_201505 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -777px;
width: 90px;
height: 90px;
}
.promo_mystery_201506 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -645px -884px;
width: 42px;
height: 69px;
}
.promo_mystery_201507 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -210px;
width: 90px;
height: 105px;
}
.promo_mystery_201508 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1351px -1461px;
width: 93px;
height: 90px;
}
.promo_mystery_201509 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1232px;
width: 90px;
height: 90px;
}
.promo_mystery_201510 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1257px -1461px;
width: 93px;
height: 90px;
}
.promo_mystery_201511 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -595px;
width: 90px;
height: 90px;
}
.promo_mystery_201512 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1733px -857px;
width: 60px;
height: 81px;
}
.promo_mystery_201601 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px -888px;
width: 120px;
height: 90px;
}
.promo_mystery_201602 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -868px;
width: 90px;
height: 90px;
}
.promo_mystery_201603 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -959px;
width: 90px;
height: 90px;
}
.promo_mystery_201604 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1069px -1461px;
width: 93px;
height: 90px;
}
.promo_mystery_201605 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1141px;
width: 90px;
height: 90px;
}
.promo_mystery_201606 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -104px;
width: 90px;
height: 105px;
}
.promo_mystery_201607 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1323px;
width: 90px;
height: 90px;
}
.promo_mystery_201608 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1163px -1461px;
width: 93px;
height: 90px;
}
.promo_mystery_201609 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -975px -1461px;
width: 93px;
height: 90px;
}
.promo_mystery_201610 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1733px -681px;
width: 63px;
height: 84px;
}
.promo_mystery_3014 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -576px -1461px;
width: 217px;
height: 90px;
}
.promo_new_hair_fall2016 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -734px -442px;
width: 140px;
height: 441px;
}
.promo_orca {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px -691px;
width: 105px;
height: 105px;
}
.promo_partyhats {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1661px -606px;
width: 115px;
height: 47px;
}
.promo_pastel_skin {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -808px -1210px;
width: 330px;
height: 83px;
}
.customize-option.promo_pastel_skin {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -833px -1225px;
width: 60px;
height: 60px;
}
.promo_peppermint_flame {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -875px -882px;
width: 140px;
height: 147px;
}
.promo_pet_skins {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -734px -884px;
width: 140px;
height: 147px;
}
.customize-option.promo_pet_skins {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -759px -899px;
width: 60px;
height: 60px;
}
.promo_pyromancer {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px -577px;
width: 113px;
height: 113px;
}
.promo_rainbow_armor {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px 0px;
width: 92px;
height: 103px;
}
.promo_seasonal_shop_fall_2016 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -1313px;
width: 279px;
height: 147px;
}
.promo_shimmer_hair {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1139px -1210px;
width: 330px;
height: 83px;
}
.promo_splashyskins {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -151px -1572px;
width: 198px;
height: 91px;
}
.customize-option.promo_splashyskins {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -176px -1587px;
width: 60px;
height: 60px;
}
.promo_spooky_sparkles_fall_2016 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -306px -220px;
width: 140px;
height: 294px;
}
.promo_spring_classes_2016 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -280px -1313px;
width: 362px;
height: 102px;
}
.promo_springclasses2014 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -965px -1313px;
width: 288px;
height: 90px;
}
.promo_springclasses2015 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1254px -1313px;
width: 288px;
height: 90px;
}
.promo_staff_spotlight_Lemoness {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1440px -721px;
width: 102px;
height: 146px;
}
.promo_staff_spotlight_Viirus {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1427px -392px;
width: 119px;
height: 147px;
}
.promo_staff_spotlight_paglias {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1437px -868px;
width: 99px;
height: 147px;
}
.promo_summer_classes_2014 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -1210px;
width: 429px;
height: 102px;
}
.promo_summer_classes_2015 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -140px -973px;
width: 300px;
height: 88px;
}
.promo_summer_classes_2016 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1156px 0px;
width: 400px;
height: 150px;
}
.promo_takeThis_gear {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -452px -884px;
width: 114px;
height: 87px;
}
.promo_takethis_armor {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px -979px;
width: 114px;
height: 87px;
}
.promo_unconventional_armor {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -948px -1030px;
width: 60px;
height: 60px;
}
.promo_unconventional_armor2 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1733px -766px;
width: 70px;
height: 74px;
}
.promo_updos {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -1033px;
width: 156px;
height: 147px;
}
.promo_veteran_pets {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -874px -1114px;
width: 146px;
height: 75px;
}
.promo_winter_classes_2016 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1156px -1016px;
width: 360px;
height: 90px;
}
.promo_winterclasses2015 {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -1461px;
width: 325px;
height: 110px;
}
.promo_winteryhair {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1376px -302px;
width: 152px;
height: 75px;
}
.avatar_variety {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -1114px;
width: 498px;
height: 95px;
}
.npc_viirus {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -452px -972px;
width: 108px;
height: 90px;
}
.party_preview {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px 0px;
width: 451px;
height: 219px;
}
.scene_coding {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -1181px;
width: 150px;
height: 150px;
}
.scene_phone_peek {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1376px -151px;
width: 150px;
height: 150px;
}
.welcome_basic_avatars {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px 0px;
width: 246px;
height: 165px;
}
.welcome_promo_party {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1156px -392px;
width: 270px;
height: 180px;
}
.welcome_sample_tasks {
background-image: url(/spritesmith-largeSprites-0.png);
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -166px;
width: 246px;
height: 165px;

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

View file

@ -1,647 +1,647 @@
.Pet-Spider-CottonCandyBlue {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px 0px;
width: 81px;
height: 99px;
}
.Pet-Spider-CottonCandyPink {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -600px;
width: 81px;
height: 99px;
}
.Pet-Spider-Desert {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px 0px;
width: 81px;
height: 99px;
}
.Pet-Spider-Golden {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -100px;
width: 81px;
height: 99px;
}
.Pet-Spider-Red {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -100px;
width: 81px;
height: 99px;
}
.Pet-Spider-Shade {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -100px;
width: 81px;
height: 99px;
}
.Pet-Spider-Skeleton {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px 0px;
width: 81px;
height: 99px;
}
.Pet-Spider-White {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -100px;
width: 81px;
height: 99px;
}
.Pet-Spider-Zombie {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -200px;
width: 81px;
height: 99px;
}
.Pet-TRex-Base {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px 0px;
width: 81px;
height: 99px;
}
.Pet-TRex-CottonCandyBlue {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -100px;
width: 81px;
height: 99px;
}
.Pet-TRex-CottonCandyPink {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -200px;
width: 81px;
height: 99px;
}
.Pet-TRex-Desert {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -300px;
width: 81px;
height: 99px;
}
.Pet-TRex-Golden {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -400px;
width: 81px;
height: 99px;
}
.Pet-TRex-Red {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -500px;
width: 81px;
height: 99px;
}
.Pet-TRex-Shade {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -500px;
width: 81px;
height: 99px;
}
.Pet-TRex-Skeleton {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -500px;
width: 81px;
height: 99px;
}
.Pet-TRex-White {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -500px;
width: 81px;
height: 99px;
}
.Pet-TRex-Zombie {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -500px;
width: 81px;
height: 99px;
}
.Pet-Tiger-Veteran {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -200px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Base {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -200px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-CottonCandyBlue {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -200px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-CottonCandyPink {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px 0px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Desert {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -100px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Floral {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -200px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Ghost {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -300px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Golden {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -300px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Peppermint {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -300px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Red {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -300px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Shade {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -300px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Skeleton {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px 0px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Spooky {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -100px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Thunderstorm {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -200px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-White {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -300px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Zombie {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px 0px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Base {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -100px;
width: 81px;
height: 99px;
}
.Pet-Treeling-CottonCandyBlue {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -200px;
width: 81px;
height: 99px;
}
.Pet-Treeling-CottonCandyPink {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -300px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Desert {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -400px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Golden {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -400px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Red {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -400px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Shade {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -400px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Skeleton {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -400px;
width: 81px;
height: 99px;
}
.Pet-Treeling-White {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -400px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Zombie {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -400px;
width: 81px;
height: 99px;
}
.Pet-Turkey-Base {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -500px;
width: 81px;
height: 99px;
}
.Pet-Turkey-Gilded {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -500px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Base {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -500px;
width: 81px;
height: 99px;
}
.Pet-Turtle-CottonCandyBlue {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px 0px;
width: 81px;
height: 99px;
}
.Pet-Turtle-CottonCandyPink {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -100px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Desert {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -200px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Golden {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -300px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Red {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -400px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Shade {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -500px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Skeleton {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px 0px;
width: 81px;
height: 99px;
}
.Pet-Turtle-White {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -600px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Zombie {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Base {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-CottonCandyBlue {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-CottonCandyPink {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Desert {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Golden {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Red {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Shade {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px 0px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Skeleton {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -100px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-White {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -200px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Zombie {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -300px;
width: 81px;
height: 99px;
}
.Pet-Whale-Base {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -400px;
width: 81px;
height: 99px;
}
.Pet-Whale-CottonCandyBlue {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -500px;
width: 81px;
height: 99px;
}
.Pet-Whale-CottonCandyPink {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -600px;
width: 81px;
height: 99px;
}
.Pet-Whale-Desert {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -700px;
width: 81px;
height: 99px;
}
.Pet-Whale-Golden {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -700px;
width: 81px;
height: 99px;
}
.Pet-Whale-Red {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -700px;
width: 81px;
height: 99px;
}
.Pet-Whale-Shade {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -700px;
width: 81px;
height: 99px;
}
.Pet-Whale-Skeleton {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -700px;
width: 81px;
height: 99px;
}
.Pet-Whale-White {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -700px;
width: 81px;
height: 99px;
}
.Pet-Whale-Zombie {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -700px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Base {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -700px;
width: 81px;
height: 99px;
}
.Pet-Wolf-CottonCandyBlue {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -700px;
width: 81px;
height: 99px;
}
.Pet-Wolf-CottonCandyPink {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -700px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Desert {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px 0px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Floral {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -100px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Ghost {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -200px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Golden {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -300px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Peppermint {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -400px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Red {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -500px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Shade {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -600px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Skeleton {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -700px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Spooky {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -800px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Thunderstorm {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -800px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Veteran {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -800px;
width: 81px;
height: 99px;
}
.Pet-Wolf-White {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -800px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Zombie {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -800px;
width: 81px;
height: 99px;
}
.Pet_HatchingPotion_Base {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -459px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_CottonCandyBlue {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -753px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_CottonCandyPink {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -508px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Desert {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -557px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Floral {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -606px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Ghost {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -655px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Golden {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -704px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Peppermint {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Red {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -802px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Shade {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -851px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Skeleton {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -902px 0px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Spooky {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -902px -52px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Thunderstorm {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -902px -104px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_White {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -902px -156px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Zombie {
background-image: url(/spritesmith-main-15.png);
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -902px -208px;
width: 48px;
height: 51px;

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

View file

@ -1,5 +1,4 @@
{
"presets": ["es2015"],
"plugins": ["transform-object-rest-spread"],
"comments": false
}

View file

@ -5,5 +5,8 @@
],
"plugins": [
"html"
]
],
"globals": {
"$": true,
}
}

View file

@ -1,22 +1,36 @@
<!-- Entry point component for the entire app -->
<template lang="pug">
#app.ui.fluid.container
app-header
router-view.view
#app
app-menu
.ui.grid.fluid
app-header
router-view
</template>
<script>
import AppMenu from './components/appMenu';
import AppHeader from './components/appHeader';
export default {
name: 'app',
components: {
AppMenu,
AppHeader,
},
};
</script>
<style lang="less">
// Load CSS that doesn't belong to any specific component
@import './assets/less/index';
</style>
<!-- Load CSS that doesn't belong to any specific component -->
<style src="assets/css/index.css"></style>
<style src="assets/less/index.less" lang="less"></style>
<style scoped>
.ui.fixed.menu + .ui.grid {
padding-top: 0px;
}
.ui.grid {
margin-top: 0px;
}
</style>

View file

@ -0,0 +1 @@
@import './sprites/*.css';

View file

@ -0,0 +1,64 @@
/* TODO adapt paths to new client */
/* These sprites are oversized until a move to 105 avatar box happens */
/* Backer */
.weapon_special_0, .head_special_0 {
width: 105px;
height: 105px;
margin-left: -3px;
margin-top: -18px;
}
.slim_armor_special_0, .broad_armor_special_0, .shield_special_0 {
width: 90px;
height: 90px;
}
/* Critical */
.weapon_special_critical {
background: url('/static/sprites/gif/backer-only/weapon_special_critical.gif') no-repeat;
width: 90px;
height: 90px;
margin-left:-12px;
margin-top:12px;
}
/* This is oversized until a move to 105 avatar box happens*/
.weapon_special_1 {
margin-left: -12px;
}
.broad_armor_special_1, .slim_armor_special_1, .head_special_1 {
width: 90px;
height: 90px;
}
.head_special_0 {
background: url('/static/sprites/gif/backer-only/BackerOnly-Equip-ShadeHelmet.gif') no-repeat;
}
.head_special_1 {
background: url('/static/sprites/gif/backer-only/ContributorOnly-Equip-CrystalHelmet.gif') no-repeat;
margin-top: 3px;
}
.broad_armor_special_0,.slim_armor_special_0 {
background: url('/static/sprites/gif/backer-only/BackerOnly-Equip-ShadeArmor.gif') no-repeat;
}
.broad_armor_special_1,.slim_armor_special_1 {
background: url('/static/sprites/gif/backer-only/ContributorOnly-Equip-CrystalArmor.gif') no-repeat;
}
.shield_special_0 {
background: url('/static/sprites/gif/backer-only/BackerOnly-Shield-TormentedSkull.gif') no-repeat;
}
.weapon_special_0 {
background: url('/static/sprites/gif/backer-only/BackerOnly-Weapon-DarkSoulsBlade.gif') no-repeat;
}
.Pet-Wolf-Cerberus {
width: 105px;
height: 72px;
background: url('/static/sprites/gif/backer-only/BackerOnly-Pet-CerberusPup.gif') no-repeat;
}

View file

@ -0,0 +1,27 @@
/* TODO adapt paths to new client */
/* Comment out for holiday events
.npc_ian {
background: url('/static/sprites/gif/npc_ian.gif') no-repeat;
width: 78px;
height: 135px;
}
*/
.quest_burnout {
background: url('/static/sprites/gif/quest_burnout.gif') no-repeat;
width: 219px;
height: 249px;
}
.quest_bewilder {
background: url('/static/sprites/gif/quest_bewilder.gif') no-repeat;
width: 219px;
height: 219px;
}
[class*='Mount_Head_'],
[class*='Mount_Body_'] {
margin-top: 18px; /* Sprite accommodates 105x123 box */
}

View file

@ -0,0 +1,648 @@
.promo_android {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -857px;
width: 175px;
height: 175px;
}
.promo_backgrounds_armoire_201602 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1156px -573px;
width: 141px;
height: 294px;
}
.promo_backgrounds_armoire_201603 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1298px -573px;
width: 141px;
height: 294px;
}
.promo_backgrounds_armoire_201604 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -452px 0px;
width: 140px;
height: 441px;
}
.promo_backgrounds_armoire_201605 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -452px -442px;
width: 140px;
height: 441px;
}
.promo_backgrounds_armoire_201606 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -140px -525px;
width: 140px;
height: 447px;
}
.promo_backgrounds_armoire_201607 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -525px;
width: 139px;
height: 588px;
}
.promo_backgrounds_armoire_201608 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -875px -442px;
width: 140px;
height: 439px;
}
.promo_backgrounds_armoire_201609 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px 0px;
width: 139px;
height: 438px;
}
.promo_backgrounds_armoire_201610 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -593px -442px;
width: 140px;
height: 441px;
}
.promo_backgrounds_armoire_201611 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -734px 0px;
width: 140px;
height: 441px;
}
.promo_backtoschool {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -1572px;
width: 150px;
height: 150px;
}
.promo_burnout {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1156px -151px;
width: 219px;
height: 240px;
}
.promo_chairs_glasses {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -593px -884px;
width: 51px;
height: 210px;
}
.promo_classes_fall_2014 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -643px -1313px;
width: 321px;
height: 100px;
}
.promo_classes_fall_2015 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -430px -1210px;
width: 377px;
height: 99px;
}
.promo_classes_fall_2016 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -332px;
width: 103px;
height: 348px;
}
.promo_contrib_spotlight_beffymaroo {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1440px -573px;
width: 114px;
height: 147px;
}
.promo_contrib_spotlight_blade {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1714px -1033px;
width: 89px;
height: 111px;
}
.promo_contrib_spotlight_cantras {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1708px -1181px;
width: 87px;
height: 109px;
}
.promo_cow {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -875px 0px;
width: 140px;
height: 441px;
}
.promo_dilatoryDistress {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1505px;
width: 90px;
height: 90px;
}
.promo_egg_mounts {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1156px -868px;
width: 280px;
height: 147px;
}
.promo_enchanted_armoire {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -499px -1114px;
width: 374px;
height: 76px;
}
.promo_enchanted_armoire_201507 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -1332px;
width: 217px;
height: 90px;
}
.promo_enchanted_armoire_201508 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -794px -1461px;
width: 180px;
height: 90px;
}
.promo_enchanted_armoire_201509 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -504px;
width: 90px;
height: 90px;
}
.promo_enchanted_armoire_201511 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px -797px;
width: 122px;
height: 90px;
}
.promo_enchanted_armoire_201601 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1414px;
width: 90px;
height: 90px;
}
.promo_floral_potions {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1661px -332px;
width: 105px;
height: 273px;
}
.promo_ghost_potions {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -593px 0px;
width: 140px;
height: 441px;
}
.promo_habitica {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -681px;
width: 175px;
height: 175px;
}
.promo_habitica_sticker {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -220px;
width: 305px;
height: 304px;
}
.promo_habitoween_2016 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -281px -525px;
width: 140px;
height: 441px;
}
.promo_haunted_hair {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px -439px;
width: 100px;
height: 137px;
}
.promo_item_notif {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -326px -1461px;
width: 249px;
height: 102px;
}
.promo_mystery_201405 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -686px;
width: 90px;
height: 90px;
}
.promo_mystery_201406 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -316px;
width: 90px;
height: 96px;
}
.promo_mystery_201407 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -645px -954px;
width: 42px;
height: 62px;
}
.promo_mystery_201408 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1733px -939px;
width: 60px;
height: 71px;
}
.promo_mystery_201409 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1596px;
width: 90px;
height: 90px;
}
.promo_mystery_201410 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -875px -1030px;
width: 72px;
height: 63px;
}
.promo_mystery_201411 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1050px;
width: 90px;
height: 90px;
}
.promo_mystery_201412 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -688px -884px;
width: 42px;
height: 66px;
}
.promo_mystery_201501 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -795px -1032px;
width: 48px;
height: 63px;
}
.promo_mystery_201502 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1445px -1461px;
width: 90px;
height: 90px;
}
.promo_mystery_201503 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -413px;
width: 90px;
height: 90px;
}
.promo_mystery_201504 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -734px -1032px;
width: 60px;
height: 69px;
}
.promo_mystery_201505 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -777px;
width: 90px;
height: 90px;
}
.promo_mystery_201506 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -645px -884px;
width: 42px;
height: 69px;
}
.promo_mystery_201507 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -210px;
width: 90px;
height: 105px;
}
.promo_mystery_201508 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1351px -1461px;
width: 93px;
height: 90px;
}
.promo_mystery_201509 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1232px;
width: 90px;
height: 90px;
}
.promo_mystery_201510 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1257px -1461px;
width: 93px;
height: 90px;
}
.promo_mystery_201511 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -595px;
width: 90px;
height: 90px;
}
.promo_mystery_201512 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1733px -857px;
width: 60px;
height: 81px;
}
.promo_mystery_201601 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px -888px;
width: 120px;
height: 90px;
}
.promo_mystery_201602 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -868px;
width: 90px;
height: 90px;
}
.promo_mystery_201603 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -959px;
width: 90px;
height: 90px;
}
.promo_mystery_201604 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1069px -1461px;
width: 93px;
height: 90px;
}
.promo_mystery_201605 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1141px;
width: 90px;
height: 90px;
}
.promo_mystery_201606 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -104px;
width: 90px;
height: 105px;
}
.promo_mystery_201607 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px -1323px;
width: 90px;
height: 90px;
}
.promo_mystery_201608 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1163px -1461px;
width: 93px;
height: 90px;
}
.promo_mystery_201609 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -975px -1461px;
width: 93px;
height: 90px;
}
.promo_mystery_201610 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1733px -681px;
width: 63px;
height: 84px;
}
.promo_mystery_3014 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -576px -1461px;
width: 217px;
height: 90px;
}
.promo_new_hair_fall2016 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -734px -442px;
width: 140px;
height: 441px;
}
.promo_orca {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px -691px;
width: 105px;
height: 105px;
}
.promo_partyhats {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1661px -606px;
width: 115px;
height: 47px;
}
.promo_pastel_skin {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -808px -1210px;
width: 330px;
height: 83px;
}
.customize-option.promo_pastel_skin {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -833px -1225px;
width: 60px;
height: 60px;
}
.promo_peppermint_flame {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -875px -882px;
width: 140px;
height: 147px;
}
.promo_pet_skins {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -734px -884px;
width: 140px;
height: 147px;
}
.customize-option.promo_pet_skins {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -759px -899px;
width: 60px;
height: 60px;
}
.promo_pyromancer {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px -577px;
width: 113px;
height: 113px;
}
.promo_rainbow_armor {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1804px 0px;
width: 92px;
height: 103px;
}
.promo_seasonal_shop_fall_2016 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -1313px;
width: 279px;
height: 147px;
}
.promo_shimmer_hair {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1139px -1210px;
width: 330px;
height: 83px;
}
.promo_splashyskins {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -151px -1572px;
width: 198px;
height: 91px;
}
.customize-option.promo_splashyskins {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -176px -1587px;
width: 60px;
height: 60px;
}
.promo_spooky_sparkles_fall_2016 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -306px -220px;
width: 140px;
height: 294px;
}
.promo_spring_classes_2016 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -280px -1313px;
width: 362px;
height: 102px;
}
.promo_springclasses2014 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -965px -1313px;
width: 288px;
height: 90px;
}
.promo_springclasses2015 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1254px -1313px;
width: 288px;
height: 90px;
}
.promo_staff_spotlight_Lemoness {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1440px -721px;
width: 102px;
height: 146px;
}
.promo_staff_spotlight_Viirus {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1427px -392px;
width: 119px;
height: 147px;
}
.promo_staff_spotlight_paglias {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1437px -868px;
width: 99px;
height: 147px;
}
.promo_summer_classes_2014 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -1210px;
width: 429px;
height: 102px;
}
.promo_summer_classes_2015 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -140px -973px;
width: 300px;
height: 88px;
}
.promo_summer_classes_2016 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1156px 0px;
width: 400px;
height: 150px;
}
.promo_takeThis_gear {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -452px -884px;
width: 114px;
height: 87px;
}
.promo_takethis_armor {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1016px -979px;
width: 114px;
height: 87px;
}
.promo_unconventional_armor {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -948px -1030px;
width: 60px;
height: 60px;
}
.promo_unconventional_armor2 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1733px -766px;
width: 70px;
height: 74px;
}
.promo_updos {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -1033px;
width: 156px;
height: 147px;
}
.promo_veteran_pets {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -874px -1114px;
width: 146px;
height: 75px;
}
.promo_winter_classes_2016 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1156px -1016px;
width: 360px;
height: 90px;
}
.promo_winterclasses2015 {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -1461px;
width: 325px;
height: 110px;
}
.promo_winteryhair {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1376px -302px;
width: 152px;
height: 75px;
}
.avatar_variety {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px -1114px;
width: 498px;
height: 95px;
}
.npc_viirus {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -452px -972px;
width: 108px;
height: 90px;
}
.party_preview {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: 0px 0px;
width: 451px;
height: 219px;
}
.scene_coding {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -1181px;
width: 150px;
height: 150px;
}
.scene_phone_peek {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1376px -151px;
width: 150px;
height: 150px;
}
.welcome_basic_avatars {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px 0px;
width: 246px;
height: 165px;
}
.welcome_promo_party {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1156px -392px;
width: 270px;
height: 180px;
}
.welcome_sample_tasks {
background-image: url(/static/sprites/spritesmith-largeSprites-0.png);
background-position: -1557px -166px;
width: 246px;
height: 165px;
}

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,648 @@
.Pet-Spider-CottonCandyBlue {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px 0px;
width: 81px;
height: 99px;
}
.Pet-Spider-CottonCandyPink {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -600px;
width: 81px;
height: 99px;
}
.Pet-Spider-Desert {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px 0px;
width: 81px;
height: 99px;
}
.Pet-Spider-Golden {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -100px;
width: 81px;
height: 99px;
}
.Pet-Spider-Red {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -100px;
width: 81px;
height: 99px;
}
.Pet-Spider-Shade {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -100px;
width: 81px;
height: 99px;
}
.Pet-Spider-Skeleton {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px 0px;
width: 81px;
height: 99px;
}
.Pet-Spider-White {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -100px;
width: 81px;
height: 99px;
}
.Pet-Spider-Zombie {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -200px;
width: 81px;
height: 99px;
}
.Pet-TRex-Base {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px 0px;
width: 81px;
height: 99px;
}
.Pet-TRex-CottonCandyBlue {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -100px;
width: 81px;
height: 99px;
}
.Pet-TRex-CottonCandyPink {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -200px;
width: 81px;
height: 99px;
}
.Pet-TRex-Desert {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -300px;
width: 81px;
height: 99px;
}
.Pet-TRex-Golden {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -400px;
width: 81px;
height: 99px;
}
.Pet-TRex-Red {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -500px;
width: 81px;
height: 99px;
}
.Pet-TRex-Shade {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -500px;
width: 81px;
height: 99px;
}
.Pet-TRex-Skeleton {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -500px;
width: 81px;
height: 99px;
}
.Pet-TRex-White {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -500px;
width: 81px;
height: 99px;
}
.Pet-TRex-Zombie {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -500px;
width: 81px;
height: 99px;
}
.Pet-Tiger-Veteran {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -200px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Base {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -200px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-CottonCandyBlue {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -200px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-CottonCandyPink {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px 0px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Desert {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -100px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Floral {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -200px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Ghost {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -300px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Golden {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -300px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Peppermint {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -300px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Red {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -300px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Shade {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -300px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Skeleton {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px 0px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Spooky {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -100px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Thunderstorm {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -200px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-White {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -300px;
width: 81px;
height: 99px;
}
.Pet-TigerCub-Zombie {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px 0px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Base {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -100px;
width: 81px;
height: 99px;
}
.Pet-Treeling-CottonCandyBlue {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -200px;
width: 81px;
height: 99px;
}
.Pet-Treeling-CottonCandyPink {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -300px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Desert {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -400px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Golden {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -400px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Red {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -400px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Shade {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -400px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Skeleton {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -400px;
width: 81px;
height: 99px;
}
.Pet-Treeling-White {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -400px;
width: 81px;
height: 99px;
}
.Pet-Treeling-Zombie {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -400px;
width: 81px;
height: 99px;
}
.Pet-Turkey-Base {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -500px;
width: 81px;
height: 99px;
}
.Pet-Turkey-Gilded {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -500px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Base {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -500px;
width: 81px;
height: 99px;
}
.Pet-Turtle-CottonCandyBlue {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px 0px;
width: 81px;
height: 99px;
}
.Pet-Turtle-CottonCandyPink {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -100px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Desert {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -200px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Golden {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -300px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Red {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -400px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Shade {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -500px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Skeleton {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px 0px;
width: 81px;
height: 99px;
}
.Pet-Turtle-White {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -600px;
width: 81px;
height: 99px;
}
.Pet-Turtle-Zombie {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Base {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-CottonCandyBlue {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-CottonCandyPink {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Desert {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Golden {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Red {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -600px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Shade {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px 0px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Skeleton {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -100px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-White {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -200px;
width: 81px;
height: 99px;
}
.Pet-Unicorn-Zombie {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -300px;
width: 81px;
height: 99px;
}
.Pet-Whale-Base {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -400px;
width: 81px;
height: 99px;
}
.Pet-Whale-CottonCandyBlue {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -500px;
width: 81px;
height: 99px;
}
.Pet-Whale-CottonCandyPink {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -600px;
width: 81px;
height: 99px;
}
.Pet-Whale-Desert {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -700px;
width: 81px;
height: 99px;
}
.Pet-Whale-Golden {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -700px;
width: 81px;
height: 99px;
}
.Pet-Whale-Red {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -700px;
width: 81px;
height: 99px;
}
.Pet-Whale-Shade {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -700px;
width: 81px;
height: 99px;
}
.Pet-Whale-Skeleton {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -700px;
width: 81px;
height: 99px;
}
.Pet-Whale-White {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -700px;
width: 81px;
height: 99px;
}
.Pet-Whale-Zombie {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -492px -700px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Base {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -574px -700px;
width: 81px;
height: 99px;
}
.Pet-Wolf-CottonCandyBlue {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -656px -700px;
width: 81px;
height: 99px;
}
.Pet-Wolf-CottonCandyPink {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -738px -700px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Desert {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px 0px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Floral {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -100px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Ghost {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -200px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Golden {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -300px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Peppermint {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -400px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Red {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -500px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Shade {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -600px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Skeleton {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -820px -700px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Spooky {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: 0px -800px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Thunderstorm {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -82px -800px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Veteran {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -164px -800px;
width: 81px;
height: 99px;
}
.Pet-Wolf-White {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -246px -800px;
width: 81px;
height: 99px;
}
.Pet-Wolf-Zombie {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -328px -800px;
width: 81px;
height: 99px;
}
.Pet_HatchingPotion_Base {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -459px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_CottonCandyBlue {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -753px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_CottonCandyPink {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -508px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Desert {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -557px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Floral {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -606px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Ghost {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -655px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Golden {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -704px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Peppermint {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -410px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Red {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -802px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Shade {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -851px -800px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Skeleton {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -902px 0px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Spooky {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -902px -52px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Thunderstorm {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -902px -104px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_White {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -902px -156px;
width: 48px;
height: 51px;
}
.Pet_HatchingPotion_Zombie {
background-image: url(/static/sprites/spritesmith-main-15.png);
background-position: -902px -208px;
width: 48px;
height: 51px;
}

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 564 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 311 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 598 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 919 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 844 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 522 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 412 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 845 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 506 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 786 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -0,0 +1,96 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="104px" height="56px" viewBox="0 0 104 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>5E629D7C-1B16-4B17-8A09-5769348D3BB0</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Navigation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Navigation---Desktop-HD" transform="translate(-1336.000000, 0.000000)">
<g id="Navigation">
<g id="Bits" transform="translate(1336.000000, 0.000000)">
<rect id="Rectangle" fill="#6133B4" x="24" y="0" width="8" height="8"></rect>
<rect id="Rectangle-Copy" fill="#4F2A93" x="16" y="0" width="8" height="8"></rect>
<rect id="Rectangle-Copy-40" fill="#4F2A93" x="24" y="8" width="8" height="8"></rect>
<rect id="Rectangle-Copy-100" fill="#432476" x="16" y="8" width="8" height="8"></rect>
<rect id="Rectangle-Copy-21" fill="#432476" x="32" y="0" width="8" height="8"></rect>
<rect id="Rectangle-Copy-41" fill="#432476" x="32" y="8" width="8" height="8"></rect>
<rect id="Rectangle-Copy-24" fill="#4F2A93" x="40" y="0" width="8" height="8"></rect>
<rect id="Rectangle-Copy-42" fill="#432476" x="40" y="8" width="8" height="8"></rect>
<rect id="Rectangle-Copy-28" fill="#432476" x="48" y="0" width="8" height="8"></rect>
<rect id="Rectangle-Copy-43" fill="#6133B4" x="48" y="8" width="8" height="8"></rect>
<rect id="Rectangle-Copy-29" fill="#6133B4" x="56" y="0" width="8" height="8"></rect>
<rect id="Rectangle-Copy-44" fill="#4F2A93" x="56" y="8" width="8" height="8"></rect>
<rect id="Rectangle-Copy-34" fill="#6133B4" x="64" y="0" width="8" height="8"></rect>
<rect id="Rectangle-Copy-45" fill="#4F2A93" x="64" y="8" width="8" height="8"></rect>
<rect id="Rectangle-Copy-35" fill="#4F2A93" x="72" y="0" width="8" height="8"></rect>
<rect id="Rectangle-Copy-46" fill="#6133B4" x="72" y="8" width="8" height="8"></rect>
<rect id="Rectangle-Copy-37" fill="#6133B4" x="80" y="0" width="8" height="8"></rect>
<rect id="Rectangle-Copy-47" fill="#4F2A93" x="80" y="8" width="8" height="8"></rect>
<rect id="Rectangle-Copy-38" fill="#6133B4" x="88" y="0" width="8" height="8"></rect>
<rect id="Rectangle-Copy-48" fill="#4F2A93" x="88" y="8" width="8" height="8"></rect>
<rect id="Rectangle-Copy-39" fill="#432476" x="96" y="0" width="8" height="8"></rect>
<rect id="Rectangle-Copy-49" fill="#6133B4" x="96" y="8" width="8" height="8"></rect>
<rect id="Rectangle-Copy-59" fill="#432476" x="24" y="16" width="8" height="8"></rect>
<rect id="Rectangle-Copy-101" fill="#432476" x="16" y="16" width="8" height="8"></rect>
<rect id="Rectangle-Copy-109" fill="#4F2A93" x="8" y="16" width="8" height="8"></rect>
<rect id="Rectangle-Copy-58" fill="#6133B4" x="32" y="16" width="8" height="8"></rect>
<rect id="Rectangle-Copy-57" fill="#4F2A93" x="40" y="16" width="8" height="8"></rect>
<rect id="Rectangle-Copy-56" fill="#4F2A93" x="48" y="16" width="8" height="8"></rect>
<rect id="Rectangle-Copy-55" fill="#4F2A93" x="56" y="16" width="8" height="8"></rect>
<rect id="Rectangle-Copy-54" fill="#6133B4" x="64" y="16" width="8" height="8"></rect>
<rect id="Rectangle-Copy-53" fill="#4F2A93" x="72" y="16" width="8" height="8"></rect>
<rect id="Rectangle-Copy-52" fill="#432476" x="80" y="16" width="8" height="8"></rect>
<rect id="Rectangle-Copy-51" fill="#4F2A93" x="88" y="16" width="8" height="8"></rect>
<rect id="Rectangle-Copy-50" fill="#4F2A93" x="96" y="16" width="8" height="8"></rect>
<rect id="Rectangle-Copy-69" fill="#432476" x="24" y="24" width="8" height="8"></rect>
<rect id="Rectangle-Copy-102" fill="#6133B4" x="16" y="24" width="8" height="8"></rect>
<rect id="Rectangle-Copy-68" fill="#4F2A93" x="32" y="24" width="8" height="8"></rect>
<rect id="Rectangle-Copy-67" fill="#432476" x="40" y="24" width="8" height="8"></rect>
<rect id="Rectangle-Copy-66" fill="#432476" x="48" y="24" width="8" height="8"></rect>
<rect id="Rectangle-Copy-65" fill="#4F2A93" x="56" y="24" width="8" height="8"></rect>
<rect id="Rectangle-Copy-64" fill="#432476" x="64" y="24" width="8" height="8"></rect>
<rect id="Rectangle-Copy-63" fill="#4F2A93" x="72" y="24" width="8" height="8"></rect>
<rect id="Rectangle-Copy-62" fill="#4F2A93" x="80" y="24" width="8" height="8"></rect>
<rect id="Rectangle-Copy-61" fill="#432476" x="88" y="24" width="8" height="8"></rect>
<rect id="Rectangle-Copy-60" fill="#4F2A93" x="96" y="24" width="8" height="8"></rect>
<rect id="Rectangle-Copy-79" fill="#432476" x="24" y="32" width="8" height="8"></rect>
<rect id="Rectangle-Copy-103" fill="#432476" x="16" y="32" width="8" height="8"></rect>
<rect id="Rectangle-Copy-106" fill="#432476" x="8" y="32" width="8" height="8"></rect>
<rect id="Rectangle-Copy-78" fill="#6133B4" x="32" y="32" width="8" height="8"></rect>
<rect id="Rectangle-Copy-77" fill="#4F2A93" x="40" y="32" width="8" height="8"></rect>
<rect id="Rectangle-Copy-76" fill="#6133B4" x="48" y="32" width="8" height="8"></rect>
<rect id="Rectangle-Copy-75" fill="#432476" x="56" y="32" width="8" height="8"></rect>
<rect id="Rectangle-Copy-74" fill="#4F2A93" x="64" y="32" width="8" height="8"></rect>
<rect id="Rectangle-Copy-73" fill="#6133B4" x="72" y="32" width="8" height="8"></rect>
<rect id="Rectangle-Copy-72" fill="#4F2A93" x="80" y="32" width="8" height="8"></rect>
<rect id="Rectangle-Copy-71" fill="#6133B4" x="88" y="32" width="8" height="8"></rect>
<rect id="Rectangle-Copy-70" fill="#4F2A93" x="96" y="32" width="8" height="8"></rect>
<rect id="Rectangle-Copy-89" fill="#4F2A93" x="24" y="40" width="8" height="8"></rect>
<rect id="Rectangle-Copy-104" fill="#432476" x="16" y="40" width="8" height="8"></rect>
<rect id="Rectangle-Copy-107" fill="#432476" x="8" y="40" width="8" height="8"></rect>
<rect id="Rectangle-Copy-108" fill="#4F2A93" x="0" y="40" width="8" height="8"></rect>
<rect id="Rectangle-Copy-88" fill="#432476" x="32" y="40" width="8" height="8"></rect>
<rect id="Rectangle-Copy-87" fill="#432476" x="40" y="40" width="8" height="8"></rect>
<rect id="Rectangle-Copy-86" fill="#6133B4" x="48" y="40" width="8" height="8"></rect>
<rect id="Rectangle-Copy-85" fill="#6133B4" x="56" y="40" width="8" height="8"></rect>
<rect id="Rectangle-Copy-84" fill="#6133B4" x="64" y="40" width="8" height="8"></rect>
<rect id="Rectangle-Copy-83" fill="#432476" x="72" y="40" width="8" height="8"></rect>
<rect id="Rectangle-Copy-82" fill="#432476" x="80" y="40" width="8" height="8"></rect>
<rect id="Rectangle-Copy-81" fill="#6133B4" x="88" y="40" width="8" height="8"></rect>
<rect id="Rectangle-Copy-80" fill="#432476" x="96" y="40" width="8" height="8"></rect>
<rect id="Rectangle-Copy-99" fill="#6133B4" x="24" y="48" width="8" height="8"></rect>
<rect id="Rectangle-Copy-105" fill="#4F2A93" x="16" y="48" width="8" height="8"></rect>
<rect id="Rectangle-Copy-98" fill="#4F2A93" x="32" y="48" width="8" height="8"></rect>
<rect id="Rectangle-Copy-97" fill="#432476" x="40" y="48" width="8" height="8"></rect>
<rect id="Rectangle-Copy-96" fill="#4F2A93" x="48" y="48" width="8" height="8"></rect>
<rect id="Rectangle-Copy-95" fill="#432476" x="56" y="48" width="8" height="8"></rect>
<rect id="Rectangle-Copy-94" fill="#4F2A93" x="64" y="48" width="8" height="8"></rect>
<rect id="Rectangle-Copy-93" fill="#4F2A93" x="72" y="48" width="8" height="8"></rect>
<rect id="Rectangle-Copy-92" fill="#6133B4" x="80" y="48" width="8" height="8"></rect>
<rect id="Rectangle-Copy-91" fill="#432476" x="88" y="48" width="8" height="8"></rect>
<rect id="Rectangle-Copy-90" fill="#6133B4" x="96" y="48" width="8" height="8"></rect>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.2 KiB

View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>EEA09955-0BD9-4FA6-B404-275F69C78BA0</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Header" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Header---Desktop-HD" transform="translate(-180.000000, -172.000000)">
<g id="Header" transform="translate(0.000000, 56.000000)">
<g id="Experience" transform="translate(180.000000, 116.000000)">
<g id="-g-Experience">
<polygon id="Shape" fill="#FFA623" points="8 8 12 6 8 4 6 0 4 4 0 6 4 8 6 12"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="2.25 6 4.75 4.75 6 6"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="6 9.75 4.75 7.25 6 6"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="9.75 6 7.25 7.25 6 6"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="6 2.25 7.25 4.75 6 6"></polygon>
<polygon id="Shape" fill="#BF7D1A" opacity="0.25" points="9.75 6 7.25 4.75 6 6"></polygon>
<polygon id="Shape" fill="#BF7D1A" opacity="0.5" points="6 9.75 7.25 7.25 6 6"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="2.25 6 4.75 7.25 6 6"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="6 2.25 4.75 4.75 6 6"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="5.4 6.6 4.25 6 5.4 5.4 6 4.25 6.6 5.4 7.75 6 6.6 6.6 6 7.75"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2 KiB

View file

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>9830DCF8-FFC1-4ABB-BD3F-11C30C41F8FE</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Navigation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Navigation---Desktop-HD" transform="translate(-1119.000000, -12.000000)">
<g id="Navigation">
<g id="Gem" transform="translate(1119.000000, 12.000000)">
<g id="-g-Gem" transform="translate(1.000000, 5.000000)">
<polygon id="Shape" fill="#46A7D9" points="8 8 15 23 22 8"></polygon>
<polygon id="Shape" fill="#A9DCF6" points="22 8 15 23 30 8"></polygon>
<polygon id="Shape" fill="#2995CD" points="0 8 15 23 8 8"></polygon>
<polygon id="Shape" fill="#50B5E9" points="4 0 8 8 0 8"></polygon>
<polygon id="Shape" fill="#50B5E9" points="26 0 30 8 22 8"></polygon>
<polygon id="Shape" fill="#50B5E9" points="15 0 22 8 8 8"></polygon>
<polygon id="Shape" fill="#2995CD" points="8 8 4 0 15 0"></polygon>
<polygon id="Shape" fill="#2995CD" points="22 8 26 0 15 0"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>45D3A740-CE56-4F37-90D2-5871CB868045</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Navigation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Navigation---Desktop-HD" transform="translate(-1200.000000, -12.000000)">
<g id="Navigation">
<g id="Gold" transform="translate(1200.000000, 12.000000)">
<g id="-g-Gold" transform="translate(1.000000, 1.000000)">
<circle id="Oval" fill="#FFB445" cx="15" cy="15" r="14"></circle>
<path d="M5.1,24.9 C-0.4,19.4 -0.4,10.6 5.1,5.1 C10.6,-0.4 19.4,-0.4 24.9,5.1" id="Shape" fill="#FFFFFF" opacity="0.3"></path>
<circle id="Oval" fill="#BF8734" cx="15" cy="15" r="12"></circle>
<circle id="Oval" fill="#FFB445" cx="15" cy="15" r="10"></circle>
<path d="M7.9,22.1 C4,18.2 4,11.8 7.9,7.9 C11.8,4 18.1,4 22,7.9" id="Shape" fill="#FFFFFF" opacity="0.3"></path>
<polygon id="Shape" fill="#BF8734" points="17 10 17 14 13 14 13 10 11 10 11 20 13 20 13 16 17 16 17 20 19 20 19 10"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>03D27E53-B4F4-4600-B8F0-7C6348593CE5</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Header" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Header---Desktop-HD" transform="translate(-180.000000, -148.000000)">
<g id="Header" transform="translate(0.000000, 56.000000)">
<g id="Health" transform="translate(180.000000, 92.000000)">
<g id="-g-Health">
<polygon id="Shape" fill="#F74E52" points="0 1.5 2.5 0 6 1.9 9.5 0 12 1.5 12 6 9.5 9.5 6 12 2.5 9.5 0 6"></polygon>
<polygon id="Shape" fill="#FF6165" points="3.2 8.8 1 5.7 1 2.05 2.5 1.15 6 3.05 9.5 1.15 11 2.05 11 5.7 8.8 8.8 6 10.75"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="6 7.25 8.8 8.8 6 10.75"></polygon>
<polygon id="Shape" fill="#B52428" opacity="0.35" points="6 7.25 3.2 8.8 6 10.75"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="3.2 8.8 1 5.7 6 7.25"></polygon>
<polygon id="Shape" fill="#B52428" opacity="0.5" points="8.8 8.8 11 5.7 6 7.25"></polygon>
<polygon id="Shape" fill="#B52428" opacity="0.35" points="6 7.25 9.5 1.15 11 2.05 11 5.7"></polygon>
<polygon id="Shape" fill="#B52428" opacity="0.5" points="6 7.25 2.5 1.15 1 2.05 1 5.7"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="6 7.25 2.5 1.15 6 3.05"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="6 7.25 9.5 1.15 6 3.05"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="4.3 7.7 2.5 5.2 2.5 2.9 2.55 2.9 6 4.75 9.45 2.9 9.5 2.9 9.5 5.2 7.7 7.7 6 8.95"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View file

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="128px" height="28px" viewBox="0 0 128 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>3FAFE54A-3179-4DDB-A979-179E451CC634</title>
<desc>Created with sketchtool.</desc>
<defs>
<polygon id="path-1" points="0 27.7962154 127.812615 27.7962154 127.812615 -9.23076923e-05 0 -9.23076923e-05"></polygon>
</defs>
<g id="Navigation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Navigation---Desktop-HD" transform="translate(-20.000000, -14.000000)">
<g id="Navigation">
<g id="Logo" transform="translate(20.000000, 14.000000)">
<g>
<path d="M24.0521231,26.2991385 C23.2204308,26.2099077 23.2108923,25.8382154 23.2201231,20.8788308 C23.2201231,20.8788308 23.1367385,20.5674462 23.6145846,20.2972923 C24.0921231,20.0277538 25.5453538,17.6182154 24.6524308,15.5631385 C23.7601231,13.5074462 24.4035077,13.6114462 24.7770462,13.8191385 C25.1508923,14.0268308 25.3312,13.7637538 25.1090462,12.6357538 C24.6524308,10.3105231 23.9382769,9.52344615 22.2579692,8.47390769 C21.1539692,7.78436923 21.5536615,6.53390769 23.1235077,6.62621538 C23.8896615,6.67083077 23.8896615,6.67175385 23.9856615,6.07113846 C24.1382769,5.12406154 23.8352,3.50590769 22.6592,3.28252308 C21.8490462,3.12898462 20.8419692,3.99575385 19.6441231,3.39175385 C18.4462769,2.78775385 16.4656615,4.29575385 15.6555077,4.64621538 C14.8456615,4.99667692 14.1770462,4.99975385 13.2530462,4.97729231 C12.3284308,4.95544615 13.7425846,6.50836923 15.1588923,6.85821538 C16.3748923,7.15852308 15.9022769,7.37390769 15.8327385,8.36867692 C15.7552,9.48129231 16.0730462,9.95790769 15.5539692,10.0748308 C14.7576615,10.2532923 13.8684308,8.1136 12.5022769,7.21821538 C9.3992,5.18344615 7.56043077,6.15236923 2.14904615,0.201292308 C1.21089231,-0.831015385 1.59212308,2.35883077 2.17027692,4.06283077 C3.71273846,8.61206154 6.70227692,9.21636923 8.11243077,9.35390769 C9.29150769,9.46929231 10.0955077,9.19483077 10.0955077,9.65021538 C10.0955077,9.97944615 8.70473846,10.1305231 8.16596923,10.1320615 C7.65212308,10.1336 7.06750769,10.0825231 6.40443077,9.95883077 C5.33089231,9.75821538 6.97273846,12.4936 8.02750769,13.3609846 C9.80781538,14.8259077 11.8459692,15.3745231 13.4835077,15.5409846 C13.9567385,15.5889846 14.6296615,15.5803692 14.6296615,15.9517538 C14.6296615,16.3031385 14.2758154,16.3889846 13.8573538,16.3923692 C11.5625846,16.4089846 10.2450462,18.2409846 9.8712,20.3588308 C9.63396923,21.7052923 9.81150769,23.2268308 9.83643077,24.3643692 L9.92535385,25.1763692 C10.1053538,26.6016 4.97766154,27.1514462 4.29858462,24.8542154 C3.55643077,22.3434462 7.60750769,21.0166769 7.68227692,18.6216 C7.72904615,17.1132923 6.34873846,16.4283692 6.34873846,16.4283692 L6.34873846,15.8111385 L6.34873846,14.2240615 L4.76135385,14.2240615 L4.76135385,12.6369846 L3.17427692,12.6369846 L3.17427692,11.0496 L1.58689231,11.0496 L1.58689231,12.6369846 L1.58689231,14.2240615 L1.58689231,15.8111385 L3.17427692,15.8111385 L3.17427692,17.3985231 L4.76135385,17.3985231 L5.78658462,17.3985231 C6.38073846,17.3985231 6.85673846,17.7908308 6.80166154,18.6382154 C6.66504615,20.7317538 2.21335385,22.0176 3.43673846,25.3545231 C4.32104615,27.7659077 8.13335385,27.7960615 11.9496615,27.7960615 L19.0681231,27.7896 C19.2902769,27.7896 19.6022769,27.6831385 19.1481231,26.5348308 C18.7810462,25.6077538 17.5158154,26.2585231 16.4416615,26.2585231 C15.3050462,26.2585231 15.2656615,25.2991385 15.9955077,24.2862154 C16.4416615,23.6677538 17.0096615,23.2080615 17.9745846,22.7585231 C19.4607385,22.0662154 20.5918154,22.9569846 21.1490462,23.7219077 C21.9493538,24.8206769 22.2028923,26.0766769 21.4970462,26.2742154 C20.6459692,26.5117538 20.3841231,26.5434462 20.3555077,27.3539077 C20.3342769,27.9351385 20.6121231,27.7763692 21.9512,27.7763692 L26.3961231,27.7763692 C27.0835077,27.7763692 27.0330462,27.2456 26.3413538,26.3259077 C25.8499692,25.6726769 25.3133538,26.4351385 24.0521231,26.2991385 Z" id="Fill-1" fill="#FFFFFF"></path>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-4"></g>
<polygon id="Fill-3" fill="#FFFFFF" mask="url(#mask-2)" points="0 10.8272923 1.58707692 10.8272923 1.58707692 9.24021538 0 9.24021538"></polygon>
<path d="M113.986,19.8937538 C113.381077,19.4272923 112.511538,19.5389846 112.043846,20.1445231 C111.504769,20.8439077 110.689692,21.2451385 109.808462,21.2451385 C108.316462,21.2451385 107.083538,20.0848308 106.993077,18.5996 C106.99,18.3854462 106.987846,16.8519077 106.987846,16.6525231 C106.987846,15.0971385 108.253077,13.8319077 109.808462,13.8319077 C110.589385,13.8319077 111.315846,14.1439077 111.854308,14.7106769 C112.381077,15.2651385 113.257385,15.2879077 113.811846,14.7611385 C114.366308,14.2346769 114.389077,13.3583692 113.862308,12.8039077 C112.811538,11.6971385 111.333692,11.0626769 109.808462,11.0626769 C106.726,11.0626769 104.218615,13.5700615 104.218615,16.6525231 C104.218615,16.6716 104.219231,18.5900615 104.226923,18.7312923 C104.387846,21.6937538 106.839231,24.0143692 109.808462,24.0143692 C111.555231,24.0143692 113.169077,23.2205231 114.236769,21.8359077 C114.703846,21.2303692 114.591538,20.3608308 113.986,19.8937538" id="Fill-5" fill="#FFFFFF" mask="url(#mask-2)"></path>
<path d="M122.222769,21.2450154 C120.731077,21.2450154 119.498462,20.0850154 119.407692,18.6007077 C119.404615,18.3853231 119.402462,16.8450154 119.402462,16.6524 C119.402462,15.0973231 120.667692,13.8317846 122.222769,13.8317846 C123.778154,13.8317846 125.043385,15.0973231 125.043385,16.6524 C125.043385,16.8520923 125.041231,18.3856308 125.037846,18.5979385 C124.948308,20.0840923 123.715385,21.2450154 122.222769,21.2450154 M126.428,10.8231692 C125.782769,10.8231692 125.245231,11.2665538 125.091692,11.8637846 C124.251692,11.3588615 123.272308,11.0625538 122.222769,11.0625538 C119.140615,11.0625538 116.633231,13.5702462 116.633231,16.6524 C116.633231,16.6717846 116.634154,18.5893231 116.641231,18.7311692 C116.802154,21.6936308 119.253846,24.0142462 122.222769,24.0142462 C123.297538,24.0142462 124.302462,23.7068615 125.157538,23.1782462 C125.370154,23.6699385 125.858462,24.0142462 126.428,24.0142462 C127.192615,24.0142462 127.812615,23.3942462 127.812615,22.6296308 L127.812615,16.6773231 L127.812615,16.6524 L127.812615,12.2077846 C127.812615,11.4431692 127.192615,10.8231692 126.428,10.8231692" id="Fill-6" fill="#FFFFFF" mask="url(#mask-2)"></path>
<path d="M58.8612923,21.2450154 C57.3692923,21.2450154 56.1366769,20.0847077 56.0462154,18.5994769 C56.0428308,18.3856308 56.0406769,16.8520923 56.0406769,16.6524 C56.0406769,15.0973231 57.3059077,13.8317846 58.8612923,13.8317846 C60.4166769,13.8317846 61.6819077,15.0973231 61.6819077,16.6524 C61.6819077,16.8520923 61.6797538,18.3856308 61.6763692,18.5979385 C61.5868308,20.0840923 60.3539077,21.2450154 58.8612923,21.2450154 M63.0665231,10.8231692 C62.4212923,10.8231692 61.8837538,11.2665538 61.7302154,11.8637846 C60.8902154,11.3588615 59.9108308,11.0625538 58.8612923,11.0625538 C55.7788308,11.0625538 53.2714462,13.5702462 53.2714462,16.6524 C53.2714462,16.6717846 53.2720615,18.5899385 53.2797538,18.7311692 C53.4406769,21.6936308 55.8923692,24.0142462 58.8612923,24.0142462 C59.9360615,24.0142462 60.9409846,23.7068615 61.7960615,23.1782462 C62.0086769,23.6699385 62.4969846,24.0142462 63.0665231,24.0142462 C63.8311385,24.0142462 64.4511385,23.3942462 64.4511385,22.6296308 L64.4511385,16.6773231 L64.4511385,16.6524 L64.4511385,12.2077846 C64.4511385,11.4431692 63.8311385,10.8231692 63.0665231,10.8231692" id="Fill-7" fill="#FFFFFF" mask="url(#mask-2)"></path>
<path d="M83.4511385,10.8231385 C82.6865231,10.8231385 82.0665231,11.4431385 82.0665231,12.2077538 L82.0665231,22.6296 C82.0665231,23.3942154 82.6865231,24.0142154 83.4511385,24.0142154 C84.2157538,24.0142154 84.8357538,23.3942154 84.8357538,22.6296 L84.8357538,12.2077538 C84.8357538,11.4431385 84.2157538,10.8231385 83.4511385,10.8231385" id="Fill-8" fill="#FFFFFF" mask="url(#mask-2)"></path>
<path d="M99.7588308,10.8231385 C98.9942154,10.8231385 98.3742154,11.4431385 98.3742154,12.2077538 L98.3742154,22.6296 C98.3742154,23.3942154 98.9942154,24.0142154 99.7588308,24.0142154 C100.523446,24.0142154 101.143446,23.3942154 101.143446,22.6296 L101.143446,12.2077538 C101.143446,11.4431385 100.523446,10.8231385 99.7588308,10.8231385" id="Fill-9" fill="#FFFFFF" mask="url(#mask-2)"></path>
<path d="M76.2663385,18.6008 C76.1752615,20.0851077 74.9426462,21.2451077 73.4512615,21.2451077 C71.9589538,21.2451077 70.7263385,20.0848 70.6358769,18.5977231 C70.6324923,18.3841846 70.6306462,16.8518769 70.6306462,16.6524923 C70.6306462,15.0971077 71.8958769,13.8318769 73.4512615,13.8318769 C75.0060308,13.8318769 76.2715692,15.0971077 76.2715692,16.6524923 C76.2715692,16.8451077 76.2694154,18.3854154 76.2663385,18.6008 M73.4512615,11.0626462 C72.4217231,11.0626462 71.4595692,11.3472615 70.6306462,11.8346462 L70.6306462,6.66510769 C70.6306462,5.90049231 70.0106462,5.28049231 69.2460308,5.28049231 C68.4811077,5.28049231 67.8614154,5.90049231 67.8614154,6.66510769 L67.8614154,16.6524923 L67.8614154,16.6774154 L67.8614154,22.6297231 C67.8614154,23.3943385 68.4811077,24.0143385 69.2460308,24.0143385 C69.8155692,24.0143385 70.3038769,23.6697231 70.5164923,23.1783385 C71.3715692,23.7069538 72.3761846,24.0143385 73.4512615,24.0143385 C76.4201846,24.0143385 78.8718769,21.6937231 79.0328,18.7263385 C79.0398769,18.5894154 79.0408,16.6715692 79.0408,16.6524923 C79.0408,13.5700308 76.5331077,11.0626462 73.4512615,11.0626462" id="Fill-10" fill="#FFFFFF" mask="url(#mask-2)"></path>
<path d="M45.6635692,11.0626462 C44.7088,11.0626462 43.7949538,11.3017231 42.9900308,11.7398769 L42.9900308,6.66510769 C42.9900308,5.90049231 42.3700308,5.28049231 41.6054154,5.28049231 C40.8404923,5.28049231 40.2208,5.90049231 40.2208,6.66510769 L40.2208,22.6297231 C40.2208,23.3943385 40.8404923,24.0143385 41.6054154,24.0143385 C42.3700308,24.0143385 42.9900308,23.3943385 42.9900308,22.6297231 L42.9900308,15.4731077 C43.0955692,15.3832615 43.1931077,15.2817231 43.2709538,15.1580308 C43.7909538,14.3275692 44.6854154,13.8318769 45.6635692,13.8318769 C47.2186462,13.8318769 48.4838769,15.0971077 48.4838769,16.6524923 C48.4838769,16.9060308 48.4817231,22.2869538 48.4780308,22.5955692 C48.4595692,23.3435692 49.0404923,23.9743385 49.7918769,24.0124923 C49.8158769,24.0137231 49.8398769,24.0143385 49.8635692,24.0143385 C50.5958769,24.0143385 51.2078769,23.4398769 51.2454154,22.7001846 C51.2521846,22.5632615 51.2531077,16.7112615 51.2531077,16.6524923 C51.2531077,13.5700308 48.7457231,11.0626462 45.6635692,11.0626462" id="Fill-11" fill="#FFFFFF" mask="url(#mask-2)"></path>
<path d="M94.5025231,10.8231385 L92.8871385,10.8231385 L92.8871385,6.66498462 C92.8871385,5.90036923 92.2671385,5.28036923 91.5025231,5.28036923 C90.7379077,5.28036923 90.1179077,5.90036923 90.1179077,6.66498462 L90.1179077,10.8231385 L88.5025231,10.8231385 C87.7379077,10.8231385 87.1179077,11.4431385 87.1179077,12.2077538 C87.1179077,12.9723692 87.7379077,13.5923692 88.5025231,13.5923692 L90.1179077,13.5923692 L90.1179077,22.6296 C90.1179077,23.3942154 90.7379077,24.0142154 91.5025231,24.0142154 C92.2671385,24.0142154 92.8871385,23.3942154 92.8871385,22.6296 L92.8871385,13.5923692 L94.5025231,13.5923692 C95.2671385,13.5923692 95.8871385,12.9723692 95.8871385,12.2077538 C95.8871385,11.4431385 95.2671385,10.8231385 94.5025231,10.8231385" id="Fill-12" fill="#FFFFFF" mask="url(#mask-2)"></path>
<path d="M84.7845538,6.66495385 C84.7845538,7.42956923 84.1645538,8.04956923 83.3999385,8.04956923 C82.6353231,8.04956923 82.0153231,7.42956923 82.0153231,6.66495385 C82.0153231,5.90033846 82.6353231,5.28033846 83.3999385,5.28033846 C84.1645538,5.28033846 84.7845538,5.90033846 84.7845538,6.66495385" id="Fill-13" fill="#FF6066" mask="url(#mask-2)"></path>
<path d="M101.092246,6.66495385 C101.092246,7.42956923 100.472246,8.04956923 99.7076308,8.04956923 C98.9430154,8.04956923 98.3230154,7.42956923 98.3230154,6.66495385 C98.3230154,5.90033846 98.9430154,5.28033846 99.7076308,5.28033846 C100.472246,5.28033846 101.092246,5.90033846 101.092246,6.66495385" id="Fill-14" fill="#4FB5E8" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 12 KiB

View file

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>7E7FE8AE-769F-4424-8713-31DAA23B5DA6</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Header" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Header---Desktop-HD" transform="translate(-180.000000, -196.000000)">
<g id="Header" transform="translate(0.000000, 56.000000)">
<g id="Magic" transform="translate(180.000000, 140.000000)">
<g id="-g-Magic" transform="translate(1.000000, 0.000000)">
<polygon id="Shape" fill="#2995CD" points="10 7.5 5 12 0 7.5 5 0"></polygon>
<polygon id="Shape" fill="#50B5E9" points="1.3 7.35 5 5.85 5 10.65"></polygon>
<polygon id="Shape" fill="#1F709A" opacity="0.25" points="5 5.85 8.7 7.35 5 10.65"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.25" points="5 5.85 5 1.8 8.7 7.35"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="1.3 7.35 5 1.8 5 5.85"></polygon>
<polygon id="Shape" fill="#FFFFFF" opacity="0.5" points="2.6 7.15 5 3.6 7.4 7.15 5 9.3"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>3FDC9D95-73E9-4C8D-990F-8CC8EC415CCD</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Navigation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Navigation---Desktop-HD" transform="translate(-1324.000000, -12.000000)" fill="#D5C8FF">
<g id="Navigation">
<g id="Notifications" transform="translate(1324.000000, 12.000000)">
<path d="M26,4 L6,4 C4.3,4 3,5.3 3,7 L3,21 C3,22.7 4.3,24 6,24 L11,24 L13.9,27.1 C15.1,28.3 17,28.3 18.1,27.1 L21,24 L26,24 C27.7,24 29,22.7 29,21 L29,7 C29,5.3 27.7,4 26,4 L26,4 Z M27,21 C27,21.6 26.6,22 26,22 L20.1,22 L16.6,25.7 C16.4,25.9 16.2,26 16,26 C15.8,26 15.6,25.9 15.3,25.7 L11.9,22 L6,22 C5.4,22 5,21.6 5,21 L5,7 C5,6.4 5.4,6 6,6 L26,6 C26.6,6 27,6.4 27,7 L27,21 L27,21 Z M24,11 L8,11 L8,9 L24,9 L24,11 L24,11 Z M24,15 L8,15 L8,13 L24,13 L24,15 L24,15 Z M24,19 L8,19 L8,17 L24,17 L24,19 L24,19 Z"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>E4029491-6F2E-4C6A-9D7A-E4F780C314B9</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Navigation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Navigation---Desktop-HD" transform="translate(-1376.000000, -12.000000)" fill="#FFFFFF">
<g id="Navigation">
<g id="User" transform="translate(1376.000000, 12.000000)">
<path d="M20,17 L19.6,17 C21.5,15.8 22.9,13.7 23,11.2 C23.1,7.4 19.9,4 16.1,4 C12.1,4 9,7.1 9,11 C9,13.6 10.3,15.8 12.4,17 L12,17 C8.1,17 5,20.1 5,24 L5,25 C5,26.7 6.3,28 8,28 L24,28 C25.7,28 27,26.7 27,25 L27,24 C27,20.1 23.9,17 20,17 L20,17 Z M11,11 C11,8.2 13.2,6 16,6 C18.8,6 21,8.2 21,11 C21,13.8 18.8,16 16,16 C13.2,16 11,13.8 11,11 L11,11 Z M24,26 L8,26 C7.4,26 7,25.6 7,25 L7,24 C7,21.2 9.2,19 12,19 L20,19 C22.8,19 25,21.2 25,24 L25,25 C25,25.6 24.6,26 24,26 L24,26 Z"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -1,3 +1,9 @@
// CSS that doesn't belong to any specific Vue compoennt
@import './semantic-ui/semantic.less';
@import './loading-screen';
@import './loading-screen';
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

View file

@ -37,7 +37,7 @@
// & { @import "~semantic-ui-less/definitions/collections/breadcrumb"; }
// & { @import "~semantic-ui-less/definitions/collections/form"; }
& { @import "~semantic-ui-less/definitions/collections/grid"; }
// & { @import "~semantic-ui-less/definitions/collections/menu"; }
& { @import "~semantic-ui-less/definitions/collections/menu"; }
// & { @import "~semantic-ui-less/definitions/collections/message"; }
// & { @import "~semantic-ui-less/definitions/collections/table"; }
@ -53,12 +53,12 @@
// & { @import "~semantic-ui-less/definitions/modules/accordion"; }
// & { @import "~semantic-ui-less/definitions/modules/checkbox"; }
// & { @import "~semantic-ui-less/definitions/modules/dimmer"; }
// & { @import "~semantic-ui-less/definitions/modules/dropdown"; }
& { @import "~semantic-ui-less/definitions/modules/dropdown"; }
// & { @import "~semantic-ui-less/definitions/modules/embed"; }
// & { @import "~semantic-ui-less/definitions/modules/modal"; }
// & { @import "~semantic-ui-less/definitions/modules/nag"; }
// & { @import "~semantic-ui-less/definitions/modules/popup"; }
// & { @import "~semantic-ui-less/definitions/modules/progress"; }
& { @import "~semantic-ui-less/definitions/modules/progress"; }
// & { @import "~semantic-ui-less/definitions/modules/rating"; }
// & { @import "~semantic-ui-less/definitions/modules/search"; }
// & { @import "~semantic-ui-less/definitions/modules/shape"; }

View file

@ -0,0 +1,19 @@
// Add classes for colored text and backgrounds
// See https://github.com/Semantic-Org/Semantic-UI/issues/1885#issuecomment-226047499
@colors: blue, green, orange, pink, purple, red, teal, yellow, black, grey, white;
/* .text {
.-(@i: length(@colors)) when (@i > 0) {
@c: extract(@colors, @i);
&.@{c} { color: @@c }
.-((@i - 1));
}.-;
}
.background {
.-(@i: length(@colors)) when (@i > 0) {
@c: extract(@colors, @i);
&.@{c} { background-color: @@c }
.-((@i - 1));
}.-;
} */

View file

@ -1,2 +1,13 @@
// Disable google fonts
@importGoogleFonts: false;
@importGoogleFonts: false;
// Set font
@globalFont: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@pageFont: @globalFont;
@headerFont: @globalFont;
// Define custom colors
@red : #f74e52;
@yellow : #ffb445;
@blue : #50b5e9;

View file

@ -1,24 +1,127 @@
<template lang="pug">
#app-header
h1 {{title}}
ul
li
router-link(to='/') Home
li
router-link(to='/page') Another Page
#app-header.row
avatar#header-avatar(:user="$store.state.user")
.eight.wide.column
span.character-name {{user.profile.name}}
span.character-level Lvl {{user.stats.lvl}}
.progress-container
img.icon(src="~assets/header/png/health@3x.png")
.ui.progress.red
.bar(:style="{width: `${percent(user.stats.hp, maxHealth)}%`}")
span {{user.stats.hp | round}} / {{maxHealth}}
.progress-container
img.icon(src="~assets/header/png/experience@3x.png")
.ui.progress.yellow
.bar(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
span {{user.stats.exp | round}} / {{toNextLevel}}
.progress-container(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
img.icon(src="~assets/header/png/magic@3x.png")
.ui.progress.blue
.bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
span {{user.stats.mp | round}} / {{maxMP}}
</template>
<script>
import { mapState } from '../store';
export default {
computed: mapState(['title']),
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
color: #42b983;
#app-header {
padding: 0px 0px 0px 20px;
margin-top: 56px;
background: #36205d;
margin-left: 1rem;
height: 192px;
color: #d5c8ff;
}
.character-name {
display: block;
font-size: 16px;
margin-top: 32px;
line-height: 1.5;
color: #fff;
font-weight: bold;
}
.character-level {
display: block;
font-size: 12px;
margin-top: 4px;
margin-bottom: 20px;
line-height: 1;
}
#header-avatar {
margin-top: 24px;
box-shadow: 0 2px 4px 0 rgba(53, 32, 93, 0.4);
}
.progress-container {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.progress-container > span {
font-size: 12px;
margin-left: 10px;
line-height: 1em;
}
.progress-container > .icon {
width: 12px;
height: 12px;
margin-right: 10px;
}
.progress-container > .ui.progress {
width: 203px;
margin: 0px;
border-radius: 0px;
height: 12px;
background-color: rgba(0, 0, 0, 0.35);
}
.progress-container > .ui.progress > .bar {
border-radius: 0px;
height: 12px;
min-width: 0px;
}
</style>
<script>
import Avatar from './avatar';
import { mapState } from '../store';
import { toNextLevel } from '../../common/script/statHelpers';
import { MAX_HEALTH as maxHealth } from '../../common/script/constants';
import statsComputed from '../../common/script/libs/statsComputed';
import percent from '../../common/script/libs/percent';
export default {
name: 'header',
components: {
Avatar,
},
filters: {
percent,
round (val) {
return Math.round(val * 100) / 100;
},
},
methods: {
percent,
},
data () {
return {
maxHealth,
};
},
computed: {
...mapState(['user']),
maxMP () {
return statsComputed(this.user).maxMP;
},
toNextLevel () { // Exp to next level
return toNextLevel(this.user.stats.lvl);
},
},
};
</script>

View file

@ -0,0 +1,220 @@
<template lang="pug">
// TODO srcset / svg images
#app-menu.ui.top.fixed.menu
.header.item
img(src="~assets/header/png/logo@3x.png")
router-link.item(to="/", exact) Tasks
// .simple makes it possible to have a dropdown without JS
.ui.simple.dropdown
router-link.item(to="/inventory", :class="{'router-link-active': $route.path.startsWith('/inventory')}") Inventory
.menu
router-link.item(to="/inventory") Inventory
router-link.item(to="/inventory/stable") Stable
router-link.item(to="/inventory/equipment") Equipment
router-link.item(to="/market") Market
.ui.simple.dropdown
router-link.item(to="/social/tavern", :class="{'router-link-active': $route.path.startsWith('/social')}") Social
.menu
router-link.item(to="/social/tavern") Tavern
router-link.item(to="/social/inbox") Inbox
router-link.item(to="/social/challenges") Challenges
router-link.item(to="/social/party") Party
router-link.item(to="/social/guilds") Guilds
.ui.simple.dropdown
router-link.item(to="/help", :class="{'router-link-active': $route.path.startsWith('/help')}") Help
.menu
router-link.item(to="/help/faq") Faq
router-link.item(to="/help/report-bug") Report a bug
router-link.item(to="/help/request-feature") Request a feature
.right.menu
.item.with-img
img(src="~assets/header/png/gem@3x.png")
span {{userGems}}
.item.with-img.gp-icon
img(src="~assets/header/png/gold@3x.png")
span {{Math.floor(user.stats.gp * 100) / 100}}
a.item.with-img.notifications-dropdown
img(src="~assets/header/png/notifications@3x.png")
.ui.simple.dropdown.pointing
router-link.item.with-img.user-dropdown(to="/user/avatar")
// TODO icons should be white when active
img(src="~assets/header/png/user@3x.png")
.menu
.item.user-edit-avatar
strong {{user.profile.name}}
a Edit avatar
.divider
router-link.item(to="/user/stats") Stats
router-link.item(to="/user/achievements") Achievements
.divider
router-link.item(to="/user/settings") Settings
.divider
router-link.item(to="/logout") Logout
</template>
<style lang="less">
#app-menu {
background: #432874 url(~assets/header/png/bits.png) right no-repeat;
border-bottom: 0px;
.item {
font-size: 16px !important;
line-height: 1.5;
&.header {
width: 256px;
padding-left: 20px;
img {
width: 128px;
height: 28px;
}
}
}
}
#app-menu .item:not(.header) img {
vertical-align: middle;
width: 32px;
height: 32px;
margin: 0 auto;
}
#app-menu .right.menu .item.with-img {
padding-left: 0px;
padding-right: 0px;
margin-right: 20px;
}
#app-menu .right.menu .item.with-img.user-dropdown, #app-menu .right.menu .item.with-img.notifications-dropdown{
width: 56px;
}
#app-menu .right.menu .item.with-img.user-dropdown, #app-menu .right.menu .item.with-img.notifications-dropdown {
width: 56px;
}
#app-menu .right.menu .item.with-img.notifications-dropdown {
margin-right: 0px;
}
#app-menu .right.menu .item.with-img.gp-icon {
margin-right: 40px;
}
#app-menu .right.menu .item.with-img img + span {
margin-left: 10px;
}
.ui.menu .right.menu .ui.simple.dropdown > .item::before {
right: auto;
left: 0;
}
#app-menu > .item, #app-menu > .right.menu > .item, #app-menu .dropdown > .item {
height: 56px;
font-weight: bold;
text-align: center;
padding: 16px 20px;
color: #fff;
}
#app-menu > .item::before, #app-menu > .right.menu > .item::before, #app-menu .dropdown > .item::before {
width: 0px;
}
#app-menu > .item:not(.header):hover, #app-menu > .dropdown:hover {
background-color: #6133b4;
}
#app-menu > .item.router-link-active, #app-menu > .dropdown > .item.router-link-active {
box-shadow: 0px -4px 0px #6133b4 inset;
}
#app-menu > .dropdown > .menu {
border: none;
background-color:rgba(0, 0, 0, 0.5); // transparent
}
#app-menu > .dropdown > .menu > .item:last-child {
border-radius: 0px 0px 4px 4px !important;
}
#app-menu > .dropdown .menu > .item {
/* !important to override Semantic UI's !important */
width: 217px;
background: #6133b4 !important;
color: #fff !important;
padding: 6px 0px 6px 20px !important;
}
#app-menu > .dropdown .menu > .item:hover {
background: #4f2a93 !important; /* to override Semantic UI's !important */
}
#app-menu .ui.pointing.dropdown .menu .item {
padding-top: 12px !important;
padding-bottom: 12px !important;
color: #616162 !important;
}
#app-menu .ui.pointing.dropdown .menu .item {
padding-top: 12px !important;
padding-bottom: 12px !important;
color: #616162 !important;
}
#app-menu .ui.pointing.dropdown .menu .item:nth-child(3) {
padding-bottom: 8px !important;
}
#app-menu .ui.pointing.dropdown .menu .item:nth-child(4) {
padding-top: 8px !important;
}
#app-menu .ui.pointing.dropdown .menu {
width: 200px;
margin-right: 20px;
margin-top: 0px;
}
#app-menu .ui.pointing.dropdown .menu .item:hover {
background: #fff !important;
color: #6133b4 !important;
}
#app-menu .ui.pointing.dropdown > .menu::after {
top: -0.50em;
left: 85.3%;
width: 1em;
height: 1em;
}
#app-menu .ui.pointing.dropdown .divider {
margin: 0px;
}
#app-menu .user-edit-avatar strong, #app-menu .user-edit-avatar strong:hover {
color: #313131;
margin-top: -3px;
flex-grow: 1;
display: block;
}
#app-menu .user-edit-avatar a, #app-menu .user-edit-avatar a:hover {
font-size: 13px;
line-height: 1.23;
color: #6133b4;
}
</style>
<script>
import { mapState, mapGetters } from '../store';
export default {
computed: {
...mapGetters(['userGems']),
...mapState(['user']),
},
};
</script>

View file

@ -0,0 +1,133 @@
<template lang="pug">
.avatar(:style="{width, height, paddingTop}", :class="backgroundClass")
// TODO
// addthis
// cast spell (on click)
// buffs
// user level and username, rebirth icon, ...
.character-sprites
template(v-if="!avatarOnly" v-once)
// Mount
span(v-if="user.items.currentMount", :class="'Mount_Body_' + user.items.currentMount")
// Buffs that cause visual changes to avatar: Snowman, Ghost, Flower, etc
template(v-for="(klass, item) in visualBuffs")
span(v-if="user.stats.buffs[item]", :class="klass")
// Show flower ALL THE TIME!!!
// See https://github.com/HabitRPG/habitrpg/issues/7133
span(:class="'hair_flower_' + user.preferences.hair.flower")
// Show avatar only if not currently affected by visual buff
template(v-if!="!user.stats.buffs.snowball && !user.stats.buffs.spookySparkles && !user.stats.buffs.shinySeed && !user.stats.buffs.seafoam")
span(:class="'chair_' + user.preferences.chair")
span(:class="user.items.gear[costumeClass].back")
span(:class="skinClass")
span(:class="user.preferences.size + '_shirt_' + user.preferences.shirt")
span(:class="user.preferences.size + '_' + user.items.gear[costumeClass].armor")
span(:class="user.items.gear[costumeClass].back_collar")
span(:class="user.items.gear[costumeClass].body")
span.head_0
template(v-for="type in ['base', 'bangs', 'mustache', 'beard']")
span(:class="'hair_' + type + '_' + user.preferences.hair[type] + '_' + user.preferences.hair.color")
span(:class="user.items.gear[costumeClass].eyewear")
span(:class="user.items.gear[costumeClass].head")
span(:class="user.items.gear[costumeClass].headAccessory")
span(:class="'hair_flower_' + user.preferences.hair.flower")
span(:class="user.items.gear[costumeClass].shield")
span(:class="user.items.gear[costumeClass].weapon")
// Resting
span.zzz(v-if="user.preferences.sleep")
template(v-if="!avatarOnly" v-once)
// Mount Head
span(v-if="user.items.currentMount", :class="'Mount_Head_' + user.items.currentMount")
// Pet
span.current-pet(v-if="user.items.currentPet", :class="'Pet-' + user.items.currentPet")
</template>
<style scoped>
.avatar {
max-width: 140px;
max-height: 147px;
image-rendering: pixelated;
}
.character-sprites {
margin: 0 auto;
width: 90px;
height: 90px;
}
.character-sprites span {
position: absolute;
}
.current-pet {
bottom: 21px;
left: 20px;
}
</style>
<script>
export default {
name: 'avatar',
props: {
user: {
type: Object,
required: true,
},
avatarOnly: {
type: Boolean,
default: false,
},
width: {
type: Number,
default: 140,
},
height: {
type: Number,
default: 147,
},
},
computed: {
paddingTop () {
let val = '28px';
if (!this.avatarOnly) {
if (this.user.items.currentPet) val = '24.5px';
if (this.user.items.currentMount) val = '0px';
}
return val;
},
backgroundClass () {
let background = this.user.preferences.background;
if (background && !this.avatarOnly) {
return `background_${this.user.preferences.background}`;
}
return '';
},
visualBuffs () {
return {
snowball: 'snowman',
spookySparkles: 'ghost',
shinySeed: `avatar_floral_${this.user.stats.class}`,
seafoam: 'seafoam_star',
};
},
skinClass () {
let baseClass = `skin_${this.user.preferences.skin}`;
return `${baseClass}${this.user.preferences.sleep ? '_sleep' : ''}`;
},
costumeClass () {
return this.user.preferences.costume ? 'costume' : 'equipped';
},
},
};
</script>

View file

@ -1,24 +0,0 @@
<template lang="pug">
div
p {{ msg }}
p Welcome back {{profileName}}!
p You have {{tasksCount}} tasks!
</template>
<script>
import { mapState, mapGetters } from '../store';
export default {
data () {
return {
msg: 'You\'re on the Home page!',
};
},
computed: {
...mapState({
tasksCount: (state) => state.tasks.length,
}),
...mapGetters(['profileName']),
},
};
</script>

View file

@ -1,13 +1,11 @@
<template lang="pug">
p {{ msg }}
.row
.sixteen.wide.column
h2 Page
p {{ $route.path }}
</template>
<script>
export default {
data () {
return {
msg: 'You\'re on Another Page!',
};
},
};
</script>

View file

@ -0,0 +1,11 @@
<template lang="pug">
.row
.sixteen.wide.column
h2 Parent Page
router-view.row
</template>
<script>
export default {
};
</script>

View file

@ -0,0 +1,28 @@
<template lang="pug">
.row
.sixteen.wide.column
p You have {{tasksCount}} tasks!
.four.wide.column(v-for="taskType in tasksTypes")
h3 {{taskType}}s ()
ul
li(v-for="task in tasks", v-if="task.type === taskType", :key="task.id")
span {{task.text}}
</template>
<script>
import { mapState } from '../store';
export default {
data () {
return {
tasksTypes: ['habit', 'daily', 'todo', 'reward'],
};
},
computed: {
...mapState(['tasks']),
...mapState({
tasksCount: (state) => state.tasks.length,
}),
},
};
</script>

View file

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Habitica</title>
</head>
<body>

View file

@ -1,6 +1,7 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/home';
import UserTasks from './components/userTasks';
import ParentPage from './components/parentPage';
import Page from './components/page';
Vue.use(VueRouter);
@ -9,7 +10,37 @@ export default new VueRouter({
mode: 'history',
base: process.env.NODE_ENV === 'production' ? '/new-app' : __dirname, // eslint-disable-line no-process-env
routes: [
{ path: '/', component: Home },
{ path: '/page', component: Page },
{ path: '/', component: UserTasks },
{
path: '/inventory',
component: ParentPage,
children: [
{path: '', component: Page},
{path: 'equipment', component: Page},
{path: 'stable', component: Page},
],
},
{ path: '/market', component: Page },
{
path: '/social',
component: ParentPage,
children: [
{path: 'tavern', component: Page},
{path: 'inbox', component: Page},
{path: 'challenges', component: Page},
{path: 'party', component: Page},
{path: 'guilds', component: Page},
],
},
{
path: '/user',
component: ParentPage,
children: [
{path: 'avatar', component: Page},
{path: 'stats', component: Page},
{path: 'achievements', component: Page},
{path: 'settings', component: Page},
],
},
],
});

View file

@ -1,15 +1,3 @@
export function profileName ({ state }) {
let userProfileName = state.user.profile && state.user.profile.name;
if (!userProfileName) {
if (state.user.auth.local && state.user.auth.local.username) {
userProfileName = state.user.auth.local.username;
} else if (state.user.auth.facebook) {
userProfileName = state.user.auth.facebook.displayName || state.user.auth.facebook.username;
} else {
userProfileName = 'Anonymous';
}
}
return userProfileName;
export function userGems (store) {
return store.state.user.balance * 4;
}

View file

@ -0,0 +1,3 @@
{
"presets": ["es2015"],
}

View file

@ -18,7 +18,7 @@ module.exports = function staticMiddleware (expressApp) {
// TODO move all static files to a single location (one for public and one for build)
expressApp.use(express.static(BUILD_DIR, { maxAge: MAX_AGE }));
// TODO figure out better way to set up sprites assets
expressApp.use(express.static(`${ASSETS_DIR}/sprites/dist`, { maxAge: MAX_AGE }));
expressApp.use('/static/sprites', express.static(`${ASSETS_DIR}/sprites/dist`, { maxAge: MAX_AGE }));
// so we have access to the gif sprites
expressApp.use(express.static(`${ASSETS_DIR}/sprites/backer-only/`, { maxAge: MAX_AGE }));
expressApp.use(express.static(`${ASSETS_DIR}/sprites/`, { maxAge: MAX_AGE }));

Some files were not shown because too many files have changed in this diff Show more